전자정부 웹사이트 UI·UX 가이드라인

  뉴딜코리아 홈페이지 

전자정부 웹사이트 UI·UX 가이드라인

행정안전부에서는 전자정부 서비스의 사용자 편의성을 향상시키고 사용자 관점에서 공공 웹사이트를 설계할 수 있도록 "전자정부 웹사이트 UI·UX 가이드라인"을 마련하였습니다.

행정·공공기관에서는 웹사이트를 신규 구축하거나 개선할 경우, 전자정부 웹사이트의 사용성 개선을 위해 본 가이드라인의 사용자인터페이스·경험(UI·UX)을 준용하여 주시기 바랍니다.

전자정부 웹사이트 UI·UX 가이드라인은 사용자에 대한 이해를 바탕으로 전자정부서비스를 효율적으로 제공할 수 있는 설계 방안을 제공합니다.

가이드라인은 전자정부 웹사이트의 UI·UX에 대한 설계 원칙, 설계 기준, 설계 가이드, 품질 진단서(품질 점검표, 품질 평가표)로 구성되어 있습니다.

다음 목록에서 추진하고자 하는 전자정부 웹사이트 작업이 무엇인지 확인한 후 작업과 관련된 가이드라인 내용을 빠르게 찾아 볼 수 있습니다.

■ UI·UX를 분석․설계할 때,

구축 또는 개선하고자 하는 웹사이트 유형과 특성을 확인한 후, “설계 가이드”에서 해당하는 UI패턴 유형(공통 패턴 22개, 특화 9개) 별 사용성(134개) 및 접근성(44개) 체크리스트, 적용 예시를 참조하여 분석·설계합니다.

웹사이트 설계의 방향성은 “설계 원칙”에서, 구체적인 점검사항과 행동방안은 “설계 기준”에서 확인가능 합니다.

 o UI·UX 설계 원칙 ․ 011p
 o UI·UX 설계 기준 ․ 018p
 o UI·UX 설계 가이드 ․ 027p

■ 사업 발주서를 작성할 때,

사업 참여자들은 설계 원칙이 담고 있는 전자정부 웹사이트 사용자경험 설계의 목적, 방향성, 기대효과를 충분히 이해하고 숙지해야 합니다.

사업에 반영될 수 있도록 제안요청서(RFP, Request For Proposal)에 설계 원칙을 포함시켜야 합니다.

 o UI·UX 설계 원칙 ․ 011p
 o UI·UX 설계 기준 ․ 018p

■ UI·UX 품질을 점검할 때,

품질 점검표(필수 74개 항목, 권장 60개 항목)에 기반하여 UI·UX 관점에서의 전자정부 웹사이트 개선 지점을 확인하고, 설계 가이드의 해당항목을 참조하여 개선합니다.

 o UI·UX 설계 가이드 ․ 027p
 o UI·UX 품질 점검표 ․ 127p

■ 사용성과 관련된 만족도를 조사할 때,

유용성, 효율성 등의 사용성을 측정할 수 있는 품질 평가표(26개 항목)를 활용하여 전자정부 웹사이트에 대한 사용자들의 만족도 수준을 확인하고 설계 기준의 해당항목을 참고하여 개선합니다.

 o UI·UX 설계 기준 ․ 018p
 o UI·UX 품질 평가표 ․ 154p

☞ 첨부파일 : 전자정부 웹사이트 UI·UX 가이드라인.pdf(배포본) 

 - 행정안전부 (작성자 : 정보자원정책과 / 박태균 / 044-205-2811 )

웹품질, 웹접근성, 웹표준 진단
홈페이지/DB 내 개인정보를 점검/ 분석
웹 취약점 진단 및 모의해킹

컨설팅 : ISMS, ISO27001  GDPR,PCI-DSS  

070-7867-3721, ismsbok@gmail.com

모바일 웹 애플리케이션 로드맵 새로운 버전 발표 (W3C)

 뉴딜코리아 홈페이지

■ 모바일 웹 애플리케이션 로드맵 새로운 버전 발표 (W3C)
(NEW VERSION OF THE ROADMAP OF WEB APPLICATIONS ON MOBILE)


▶ 2019년 1월 7일, W3C는 모바일 웹 애플리케이션 로드맵의 새로운 버전을 발표함

  - 로드맵의 내용은 2018년 7월 이후 웹 플랫폼의 변화를 반영하여 업데이트 되었으며, W3C에서 개발된 웹 응용 프로그램의 기능을 향상시키는 다양한 기술과 이를 모바일 환경에서 더욱 구체적으로 적용시킬 수 있는 방법을 요약하고 있음


▶ 특히, 네이티브와 갭을 줄이기 위해 웹 플랫폼 인큐베이터 커뮤니티 그룹(WICG, Web Platform Incubator Community Group)에서 최근 논의한 내용이 반영되어 있음


▶ 주요 업데이트 내용

 ○ 구분 : 시험 작업 (Exploratory work)
   - 미디어(Media)에서 자동재생 정책 언급
   - 애플리케이션 수명주기(Application Lifecycle)와 네트워크 및 통신 (Network and Communications)에서 백그라운드 패치(Background Fetch) 언급
   - 그래픽 및 레이아웃(Graphics and Layout)에서 CSS 페인팅 API 레벨 1 언급
   - 성능 및 튜닝(Performance and Tuning)에서 디스플레이 잠금 표시
   - 애플리케이션 수명주기(Application Lifecycle)에서 포털 언급
   - 사용자 상호작용(User Interaction)에서 WebHID 언급
   - 그래픽 및 레이아웃(Grophics and Layout)에서 스크롤 링크 애니메이션 언급

 ○ 구분 : 진행 중인 기술 (Technologies in progress)
   - WebXR Device API를 미디어(Media)에서 진행 중인 기술로 이동
   - 보안 및 개인 정보(Security and Privacy)에서 웹 인증 설명 업데이트

 ○ 구분 : 잘 적용된 기술 (Well-deployed technologies)
   - 포인터 이벤트를 사용자 상호 작용(User Interaction)의 잘 배치된 섹션 으로 이동


※ 사이트 : https://www.w3.org/blog/news/archives/7475

​


>> 웹 표준/ 접근성 진단 주요 솔루션 ……………………………………………………………………………….......................
.............................................................................................................................
…… CoolCheck!™ Privacy Monitoring System  ::::: 홈페이지 개인정보 노출점검 통합관제 시스템
…… CoolCheck!™ Enterprise                   ::::: 홈페이지 통합관제(품질진단/개인정보진단/접근성진단)
…… CoolCheck!™ Accessibility                ::::: 웹표준/접근성진단/자산관리
…… CoolCheck!™ Privacy                       ::::: 개인정보진단/기술적오류진단
…… CoolFilter!™                                  ::::: 홈페이지 게시판 개인정보 등록차단
…… CCD (CoolCheck!™ Desktop)             ::::: PC내 개인정보 관리/점검/암호화저장
...............................................................................................................................
문의 : 뉴딜코리아 솔루션사업부 (070-7867-3721, ismsbok@gmail.com) 

출 처 W3C
​

전자정부(행정·공공기관) 웹사이트 웹 접근성·호환성 수준진단 방법

 뉴딜코리아 홈페이지 

1. 전자정부 웹사이트 웹 접근성·호환성 수준진단 방법

□ 수준진단 기준

❍ (웹 접근성) 국가표준 「한국형 웹 콘텐츠 접근성 지침 2.1」 24개 검사항목을 2개 전문가 그룹의 교차 수동 평가에 의한 준수도 수준진단

❍ (웹 호환성) 행안부고시 「전자정부서비스 호환성 준수지침」의 진단표에 따라 웹 표준문법(HTML, CSS) 및 호환성(기능, 화면표시), 비표준 기술제거 여부에 대한 자동평가 및 전문가 평가에 의한 준수도 수준 진단

□ 수준진단 환경

❍ (웹 접근성)
- (수준진단 도구) 웹 접근성 자동 검사도구*, 정보통신 보조기기(화면낭독프로그램, 화면확대SW) 등 활용
 * 자동검사도구 : OpenWax, Web Developer, Google Accessibility 등 활용

- (수준진단 활용 웹브라우저*) 인터넷익스플로러(IE) 버전 11, 크롬
 * 웹브라우저 이용률이 높은 크롬(31.98%), IE11(29.16%) 선정( gs.statcounter.com(‘18.2월 기준)

❍ (웹 호환성)
- (수준진단 도구) 웹 표준 문법(HTML, CSS) 자동 검사도구 활용, 호환성
(기능, 화면표시)은 직접 4대 웹브라우저 수동 평가
 * 웹 표준 자동검사도구 : W3C Validator(HTML, CSS) 활용
- (수준진단 대상 웹브라우저) IE11, 크롬, 파이어폭스, 엣지
 * 웹브라우저 이용률 및 레이아웃 엔진이 다른 웹브라우저 선정

붙임1> 웹 접근성 검사항목별 수준 진단 방법
붙임2> 웹 접근성 검사항목별 수준 진단 평가도구 설명

2. 2018년 행정·공공기관 웹사이트 수준진단 설명회 자료집

❍ 웹 호환성

 다양한 웹브라우저에서 웹사이트를 동등하게 이용할 수 있는 것

❍ 웹 표준
 웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 것

❍ 웹 접근성
 어떠한 사용자(장애인, 노인 등), 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것

☞첨부파일 :

- 전자정부웹사이트웹접근성및호환성수준진단방법소개(뉴딜코리아)

- 행정공공기관웹사이트수준진단설명회자료집(2018)

- 한국형웹콘텐츠접근성지침2.1

웹사이트 통합관리(접근성진단/품질진단/개인정보진단/자산관리)

070-7867-3721,  ismsbok@gmail.com

반응형 웹의 진실 트렌드 따라가다 내실 놓친다

반응형 웹의 진실 트렌드 따라가다 내실 놓친다 

 뉴딜코리아 홈페이지 | 뉴딜코리아
http://cafe.naver.com/rapid7/2548

반응형 웹의 진실

트렌드 따라가다 내실 놓친다

반응형 웹’, IT트렌드라 불러다오!반응형 웹은 어떻게 트렌드가 됐나

국내에 스마트폰이 도입된 지 불과 7년. 셀 수 없이 등장한 다양한 디바이스들은 시공간 제약을 무의미하게 만든 채 언제 어디서나 정보로의 접근을 가능하게 만들었다. 기술은 시각을 다투며 급속도로 발전했고, PC뿐만 아니라 스마트폰, 태블릿, 심지어 TV에서도 웹에 접속할 수 있는 IT환경이 만들어졌다.

웹에 접근할 수 있는 디바이스의 폭이 넓어진 만큼, 개발자 들은 각각의 디바이스에 적합한 해상도와 레이아웃을 일일이 대응해야 한다는 골칫거리가 생겼다. 이런 이슈의 해결방안으 로 대두된 것이 바로‘반응형 웹(Responsive Web)’이다.

반응형 웹은 웹디자이너 매거진‘A List Apart’2010년 5월 호에 실린‘Responsive Web Design’에서 처음 소개됐다. 반 응형 웹은 우리가 여러 채널을 통해 지겹도록 들어온‘스마트 기기의 파편화’문제를 깔끔하게 해결해줄듯, 그렇게 한줄기 빛처럼 등장했다.

‘스마트한 웹 페이지’구현이 가능하다는 점에서 최신기술 로 인정받는‘반응형 웹’은 한 번의 개발로 디스플레이 종류에 따라 화면의 크기 및 해상도가 자동으로 조절돼‘최적화된 화 면’을 보여주는 웹 구현방법이다. 즉, 반응형 웹은 단 하나의 소스코드로 N스크린(N-Screen)에 맞춰 화면이 자동으로 최 적화되는 것을 목표로 삼아, 사용자 환경 변화에 즉시 반응할 수 있도록 구현된다.

반응형 웹을 사용하는 입장에서는 어느 기기에서든 동일한 웹페이지를 제공받을 수 있고, 기업 및 개발자 입장에서는 기 기마다 따로 코드를 개발/관리하지 않아도 되기 때문에 초기 개발비용을 절감할 수 있을 뿐만 아니라 유지관리까지도 용이 해진다. 국제 웹표준화 기구인 W3C에서 웹표준으로 지정한 HTML, CSS3로 소스코드가 작성된다는 점 또한 반응형 웹의 장점으로 거론된다.

반응형 웹은 앞서 말한 매력 포인트들로 인해 IT시장에서 인 기급상승 물결을 탔고, 어느새 IT트렌드로 자리매김하게 됐다. 반응형 웹이 분명 매력적인 장점들을 갖고 있는 것은 분명하 다. 하지만 하루가 멀다 하고 쏟아져 나오는 수많은 기기에 대 응하기 위한‘유일무이한 해결책이 반응형 웹인가?’라는 의문 은 떨칠 수가 없다.

이에 필자는 발상의 전환을 시도해보기로 한다. 앞서 말한 반응형 웹의 지향점은 참으로 이상적인 듯하나, 단순히 해상도 와 화면 사이즈를 조절해 많은 정보를 압축해 한 화면에 담아 내는 것이 사용자에게‘진정한 만족감’을 줄 수 있을지는 생각 해봐야 할 문제다.

트렌드니까! 무조건 무조건이야~묻지도 따지지도 말라? 반응형 웹, 모든 사용자에게 만능열쇠가 될 것인가

모바일 시장의 성장과 모바일 기기가 갖고 있는 무수한 기능 들로 인해 현재‘모바일’을 빼놓고는 웹을 논할 수 없는 상황이 다. 이에 웹 기획의 핵심 지침은‘모바일 퍼스트 전략(Mobile First Strategy)’이 됐다.

모바일 퍼스트 전략은 최소 단위인 모바일을 기준으로 삼아 태블릿, 데스크톱(PC) 순의 더 큰 해상도로 점차 웹페이지를 변형·확장하는 방법이다. 기획자는 이 전략을 바탕으로 사용 자 환경 변화에 퍼센트(%)로 반응하게 할 것인지, 물리적 사이 즈(해상도)로 반응하게 할 것인지 등의 기준을 잡고 웹의 레이 아웃을 설계하게 된다. 이때‘레이아웃 단순화’를 핵심으로 삼 는다.

또한 레이아웃 안을 채울 콘텐츠는 일관된 형태여야 하며 디 자인 또한 통일감 있게 표현돼야 하는데, 화면 사이즈에 따라 바뀌는 유동적 레이아웃을 최소 사이즈의 디바이스에서도 어 느 정도 가독성 있는 형태로 유지해야 하기 때문이다.
이렇게 기획된 반응형 웹은 화면이 커짐에 따라 콘텐츠 영역을 넓히는 방식을 택하기 때문에 복잡한 화면 설계를 필요로 하지 않는 다.
그런데 이 전략은 우리나라 IT시장에서 난항을 겪을 수밖 에 없다. 우리는 많은 정보를 압축해 한 화면에 표현하는 것을 선호하는 편이다.
이는 국내기업이 운영하는 대표 포털사이트 ‘네이버’와 미국 기업이 운영하는 포털사이트‘구글’첫 페이 지만 비교해봐도 쉽게 이해할 수 있을 것이다.

일반적으로는 많은 정보를 제공해야 하는 포털이나 쇼핑몰 등에 사용자의 문 화적 인지 특성으로 인한 기호(嗜好)가 작용하는데, 기호는 사 용자가 웹 완성도를 평가하는 기준이 되고 궁극적으로는 웹 사 용빈도에 지대한 영향을 미치게 된다.

예를 들어, 많은 정보를 한 화면에서 보고 싶어 하는 우리나 라의 사용자는 콘텐츠 양이 적거나 이미지 사용이 적은 웹을 ‘완성도가떨어진다’고평가하고,‘ 정보가없네’,‘ 내가원하는 사이트가 아냐’라고 판단해 더 이상 사용하지 않게 된다는 것 이다. 이러한‘웹 구현 방식’과‘사용자 만족도’간의 인과관계 는 기업 업무용 시스템에서 더욱 명확하게 드러난다. 웹 구현 방식이 사용자 기호, 즉 사용자 편의성에 부합하느냐에 따라 생산성 및 업무효율성에 극명한 차이를 보이기 때문이다.

반응형 웹이 해결해야 할 이슈가 단순히 사용자 기호에 국한 된 것이라면 그나마 다행이련만, 반응형 웹은 더 큰 숙제들을 떠안고 있다. 현실적으로 반응형 웹 구현에 있어 기획자가 처 음 기획했던 대로 원하는 가독성을 얻기란 많은 경우 불가능하 다.

물론 모든 텍스트의 가독성이 떨어지는 것은 아니다. 그러나 표를 이용한 텍스트 설명이나 이미지 텍스트를 사용해야 할 경 우, 반응형 웹의 기본 논리에 따라 디바이스 해상도에 맞춰 강 제로 크기를 축소시키기 때문에 가독성이 떨어지고 결국 정보 전달력이 약해질 수밖에 없다.

PC나 태블릿에 비해 가독성이 떨어지는 모바일 기기에서 로 딩속도까지 느리다면 어떨까? 아마도 사용자는 반응형 웹으로 구현된 사이트를 이용하고 싶지 않을 것이다. 그런데 실제로 반응형 웹은 로딩속도 이슈도 갖고 있다.

반응형 웹은 HTML5로 코딩하고 CSS3에 각 디바이스별로 레이아웃을 지정하는 미디어쿼리를 전부 불러오게 되는데, 이 때 모든 장치를 위한 CSS를 로드하게 된다. 불필요한 수백 개 의 소스를 미리 불러들이는 이 작업으로 웹 로딩속도는 현저히 느려지게 되고, 이는 결국 사용자가 불편함을 느끼게 되는 요 인이 된다. 반응형 웹의 로딩속도 이슈는 PC와 태블릿에서도 발생하지만, 이들에 비해 암묵적으로 더욱 빠른 속도를 요구받 는 모바일에서는 특히 부각돼 문제시된다.

이뿐만이 아니다. 오래된 웹사이트들은 PC용으로만 제작된 경우가 많아, 기존 사이트를 반응형 웹으로 변경할 경우 사이 트를 전부 새로 구축하는 경우가 대다수다. 업데이트상의 문제 도 있다. 미디어쿼리를 이용해 웹을 구축한 후 페이지 내 새롭 게 콘텐츠를 추가해야 하는 경우, 브라우저, OS(운영체제), 기 기, 속도 등과 같은 다양한 변수들에 대해 일일이 테스트를 거 쳐야 한다는 번거로움이 발생한다.

간단한 텍스트 수정 정도는 용이할 수 있겠으나, 정보를 담 고 있는 콘텐츠의 추가/삭제는 레이아웃을 변경해야 하는 대대 적인 작업이 수반된다. 반응형 웹이 무조건 유지보수가 편리하 다는 주장은 해상도와 크기에 구애받지 않을 정도의 아주 단순 한 콘텐츠만을 보유하고 있거나, 향후 콘텐츠의 추가·삭제가 발생하지 않는 경우에만 해당된다고 보면 된다.

반응형 웹 언어인 CSS3는 애니메이션과 캔버스 등과 같이 새로운 스타일을 통해 이미지나 플래시(Flash), 자바스크립트 (JavaScript)를 사용하지 않고도 웹사이트를 구축할 수 있다는 장점이적용하는 것은 불가능하다. CSS3의 경우 브라우저 종류나 버전에 따라 지원 상태가 다르다는 점이 가장 큰 이유이다. 미디어쿼리를 사용하 는 반응형 웹은 CSS3 기술이 적용되기 때문에 인터넷익스플로 러(IE) 9부터 지원하고 있고, 타 브라우저도 버전별로 일부 태 그들은 지원하지 않는 경우들도 많다.

이런 문제는 하위버전을 사용하는 유저를 버리고 갈 것인지, 하위버전 전용 페이지를 추가로 만들어 별도로 제공할 것인지, 하위버전 전용 라이브러리를 추가할 것인지 등을 선택해야만 하는 상황을 초래한다. 기업이나 공공기관, 금융권에서는 아직 까지 IE7,8을 사용하는 곳이 적지 않기 때문에 반응형 웹을 모 든 브라우저에 최적화시키기란 불가능하고, 반응형 웹을 꼭 구 현해야 하는 경우라면 IE9 이하는 포기해야 하는 것이 현실이 다. (2015년 1월부터 현재까지를 기점으로 국내 브라우저 버전 별 점유율 통계에서 IE8 사용자들이 13% 이상을 차지한다) 상위 버전 브라우저라 할지라도 각 브라우저별로 적용되는 스타일 태그들이 상이하며, 실제 화면에서 보이는 디자인 또한 달라 크로스 브라우징이 쉽지 않다. 반응형 웹에서 크로스 브 라우징은 기본인데, 다양하고 방대한 문제점들로 인해 기획단 계에서 제한을 두고 작업하는 경우들이 빈번하다.  

정리해보자면, 레이아웃의 제약, 브라우저별 CSS3 지원 여 부 등등 수많은 문제점이 있음에도 반응형 웹을 고집하는 단 하나의 이유는‘관리자의 편리’때문이다.

 반응형 웹을 적용하 기 위해 많은 양의 콘텐츠를 축소시키고, 하나의 소스로 기기 별 코드를 관리하면 되기 때문에 유지 보수 비용도 줄어든다. 소스뿐 아니라 콘텐츠 내용 자체를 최대한 단순화시켜 야 하므로 보이는 화면 자체의 관리도 훨씬 수월해진다.

그런데 사용자는 반응형 웹이 뭔지, 웹표준이 적용됐는지, 유지보수는 용이 한지 등 어렵고 복잡한 내용에는 관심 이 없다. 단지 빠르게 접속할 수 있고, 원하는 정보를 최대한 많이 정확하게 파악할 수 있는 웹사이트를‘유용한 사 이트’혹은‘잘 구축된 사이트’로 여길 뿐이다.

반응형 웹은 사실 운영자나 개발자의 편의를 위한 것이나, 이상적인 목표와 장점만을 강조해 마치 사용자에게 이점을 주는듯 그럴싸하게 포장돼왔다. 많은 클라 이언트들은 반응형 웹을 둘러싼 이 예쁜 포장에 현혹돼 사용자 입장에서 고려해야 할 많은 부분들을 간과하게 된다. 바로‘웹 사이트의 목적’과‘사용자 편의성’이다.

웹사이트의 목적을 충분히 반영하고 사용자 입장을 고려한 사례는 국내 대표 포털사이트‘네이버’와‘다음’이다. 이들은 반응형 웹으로 사이트를 구현하지 않았다. 국내 굴지의 기업에 서 기술력이 부족해 반응형 웹을 적용하지 못한 것일까? 아니 다. 이 웹사이트들은‘정보 공유 및 제공’이라는 포털사이트 목 적에 충실했고, 주요 사용자인 한국인의 특성을 고려하며, 관 리자의 편의보다 사용자의 편의를 우선시해 궁극적으로 UX(사 용자 경험) 만족도를 높이고자 했다. 그리고 이들은 모바일 시 장에서도 굳건히 자리를 지키며 제 역할을 다하고 있다.

‘네이버’와‘다음’의 웹 구현방식은‘적응형 웹(Adaptive Web)’이다. 반응형 웹과 적응형 웹은 모두 근본적으로는 웹사 이트가 모바일 기기 등 여러 다양한 디바이스 화면에서 원활한 정보를 제공하고, 더 나은 UX를 제공하고자 한다.

‘반응형 웹’은 미디어쿼리를 사용해 화면크기를 확인하고, 유연한 그리드로 화면 크기 변화에 따라 그에 알맞은 크기로 최적화된다는 특징이 있으나, 앞서 언급한 많은 문제점들을 갖 고 있다. 반면, 적응형 웹은 모든 스크린 사이즈에 최적화된 화 면을 구현하는 정교함은 떨어진다. 하지만 디바이스에 최적화 된 이미지를 사용하고, 자바스크립트를 통해 장치를 분석하고 그에 맞는 동작을 적용해 화면을 구현한다.

이 방식은 서버나 클라이언트에서 웹에 접근한 디바이스를 확인하고 그 디바이스에 최적화된 마크업을 호출하게 되는데, 이때 마크업은 필요한 정보만을 노출시켜 보다 빠른 속도로 모 바일에서 웹사이트를 이용하게 도와준다. 디바이스에 최적화 된 화면을 보여주는 것이 아니라, 최적화된 성능을 가져오는 방식인 것이다.

당신은 개발자일 수도, 관리자 혹은 기업 IT담당자일 수도 있다. 당신은 눈앞에 닥친 웹사이트 구축 프로젝트를 수행해야 혹은 책임져야 한다. 당장 눈앞에 봉착한 이 프로젝트를 모바 일 퍼스트 전략을 바탕으로 반응형 웹을 적용해 단순하게 기 획·구축하고, 향후에도 편리하게 관리하고 싶은 마음이 굴뚝 같을 것이다. 그런데 이렇게 만들어진 당신의 웹사이트를 사용 자들이 이런저런 불편함을 호소하며 이용하지 않는다면, 그 웹 사이트를 만든 의미가 있을까?

필자는 개발자, 관리자, 사용자의 입장을 상호 배려하면서도 실효성 있는‘적응형 웹’을 상기 질문에 대한 해답으로써 컴퓨 터월드 6월호를 통해 집중 조명해볼 예정이다. 적응형 웹에 대 한 이론은 많이 접해봤을 독자들을 위해 실질적이고 현실적인 사례를 통한 접근을 시도해보도록 하겠다. 필자의 다음 글을 접하기전까지,‘ 반응형웹이최고’라는잘못된상식이부디당 신의 머릿속에서 깨끗하게 지워지기를 바라본다


출처 : 디비가이드

HTML5 기술표준 동향

HTML5 기술표준 동향

1. 머리말

 
HTML5는 차세대 웹 표준 언어이다.

기존의 HTML이 텍스트기반으로 정보를 표현 하였다면 HTML5는 ActiveX등 플로그인 설치 없이 비디오, 오디오 파일등 다양한 컨텐츠를 브라우저에서 표현 할 수 있게 되었다.

이는 한 번의 개발로 OS플랫폼에 대한 의존도를 감소시킬 수 있고 사용자들도 장치에 상관없이 동일한 서비스를 받을 수 있는 장점이 있다.

최근 화두가 되고 있는 표준으로 WebRTC가 있다.

WebRTC기술은 웹에서 P2P기반 화상통화나 데이터 통신지원을 가능하게 하는 기술이다. 이 기술 활용하면 한 번의 개발로 PC나 스마트 장치에서 별도의 프로그램 설치 없이 화상통화를 할 수 있어 기존의 화상회의 시스템보다 경제적인 비용으로 스마트워크를 할 수 있다.

 
2. HTML5 기술 동향 및 활용 예시

2.1 HTML5 기술

HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다.

 2004년 7월 Web Hypertext Application Technology Working Group(WHATWG)에서 웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다.

HTML5는 HTML 4.01, XHTML 1.0, DOM 레벨 2 HTML에 대한 차기 표준 제안이다.

비디오, 오디오 등 다양한 부가기능과 최신 멀티미디어 콘텐츠를 액티브X 없이 브라우저에서 쉽게 볼 수 있게 하는 것을 목적으로 한다.

W3C는 2014년 10월 28일, HTML5 표준안을 확정했다고 발표했다.

[표1] HTML5 주요기능

HTML5 주요기능

주요 기능	설 명
3D, GRAPHICS & Effects	다양한 2차원 3차원 그래픽을 지원
Connectivity	웹(클라이언트)에서 서버 측과 직접적인 양방향 통신 가능
CSS3	글씨체, 색상, 배경 등 다양한 스타일 및 이펙트 기능 제공
Device Access	카메라, 동작센서 등의 H/W기능을 웹에서 직접적으로 제어
Multimedia	비디오 및 오디오 기능을 자체적으로 지원
Offline & Storage	네트워크 미지원 환경에서도 웹 이용을 가능하게 함
Performance&Integration	GPS없이도 단말기의 지리적인 위치 정보를 제공
Semantics	웹 자료에 의미를 부여하여 사용자 의도에 맞는 맞춤형 검색 제공

2.2 HTML5.1

W3C는 HTML5표준에 수정과 추가 필요한 내용들을 정리하여 HTML5.1표준을 개발 중에 있다.

W3C는 2014년에 HTML5 표준 개발을 확실히 마무리하기 위해 2014년까지 정리가 어려운 이슈들을 따로 정리하여 차기 버전인 HTML5.1표준에 반영하고자 하였다.

현재 HTML5.1은 계획된 일정에 따라 개발이 진행되고 있어 2016년 6월 중순 CR(Candidate Recommendation) 및 2016년 9월 최종 표준 승인이 진행될 예정이다.

HTML5.1 스펙 개발 작업은 주로 새로운 API나 이벤트 등 새로운 기능을 추가하는 작업, 기존의 표준 내용을 수정하거나 실제 활용성이 떨어지는 기능은 삭제하는 방식으로 진행 되고 있다.

2016년에 HTML5.1에서 구체적으로 정리된 내용들을 보면 Accesskey애트리뷰트의 갓은 단일 문자만 허용하도록 수정되었고, 패치(Fetch)또는 로딩 알고리즘에서 필요시 미디어 엘리먼트(Media Element)에서 미디어 소스(Media Source)를 분리시키는 기능이 추가 되었다.

또한 2013년에 HTML5 스펙에서 분리된 마이크로데이타(Microdata) 관련 애트리뷰트가 제거되었고, WHATWG(Web Hypertext Application Technology Working Group)와 조율 작업을 하고, 표준 추가의 장점이 없다고 생각하여 ＜iframe＞에서의 seamless 애트리 뷰트 및 테이블 정렬 모델을 스펙에서 삭제하였다.

 또한, ＜figure＞ 엘리먼트 내에서 ＜figcaption＞의 위치가 어디든 표현 가능하도록 수정하였고, 보안 이 슈 및 사용률이 낮은 ＜isindex＞를 삭제하였다.

이 밖에도 추가, 수정 또는 삭제된 내용들에 대 한 자세한 변경 사항을 확인하고 싶다면 HTML5.1 WD(Working Draft)[2]의 변경(Changes) 부분을 참고하면 된다.


2.3 기타 HTML5기반 웹 표준

WebRTC (Web RealTime Communication)

WebRTC는 브라우저에서 ActiveX나 Plug-in설치 없이 실시간 영상통신을 할 수 있는 웹 표준 기술이다.

현재 W3C에서 표준을 개발을 진행 하고 있으며 향후 웹 기술의 활용성을 크게 확대 할 수 있는 잠재력이 매우 큰 기술로 평가받고 있다.

현재 가장 기본적이며 핵심적인 두개의 표준에 대한 CR(Candidate Recommendation)개발에 집중하고 있다.

 카메라나 마이크에서 들어오는 미디어 스트림 데이터에 대한 접근 및 제어에 관한 ‘Media Capture and Streams’ CR(Candiate Recommendation) 표준안을 공개하였고, P2P 기반의 연결, 동영상 데이터 전송 및 데이터 전송 기술과 관련한 WebRTC1.0 표준안은 현재 WD(Working Draft)마무리 단계에 있어 머지않아 CR(Candidate Recommendation)단계로 넘어갈 것으로 예상된다.

중요한 점 중의 하나는 이미 크롬, 파이어 폭스, 오페라 브라우저에서 WebRTC표준 기술을 구현하여 지원하고 있으며 마이크로 소프트 엣지(Edge) 및 애플의 사파리 브라우저도 WebRTC표준 기능을 개발 중에 있는 것으로 알려져 있어 향후 WebRTC기반의 다양한 서비스 생태계가 구축될 것으로 예상된다.


3. 맺음말

스마트기기의 사용이 늘어나면서 대다수의 직장인들이 2대 이상의 장치를 사용하여 정보를 습득하고 다양한 서비스를 경험한다.

HTML5기술은 특정 서비스를 받기 위해 장치마다 별도의 프로그램을 설치하는 번거로움 없이 동일한 서비스를 받을 수 있는 기술로 사용자에게 매우 유용하다.

또한 ActiveX와 같은 플러그인 설치로 인한 바이러스 감염과 같은 폐해를 없앨 수 있는 기술로 지속적인 관심과 정부, 공공기관, 기업체들의 적극적인 활용이 필요하다고 판단된다.

[참고문헌]
[1] W3C 핵심 표준 개발 동향, 이원석 박사(ETRI), 이승윤(ETRI)
[2] HTML5, W3C, October 2014, https://www.w3.org/TR/html5/
[3] HTML 5.1, W3C, May 2016, https://www.w3.org/TR/html51/
[4] WebRTC 1.0: Real-time Communication Between Browsers, W3C, January 2016, https://www.w3.org/TR/webrtc/

서울시, 클릭만으로 서울전역 3D 지도 보는 시스템 실시

카페 > 뉴딜코리아 홈페이지 | 뉴딜코리아
http://cafe.naver.com/rapid7/2380

서울시, 클릭만으로 서울전역 3D 지도 보는 시스템 실시

     (자료: 뉴딜코리아 홈페이지)

앞으로 서울의 어느 지역이든 골목 하나, 건물 하나까지 실감나는 3D 입체 공간정보를 PC에서 클릭 한 번으로 볼 수 있다. 지하철역, 시청사 등 159개의 공공기관은 건물 내부구조까지 3D로 볼 수 있다.

서울시가 ‘3차원 공간정보 시스템(’의 서비스 범위를 기존 6개 구에서 시 전역으로 확대하고 전국 최초로 웹표준 방식을 적용하는 내용의 고도화 작업을 완료, 15일(금)부터 서비스 한다.

시는 ’10년부터 종로구, 서대문구, 강남구, 서초구, 중구, 용산구 등 6개 지역을 고품질 항공영상을 기반으로 한 Real 3D 형태로 구현해 지도 서비스를 실시해왔다. 이를 이번에 25개 구로 확대하는 것이다.

우선 시는 서비스 지역 확대를 위해 국토교통부(이하 국토부)의 3D 기본 데이터를 확보하고 여기에 시의 부동산 서비스, 테마관광 안내 등 서비스를 추가, 복합정보를 3D 공간상에 구현했다.

국토부의 공간정보 오픈플랫폼인 ‘브이월드’의 항공사진 등 기본 정보를 활용했다.

또 국제 웹표준인 HTML5와 WebGL 등 최신 웹기술을 적용했다. 그동안 서비스 이용을 위해서 Active-X, Plug-in 등의 프로그램을 반드시 추가로 설치해야 했다면 앞으로는 별도 설치 없이 인터넷 익스플로러, 크롬 등 5개 주요 웹브라우저(인터넷 익스플로러(버전11 이상), 크롬, 파이어폭스, 오페라, 사파리) 어디에서든 서비스 이용이 가능하다.

HTML5 : 웹문서 등 서비스를 위한 기본 프로그래밍 언어인 HTML의 최신 규격이다. ’14년 전 세계 웹표준을 개발하는 국제 컨소시엄 W3C(World Wide Web Consortium)가 웹표준으로 지정한 바 있다.

WebGL : 인터넷 익스플로러, 크롬 등 일반 웹브라우저에서 3D 그래픽 구현이 가능하게 해주는 프로그램으로 현재 최신 버전의 PC와 모바일 브라우저 대부분에서 지원하고 있다.

Active-X : 마이크로소프트사에서 기존에 개발된 일반 프로그램을 웹상에서 쉽게 적용시키기 위해 개발한 기술로 웹표준과 무관하게 인터넷 익스플로러에서만 지원되기 때문에 타 웹브라우저에서는 사용이 불가하다. 현재는 호환성, 보완성 등의 문제로 사용 자제를 권고하고 있다.

Plug-in : Active-X의 호환성 문제를 개선하고자 개발된 기술로 각 웹브라우저마다 별도의 설치 과정이 필요하다.

이밖에도 고도화작업을 통해 지하철 역사, 시청사 등 공공시설 159곳의 3D 실내지도도 공간정보 안에서 볼 수 있다. 3차원으로 구현된 공간상에서 건물을 선택해 원하는 층수를 클릭하면 건물 내부구조도 3D로 확인 가능하다. 시는 건물 안팎의 3D 공간정보를 한 곳에서 제공함으로써 시너지 효과를 낼 것으로 기대하고 있다.

이 서비스는 ’15년부터 웹과 모바일로 제공하고 있는 ‘서울시 실내지도 서비스’와 연계했다. 시는 ’13년 서울형 뉴딜일자리 창출 사업을 통해 전국에서 가장 많은 데이터를 구축·보유할 수 있게 됐다.

3차원 공간정보 위에 교통 CCTV 영상, 서울시정 홍보영상 등 동적 콘텐츠를 융·복합해 구현하는 서비스도 시범운영한다. 주요지점 2곳(남대문로, 경부고속도로 서초1교)을 검색하면 그 지역의 실제 교통 CCTV 영상을 볼 수 있다. 서울 도서관 정문 위 현판 자리에서는 서울시정 홍보영상이 음향까지 재생된다. 융·복합 서비스는 향후 이용자 의견 등을 수렴해 확대해나갈 예정이다.

아울러 시는 이용자가 3차원 공간정보를 단순히 확인하는 데서 그치는 것이 아니라 나아가 이를 응용해 직접 프로그램이나 서비스를 개발할 수 있도록 정보를 공개하는 ‘Open API’ 등으로 서비스를 확대할 계획이다.

‘Open API’는 지도 서비스 등에서 시도되고 있으며 누구나 접근해 사용할 수 있다는 장점이 있다.

또 향후 공간정보 갱신에 소요될 비용과 시간을 절감하기 위해 항공사진 기반의 3D 모델링 자동화 기술 도입, 드론 촬영 영상 활용, 민간 포털과의 3차원 공간정보 공동 활용 등 다각적인 방안을 검토, 적용해나갈 계획이다.

최영훈 서울시 정보기획관은 “3차원 공간정보 시스템 서비스 확대는 정부3.0 정책에 걸맞게 3D 공간정보를 누구나 쉽게 활용할 수 있도록 하는 서비스 기반 구축이 목적”이라며 “이를 토대로 향후 모바일을 통해서도 다양한 융·복합 서비스를 제공해 시민들이 언제 어디서나 3차원 공간정보 서비스를 활용할 수 있도록 할 것”이라고 말했다.

서울시 3차원 공간정보 시스템: http://3dgis.seoul.go.kr
브이월드 : http://www.vworld.kr
서울시 실내공간 서비스: http://indoormap.seoul.go.kr

출처 : 뉴스와이어
제공 : 데이터 전문가 지식포털 DBguide.net 

글로벌 웹 표준 문서의 한글 번역본

카페 > 뉴딜코리아 홈페이지 | 뉴딜코리아
http://cafe.naver.com/rapid7/2324

글로벌 웹 표준 문서의 한글 번역본

글로벌 웹 표준 문서 :
국제 웹표준 단체(W3C)에서 표준 제정한 문서로, 웹 표준 기술들에 대한 요건을 설명한 문서

우리가 일상적으로 사용하는 PC·모바일 등 다양한 기기에서 편리한 웹서비스를 이용하기 위해서는 HTML5나 CSS 등의 웹 표준기술이 꼭 필요


번역된 웹 표준 문서 24개의 내용

웹 표준 문서 내용 요약

 

번호	웹 표준 문서 내용 요약
1	Accessible Rich Internet Applications (WAI-ARIA) 1.0 장애를 가진 이용자가 웹을 자유롭게 이용할 수 있도록 장애 보조 기기(화면낭독 SW 등)와 웹 브라우저 간 통신 규격을 정의
2	XML Encryption Syntax and Processing Version 1.1 데이터를 암호화하고, 그 결과를 XML로 표현하는 절차에 대해 설명
3	Timed Text Markup Language 1 (TTML1) (Second Edition) 자막 정보를 표현하는 언어(엘리먼트 및 속성 등)를 정의
4	XML Path Language (XPath) 3.0 XML 문서의 엘리먼트를 탐색하는데 사용하는 언어인 XPath를 정의
5	Linked Data Platform 1.0 링크드 데이터 형태의 자원을 제공하는 서버로부터 자원에 대한 접근, 갱신, 생성, 삭제 서비스를 제공하는 RESTful HTTP 서비스 생성을 위한 플랫폼을 설명
6	Server-Sent Events 웹 서버로부터 푸시(Push) 메시지와 같은 데이터를 받기 위한 API 및 메시지를 정의
7	Progress Events 어떤 작업(이미지, 오디오, 비디오 등 로딩)의 진행률을 조회하는 API 및 이벤트 등을 정의
8	XML Signature Syntax and Processing Version 1.1 웹 메시지의 위변조 방지에 사용되는 XML 전자서명에 관한 문법 및 처리 규정 등을 정의
9	XML Signature Properties XML 전자서명에 사용되는 속성(attributes) 관련 구문과 처리 규정을 정의
10	Page Visibility (Second Edition) 웹 페이지가 사용자에게 현재 노출되고 있는지 여부, 즉 가시성을 확인하는 API를 정의 가시성에 따라 동작을 조정하여, CPU 및 전력 사용률 절약 가능
11	WAI-ARI 1.0 User Agent Implementation Guide 웹 브라우저가 ARIA로부터 제공된 각종 정보를 어떻게 처리해야 할지 설명한 구현 가이드 *ARIA : 웹 접근성을 고려한 리치 인터넷 어플리케이션
12	Performance Timeline Navigation Timing, Resource Timing, User Timing 등을 포함하는 통합 성능 측정 API 정의 *Navigation Timing : 웹 페이지 탐색 속도를 측정하기 위한 API *Resource Timing : 웹 리소스 조회 속도를 측정하기 위한 API
13	User Timing 자바스크립트의 처리 속도를 정확히 측정하기 위한 API를 정의
14	Widget Interface 웹 위젯의 데이터를 조회 및 저장하는 API를 정의 *웹 위젯 : 웹 사이트에 붙여 사용할 수 있는 일종의 미니 프로그램
15	XML Digital Signatures for Widgets 웹 위젯에 XML 전자서명을 가능하게 하는 XML 구문 및 처리 규정을 정의

16	Role Attribute 1.0 HTML 엘리먼트의 용도를 나타내는 ‘role’ 속성을 정의 *role="banner"： 헤더 부분, role="contentinfo"： 컨텐츠 부분 *role="navigation"： 네비게이션 부분, role="search"： 검색 부분 *role="complementary"： 보완, role="application"： 어플리케이션
17	CSS Namespaces Module Level 3 CSS 언어에서 네임스페이스(Namespaces)를 사용하기 위한 구문 규칙을 설명 *네임스페이스 : 이름으로 개체를 구분할 수 있는 범위
18	HTML5 Image Description Extension (longdesc) 이미지에 설명문을 달기 위한 속성인 “longdesc”를 정의
19	XQuery and XPath Data Model 3.0 XML 문서 탐색 언어인 XPath, XSLT, XQuery 등에서 사용하는 XDM(XQuery & XPath Data Model)에 대해 정의 *XDM : 다양한 타입의 데이터들이 트리 형태로 구성된 모델
20	Geolocation API Specification 단말 장치의 지리적 위치 정보를 조회하는 API를 정의
21	Pointer Events 마우스, 펜, 터치스크린 등과 같은 장치로부터 입력을 처리하기 위한 이벤트, API를 정의
22	CSS Style Attributes HTML에서 폰트, 배경색, 크기 등을 조절하기 위해 사용되는 style 속성 기능들을 CSS 구문을 이용하여 처리하는 방법에 대해 설명
23	Vibration API 단말 장치의 진동을 제어하기 위한 API를 정의
24	XSLT and XQuery Serialization 3.0 트리 형태인 데이터 모델(XDM)을 문자열 형태의 데이터로 변환하는 방법(직렬화)에 대해 정의 ​ ​

 번역 완료된 웹 표준 문서에 대한 자세한 내용은 이미지에 링크된 KoreaHTML5 홈페이지를 통해 만나보실 수 있습니다. 


KoreaHTML5 홈페이지
http://www.koreahtml5.kr/jsp/infoSquare/infoStandardDoc.jsp
​