[Web 표준] 웹표준 홈페이지 방법론

우리가 사용하는 HTML의 태그들은 구조와 표현으로 분류할 수 있다.

구조로는 H1, H2,, UL, LINK, DIV, P 등이다. 이런 것들을 사용하면 모양(표현)도 적당히 바뀌는 것을 알 수 있다. 예를 들면 H1을 사용하면 보통은 크기가 커지고 두꺼워진다. 그렇다고 해서 H1을 단순히 글씨를 키울 목적으로 사용하는 것은 잘못된 것이다.

  H1은 문서의 가장 중요한(또는 가장 상위의) 제목 부분을 표시하라는 "의미"를 가지고 있는 것이지, 그냥 글씨를 키울 목적으로 제공되는 것이 아니다. 이에 반해 B, FONT, BR 등은 문서의 표시 방법을 결정하는 표현요소들이다. 즉 이것들은 아무런 의미는 없지만 시각적으로 표현하는 방법만 결정한다.

  초기 HTML이 진보하면서 표현 마크업이 담당하던 모양에 대한 것은 CSS가 담당하게 되고, 이제 HTML에서 표현 마크업은 쓰지 않도록 권고 되고 있다. 이런 것들을 표현하고자 하는 모양은 100% CSS를 통해 훨씬 정교하게 표현할 수 있음을 간과해서는 안된다. 이렇게 HTML은 구조, CSS표현이라는 역할 분담을 함으로써, 구조를 고치기 위해 표현을 바꾼다든지, 표현 방법을 바꾸기 위해 구조를 뜯어 고쳐야 할 일이 없어지게 된다.

 

1. 구조와 표현의 분리

구조를 위한 마크업과 표현을 위한 마크업이란 무엇인가? 이 둘을 구분하는 것은 매우 중요하다. 겉으로는 똑같이 보이는 웹페이를 만들었더라도 속에 보이는 구조는 천차만별로 다를 수 있고, 이 다른 구조는 다양한 환경의 사용자(또는 기기)에게 엄청난 차이를 가져다 준다.

 

위의 그림은 웹 브라우저에 표시된 두개의 문서를 보여주고 있다. 둘다 겉보기 모양은 거의 동일하나 이 두 페이지가 담고 있는 HTML은 완전히 다르다.

 

일반적으로 코딩하는 방식이나 툴을 이용해 만들면 다음과 같은 html이 만들어 질 것이다.

     

  위의 예제를 보면 제목을 나타내기 위해 글꼴을 바꾸고 줄 간격, 들여 쓰기, 번호매기기, 이미지 붙이기 등과 같은 표현방법(presentation)들이 내용(contents)와 섞여 있어서 나중에 표현방법만 살짝 바꾸거나, 내용을 바꾸거나, 구조를 바꾸는 경우 다른 소스들도 전부 수정을 해야한다.

  위와 같이 구조와 표현과 내용이 한데 섞여 있으면 나중에 소스를 관리하고 수정하기가 어려울 뿐만 아니라, 컴퓨터가 이 문서의 구조를 파악히도 매우 힘들다.

 

  따라서 아래의 HTML 소스와 같이 수정을 해주면, 컴퓨터나 검색 엔진이 문서의 의미적인 구조를 파악하기 쉽고, 기계를 통해 문서의 구조에 쉽게 접근할 수 있다.

    

 

  위의 소스는 스타일 지정 부분이 따로 있기 때문에 이 부분만을 바꿈으로써 문서의 구조는 그대로 유지한 채 모양을 자유자제로 바꿀 수가 있고, 심지어 이 스타일 파일만을 여러 벌 만들어 한번은 모바일용으로, 한 벌은 음성 브라우저용으로 , 한 벌은 그래픽 브라우저용으로 최적화해서 만들 수 있다. 즉, 구조와 내용은 간결하게 놔둔 채로 표현 방법만 상황에 맞게 바꿀 수 있게 된다.

 

이는 현재 사용되고 있는 브라우저 뿐만 아니라 향후 나오게 될 브라우저에 대한 상위 버전 호환성도 지닐 수 있다.

즉, CSS 기능을 제공하지 않는 브라우저에서 보더라도, 문서를 이해하는 데에는 아무런 문제가 없다. HTML에서는 표현과 구조를 나타내는 마크업이 완전하고 명확하게 구분되지 않아서 XML이 나오게 된것이고, XML은 표현을 위한 마크업 자체가 존재하지 않는다. 따라서 XML 문서 내에는 문서의 구조만을 나타내고 표현을 위한 부분은 CSS, XSL 등으로 따로 떼어내어서 표현해야 한다.

 

2. 구조와 동작의 분리

  우리가 흔히 접하는 웹문서에는 구조와 표현만 있는 것이 아니다. 바로 사용자 액션에 따른 반응 및 동적인 문서 구조 변경등 스크립팅이라고 불리우는 클라이언트 프로그램이 있다. 일반적으로 자바 스크립트 또는 VBScript-x 등으로 불리는 스크립팅을 통한 제어를 동작이라고 통칭한다.

 

스크립팅을 통한 행동제어를 하는 것에는 다음과 같은 문제점이 지적되었다.

- 사용성 : 팝업이나 상태창 메시지, 슬라이딩 메뉴 등은 사용성을 크게 해친다.

- 접근성 : 자바스크립트를 꺼놓았거나 시각 장애인인 경우 접근성이 떨어진다.

- 복잡성 : HTML에 스크립트가 끼어 들어가 코드의 복잡도가 높아진다.

  위와 같은 문제점에도 불구하고 스크립트를 통한 DOM 핸들링은 광범위 하게 사용되고 있다. 위의 문제점을 해결하기 위해서는 구조에서 스크립트를 분리해야 할 필요가 있다.

 

 

  아래 코드는 위의 예제를 구현한 것이다.

    

 

  통상적으로 위와 같이 구현을 하면 panel을 누를 때 마다 나타나는 값에 대한 접근성이 떨어지게 된다.

 

  구조에서 행동을 분리하기 위해서는 우선 구조적인 태그와 함께 반응에 따라 얻어지는 결과값도 함께 제공한다.

    

 

  이렇게 제공한 후에 자바 스크립트에서는 사용자의 이벤트를 감시하고 제어하는 기능을 초기화하여 사용자가 panel을 누를 때마다 나타나는 내용을 변화시켜 주면 된다.

 

출처 : 한국소프트웨어진흥원 2005.12 [실전 웹 표준 가이드]