의미를 살린 마크업과 유효성 검사

이번 호는 컨텐츠를 의미를 살려 마크업하는 방법(Semantic Markup)과 마크업이 제대로 되었는지 체크하는 유효성 검사(Validator Test)를 하는 방법에 대해서 배워보기로 하자. 기존의 테이블로 레이아웃을 잡고 큰 이미지로 컨텐츠를 표현하던 방식에서는 생각되지 않던 부분이라 생소하지만, 내용을 이해하게 되면 정말 필요한 방식이라는 것을 느끼게 될 것이다. 웹표준으로 사이트를 제대로 제작하고자 한다면 body 엘리먼트 이하의 컨텐츠는 의미를 살린 엘리먼트로 작성되어야 한다.

글. 차영신.
웹표준 제작자.
Tag & Brace 대표.
아카데미정글 웹표준 강의.
www.tagnbrace.com/blog

• 드림위버 CS3에서 웹 표준 문서를 제작하기 [1] - 웹표준과 웹접근성의 이해와 테스트 방법
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [2] - 의미를 살린 마크업과 유효성 검사
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [3] - CSS의 작성과 유효성 검사
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [4] - 블록레벨 엘리먼트와 인라인레벨 엘리먼트
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [5] - DIV 엘리먼트와 레이아웃 만들기
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [6] - UL, OL, DL 엘리먼트 사용하기

웹표준을 공부하게 되면 HTML element(엘리먼트)라는 용어를 접하게 된다. HTML element(엘리먼트)는 HTML Tag(태그)에 의해 작성되어 진다. HTML Tag(태그)는 < 와 >에 둘러쌓여 있고, HTML element(엘리먼트)는 몇가지의 단독태그 (예:<br>, <hr> 등)를 제외하고는 Start Tag(시작태그)와 End Tag(끝태그)로 구성(예:<pp>컨텐츠</p>)되어 있다.

01. 의미를 살린 마크업 (Semantic Markup)

HTML element(엘리먼트)는 표현하려고 하는 컨텐츠의 의미나 종류에 따라 W3C 권고안을 지켜 작성하면 된다. 컨텐츠의 의미에 적합한 HTML element를 찾기위해 [http://www.w3.org/TR/html401/]페이지에서 상단의 [element] 메뉴를 클릭하여 [Index of Elements] 페이지에서 찾아서 사용하면 된다.

[그림1. http://www.w3.org/TR/html401/ 화면]

[그림2. http://www.w3.org/TR/html401/index/elements.html 화면]

제목을 표시하는 h1, h2, h3, h4, h5, h6 elements를 클릭하면 그림과 같이 자세한 설명을 볼 수 있고, 한 페이지 내에서 제일 중요한 제목부분을 h1 element로 한 번만 마크업하고, 다음 중요한 제목은 h2 element로 마크업한다. h2 element는 동일한 중요도의 제목 부분에 여러 번 사용해도 되며, 다음 중요한 제목은 h3 element로 마크업해 나간다. h3 element를 건너뛰고 h4 element로 마크업을 하게 되면 검색엔진은 더 이상 중요한 제목이 없다고 생각하고 더 이상 페이지를 검색하지 않게 되어, 결국 웹페이지가 검색결과에 노출될 기회를 잃어버리게 된다. 문단으로 나열되는 경우 p 엘리먼트를 사용하며, 회사주소를 작성할 때는 address 엘리먼트를 사용하고, copyright를 표시하는 ©도 ASCII값으로 © 와 같이 마크업해야 한다. 문단에서 강조해야할 텍스트는 strong 엘리먼트나 em 엘리먼트를 사용하여 마크업하면 브라우저나 다른 디바이스에서 컨텐츠를 해석해 나갈 때 좀 더 강조한다는 의미로 해석하게 된다. 의미를 살려 마크업을 한다는 것은 일반 웹브라우저를 비롯한 다양한 환경의 디바이스에게 단순히 디스플레이 되는 것과는 별도로 컨텐츠를 제목, 문단, 컨텐츠의 목록, 강조, 주소, 저작권, 인용, 그룹 등의 구조에 맞게 엘리먼트를 사용하여, 브라우저나 디바이스가 마크업을 해석할 때 컨텐츠의 의미를 알도록 설계하는 것이다.

[그림3. http://www.w3.org/TR/html401/struct/global.html#edef-H1 화면]

만약, [ http://www.w3.org/ ]의 설명이 어렵게 느껴진다면 [ http://w3schools.com/ ] 사이트를 방문해 보기 바란다. 다양한 언어에 관한 내용과 예가 잘 정리되어 있어 좀 더 접근하기 편할 것이다.

[그림4. http://w3schools.com/ 화면]

02. 파이어폭스 설치하기

드림위버에서 마크업을 하기 전에 W3C의 권고안을 지켜 개발한 Mozilla 재단에서 만든 FireFox 브라우저를 설치해 보자. 웹접근성에는 여러 의미가 내포되어 있는데 그 중 한 가지가 다양한 브라우저에서의 웹사이트 접근이 가능해야 한다는 의미도 포함된다. 우리나라에서 대부분 사용하는 Internet Explorer 외에 FireFox, Opera, 맥용 브라우저인 Safari 등 있으며, 이러한 개념은 크로스브라우징이라는 용어로 설명되고 있다.

웹표준 작업시에는 W3C의 권고를 잘 반영하는 FireFox에 디스플레이 되는 것을 기준으로 작업하고, 브라우저의 특성에 따라 다르게 디스플레이 되는 부분은 별도의 Hack(핵)을 사용하여 다른 값을 주어 조절하는 것이 시간과 노력을 줄일 수 있다. 의미를 살린 마크업에 사용되는 엘리먼트는 몇 개 되지 않기 때문에 이해만 하면, 중요도에 비해 어렵지 않지만 브라우저별 다른 디스플레이를 맞추기 위해서는 많은 시간과 노력이 필요한 부분이다.

자, 그럼 FireFox를 설치해 보자. 검색 사이트에서 ‘파이어폭스’라고 입력하고 검색하면 나오는 결과 중 원하는 버전을 선택하여 설치한다. 여기서는 한글 FireFox v2.0.0을 설치한다.

[그림5. http://naver.com/ 의 파이어폭스 검색결과 화면]

파이어폭스를 설치한 뒤, 웹표준 사이트 제작에 꼭 필요한 부가기능을 추가하기 위해 상단메뉴의 [도구>부가기능]을 선택한다.

[그림6. 파이어폭스 설치화면]

부가기능 팝업창의 아래에 [유용한 확장기능 찾기]를 클릭하여 [ https://addons.mozilla.org/ko/firefox/browse/type:1 ]사이트로 간다.

[그림7. 파이어폭스 부가기능 설치화면]

상단의 검색창에 ‘web developer’를 입력하고 검색 버튼을 클릭한다.

[그림8. 파이어폭스 부가기능 사이트 화면]

그림과 같이 결과가 나오면 [Web Developer]를 클릭하여

[그림9. web developer 검색결과 화면]

설치페이지로 넘어간다. [설치하기] 버튼을 클릭하면

[그림10. web developer 설치페이지 화면]

설치 팝업이 나오고 [지금설치] 버튼을 클릭하면 설치되고, 설치된 후 [Firefox 다시 시작]버튼을 클릭하면, 이제 마지막 작은 팝업창이 나오고 [예]를 클릭하면 파이어폭스 브라우저가 다시 실행된다.

[그림11. web developer 설치팝업 화면]

[그림12. web developer 설치팝업 화면]

다시 실행된 파이어폭스 텝 위부분에 ‘web developer'가 설치되어 있는 모습을 볼 수 있다. 이 기능은 웹사이트 분석에 없어서는 안 될 중요한 부가기능으로, 지금 설치하지는 않겠지만 ’Firebug'도 개발에 유용한 기능을 가지고 있으니 같은 방식으로 설치해 보기 바란다.

[그림13. web developer가 파이어폭스에 설치된 화면]

Internet Explorer는 6, 7을 기준으로 일반적으로 작업하고 있으며, IE6, IE7을 한 컴퓨터에서 동시에 설치하고 싶다면 IE7을 설치하여 사용중이라면 ‘Multiple-IE’ 라는 IE6, IE5.5, IE5, IE4 & IE3 버전의 Standalone 프로그램을 설치하고, IE6 사용자라면 IE7 Standalone을 설치하여 사용하면 편리하다.

03. 드림위버에서 의미를 살린 마크업하기

1.웹표준으로 만들기 위해서 HTML 문서의 DOCTYPE 이 중요하고 드림위버 작업에서 먼저 해야할 단계도 [Edit>Preferences>New Doccument]에서 [Default Document Type]을 설정하는 것이다. 여기서는 [XHTML 1.0 Strict]으로 설정하자.

[그림14. 드림위버CS3에서 DOCTYPE 설정 화면]

2. DOCTYPE에 관한 내용은 3월호에서 언급했듯이, 브라우저가 HTML 문서를 어떤 방식으로 해석할지를 결정하는 중요한 역할을 하며, 여기서 엄격(Strict)하게 지킨다는 의미는 앞으로 없어질 엘리먼트를 사용하지 않는 것을 정확하게 지켜서 마크업을 한 문서임을 선언하는 것이며, 마크업 작성자도 엄격하게 규칙을 지켜 작성해야 하며, Validator Test도 이에 맞게 테스트한다.

[그림15. DOCTYPE이 XHTML 1.0 Strict로 설정된 화면]

3. [ http://ko.www.mozilla.com/ko/firefox/about/ ]를 보고 마크업을 해보자. 구조를 분석해 보면 ‘Mozilla 소개’가 페이지의 중요 제목에 해당하고 아래에 설명들은 여러 개의 문단으로 구성되어 있다. 아래에는 저작권의 표시가 있다.

[그림16. http://ko.www.mozilla.com/ko/firefox/about/ 화면]

4. 소스를 보면 body 엘리먼트 이하에 ‘Mozilla 소개’가 <h1>Mozilla 소개</h1>로 의미를 살려 마크업 되어 있고 설명 부분인 문단은 <p>~</p>로 작성되어 있는 것을 알 수 있다. div 엘리먼트가 많이 보이는데 이것은 문서 내에서 영역을 나누어주는 역할을 하는데, 결국 컨텐츠의 그룹핑을 하는 역할을 한다. 같은 용도로 사용하는 span 엘리먼트가 있는데, 차이점은 div 엘리먼트는 브라우저에 블럭(Block)처럼 쌓여서 디스플레이 되어 블록(Block)레벨 엘리먼트에 속하고, span 엘리먼트는 한줄 선상으로 배열되어 인라인(Inline)레벨 엘리먼트에 속한다. 이러한 특징은 Property의 속성들로 구성된 박스모델의 디스플레이가 다르게 구현되고, 우리는 그러한 특징에 맞게 활용해야 한다.

[그림17. http://ko.www.mozilla.com/ko/firefox/about/ 소스화면]

5. 드림위버에서 body 엘리먼트 아래에 아래와 같이 의미를 살려 마크업하고 파이어폭스와 IE에서 각각 띄워 살핀다.

[그림18. 의미를 살린 마크업된 화면]

[그림19. IE6에 디스플레이된 화면]

[그림20. 파이어폭스에 디스플레이된 화면]

6. 그리고 작성한 마크업이 맞는지 Validator 테스트를 해야한다. 드림위버에서는 [File>Validator>Markup]를 선택하면 아래 창에서 결과를 보여준다. 지금 작성한 것은 매우 간단한 것이기에 에러가 없지만, 여러분이 웹표준의 기본에 대해 알지 못하고 마크업을 했다면 아마 이 간단한 것에서도 많은 에러표시가 나오게 될 것이다. 드림위버에서 제공하는 Validator의 기능을 간편하게 사용하도록 한 것이며, 직접 http://validator.w3.org/에서 테스트 해보는 것도 좋은 방법이다.

[그림21. 드림위버에서 Markup Validator 화면]

7. h1, p 엘리먼트를 구조적으로 그룹핑하고 디자인적으로 제어하기 위한 목적으로 div 엘리먼트를 이용하여 감싸준다.

8. 드림위버에서 여기까지 마크업하고 비교해 본다. 실제 소스에서는 ‘한국Mozilla 활동'을 h3 엘리먼트를 사용하였는데 h2를 사용하는 것이 더 적절하다고 생각된다.

[그림22. 파이어폭스에 디스플레이된 화면]

[그림23. IE6에 디스플레이된 화면]

9. ‘한국Mozilla 활동' 아래에 ul 엘리먼트를 사용하여 컨텐츠가 나열되어 있는 것을 볼 수 있다. ul 엘리먼트는 테이블 레이아웃 방식에서와는 달리 어떤 내용을 순서가 없이 나열되는 경우 아주 많이 활용되고 있다. 심지어는 메뉴 네비게이션을 만들 때도 의미적으로 각각의 메뉴가 순서없는 목록으로 보고 ul 엘리먼트를 사용하며, 사이트 맵과 같은 배열에서도 사용된다.

[그림24. 파이어폭스에 디스플레이된 화면]

[그림25. IE6에 디스플레이된 화면]

04. 마치며

드림위버 CS3에서 웹표준 문서를 제작하기위해서의 두 번째인 이번 호에서는 의미를 살린 마크업을 이해해 보았다. 눈으로 보여지는 디스플레이도 중요하지만 그 보다 컨텐츠가 구조적으로 배열될 수 있도록 마크업하는 것은 앞으로 구현될 많은 디바이스와의 접근성, 호환성에서도 매우 중요한 일이다. 반복해서 이야기하지만 웹의 정신을 이해하면 웹표준을 좀 더 쉽게 작업할 수 있다. 혹시 지금 작업한 소스를 확인하고 싶다면 제 블로그인 www.tagnbrace.com/ 서 확인하기 바란다