출처 : http://www.jangkunblog.com/wp/jangkun-thought-semantic-markup/

요즘 회사에서 Semantic Markup 과 CSS 에 대한 수업을 진행하고 있습니다.
수업내내 제가 가장 강조하는 것은 주로 ‘Semantic Markup‘ 입니다.

CSS 는 기술적인 측면으로, 경험과 공부로 충분히 일정 수준까지 도달할 수 있습니다.
하지만, ‘Semantic Markup’ 은 경험과 공부보다 ‘논리적 사고’가 더 필요한 부분이라고 저는 생각합니다.
기획서를, 또는 시안을 보면서 이를 논리적으로 고민하고, 구조적으로 Markup 하는 것은 ‘개개인의 논리적 사고’를 요하는 일입니다.
다들 아시겠지만, ‘Semantic Markup’은 웹표준/웹접근성의 기본이고, 이를 능숙하게 해낸다면 CSS 로 스타일을 입히는건 그리 어려운 일이 아닙니다.

웹표준을 처음 접하고 들었던 생각은 ‘디자인/코딩’을 8년을 했음에도 불구하고, Headings, Fieldset, caption, dl 태그 등이 어색하다는 것이었습니다.
사실 처음에는 ‘새로 생긴 태그인가’라는 생각도 했었습니다. ㅡ..ㅡ;
(이게 대한민국의 웹개발 현실이 아닐까 합니다. 물론 최근 웹표준이 화두가 되면서 변하고 있지만..)
하지만, 웹표준을 공부하면서 만난 모든 태그들은 이미 과거부터 존재했던 것들이었습니다.
그동안 제가(다수의 디자이너/개발자/코더) 몰랐던 거지요. 아니 필요가 없었던 거지요.

Semantic Markup‘은 문서(웹페이지)를 “구조화“시키는 것입니다.
구조화는 곧, 문서(웹페이지)의 내용들이 “체계를 가진다”는 것입니다.
기존에 사용했던 방식은 문서(웹페이지)를 “작성“했던 것이구요.
다시말해 지금까지의 문서(웹페이지)는 “체계가 없었다”는 것이구요.

구조화와 작성은 6과 9처럼 단순히 “(생각의/개발방식의) 전환“만으로도 전혀 다른 결과물을 만들어낼 수 있습니다.
6을 뒤집어 9가 되면 전혀 다른 개념의 숫자가 되듯, 기존에 ‘작성‘했던 문서(웹페이지) 개발방식에서 벗어나, Semantic Markup 을 통해 ‘구조화‘ 하는 개발방식으로 전환시키면 전혀 다른 개념의 문서(웹페이지)가 됩니다.
작성‘된 문서(웹페이지)가 ‘구조화‘된 문서(웹페이지)가 되면 본질부터 변하게 됩니다.

기존에 문서(웹페이지)를 ‘작성‘하면서, 제목에 어떤 강조의 스타일을 주기 위해서는 font 를 사용해서 글자크기를 키우고 색을 줬습니다

font

font 는 단순히 제목을 강조하기 위해 스타일을 주기 위한 의미없는 태그입니다.
일반적으로 장애를 가지지 않은 사람이 보기엔 이것은 ‘제목’이지만, 장애를 가진 분들에겐 그냥 ‘글’일 뿐입니다. 그리고, 검색엔진에게도 그냥 ‘text’ 일뿐입니다. 이들에게는 이 ‘제목’이 아무런 의미를 가지지 않는(의미를 주지 않는) ‘글, text’ 일 뿐입니다.

하지만, 문서(웹페이지)를 ‘구조화’하기 위해, H 태그를 사용하고, font 와 마찬가지로 글자크기를 키우고 색을 주게 되면 얘기가 달라집니다.

h1

이제 장애유무와 상관없이, 그리고 검색엔진 등에게 ‘제목’은 ‘제목’이 되는 것입니다.
이 변화는 우리가 상상하는 것보다 더 의미를 가지게 됩니다.

스크린리더(Screen Reader)등과 같은 ‘화면음성변환기’를 사용하는 장애인분들이 문서(웹페이지)를 쉽게 이해할 수 있도록 할 수 있고, 이미지나 스타일을 보길 원하지 않는(볼 수 없는) 일부 사용자에게도 문서(웹페이지)의 의미를 전달할 수 있고, 검색엔진의 크롤링을 직간접적으로 도와 부수적 이익을 얻을 수 있고, 개발/디자인/퍼블리싱의 효율성을 높일 수 있고… 등등

이처럼 웹접근성을 극대화할 수 있는 Semantic Markup(생각의/개발방식의) 전환을 통해 가능해집니다.
솔직히 말해 위의 장점보다 더욱 웹표준 방식을 제가 선호하는 이유는 훨씬 쉽고, 효율적이라는 것입니다.
처음에 접했을 때는 ‘이런거 안해도 되잖아’ 하면서 외면하려했지만, 지금은 ‘이거 아니면 이젠 못해’가 되어버렸습니다.
웹접근성의 향상을 통해 ‘사회적 책임’을 다할 수 있고, 업무를 효율적으로 처리할 수 있고, 회사이익에 도움이 될 수 있는 웹표준!
(생각의/개발방식의) 전환을 통해 Semantic Markup으로 웹표준을 시작합시다!!!

'Development > Web Standard' 카테고리의 다른 글

웹표준 개괄내용  (0) 2011.04.01
모바일 웹 애플리케이션 모범 사례 카드  (0) 2011.03.29
Semantic Markup  (0) 2010.08.05

+ Recent posts