웹 퍼블리싱의 이해 - 1.웹표준, 웹접근성, 반응형웹이란?

웹 퍼블리싱의 이해

에 들어가기 앞서..
이 포스팅은 작년에 사내에서 웹디자이너 대상으로 코딩교육을 해달란 부탁을 받고 만들었던 ppt를 기반으로 작성했다. 대상이 웹디자이너였으며, 웹퍼블리싱에 대해 이해를 돕는 정도로만 간략하게 작성 되었다는 것을 참고하시길 바란다.
그리하여.. 이 포스팅의 독자는 웹에 대한 지식이 전무하신 분, 혹은 디자이너, 혹은 웹이 아닌 다른 분야의 개발자인데 웹에 대해 알고싶으신 분이면 적합하겠다.
목차는 다음과 같으며, 포스팅을 완료하는 시점에 ppt도 같이 업로드 하겠다.

1. 웹 표준

웹에서 표준적으로 사용되는 기술이나 규칙.

특정 브라우저에서만 사용되는 비 표준화된 기술은 배제하고, 모든 브라우저에 동일하게 적용될 수 있도록 W3C(World Wide Web Consortium)의 토론을 통해 나온 권고안을 사용하는 것을 말한다. 웹 문서의 구조와 표현, 그리고 동작을 구분해서 사용하는 것을 뜻한다.

---

2. 웹 접근성

신체적 제한조건을 가진 고령자나 장애인들도 이용하기에 편리하도록 웹을 구성, 디자인 하는 것.

• 인지성(Perceivable)
  정보와 사용자 인터페이스 요소는 그들이 인지할 수 있도록 사용자에게 표시될 수 있어야 한다.
  모든 텍스트가 아닌 콘텐츠에 대체 텍스트를 사람들이 원하는 인쇄, 점자, 음성, 기호 또는 간단 언어 등과 같은 형태로 제공해야 한다.
  시간을 바탕으로 한 미디어에 대한 대안을 제공해야 한다.
  정보와 구조의 손실 없이 콘텐츠를 다른 방식(예를 들면 더욱 간단한 형태로)들로 표현할 수 있어야 한다.
  사용자들이 보다 쉽게 보고 들을 수 있는 전경에서 배경을 분리한 콘텐츠를 만들어야 한다.

• 운용성(Operable)
  사용자 인터페이스 요소와 탐색은 운용 가능해야 한다.
  키보드로 모든 기능을 사용할 수 있도록 해야 한다.
  읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야 한다.
  알려진 방법으로 발작을 일으킬 수 있는 콘텐츠를 디자인하지 않아야 한다.
  사용자가 탐색하고, 콘텐츠를 찾고 그들이 어디에 위치하고 있는지를 알 수 있도록 도와주는 방법을 제공해야 한다.

• 이해성(Understandable)
  정보와 사용자 인터페이스 운용은 이해할 수 있어야 한다.
  텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다.
  웹 페이지의 탑재와 운용을 예측 가능한 방법으로 제작해야 한다.
  사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다.

• 내구성(Robust)
  콘텐츠는 보조 기술을 포함한 넓고 다양한 사용자 에이전트에 의존하여 해석될 수 있도록 충분히 내구성을 가져야 한다.
  보조 기술을 포함한 현재 및 미래의 사용자 에이전트의 호환성을 극대화해야 한다.

---

3. 반응형 웹

다양한 디스플레이에 맞춰 반응하도록 구성, 디자인 된 웹 페이지.

다양한 해상도에 대응하기 위하여 디바이스의 종류에 따라 웹 페이지 크기가 자동적으로 재조정 되는 것을 말한다. 어떤 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 만드는 웹이다. ‘모바일웹+PC웹’과의 차이점은 하나의 HTML만으로도 특정장치에서 최적화 된 환경을 제공한다는 것이다.
반응형웹의 구축에 대한 자세한 설명은 아래 링크를 대신한다.

· Deview 반응형웹 구축기 (정찬명님)
목차_
반응형 웹의 필요성
반응형 웹은 무엇인가?
반응형 웹 고려사항
반응형 웹 성능
웹 폰트 적용
이미지 파일 병합
CSS 파일 병합
JS 파일 병합
JS 지연 로딩
모바일 뷰 포트 설정
미디어쿼리 이해
미디어쿼리 활용 범위
미디어쿼리와 낡은 모바일 브라우저
미디어쿼리와 낡은 데스크톱 브라우저
가변폭 그리드 레이아웃
모바일 내비게이션 패턴
가변폭 이미지와 동영상
해상도에 따른 이미지 분기
해상력에 따른 이미지 분기
HTML5 적용
HTML5와 IE 6~8
모바일 먼저? 데스크톱 먼저?
새로 구현? 리펙토링?
반응형 웹 프레임웍