저의 아침은 항상 비슷합니다.
7시 30분에 맞춰놓은 알람소리를 들은 기억은 없고, 주로 8시 10분경 혼자 놀라서 깹니다.
그리고는 바로 씻으러 뛰어가지요.
때때로 아들 민재(3월 15일이 두번째 생일이죠~)가 일찍 일어나서 저를 깨우는 경우도 있습니다.
지각할까봐 허둥지둥 준비해도 빠듯한 시간이지만 사실 전 서두르지 않습니다.
10시까지 출근이라 대충 10시에는 들어갈 수 있거든요. ㅋㅋ

어쨌든…. ^^
늦게 일어났지만, 아침일과중 중요한 한가지를 지나칠 수는 없습니다.
바로 민재와 (잠깐) 놀아주기죠.
밤에 자주 늦다보니 민재와 놀아줄 시간이 아침밖에 없거든요. T.T

오늘도 민재와 잠시 놀려고 민재를 안고 안방을 나왔습니다.
그리고는 숫자자석이 붙어있는 냉장고 앞으로 가서 ‘이건 뭐지? 이건 뭐야?’ 이러면서 숫자놀이를 하는데, 갑자기 민재가 6을 잡더니 ‘육‘ 하더군요.

6

그 정도야 한참전부터 하던거니 놀라지 않았죠.
그런데, 이놈이 갑자기…
6이라고 적힌 숫자자석을 뒤집고는…

다시 뒤집고는..

이러는겁니다.

9

6을 뒤집으면 9가 된다는 그 나이에 어울리지않는 ‘논리’적 사고를 하는 것에 우리 둘은 놀라자빠지는줄 알았습니다.
(보통의 부모들은 이럴때 괜히 ‘천재! 천재!’ 이러면서 호들갑을 떨지요. 애 낳아보세요~ ㅋㅋ)
숫자 6을 뒤집으면 숫자 9가 된다는 사실을 알고, 설명하는 민재의 모습이 너무나도 예뻤습니다.

이상은 오늘 아침에 일어난 ‘가정사’입니다. ㅋㅋ
그럼 이제부터 ‘논리적 비약’을 해볼까 합니다.
말그대로 ‘비약’입니다. 위와 너무 연관짓지는 마세요~

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으로 웹표준을 시작합시다!!!

<덧붙이며>
‘비약’에 대한 질타는 없길 바라며… ㅋㅋㅋ
이글의 의도는 생각의 전환으로 사물/사회를 변화시킬 수 있다는 것입니다.
민재가 6과 9를 뒤집듯…. ^^

그리고, 6월 9일은 블로그의 날이던가요?
그날은 제 생일이기도 합니다!!! ^^