여러분 가게에 물건 구경하겠다는 손님을 그냥 내쫓겠습니까?
손님이 시각장애인이라는 이유로 물건을 팔지 않겠습니까?
웹표준을 지키지 않으면 알게 모르게 놓치는 것들이 많습니다!
웹표준? 웹접근성? 그게 뭐길래?
웹표준을 지킨다 즉, 웹접근성을 높인다는 말은 무엇이고.
웹표준을 지키면 뭐가 좋길래 사람들이 웹표준, 웹표준 할까요?
똑같은 데이터를 가지고 있는 웹사이트가 있습니다.
웹표준을 지키면 검색엔진 노출이 잘 됩니다. 반면 그렇지 않으면 검색엔진 노출도 힘들어 집니다. 또한, 웹표준을 지키지 않으면 어렵사리 찾아온 고객을 내쫓는 경우도 발생합니다.
웹표준을 지키면 브라우저나, 장치, 기기에 관련없이 조금더 많은 사람에게 정보전달을 할 수 있습니다. 또한 검색엔진 유입량도 늘어납니다. 웹표준을 지키지 않으면, 우리 웹사이트에서 가지고 있는 정보가 모두에게 전달될 수 없습니다. 제한된 일부 사람들에게만 전달될 뿐이지요. 이것은 매우 비효율적 입니다. 똑같은 데이터를 가지고 있는데 웹표준을 지원하고 안하고는 웹사이트의 정보를 더욱 많은 사람에게 전달할 수 있고 못하고의 차이를 가져옵니다. 그 이외에 웹표준을 지키면 다양한 장점이 있습니다. 그 장점들을 소개해 드리겠습니다.
크로스브라우징
혹시 익스플로러에 최적화하여 사이트를 제작하셨습니까? 파이어폭스나, 사파리, 오페라 등 다른 브라우저에서 웹사이트 레이아웃이 문제없이 출력되며, 문제없이 작동되는지 확인해보셨나요? 웹표준을 지킨 웹사이트는 일단 크로스브라우징을 가능하게 해줍니다. 내가 만든 웹사이트를 방문하는 방문객이 익스플로러를 사용하든, 파이어폭스를 사용하던, 사파리나 오페라 등의 특이한 브라우저를 사용하든 늘 한결같은 모습을 보여줍니다. 아래의 그림을 보시면 이해가 쉽게 되시리라 생각됩니다.
데이터와 디자인의 분리?!
이 말은 처음 웹표준을 접하는 분들께는 언뜻 이해하기 어려운 개념일 수 있습니다. 하나의 웹페이지를 흔히 우리가 다루는 A4 용지의 문서처럼 하나의 문서라고 가정합시다. 그렇다면 해당 웹페이지는 디자인을 배제하고 기본적으로 문서의 형태를 띄고 있어야 합니다. 그 기본적인 문서의 형태를 띄면서 데이터를 가지고 있는 것이 HTML 입니다. 그리고 이 HTML 페이지를 좀 더 다양하고 보기좋게 디자인 해주는 역할을 하는 것이 바로 CSS입니다.
CSS Zen garden의 웹사이트 입니다. HTML 문서를 보세요. 큰 제목부터 작은 제목, 그리고 단락별로 들어가는 내용까지... HTML 문서의 구조화가 잘 되어있지요? HTML 파일에는 손 하나도 안대고, CSS 만 교체하여 전혀 색다른 느낌의 웹사이트 디자인을 만들 수 있습니다. 잊지마세요. HTML은 문서!(데이터) CSS는 디자인 속성 저장!
모바일 기기를 위한 웹표준
CSS가 지원되지 않는 모바일 기기에서 여러분의 웹사이트는 접속을 원하는 이용자에게 정보전달을 제대로 하고 있나요? HTML데이터와 CSS디자인을 완벽하게 분리하여 웹표준에 따라 작성된 웹페이지는 CSS가 지원되지 않는 모바일 기기에서도 원하는 정보를 완벽하게 전달할 수 있습니다. (단, 와이브로나 휴대폰 전용 서비스로 개발된 웹페이지 제외)
CSS가 지원되지 않는 모바일기기에서 접속해도 충분히 원하는 정보를 얻을 수 있도록 데이터와 디자인이 잘 분리되어 있는 '다음'메인페이지의 경우(우측 핸드폰 사진은 합성한 것입니다)
데이터와 디자인의 분리가 되지 않은 사이트는 모바일 기기가 아예 웹페이지를 해석하지 못하기도 합니다. 또한 CSS없이 사이트를 읽어들이면 아래 사진처럼 사이트가 폭격을 맞은냥 깨져서 출력됩니다. 사이트 이용이 전혀 불가능하게 됩니다. 조사결과 웹표준을 지키는 컴퓨터학원 홈페이지는 한군데도 없었고, 홈페이지 제작업체들도 웹표준을 거의 지키지 않고 있었습니다. 명색이 홈페이지로 돈벌어 먹고 사는 사람들이 말입니다. (위 사진은 합성된 이미지 입니다)
시각장애인을 위한 스크린리더기의 지원
웹은 평등합니다. 웹은 사람을 차별하지 않습니다. 하지만 언제부턴가 우리나라는 많은 디자이너/개발자분들께서 의미를 담은 웹페이지는 신경을 쓰고 있지 않습니다. 사이트는 테이블로 통자이미지를 덕지덕지 붙여서 보여주기에만 급급한 경우가 많고, 필요없는 플래시 U.I.를 남발하여 웹페이지의 의미를 알아볼 수 없게 만들고 있습니다. 앞을 못보는 시각장애인을 위한 사이트를 고려해보셨습니까? 웹표준을 지키면 시각장애를 가진 분들도 웹사이트를 편안하게 이용할 수 있게 해줄 수 있습니다. 그래서 웹접근성도 한층 높아집니다.
계속 강조하는 것이지만, HTML 문서를 코딩할 때는 꼭 의미에 맞는 코딩을 해야합니다.
예를 들어서, 강조하고 싶은 문장이 있는데, 해당 부분을 <b> 태그로 감싸면 글씨만 굵어질 뿐, 브라우저나 스크린리더기는 해당 문장을 중요문장으로 취급하지 않습니다. 웹표준에 맞는 태그는 <b>태그가 아니라 <strong>입니다. 이처럼 웹표준에 부합하는 태그들이 있습니다. 숙지하시어 사용하시기를 권장합니다.
사이트 디자인 관리 시간 단축
데이터와 디자인의 분리. 즉, HTML 페이지는 말그대로 문서상태이고, CSS를 통해서 웹페이지를 디자인 합니다. 그러면, CSS를 여러개 만들었을 경우, CSS 파일의 경로를 변경하는 것 만으로 새로운 디자인으로 사이트를 리뉴얼 할 수 있습니다. 또한 기존에는 사이트에 이미지나 스타일 하나만 변경하더라도 페이지마다 다 바꿔주어야 하는 번거로움이 있었습니다. 하지만 HTML 과 CSS의 분리는 이런 작업시간까지 단축시켜 주었습니다. CSS에서 코드 한 줄만 수정해주면, 수백~수천페이지의 디자인이 한꺼번에 변경이 가능하게 되었습니다. 이것은 추가적으로 웹사이트 관리 비용절감의 효과도 가져옵니다.
디자인을 수정해야하는 페이지가 12500페이지라면 여러분의 선택은?
검색결과 상단에 노출되고 싶으세요? 그럼 웹표준을 지키세요!
실제로 똑같이 그래픽 처리가 된 두개의 웹사이트가 있다고 가정합시다. 하나의 사이트는 데이터와 디자인 분리를 하지 않고 많은 사이트이고, 다른 하나는 데이터와 디자인을 완벽하게 분리하여, 웹페이지의 내용과 의미를 정확하게 담고 있습니다. 겉보기는 똑같지만 속은 완전히 다른 사이트이지요. 한 쪽은 페이지의 의미를 정확하게 담고 있고, 한쪽은 페이지의 의미가 해석불분명하니까요.
이것은 검색결과에 상당한 영향을 미칩니다. SEO에서 웹표준은 많은 부분을 차지합니다.
검색엔진의 검색결과 상단에 노출되기 위해서 메타태그나 title 태그의 활용, 본문에서 주력 단어의 빈도수 노출 등 많은 부분이 널리 알려져서 활용되고 있습니다. 그렇지만 아직까지, 웹표준을 지키면 검색엔진의 검색결과 상단에 컨텐츠가 노출된다는 사실은 그다지 많이 알려져 있지 않습니다.
대표적으로 H1, H2, H3 ... 제목 태그인 h 태그의 SEO는 막강합니다.
저의 블로그 제목은 '쏭군은 열정 드리머' 입니다만, CSS를 이용하여 MONOEYES라는 블로그 제목으로 이미지 치환 해두어 텍스트는 감추어 두었습니다. 보이지만 않을뿐 문서의 대제목은 '쏭군은 열정 드리머'라는 속성을 항상 가지고 있는 것입니다. 구글에서 검색한 결과 최상단에 H1 태그가 검색되어 출력됩니다.
포스팅 제목의 경우 검색엔진에서 검색되는 빈도가 많아야 하는 중요한 부분인 만큼, 문서 대제목인 H1 다음으로 H2를 주었습니다. H1 보다 중요도는 떨어지지만, 단락의 대제목으로서 검색엔진 검색결과에서 만족스러운 노출을 보여줍니다. 위의 사진은 CSS를 제거했을 때, 포스트 제목이고, '디올 어딕트'라는 디올의 제품을 구글에서 검색했을 때, 가장 상단에 쏭군의 블로그가 노출되는 것을 보실 수 있습니다.
DIV와 TABLE 논란은 문제의 본질이 아닙니다
많은 분들이 DIV=웹표준, TABLE=비표준이라는 인식을 가지고 계십니다. 문제는 DIV냐 TABLE이냐가 아닙니다. DIV나 TABLE은 모두 웹페이지를 작성하기 위한 '도구'일 뿐이지, 그 자체가 '웹표준이냐 아니냐'를 가늠하는 목적이 될 수 없습니다.
TABLE은 데이터를 출력하기 위해 존재하지 레이아웃 짜라고 존재하는 것이 아닙니다
테이블은 말그대로 데이터들을 표형식으로 출력해야 할 필요성이 있을때만 사용합니다. 테이블로 레이아웃을 만들게 되면, 웹페이지의 로드 속도도 느리게 되고, 웹페이지를 수정할 곳이 생기면 자칫 페이지 전체를 뜯어내야하는 대공사가 발생될 수 있습니다.
TABLE에 없는 DIV의 장점
모듈화? 디자인을 하시는 분들께는 말이 어렵지요. 하지만 간단한 뜻입니다. 필요한 부분을 마음껏 떼어서 쓸 수 있게 웹사이트를 만들 수 있다고 생각하시면 됩니다. 예를 들어, 테이블로 웹사이트 레이아웃을 구성하면 로그인 박스 하나를 바꾸기 위해서 웹페이지의 다른 부분도 영향을 주거나, 웹페이지 전체를 뜯어내야 하는 경우가 대부분입니다. 그렇지만 DIV로 작업을 하면 원하는 박스만 떼어서 디자인을 수정할 수 있고, 또 그 박스는 얼마든지 다른 페이지에 자유롭게 붙였다 뗐다 하면서 재활용이 가능합니다.
게다가 TABLE 레이아웃을 구성할때보다, 작업의 속도나 사이트 관리적인 측면에서 훨씬 이득을 볼 수 있고, 페이지 로드도 테이블 레이아웃 보다 빠릅니다.
하지만 TABLE이 꼭 필요한 곳은 테이블을 쓰세요
테이블을 이용해서 웹사이트의 레이아웃을 짜면 나쁜 것 입니다. 하지만 반드시 테이블이 들어가야 할 곳이 있습니다. 반드시 데이터형식을 표방식으로 보여주어야 하는 곳은 테이블을 쓰는편이 낫습니다.
테이블을 유용하게 활용하고 있는 올블로그와 네이버
만약 위의 프리미어리그 점수판을 표를 사용하지 않고 DIV나 LI 를 이용해서 표현했다고 가정합시다. 그 페이지의 CSS가 지원되지 않을때 오히려 팀별로 득점이나 승점을 보기가 힘들어집니다. 이런 표형식의 데이터는 TABLE을 사용하는 것이 더욱 웹표준에 부합합니다. 또한 CSS를 깼을때도 점수표를 깔끔하게 출력할 수 있구요. 반드시 이런 데이터처리에만 TABLE을 쓰시고 어지간하면 사용하지 않는 것을 권장드립니다. 더구나 TABLE로 레이아웃을 짜는 비통한 일은 다시는 있어서는 안 되겠지요. 데이터를 표시하라고 하사한 TABLE 이거늘.. 그걸로 홈페이지 레이아웃을 만들면 원래 목적에 어긋납니다.
스크립트 사용시
될 수 있으면 스크립트 사용을 자제하는 것이 좋습니다. 부득이 스크립트를 사용해야 하는 경우라면, 모든 브라우저에서 작동되는 스크립트를 사용하시고, 스크립트가 지원되지 않는 환경을 위해서 스크립트 없이도 웹사이트를 이용할 수 있도록 차선책을 미리 만들어 두시는 것을 권장합니다.
서버 부하를 덜어줌
디자인 정보를 CSS에 저장함으로서, 관련 소스코드를 획기적으로 줄일 수 있습니다.
또한, CSS는 캐싱되어 웹사이트에 최초 접속할 때 한번만 로드되므로, 서버 부하를 획기적으로 줄여줄 수 있고, 규모가 큰 사이트라면 비용 절감 효과도 가져올 수 있습니다.
긴 글 읽느라 고생 많으셨습니다. 글쓴이를 표기하신다면 본 문서를 상업적으로 이용하셔도 되고, 어디에나 퍼가셔도 됩니다. 웹표준을 처음 접하시는 분들께 도움이 되고자 작성한 문서인데. 조금이나마 도움이 되셨으면 좋겠습니다.
대한민국 모든 사이트가 웹표준화가 되는 날까지..!
대한민국 모든 사이트의 접근성이 좋아지는 그날까지..! 쏭군은 뜁니다!
Trackback Address >> http://monoeyes.com/trackback/523
-
Subject: 웹사이트 제작시 검색엔진 최적화 하는 방법
Tracked from 세상엔 즐거운것이 많다 2008/02/11 17:15 delete컴퓨터를 배운 사람들이라면 누구나 자신의 홈페이지를 만들어보고 싶어하고, 학원, 학교에서 많이 일반, 전공교양등에 배운다. 하지만 대부분의 과정에선 철학이나 사용자 편의보다는 자기 자신의 만족을위하거나 배운것을 다 적용해서 만든다(특히 학교에선 배운 태그를 모조리 사용해서 만들어야 한다. 학점을 위해 ㅠ.ㅠ) 내가 고등학교 때 처름 홈페이지를 만들었으니.. 한 10년전이다. 그때는 페이지 하나에 여러 사이트를 링크시켜 주고, 나의 프로필이 있는 홈페..
-
Subject: 정말 깔끔하게 정리를 잘해놓으셨군요~
Tracked from vbmania의 WebUI연구소 2008/02/12 15:02 delete앞으로 누군가에게 웹표준의 필요성을 설명할 땐 이 포스트 주소만 알려주면 되겠군요.. 정말 말씀하신 것처럼 웹표준, 웹접근성 만드는 사람에게나 사용하는 사람에게나 모두 중요한 주제입니다. 일부 영세한 업체들은 밥벌어먹고 살기 바빠서 못한다고 말하지만, 지금 제가 다니는 회사도 영세한 업체이지만, 웹표준을 지키고 안 지키고는 회사의 정책이나 지원을 탓할 문제가 아니라 작업자 본인에게 달려있는 문제라고 생각합니다.. 저희는 월급은 가끔 제때 안나와도 웹..
-
Subject: 웹표준의 이해
Tracked from smartnessQ's monolog 2008/02/15 20:38 delete웹표준 교과서의 서문으로 써도 무방할만큼 잘 쓰여진 글입니다.쏭군이 제작했고, 제가 훔쳐 왔습니다. 꼭 읽어보시길! 원본 링크 : http://monoeyes.com/523 여러분 가게에 물건 구경하겠다는 손님을 그냥 내쫓겠습니까?손님이 시각장애인이라는 이유로 물건을 팔지 않겠습니까?웹표준을 지키지 않으면 알게 모르게 놓치는 것들이 많습니다!웹표준? 웹접근성? 그게 뭐길래?웹표준을 지킨다 즉, 웹접근성을 높인다는 말은 무엇이고.웹표준을 지키면 뭐가...
-
Subject: 왜 웹표준인가?
Tracked from 물고기 세상 2008/02/18 22:47 delete여러분 가게에 물건 구경하겠다는 손님을 그냥 내쫓겠습니까?손님이 시각장애인이라는 이유로 물건을 팔지 않겠습니까?웹표준을 지키지 않으면 알게 모르게 놓치는 것들이 많습니다!웹표준? 웹접근성? 그게 뭐길래?웹표준을 지킨다 즉, 웹접근성을 높인다는 말은 무엇이고.웹표준을 지키면 뭐가 좋길래 사람들이 웹표준, 웹표준 할까요?똑같은 데이터를 가지고 있는 웹사이트가
'정보기술의 샘터........о♡ > 접근성과 사용성' 카테고리의 다른 글
| 웹 접근성 실태조사 항목별 체크리스트 (0) | 2009.01.03 |
|---|---|
| 장애인차별금지 및 권리구제 등에 관한 법률 (0) | 2009.01.03 |
| 시각장애인이 개발한 화면 읽기 프로그램으로 감동의 드라마 (0) | 2008.12.17 |
| 장애인 `웹 문턱` 낮추기 박차 (0) | 2008.12.17 |
| 인터넷 웹 콘텐츠 접근성 지침 (0) | 2008.11.13 |
댓글을 달아 주세요
이해하기 쉽게 너무 잘 정리되어 있네요.
리플달고 다시한번 꼼꼼히 읽어봐야 겠습니다.
앗!
효근님 안녕하세요..^^
소중한 댓글 감사합니다~
내용 너무 좋네요 ^^ 이해하기 너무 쉽습니다.
전 기본적인 웹 html 을 잘 몰라 스킨하나 바꾸려고 해도 고생입니다.
지금도 완전치 않아서...
이럴 거 같으면 공부를 좀 해야 하는 데, 영 손에 잡히질 않네요 ^^
마래바님께서 직접 수정하신 스킨을 보면 꿈쩍꿈쩍 놀라곤해용~ 다른 본업이 있으신데도, 이처럼 웹에 대한 열정을 쏟으시는 것을 보면 가끔 제 밥줄이 끊길까봐 두렵기도하고 그래요^^;;;
html이나 css는 시간 문제인 것 같아용;;;
만지는 시간에 실력이 비례하는 것 같습니다.^^)b
좋은 글 잘 봤습니다. 프리젠테이션으로 만들어도 훌륭할 자료군요.
제가 PT는 약한뎅;;;
혹시 웹표준으로 PT 만들을 있으면 후니님께
조언을 구하도록 하겠습니다..^^
정리 깔끔하게 잘 돼있네요. :D
많은 분들이 읽어주셔서 웹표준을 준수하는 웹사이트가 많아졌음 좋겠어요.
우리 웹표준 꿈나무 냥군님
새뱃돈은 많이 받으셨어용?
냥군님 같은 분들이 널리널리 웹표준을 알려주시고
연마해주시면 앞으로 더욱 많은 사이트가 표준을 준수히라리 믿어의심치 않습니닷^^
잘 정리해 놓으셨네요. 모르는 사람이 봐도 손색이 없겠네요.
부족한글에 칭찬해주셔서 감사합니다^^
좀 더 쉽게, 그리고 자세히 쓰지 못한것이 마음에 걸리는군요^^
전부다 이해가 되지는 않지만 좋은 글이네요.
우리나라가 웹표준이 다 되었으면 합니다.
이런글이 베스트로 올라야 하는데..
다음의 블로거뉴스 타고오셨나보네요^^
반갑습니다^^
우리나라의 조금 더 많은 사이트들이 표준을 지키는 날이 온다면 조금 더 풍요로운 웹이 되지 않을까 싶습니다..^^
조금 더 쉽고 자세하게 쓰고 싶었는데, 그러지 못해서 죄송합니다.
새해 복 많이 받으세요^^
좋은 글이지만 구체적으로 어떻게 해야되는지 내용이없는게 아쉽네요,,
너무 총론적이고 개념적인지라...
안녕하세요..^^
이 글은 개념을 잡기위한 큰 개념의 글입니다.
표준을 지키면 / 안 지키면~
이라는 표현이 다소 마음에 걸립니다만,
DOCTYPE이나 상황에 따라서 다소 웹페이지의 개발개념이
달라질 수 있습니다.
보신대로 대체적인 걸 써두었구요..^^;;
CSS에 관한 것들은
http://www.monoeyes.com/category/dic/css
여기에서 차곡차곡 연재하고 있습니다^^
ㅎㅎㅎ 체계적으로 개념을 쉽게 잘 설명 하셨군요^^
홍커피님 안녕하세용
새해 복 많이 받으세용~
홍커피님 따라가려면 한참 멀었져 뭐 ㅡ.ㅡ
홈피 디자인과는 별로 관계 없는 사람입니다만, 그래도 CSS니 표준이니 하는 개념은 잘 이해할 수 있게 되었습니다. 감사합니다~
푸른하늘님 방문 감사합니다..^^
새해 복 많이 받으세요~
제 글이 조금이나마 도움이 되었다니 기분이 좋네요^^
저는 사용하는 OS가 세개에 거기서 각각 사용하는 브라우저를 다 합치면 열개가 넘어가서 제가 불편하지 않기 위해서라도 적어도 제가 만드는 사이트는 크로스 브라우징을 지원합니다만...
그렇지만 이윤이라는 측면에서만 생각하면 웹표준이란게 그다지 지킬 필요가 없는 것 아닐까요? 한국에서 점유율 2위라는 파이어폭스 사용자 비율조차 1%를 넘지 못하는 것으로 알고 있습니다만, 웹표준 사이트 제작비용은 IE에만 맞춘 발로 만든 사이트 제작비용의 몇 배가 들어가지요. 수익성의 측면에서 웹표준은 별로 환영할 것이 못 되는 것 같습니다.
마찬가지로 장애인 전용 쇼핑몰이 아닌 이상에야 장애인 편의시설을 놓느니 거기다가 가판대 하나라도 더 설치하는게 쇼핑몰의 입장에서는 더 수익이 좋을 수도 있지 않을까요?
공익이 아닌 수익이라는 측면에서만 접근하면 웹표준은 그냥 돈 낭비일 뿐이지 않나 하는 생각도 듭니다.
맞습니다.
지적하신 문제는 '아직까지는' 옳다고 생각됩니다.
그럼에도 차차 ActiveX는 배척을 받을 것이고,
익스플로러 이외의 브라우저나,
PC가 아닌 모바일 기기등에서 접근이 용이하도록 웹사이트들은 변화해 나갈 것 입니다.
비용적인 측면에서는
관리가 필요없는 사이트라면 나인테일님의 말씀이 옳습니다.
그렇지만,
지속적으로 사이트 디자인을 수정하거나,
관리가 필요한 부분이 많다면,
애초에 표준을 지켜서 만들어진 사이트가
관리 시간이나 관리 비용은 상상할 수 없을만큼 줄어들겠지요^^
우리나라도 관공서와 정부사이트를 중심으로 서서히
시각장애인등을 고려한 표준화 작업이 진행되고 있습니다,
아직까지는 어디까지나 공익 목적이겠지만,
해외에서 처럼,
표준을 지키지 않는 사이트는 국가에서 불이익을 준다라고 하면;;
어떻게 될까요.. 물론 이건 뭐 앞날을 알 수 없는 일입니다만^^;;;
모르는 부분이 많았는데, 좋은 글 감사합니다.
이해하기 쉽게 정리해주셔서 잘 읽었습니다.
seevaa님 오랜만에 들르셨네요..^^
새해 복 많이 받으세용^^
너무 좋은글입니다. 추천 꽝 찍고갑니다.
근데 웹표준만 지킨다고 크로스브라우징이 다 되는건 아니지 않나요? 크로스브라우징을 하기 위한 기본, 정도로 하시는게 좋지 않나 싶어서;;;
아무튼 너무 좋은글 멋지십니다~!!
크로스브라우징을 되게하려면 핵을 써야하는데,
핵을 쓰지 않고도 크로스브라우징을 가능하게 하는 것이 궁극적으로 대단한 스킬이지요.. 핵 많이 쓰면 CSS 초보 소리 듣는다는..^^;;
레몬가게님 글도 일리는 있네용^^
요번에 블로그 바꾸신거 완전 멋집니다!!
흠..웹표준화 때문에 디자이너들이
왜 죽상인가 했는데.. 어느정도 이해가 가네요..
깔끔한 정보 감사 합니다.
우리나라 포털도 서서히 웹표준화 작업을 진행중이라지요..
저도 처음엔 죽상이였더랩니다 =_=)/
그렇다고 지금더 뭐 잘하는 건 아니지만,
네이버 다음 메인페이지 정도는 뚝딱 만들 수 있답니다..
저는 평균 이하의 센스를 가지고 있으니..
다른 디자이너분들은 저보다 더 빨리 배울 수 있으리라 생각되네요..^^ 우리나라 웹페이지는 네이버가 하고 있는 웹표준화는 좀 엉터리구..
다음 메인페이지가 표준화가 잘 되어있지용^^
그리고 소스코드가 획기적으로 줄어 서버부하를 줄일 수 있지요.
css파일이 캐쉬 되어있으면 더욱..
원글에서 깜빡 잊고 빠뜨렸던 부분입니다.
소중한 코멘트 감사합니다.
도훈님의 의견을 원글에도 첨가하였습니다.^^
멋쟁이 +_+)b
최대한 쉽게 설명해주신거 같은데,, 제가 이해가 안되네요;;
다음에 다시 한번 더 읽어봐야겠습니다.
도움이 될만한 글이군요. 감사합니다.
제가 글빨이 약해서 그런 것 같습니다..
죄송해용 ㅠㅠ
흠.. 사용하는 브라우저마다 일일이 수정을 가해야 할 것을 css를 사용하면, 편리하게 가능하다는 뜻이군요 ㅋ
그렇죠.
어지간하면 핵을 쓰지 않고도 크로스브라우징이 되구요.
html 페이지의 양이 방대하 때,
이를 일일이 손대지 않고
css로 한큐에 수정이 가능해집니다^^
웹표준을 지키지 않고 얻는 비용은 후에 1만2천페이지의 노가다성 유지보수가 깎아먹어주겠죠.
그리고 누구나 장애인이 될 수도 있기에 웹접근성을 생각하는 행위하나하나가 자기 자신을 위한 것이죠.
이번 설연휴간 케리어 끌고 다녔는데 계단을 만날때마다 들었다내렸다를 반복하면서 이게 케리어가 아니라 휠체어라면 어쨌을까 싶더라구요.
일반인에게도 경사로가 쓸모있는 것 처럼 웹표준도 장애를 떠나 많은 경제적 이익을 가져다주죠.
아참! 그러고보니 CSS 파일을 분리함으로 인해서 엄청난 양의 트래픽을 절감할 수도 있으니 웹표준을 지키는 것이 확실히 경제적이네요.
추천한방 누르고 갑니다. ^^
헉!
대단한 매니아인 A2님께서 직접 댓글을 주셨네요. 저도 경험해보기전에는 웹표준은 오히려 불편하지 않느냐? 비용이 많이 들지 않느냐? 라는 불평만 늘어놓았던 기억이 새록새록 납니다. 어느덧 1년이 지나버렸지만요^^;;
웹표준이라는 것은 몸에 익으면 정말이지 왜 좋은것인지 알게 되는 것 같아요. 트래픽 절감이나 관리적인 측면에 있어서 추가 코멘트 감사합니다^^
이런 논의는 우선적으로 웹표준이라는 것의 정의부터 나와줘야 논란의 여지가 없어질것 같습니다.
웹표준이라는 말은 보편적으로 W3C에서 권고하는 Recommend, 즉 XHTML1.1 CSS2.0을 말합니다. 그리고, W3C의 자료에 따르면, 웹표준은 크로스브라우징이 목적이 아니라 장애우용 브라우져에 원활히 보이기 위한 것으로 나와있습니다.
XHTML과 CSS를 이용한 웹페이지 제작은 크로스브라우징을 구현하기 위해서 상당한 지식의 핵(IE핵 FF핵 그리고 오페라핵)을 알고 있어야 하며, 그렇다 손 치더라도 원하는 디자인을 구현하기가 상당히 어렵습니다. 야후에서 제공하는 YUI만 하더라도 소위 웹표준을 따르는 레이아웃 도구가 따로 존재할 정도니까요.(구글에서 CSS Layout으로 검색해 보시면 놀랄지도 모르겠군요)
웹표준으로 제작할 때 오는 장점은 YUI에 나와있는데로 SEO에 상당히 유리하며, DIV의 브라우져 랜더링 방식으로 인해서 화면이 더 빨리 뜨는것과 같은 효과를 가져오는 정도입니다.
단지, CSS만으로 디자인을 할 수 있다던지, 아니면 웹사이트 관리가 편해진다는 것은 어떤 통계도 나와있지 않습니다. 사실, CSS를 적당히 사용하는 것은 웹사이트 관리에 상당한 도움이 되지만, 소위 말하는 XHTML1.1 CSS2.0의 웹표준은 디자이너나 프로그래머 모두에게 상당한 고통을 수반해 주는 부수(?)적인 효과를 가져오더군요.
아직까지 야후나 네이버, 다음이 첫페이지 정도만을 웹표준에 맞게 바꾼 것만으로 볼때, 웹표준의 장점이 실무에서는 부각되지 못하고 있는 것 같습니다. 하지만, 웹표준에 맞게 디자인을 원활히 할 수만 있다면 상당한 도움이 된다는 사실은 인정하지 않을 수 없겠네요.
이삼구님 안녕하세요..^^
웹표준에 대한 정의를 잘 내려주셨네요!
제가 글에서도 언급을 했지만, 시각장애우를 위해서 웹표준이 조금더 보편적으로 활용되었으면 합니다.
CSS 테크닉에 관한 부분은, 아직까지 숙련기술자가 부족하기 때문에 겪고있는 과도기적 문제인 것 같습니다.
저 역시 과거 테이블 디자이너였고, 위지윅에디터를 쓰다가, 텍스트 에디터로 넘어오면서 CSS를 이용해서 웹사이트를 만들어 내는 것이 여간 곤욕쓰러운 일이 아니였습니다. 하지만 어느덧 오랜시간 텍스트 에디터로 CSS 코딩만 실무에서 해오다보니, 핵이나, 자잘한 버그퇴치용 테크닉은 바로바로 머리속에 기억되어 있다가 써먹을 수 있더라구요..^^(실은 핵을 쓰지 않고 크로스브라우징을 구현하는 것이 최고의 테크닉 중 하나이지만^^;;
하지만 말씀하신바 CSS를 이용해서 사이트를 총체적으로 관리하는 부분에 있어서는 아직까지 미흡한점이 많습니다.
경험부족과 레퍼런스 부족때문인 것 같습니다.
저만해도, CSS로 최대 하나의 프로젝트를 커버할 수 없을 정도였으니 말입니다.
이삼구님 말씀대로 CSS파일 하나로 대형 웹사이트 하나를 커버할 수 있을정도로, 디자인 레퍼런스가 잘 잡혀있다면, 그리고 또 CSS의 각종 버그나 테크닉을 몸에 숙지하고 있어서 순식간에 페이지를 만들어낼 수 있는 숙련 기술자가 많이 나와야만 웹표준의 장점도 더욱 극대화 될 수 있다는 생각이 드네요..^^
좋은 의견 감사합니다^^
웹표준이 많은 장점을 갖고 있는 것은 사실이지만 적용이 힘든것이 현실이죠.
이론적인 것이 습득 되었다 해도 개발자가 ui를 핸들링하는 프로세스에서는 웹표준을 지킨다는 것이 커다란 걸림돌처럼 느껴집니다.
디자이너가 css 만 갖고 디자인을 완성할 수 있다면 데이터와 디자인의 분리가 가능하지만 현실적으로 팀작업에서 행해지는 업무프로세스에서는 잘 안되고 잇는 것이 현실입니다.
웹표준 못지않게 웹표준 개발 방법론도 같이 대두 되어야 할 것이라고 생각합니다.
동감합니다.
팀프로젝트를 수행할 때, 대부분 디자인과 U.I.코드단 까지는 웹표준이 잘 만들어져가다가 이후 개발쪽을 거치고
또 여러사람의 손과 입을 거치다보면
어느새 웹표준과는 거리가 멀어져있는 웹페이지를 발견하곤 하지요..
표준 못지 않게 개발 방법론도 정립이 잘 되어야한다는 의견에
크게 공감합니다^^
몇가지 오해의 소지가 있는 부분이 있습니다. 웹표준이 XHTML 1.1, CSS 2.0으로 사이트를 만드는 것을 의미 하지는 않습니다. HTML 4.01도 엄연한 웹표준이기 때문에 XHTML과 CSS 2.0으로 한정지을 수는 없습니다.
그리고 W3C의 WAI가 목표하는 바는 장애인을 위한 것이지만 W3C의 전체 목표가 장애인의 웹활용 만을 위한 것은 아닙니다. W3C의 궁극적인 목적은 Universal Access이고 장애인은 여기에 포함된 일부분입니다.
CSS를 이용해서 제작을 할 때 항상 CSS 핵을 많이 써야만 하는 것은 아닙니다. CSS 핵을 많이 쓰면 말씀하신 것처럼 작업자들이 고통받게 되죠. CSS를 잘못(?) 적용했기 때문이지 항상 그런 것은 아닙니다.
그리고 원하는 디자인을 구현하기가 힘든 이유는 웹표준을 오해하고 무조건적으로 XHTML 1.1, CSS2.0을 고집하기 때문입니다. 표준에 대한 정의가 잘못되었기 때문에 그렇게 느껴지는 것이지요.
웹표준을 제약으로 생각하면 힘들수 밖에 없습니다. 웹표준은 많은 장점을 가지고 있는 좋은 수단이고 이를 잘 활용하는 방향으로 접근을 해야 합니다. 가장 중요한 것은 많은 장점 중에서 나에게 필요한 가장 도움이 되는 장점을 찾는 것입니다. 웹표준이랍시고 억지로 개발 방법을 바꾸고 밸리데이션을 강요해야 하는 것은 아닙니다.
현석님 말씀을 첨언하자면, 원래 웹표준이라는 것이 W3C에서의 Recommendations ( http://www.w3.org/TR/#Recommendations ) 를 의미합니다만, 한국에서 디자인이나 자바스크립트, 심지어 CSS Layout 마져도 웹표준이라는 용어에 묻혀있어서 저도 혼란스러웠나 봅니다. 이 부분에 대해서는 XHTML1.1과 CSS2.0이라는 부분에 명백한 오류가 있다는 사실을 인정하지 않을 수 없겠군요.
현석님 말씀에 정답이 있는 것 같습니다. 선택의 문제일 뿐이라는 생각도 들구요. 절대적인 선택이 아닌, 장점을 활용하는 방향으로 가야한다는 것은 제 귀에 확 들어오는 명언 같습니다. 좋은 지적 감사드려요~~
신현석님과 이삼구님 말씀 모두 일리가 있다고 생각됩니다.
더불어 핵 없는 CSS를 지향하는 저로서는,
혹여, CSS와 웹표준을 처음 접하는 디자이너/개발자 분들께서
핵으로 물든 CSS를 만들지 않을까 걱정됩니다.
웹표준을 개발자 관점에서 본다면,
손 쉬운 확장성과 유지의 편리함을 먼저 꼽을 수 있는데,
핵을 사용한다면 확장성이 확 떨어지겠죠 :D
더불어..
어지간한 레이아웃도 position: absolute; 보다는 float 를 이용해서 만드는 분위기가 되어야하는데 최근 css 카페 돌아다녀보니 absolute 이용해서 하시는 분들이 많더라구요.
문제될 건 없지만.
그렇게 되면 사이트의 확장성이나 관리에 애로사항이 많이 생길텐데 말이죠..
그리고 신현석님께서 지적해주신 문제에 전적으로 공감합니다.
장애인 뿐만 아니라,
웹페이지에 접근할 수 있는 모든 수단들이..
웹페이지를 이용하는데 지장이 없도록 하는 것이 웹표준화의 기본적인 목적이 아닐까 생각됩니다..^^
두 분 모두 열정 가득한 댓글 남겨주셔서 감사드리구요~
겨울이 가는마당에 강추위가 심한데
감기 조심하시길 바래요^^
- 쏭군 드림
관리자만 볼 수 있는 댓글입니다.
정확하게 맞추셨네요^^;;;
책보러 가실 일 있으시면 연락주세요~
제가 아무래도 조금 더 가까우니..
마중나와 기다릴게요^^
잘 정리해 놓으셨네요^^
그런데 사실 막상 만들려고 하면 테이블 레이아웃처럼 편한 게 잘 없죠;
물론 유지, 보수야 상대가 안 되지만요
익숙해지기 나름인 것 같습니다.
위지윅 에디터로 테이블 이용해서 만들면 편하긴해용^^;;
군데 텍스트 에디터를 쓰면 div 레이아웃이 더 이해하기 좋고 만들기 편한 것 같더라구용..~
물론 숙달되고 익숙해져야 편한 거지만..^^;;;;
전 텍스트 에디터(editplus)만 쓰는데도 그렇더라고요;
아마 아직 CSS가 숙달되지 않아서 그런 것 같습니다
생각한 데로 정렬이 잘 되지 않아 짜증이 잘 나더라고요^^;
숙달되면 거짓말을 조금만 보태서
눈감고도 코딩하실 날이 오시리라 믿습니다^^
웹표준을 지켜도 크로스 브라우징이 무조건 되는건 아닙니다.
표준 사이트를 잘 못읽는 브라우저의 대명사가 IE죠.
IE가 타 브라우저에 비해서 표준 사이트를 잘 못 읽기는 하지만,
핵 없이 크로스브라우징 되도록 잘만 만들어 놓는다면
표준을 안 지켰을때보다는 브라우저의 문서 이해가 빠른 것으로 압니다^^;
웹표준 관련하여 PT할일이 있었는데 전문지식이 없는 윗분들이라 어떻게 해야하나 고민을 많이 했는데 내용이 쉽게 잘 정리되어 있네요. 매우 유용한 정보가 될 것 같습니다!!!!
와 멋집니다!
높은분들 앞에서 웹표준 PT라 +_+)b
경제성,시간절약,플랫폼에 구애받지 않는 접근성 등을
웹표준의 장점으로 꼽을 수 있겠지용^^)b
PT 멋지게 잘하시길 바랍니다. 홧팅!
새해복 많이 받으세요 ㅋㅋ 오호 개념글 _ 인데요 그냥 대충 이해만 했었는데 이글보고 -ㅁ- 제대로 알게된 것 같은? 간략하면서도 대략적인 글 _ 좋은데요~ 아하~~
-a- css로 코딩할때 핵을 쓰는 이유가 저기 위에 있네요 ;; 핵핵핵 ㅠㅠ 안쓰는 날이 올려나 ;;
leto님 도움되었다니 저도 고맙습니다..^^
혹여 다른 도움이 필요하시면 언제라도 제 블로그에 찾아주세요^^
좋은글 잘 읽고갑니다~ ^^ 종종 와야겠어요~
항상 나름 접근성에 맞게 퍼블리싱하려고 노력은 하면서도 용두사미처럼
마지막에는 흐지부지되어 반성에 반성을 일삼고있거든요 ;ㅂ;
저도 늘 그렇답니다.
처음에는 HTML 구조화도 잘나가고
CSS도 상속 상속.. .잘하다가
나중에는 뒤죽박죽이 되어버리는 .. ㅠㅠ
아하 CSS와 HTML의 관계가 저런식이였군요
아무 개념도 없이 닥치는대로 수정하다보니 뭐가 먼지 몰랐네요 ^^
개념 잘 잡아주셔서 감사합니다.
네, 도움되었다니 좋네요..^^
새해 복 많이 받으세요^^
위에 다른 분들도 지적해주셨지만
웹표준을 어떻게 정의하냐에 따라서
맞는말도 있고 맞지 않는 것도 있는것 같습니다.
어떤 부분이 맞지 않는지 지적해주시면 감사합니다.
독타입등 세세한 범주를 제외하고 웹표준에 대해서 개념을 잡고 계시지 못하는 분들을 위해서 작성한 문서입니다.
잘못된 부분이 있다면 지적부탁 드리겠습니다.
ps. 혹시 네이버 메인페이지 코딩이 엉터리라고 한 것 때문에 그러시는지?^^;;;
아직도 많은사람들이 웹표준에 대해서 어렵게 생각하고 시도조차 안해보는 경향이 있는데 님께서 초보자들이 보기쉽게 정리를 잘 해주신 것 같네요^^
잘 보고갑니다~~^^
그렇죠.
지레 겁먹고 도전을 안하는 분들이 많은 것 같아요^^
알고보면 별 것 아닐수도(?) 있는데 말이죠
일단은 부딪혀 보는분들이 많이 생겼으면 좋겠습니다^^
글 잘봤습니다.. div,table의 설명을 잘해주셨네요.. 제가 몰랐던 부분 ㅎㅎ 유익한 글이었습니다.
요즘 제가 읽고 있는 책중에 web2.0 marketing book이라는 책에 seo관련 "피해야할 웹페이지 작성"을 봤는데.. 좋은 내용이 있어서 몇자 적는데.. 트랙백 걸게여~~ ^^
SEO에 관한 소중한 트랙백 잘 받아보았습니다..^^
저도 몰랐던 부분들이 많네요^^
글 잘 읽었습니다.
정말 뜬금없는 이야기지만 저 아이콘은 어디서 구할 수 있나요?
너무 예뻐서 저도 쓰고 싶네요-0-;;
앗^^;;
http://monoeyes.com/521
여기에서 아이콘들을 골라서 쓰시면 됩니다.^^
흥미롭게 잘 읽었습니다.
마칼바람님 감사합니다^^
구구절절 옳은 말씀
죄송합니다. 댓글을 모르고 지워버려서 제가 다시 썼습니다 ^^ㅋ
감사합니다^^
요즘 블로깅을 뜸하게 했더니 이런 좋은글이 올라올줄이야!!!
바로 훔쳐갑니다~!!
상규야 바쁘더라도 포스팅은 종종하셈~
블로그가 너의 지적자산이야~
모아두면 언젠간 유용하게 쓰일거~~~
좋은 글 잘 읽었습니다. 웹 표준을 위해 노력하는 중이라 더 와닿는 군요.
제 홈페이지에 님의 글을 기재해도 좋을까요?
출처는 당연히 밝히구요.
출처를 표기 해주시구요.. 글의 원문을 변형만 하지 않으시면 얼마든지 퍼가셔서 .. 게재 하셔도 되요^^
너무 좋은 정보 잘 보고 갑니다.
글을 읽다 보니 아무리 생각해도 우리나라 홈페이지들은 지나치게 외양치장에 열중인 것 같다는 생각이 듭니다. 오늘부터라도 웹표준에 대한 직원들 교육부터 시작해야 할 것 같습니다. 더 좋은 글 생산을 기대하면서 .. ^_^
웹사이트의 편의상, 외향도 무시할수는 없지만,
말씀하신바. 접근성이 가장 중요한데 말입니다.^^
이 글이 도움이 되셨다니.. 다행이구요^^
웹표준 널리널리 전파해주세요^^
너무나도 옳은 말씀이시네요..
크로스브라우징 또한 많은 공감이 됩니다..
사용빈도수가 적다고 해서 무시할수는 없는 것이니까요..
웹은 누구나가 사용할 수 있는 공간이기 때문에 세심한 부분까지 배려할수 있는 사람이 훌륭한 개발자라는 생각이 듭니다.
맞습니다.
누구 한 명이라도 이용을 하지 못하는 웹사이트라면 정말 나쁜거겠죠^^ 모든 상황과.. 모든 사람의 환경을 고려하여 웹사이트를 제작한다면.. 그것이 개발자 입장에서 베풀 수 있는 가장 훌륭한 '배려'라고 생각됩니다^^
좋은글 잘 잃고 갑니다
네, 좋은 하루 되세요^^
요새 웹표준때문에 골머리 아팠는데 이 글을 읽고 나니 깔끔하게 정리됬습니다. 감사합니다. 스크립 좀 해 가겠습니다. ^^
도움되었다니 다행입니다^^)/ 부족한 자료이지만~ 좋은 사람들에게 유용하게 쓰였으면 좋겠습니다~
정말 중요한건 이렇게 좋은 시스템이 있음에도 불구하고, 아직까지 우리나라 웹에이전시나 기업들은 비주얼한 디자인만을 고집하고 있다는게 정말 답답한 일일수밖에 없네요. 화려한 이미지, 화려한 플래시...이런것들 우리나라처럼 인터넷이 매우 발전한 나라가 아니면 로딩속도만도 큰 문제가 됩니다. 유저들은 로딩이 되버리기도 전에 사이트를 닫아버리게 됩니다. 사용자들이 사이트를 보지 못하게 되면 아무리 멋진 디자인을 하고 멋진 효과를 준들 무슨 소용이 있을까요...
웹 페이지를 켯을때 웹표준과 CPU 사용량을 고려하지 않는 에이전시나 기업들은 장담하건데 머지않아 곧 문을 닫게 될 거라고 생각합니다. 원초적으로 가장 중요한것은 전 세계 어느 사용자라도 페이지를 보는 것에 문제가 없어야 한다는 결론인거 같아요~ 그래서 우리나라 현실 참으로 안타깝군요... 4월이면 법적으로 웹표준을 준수하지 않는 사이트는 운영할 수 없도록 될 거라는데, 그런데도 불구하고 우리나라 웹디자이너라는 사람들은 플래시, 에펙등등 비주얼적인 부분에만 목숨걸고 있으니... 한숨이 푹푹 나오는군요..
네 옳으신 말씀입니다~
글에도 잠깐 언급하였지만~
잘나간다는 웹에이전시들은 물론이고, 컴퓨터 학원들까지 웹표준은 커녕... 기본적인 웹가이드라인 조차 안 잡은 사이트들이 많더라구요~ 단순히 화려하고 이쁜 사이트라면 얼마든지 구현할 수 있는 사람들이 많지만.. 표준화를 위해서는 많은 노력이 필요하죠~ 아직 인재도 부족하구요~ 4월부터 정말이지 기대됩니다..... ^^ㅋ
잘 읽었습니다. 좋은 내용 감사합니다.
저도 지돌 스타님 블로그에서 많이 배우고 있습니다^^
솔직히 저도 웹디자인을 한다고하지만 왜 웹표준을 사용해야하는지에대해 알지 못했는지 이제야 정말 기본 체계가 잡힌것같아요~ 넘 감사합니다~
네.. 도움 되셨다니 다행입니다^^ 좋은 하루 되세요^^
좋은 글 잘 보고갑니다. ㅋ
제 블로그에 웹표준에대해 썼는데.. 제가 모르는내용을 주저리 주저리하려니..힘들어서 마지막에 링크걸어봤습니다. ^^*
(보시는 분들도 제글보고는 이해못하실듯... 그분들을 위해서라도 -_ㅠ)
저도 쏭군님처럼 멋진포스트..언젠간 써볼수 있겠죠?ㅋ
보잘것 없는 글 링크 걸어주셔서 감사합니다 ^^*