5: 아름다운 꿈, 하지만 현실은 무엇인가?

소개

지금까지 우리는 웹 표준의 아름다운 이상향에 대해서 이야기 했다. 웹 표준은 모든 브라우저들과 운영체제, 심지어 모든 전자 기기에서 작동 가능한 상호 운용성을 갖게 한다. 하지만 정말로 현실적으로 가능한가? 모든 웹 브라우저들이 100% 웹 표준을 준수하는가? 모든 웹 개발자들이 웹 표준을 제대로 사용하는가? 웹 개발자가 웹 표준을 준수하여 페이지를 만들면 디자인이 어디에서나 잘 보인다고 확신하는가?

마지막 질문에 대한 대답은 간단히 말해 ‘아니다’이다; 이상적인 상황은 현실에서 멀리 떨어져 있다. 이번 장에서는 다음과 같은 내용을 볼 수 있다:

  • 당신은 웹 표준 준수를 어떻게 확인하는가?
  • 오늘날 사이트에서의 웹 표준 준수
    • Amazon: 쇼핑에서의 웹 표준?
    • CNN: 뉴스에서의 웹 표준?
    • Apple: 디자인의 우월함 그리고 유효함?
    • 작은 웹 표준 준수 설문
  • 왜 사이트들은 호환성이 떨어지는가?
    • 교육
    • 사업적인 이유
  • 요약
  • 읽어볼 것 들
  • 연습 문제

당신은 웹 표준 준수를 어떻게 확인합니까?

우리가 좀 더 나아가기 전에, 당신은 분명히 “이 웹사이트가 웹 표준을 사용했다면 당신은 어떻게 알겠는가?”라는 의문이 들 것이다. 어떤 다른 웹 사이트에 비해 다른점은 없는가?

안다고 할 수도 모른다고 할 수도 있다. 웹표준을 준수하는 웹 사이트들은 만약 제대로 개발되었다면 뒤죽박죽 엉망으로 작성된 마크업을 볼 수 없을 것이다.하지만 웹 사이트의 소스 코드(우클릭 후 컨텍스트 메뉴에서 ‘소스’나 메뉴에서 ‘소스보기’를 선택해 보자)는 매우 달라 보일 것이다. 웹 표준을 준수한 웹 사이트는 불필요한 코드를 포함하지 않는 멋지고 깨끗한 마크업을 가진다. 당신이 한번에 알아채기는 힘들겠지만 나를 믿어보자. 스크린리더를 사용하는 시각장애인과 검색 엔진은 제대로 된 웹 표준을 알아볼 수 있다. 우리는 이미 지난 장에서 웹 표준 사용의 이점을 배웠다.

웹 표준을 확인하는 가장 쉬운 방법은 온라인에서 제공되는 편리한 툴인 벨리데이터를 사용하는 것이다. W3C에서 자유롭게 사용하도록 만들었고, http://validator.w3.org/에서 사용할 수 있다. 그림 1을 보자. 당신은 HTML/XHTML의 에러를 이 툴을 사용해서 확인할 수 있다. CSS는 CSS 벨리데이터를 이용해서 확인할 수 있다. 이 벨리데이터들을 통해서 당신이 즐겨찾는 웹 사이트 몇 개를 테스트해보자.

 그림 1: W3C의 마크업 벨리데이션 서비스는 웹 페이지 내의 마크업 에러를 검사해준다.

벨리데이트는 절반의 싸움에서 당신의 페이지를 보장해준다. 브라우저들이 웹 표준을 준수하는 것을 우리가 어떻게 확인할까? 웹 표준 프로젝트는 브라우저가 제대로 렌더링할 수 있는 Acid 테스트라고 불리우는 다양한 테스트 화면을 HTML과 CSS 규칙을 복잡하게 사용(거기에 다른 마크업과 코드도 더해서)해서 만들었다. Acid 테스트의 최신 버전은 Acid3로 여전히 작업이 진행중이다. 당신은 http://www.acidtests.org/에서 Acid 테스트에 대해서 더 많은내용을 읽어볼 수 있다. 당신의 브라우저가 이 테스트를 통과하는지 직접 가서 확인해 보라.

오늘날 사이트에서의 웹 표준 준수

주요 웹 사이트들은 웹표준을 사용하거나 또는 단지 뭔가를 해킹하는가? 그 밖에 몇 개의 다른 회사들을 살펴보자. 그리고 W3C 마크업 검증 서비스 결과가 얼마나 나왔는지 보자. 당신은 얼마나 많은 웹 사이트들이 웹 표준 테스트를 통과하지 못하는지에 놀라게 될 것이다. 하지만 낙심할 필요는 없다. there is no reason why you can’t go one better and get your sites validating properly. 일반적으로 말하면 웹 사이트를 더 견고하게 만들기 위해서 당신은 보고서 아래를 명심해서 읽어야 한다. (거기에는 기술적 용법같은 다른 고려해야할 사실들이 있다.)

Amazon: 쇼핑에서의 웹 표준?

만약에 당신이 온라인 쇼핑할 기회가 있다면 당신은 아마도 아마존에 방문할 것이다. 아마존은 책에서 CD 그리고 특정 분야에 이르기까지 모든 것을 제공하는 사이버 공간에서 가장 거대한 상점이다. 그럼 아마존은 유효성 검증을 통과했을까? 그림2를 확인해보자.

 그림 2: Amazon.com 빨갛게 실패했다고 나왔다! 뿐만 아니라 거기에는 유효하지 않은 마크업도 있다. 그리고 그들은 문서형(그들이 사용하는 HTML/XHTML의 버전을 말한다)도 선언하지 않았다.

아마존은 웹표준을 준수하기까지 약간의 여정을 가져야 한다. 나는 아마존 속사정은 알지 못한다. 하지만 나는 꽤 오랫동안 아마존 주변에 있었기 때문에 잠시 추측해 본다면 그들은 그들의 전체 수명을 위해서 웹사이트를 강화하는데 아마도 같은 소프트웨어를 사용해 왔다. 웹표준은 이번 세기(2000년)가 되기 전까지 스포트라이트를 받지 못했는데 그 시스템은 아마존의 온라인 판매를 위한 제품을 개발했을 때 정말로 웹표준이 지원되지 않았거나 공표되지 않았을 것이다. 나는 확실히 알지는 않지만 아마존은 원래 그들의 웹사이트 목적에 맞는 형태를 유지하기 위해서 안 좋은 점들을 감수해야만 했다.

CNN: 뉴스에서의 웹 표준?

과연 뉴스 기관들은 시멘틱할까? CNN.com은 세계에서 가장 큰 미디어 웹 사이트중 하나다. 글로벌 자원과 함께 그들은 일어난 새로운 사건들을 보고한다. 분명히 그들은 사내에 책임 있는 전문가들을 가지고 있고, 일어난 새로운 사건들을 보고한다. 그럼 그들의 웹사이트는 유효한 마크업을 만들어 내는가? 그림 3을 확인해보자.

 그림 3: CNN.com (as of April 15, 2008) 33개의 유효성 검증 오류가 나왔다. HTML 4.01 호환 문서형(Transition DTD)을 사용했지만 XHTML 양식의 마크업도 사용되었다.

CNN의 웹사이트 크기와 복잡도에서 오는 33개의 에러는 나쁜 것은 아니다. 그들은 컨텐츠 관리 시스템(CMS)을 표준을 준수한 마크업을 생성하는데 완벽하게 사용하고 있지 못했기 때문에 33개의 에러를 만들어 냈다. 아니면 뉴스를 전문적으로 작성하는 제작진에 의해서 유효성 에러 덩어리들을 만들었을 것이고, 웹 사이트 제작은 중요하지 않았을 것이다. 이런 설명은 그럴싸하다.

Apple: 디자인의 우월함 그리고 유효함?

애플은 그들의 아름답고 기능성의 하드웨어와 소프트웨어들로 유명하다. 그들의 제품은 충성스러운 매니아들에 의한 거의 종교적인 경험으로 알려져 있다. 애플의 웹사이트는 아릅답게 디자인되고 잘 구성되어 있어 종종 호평을 받는다. 하지만 웹표준을 준수하고 있기까지 할까?

 그림 4: Apple.com 은 정말로 HTML 4.01 Transitional 마크업을 거의 지켰다. 6개의 에러가 있는데, "typos"와 사파리 전용 태그가 사용된 경우가 혼재되어 있다.

애플의 웹사이트는 유효성 검증을 거의 통과했다. 정말로 에러를 고치고 페이지를 통과시키는데 누구라도 5분이면 가능하다.하나의 에러를 간단히 언급하자면, 애플은 검색 상자를 위해서 사파리의 전용 속성을 사용하기로 결정했다.(검색 상자는 type=“search”라는 속성을 가진다) 사파리에서 작은 돋보기 아이콘을 클릭하면 최근 검색 목록을 볼 수 있게 된다. 오페라나 인터넷 익스플로어와 같은 다른 브라우저에서는 일반적인 텍스트 상자처럼 보인다.

간단한 웹 표준 준수 설문

이 같은 예들을 통해서, 나는 남아 있는 사이트들을 종합해서 파이 차트로 만들어봤다. 나는 트래픽이 가장 높은 웹 사이트들의 알렉사 순위 뿐 만 아니라 포춘 500 목록에서도 40개의 기업 웹사이트들을 선별해서 조사해봤다. 내가 찾은 내용은 그림5와 같다.

왜 사이트들은 호환성이 떨어지는가?

“왜, 왜, 그들은 유효성 검증을 통과할 수 없는가?” 그럴만한 이유가 있겠지만 적어도 당신의 마음 속에서 이같은 질문은 계속되어야 한다. 왜 몇 몇 사이트들은 유효성 검증을 통과시키는가? 나는 몇가지 가능한 이유-전자상거래 시스템이나 컨텐츠 관리 시스템과 같은-를 이미 말했었다. 하지만 거기에는 몇가지 다른 근본적인 이유가 있다.

교육

내가 학교에 있을 때 관리 정보 시스템 프로그램, 컴퓨터 공학 프로그램, 그리고 뉴 미디어 프로그램이 있었는데 각 과정은 웹 사이트 개발과 관련된 과정을 가졌다. 이것들을 가르치면서 많은 것들이 확실해졌는데, 그것들 가운데 어디에서도 웹사이트의 확실한 코드를 다루는 방법을 알려주지 못했다. 내가 여러 대학 과정을 보면서 느낀점은 HTML, CSS과 JavaScript와 같은 웹 언어는 대부분 컴퓨터 공학 프로그램의 초석이 되는 기술이다. 그리고 대부분의 관리 정보 시스템과 뉴 미디어 프로그램의 기술적 시발점이다.

나는 여기에서 무엇을 해야하는지 그 많은 교육 과정들을 깊고 높은 수준에서 커버하지 못했다. 나는 만약 당신이 웹 표준을 준수하여 작업하는 10명의 개발자들에게 질문을 한다면 웹 표준을 배운 10명중 9명이 스스로 공부했다고 대답할 것이라는데 기꺼이 내기를 걸 것이다.(다른 한 명인 그녀는 그녀의 사이트를 IE6에서 제대로 보이게 하기 위해 노력하는 중이라 너무 바빴기 때문이라고 대답할 것이다.)

W3C는 표준을 개발하는 책임을 가진 그룹이다. 그리고 WaSP는 브라우저 제조사들과 개발자들이 웹 표준 지원을 향상시키도록 계속 이야기하는 도전을 하고 있다.

당신이 지금 읽고 있는 이 과정은 웹 표준을 위해 가르치기 위한 교재로 만들어졌고, 무료로 사용될 수 있도록 만들어졌다. 우리는 왜 사람들은 웹 표준을 적용하지 않는지 그 이유들을 제거하기 위해 노력하고 있다.(우리는 여기에서 “양해를 구합니다”라는 말을 사용하는 것을 망설인다.) (지난 글에서 이야기 했듯이) 웹 표준이 가져다 주는 이점을 생각한다면 그들이 웹 표준을 사용하지 않는 것은 용납될 수 없다.

사업적인 이유

나는 웹 기반의 사업을 시작하는 기업인들을 위해서 자주 방문하는 사이트에서 “웹2.0 어플리케이션” 상의 웹 표준의 사용에 관한 많은 의견들을 등록 해 두었다. 그곳에서는 웹 표준은 준수되어야 한다고 믿는 사람들(우리는 모든 이유들에 대해서 이전에 토론했다)과 단지 “그래서 뭐가?”라고 말하는 사람들의 흥미로운 의견들이 교환되고 있다.

사실 웹 브라우저는 정말로 나쁜 코드를 처리할 것이다. 당신의 페이지들은 대부분의 주요 브라우저에서 정확히 표현되게 하기 위해서 유효성 검증을 할 필요는 없다. 비지니스 관점에서 시간과 돈은 같다. 왜 유효하게 만드는 것에 대해서 어떤 추가적인 시간을 보내는 것을 귀찮아 하는가?

만약 당신이 30분 동안 테이블 기반의 코드를 만들어 낼 수 있는것과 HTML과 CSS로 당신의 페이지를 코딩하는데 30분을 보내고 30분 동안 유효성을 검증하고 브라우저마다 제대로 보여지는지 확인하고, 최종 결과가 주요 데스크탑 브라우저들에서 똑같이 보일수 있는 경우 가운데 당신은 어느 것이 더 쉽게 들리는가?

내 시대(이 글을 쓰는 시점에 나는 서른살이다.)의 많은 사람들은 레이아웃을 테이블을 사용해서 웹 사이트를 만드는 방법을 배웠다. 그리고 타이포그라피를 위해서 Font 태그를 배웠다. 이것은 아직도 예전의 방식으로 일을 하고 있을 때 어떤 것들을 다시 배우는 일이 어렵게 느껴질 수 있습니다. (아직도 대부분의 웹 브라우저들은 잘 보여진다) 고용주는 일반적으로 그 차이를 알지 못한다: 나는 품질 리뷰를 하는 동안 매니저에게 내 마크업의 품질에 대해서 이야기를 한 적이 없다. 그래서. 정말로 인센트브는 어딨나?

나는 여기에 근시안적으로 접근한 더러운 코드에 대한 이야기를 던지고 있다. (당신은 내가 어느쪽을 변론하고 있는지 예상할 수 있다.) 내 경험에 의하면, 표준 기반의 웹 사이트의 재 디자인을 하는 것은 잘못 코딩된 페이지의 혼란을 바꾸는것보다 훨씬 쉽다.(나는 두가지 다 해 봤다)

나는 XHTML/CSS의 천국을 아직 만나지 못했지만 당신은 재 디자인을 하는 동안 단지 CSS만을 다루게 될 것이다. 나는 거의 근접해 있다. 또한, 요즘 그 어느때보다 웹 표준 지식을 요구하는 웹 채용 광고들을 더욱 더 많이 보게 될 것임을 명심해라

거기에는 또한 고려해야 할 몇가지 사업적 이유가 있다. 일반적으로, 웹 표준을 향상시킨 웹 사이트들은 검색 엔진 순위에 나타난다.(당신이 구글 검색을 할 때 검색 결과의 상단에 나타나게 하는 방법) 추가적으로, 표준을 사용한 모범 사례는 일반적으로 장애를 가진 사람들이 사이트를 사용하려고 하거나 모바일 폰에서 사이트를 접속혀라고 하는 사용자들에게 더 나은 접근성을 보장한다. 소수의 사용자들의 증가는 사업을 위해서도 좋다.

요약

이번 장에서 나는 오늘날 웹 표준이 웨 사이트에서 확실하게 사용되었는지 아닌지 확인하는 방법, 얼마나 많은 사이트들이 웹 표준을 정확히 사용하고 있는지 그리고 왜 사람들이 웹 표준을 채택하고 있지 않은지 등 웹 표준 적용 상태에 대해서 이야기 했다. 당신이 보았듯이, 이유는 강력하고 극복하기 쉬운 현실이 아니다.

그래서 미래의 진취적인 웹 개발가 해야 할 일은 무엇인가? 당신은 웹 표준을 고민할것인가? 아니면 그래픽 에디터로 이미지를 자르고 테이블로 당신의 웹 사이트의 레이아웃을 시작하겠는가?

이렇게 말해 보자: 나는 표준 기반의 개발은 모든 브라우저들에서 잘 작동되는 웹 사이트를 개발하는데 기존의 방법 대신에 웹 표준 사용을 배우는 것은 너무 오래 걸려서 시간 낭비라고 말하는 사람으로부터 아주 심한 항의를 받았다. 그래서 왜 표준을 정확히 준수하는 방법을 배우기를 시작하지 않고, 몇가지 문제로부터 스스로를 구하지 않는가? 웹사이트를 구축하는 방법을 배울지 결정했다면, 웹 표준을 어떻게든 해야 할 필요가 있으며, 그렇다면 올바르게 하는 방법을 배워야 한다.

읽어볼 것 들

연습 문제

  • 우리는 웹표준을 지키거나 지키지 않은 많은 대형 웹 사이트들을 봤다. 당신도 주기적으로 그 사이트들을 확인해보자. 그 사이트들이 유효한가? 만약 아니라면, 왜 그 사이트들이 실패했는지 몇 몇 에러들을 살펴보자.
  • 문서형(Doctype)이란 무엇인가? 이것이 하는 일은 무엇일까?
  • 당신은 사업과 관계지어서 어떤 경우에 웹 표준으로 사이트를 만들겠는가?

저자에 대해서

Jonathan Lane은 British Columbia 의 Mayne Island에 위치한 웹 응용 개발 회사인 Industry Interactive의 회장이다. 그는 Lethbridge대학의 Re-Development Center에서 수 년에 걸쳐 웹 프로젝트의 진행자 역할을 하는 것으로 처음 일을 시작했다. 그는 Flyingtroll에 블로그를 만들고 최근에는 베이스캠프 관리응용 프로젝트를 위해 이메일을 통해 접촉하는 Mailmanagr로 발전시키고 있다.

 

이 글과 비슷한 종류의 글은 '클리어보스' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.