본문 바로가기
← 메인으로
들어가면서

들어가면서

게시 2026-07-10

이 책은 원문 수준의 오프라인 문서를 효용가치가 있는 온라인 문서로 만드는 과정을 다루고 있다. 이 과정을 이해하기 위해서는 몇 가지 실무적^기술적 개념을 먼저 알 필요가 있다.

  • HTML
  • HTML 문서
  • 콘텐츠 모델
  • 요소와 속성
  • 부모요소와 자식요소
  • 블록 레벨 요소와 인라인 요소
  • 웹 페이지와 웹 문서
  • 사용자 도구
  • 웹 브라우저
  • 보조기술
  • 웹 표준
  • 웹 접근성
  • 웹 디자인과 웹 저작

웹(Web)은 전 세계에 흩어져 있는 정보 자원을 연결하는 네트워크(World Wide Web)를 말한다. 이 네트워크는 컴퓨터와 인터넷을 이용하여 접속할 수 있고, 거미줄(web)처럼 복잡하게 얽혀져 있다. 사람들이 웹을 통해 정보자원(information resources)에 접근하여 이용할 수 있는 것은 다음과 같은 매커니즘을 갖고 있기 때문인데[1], 이것을 웹의 3대 요소라고 부른다.

  • URI : 정보자원의 위치를 표시할 수 표기법
  • HTTP : 위치 표시가 있는 정보자원에 접근할 수 있는 프로토콜
  • HTML : 정보자원과 정보자원 사이를 오갈 수 있는 하이퍼텍스트

웹의 기본 본문 그림

HTML

HTML(HyperText Markup Language)은 웹 문서를 만들기 위한 마크업 언어이며,[2] 전자문서 표준인 SGML(Standard Generalized Markup Language)에 기초하여 만들어졌다. 이 언어를 통해 온라인 문서의 작성(creating), 편집(editing) 그리고 연결(hyperlink)이 이루어진다.

웹의 기본 본문 그림

HyperText

하이퍼텍스트(hypertext)는 하이퍼링크(hyperlink, 이하 ‘링크’)[3]가 있는 문서를 말한다. 인쇄물은 모든 내용을 보여주어야 하지만, 하이퍼텍스트는 핵심 정보만 보여주고 참조 정보(references)는 링크로 연결시킬 수 있다.

Markup

마크업(Markup)의 사전적 의미는 원고 위에 표시된 구체적 지시(detailed instruction)를 말한다. 오프라인 문서의 경우, 작가가 쓴 원고는 편집자의 손길을 거쳐 문서가 만들어지며, 이 과정을 통해 서체가 지정되고 레이아웃이 만들어진다. 온라인 문서도 마찬가지다. 다만, 온라인 문서는 전자적인 작업을 통해 이루어지며, “구체적 지시”가 어느 한 출판사에서 정한 것이 아니라 전 세계적으로 통용될 수 있도록 범용적이고 표준적이라는 점이 다르다.

Language

“HTML은 너무 쉽다. 그래서 언어가 아니다”라고 말하는 사람이 있다. 언어를 결정짓는 기준은 난이도 수준이 아니라 문법 여부에 있다. 온라인 문서를 만들기 위해서는 저작 도구(authoring tool), 온라인 문서를 보기 위해서는 사용자 도구(user agent)가 필요한데, 이와 같은 도구들이 나름의 원칙과 규칙에 따라 온라인 문서를 만들거나 보여준다. 이러한 원칙과 규칙을 형식화한 것을 문법(syntax)이라고 부르며, 이 문법을 가지고 있다면 ‘언어’라고 부를 수 있다.

HTML 문서

HTML 문서는 HTML로 작성된 문서이며, 마크업을 표시하기 위한 태그(tag)와 사용자 제공을 위한 내용(plain text)으로 구성된다. 태그는 HTML 문서의 저작과 편집을 위한 표시이므로 사용자는 알 수 없는 문자다. 따라서 HTML 문서는 사용자가 아닌 저작자와 브라우저를 위한 문서라고 볼 수 있다.

모든 저작자가 작성할 수 있고 모든 브라우저에 의해 처리할 수 있도록 HTML 문서는 표준화된 기본 구조를 갖고 있으며, 이 구조는 3대 영역과 4대 필수요소로 이루어졌다.

웹의 기본 본문 그림

HTML 문서의 기본 구조

HTML 문서는 아래와 같이 크게 3개의 영역으로 구분된다.

  1. HTML 버전 정보 (HTML version information) : 문서 유형과 HTML 문서 범위를 설정하며, HTML 요소로 표시한다.
  2. 헤더 영역 (header section) : 주로 선언적인 정보(declarative information)로 구성되며, HEAD 요소로 표시한다.
  3. 본문 영역 (body section) : 실제 전달할 내용으로 구성되며, BODY 요소로 표시한다.

HTML 문서는 4대 필수요소로 구성된다.

  1. HTML 요소 : 저작자가 가장 먼저 해야 할 일은 브라우저에게 “이 문서는 HTML로 작성되었다”라는 사실을 알리는 것이며, 이를 위해 HTML 문서 범위의 시작 지점과 종료 지점을 표시한다.
  2. HEAD 요소 : 브라우저가 많은 양의 정보가 담겨 있는 HTML 문서의 본문을 처리하기에 앞서 본문에 대한 정보를 미리 파악할 수 있어야 하며, 이를 위해 문서 머리(document head)의 시작 지점과 종료 지점을 표시한다.
  3. TITLE 요소 : 제목 없는 문서는 있을 수 없다. 제목을 읽고 난 다음 본문을 읽는다. 사용자에게 제목을 먼저 보여줄 수 있도록 본문을 보여주기 전에 제목을 먼저 보여주어야 하며, 이를 위해 TITLE 요소를 사용하여 제목을 표시한다.
  4. BODY 요소 : 사용자에게 전달할 실제 내용을 문서 상에 표현할 수 있도록 본문 영역의 시작 지점과 종료 지점을 표시한다.

콘텐츠 종류

HTML 문서에 의해 제공되는 콘텐츠를 크게 7가지의 카테고리로 분류하고 있으며, 각 요소는 하나 이상의 카테고리에 포함될 수 있다(일부 요소는 해당 카테고리가 없다).

웹의 기본 본문 그림

그림 출처 : http://dev.w3.org/html5/spec/single-page.html#content-models

카테고리

설명

해당 요소

Metadata content

콘텐츠의 표현이나 동작 또는 다른 문서와의 관계를 설정하기 위한 콘텐츠

BASE, COMMAND, LINK, META, NOSCRIPT, SCRIPT, STYLE, TITLE

Flow content

문서의 본문 영역에 나타나는 콘텐츠

a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style, sub, sup, table, textarea, time, u, ul, var, video, wbr

Sectioning content

영역을 정의하기 위한 콘텐츠

article, aside, nav, section

Heading content

제목을 정의하기 위한 콘텐츠

h1, h2, h3, h4, h5, h6, hgroup

Phrasing content

문단을 이루는 콘텐츠

a, abbr, area, audio, b, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, textarea, time, u, var, video, wbr

Embedded content

외부 리소스로 삽입되는 콘텐츠

audio, canvas, embed, iframe, img, object, svg, video

Interactive content

사용자와의 상호작용을 위한 콘텐츠

a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video

요소와 속성

하나의 문서는 제목, 내비게이션, 본문, 하이퍼링크, 리스트, 컨트롤 등 다양한 구성요소로 이루어지는데, 이것을 표시하기 위한 것이 바로 요소(element)다. 요소는 태그(tag)에 의해 표시되며, 브라우저가 어디서 어디까지가 구성요소인지 파악할 수 있도록 시작 지점은 시작 태그(start tag)과 종료 지점은 종료 태그(end tag)를 사용한다.[4]

웹의 기본 본문 그림

요소는 단순히 구성요소의 종류와 그 범위만 표시한다. 그런데 이 표시만으로는 구성요소를 효과적으로 표현하기 어렵다. 어떤 사람의 이름이나 성별만으로는 그 사람을 제대로 설명하기 어렵듯이, 구성요소의 종류와 범위만으로는 해당 구성요소를 제대로 표현하기 어렵다. 이 점을 보완하기 위해 속성(attribute)의 개념이 도입되었다. 속성은 요소를 표현하기 위한 옵션 정보(option information)로서 요소가 지니고 있는 성질을 추가적으로 설명한다. 속성은 요소의 시작 태그 내에 작성되며, 속성 이름(attribute)과 값(value)이 한 쌍으로 구성된다.

웹의 기본 본문 그림

  • 요소(element) : 문서를 이루는 구성요소
  • 속성(attribute) : 요소를 표현하기 위한 옵션 정보

부모 요소와 자식 요소

HTML에서 요소는 하나 이상의 다른 요소를 포함할 수 있다. 부모 요소(parent element)는 다른 요소를 포함하고 있는 요소이며, 자식 요소(child element)는 포함된 요소를 말한다. 위계적으로 따지자면, 부모 요소는 상위 레벨의 요소, 자식 요소는 하위 레벨의 요소라고 볼 수 있다.

HTML 문서에서 최상위 레벨의 요소를 루트 요소(root element)라고 부르며, HTML 요소가 이에 해당한다. 루트 요소는 자식 요소만 가질 수 있으며, 모든 요소의 부모 요소가 된다. 아래 그림을 보면 알 수 있듯이 포함 관계는 부모-자식 관계(parent-child node), 병렬 관계는 형제 관계(sibling node)를 이룬다. 부모의 유전자가 자식에게 상속되듯이, 부모 요소에 적용된 속성은 자식 요소로 상속된다. 반면에 자식 요소에 적용된 속성은 부모 요소로 역상속되지 않는다.

HTML 소스

웹의 기본 본문 그림

HTML 소스의 박스 모형

웹의 기본 본문 그림

HTML 소스의 트리 모형

웹의 기본 본문 그림

블록 레벨 요소와 인라인 요소

HTML 요소는 크게 블록 레벨 요소(block-level element)와 인라인 요소(inline element)로 구분한다.

구분

블록 레벨 요소

인라인 요소

정의

큰 구조를 만들기 위한 요소이며, 콘텐츠를 블록 형태로 표시한다.

작은 구조를 만들기 위한 요소이며, 행 안에서 텍스트나 데이터를 표시한다.

특징

  • BODY 요소 안에서만 사용할 수 있다.
  • 인라인 요소와 다른 블록 레벨 요소를 포함할 수 있다.
  • 새로운 행에서 시작한다.
  • 인라인 요소보다 더 큰 구조를 만들기 위해 사용한다.
  • BODY 요소 안에서만 사용할 수 있다.
  • 데이터와 다른 인라인 요소만 포함할 수 있다.
  • 새로운 행에서 시작할 수 없다.
  • 텍스트 레벨 요소(text-level element)라고 부른다.

해당 요소

ADDRESS, ARTICLE, ASIDE, AUDIO, BLOCKQUOTE, CANVAS, DD, DIV, DL, FIGCAPTION, FIGURE, FOOTER, FORM, H1~H6, HEADER, HGROUP, HR, NOSCRIPT, OL, OUTPUT, P, PRE, SECTION, TABLE, TFOOT, UL, VIDEO

A, ABBR, ACRONYM, B, BDO, BR, BUTTON, CITE, CODE, DFN, EM, I, IMG, INPUT, KBD, LABEL, MAP, OBJECT, Q, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRONG, SUB, SUP, TEXTAREA, VAR

웹의 기본 본문 그림

웹 페이지와 웹 문서

일반적으로 웹 페이지(Web page)와 웹 문서(Web document)는 같은 의미로 사용되고 있지만, 엄밀하게 따지면 분명한 차이가 있다. 우선 웹 페이지는 브라우저가 HTML 문서를 렌더링[5]한 것이다. 즉, 저작자가 HTML에서 정한 규칙에 따라 원문에 구조와 의미를 표시하면, 이 표시에 따라 브라우저는 HTML 문서를 사용자가 이용할 수 있는 형식인 웹 페이지로 전환시킨다.

HTML 문서의 시작과 종료 지점은 HTML 요소로 표시되는데, 문서 내 담을 수 있는 분량은 따로 정해지지 않았다. 무한대의 내용을 담든지 한 글자의 내용을 담든지 분량에 상관 없이 HTML 문서의 기본 단위는 ‘페이지’(page)다. 웹 페이지는 서책(book)의 페이지처럼 규격이 정해지지 않았다. 마치 두루마리 종이(roll paper)처럼 종적으로 얼마든지 펼쳐질 수 있는 선형적 페이지(linear page)이며, 낱장의 성격을 지닌다.

이와 같은 낱장의 페이지를 모아둔 것이 바로 웹 문서다. 우리가 ‘문서’(document)라고 부르는 것들은 대개 한 묶음(pack, bundle)이다. 물론 한 장짜리 문서도 문서라고 부르기도 하지만 말이다. 비유하자만, 웹 문서가 서책이라면 웹 페이지는 서책을 이루는 낱장의 페이지인 셈이다.

※ 살펴본 바와 같이, 웹 페이지와 웹 문서 사이의 차이가 있지만, 이 책에서는 용어 상의 혼동을 줄이기 위해 “페이지”, “문서”를 “문서”로 통일하여 사용하였다.

웹의 기본 본문 그림

사용자 도구

사용자 도구(user agent)는 사용자의 정보 처리를 돕는 소프트웨어를 말한다. 사용자 도구는 용도, 처리 대상, 사용자 계층에 따라 다양하다. 웹을 위한 사용자 도구는 브라우저, 미디어 플레이어, 보조 기술을 들 수 있는데, 이 중에서 저작자가 관심 가져야 할 사용자 도구는 브라우저와 보조 기술이다.

  • 브라우저(Web browser): 웹 콘텐츠를 이용하기 위한 사용자 도구
  • 미디어 플레이어(media player): 오디오, 비디오 등 멀티미디어 콘텐츠를 이용하기 위한 사용자 도구
  • 보조 기술(assistive technology): 장애를 가진 사람의 정보 처리를 돕는 사용자 도구

웹 브라우저

웹 브라우저(Web browser, 이하 ‘브라우저’)를 이해하기 위해서는 ‘browse’의 의미를 정확하게 이해할 필요가 있다. 사전적으로 ‘browse’는 “둘러보다”, “대강 읽다”라는 의미인데, 정보 분야에 사용될 때는 일정한 방법 없이 책, 문헌이나 파일의 내용을 조사해 나가는 것 또는 어떤 특정한 데이터 항목 또는 자신의 관심을 끌 만한 데이터 항목을 찾아내기 위해 데이터베이스나 파일 리스트를 빨리빨리 훑어본다[6]는 의미로 쓰인다. 이런 의미에 ‘웹’(Web)이라는 사용 영역과 ‘도구’(browser)라는 개념이 더해져서 ‘웹 브라우저’라는 용어가 생기게 되었다. 최근에 나온 브라우저는 검색, 즐겨찾기, 인쇄 등 다기능의 인터넷 응용 프로그램이 되었지만, 기본적으로 브라우저의 핵심 기능은 다음과 같다.

  • 네트워크 연결: 서버와 HTML 문서를 주고 받기 위해 HTTP[7]를 지원하는 기능을 갖는다.
  • HTML 문서 처리 : 서버로부터 받은 HTML 문서를 파싱(parsing)[8]하고, 해석한 HTML 문서를 화면에 표현(렌더링, rendering)[9]하는 기능을 갖는다.
  • 자바스크립트 처리 : 자바스크립트로 작성된 프로그램을 해석(interpreting)하고, 해석한 프로그램을 실행시키는 기능을 갖는다.

웹의 기본 본문 그림

과거에는 인터넷 익스플로러와 넷스케이프 내비게이이터가 브라우저 시장을 양분하였다. 오픈소스 프로젝트의 등장, 구글의 성장, 아이폰의 확산, 브라우저 시장 규모의 확대 등으로 인해 다양한 브라우저가 출시되었고, 최근에는 “5대 브라우저”가 시장 패권을 두고 치열한 경쟁을 치르고 있다.

<5대 브라우저 비교표 (2012년 4월 기준)>[10]

브라우저

제공자

출시시기

현재 버전

시장점유율

레이아웃 엔진

자바스크립트 엔진

지원 OS

WebGL

웹의 기본 본문 그림

Internet Explorer

Microsoft

1995

9

53.83%

Trident

Chakra

Windows

미탑재

웹의 기본 본문 그림

Firefox

Mozilla

2004

11

20.55%

Gecko 2.0

JaegerMonkey

Windows, Mac, Linux

탑재

웹의 기본 본문 그림

Chrome

Google

2008

18

18.57%

Webkit

V8

Windows, Mac, Linux

탑재

웹의 기본 본문 그림

Safari

Apple

2003

5

5.07%

Webkit2

Nitro

Windows, Mac

미탑재

웹의 기본 본문 그림

Opera

Opera Software

1996

11

1.62%

Presto

Carakan

Windows, Mac, Linux

미탑재

위 비교표를 통해 세 가지 시사점을 얻을 수 있다. 첫째, 가장 늦게 출시한 구글 크롬의 약진이 돋보인다. 물론 우리나라 시장에 대한 통계는 아니지만, “브라우저=인터넷 익스플로러”로 공식화되어 있는 우리 실정이 얼마나 답답한 상황인지 일깨워 준다. 둘째, 레이아웃 엔진과 자바스크립트 엔진이 서로 다르다. 이것은 마크업과 코드의 해석, 표현, 실행이 서로 다를 수 있음을 의미한다. 문법은 사람에 의해 제정되고 해석되므로 엄격한 원칙과 규칙이 있더라도 사람의 주관이 개입할 수 밖에 없다. 여기에 제품 경쟁의 논리까지 추가되어 브라우저마다 크고 작은 차이가 존재하고 있다. 만약 저작자마저도 잘못된 마크업을 한다면 그 차이는 더욱 커질 수 밖에 없다. 이것이 모두가 표준을 지향해야 하는 이유이기도 하다. 셋째, 파이어폭스와 크롬은 WebGL[11]을 지원하고 있다. 이것은 브라우저가 2D 및 3D 그래픽 콘텐츠를 직접 구현할 수 있도록 돕는다. 운영체제의 역할 비중이 점점 작아지고 있다는 것을 의미한다. 브라우저가 운영체제를 대체해 나간다면 네트워크와 브라우저만으로 대부분의 컴퓨터 작업을 소화해 낼 수 있게 된다.

보조 기술

이미 살펴보았듯이, 보조 기술(assistive technology)은 장애를 가진 사람의 정보 처리를 돕는 사용자 도구다. 장애를 가진 사람들 중에는 인터넷 익스플로러, 파이어폭스와 같은 시각적 방식의 브라우저(visual web browser)를 사용하지 못한다. 이들에게는 장애 상황을 극복하도록 도움을 주는 보조 기술이 있어야만 웹을 이용할 수 있다. 보조 기술은 브라우저와 같은 주 사용자 도구(host user agent)로부터 제공받은 데이터를 이용하는데, 장애 상황에 따라 다음과 같은 보조 기술을 사용하고 있다.

  • 화면 확대기(screen magnifier) : 약시자, 고령자 등 시력이 약한 사람이 사용하는 보조 기술이며, 화면 요소의 크기 확대와 색상 변경을 통해 시각적 가독성을 향상시킨다.

  • 화면 낭독기(screen reader) : 시각 장애나 읽기 장애를 가진 사람이 사용하는 보조 기술이며, 음성출력장치(synthesized speech)나 점자출력기(braille display)를 통해 모든 정보를 텍스트로 변환하여 이용한다.

  • 음성 인식 소프트웨어(voice recognition software) : 지체 장애를 가진 사람이 사용하는 보조 기술이며, 음성 인식을 통해 정보를 처리한다.

  • 대체 키보드 (alternative keyboard) : 지체 장애를 가진 사람이 사용하는 보조 기술이며, 장애 상황을 극복할 수 있도록 고안된 키보드다.

  • 대체 포인팅 기기 (alternative pointing device) : 지체 장애를 가진 사람이 사용하는 보조 기술이며, 장애 상황에 맞게 포인팅과 버튼 동작을 할 수 있도록 고안된 포인팅 기기다.

정확한 통계는 아니지만, 고령자, 장애가 있는 사람, 그리고 일시적으로 장애 상황을 겪고 있는 사람은 전체 사용자 중 10%는 족히 될 것이다. 이들을 고려하지 않는다면 대상 고객의 10%를 잃는 것이다. 잃지 않으려면 HTML 문서를 올바르게 만들어야 하고 장애 상황을 충분히 고려해야 한다. 이런 이유로 웹을 만드는 사람은 웹 표준과 웹 접근성을 중요하게 여겨야 한다.

웹의 기본 본문 그림

웹 표준

웹 표준(Web Standards)은 “월드 와이드 웹 컨소시엄(W3C)[12]에서 제시한 기술 표준을 지키자”라는 기술 가이드(technical guidance)이자 실천 캠페인(practical campaign)이다. 웹의 창시자인 팀 버너스리(Tim Berners-Lee)가 꿈꾸던 웹은 사람들이 함께 일하고 즐기고 교류하기 위해 정보를 서로 나누는 모든 사람의 공간(common space)이었다.

웹은 어느 누구도 상상하지 못할 정도로 폭발적으로 성장해 왔다. 이러한 성장은 정부나 기관이 주도한 것이 아니라 오로지 필요에 의해 이루어졌기 때문에 자유롭고 개방적이었다. 그래서 웹은 더 빨리 확산될 수 있었고 더 다양하게 응용될 수 있었다. 한편으로는 그늘도 있었다. 웹이 상용적으로 발전하면서 웹을 이용하게 위한 필수 도구인 브라우저도 상용적으로 발전하게 되었다. 기술 표준에 충실한 브라우저보다는 기업 표준에 충실한 브라우저가 시장 논리에 의해 시장을 지배하면서 크고 작은 문제들이 생겨나기 시작하였다.

기업 표준에 충실했던 브라우저는 기술 표준에 의거하여 만든 HTML 문서를 올바르게 처리하지 못했고, 하나의 HTML 문서를 브라우저마다 서로 다르게 처리하였다. 이런 문제로 인해 개발자들은 여러 버전의 HTML 문서를 만들어 브라우저 차이를 극복하거나 또는 기술 표준과 상관 없이 시장 점유율이 높은 브라우저만을 위한 HTML 문서를 만들기 시작했다. 전자는 비효율적 개발이었고, 후자는 비표준적 개발이었다. 대부분의 개발은 후자를 따랐다. 이러한 상황이 널리 퍼지면서 웹이 지니고 있는 보편적 가치가 점점 퇴색해 졌고, 보편적 가치를 지녀야 할 웹이 오히려 특정 기기, 특정 운영체제, 특정 브라우저에 종속되어 버리는 문제가 생기게 되었다.

이런 문제를 극복하고자 ‘웹 표준’이 등장하였다. 웹 표준은 말 그대로 “웹을 위한 표준”, 즉 “월드 와이드 웹에서 제시한 기술 표준”을 지키는 것이다. 이 기술 표준은 웹을 효율^효과적으로 만들고 이용할 수 있도록 콘텐츠의 구조^표현^동작을 위한 기술로 구분되어 있다(아래 표 참조). 기술 표준은 보편적 가치를 추구하는 열린 표준(Open Standard)이므로 브라우저 벤더(web browser vendor)[13], 웹 개발자(web developer), 저작자(content provider), 기관 및 기업 등 웹에 참여하는 모든 구성원이 지켜야 하는 표준이다.

<기술 표준>

구조

Structure

표현

Presentation

동작

Behavior

구조적^의미적 언어

Structural and Semantic language

표현 언어

presentation language

오브젝트 모델

Object Models

스크립트 언어

Scripting Language

HTML 4.01

xHTML 1.0

XML 1.0

CSS 1

CSS 2

CSS 3

DOM 1

DOM 2

DOM 3

ECMAScript 262

※ 기술 표준 중 HTML 4.01과 xHTML 1.0을 발전시킨 HTML5(Web Application 1.0)와 xHTML 1.1이 업데이트될 예정이다.

모든 구성원이 기술 표준을 따른다면, 웹은 기기, 운영체제, 브라우저에 얽매이지 않고 표준화된 콘텐츠를 자유롭게 만들고 이용할 수 있는 환경이 될 수 있으며, 이렇게 되면 팀 버너스리가 바라던 “모든 사람의 정보 공간”(Common Information Space)이 실현될 수 있다. 이것이 웹 표준을 추구해야 할 이유다.

웹의 기본 본문 그림

※ 위 그림은 ‘The Web Standards Project’(www.webstandards.org)와 ‘Designing with Web Standards’(Jeffrey Zeldman)의 내용을 토대로 기술되었다.

웹 접근성

웹 접근성(Web Accessibility)은 “모든 사람이 장애 유무와 상관 없이 웹을 이용할 수 있어야 한다”는 개념이자 원칙이다. 적지 않은 사람들이 크고 작은 장애를 지니고 있으며, 아래 표에서 알 수 있듯이 그 장애의 유형도 다양하다. 웹을 이용하려면 사람의 신체적^정신적 기능을 사용해야 하므로 모든 장애는 웹을 이용하는데 있어 직간접적으로 지장을 준다. 장애 정도에 따라 다르겠지만, 어떤 사람은 조금 불편한 정도에 그치지만 어떤 사람은 아예 이용할 수 없는 상황에 처한다. 이러한 상황을 극복하기 위해 장애를 가진 사람은 보조기술을 사용하고 있다.

그런데 보조기술도 어찌할 수 없는 경우가 있다. 바로 웹 접근성이 없는 웹이다. 이것은 휠체어라는 보조기기가 경사로(slope)가 아닌 계단에서는 무용지물인 것과 다름없다. 장애를 가진 사람은 장애를 극복하기 위한 노력을 스스로 해야 하고, 웹을 만드는 사람은 장애 유무와 상관 없이 웹을 이용할 수 있도록 해야 한다. 전자는 보조기술, 후자는 웹 접근성에 관한 것이다. 웹 접근성이 없는 웹은 기술 표준을 따르지 않은 웹을 의미한다. 다시 말해, 기술 표준은 보조기술의 사용 상황까지 이미 고려되어 있기 때문에 기술 표준을 따르면 대부분의 웹 접근성은 저절로 구현된다. 우리나라의 경우, 기술 표준의 준수 수준이 낮아 웹 접근성 문제가 심각했었다. 이를 해소하기 위해 ‘장애인 차별금지 및 권리구제 등에 관한 법률’이 제정되어 2009년부터 단계적으로 의무화가 추진되고 있다.

<장애인의 분류>[14]

대분류

중분류

소분류

세분류

신체적 장애

외부 신체기능의 장애

지체장애

절단장애, 관절장애, 지체기능장애, 변형 등의 장애

뇌병변장애

뇌의 손상으로 인한 복합적인 장애

시각장애

시력장애, 시야결손장애

청각장애

청력장애, 평형기능장애

언어장애

언어장애, 음성장애, 구어장애

안면장애

안면부의 추상, 함몰, 비후 등 변형으로 인한 장애

내부기관의 장애

신장장애

투석치료중이거나 신장을 이식 받은 경우

심장장애

일상생활이 현저히 제한되는 심장기능 이상

간장애

일상생활이 현저히 제한되는 만성^중증의 간기능 이상

호흡기장애

일상생활이 현저히 제한되는 만성․중증의 호흡기기능 이상

장루^요루장애

일상생활이 현저히 제한되는 장루^요루

간질장애

일상생활이 현저히 제한되는 만성^중증의 간질

정신적 장애

발달장애

지적장애

지능지수와 사회성숙지수가 70 이하인 경우

자폐성장애

소아청소년 자폐 등 자폐성 장애

정신장애

정신장애

정신분열병, 분열형정동장애, 양극성정동장애, 반복성우울장애

웹 디자인과 웹 저작

웹 디자인(Web design)은 HTML, CSS, ECMAScript, DOM 등 기술 표준에 의거하여 콘텐츠를 만드는 활동을 말한다. 흔히 웹 디자인이라하면 포토샵(Photoshop)과 같은 그래픽 편집 프로그램으로 시각화하는 작업을 상상한다. 아마 디자인을 단순히 색을 칠하고 형태를 입히는 작업 정도로 여기기 때문일 것이다. 그런데 원래 디자인은 아이디어를 구체화 또는 체계화하는 작업이므로 웹 디자인은 콘텐츠를 어떻게 만들 것인지, 콘텐츠를 어떻게 표현할 것인지, 그리고 콘텐츠를 어떻게 전달할 것인지 등 보다 넓은 영역을 아우르는 개념으로 보는 것이 옳다. 이런 점에서 웹 디자인과 웹 저작(Web authoring)은 같은 의미를 지니고 있다.

그런데 실제 콘텐츠를 만드는 과정은 생각보다 복잡다단하며, 내용과 형식적 측면을 하나의 작업 절차로 진행하는 경우가 드물다. 이런 경우, 웹 저작과 웹 디자인을 아래와 같이 조작적으로 정의할 수 있다. 내용적 측면의 작업인 콘텐츠 작성, 콘텐츠 기획, HTML 작성을 웹 저작 영역, 형식적 측면의 작업인 HTML 작성, 그래픽 요소 작성, CSS 작성은 웹 디자인 영역으로 볼 수 있다. 아래 그림을 보면 HTML 작성은 웹 저작과 웹 디자인의 공통 영역이다. 이것은 HTML 작성이 내용과 형식적 측면을 모두 아우르는 다차원적인 작업이라는 것을 의미한다. 바로 이런 내용을 이 책에서 다루고 있다.

웹의 기본 본문 그림

Ⅰ. 원문과 요구사항

Source Text & Requirements

주석

[1]

(참고) http://www.w3.org/TR/1999/REC-html401-19991224/intro/intro.html

[2]

HTML is the language for describing the structure of Web pages. (출처: W3C)

[3]

다른 문서로 이동할 수 있는 방법

[4]

종료 지점을 별도로 표시할 필요가 없는 요소는 종료 태그를 사용하지 않는다.

[5]

렌더링(rendering)은 일련의 과정을 거쳐 사용할 수 있는 결과물을 만들어내는 것을 말한다. 이 책에서 말하는 렌더링은 브라우저, 스크린 리더 등 사용자 도구(user agent)가 해석한 HTML 문서를 사용자가 이용할 수 있는 형태인 웹 문서로 표현하는 것을 의미한다.

[6]

(출처) 컴퓨터인터넷IT용어대사전

[7]

인터넷에서 웹 서버와 사용자의 인터넷 브라우저 사이에 문서를 전송하기 위해 사용되는 통신 규약을 말한다. (출처: 네이버 백과사전)

[8]

파싱(parsing) : 구문 해석이라는 의미이며, 문법에 맞게 잘 작성된 문서인지 분석^검증하는 과정

[9]

렌더링(rendering) : HTML 문서를 화면에 표시하는 과정

[10]

(출처)

http://www.tomshardware.com/reviews/windows-xp-web-browser-performance,3167-2.html

http://www.cygy.com/tech/2012/04/march-2012-desktop-web-browser-market-share-report/842/

[11]

WebGL : 웹 기반의 그래픽 라이브러리(Web Graphic Library)이며, 자바스크립트 프로그래밍 언어를 통해서 사용할 수 있으며 호환성이 있는 브라우저에서 인터랙티브한 3D 그래픽을 사용할 수 있게 만드는 기술이다. (출처: 위키백과)

[12]

www.w3c.org

[13]

브라우저는 만들고 배포하는 기업

[14]

(출처) 장애인복지법 시행규칙의 장애인의 장애등급표