창조유저그룹-커즈닷컴

LIST ALL

Posted by 권선중

2010-07-28 07:07:05, Hit : 4414

웹표준이란 무었을까요?

Homepage : http://love2is.ndsever.biz

Post URL : http://cugz.sjworks.net/bbs/zboard.php?id=freeboard&no=4517

아래 익스9가 나온다고 글을올렸는데 그와중에.. 웹표준에 관한 예기가 나와서.. 적어봅니다..

웹쪽에서 일하는 저로서 과연 웹표준이란 무었일까하는 의문이 문득 문득 들곤합니다..

이건 어디까지나 저의 의견입니다...

자 웹표준이란 무었을 말하는걸까요..?

----- 웹 검색으로 퍼옴
웹표준이란 ' 홈페이지가 보일 수 있는 모든 곳에서, 정상적으로 똑같이 보이게 하는 것을 말한다.'
웹표준은 위의 1줄을 지키기위해 만든 하나의 약속입니다..

-----------------------------------------------------------------------

그간 수없이 많은 홈페이지를 코딩해봤지만 아무리 웹표준을 지키고 제작해봤지만.. 모든 부라우저에서 똑같이 보여지지는 않더군요..

여러분은 브라우저의 종류가 몇가지나 되는지 아시나요?

---------------- 얼마전 모임에 가서 얻은 자료입니다. --------------------

트라이던트 기반 : AOL 익스플로러 · 아방트 · 에니그마 · 맥스톤 · 슬림브라우저 · 네오플래닛 · 넷캡터 · 넷스케이프 브라우저 8 · 인터넷 익스플로러 · 아이라이더 · 스마트 브로 · 슬레이프니르 · 텐센트 트래블러 · 울트라브라우저

게코 기반 : AT&T 포고 · 비오넥스 커뮤니케이터 · 카미노 · 닥질라 · 에피파니 · 페넥 · 플로크 · 갤리언 · K-멜레온 · K-닌자 · 가제하카세 · 매드폭스 · 미니모 · 모질라 · 모질라 파이어폭스 · 넷스케이프 · 시몽키 · 스킵스톤 · 슬레이프니르 · 송버드 · 제로뱅크 브라우저

KHTML, 웹키트 기반 : 에이브라우즈 · 유자드 웹 · 아로라 · 아이캡 · 에피파니 · 캉커러 · 미도리 · 옴니웹 · 사파리 · 스킵스톤 · 시이라 · 스위프트 · 크롬

프레스토 : 기반 오페라 · 닌텐도 DS 웹 브라우저 · 인터넷 채널

자바 기반 : 핫자바 · 로보 · 오페라 미니 · X-스마일 · UCWEB

태즈먼 기반 : 맥용 인터넷 익스플로러 5 · 맥 오에스 텐용 MSN

텍스트 기반 : 앨링크스 · 에드브라우즈 · 이링크 · 링크 · 링크스 · 넷-테이머 · w3m · 웹IE

모바일 브라우저 : 블레이저 · 유자드 웹 · 딥피쉬 · 페넥 · 인터넷 익스플로러 모바일 · 아이리스 브라우저 · jB5 모바일 브라우저 · JOCA · 미니모 · 넷프론트 · 오비고 브라우저 · 오페라 모바일 · 픽소 · S60 웹 브라우저 · 선더호크 · 웨비 모바일 · WinWAP

기타 : 3B · 아바코 · 아마야 · 아라크네 · 에이웹 · 카론 · 딜로 · 이맥스/W3 · 아이브라우즈 · 모스라 · 넷포지티브 · 넷서프 · 오레가노 · Tkhtml · VMS 모자이크 · 보이저 · 록멜트

-----------------------------------------------------------------------------------

위에 나열된것 외에도 더 있다고 하는데 위에나열된것중에도 처음듣는것들도 상당이 많이있네요..아니 거의 대부분은 못보던것을입니다..

자 저많은것들이 과연 웹표준이라고 떠드는 프로그램으로 모두 다 잘보일까요?
택도 없다는것입니다..

저역시 웹표준 웹표준해서 그에 맞게 수없이 코딩을 해봤지만 번번이 틀어지고 않맞는 경우가 태반입니다..

간단한 예를 들어서 .. 익스, 구글크롬, 파폭, 모질라, 오페라 이렇케 5가지만 가지고 웹표준작업을 한다고 합시다..

가능할거라 보시나요? 순수 웹표준 코드만가지고 홈페이지를 완성하는게..?

절대 불가능합니다.. 우리가 흔히 사용하는 홈페이지를 작성한다면 절대 불가능합니다..
우선 저같은경우 웹표준 작업을 할때 기본 3가지를 기준합니다.. 익스, 구글크롬, 파폭 하지만 이 3가지만 작업하는데도 둘가지가 맞음 반드시 하나는 트러집니다..

그런데.. 저위에 있는 모든것이 웹표준이 가능할까요..
자자 가장 완성도가 높은 대형포탈.. 네이년은 과연 100%웹표준 코드에 의한 작업일까요?

여기서 여러분께 질문을..

지금은 테이블 테그를 거의 사용하지 않죠..
어째서일까요?
웹표준이 아니라서? 라고 말하는 분들계실듯.. 절대 아님니다..
테이블 테그는 레이어 테그보다 늦게 읽기때문이면 가종 분활명령 colspon명령을 이용할때 테이블이 깨지는 현상이 발생해서입니다..
그렇치만 복잡한 구조를 이요한다면 레어보다 정확하고 깔끔한 레이아웃 작업도 가능합니다..

잠시 예기가 따른곳으로~~

제가 말하려고했던건.. 웹표준 웹표준 그래봐야.. 어디까지나.. 웹표준이라는건 가장많이 사용되는 몇몇 브라우저들에게 적용될뿐이라는것입니다.. 또한 그 브라우저들마져도 지들 맘대로라서..딱맞아 떨어지지도 않습니다..

또한 웹표준으로 작성을 한다하여도 스크립트를 사용하게된다면 또한 각부라우저마다 작동이 안되는경우도 있다는거죠..

결국 웹표준으로 작업한 사이트들의 기본적인 표준은 가장사용자가 많은 익스플로라는거죠..

위에서 말하다 만 네이버의 경우 웹표준으로 작성되었지만 결국 스크립트를 이용한 브라우저별로 스타일을 읽어온다는것입니다.. 그렇타하여도 100% 모든 프라우저에서 정확히 뜨지도 않는다는것입니다..

웹표준이 만능이 아니라는것입니다..

상현님 말씀도 일리가 있지만 과연 모든 브라우저들이 자신들만의 고집만을 세워서 나갈수있을까요?
아니라는것입니다..

결국 브라우저사용되는 곳은 OS입니다. 그럼 가장많이 사용되는 OS는 뭘까요.. windows라는 것입니다.. 그럼 windows를 개발한회사가 만든 브라우저는 무었일까요? 익스플로입니다..
그만큼 윈을 만든회사이니 만큼 그에 맞게 기능도 추가한다는것입니다..

결국 OS를 장악하고 그에 맞게 만들어가는 브라우저가 기본이되고 그마큼 사용자가 많은 브라우저가 웹표준의 기초가 될수뿐이없습니다..

익스9가 나와서 조금 불편하다하여.. 1~2%의 사용자가 줄어든다고 쳤을때.. 새로운 스크립트와 새로운 기반의 명령이 추가되면 색다른 감미로움을 준다면 또다른 1~2%의 사용자가 추가됩니다.. win_me나 win_vista처럼 새롭니다.. 정말 사용하기 너무 불편하다 느낀다해도.. 대부분 다른 브라우저로 건너가지않고.. 8버전 또는 6버전을 사용하겠죠..

현제 웹표준으로 어떻게 작업하든 완벽에 가깝게 보여지는것도 익스입니다.. 그말은 즉 익스가 웹표준에 기준이 되었다는거죠..

타브라우저가 윈에서 취약점을 보이는 이유역시 위에서 말한것처럼 윈도우를 잘알고 가장효율적으로 작업할수있는곳이 MS라는 것이기때문입니다..

이렇케 예기를 하면 MS의 찬양가처럼 보이겠지만 저역시 MS를 검나싫어합니다..매번 익스버전업될때마다 간혹 스크립트 명령이 사라지거나.. 이상한 보안으로 인해.. 사용할수없는 명령등등.. 가끔은 엑티브 엑스까지 다시 작업해야 하는등의 엄청난 고생을 할때가 있어서..

하지만 어쩔수없는 대새라는것을 말씀드리는것입니다..

결국 익스9가나오면 타브라우저들역시 다음버전에서는 익스의 새로운 부분을 넣을수뿐이없다는것이죠.. 다음 브라우저가 나올때는 타 브라우저들도.. gpu 가속을 첨부할거라 보여지네요..

간략이 쓰려했는데 결국 길어졌네요..
끝으로 위에서 말했듯 이건 어디까지나 저의 생각과 제가 본 것들을 기준으로 적은것이며.. 사람마다 경험험이 다르면 가지고있는 개념이 틀리기때문에 다르게 볼수도있습니다..

---- 추가사항 -----
위에서 서술된 부라우저들이 모두 자신만의 엔진을 사용하는것은 아니며 일부 브라우저는 타 브라우저의 엔진을 사용합니다..

Ex)에니그마 -> 익스플러 엔진용

지상현 2010-07-28 PM 12:06:53


아직까지 윈도가 개인용 PC 시장을 장악하고 있는건 사실이지만, IE가 웹 브라우저를 장악하는 것은 사실이 아닙니다. 한국은 어떨지 모르지만, 세계적으로 IE는 점유율이 절반 이하로 떨어진지도 꽤 오래됐구요. 그리고 IE가 점유율이 80%에 달했을때도 웹표준은 IE를 기반으로 따라가지 않았습니다. 엄밀히 말하면, 웹 표준은 반드시 지켜야만 하는 성스러운 것이 아니라, 지켰을 때 유리한 것입니다. 어렵게 생각할 필요가 없습니다. 웹 표준도 "표준"의 하나일 뿐입니다. 그리고 표준이란, 일종의 가이드라인으로, 반드시 지켜야 하는건 아니지만, 안 지켰을때 손해가 있습니다. (법으로 지키도록 정해진 것도 몇 가지 있습니다만...) 세상에 표준을 안 지키는 것도 웹 표준 뿐만이 아닙니다. 예를 들어 흔해 빠진 휴대폰 충전기도 흔히 짝퉁이라는 것은 표준을 정확히 준수하지 않는게 있습니다. 이런건 몇 번 쓰다보면 충전기나 배터리 둘 중 하나가 맛이 가죠. 마찬가지로 각종 레이아웃 엔진들(크게, IE의 Trident, 파폭의 Gecko, 사파리/크롬의 Webkit, 오페라의 Presto)도 가급적 표준을 준수하려고 하겠지만 현실적으로 어려운 것도 사실입니다. 일단 HTML 규칙이 점점 복잡해졌으며, 여기에 CSS와 JS 정도는 기본으로 처리해야 한다는 부담을 생각해보세요. 현재까지 나온 브라우저는 "정석"으로 이를 전부 처리하지 않는다는 것입니다. 속도를 올리기 위해 각자 알아서 수를 부리기 때문에 완벽하게 표준 레이아웃이 나오지 않는 것이구요. 모바일 환경이나 이식성 때문에도 표준이 안 지켜질 수 있다는 점도 명심하세요. 알다시피 유명한 프로그래밍 언어인 C/C++도 표준화 위원회가 있고 표준이 있습니다. 그러나 컴파일러 중에 완벽하게 표준을 다 지키는 것을 찾기가 힘들죠. 이것도 필연적으로 각 환경에 맞게, 표준에 없는 내용을 메꾸기 위해 추가 기능을 넣게 됩니다. 물론 표준 자체의 구현의 곤란함이 있어서 표준 자체도 다 못 지키는 컴파일러도 많습니다. 웹 표준도 이와 다를 것이 없다고 생각합니다. GPU 가속 기능은 IE가 차별화를 위해 넣은 기능으로 보이네요. (추가된 GPU 가속 기능은 코덱 가속 등 고화질 동영상을 처리하기 위한 기능입니다) IE가 했기 때문에 넣는게 아니라, 다들 각자 필요가 있으면 넣을 것이고, 넣을 필요가 없으면 안 넣을 것입니다. 테이블은 용도 자체가 레이아웃을 잡기 위해 나온 것이 아닙니다. 그런 이유로 차츰 사용하지 않은 것으로 알구요. (따라서 레이아웃을 잡으려고 쓰면 부작용이 많이 생기죠) 위에서 말씀드렸듯이 IE가 대세라는 말은 쉽게 동의하기가 힘듭니다.

한수훈 2010-07-28 PM 4:34:18


대부분의 웹 브라우저에서 호환되는 그런게. 표준이 아닐까요. 물론 Strict 모드의 표준도 존재하지만요. 그렇다고 웹 표준이 완벽한 것도 아닙니다. 모든 웹 브라우저에서 호환 되는것이 주 목적인 웹 표준이. 실제론 모든 브라우저에서 호환되는 것도 아니고. 대부분 브라우저에서 호환될 뿐이고. [...] 지상현님이 말하신대로 웹 표준을 지키면 손해볼 것은 없습니다. 단지 처음에 적응하기엔 불편할 따름이지요.

지상현 2010-07-28 PM 6:08:38


모두 호환되기 때문에 표준이 아니라, 표준을 따르기 때문에 호환될 수 있는 것입니다. 모든 브라우저에서 호환되지 않더라도 표준이 아닌것은 아니니까요. 표준이란 말 자체의 뜻을 음미하시기 바랍니다. 웹 표준은 일종의 기준을 정하는 의미이지 호환성에 염두를 둔 것이 아닙니다. 호환성은 구현자가 지켜야 할 부분이구요. 만약 모든 브라우저가 웹 표준을 준수한다 하더라도, 지금부터 아무나 표준을 준수하지 않는 걸 만들면 "모든"이 아니게 되겠죠? 중요한 것은, 표준은 현재 구현과 기술의 추세를 반영하긴 하지만, 두 분 말씀처럼 호환을 위해 표준을 고치는게 아닙니다. 표준을 제정하면 나머지 구현자가 그걸 제대로 따라야 호환되는 것이구요. 그 반대죠. 웹 표준이 아니라 브라우저를 고쳐야죠. 웹 표준이 완벽하지 않은게 아니라, 웹 표준을 완벽하게 준수하는 브라우저가 없을 뿐입니다. (웹 표준 제정 목적도 호환성은 아니지요...) 여기서 문제는, 사용자가 아무리 웹 표준을 지키려해도 브라우저가 웹 표준을 전부 따르는게 아니기 때문에 문제가 발생하는 거겠죠. 물론 사용자도 웹 표준을 지키지 않는 경우가 더 많구요. 이건 실상 브라우저뿐만 아니라, 예를 들어 윈도에서도 윈도 프로그래밍의 표준 방법을 따르지 않고 임시 폴더 경로를 하드코딩했다고 가정해봅시다. 그럼 그 프로그램이 만들어진 곳이나 우연히 임시 폴더 경로가 일치한 컴퓨터에서는 동작하겠지만, 그렇지 않은 곳에서는 제대로 안 될 것입니다. 그렇다고 그 프로그램의 호환성을 위해서 모든 컴퓨터의 임시 폴더를 그 프로그램에 맞게 고쳐야 합니까? 웹 표준도 이와 마찬가지구요. 문제가 되는건 웹 표준을 완벽히 따르지 않는 브라우저쪽 문제고, 그 문제란것도 사실 실용성 때문에 일부러 안 따르는게 아니라 어느 정도 타협하고 있기 때문에 그렇다는 것입니다. 본인이 웹 표준안을 준수하는 게시판을 만들었다 치더라도, 게시물 내용에 웹 표준과 어긋나는 내용을 사용하면 전체적으로는 웹 표준이 깨지게 되죠. 그러나 아직까지 글 내용까지 웹 표준에 맞게 고쳐주도록 하는 게시판은 못봤습니다. 구현이 불가능한건 아니지만 구현하는것보다 손해가 더 크니까 안 하는 거겠죠. 현재까지의 레이아웃 엔진들이 웹 표준을 완벽히 준수하지 않는 것은 그런 이유들이며, 비단 웹 표준 뿐만이 아니라 어디서도 표준이 있는 곳이면 가급적 표준을 지키도록 노력하지만 현실적으로는 그렇게 안 된다는거죠. 슬프게도 산업 현장에서도 마찬가지고요.

박종훈 2010-07-28 PM 10:49:17


저는 처음에 단순히 (X)HTML, CSS 문법검사를 통과하면 "웹표준을 준수했다"라고 좋아했었는데 요세는 생각이 바꼈습니다. 진정한 웹표준이라고 한다면 문법뿐만이 아니라 의미있게 마크업을 사용하는 것이라고 생각합니다. (그게 바로 W3C의 명세서를 따르는 거지만요~;) 가령, 테이블 태그로 레이아웃해서도 얼마든지 문법검사를 통과할수 있지만 그걸보고 진정한 의미로 웹표준을 준수했다라고 하지는 않습니다. 테이블 태그는 데이터를 정리하는 용도로 만들어져 있는데 우리는 그동안 테이블 태그를 레이아웃을 짜는 데 사용하고 있던거죠. 권선중님께서 colspan 이야기를 하셨는데, "의미있는 마크업"와 "테이블 태그는 데이터 정리용" 이라는 것에 초점을 맞추면 단순히 colspan 뿐만이 아니라 "잘못된 용도의 사용"를 바로잡자는 취지에서 테이블을 이용한 레이아웃이 줄어들지 않았나 생각합니다^^ 그리고 웹표준을 준수하면 브라우저간의 차이가 어느정도 줄어들지 않나요? Doctype만 잘 적어놔도 차이가 많이 줄어들던데 말이죠. 물론 똑같이 렌더링해서 보여주지는 않지만요. (Doctype를 잘 적어논다고 해서 웹표준을 준수했다고 말할수는 없지만 Doctype은 웹표준 준수와 브라우저간 차이를 줄여주는 가장 기본적인 단계라고 생각합니다.) 가령 IE의 쿼크모드일 경우 자기네들만의 박스 모델을 적용하지만 표준모드일 경우 정상적인 박스 모델로 렌더링을 합니다. 저는 "(X)HTML, CSS 문법 준수"로써의 "웹표준"은 이미 버렸고요. 좀더 의미를 넓게 잡아서, "의미있게 마크업하면서 브라우저간 호환성을 유지하고 문법까지 준수하면 더욱 좋은" 것이 요세 맞는 "웹표준"의 의미가 아닐까 생각합니다.(사실 웹표준이라기 보단 '요세에 맞는 웹개발 방법' 정도가 되겠군요.) 웹표준이라는 것이 반드시 준수하란 강제적인 것도 아니고 준수하면 여러모로 편한점이 많습니다.

박종훈 2010-07-28 PM 11:18:32


그런데 검색을 해서 퍼왔다는 ------------------------------------------------------- 웹표준이란 ' 홈페이지가 보일 수 있는 모든 곳에서, 정상적으로 똑같이 보이게 하는 것을 말한다.' 웹표준은 위의 1줄을 지키기위해 만든 하나의 약속입니다. ------------------------------------------------------- 위 정의가 웹표준이라고 하기에는 다소 무리가 있어보입니다. 정상적으로 똑같이 보이게 하는 것을 말하는건 웹표준이라기 보단 '크로스 브라우징'에 더 가까울것 같습니다. 그리고 저는 기본적으로 웹표준을 준수하면서 제작하려고 노력은 합니다만, 그렇게 하기가 쉽지 않더라고요-_- 여기서 쉽지 않다라는 의미는 브라우저간 차이때문이 아닙니다. 제 홈페이지가 텍스트 위주의 간단한 사이트여서 그런지 몰라도 브라우저간 차이는 크게 나지 않습니다. 브라우저간 다르게 렌더링한다던지, 지원하지 않는 것들을 주의해서 사용하면 브라우저간 비슷하게 보이도록 하는건 크게 어렵지 않습니다. 그러면 뭐가 쉽지 않냐? 그건 바로 CSS에 없는 것을 구현 할때입니다. 대표적인 것이 둥근모서리 박스입니다. 완벽하게 둥근모서리를 구현하려면 코드가 만만치 않게 들어갑니다. (물론 자바스크립트 등으로 쉽게 적용하는 코드들이 많지만요.) 그러나 모질라 기반에서 제공하는 비표준 확장인 -moz-border-radius 를 사용하면 코드한줄로 끝낼수 있습니다. 물론 비표준 확장이기 때문에 이를 지원하지 않는 브라우저에서는 단순한 모서리로만 나오겠지만, 그렇다고 해서 홈페이지 내용 파악에 문제가 되거나 하는 건 아닙니다. 다만 둥근 모서리라는 디자인 효과를 보지 못할 뿐이죠. 즉, 크게 문제 될게 없다는 점입니다. 물론 비표준 확장을 남발해서 사용하는건 문제가 되겠지만 말이죠. 저는 사람들이 브라우저간 차이가 난다고 할때 거의 대부분이 1. 아예 레이아웃이 크게 다르게 보인다. 2. 1~2px에 목숨을 건다. 일겁니다. (제가 그동안 봐온 것들을 기준으로 했습니다.) 1번의 경우에는 Doctype 등을 잘 지정해준다던가, 지원하지 않는 것들을 다른 것으로 대체해서 사용하면 좋아지는 경우가 대부분입니다. 그런데 2번의 경우에는 저는 무시합니다-_- 물론 1~2px에 목숨을 거는 사람이라면 모르겠지만 저라면 무시합니다-_-;;; (물론 회사 디자인에서는 1~2px이 중요할지 모르지만요.) 1~2px 까지 완벽하게 맞출려면 각종 핵이라던가 여러 우회방법들을 동원해서 가까스로 맞추어야하는데 차라리 그런 방법들을 사용하느니 그냥 포기를 합니다-_- (아니면 그 문제되는 부분을 다른 디자인으로 한다던가 다른 방식으로 코딩을 해서 해결합니다만;) * 이야기가 일관성 없이 이리저리 흩어졌지만 핵심은 의미있게 마크업하자는 겁니다~_~ Doctype는 기본으로 하고, 크로스 브라우징도 하고 문법까지 준수하면 좋다는 것이 핵심입니다~;;;;;;

한수훈 2010-07-29 AM 9:41:39


흠 . 그렇군요. 저는 보통 코딩할 때 Internet Explorer 6-7 버전은 그냥 버려놓고 코딩하는데.. HTML 5.0 도 못알아먹고, CSS 버전도 한계가 있고 해서 ;;

이진성 2010-11-10 AM 2:42:30


아~ 다들 대단하시군요 전 뭐 페이지 하나 작성하면 http://validator.kldp.org/ 에서 엄청 많이 걸려서 고생하는데.. ㅜㅜ