본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

웹 표준

최초 작성일
최종 수정일
이번 시간에는...
HTML 문서에서 웹 표준이 무엇이고, 왜 중요한지 알아봅니다. 또한 W3C 검증기를 통해 HTML 마크업을 검증하고, 웹 표준을 준수하기 위해선 어떤 원리 방법을 가져야 하는지 알아봅니다.

이제 HTML 중급의 시간입니다. 기초적으로 자주 사용하는 요소들은 이미 지난 초급시간에 다 다뤘습니다. 중급 강좌에서는 웹 표준에 대해 알아보고, 테이블 요소와 다루지 않았던 몇 가지 요소들을 좀 더 살펴볼 것입니다.

표준에 대한 인식

만약 여러분이 예전부터 웹에 관심을 가지었더라면, 이 '웹 표준'이라는 단어를 몇 번 들어보셨을 것입니다

표준화 한다는 것은 여러 종류와 규격 등을 표준을 정해서 제한하고, 통일하는 것을 말합니다. 우리 나라의 여러 지역들의 사투리로 의사 소통에 장애가 있을 때를 좀 더 방지하고자 표준어가 있는 것이고요.

하지만 표준어는 아무래도 사람의 의사 소통이다 보니, 실질적으로 표준어로만 대화하는 사람은 없습니다. 아무래도 표준어는 언어이고, 사람이 얼마나 많이 사용하는 가에 따라 변화하기 때문에 매우 느슨한 표준입니다.

문제는 웹 표준도 이와 같이 받아들이는 경우가 많다는 것입니다.

사실 표준어 말고도 표준이라는 것은 세상 곳곳에 많습니다. 아주 간단하게는 길이의 단위인 센티미터(cm), 부피를 재는 리터(L) 같은 것들 모두가 표준입니다. 이러한 표준 덕분에 우린 전세계 어디서나 같은 길이를 만들어 낼 수 있습니다. 거대한 빌딩도 이런 표준덕분에 나올 수 있는 것입니다.

표준이 있다는 것은 하나의 기준이 있기 때문에, 만약 2cm짜리의 두 개의 끈이 길이가 다르다면 자로 재어서 무엇이 틀렸는지를 분간 할 수 있습니다. 웹 표준 역시 마찬가지 입니다. 만약 여러분이 작업한 페이지가 어느 한 웹 브라우저에서 의도와 다르게 나타난다고 합시다. 여기서 만약 여러분이 표준에 어긋나는 코딩을 했다면, 이것은 여러분의 잘못입니다. 하지만 표준을 준수했음에도 그 브라우저만 다르게 나타난다면, 이것은 브라우저의 버그입니다. 표준을 기준으로 어느 쪽이 수정되어야 할 지를 판단하는 것입니다.

예전의 웹 페이지들 같은 경우, 거의 웹 표준을 지키지 않았습니다. 이는 그 페이지들을 제작한 분들만의 책임은 아닙니다. 그렇게 된 데에는 IE의 문제가 있었습니다. 당시 IE6 또는 7이 주를 이루던 시절에는 파이어폭스나 크롬 같은 브라우저가 없거나 또는 국내에서 거의 안 알려졌습니다. 지금도 그렇지만 당시의 웹 브라우저는 거의 IE가 유일 했습니다. 문제는 IE 자체가 표준을 많이 지원하지 않았습니다. 점유율이 절대적이니 굳이 지킬 필요도 없으리라 봅니다. 만약 여러분이 웹 표준에 맞게 웹을 제작할 경우, 열에 아홉은 IE6에서 깨집니다. 이런 이유로 웹 개발자들 스스로도 표준은 정말 비현실적인 이야기이었을 것입니다.

하지만, 시대는 변화하고 다양한 브라우저들이 생겨났습니다. 여전히 IE의 점유율은 높지만, IE8부터는 웹 표준을 거의 준수하기 시작합니다. 그리고 IE6의 점유율은 이제 매우 낮아져서, 이제 대부분의 신규 페이지에서는 IE6을 고려하지 않는 경우가 많습니다.

문제는 그 당시의 비 표준으로 제작되었던 웹들이 이제 표준을 준수하는 브라우저에서 깨져 보이는 경우가 많다는 것입니다. 여기서 얻을 수 있는 또 하나의 교훈은, 여러분이 웹 표준을 준수할 수록 여러분의 웹 페이지가 더 오래 지속될 수 있다는 것입니다. 사실 최근에 계속 문제되고 있는 ActiveX 역시 어쩌면 하나의 비 표준으로 볼 수 있습니다. 그렇기 때문에 타 브라우저와의 호환성 문제, 보안의 문제들이 계속 나타나고 그에 대한 대안들로 회사는 또 다른 비용이 들어가는 것입니다.

그만큼 웹 표준이 있다는 것은 웹을 만들려는 여러분에게 정말 다행스러운 일입니다. 그리고 사실 웹 표준을 준수한다는 것은 어렵지 않습니다.

높은 빌딩을 짓고 있는 모습
거대하고 높은 빌딩의 건설도 표준의 규격이 있기에 가능합니다.

웹 표준의 준수

제 경험상, 제가 생각하는 웹 표준을 지키는 가장 큰 두 가지 원칙은 다음과 같습니다.

  • HTML(의미)과 CSS(외형), Javascript(동작)를 역할에 맞게 분리할 것.
  • 각 문서를 표준에 맞게 작성할 것.

여기서 첫 번째 의미, 외형, 동작의 분리는 여러분이 처음부터 그렇게 배워와서 어렵지 않을 것입니다. 보통 각 문서를 표준에 맞게 작성하는 것, 특히 HTML 마크 업을 표준에 맞게 작성하는 것을 어렵다고 생각합니다. 하지만 이 역시 하나도 어려울 것이 없습니다.

마크 업에서 표준을 준수하는 가장 첫 번째는 열고 닫는 태그를 온전히 닫아 주는 것입니다. 이는 거의 오타 정도의 실수일 것입니다만, 자주 일어난다면 습관의 문제이고요. 요새 웬만한 웹 에디터는 자동으로 닫아 주기 때문에 이런 문제는 거의 없을 것입니다.

그 다음은 전에 우리가 배웠던 블록 요소를 인라인 요소에 넣지 않는 것입니다. span 요소 안에 div를 넣는 다면 비 표준입니다. 실제로 a 요소 안에 p나 div같은 요소를 넣는 경우가 많습니다. a는 HTML5 이전에는 인라인 요소이기 때문에 반드시 안에 인라인 요소를 넣어야 합니다.

그 다음으로 ul이나 dl, p 같이 조금 특수한 경우만 신경 쓰면 됩니다. ul에는 바로 자식으로 li만 올 수 있다거나 하는 경우인데, 많지 않습니다.

앞의 부분만 지킨다면 기계적인 웹 표준은 거의 다 지켜집니다. 의미에 맞는 요소를 사용하는 것 역시 웹의 표준을 준수하는데 중요한 부분입니다만, 앞의 부분이 준수된 다음의 문제입니다.

이런 기계적인 웹 표준을 점검해 주는 웹 서비스가 있습니다.

바로 마크 업 검증 서비스 (Markup Validation Service)로 웹 표준을 제정한 W3C에서 운영하는 서비스 입니다. 페이지 주소 URL로 확인할 수도 있고, 파일이나 직접 소스를 붙여 넣어서 확인할 수도 있습니다.

하지만, 이런 검증 서비스를 사용하시기 전에 꼭 알아야 할 요소가 있습니다. 그것은 이 웹 페이지가 어떠한 표준을 준수하고 있는가를 알려주는 독타입(doctype)입니다. 다음 시간에 이 독타입에 대해 알아보도록 하겠습니다.

요점 정리
  • 웹 표준은 웹에 관한 표준 규격임.
  • 과거에는 표준에 대한 정의가 부족했고, 절대적인 점유율을 가진 IE가 표준을 준수하지 않아 표준에 대한 인식이 낮았음.
  • 현재 나오고 있는 최신 브라우저들은 대부분 웹 표준을 준수.
  • 때문에 웹 표준을 준수하는 것은 소스의 지속성을 길게하고, 보다 견고하고 쉬운 유지보수를 제공.
  • 웹 표준의 기본은 내용(HTML)과 외형(CSS), 동작(JS)의 분리.
  • HTML의 표준은 인라인 요소와 블럭 요소를 잘 구분하여 사용하면 대부분 준수. 여기에 몇 가지 태그(p, ul, ol, dl 등)만 주의하면 웹 표준은 거의 준수.
  • HTML 마크 업의 표준 검증은 W3C 마크업 검증 서비스를 이용하면 편리.

이 글이 유용하셨다면 친구들에게 공유 해주세요.