은빛소나기의 개발노트

작년 9월 쯤이었던가? 회사에 입사한지 얼마되지 않아 디자이너와 기획자에 대한 불만이 높아져 갔다. 바로 HTML 때문이었다. 어X비 사의 드모 프로그램을 이용하여─그것도 구버전이다─ '생성'해낸 코드들. 아무렇게나 정렬되어있는 HTML TAG들. 하이퍼링크하나 걸줄 몰랐던 우리 디자이너와 기획자들 덕분에 그 당시 수습기간이나 마찬가지였던 필자는 하루종일 HTML 코딩을 해야했다. 물론 그때 당시 특별한 일 없이 수습기간이나 마찬가지였던 필자에게 맡기기 적당한 업무였지만, 만약 실제 프로젝트가 진행된다면 일명 퍼블리싱이라고 불리우는 이 작업에 얼마나 많은 시간을 낭비해야 할지 아득하기만 했다.

그래서 그때 당시 생각한게 개발팀 전 사원이 퇴근전 짬을 내어 웹 표준에 대해 스터디를 진행하자 라는 생각이 들었고, 그에 대해 관련 자료를 약 보름동안 준비를 하였다.

그러나 회사의 경영악화로 인하여 구조조정이 일어났고, 경영방침과 전략, 방향성의 변동으로 인하여 해야하는 업무의 변화가 있었다. 아무튼 결론은 열심히 스터디 준비를 했지만 아무짝에도 쓸모 없는 것이 되버렸다는 것이다. 때문에 하드에 썩고 있는 자료가 왠지 아깝다는 생각이 들어 이렇게 이글루스에 포스팅을 할까 한다.

교안이라고 준비했던 자료는 5일차로 총 5단계로 구분하였고, 1일차는 바로 웹 표준의 필요성이다.



1일차 - 웹 표준의 필요성


목  차

1. 개요

2. 웹 표준이란?

3. 웹 표준 기초 지식

4. 웹 표준과 크로스 브라우징(Cross Browsing ≒ 상호 호환성)

5. 웹 표준의 필요성

6. 향후 발전 방향


1. 개요

W3C의 웹 표준 권고안(XHTML 1.1 + CSS 2.0)을 준수하는 웹 표준화를 통해 차후 개발하는 웹 페이지에 대하여 작성과 유지보수의 효율을 높이는 것이 목적이다. 이를 위하여 웹 표준에 대해 알고 웹 표준화가 왜 필요한지에 대해 인지하기 위한 자료이다.

2. 웹 표준이란 ?

웹 표준이란 W3C에서 권고하는 사항대로 태그를 사용용도, 사용방법에 맞게 정확하게 사용하고 문제가 되는 웹 브라우저에 대한 내용을 추가하여 모든 웹 브라우저가 동일한 페이지를 출력하게 하는 것을 뜻한다.

웹 브라우저(Web Browser)가 버전업을 하면서 여러 기능이 추가되고 이에 따라 예전버전을 사용하는 클라이언트(Client)와 호환성이 문제가 되었다. 또한, 웹 브라우저의 종류에 따라서 지원이 되는 웹 브라우저가 있는 반면 지원이 안되는 웹 브라우저도 있다. 이러한 이유로 '웹을 개발하는 사람들은 모든 웹 브라우저와 버전에 따라 모든 문서를 제작해야 하는 것일까?'라는 문제에 당면하게 된다. 이러한 문제를 해결하기 위해 표준 즉 웹 표준이라는 말이 나오게 되었다.

전 세계적인 웹 기술 표준을 주도하고 있는 W3C의 HTML4.0, XHTML, CSS 등의 구현 스펙이 매우 상세하고 이를 지원하는 현대적인 브라우저들이 계속 늘어남에 따라 더 이상 웹 페이지가 다르게 보이거나 동작되지 않는 현상은 거의 사라지게 되었다. 그러나 옛날 웹 브라우저간 이종 기능이 아직은 상존하고 있기 때문에 오래된 브라우저 사용자들의 불편함을 고려해 주는 상호 호환성(Cross Browsing)과 최신 웹 표준 기술 적용 그리고 접근성 높은 웹 페이지를 통해 향후 표준 기술에 적합하게 만드는 상위 호환성(Forward Compatibility)이 현재 웹 서비스 제공자들의 공통된 숙제가 되고 있다.

이것은 하위 버전 호환성 유지(Backward Compatibility)와 구분해야 한다. 일반적으로 프로그램을 개발할 때, 버전이 올라가면 갈수록 새로운 기능을 추가하고 이전 기능은 폐기하게 된다. 그러나 사용자의 측면에서는 예전 기능을 계속 유지해 주어 개발 호환성을 유지해 줄 필요성이 생긴다. 웹 브라우저에서 하위 버전 호환성 유지는 예전에 사용되는 기능이나 태그를 표준 태그로 치환해 주는 것이다. 이를 통해 대부분의 웹 디자이너는 예전 지식에 따라 웹 페이지를 코딩해 주어도 그대로 구현되는 것으로 생각하게 되는 것이다. 그러나, 하위 버전 호환성 유지는 웹 브라우저의 벤더에 따라 지원 가능 정도가 약해 질 뿐만 아니라 웹 표준 기술에 대한 지식 습득을 가로막는 장애가 된다.

이에 반해 상호 호환성(Cross Browsing)은 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹 브라우저를 위한 장치를 만들어 모든 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다. 또한, 장기적인 웹 표준을 지원하는 상위 호환성은 미래에 어떠한 웹 브라우저나 단말 장치가 나오더라도 웹을 이용할 수 있다는 측면에서 매우 중요하다.

웹에 관련한 표준에는 우리가 흔히 말하는 표준(Standard)이 아니라, W3C의 토론을 통해 나온 권고안(Recomendation)이 가장 최상위 이다. 표준의 종류에는 제안된 표준(Draft), 작업하는 표준(Working Draft, WD), 확정될 권고안(Candidate Recommendation, RC), 확정된 권고안(Recommendation)이 있다

이를 통하여 W3C에서 나온 확정된 권고안을 편의상 웹 표준이라고 부르고있다.

3. 웹 표준 기초 지식

▲ W3C에서 권고하는 웹 표준은 XHTML + CSS으로 구성된다
• XHTML
XHTML(eXtensible HyperText Markup Language)은 우리가 기존에 작성해 왔던 HTML 4.0(표현과 구조가 혼합되어 있는 마크업 언어)을 XML(구조화된 문서형식을 띄는 마크업 언어)의 형태로 재 구축한 언어이다. 그렇기 때문에 기존에 사용하던 HTML과 매우 유사하다. 그러나 XHTML은 HTML의 경우보다 더욱 엄격한 규칙을 가지고 있다. 예를 들자면 모든 태그와 속성은 반드시 소문자로 작성해야 하고, 속성값은 큰 따옴표 안에서만 써야 한다. 또 모든 태그들을 올바르게 닫아줘야 한다. 또한 XHTML의 경우 태그들의 본래의 역할과 성격을 명확하게 구분하여야 한다.

• CSS
CSS는 사용자 정의의 디자인 속성, 즉 글꼴, 크기, 색상, 이벤트 등을 지정할 수 있으며 CSS를 사용한 모든 페이지는 기존 버전과의 호환성 되게 어떤 브라우저에서도 내용을 열람할 수 있다. CSS를 이용하여 설계자는 서로 다른 화면 해상도와 브라우저 상에서, 테이블 없이도 동일하게 보여질 수 있는 페이지를 생성할 수 있다. 단 IE4.0 이하와 넷스케이프4 이하의 오래된 웹 브라우저에서는 CSS를 지원하지 못한다. CSS를 사용하여 생성한 페이지와 템플릿은 다양한 브라우저, 화면 해상도 및 액세스 기술을 사용하여 테스트하여야 하며, 최신 시스템 사용자가 아니더라도 적합한 접근이 보장되어야 한다.

▲ 웹 접근성
웹 접근성이란 ‘누구나 웹에 접근할 수 있어야 한다’라는 뜻으로 여기서 ‘누구나’란 일반적인 사용자를 뜻하는 것이 아니라, 핸디캡을 지니고 있는 사용자(시각장애인, 청각장애인 등)와 이종 플랫폼(PDA, 스마트 폰 등)에서도 불편없이 사용할 수 있게 웹 사이트를 제작해야 하는 것을 뜻한다.

▲ 시맨틱 웹(Semantic Web)
시맨틱은 영어로 의미의 의미론의 라는 뜻이다. 우리말로 풀이하자면 의미를 가진 웹 환경을 뜻하는데, 시맨틱 웹이 구현하고자 하는 환경은 인간의 언어 구조를 기계에서도 이해될 수 있도록 환경을 구축하는 것이다. 현재 컴퓨터는 특정 수식을 계산하기 보다는, 정보를 가공하는 단말기로 사용되고 있는데, 검색엔진에서 키워드로 검색하게 되면, 대부분 사용자가 원하는 정보를 제공하지 못한다. 키워드가 길거나, 검색 엔진에서 검색할 수 없는 제한된 정보일 때 특히 검색이 어려운데, 이는 검색 엔진은 주로 단어를 중심으로 검색하기 때문에 문맥상 잘못된 결과가 나오는 경우가 많기 때문이다. 이것은 키워드의 단어 그 자체로만 파악해서 그 단어가 포함된 문서와 데이터들을 결과로 이끌어 내기 때문이다. 하지만 시맨틱 웹이라면 단어의 ‘의미 구조’를 통한 검색이 가능해져서 필요한 정보만을 심층적으로 뽑아내 고급검색이 가능하기 때문이다.

이를 이용하면 컴퓨터 혼자 전자상거래를 할 수 있고, 기업의 시스템 통합이나 지능형 로봇 시스템, 의료 정보화 등 다양한 분야에 응용할 수 있다. 이 시맨틱 웹이 실현되면 컴퓨터가 자동으로 정보를 처리할 수 있어 정보시스템의 생산성과 효율성 면에서 유리해 진다.

그러나 시맨틱 웹에는 단점이 있는데, 시맨틱 웹이 구현되기 위해서는 웹 상의 모든 객체(Object, Element, Entity 등 모든 것)들에게는 구분이 가능한 ID가 부여되야 되기 때문이다.
조금 쉽게 이해할 수 있도록 예를 들자면 시맨틱 웹 환경이 구축된다면 사람이 말을 하면 앞에 있는 개(Dog)가 저절로 번역되는 사람 말을 알아듣고 주인이 시킨 일을 척척 한다. 하지만 시맨틱 웹 환경이 구축되기 위해서 집을 위시한 모든 가구, 옷, 심지어 주인의 몸에도 그것을 구분할 수 있는 ‘이름’을 페인트로 써야 한다는 것이다.

4. 웹 표준과 크로스 브라우징(Cross Browsing ≒ 상호 호환성)

웹 표준의 목표는 어떤 환경(플랫폼)에서도 동일한 페이지를 출력하게 하는 것이다. W3C의 W3C Markup Validation Service(http://validator.w3.org) 검사를 통하여 웹 사이트가 표준을 준수했는지 여부를 알 수 있는데, 이를 통과한다면 해당 웹 사이트는 웹 표준을 지켰다고 할 수 있다. 그렇다면 웹 표준을 준수했으니 크로스 브라우징(Cross Browsing)에도 문제가 없다고 볼 수 있을까? 물론 이론상으로는 크로스 브라우징에도 문제가 없어야 한다. 하지만 현실에서는 그렇지 않다.

W3C에서 권고하는 표준으로 웹 사이트을 구성한다는 것은 XHTML1.1을 마크업으로 사용하고 스타일 시트는 CSS2를 그리고 스크립트는 ECMAScript 3rd로 서비스를 개발하며 웹 접근성에 대해서도 충분한 고려를 해야하며. 인코딩은 UTF-8 인코딩으로 해야 한다는 것을 의미한다.

그러나 표준을 준수한다고 알려진 브라우저들은 실제로 각 브라우저마다 특정 부분의 버그가 있으며, 표준에서 정해져 있는 태그나 속성의 해석이 다른 경우가 있다. 알려진 문제로는 CSS2 중 일부는 IE6,7 에서는 정상적으로 지원되지 않는 경우가 있고, Javascript(ECMAScript) 역시 브라우저 별로 지원하는 메소드 등이 서로 다른 경우가 있는데, 가장 많이 알려진 CSS 버그로는 IE의 박스모델 버그가 있다.

5. 웹 표준의 필요성

웹 표준을 준수함으로써 발생하는 이점은 다음과 같다.

▲ 코딩을 단순화시킬 수 있다.
코딩을 최대한 단순화시킬 수 있다. 기존의 테이블로 레이아웃을 짤 경우엔 TABLE태그가 3~4겹, 심하면 그 이상으로 겹쳐져서 코드의 가독성이 떨어지고 화면 렌더링 시 부하를 주게 된다. 이를 웹 표준을 이용하여 코딩 할 경우 코드가 단순해지기 때문에 가독성도 향상될 뿐만 아니라 렌더링에 대한 부하도 줄게 된다.

▲ 구조(문서)와 표현(디자인)의 분리가 가능해지며 유지보수가 용이하다.
W3C에서 권고하는 웹 표준은 XHTML와 CSS로 구성된다. XHTML은 구조적인 마크업 언어이기 때문에 실제로 html 파일에는 디자인 적인 요소가 거의 배제된 문서를 작성하게 되고, 디자인 적인 요소는 CSS로 처리하게 된다. 그렇기 때문에 구조와 표현의 분리가 가능해 진다.
또한 이로 인하여 디자인을 수정해야 하는 일이 발생할 경우 CSS 파일을 수정하는 것으로 전체적인 디자인 수정이 가능하며, 마찬가지로 문서 상의 자료를 수정해야 할 경우 디자인 요소가 배제되어있는 가독성이 높은 코드에서 자료를 수정하기 때문에 유지보수가 용이하다.

▲ 개발자와 디자이너의 병렬 작업이 가능해진다.
기존의 경우 웹 페이지를 개발할 경우 디자이너가 디자이너와 코딩을 마치고 개발자가 그 뒤에 디자이너가 작성한 코드에 프로그램을 입히는 방법으로 개발되었는데, 웹 표준을 준수할 경우 기획자에게서 스토리 보드가 넘어오는 순간 디자이너는 그래픽 레이아웃을 만들고, HTML 레이아웃을 코딩한다. 그 후 표준 준수 여부를 테스팅 한 후 최종안을 개발자에게 전달한다. 개발자는 최종안(HTML 레이아웃)을 받은 직후부터 개발을 시작하고, 디자이너는 HTML 레이아웃에 매핑 할 CSS를 만들면서, 나머지 디자인작업을 할 수 있게 된다.

▲ 모든 브라우저에서 같은 화면을 볼 수 있다.(크로스 브라우징)
웹 표준을 지킨다면, 웹 표준 코드를 지원하는 모든 브라우저에서는   같은 화면을 볼 수 있다.

▲ SEO (Search Engine Optimization) : 검색엔진 최적화
웹 표준을 준수할 경우 검색엔진에 최적화 할 수 있다. 이는 시맨틱 웹과 관련된 것으로 검색 엔진의 크롤러(Crawler)들은 메타 태그만 검색하는 것이 아니라 웹 페이지 소스를 있는 그대로 해석하므로 적절하게 구조화된 웹 페이지는 검색로봇이 잘 검색할 수 있으며 그만큼 비즈니스 기회가 많아진다.

▲ 구조적인 개발이 가능해 진다.
웹 표준의 목적 중 한가지는 것은 태그를 그 본연의 목적대로 사용하는 것이다. 예를 들자면 <TABLE> 태그는 레이아웃을 잡는 목적이 아닌 "어떤 행열을 가진 형태의 데이터를 표현하기 위한 표"를 그리는 목적으로 사용해야 한다는 것이다. 그렇기 때문에 레이아웃을 잡을 땐 "구획을 나누기 위한 블록"인 <DIV> 태그를 이용해야 한다는 것이다. 그러므로 특정 자료의 목적을 태그로 표현할 수 있다.(예를 들자면 자료가 제목에 해당되는 것이라면 <H> 태그를 사용해야 한다) 그로 인하여 구조적인 개발이 가능해 진다.(예를 들자면 대제목을 <h1> 태그로 소제목을 <h2> 태그로 작성하고, 내용을 <p> 태그로 작성하게 되면 문서의 구조성을 잘 따른 것이라고 할 수 있다)

6. 향후 발전 방향

이미 웹은 기술적으로 어플리케이션 수준의 UI를 구축할 수 있게 되었다. 또한 플래시로 인해 디자인 역시 동영상 혹은 게임 못지 않은 환경을 만들어낼 수도 있게 되었다. 그리고 웹 퍼블리시도 최근 대두되고 있는 웹 표준의 중요성 및 높은 효율성으로 점차 웹 표준을 지키려는 사이트가 많아지면서 웹이 구조적으로 변하고 있다. 이러한 웹의 변화는 더 나은 방향(시멘틱 웹)으로 나아갈 수 있는 기반을 마련하는 것이다. 또한 웹 브라우저 시장의 변동으로 크로스 브라우징의 중요성이 날로 커지고 있고, 단지 이종간의 브라우저에 대응 하는 것뿐 아니라 이종 플랫폼상에서도 유연하게 대처할 수 있어야 한다. 그리고 웹 표준은 바로 이러한 것들을 모두 수용하고 있다.

7. 결  론

1970년대 소프트웨어 업계는 소프트웨어의 위기란 것을 맞고 있었다. 바로 생산성 부족이라는 고질적인 병을 앓고 있었는데, 조금은 다르지만 어떻게 보면 지금이 웹의 위기라고도 할 수 있다. 웹은 웹 2.0이라는 그리고 근 미래에 다가올 웹 3.0이라는 패러다임의 변화가 있었지만, 아직도 표준을 준수하는 웹 사이트, 에이전시는 많지 않다. 그 이유 중 한가지는 표준을 준수했을 때 생기는 가시적인 효과가 보이지 않기 때문이다.

30여 년 전 소프트웨어의 위기를 극복한 것은 객체 지향 프로그래밍(OOP) 이었다. 분명 기존 절차 지향 프로그래밍에 비해서 코드 양이 많아지고, 프로그래밍 방법론이 복잡해졌지만, 체계적이고 효율적인 프로그램의 생산이 가능해졌다.

웹의 표준화도 마찬가지다. 더 나은 기술을 익히고, 익숙하지 않은 방법으로 개발을 하는데 일정 수준의 비용이 들겠지만, 그것을 이용한다면 더욱 체계적이고 효율적인 개발이 가능해지는 것이다. 이미 프로그래밍으로는 매우 효율적인 많은 방법론들이 나와있고, 디자인으로는 많은 노하우(Knowhow)와 노웨어(Knowwhere)가 존재한다. 그러나 아직까지 웹 퍼블리싱은 낡은 방식, 저 효율의 방법으로 개발을 하고 있다. 이는 ERP(Enterprise Resource Planning)를 절차지향 프로그래밍으로 개발하고 있는 것이나 마찬가지이다. 실제로 많은 부분들이 웹 표준을 준수 할 경우 개발 효율성을 높여준다는 것을 증명하고 있다.

기업의 성장에 있어서 상품의 고품질화와 비용의 절감은 큰 영향을 끼칠 수 있다. 그렇기 때문에 웹 표준화는 업무의 능률 향상과 체계화를 통해 내부 비용을 절감하고, 컨텐츠 품질의 향상으로 기업이미지의 프리미엄화를 꾀할 수 있을 것이다.