Feed on
Posts
Comments

웹표준이 웹종사자들에게 알려진지 벌써 수개월이 흘렀다.
(수개월 뿐이겠는가.. 그동안 비슷한 세미나,컨퍼런스,워크샵 등등 생각해보면 참 많았다.)
하지만 아직까지 웹표준에 준수한 사이트는 많이 늘어나지 않았고, 그 문제중 하나로 가장 근본적인 문서선언부 부분부터 제대로 선언하지 않는 사이트가 많은 것 같다.
웹페이지를 제작하면서 확장자만 .html 로 제작하면 모두 웹페이지라는 생각을 오늘부터는 버렸으면 하는 바램으로 DOCTYPE의 바른 선언과 올바른 문서정의에 대해 알아보기로 하겠다.
사전적인 용어와 해설을 포함하는 글이다보니 다소 딱딱한 내용일 수도 있지만 문서를 제작함에 있어 기본인 부분을 잘 알고 넘어가야 된다는 생각에 반드시 제대로 알고 넘어가기를 바란다.

DOCTYPE 이란?

DOCTYPE은 “문서의 종류를 선언할 때 필요한 마크업 이다.” 라고 정의 내릴 수 있는 Tag 이다.
하지만, 그나마 IE에서는 quirks mode로 인식하는(http://hsivonen.iki.fi/doctype/ - 참조) “<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>” 라도 선언이 되어있는 사이트면 그나마 양호한 사이트라고 말 할 수 있지만, 국내 사이트중 DOCTYPE을 아에 선언하지 않는 페이지를 찾기가 더 쉬울것이다.
이렇게 DOCTYPE 선언하지 않는다면 브라우저는 현재 페이지가 어떠한 HTML 버전을 사용하고 있는지 모르게 때문에 호환모드(quirks mode)로 변환을 해서 rendering(화면묘사)하게 된다.
이렇게 브라우저가 알아서 호환모드로 변환하여 rendering 된다는건 어찌보면 브라우저가 똑똑하다고 생각할 수 있지만 실제론 그 반대이다.
마크업과 스타일시트의 조합으로 멋진 사이트를 제작하였다 하더라도 호환모드로 rendering한 브라우저는 매번 똑같은 화면묘사를 보여준다는 보장을 할 수 없기때문에 사용자에게 큰 혼란을 가져다 줄 수도 있기때문이다.
DOCTYPE이 이렇게 중요한 것인 만큼 이제는 올바르게 알고 사용해야 하지 않을까 생각한다.
하지만 DOCTYPE을 선언 해서 문서의 유형을 올바르게 정의내리는것이 맞다는걸 알고 있지만 기존에 진행되던 방식을 하루아침에 바꿀 수는 없을 것이기 때문에 쉽게 바꾸지 않은 곳도 있을 것이다. 그렇다고 계속 선언을 하지 않고 페이지를 제작한다면 과거의 좋지않은 작업방식을 그대로 사용하는 것이니 시간을 가지고 조금씩 개선을 해야 할 필요가 있겠고, 그러기위해 사용해야 할 DOCTYPE의 종류중 대표적인 몇가지에 대해 살펴보면,
DOCTYPE은 문서의 목적이나 구조에 따라 필요한 DOCTYPE을 선언할 수 있다고 되어 있다.
그 종류에는 엄격한 문법과 구조를 요구하는 strict 버전과 구버전의 속성이나 Tag를 허용하는 transitional 버전 그리고 frame 을 이용해 페이지를 제작하려면 frameset 버전이 있다.
일반적으로는 브라우저가 이전 버전을 수용해야할 상황이 있을 수 있으므로 transitional 을 많이 사용한다.
하지만 transitional버전을 사용한다고해서 과거 표현만을 위한 Tag를 허용한다고 해서 계속 사용한다면 문법상으로는 이상이 없으나 웹페이지의 효율성과 접근성은 저해될 것 이니 이런 부분들 까지도 신중하게 판단해서 사용해야 할 것이다.

올바른 문서정의

문서를 정의할때 필요한 몇가지중 위에서 언급한 문서유형 선언이 있고 다음으로 언급할 내용이 언어선언이다.
언어선언은 기본적으로 html 태그에 lang속성을 이용해서 설정하고, 만약 xhtml1.0 이상의 DOCTYPE을 선언했다면 HTTP의 헤더 또는 html 태그에는 xml:lang 속성으로 문서의 주 언어를 선언해서 설정한다.
사실 이 언어선언은 반드시 필요한 사항은 아니지만 접근성을 위해서는 고려해야할 사항이다. 그리고 문서에 주 언어를 선언한 후에도 Tag에 별도로 재 선언을 할 수 있으니 필요한 곳에 필요한 언어선언을 한다면 조금은 접근성이 더 높아진 사이트라 할 수 있다.
컨텐츠유형 정의 또한 올바른 문서 정의를 위해 꼭 필요한 요소이다.
컨텐츠유형 정의에는 미디어 유형(예:Content-Type:text/html)과 HTML 문서의 문자설정(예:charset=”utf-8″)을 선언하며 반드시 명시되어야 한다.
먼저 Content-Type은 MiME(Mulitipurpose Internet Mail Extension) type 이라 부르며 어떠한 미디어 형식인지를 브라우저에게 알려주는 역활을 한다.
모든 파일은 이 MIME type 을 가지고 있는데 예를들면 JPEG 파일은 image/jpeg, CSS파일은 text/css 등이 있고 일반적인 HTML 페이지라면 text/html 을 사용하면 된다.
Character set은 문서의 문자 형식을 설정 하기위해 선언하는데, 이는 문서에 작성된 혹은 작성되는 문자를 고려해서 설정해야한다.
예를들면 서양언어와 라틴계열 언어를 지원하는 “ISO-8859-1″, 그리고 아시아어(일본어,’UTF-8′ 포함)를 지원하는 “SHIFT_JIS”가 있고, 특수문자와 같은 광범위한 문자를 지원하는 Unicode 포멧 등이 있는데, 별도로 선언이 되지 않는다면 기본적으로 ‘ISO-8859-1′이 선언된다. 하지만 대부분의 문자를 표현 할 수 있고 사용하기 안전한 코드이며 대부분의 컴퓨터에서 무리없이 작동이 가능한 ‘UTF-8′을 사용하는 것이 바람직 할 것이다.
위 내용의 컨텐츠유형을 선언하기 위해서는 몇가지 방법이 있는데 Client Side 선언방식인 ‘<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />’ Tag를 이용하는 방식이 있고 Server Side 에서 선언하는 방식이 있다. 상황에 맞는 방식을 선언해서 컨텐츠의 유형을 설정해야 할 것이다.

끝으로
HTML 문서는 HTTP 헤더 영역을 올바르게 선언했을때 비로소 HTML 문서로서의 효력을 가진다고 볼 수 있다. 그와 더불어 의미에 맞는 적법한 마크업과 표현을 분리해서 제작한다면 접근성마저 높은 가장 이상적인 페이지가 아닐까 생각해본다.

이 글은 StandardMagazine 에서 다양한 의견과 함께 보실 수 있습니다.

몇달전 나는 블로그에 “저는 웹 퍼블리셔 입니다.” 라는 제목으로 내가 하고 있는 일에 대해 기록한 적이 있다. 이미 그 전부터 블로거 사이에서 돌고 돌던 말이지만 내가 하고있는 일이 재미있고 적어도 내 블로그를 찾아주는 사람들에게 내가 지금 하고있는 일이 무엇인지 알리고 싶어서 적었던 글이었는데 반응은 의외로 좋았었다. 많은 코멘트가 달리고 자신의 블로그에 글을 남겨 트랙백을 걸어주는 등 여러 분들의 관심을 집중시킨 글이었다고 생각한다.

그만큼 “웹퍼블리셔” 라는 UI 개발자들의 새모습에 관심이 많다는 뜻으로 해석된다.
하지만 글을 적고나서 한가지 아쉬웠던 것은 UI 개발자들의 책임감과 사명감에 대해 언급하지 않았다는 점인데 이번 포스팅에 첨언하고자 한다.

수면위로 올라온 웹표준? 이미 모두가 알고있는 웹표준!

우리나라에 웹이라는 부분이 비즈니스적으로 발전하면서 다수의 웹에이전시가 생겨나고 대형 포털 회사들이 생겨나기 시작했다. 그에 발맞춰 웹프로그래머와 웹디자이너가 제자리를 찾아갈쯤 html 코드와 자바스크립트를 사용하는 front 페이지의 제작은 그 위치가 애매해서 웹디자이너나 웹프로그래머 중 여유있는 사람이 부가적으로 하는 일 쯤으로 하찮게 여겼었다.

하지만 몇년전부터 Front end 개발자, client side 개발자, 웹 퍼블리셔 등의 UI 개발자의 또다른 이름으로의 관심이 시작되고 구조와 표현을 분리한 (x)html + css 레이아웃, 웹 표준 개발, 동적인 사용자 인터페이스를 가능케 하는 Ajax 등이 부각되면서 기초적이고 하찮게 여겼던 html 마크업이나 자바스크립트 개발이 매우 중요한 화두에 오르게 됐다. 그러나 이런 기술들을 풀어가기 위해서는 시간이 필요하다. Ajax를 이용한 기술은 아직까지 미개척 분야라고 생각될 정도로 그 이용분야가 무궁무진하고, 웹의 근본적인 구조적 마크업과 css 디자인은 잘못된 교육방식과 잘못 길들여진 사용자경험 때문에 현실에 대입하기 어렵다고 느끼는게 대부분이기 때문이다.

하지만 이러한 기회를 놓치지 않고 UI 개발자들이 그 몫을 잘 해준다면 UI 개발이라는 불확실하고 애매한 위치를 확실한 위치로 바꾸면서 디자이너와 프로그래머 사이에서 정말로 제대로된 조율자 역활을 할 수 있을 것이다. 아울러 자신의 대우나 위치를 상승시킬 수 있는 좋은 기회가 될 수도 있을 것이다.
웹을 만드는데 있어 디자인과 프로그래밍 이 중요하다고 하지만 사용자가 최종적으로(front end) 접하는 건 결국 html 로 구성된 화면이고 앞으로도 그럴것이다. 그러므로 UI 개발자들은 웹을 좀 더 웹답게 만들기 위해 노력할 사명감과 책임감을 가질 필요가 있다.

UI 개발자들의 비전과 지향점

이처럼 앞으로 웹의 미래를 쥐고 있는 분야중 하나로서 UI 개발자들의 몫이 클것이다.
웹 표준의 중요성이 점점 부각되면서 구조와 표현을 분리한 마크업과 css 디자인을 할 줄 아는 “UI 개발자”나 “웹 퍼블리셔”나 “front end Developer”등으로 활동하고 있는 사람들이 점점 대우를 받는 시대로 변화고 있다. 실제로 어느 웹 에이전시나 웹 관련 IT업체에 근무하고 있던 웹 표준에 관심이 있고 이해가 높은 웹종사자들이 여기저기에서 스카웃 제의를 받는것을 보면 정말 피부로 느껴질 정도니까 말이다. 하지만 현재까지는 UI 개발이라는 부분이 앞서 말한 것처럼 애매하고 어중간한 위치임에는 분명하다.

지금처럼 웹 표준에 대한 인식이 높은 상황에서 UI 개발 직군에서 종사하는 여러분들이 한국 웹의 미래를 짊어지고 가는 선구자라고 생각하고, 잘못 된 한국의 웹을 올바른 길로 인도하고 개선하며 웹의 보편성을 지키면서도 현재의 사용자들의 만족을 유지할 수 있는 그런 웹을 만드는 개발자가 되길 바란다.

책임감과 사명감을 가지고 자기개발을 게을리 하지않는 그런 웹 퍼블리셔가 많아지길 기대한다.

위 글은 Standard Magazine 에서 관련글과 함께 보실 수 있습니다.

국내 웹표준에 관련된 사이트를 꼽으라면 CSS Design Korea(이하 CDK) 를 꼽을 것이다.
CDK는 그동안 웹표준과 웹 동향에 대해 많은 이야기가 오고갔지만 요즘 CDK를 보고있자면 단지 질문/답변 게시판이라고 밖에 생각이 안들 정도로 정보의 공유나 이슈나 동향에 대한 토론이나 이야기는 많이 없던것 같다.

말그대로 forum이라는 단어가 무색할 정도로 질문 올리면 답변 몇가지 올라오는 정도랄까..

Standard Magazine

국내에는 아직 웹표준에 대해 사람들이 생각해볼만한 주제로 이야기와, 여러가지 새 소식, 그리고 이에 관심있는 사람들의 생각을 들어볼 수 있는 사이트가 별로 없다. 그래서 CDK의 몇몇 분들이 모여서 Standard Magazine 이라는 웹진 형태의 사이트를 오픈하기로 했다. Standard Magazine은 웹 표준을 지킬 수 있는 기술을 배우는 것도 중요하지만, 더 나은 웹을 만들기 위해 더 많이 생각하고 고민하는 사람들의 생각을 기록하는 곳이다. 그런 의미에서 Standard Magazine의 창간은 게시판을 통해서만 이루어지던 단발성 소통 구조를 넘어설 수 있는 하나의 계기를 제공하지 않을까 싶다.

Standard Magazine은 알아듣기 어려운 이야기들로 채워지기 보다는, 흔히 이야기하지만 구체적으로 다뤄보지 못했던 이야기를 하고자 한다. 또, 많은 사람들이 웹에 대한 서로의 생각과 비전을 교류할 수 있는 장이 되길 바라며. 잘 풀리지 않았던 문제들이나 혼자 풀기 어려운 일을 풀어가는데 작게나마 도움을 줄 수 있는 공간이 되길 바라는 마음으로 시작하게 되었다. 웹을 웹답게 만들고 알리고자 혹은 알고자 하는 여러분들이 많이 참여했으면 하는 바램이며 현재 임시 오픈상태이고 구독신청을 받고 있다.

아름다운 웹이 많아지는 그날까지…