아시는 분은 아시겠지만, 몇일전 파이어폭스 3 (firefox 3)가 출시되었습니다.
(다운로드는 아래 로고를 클릭하세요.)

새롭게 디자인된 브라우저 형태가 상당히 시선을 끌고, 특히 엄청난 기능들이 추가되었습니다.

[firefox 3 for 윈도우]

[firefox 3 for Mac]

자세한 기능들은 여기(한글번역본도 추가되었네요.)에서 보실 수 있습니다.

설치후, 기존 firefox 2 사용자라면 어마어마하게 빨라진 랜더링 속도에 입이 쩍 벌어질 것입니다.
자세한 기능을 나열한 Guide에도 있지만, 랜더링 속도가 엄청나게 빨라졌고, 기존에 메모리를 많이 차지하던 것도 많이 개선되었습니다.

단적으로 잡코리아 사이트를 예로 들자면,
메인도 마찬가지지만 특히 업직종별 채용공고 리스트의 경우 10번 중 6번은 스크립트 중지 또는 브라우저 다운현상을 겪었었습니다.
하지만, firefox 3에서는 그런 현상이 전혀 나타나지 않습니다.
더불어 랜더링 속도도 기존 IE의 최소 2.5배 정도 차이가 나던 것이 현재는 비슷하거나 오히려 더 빨라졌습니다.

마크업 개발자로서 상당히 모질라 재단에 감사를 해야할 정도입니다.
항상 firefox를 중요하게 여기면서도 선뜻 주브라우저로 설정하지 못했었던 이유가 이젠 없어졌으니까요.

하지만, 잡코리아에 작업한 내용들을 훑어보니 감사만 할수는 없을 듯 합니다.
특히 서브글로벌의 경우 메뉴와 검색바 사이에 공간이 생겼습니다.

기존에는 IE 6, IE 7, Opera, Safari, Firefox 2 모두 동일하게 문제가 없었으나 firefox 3에서는 몇가지 CSS 랜더링 차이가 있는 것 같습니다.
firefox 3의 CSS 지원이 더 확장되고 더 세밀해지면서 어설프게 CSS를 사용해서는 안될 듯 합니다.
또한 javascript 지원에서도 기존과 다소 차이가 있을거라는 말을 들었습니다.
정확한 내용은 모르니 패스.

Firefox는 IE와는 차이가 있습니다.
IE는 강제로(?) 사용할 수 밖에 없는 브라우저라면, firefox는 기능적인 측면뿐만 아니라 편리성때문에 개별적으로 다운로드하여 설치하는 브라우저입니다.
즉, IE보다 충성도가 높은 브라우저입니다.

firefox 3가 출시되고 24시간만에 전세계 800만 이상이 다운로드했다는 사실(2008.06.20 현재 1300만)을 듣고 상당히 놀랐습니다.
한달여 전부터 진행된 Download Day 행사를 통해 예약을 했었는데, 그게 주요했던 것도 있지만, 그만큼 표준을 지원하는 브라우저에 대한 사용자들의 요구가 강하다는 반증이겠죠.

IE 7이 출시되었지만, 아직까지도 대부분의 접속자들은 IE 6을 사용하고 있습니다.
IE 7을 강제하려고 했지만, 그렇게 쉽게 사용자가 늘어나지 않았습니다.
그래서 마크업시 IE 7뿐만 아니라 IE 6에서도 랜더링 테스트를 해야합니다.
하지만, firefox는 얘기가 좀 다를듯 합니다.
충성도 높은 firefox 사용자들은 거의 대부분 firefox 3로 옮겨올 것입니다.

현재 잡코리아 내에서 마크업 개발을 하고 있거나 사용중이신 분들은 마음편하게 firefox 2를 버리고 3로 갈아타시기 바랍니다.
그래서 firefox 3에서의 문제점이나 버그들을 빨리 공유해주시기 바랍니다.

firefox 3 출시에 맞춰서 대충 적어봤습니다.

[부연]

IE 7 이 출시되었을때 각 포탈들에게 자사 사이트에 최적화된 IE 7 을 내려받도록 했었습니다.
firefox 도 현재 네이버와 다음에서 자사 사이트에 최적화된 firefox 3 를 만드는 작업을 하고 있습니다.
firefox 가 이제는 비주류가 아니라 주류라는 의미가 되겠죠?

웹표준을 접하고 웹표준을 지켜서 개발해보려고 하는 사람들과 대화를 하다보면 항상 듣게 되는 말이 있습니다.

마크업이 너무 어려워요. 어디에 뭘 써야할지 늘 고민돼요. T.T

저역시도 처음에 가장 힘들었던 것이 바로 어떤 상황에 어떤 마크업을 하느냐였습니다.
이걸 dt로 해야하나? h태그로 해야하나? fieldset을 넣는게 맞나? label은 항상 해야하나?….

늘 그런 고민으로 지우고 다시 하고, 또 생각이 바뀌니까 또 지우고 다시 하고.. 이런 상황이 계속 반복되었습니다. 마크업한다는 것이 얼마나 어려운가에 대한 절망감으로 스스로 더욱 단련되어야 한다고 결심하곤 했습니다.

시간이 지나 Markup에 자신이 생기게 되었지만, 늘 2% 부족하다는 느낌을 지울수가 없었습니다.

그러던 중 이 고민에서 해방시켜줄 실마리를 찾게 되었습니다.
사실 처음 웹표준을 접하는 사람들은 누구나 비슷한 내용을 들어봤었을 원론적인 얘기였습니다. 하지만, 처음에 들었던 것과 달리 그 글은 마크업의 실마리를 제공해주었습니다.

Semantic HTML tries to convey meaning through the words and the tags on a page. Try thinking of it this way: the content on the page is the words you speak. The tags provide the structure, the intonation, the pauses and even the looks on your face. Basically, your tags are half your message.
(원문 : http://dev.opera.com/articles/view/semantic-html-and-search-engine-optimiza/)

개인차가 있겠지만, Semantic Markup에 주된 관심사를 가진 저는 SEO를 다루는 원문의 한 문단일 뿐인 이 부분을 읽고, 지하철에서 전율을 느끼고 머리가 뻥 뚫리는 기분을 느꼈습니다.

본질적인 Markup

웹으로 연결된 수많은 사람들에게 자신(우리)의 생각을 표현하며, 그 정보를 모든(처음부터 ‘모든’은 아니었지만) 사람들과 공유하고자 하는 ‘마음’에서 시작된 웹은 나날이 발전/확장되어 이제는 정보공유 그 이상의 의미를 가지게 되었습니다.
그 이상의 의미때문에 저와 같은 웹관련 업종에 종사하는 사람들이 많이 생기게 되었으니 이전 시기에 웹을 발전시켰던 분들께 우선 감사부터 드리겠습니다.
하지만, 발전이라는 것이 늘 그렇듯 ‘초심’을 잃어가고, ‘변질(왜곡)’되어가는건 어쩔 수 없나봅니다.

초기의 웹은 아름답고 세련된 디자인으로 콘텐츠를 전달하는 것에는 미흡했습니다. 하지만, 전달하고자하는 콘텐츠에 담긴 ‘마음’만은 정확히 표현했습니다.
화면을 볼 수 있는 사람이건, 볼 수 없는 사람이건, 들을 수 있는 사람이건, 들을 수 없는 사람이건 웹은 모든이에게 동등한 ‘마음’을 전달하는 도구였습니다.

하지만, 현재의 웹전반을 보고 있노라면 ‘마음’이 없다는 생각이 듭니다. 현재의 웹은 ‘마음’보다는 ‘비쥬얼, 사업성, 사용성’ 등에만 매몰되어 있는 것 같습니다.

디자인은 웹 디자이너가 콘텐츠를 어떻게 보여줄지에 대한 오랜 숙고를 통해 만들어진 비쥬얼 언어입니다. 디자인과 마크업을 병행하는 대다수의 웹 디자이너와 웹 퍼블리셔들은 이 비쥬얼 언어를 한번더 마크업 언어 즉, HTML로 표현하게 됩니다.

그런데, 여기서 웹 디자이너(웹 퍼블리셔)들은 뿌리깊은 관성에 빠지게 됩니다.
바로 다수의 사용자(정상인)들이 많이 사용하는 브라우저(IE)에서 제대로 보여지기만(비쥬얼) 하면 된다는 개발방식입니다. 이런 개발방식으로 인해 중첩된 table(div)을 사용하게 되고, 각 태그들이 의미보다는 표현을 위해 사용되게 됩니다. 그 결과 웹은 스스로 일부 사용자/사용환경에서의 접근을 제한하고, 이들에게 소외감을 안겨주었습니다.

이런 잘못된 생각의 근원은 바로 HTML을 ‘배치’의 개념으로 배우고 이해했기 때문입니다. 디자인이 디자이너의 ‘마음’을 담은 섬세한 언어라면 HTML도 마찬가지로 ‘마음’을 담는 언어여야 합니다. ‘배치’는 CSS를 통해 완벽하게 표현될 수 있습니다.

보여지는 디자인이 전부인 사람들도 있지만, 그 디자인보다 HTML로 소통하는 사람(환경)도 있다는 것을 깨달아야 합니다. HTML로 소통하는 사람(환경)에게 ‘마음’이 담기지 않은 HTML은 이해하고 해석하기가 쉽지 않습니다.

그렇기 때문에, HTML을 ‘배치’의 수단으로 사용할 것이 아니라 소통의 수단으로 사용해야합니다. 즉, 본질적인 Markup은 ‘마음’을 담아내는 것입니다.

마음을 담은 Markup

위에서 언급했듯 웹 디자이너는 우선 디자인을 통해 사용자들과 소통합니다.
그리고, 웹 디자이너(웹 퍼블리셔)는 HTML로도 소통해야합니다.
이때, 두 가지의 소통은 동등해야 합니다.
쉽게 말해 디자인에서 강조됐던 타이틀은 HTML에서도 강조된 타이틀이어야 합니다.

이건 비단 웹표준을 지키는 의미뿐만 아니라, 웹접근성 향상과 SEO(Search Engine Optimizing)와도 밀접한 관계가 있습니다.
‘마음’을 담아 소통하는 Markup은 이 3가지를 한번에 얻을 수 있는 최적의 방법입니다.
제작자들이 ‘마음’을 담기만 한다면, 일반 사용자와 소외 계층 사용자(장애인/노인) 뿐만 아니라 기계에게까지 ‘마음’이 전달되게 됩니다.

전 웹 디자이너/웹 퍼블리셔 분들께 제가 알고 있는 가장 쉬운 Markup 방법을 알려드리고 싶습니다.

눈을 감고 마음 속을 들여다보세요.
그 속에서 무엇을, 어떻게 말하고 싶은지 스스로 물어보세요.
그리고 말하세요.
HTML로…
HTML에 당신의 ‘마음’을 담으세요. 당신의 ‘진심’을 담으세요.