[번역] 사용자, 고객 그리고 내가 누릴 수 있는 웹 표준의 혜택!

“웹 표준을 따르면 무엇이 좋은가요? “라는 질문에 답해 줄 수 있는 문서가 되지 않을까 싶은 문서를 번역했습니다.

기존엔 별도 페이지로 되어 있었습니다.
최신판으로 내용을 업데이트 하면서 본 글에 포함하는 방식으로 변경하였습니다.

The benefits of Web Standards to your visitors, your clients and you!
(원문)
by Max Design


1. 웹 표준(The Web Standards)

“웹 표준은 범용적인 토대가 될 것이다… 월드와이드웹(WWW : World Wide Web)의 기반의 될 것이며, 브라우저와 소프트웨어가 기본적으로 같은 구문을 사용하여 웹을 해석하게 될 것이다“.
에릭 마이어(Eric Meyer)

W3C (World Wide Web Consortium)와 그 밖의 웹 표준 단체들은 웹-기반의 콘텐츠를 해석하고 만들어내기 위해 입증된 기술을 가지고 있다. 현재의 웹 표준은 다음과 같다.

구조적 언어(Structural Languages)
Extensible Hypertext Markup Language (XHTML) 1.0
XHTML 1.1
Extensible Markup Language (XML) 1.0
표현적 언어 (Presentation Languages)
Cascading Style Sheets (CSS) Level 1
CSS Level 2
CSS Level 3
객체 모델 (Object Models)
Document Object Model (DOM) Level 1 (Core)
DOM Level 2
스크립트 언어 (Scripting Languages)
ECMAScript 262 (the standard version of JavaScript)
부가적인 표현언어 (Additional Presentation Languages (Markup))
Mathematical Markup Language (MathML) 1.01
MathML 2.0
Scalable Vector Graphics (SVG) 1.0

2. 웹 표준은 무엇인가?

‘웹 표준’은 이러한 것을 위해 설계되었다:

  • 최대의 웹 사용자에게 최대의 이점을 제공함
  • 어떤 웹 문서라도 장기적인 경쟁력을 보장함
  • 산출물의 코드를 단순화하고 생산 비용을 절감함
  • 좀 더 많은 사람들과 인터넷 장치가 사이트에 접근하기 쉽도록
  • 브라우저가 계속 발전하게 되고 새로운 장치를 사용하게 되더라도, 기능적으로 올바르게 작동하도록 함

웹 디자이너와 개발자에게 웹 표준이란, 표준(구조, 표현, 객체 그리고 스크립트 언어)을 사용하고 효율적인 업무를 통해 방문자와 클라이언트, 작업자 자신에게 이득을 가져다 주는 것이다.

3. 사고 방식의 변화

전통적인 웹 사이트

전통적인 웹 사이트 개발은 인쇄용 매체외에는 확장할 수 없도록 완벽한 픽셀값에 맞춰 제작했으며, 5~6개의 메인 브라우저에서만 제대로 보여지도록 디자인되었다. 일반적인 특성은 다음과 같다 :

  • 테이블 기반의 레이아웃
  • 표현이 구조 안에 포함되어 있음 (font 태그 등을 사용)
  • 유효하지 않은 코드
  • 접근하기 어려운 코드
  • 의미상으로 바르지 않은 코드

“웹 표준”에 맞춘 웹 사이트

웹 표준은 다양한 사용자장치가 접근할 수 있도록, 넓은 의미의 커뮤니케이션 툴 처럼 웹을 받아들고 있다. 일반적인 특성은 다음과 같다 :

  • 의미상으로 올바른 마크업
  • 유효한 코드
  • 접근하기 쉬운 코드(사람과 장치 모두)
  • 구조와 표현의 분리를 위해 Cascading Style Sheets (CSS) 사용

4. 의미상으로 올바른 마크업

의미상으로 올바른 마크업이란 html 요소를 목적에 맞게 사용하는 것이다. 멋지게 설계된 HTML은 광범위한 사용자 에이전트에게 의미상으로 올바른 뜻을 전달한다. (스타일 시트를 포함하지 않은 브라우저나 텍스트 브라우저, PDA, 검색엔진 등)
의미상으로 올바른 마크업을 위해서는 표준 html 요소를 사용해야 하고, 다른 HTML 요소처럼 보이게 하려고 HTML을 스타일링 하는 것을 피해야한다.간단하게 말하면 다음과 같다 :

  • 머리글에는 H1 처럼 머리글을 위한 요소를 사용
  • 글의 문단에는 단락 요소를 사용
  • 목록에는 목록 요소를 사용

5. 유효한 코드란 무엇인가?

유효성 검사(Validation)인습적인 표준을 사용하는 방지하고 W3C의 산출물 처럼 문서를 검사하는 과정이다. 하나의 문서가 확인받고 통과하는 것은 유효한 것으로 간주된다.

왜 유효한 코드를 사용해야 하는가?

  • 유효한 코드는 에러가 있는 코드보다 렌더링이 빠르다
  • 유효한 코드는 유효하지 않은 코드보다 렌더링이 좋다
  • 브라우저는 점점 더 웹 표준에 맞춰져가고 있으며, 그것이 유효한 코드를 사용하고 표준에 맞춰가야 할 이유가 될 것이다.

유효한 코드인지 어떻게 알 수 있는가?

내 코드를 유효하게 만드는 방법은?

  • 올바른 Doctype을 사용하는 것으로 시작
  • Doctype의 방식을 알고 있어야 함 (표준 준수, 쿼크 모드 등)
  • 문자 집합(character set)을 사용함
  • HTML 요소를 잘 닫음
  • 이미지에 alt 태그를 사용함
  • HTML 핵을 사용하지 않도록 함
  • 정기적으로 HTML 유효성 검사를 하기
  • 사이트를 오픈하기 전에 찾을 수 있는 모든 버그를 수정하기
  • 유효성 검사를 기본적인 업무 과정에 넣기

6. 왜 접근하기 쉬운(accessible) 코드를 사용해야 하는가?

  • 다양한 사용자가 당신의 사이트에 접근하기 쉽도록 해야함. (시각장애인, 지체장애인, 정신지체인 등)
  • 다양한 종류의 장치가 접근 가능하도록 해야함. (PDA, 스크린 리더, 텍스트 브라우저, 검색 엔진 등)
  • (미국 연방정부와) 정부기관 웹 사이트에는 필수사항임.

접근하기 쉬운 코드를 만드는 방법은?

  • 텍스트가 아닌 요소에는 대응하는 텍스트를 제공함
  • 접근성있는 데이터 테이블(table) 사용. (행과 열의 머릿말을 식별할 수 있도록 함)
  • 접근성 있는 폼(form) 사용. (id, fields, legend에 label 사용)
  • 정보 전달을 요하는 부분은, 이미지보다는 마크업을 사용.
  • 눈에 보이는 스킵 메뉴를 제공.
  • 입력키(access key)를 제공
  • 구조와 표현을 제어하기 위해 상대적인 단위(unit)의 스타일 시트를 사용(em, % 등)
  • 스타일 시트가 없어도 문서를 읽을 수 있도록 만듦.
  • 메타데이터를 제공하여 의미 정보를 제공함.

7. 왜 구조와 표현을 분리하기 위해 CSS를 사용하는 가?

웹 개발자의 목표는, 표현적인 요소를 제거하여 html 코드를 깔끔하고 의미적으로 바르게 만드는 것이다.

  • 다양한 장치에서 좀 더 접근이 용이해야함
  • 사이트 전반에 걸친 수정사항을 수정하기 쉽게 만든다 – 모든 페이지가 아닌 한 개의 css 파일만 수정함
  • 작은 파일 / 빠른 다운로드 – 페이지 내에 코드가 줄어듬
  • 페이지 내에 코드가 적어짐 – 코딩하기 쉬워짐
  • 사용자가 자신의 취향에 맞게 바꿀 수 있도록 해줌 – 스타일 전환(style switchers)
  • 코드를 좀 더 제어함 – 스크린 리더를 위해 원하는 순서대로 전달 할 수 있음

8. CSS 기반 사이트의 작동

CSS의 강력한 능력 중 하나 – 아래의 내용 처럼 html 파일을 수정하지 않고 내가 원하는 모든 것을 다시 구성할 수 있음

9. 방문자는 웹 표준을 통해 어떤 이득을 얻는가?

  • 파일이 더 빠르게 다운로드 될 것. (줄어든 코드, 테이블을 남용하지 않음, 유효한 코드)
  • 다양한 사용자가 내용에 접근하기 쉬워짐. (일반 사용자, 시각장애인, 난독증환자, 지체장애인 등)
  • 다양한 장치로 내용에 접근하기 쉬워짐. (스크린 리더, 브라우저, 텍스트 브라우저, PDA, 핸드폰, 검색 로봇, 프린터, 냉장고 등)
  • 사용자가 자신의 취향에 맞게 웹 사이트의 겉모습을 바꿀 수 있음 (스타일 전환)
  • 모든 페이지를 프린트에 적합한 형태로 제공할 수 있음.

10. 클라이언트는 웹 표준을 통해 어떤 이득을 얻는가?

  • 유지하기 쉬워짐 (적어진 코드, 모듈화된 코드)
  • 호스팅 비용 절감 (적어진 코드)
  • 검색엔진 순위 상승
  • 코드의 수정 없이 스타일 변경 가능
  • 사용자 맞춤 디자인 제공
  • 별도의 페이지 없이 인쇄용 페이지 제공
  • 접근성 개선 (정부 클라이언트에게 절대로 필요함)

11. 나는 웹 표준을 통해 어떤 이득을 얻을 것인가?

  • 코딩하기 쉬워짐 (모듈화된 코드)
  • 유지보수가 쉬워짐 (적어진 코드, 모듈화된 코드)
  • 장치 맞춤형 코딩이 줄어듬 (다양한 장치에서 안정적으로 작동)
  • 웹 표준을 따르는 세계 경향에서 경쟁력 우위를 선점함

12. 어려운 점은 무엇인가?

  • 학습 곡선이 가파름
  • 브라우저 호환성 문제
  • 일부 레이아웃을 경우 CSS보다 테이블을 사용하는 것이 좀 더 쉬울 수 있음

13. 내가 웹 표준을 이루는 방법은?

웹 표준은 흑백논리의 문제가 아니다. 모든 개발자들은 웹 표준 기반의 사이트로 점진적으로 이동하는 것을 목표로 삼아야 한다.
기본의 방식에서 웹 표준 기반으로 변경하는 것은 시간노력이 든다. 너무 빠르게 해내려고 무리하다가 이내 좌절하기 보다는 달성할 수 있는 목표를 세우고 서서히 웹 표준을 향해 움직이는 것이 좋다. 예를 들자면 :

기본적으로 바꾸어야 할 것

  • 모든 페이지에 바른 Doctype을 추가
  • 모든 이미지에 대체 텍스트(alt)를 추가
  • 의미있는 페이지 제목 추가

중간과정에서 바꾸어야 할 것

  • 유효한 코드
  • 의미상 바른 코드
  • 인라인으로 삽입된 글꼴 태그와 색상을 CSS로 교체
  • 접근가능한 form, 데이터 테이블과 스킵 메뉴

고급과정에서 바꾸어야 할 것

  • 테이블로 전체 레이아웃을 잡는 대신 CSS(패딩, 마진 등))를 이용해 기본 구조 구축
  • CSS를 이용해 전체 구조 구성 – 테이블은 레이아웃용으로 사용하지 않음

CSS 레이아웃을 위한 연습

  • CSS 연습을 이해하기 위해 CSS 튜토리얼과 책을 읽음
  • CSS의 위치를 잡는 것을 배우기 위한 시간을 따로 가진다
  • 확신이 들때 까지 CSS 레이아웃의 다양한 연습

14. 결론

웹 표준은 다음과 같은 결과를 가져다 준다:

  • 빠른 파일 다운로드 속도
  • 다양한 사용자와 장치에 접근 용이한 코드
  • 사용자 맞춤
  • 인쇄용 버전을 손쉽게 구현
  • 호스팅 비용 절감
  • 검색 엔진의 순위 상승
  • 빠르고 효율적인 사이트 유지보수
  • 경쟁 업체에 대한 경쟁적 우위

웹 표준을 통해 사용자와 고객, 그리고 당신 자신이 혜택을 누릴 수 있습니다.

15. 웹 표준 지원 (Web Standards resources)

웹 표준 (Web Standards)

의미상 올바른 코드 (Semantic code)

유효성 검사 (Validation)

접근성 (Accessibility)

CSS