HTML 코딩 이야기 – #1 개념 확인

“HTML 코딩에 대하여 언제 한번 글을 써봐야지” 하면서도 4~5년 계속 하지 못해오다가, 요즘 들어 본의 아니게 HTML코딩업무비중이 갑자기 늘어나면서 갑자기 솟구치는 글을 쓰고픈 갈증에 간략하게나마 정리 해본다.

나의 글 특징은 단순/과격/극단의 위험선을 수시로 넘나드는 것이므로, 이런 표현에 대해 지나치게 신경을 곤두세우지 않았으면 좋겠다는 바램을 함께 써넣는다. 물론 다소 과장이 있을지라도 이는 개인적인 경험/판단에 의한 표현상의 강조로 이해해 주면 좋겠다. 언제나 반론/정정 의견은 환영!!

흔히 이야기 하는 “테이블 코딩”을 버리고 “표준 코딩”을 해야겠다는 웹디자이너(HTML 코딩업무 겸임)가 있다. 또는 좀더 CSS를 사용해서 웹페이지를 만드는 게 엄청나게 귀찮은 일이라 생각하면서도, 주변 사람들이 다들 DIV코딩이니 뭐니 하니까 속내를 표현 못하고 그저 똥씹은 표정으로 float와 padding 사이를 헤메는 웹프로그래머, 주변에 흔한 풍경이다(!).

주제 1. 개념 확인

위의 디자이너가 말한 “표준 코딩”이란?
틀린 말이다. <table/> 태그도 염연한 W3C(월드와이드웹컨소시엄)의 “표준태그” 이다.
소위 이야기하는 “표준 코딩” 또는 “CSS 코딩”에 대한 이야기를 하기 전에, 이러한 용어와 함께 사용되는 비슷한 용어 또는 내재된 의미부터 파악해 보자. 상당히 여러가지 의미가 함축되어 있으므로 이를 하나하나 분리 해 보지 못하면, 현업에서 “왜 해야 하는가”, “어떻게 해야 하는가”에 대한 명확한 중심이 서지 않기 때문이다.
물론, 아래의 “이상론”을 모두 충족시키며 웹사이트를 만드는 것도 가능하지만(개인적으로는 이런 “이상론”이 실현 가능하고 지켜져야고 생각하지만), 실제 현장에서는 비지니스적인 목적에 의해 어느 부분은 충족하고 어느부분은 버리고 갈 것인지 정해야 할 필요가 있기 때문이다.
“이상론”의 정확한 내용을 알아야 어느 부분까지 실현한다는 의도된 계획이 나올수 있으며, 어느 부분까지 개선했고 향후 어떻게 유지할 것인지에 대한 고려도 없이, 대충 “우리 표준화 했다”라고 둘러대는 우스운 꼴은 피했으면 하는 바램이다.

표준 웹

내 기억으로는 이 용어가 가장 오래됐던 것 갔다. 그야말로 치열했던 1990년대 하반기 NN(Netscape Navigator)와 IE(Internet Explorer)의 브라우저 1차대전 당시 양사가 자사의 브라우저에서만 표시되는 태그들을 쏟아내기 시작하며 나타난 용어라고 기억한다. 사실 이때는 각종 인터넷 관련 BM(Business Model)이 태어나고 성공신화도 생기고 하던 때라 지금보다도 더 빠른 변화가 있던 시기로서, 웹브라우저도 두세달만에 신버전이 나오고, 업그레이드안하다가 철퇴를 맞은 IE도 그 당시에는 2.0부터 5.5 까지 정말 숨가쁜 업그레이드의 연속이었다. 이런 상황속에서 하루가 다르게 생기는 신종 태그들에 대항하며 나온 말이 “표준 태그”,”표준 웹” 이었던 것 같다.

아직도 기억나는 이 문제에 대한 대표적인 태그 <marque/> 와 <blink/>, 이 태그만 봐도 쓴웃음이 나오는 사람 많을 것이다.
하지만, 그 당시 웹에 대한 인프라 확산과 각종 저레벨 시스템 문제에 주력해야만 했던 W3C와 현업 업계와는 다르게, 현재에는 명확한 HTML 규정(http://www.w3.org/html/)과 업계의 노력으로 비표준 태그 및 비권장 태그는 거의 사라지게 되었다. 따라서 “표준웹”,”표준코딩”이란 표현은 현재의 상황을 표현 할 수 있는 말이 아니다.

DIV/CSS코딩

이는 “Table코딩”에 대한 상대되는 개념으로 나온 것으로서, 그다지 좋은 표현이 아니다.
아직도 그렇지만 포토샵에서 HTML만들기 기능은 아주 보기 좋게(?) 테이블로서 코딩되어 나온다. 어도비사를 비난하고 싶다. 이미지를 슬라이스 해주고 보기 쉽게 테이블로 표시 해 주는 기능은 좋은데, 그걸 그대로 코딩이이라고 믿어버리고 사용하는 사람의 문제이다. 실제 2000년 쯤에는 그 HTML에 비어있는 이미지 슬라이스의 <img/>태그만 몇 개 정리해서 디자이너에게 받기도 했었다.
오버하자면 이는, 브라우저를 이미지 표시를 위한 바둑판으로 취급하고html은 그 바둑판에 도트를 찍어주는 비트데이터로 취급하는 꼴 이다. 데이터적으로 보면 이런 코딩은 인간이 인지할 수 있는 아무런 정보가 없는 bmp 이미지 파일의 바이너리 데이터와 같은 것 이다. 또한 이미지 뷰어가 내장되지 않았다면 아예 볼 수도 없는 문제도 있다.

위와같이 극단적인 경우가 아니더러도, “테이블을 이용한 레이아웃을 설정”하는 “불법전용(不法轉用)”은 아직까지도 일부 코딩에서 나타나고 있으며, 이는 잠재적 또는 현실적으로 여러가지 문제를 일으키기 때문에 사용하지 말자는 의미로 생겨난 신조어가 바로 “DIV/CSS코딩” 일 것이다.
그러나 앞서 말한대로 이 용어자체는 잘못된 표현이다. 웹사이트에 도표가 표시되는 등 필요한 곳에서는 당연히<table/>태그를 써야 하는 것이고, <table/>태그에도 CSS는 잘 적용된다. 필요 없거나 적합한 다른 태그가 있는데 <div/>태그만 남발하는 것도 “불법전용”이긴 마찬가지이다.
또한 이 “DIV/CSS코딩”용어는 곡해의 소지까지 있기 때문에 사용하지 않는 것이 좋을 것 같다. <table>을 안쓰고 <div/>태그만 사용하고 css 파일만 만들면 다 된다”라고 생각하는 “복고풍 업자”가 생기기 때문이다.
이런 “무식한” 용어는 사용하지 말고 그냥, “기존의 <table/>태그를 이용한 페이지 레이아웃 설정 및 제 용도 이외의 사용은 하지말자” 정도로 말해보자. 필요한 곳에 적합한 태그를 사용하는 것은 “기본”이다.

오픈웹

오픈웹은 “웹접근성”과 약간 관련이 있는 용어인데, 이 두 용어 모두 기본적으로 “웹페이지에는 누구나 접속해서 내용/서비스를 이용할 수 있게 하자”는 뜻이다.
그런데 “오픈웹”이란 용어는 한국에서 특히, 기술적인 부분과 공공성에 대한 부분을 지적하는 의미가 강하다.( http://openweb.or.kr/)
기술적인 종속에 의해 Windows/IE 환경에서만 보여지는 일반 웹사이트들, 특히 공공서비스인(또는 그런 성격이 강한) 정부 사이트나 특히 금융기관의 특정 플랫폼 심화 현상에 대해 반기를 들고 이를 “오픈화”하려는 노력은 법적으로도 사회운동적으로 하고 있는 것이 “오픈웹”운동이며, 그 용어도 일반적으로 이를 가리킨다..

사실 공공기관이나 은행에서 저러고 있는 것은 말도 안된다. 그런데 오픈웹진영에서 낸 소송이 현재까지 두차례나 패소했다. 캐나다에서는 통계청 페이지에 한 리눅스 사용자가 이용못하는 서비스가 있었다고 항의하자 곧바로 사용 가능하게 만들어줬다는 사례(http://openweb.or.kr/?page_id=54)와 같은 분위기인데 우리는 법으로 호소해도 안되는 현실이다. 구청에 호적등본 발급받으러 갈 때, 자전거 타고 간 사람은 정문에서 제지당하고 자동차 탄 사람 그 중에서도 현대자동차 탄 사람만 출입시켜주는 꼴 이다.

웹접근성

위에서 말한대로 “웹접근성”은 오픈웹과 상통하는 부분이 많지만, 상대적으로 “소수자와 약자를 배려(지원)하는 웹서비스”에 초점을 둔 것이다. 자세한 내용은 웹접근성연구소 (http://www.wah.or.kr/)에 많은 자료가 있다. 오픈웹에 대한 것은 ActiveX등의 문제도 대부분의 현업종사자들이 인지하고 있지만, 이 “웹접근성”문제는 많은 기획자/디자이너/개발자가 모르거나 무시하고 지나치는 경우가 많다.
물론 영리목적의 사이트라서 타겟고객이 극명하게 한정적인 경우라면 모르겠지만, 사이트 전체를 이미지로 도배하고 “alt”속성을 넣지않거나 형식적으로 alt=”이미지” 이런식으로 해 놓은 사이트들, 그리고 심미적인 목적으로 글자를 보이지도 않게(12px이하)로 줄이거나, 배경색에 비슷한 글자색(배경검정,글자색회색)을 해놓은 디자인들 보고 좋아하며 “모던”적인 느낌이라 생각하는 코더/디자이너를 보면 당신은 웹사이트 UI 디자이너인지 유화를 그리는 화가인지 묻고 싶어진다. 그런 사이트는 30대인 내가 봐도 단지 “볼 뿐, 읽지 않고 이동” 해버린다. 50대이상 분들이라면? “읽고 싶어도 안보인다”가 된다.

각종 개발방법론 및 기술에는 훤하고 HTML이라면 최저수준의 언어 정도 라고 생각하는 웹개발자들에게 <label for=”id”/><th scope=”row”/>이런 태그/속성들은 아는지 묻고 싶다. 웹접근성 관련 태그/속성들이다. 링크<a/> 태그에 blue(); 스크립트를 주입해서 태그주위에 생기는 tab 표시를 없애버리면 깨끗이 마무리 잘했다고 여기는 개발자도 많다. 그 tab표시는 마우스를 사용할 수 없는 사용자를 위해 일부러 만들어 넣은 기능이다. 링크 주위의 보일듯말 듯한 점선이 보기 싫다고 여기기 전에 그 기능이 일부러 존재하는 이유에 대해 생각해보라.
다국어 또는 UTF 캐릭터셋의 웹페이지에서, 거의 모든 태그에서 지원하는 “lang” 속성을 입력했을 때 시각장애인용 리더기에서 얼마나 도움이 되는지도 조사해 보자. 이런 것들에 대한 고려가 웹접근성을 향상시키는 구체적인 방법들이다.

시맨틱웹, 컨텍스트웹

개발자인 내가 가장 관심을 두는 부분이자, 기획자도 반드시 관심을 두어야 할 부분이라고 생각한다.
semantic web , contextual web. 의미론적웹 과 내용적인웹 이란 뜻이다. 가장 최근 용어이고 이해하기 어려운 구석이 있다.
내 능력안에서 가장 쉽게 표현한다면 “HTML 웹페이지는 그 파일 자체만으로서 정보를 얻을 수 있어야 하고, 그 정보는 체계적으로 구성 되어야 한다” 정도이다.
SEO(Search Engine Optimization) 정도를 테스트하기 위한 사이트인 http://www.seo-browser.com/에서 자신이 만든 사이트 주소를 입력 해 보면, 구글과 같은 검색엔진의 시선으로 해당 페이지를 표시 해준다.
아래는 나와 관계있는 어느 사이트의 예 이다.

[トップページへ] [top_home.gif]
[top_icon.gif][top_sitemap.gif]
[top_icon.gif][top_contact.gif]
[top_icon.gif][top_location.gif]
[navi_01.gif][navi_02.gif][navi_03.gif][navi_04.gif]
[main_b_01.gif] [main_b_arrow.gif] [main_b_02.gif] [footer_copy.gif]

거의 최악이다. 15개의 이미지와 한 개의 링크만 존재할뿐인데그 링크의 텍스트도 구체적이지 않고 “トップページへ”란 애매모호한 표현 뿐이다. 그저 <title/>태그나 <meta keywork=””/>등의 헤드태그만 열심히 넣고 SEO 했다고 생각하는 모습이 잘 보인다. 아무리 메타 태그의 keyword나 description을 잔뜩 넣은들 본문이 저 모양으로 “내용없는 페이지”인데, 검색엔진의 로봇이 무시하지 않을래야 않을 수 없다.
사실 HTML 자체는 굉장히 구조적인 형태이며, 이에 따라서 문서자체를 많은부분 구조화 시킬 수 있는 엄청난 장점이 있다. 개발자나 코더라면 이미 알다시피 HTML과 XML의 구조는 다르지 않다. 그런데 XML은 오늘날 “데이터”교환에 얼마나 많이 사용되고 있는가? HTML에도 “정보”를 담아야 한다.
CSS 2.1이 나오고 3.0 규격이 준비되고 있는 지금, 이 CSS의 막강한 기능은 HTML에서 디스플레이적인 요소를 제거하고 순수한 시맨틱 웹페이지를 만들 수 있는 가능성을 엄청나게 높여줬다.
텍스트만 많다고 시멘틱웹은 아니다. 이 텍스트가 HTML의 태그들에 의해 얼마나 잘 조직/구조화 되었는가가 중요하다. 적재적소에 필요한 태그를 배치하여야만 한다.

사실, “시멘틱웹”의 의미는 낮선 것이 전혀 아니다. 불과 10여년전만 해도 웹페이지에 이미지가 잘 안쓰였는데, 이미지에 의한 디자인이 없다보니 대부분 HTML 고유의 태그를 사용해서 디스플레이 표시를 계획 했다.
문서의 대중소제목에 따라 <h1/><h2/><h3/>를 제목에 적용하고 문단에는 <p/>를, 목록에는<ul><ol><li>를 넣는 등, “진짜 태그 용도”에 맞게 사용했었다. 그런데 이미지등 비주얼적인 요소가 많아지기 시작하면서 <table/><img/>밖에 없는 페이지들이 늘어났던 것이다.
“시멘틱웹”은 전혀 새로운 “이상향”이 아니라, 원래 태생적으로WWW이 가진 장점을 살리는 것이고 WWW의 성능과 활용을 최대화 할 수 있는 길이다. 잠시 잃어버렸던 장점을 되찾아가자는 주장인 것이다.
위의 “웹접근성”의 문제는 “의미론적웹”화 하면 상당 부분 해결이 될 수 있으며, 장치 중립성(inter-operability)의 문제도 함께 해결이 되어 다수의 플랫폼에 의한 동일 페이지로부터 동일한 정보 취득이 가능해 지는 엄청난 장점(재사용성,운영의 효율성,개발파트의 코드/뷰 분리이슈)이 “시멘틱웹”의미 안에 있다.
또한, RDF등 기술처럼 웹전체를 거대하고 조직화된 정보 창고로 만들고자 하는 야심찬 차세대 움직임의 근간에도 이 시멘틱웹이 필수가 된다.

요즘 web 3.0 이라고 하면서 이 “시맨틱웹”이 함께 많이 씌여지고 있는데….
난, web 2.0이나 3.0이니 하는 용어를 아주 싫어한다. 그저 마케팅 용어일 뿐이거나(실제 업무에서 flash 등장이 web 1.5니 뭐니 프리젠테이션 하며 솔루션 팔아먹고자 애쓰던 최근의 어떤 분 등 수없이 봐왔다), 아니면 그저 밖에서 관람하듯 지켜보는 칼러미스트의 관념적인 시각일 뿐이다.
RDF, OWL, 지능형 수집(intelligently collecting) 등 컨텍스트 검색 위젯등의 차세대 기술을 이야기하며 web 3.0 이라고 하고 그중 “시멘틱웹”도 하나의 “상품”또는 “기술”인양 소개하는데 제발 글쓰시는 양반들 그러시지 마시오!

다음 주제

  • 주제 2. 디자이너 : 표현/실현 방법을 모르는 디자인은 그저 그림일 뿐이다.
  • 주제 3. 개발자 : HTML 코딩 우습게 생각하지 마라. 컨텐츠와 뷰를 분리하는 현존 최고의 규격 HTML/CSS2.1
  • 주제 4. 비지니스적 목적에 근거한 내부적인 RFP는 반드시 정해놓자 (http://www.seo-browser.com/)
  • 주제 5. 실무 코딩 방법과 팁
      Form input
      A click
      frame
  • 주제 6. 기획-디자인-코딩-개발의 이상적인 협업에 대하여


QR Code