달콤한상상

안녕하세요?
디지탈디자인의 백종수입니다.
이번에 새롭게 웹디자인 방법론 강좌를 진행하게 되었습니다. 오늘 강좌는 앞으로 진행될 강좌에 대한 내용을 미리 살펴보고 왜 웹을 디자인하는 방법을 배워야 하는가에 대한 이야기를 하려고 합니다.

1-1. 왜 웹을 디자인하는 방법을 배워야하나?

국내에는 많은 웹디자이너들이 있습니다. 제가 굳이 언급하지 않아도 이 강좌를 보시는 분이라면 다 아실 것입니다. 중요한 것은 `왜 웹디자이너가 많은가` 라는 것입니다. 여러분들도 이런 생각을 한번쯤 해보셨을 것입니다. `나와 같은 일을 하는 웹디자이너 너무 많구나!` 하는 생각..., 이런 생각을 하다보면 자기 자신도 모르게 웹디자인 일에 무기력해지고 정체성을 느끼게 되기도 합니다. 저도 그런 경우가 있었습니다.

이에 대한 해답은 웹디자인 교육에 있습니다. 대부분의 예비 웹디자이너들은 웹을 디자인하기 위해 학원을 다니고, 그 속에서 다양한 웹디자인 방법을 배웁니다. 포토샵, 일러스트레이터, 플래시, 드림위버, HTML, Javascript 등과 같은 것을 배우죠. 그러나 정작 배워야할 것을 못배운 채 웹디자인을 시작하게 됩니다. 하지만 웹디자이너로써 사회적 생명은 짧고, 회사를 옮기는 경우가 빈번하게 일러나는 것이 현재 웹디자인 업계의 현실입니다.

웹디자인 업계의 현실이 이렇게 된 것은 웹을 디자인하는 방법을 배우기 전에 툴 다루는 것을 먼저 배웠기 때문입니다. 그렇다면 툴을 다루는 것을 배우기 전에 무엇을 배워야 한다는 말인지 의문이 들 것입니다. 그것은 다름아닌 HTML입니다.

제가 HTML라고 해서 놀라지 않으셨는지요? 그 시시한 것을 뭐하러 배우냐고 반문하실 분도 계실 것이고, 나모나 드림위버를 이용하면 척척 다알아서 코딩해주는 데 HTML을 배우면서 시간을 낭비하는 것이 아니냐고 의문을 제기할 수도 있을 것입니다. 그러나 저는 조금 다르게 생각합니다. 지금 HTML은 거의 찬밥 신세나 다름없습니다. 너나할것 없이 보수 좋고, 사회적 생명력이 웹디자인보다 긴 웹 프로그램을 배우느라 정신이 없는 시기이기 때문이죠. 그러나 HTML을 모르고는 웹디자인도 웹 프로그램도 할 수 없다는 것을 알아야합니다. 겉이 번지르하다고 해서 좋은 웹사이트가 아니기 때문이죠.

그렇다면 왜 HTML을 배워야 할까요? 우리가 알고 있는 HTML은 웹페이지를 만든데 가장 기본이 되는 프로그램 언어라고 요약할 수 있습니다. 이 말에 이의를를 제기하는 사람은 없을 것입니다. 왜냐하면 맞는 말이기 때문이죠. HTML이 웹페이지를 만든다는 말은 다시 말해 웹을 디자인한다는 말과 같습니다. 그렇다면 웹을 디자인하는 것을 배운다는 것은 바로 HTML 배우는 것으로 결론지을 수 있을 것입니다. 바로 HTML로 웹페이지를 디자인하는 방법을 배워야 한다는 것입니다.

제가 HTML로 웹을 디자인하는 배워야한다는 것은 나모나 드림위버와 같은 툴을 전혀 사용하지 않고 웹페이지를 만들어야 한다는 것은 아닙니다. 또한 HTML 태그와 속성을 다 외워야 한다는 말도 아닙니다. 그럼 무엇이냐고 성급하게 물어보실 분도 계실 것입니다. 그것은 다름아닌 HTML에 담긴 철학과 원리에 대한 이해를 배워야 한다는 것입니다. 철학과 원리는 포토샵으로 웹페이지의 시안을 만드는 것과 아무런 관련이 없습니다. 또한 플래시 에니메이션을 구현하는 데에도 아무런 도움이 되지 않습니다. 그러면서도 배워야 한다는 것은 지금과 같은 상황을 만들지 말아야 한다는 것과 앞으로 웹디자인에 대한 가치를 높이기 위해서입니다. 그리고 늦은 만큼 제대로 웹을 디자인 하는 방법을 알아야 한다는 것입니다.


1-2. 웹을 디자인 하는 것이 아니라 정보를 디자인하는 것이다.

많은 웹디자이너들이 실수하는 말 중에 하나가 `웹을 디자인한다` 는 말입니다. 이 말의 의미는 `제품을 디자인 한다` 라는 말과 다를게 없습니다. 즉, `웹 = 제품` 이라는 등식을 자연스럽게 만들어 내는 것이죠. 그러나 웹은 제품이 아닙니다. 웹에서 수익이 발생한다 해서 웹 자체가 제품이 될 수는 없는 것입니다. 그것은 HTML과 다른 길을 가는 것입니다. 웹은 정보를 전달하는 하나의 매체로 인식되어야 합니다. 이것이 HTML의 철학입니다. 다시 말하자면, HTML은 정보를 디자인하기 위한 언어라는 것입니다. `정보를 디자인 한다` 는 것은 누구든지 원하는 정보를 쉽게 찾을 수 있도록 만든다는 것입니다.

그렇다면 HTML이라는 것이 어떻게 만들어 졌는지 잠시 살펴볼까요? HTML에서 M은 Markup을 의미합니다. 인쇄 업계에서는 `활자 지정` 이라는 말로 사용됩니다.

디지탈디자인

위 코드는 HTML에서 `디지탈디자인` 이라는 텍스트를 굵은 스타일로 지정하라는 것입니다. 이 코드를 웹브라우저가 읽어 들여 굵은 스타일의 글씨를 만드는 것입니다. 여기서~를 Markup Tag라고 합니다. 그러나 인쇄에서는 원고에 `디지탈디자인` 이라는 글씨에 b 또는 bold라고 표시하면 조판을 하는 사람이 이 원고를 보고 굵은 스타일의 활자로 조판을 하게 됩니다. 따라서 HTML의 원리는 조판의 원리를 그대로 차용한 것이라 할 수 있습니다.

이처럼 HTML에서 사용되는 모든 태그와 속성의 원리는 인쇄의 조판과 거의 흡사하다는 것을 알아야 합니다. 또한 HTML과 함께 사용하는 CSS라는 스크립트가 있습니다. CSS는 HTML이 가지는 조판의 한계를 해결해 주는 역할을 하는 스크립트입니다. 예를 들자면, 줄간격을 설정하거나, 폰트의 크기를 자유자재로 조절하는 기능을 수행합니다. 인쇄가 조판에서 DTP로 발전한 것과 비슷하다고 보면 됩니다.

HTML의 원리가 조판과 유사하다면, HTML의 철학은 무엇일까요? 그것은 다름아닌 누구나 정보를 쉽게 찾는다는 것에 있습니다. 본 인터넷 방법론을 끝까지 수강하다보면 자연히 HTML의 철학에 대해 알게 되겠지만, 미리 말씀을 드리자면 철학의 핵심은 `누구나`에 있습니다. 남자건 여자건, 아이이건 노인이건, 일반인이건 장애인이건 간에 누구나 웹에서 정보를 찾고 얻을 수 있게 하는 것이 HTML의 철학입니다.

예를 들자면, 하이퍼 링크가 설정된 텍스트는 파랑색이고 밑줄이 그어집니다. 파랑색은 색맹이 구별할 수 있는 색상이고 하이퍼링크가 설정되지 않은 파랑색 텍스트와 구별하기 위해 밑줄이 그어집니다. 보통 강조하기 위해 밑줄을 긋는 경우가 있는데, HTML에서는 하이퍼링크가 설정된 텍스트와 구별하기 위해 밑줄 대신 굵은 스타일의 텍스트를 사용합니다. 야후나 네이버와 같은 대형 포탈 사이트에서 하이퍼 링크가 설정된 텍스트가 파랑색의 밑줄이 그어진 기본값을 사용하는 이유가 여기에 있습니다.

1-3. 이 강좌에서 다루려고 하는 것들은....

본 강좌는 웹디자인 방법론입니다. 그러나 디자인 원론에 대해서는 다루지 않습니다. 즉 색상이 어떻고, 이미지의 디자인이 어떻고 하는 이야기는 하지 않는 다는 말입니다. 그런 이야기 말고도 웹을 디자인하기 위한 이야기는 많습니다. 예를 들자면, `야후의 메인 페이지에는 왜 로그인 입력란이 없을까?`, `야후는 왜 GIF 이미지만 사용하는가?`, `플래시 파일이 웹페이지에 미치는 영향`, `메뉴는 왜 왼쪽에 있나? 오른쪽에 있으면 큰일 나는가?` 등과 같은 웹을 디자인하며 한번 쯤 고민해 보았을 그런 문제를 HTML 관점에서 풀어갑니다.

본 웹디자인 방법론에서 다룰 이야기들은 다음과 같습니다.

먼저, 웹을 디자인 하는 방법에 대한 이야기를 다음 강좌부터 진행합니다. 웹에 대한 정확한 이해와 웹을 디자인하는 세가지 방법론에 대해 이야기할 것입니다.
그 다음으로 웹페이지 디자인, HTML 객체 디자인, 사이트 디자인에 대해 세부적으로 다룰 예정입니다.
웹페이지 디자인은 메뉴, 네이블링 시스템, 그리드, 페이지 안전영역, 프레임, 페이지 배경 등에 대해 다룰 것입니다.
HTML 객체 디자인은 HTML에서 사용되는 객체 중에 텍스트, 이미지, 테이블, 멀티미디어 객체에 대해 다룰 것입니다.
마지막으로 사이트 디자인은 웹사이트 진행과정, 디자인 프로세스, 웹 인터페이스, 인포메이션 아키텍쳐, 웹 아이덴티티에 대해 다룰것입니다.

앞서 말씀 드린대로 본 강좌는 웹에서 `왜`로 시작되는 의문에 대한 원리를 이해하는 강좌입니다. 본 강좌를 끝까지 수강하시면 그 원리를 이해하실 수 있고 보다 나은 웹을 디자인하는 초석이 될것입니다. 덧붙이자면 본 강좌는 HTML을 배우는 강좌가 아님을 명확히 밝혀둡니다.


웹디자인 방법론
백종수 | webmaster@ddcom.co.kr