하드한 웹표준 코딩

처음 WWW가 제안되고 만들어졌을 때, 웹은 모든 사람들이 장치에 관계없이 자유롭게 정보를 교환하는 것을 목표로 하고 있었다. 그렇지만 10여년의 발전기동안 웹 페이지를 보기위해 만들어졌던 일종의 뷰어인 '브라우저'들은 시장잠식을 위하여 싸웠다. 그 싸움의 결과 이제 웹이라는 내용이 브라우저라는 뷰어에 종속되는 상황이 되었다.

관련 글 :
넷스케이프의 귀환
독점,네트워크,그리고 Microsoft



웹 표준의 준수가 왜 중요한지는 구태여 설명하지 않아도 수많은 글들이 있으므로 생략한다. 아주 간단하게 요약하자면 가장 큰 이유는 한 회사에 종속적인 브라우저로 인하여 그 회사를 통해서만 공공재인 웹을 사용하게 될 미래를 막기 위해서이고, 그 다음 이유는 새로운 기술과 표준안이 독점에 의하여 전혀 반영되지 않는 현재의 상태를 극복하는 방법이기 때문이다.

그런데 막상 W3C의 웹 표준에 맞추어 웹 페이지를 코딩하다 보면 골치아픈 경우가 많다. 시장에서 가장 큰 위치를 차지하고 있는 웹 브라우저인 마이크로소프트의 인터넷 익스플로러가 최신 표준인 CSS2, CSS3를 제대로 지원하지 못하는 것이 하나의 이유이다. 또한 지원하는 표준의 경우에도 많은 경우 원래 표준안과 다른 형태의 결과물을 내어놓는다. 따라서 표준안대로 코딩하면서도 각 브라우저에 따라 다르게 보일 결과물들을 모두 고려해야 하는 상황이 생긴다.

관련 글 : CSS의 호환성 차이

이러한 상황을 해결하기 위하여 CSS hack이라는 방법이 발달하였다. 브라우저에 관계 없이 같은 결과를 보여주기 위하여 IE에 존재하는 명령어나 버그를 이용하는 방법이다. 하지만 이러한 방법으로는 IE가 지원하는 CSS의 한계를 벗어날 수 없다. 단지 브라우저에 관계없이 같은 결과물을 보여줄 뿐이다. 새로운 표준인 CSS2등은 전혀 사용할 수 없다. 또한 표준대로 코딩 하고서 또 hack을 위하여 박스를 하나 더 씌운다거나 코드를 더 집어넣는다거나 하는 불필요함이 발생하게 된다.

IE7 - 인식의 전환 : NOT 'Internet Explorer 7'!

이러한 문제를 어떻게 해결해야 할까? 가장 간단한 방법은 모든 사용자들이 웹브라우저를 익스플로러에서 다른 브라우저로 바꾸는 것이다. 그렇지만 한국의 상황에서 언제쯤 그런 날이 올 수 있을지는 요원하기만 하다. 아니면, 거의 4년만에 베타버전이 나온다는 익스플로러의 새 버전을 기다리는 방법도 있다. 들리는 말로는 CSS2 지원을 강화한다는 이야기도 있기 때문이다. 그렇지만 이 방법은 윈도우 98과 2000사용자들은 완전히 포기하는 방법이다.

사용자의 브라우저를 업데이트하지 못한다면, 서버가 표준을 지원하도록 만들어 보는 것은 어떨까? 이러한 생각에서 나온 프로젝트가 sourceforge에서 찾을 수 있는 'IE7'이다. 아이디어는 간단하다. 최신 표준으로 코딩된 페이지를 익스플로러에서 열었을 때 최신 표준 명령어들을 기존의 익스플로러에서 가능한 명령들로 바꾸어 보이도록 만드는 것이다. 또 익스플로러 호환성 문제가 있는 부분들은 수정하여 익스플로러에서도 다른 브라우저와 똑같이 보이도록 만드는 것이다.

관련 사이트 : http://dean.edwards.name/IE7/

방법은 간단하다. 자바스크립트들로 코딩되어 있는 위의 코드들을 받아 서버의 ie7 디렉토리에 올리고 다음과 같이 문서의 content-type meta head다음에 붙여버리면 끝난다.

[CODE] [/CODE]

주석문이기 때문에 다른 브라우저에서는 무시되지만, 익스플로러에서는 위의 명령이 실행되고 자바스크립트가 로딩된다. ([ if lt IE7 ]은 if less than IE7의 의미임) '::before , ::content' css스타일등을 마음껏 써도 되고, 더이상 div박스의 마진을 생각할 필요도 없다. PNG 파일도 자유롭게 쓸 수 있다. 패치되는 목록은 http://dean.edwards.name/IE7/compatibility/ 에서 확인할 수 있다.

웹표준 권고안 준수와 최신기술 적용을 위해서는 비표준 태그들이 사라지고 익스플로러가 표준안을 빨리 받아들이는 것이 가장 좋겠지만, 그렇지 않을 경우 크로스 브라우징을 위한 최고의 방법이 아닐까 한다.

IE7을 적용하기 이전의 익스플로러 출력화면.

IE7을 적용한 이후의 익스플로러 출력화면. css2의 ::before가 적용된 것을 볼 수 있다.

파이어폭스의 출력화면. 옆과 거의 동일하다.




Nvu - 표준을 지키는 웹에디터

웹페이지를 만드는 다양한 웹 에디터가 있다. 우리나라에서 가장 잘 알려진 나모 웹에디터와, 국제적으로 유명한 드림위버가 주로 쓰인다. 그렇지만 표준을 지키는 웹페이지를 만들기 위하여 나모 웹에디터를 사용하는 것은 무모하다. 표준과는 거리가 멀 뿐만이 아니라 속성을 변경할 때마다 들러붙는 코드들로 인하여 품질이 너무나 떨어지는 코드를 내놓기 때문이다. 드림위버는 나은편이라고는 하지만, 역시 최신표준을 바로 반영하지는 못한다. 게다가 드림위버는 비싸다.

모질라 슈이트에서 파이어폭스와 썬더버드가 갈라져 나오면서 웹페이지를 만드는 부분이었던 컴포저는 Nvu라는 이름으로 새로운 프로젝트가 되었다. 강력하고, 깨끗한 코드를 만들어내고, 무료이다. 옵션에서 html/xhtml은 물론 transitional/strict를 지정하여 결과물을 얻을 수도 있다.

윈도우 플랫폼뿐만이 아니라 다른 모질라 형제들처럼 모든 플랫폼으로 나와있다. 아직 한국어화가 되지 않은 것이 아쉽다. (나중에 아무도 하지 않으면 해버릴지도 모르겠다)


Nvu 웹페이지 : http://www.nvu.com/


Nvu 실행화면.

이올린에 북마크하기(0) 이올린에 추천하기(0)

"물리와 셈틀 이야기" 카테고리 돌아다니기

2005/07/09 23:22 2005/07/09 23:22
TAG , , , ,
트랙백 2, 댓글 13개가 달렸습니다.
댓글+트랙백 RSS :: http://forest.nubimaru.com/rss/response/794

트랙백을 보내세요

트랙백 주소 :: http://forest.nubimaru.com/trackback/794
트랙백 RSS :: http://forest.nubimaru.com/rss/trackback/794
  1. 웹에디터계의 불여우 NVU

    Tracked from 일모리 블로그@ilmol.com 2005/07/11 08:47

    Firefox. 국내에서는 파이어폭스, 불여우라고 불리우는 .코엔진의 오픈소스 브라우저. 수많은 개발자들이 그 장점을 최대한 살려 여러가지 확장기능, 테마 기능으로 예전의 브라우저=익스플...

  2. 웹 표준과 웹페이지 코딩 - IE7 과 Nvu

    Tracked from 소내기 블로그 2005/07/14 01:15

    http://inureyes.bluemime.com/forest/index.php?pl=794

댓글을 달아 주세요

댓글 RSS : http://forest.nubimaru.com/rss/comment/794
  1. 무릉동원 2005/07/10 00:43

    좋은글 잘 보았습니다. 스크랩 하였는데 괜찮겠지요?
    좋은 날들 보내세요.

  2. 이선중 2005/07/10 01:25

    트랙백 감사합니다. HTML, CSS 이슈는 위 내용으로 해결 가능하겠군요. 현재 디자인, html coding 작업을 외주 형태로 진행하는데 협력업체에 위 에디터를 소개해주어야겠습니다. :-)

  3. 신현석 2005/07/11 10:42

    이전에 position: fixed 지원 라이브러리를 보고 누군가 이런 작업을 하고 있지 않을까 싶었는데 실제로 있었군요!
    앞으로 CSS Hack 보다는 이걸 쓰는 방향으로 작업을 해야 겠군요!

  4. daybreaker 2005/07/11 16:50

    이런 편리한 것이 있었다면 진작에 좀 알려주시지~ 이러면서 가져갑니다. :)

  5. 토끼군 2005/07/11 20:46

    저도 다음에 만들 사이트에는 IE7을 애용할 예정입니다. 우후후후 -,.- 진짜 IE7이 나왔을 때는 이 IE7이 필요 없어야 할텐데...

  6. 일모리 2005/07/11 22:43

    저도,,, 올블글을 보고 그쪽에 트랙백을 보냈네요,,
    원본글도 확인않고,, 아무튼 IE7 js 아주 좋죠 ㅎ

  7. 신승식 2005/07/11 23:33

    좋은 글 감사합니다. 적용해봐야겠군요.

  8. inureyes 2005/07/12 04:06

    무릉동원 // 옆에 있는 CCL만 잘 지켜주신다면 상관 없습니다 :)

    이선중 // 영어만 되면 Nvu가 좋은 선택이 될 것이라고 확신합니다. 윈도우와 리눅스를 오가며 쓰는데 정말 편하네요.

    신현석 // 저도 그런 생각을 하고 구글에 검색을 해보니 위의 프로젝트가 나오더군요. 검색의 생활화~

    daybreaker // 많은 도움 되셨으면 합니다. :) 1학기는 잘 보내셨는지?

    토끼군 // 그 때가 되더라도 XP설치 못하는 사양 딸리는 컴들은 여전히 IE6을 쓰고 있겠죠. 안타깝네요:(

    일모리 // 네 편하더군요. div박스가 무지무지 다중으로 되어있으면 가끔 오류를 내기도 하는데, 보통은 별 무리없이 잘 적용되는 것 같습니다.

    신승식 // 화이팅입니다. :D

  9. 유노카 2005/07/13 16:58

    눈치 보면서 드림위버 안 써도 되겠군요^^

    갑사합니다.

  10. Nvu V1.0 한글판 2005/07/18 13:58

    http://software.myfolder.net/Category/Story.html?sn=61585

  11. Dotty 2005/07/28 04:31

    오, 깔끔한 해결책이 있네요! :D
    전 그냥 익스 사용자들 괴롭히려고 내버려둘까 생각중입니다. (왠 심통)
    마이크로소프트만 세상에 있는줄 아는 분들이 적지 않아서 말이죠.. 조금더 다양성이 풍부해지는 한국이 되길... (사실 귀찮아서)

  12. yser 2005/08/09 20:35

    모질라 사이트에서 보고 이전에 들렀다가 ie7 스크립트 잘 쓰고 있습니다. 사실 이런 정보가 있어도 막상 우리말로 된 리뷰 같은 게 없으면 잘 안쓰게 되기 마련인데 이 글로 인해 들러보기만 하는 사이트의 스크립트를 직접 쓰게 되었습니다. 감사합니다.

  13. inureyes 2005/08/14 03:13

    도움이 되셨다니 다행입니다. :) 좋은 방법이기는 하지만 근본적인 해결책은 아니라는 점이 아쉽죠.

[로그인][오픈아이디란?]
비밀글 (Secret)
댓글 달기 (Submit)