구독자 여러분 안녕하세요. 지난주에는 봄비도 오고 화창한 날씨도 이어지는 등 여러분들 캠퍼스에도 젊은 활기가 가득하겠지요. 저도 웹디자인 수업을 하고 있고 모니터에 반사되는 햇빛이 방해되어 블라인드를 쳤습니다만 즐거운 마음으로 강의에 임하고 있습니다. 디자인은 상대방을 즐겁고 편리하게 해 주는 일이며 그러기 위해서는 우선 만드는 사람의 작업환경과 마음도 역시 즐거워야 함을 잊지 마시고 바쁜 중에도 봄기운과 함께 본 강의를 즐기는 기분으로 임해주길 바랍니다.

웹페이지의 특수성

지난주에는 문자에 대해서 집중적으로 알아보았습니다. 이번 주는 문자와 더불어 그래픽 이미지들이 모니터 스크린이라는 평면 안에서 구성되어질 수 있는 방법에 관해서 알아보고자 합니다. 웹 페이지는 일반적인 종이매체와는 달리 사용자의 브라우저 스타일이나 모니터의 크기 등에 구애를 받게 되며 이는 즉 웹페이지 디자이너의 의도가 온전히 사용자에게 전달 될 수 없는 경우가 생긴다는 것을 의미합니다. 실지로 기존매체 즉 종이나 비디오, CD-ROM등에 비해 웹디자이너는 무척 수동적 입장에 놓이게 되는데 이는 웹 스크립 형식 자체가 이미지보다는 문자를 효율적으로 전송하기 위한 목적에서 시작되었기 때문일 것입니다. 그러므로 일반 편집디자인에서의 타이포그라피 원리를 그대로 적용시키기 힘든 부분이 많이 있습니다. 한가지 예로 HTML 스크립팅을 하면서 기준선을 맞추기 위해 1에서 5 pixel짜리 조그만 이미지 파일들을 만들어 놓고 이를 문자 사이에 끼워가며 자간과 기준선을 맞추어 본적이 있었습니다. 뭔가 시각적 완성도를 높여 보겠다는 의지로 시작한 일이었습니다만 서버에 올린후 다른 플랫폼의 컴퓨터에서 열어보았을 때 그것이 나의 오만이었음을 알게 되었습니다. 폰트와 크기의 변화 때문이었는지 애써 맞춘 문자의 정렬들이 흐트러져 있는 것을 보고 다시 되돌리고 싶은 심정이었습니다. 어쨌든 웹페이지는 브로우져의 크기에 따라 화면을 다시 정렬하기 때문에 디자인적인 한계점을 가집니다. 근래에는 이러한 부분 때문에 이미지를 포함한 모든 문자들을 아예 그래픽 파일로 처리해 버리는 경우도 상당히 많아 졌습니다. 디자인적 완성도가 필요한 사이트의 경우에 더욱 그렇고 이러한 경우에는 대부분의 사용자의 보편적 모니터 크기를 감안하여 좌측 상단을 기준으로 하여 정해진 크기로 페이지 디자인을 하는 경우를 많이 봅니다. 어떠한 방법이 더욱 좋은지는 알 수 없습니다. 웹페이지의 성격에 따라 디자인 방향은 결정되어질 것입니다. 이제 일정영역의 공간안에 문자나 이미지들을 포함하는 시각요소들을 어떻게 배치할 수 있으며 어떤 성격들을 갖게 되는지 차례로 살펴보도록 하겠습니다.

브로우져의 크기가 바뀌면 글자도 재정렬 됩니다.


모든 문자를 그래픽 처리한 정해진 크기의 페이지 조합
(이러한 경우는 브로우져 크기의 영향을 받지 않으므로
디자인적 완성도를 높일 수 있는 잇점이 있으나 로딩속도는 늦어지게 됩니다.)

두 번째 주 강의에서 화면 안에는 여백과 시각요소라는 두 가지 +,-요소가 있음을, 그리고 그들간에 리듬이 있고 조화로울 때 우리는 아름답다라고 생각하며 주목하게 된다는 얘기를 한 적이 있습니다. 그러나 여기 까지는 관찰자가 화면을 보게 되기까지의 과정이고 이제 화면안을 보는 상태에서 어떻게 시선을 유도하여 효율적인 페이지 정보를 습득하고 인터랙션을 유도하느냐 하는 것은 그 다음문제가 됩니다. 본 절에서는 이러한 부분에 관하여 논하고자 합니다.

1. 여백을 바라보는 눈

인간은 사물을 바라볼 때 어느 부분을 먼저 볼까요 ? 인간이 문자를 사용하는 방법을 보면 밑면보다는 윗쪽을 그리고 우측 보다는 좌측을 먼저 보는 경향이 있으며 일반적인 컴퓨터 User Interface 디자인도 이러한 전제를 따르는 것 같습니다. 사실 좌측이 먼저인지, 우측이 먼저인지에 대해서는 논란의 소지가 있습니다. 왜냐면 이는 로마문자의 표기 방향을 참고하여 유추해본 것인데 한자나 한글의 표기방향은 우측에서 좌측이었고 일본인들도 우측에서 좌측으로 책의 페이지를 정렬시키며 왼손잡이의 몇몇 경우는 완전히 글씨는 반대로 쓰기도 하기 때문입니다. 어쨌든 관찰자가 화면을 바라볼 때 가장 먼저 바라보는 곳에 가장 중요하고 대표적인 메시지 (그것이 문자이건 그래픽 이미지이건 간에...)가 있어야 할 것입니다. 그렇다면 당연히 좌측 상단 어딘가가 될 것입니다. 그러나 개성이나 독창성이라는 측면에서 보면 모두다 어떠해야 한다는 법은 있을 수 없습니다. 시선을 끄는 문제는 상대적인 것입니다. 하단에 있는 요소라도 색이 더욱 진하거나 명시도가 높다면 또는 다른 요소에 비하여 면적이 넓다면 당연히 먼저 보일 것이며 이러한 경우의 수는 무척 다양하게 나타납니다. 중요한 것은 정보에는 그 중요성에 있어서 순서가 있고 시각적으로도 이러한 순서가 자연히 감지될 수 있어야 한다는 것입니다.



2. 눈의 동선

눈이 움직일 때는 에너지가 필요합니다. 우리는 동선이 중요하다는 말은 건축설계에 있어서는 자주 이야기합니다. 시각적 이동노선 또한 동선이며 자연스럽고 우회하지 않으면서 필요한 정보로 시선을 유도할 수 있도록 하는 배려가 건축설계와 마찬가지로 중요합니다. 시선은 물 흐르듯이 필요한 정보로 자연스럽게 유도되어야 하고 같은 내용의 정보들은 잘 그룹핑 되어 화면에 필요한 곳에 놓이게 됩니다.
경우에 따라서는 눈의 흐름을 유도하기 위한 보조선이나 바(Bar)등이 사용되기도 합니다. 이들 시각보조 요소는 방향감이나 운동감에 큰 영향을 주며 적절히 사용하여 눈의 흐름을 자연스럽게 유도해 줄 수 있습니다.


점뿐인 상태에서 보여지는 방향성은 선의 요소가 추가되면 새로운 방향성을 가지게 되어
이전의 형상은 보이지 않게 됩니다.
이와같이 보조요소는 시각을 의도적으로 유도하는 강력한 도구가 됩니다.


분할 선이나 영역을 나타내는 시각보조요소는 메시지정보를 목적에 맞게
그룹핑되어 보이도록 하는 역할을 합니다.


3. 그리드시스탬

편집디자인에서 그리드란 각 페이지에 일관된 기준선을 적용하여 페이지가 바뀌면서도 사진 제목, 본문, 주석 등의 요소가 지정된 위치에 놓이게 하여 전체적으로 통일감 있게 그러면서도 쉽게 정보의 위치에 대해 습득할 수 있도록 하기 위한 것입니다. 그리드는 인쇄에서뿐만 아니라 스크린 뒤에 여러 장의 페이지로 구성되어 지는 웹의 경우에도 무척 유용하며, 전체적으로 체계적이고 일관되게 정보를 구성하는 방법이 됩니다.


그리드 시스탬의 예


경우에 따라서는 그리드를 그래픽 기능 요소로 사용하여 그대로 드러내는 경우도 있습니다.

* HTML 사용자 참고사항
HTML로 문서를 편집할 경우에는 우선 가장 쉽게는 좌측정렬, 중앙정렬, 우측정렬중 한가지를 선택하는 것입니다. 해당 HTML 스크립은 ALIGN=left, center, right 인데 이는 간편한 방법이기는 하지만 개성있고 구성력있게 보이도록 하기에는 부족한 면이 있으므로 TABLE로 나누어 편집을 시도하거나 아예 문자가 함께 구성되어 있는 큰 이미지 화일로 만들어 이미지 맵(Map) 스크립을 사용하는 것도 한가지 방법이 될 수 있습니다.

그래픽이미지의 사용

웹페이지 상에서 가장 쉽게 그래픽이미지를 사용하는 방법은 본 강좌의 사진 구성방법처럼 박스형태의 이미지를 행간에 배치하는 것입니다. 그러나 디자인적 완성도를 위해서는 스크립이 해결해 줄 수 있는 한계를 극복하고자 하는 자세가 필요합니다. 특히 Index 메인 화면의 경우는 사용자에게 보여지는 첫인상이므로 일반 인쇄매체에서 볼 수 있는 다양한 편집기법이 사용될 수 있습니다.
웹페이지 상에서 사진, 일러스트레이션(삽화), 등의 그래픽 이미지를 사용하는데 있어 가장 유의할 점은 그 크기와 양입니다. 크거나 많은 그래픽 이미지는 사용자의 로딩(Loading)시간에 관계되므로 신중히 고려해야 할 부분입니다. 또한 시각적 효과를 위해서도 너무 많은 양의 사진은 오히려 주의력을 떨어뜨리는 효과를 가져오기도 합니다. 특히 사진이나 일러스트레이션은 그 안에 또 다른 여백과 요소를 가지고 있는 무척 복잡한 이미지입니다. 베너(Banner)광고가 많은 페이지들은 난잡해 보이고 화면이 올라오는데도 시간이 많이 걸리는 것을 보면 쉽게 이해할 수 있습니다.
사진을 사용할 때 생각해 볼 수 있는 편집기법 중 하나는 사진 안에 있는 부각시키고 싶은 요소를 외곽선으로 잘라낸 효과를 내는 것입니다. 사진의 형태가 사각형인 것은 사진 절단용 작두가 그렇게 자르기 때문에, 혹은 컴퓨너의 모니터가 수평 수직의 픽셀조합으로 되어있기 때문이지 우리의 시각이 그 형태를 원해서가 아닙니다. 사진에는 부각시키고 싶은 이미지가 있기 나름이며 이를 적극적으로 잘라내어 페이지의 여백에 직접 붙여주는 방법도 필요한 이미지를 돋보이게 하는 방법이 됩니다. 또는 윤곽을 흐리게 한다거나 원, 삼각형과 같은 다른 기하학적 외곽선을 사용하는 등 다양한 시도를 해볼 수 도 있습니다.



사진 이미지의 경우 실루엣팅(윤곽선 따내기)이나 소프트 처리등
이미지 외곽선 처리는 사진에 생명력을 부가시켜 주는 역할을 합니다.


여러분 이번주는 웹페이지의 타이포그라피적 해석을 해 보았습니다. 우리나라의 경우 1990년 중반만 해도 웹페이지에 있어서 편집디자인에 대한 논의를 하기 어려울 정도로 HTML은 문자를 네트웍 상에서 전송하기 위한 포맷이었으며 제한된 문자편집 명령어 때문에 전자출판에서 얘기하는 편집디자인의 개념과는 그 연관성을 찾기가 쉽지 않았습니다. 웹페이지의 문자 편집상태가 엉성해 보여도 그러려니 하고 이해하는 경향이었고 별로 디자인적 접근에 대해서는 생각하지 않았던 것 같습니다. 지금도 문자의 위치나 형태를 지정하는 HTML 의 명령어는 별로 달라진 것은 없지만 디자인적 완성도를 표현해내기 위해 다양한 방법을 동원하는 경향을 보이고 있습니다. 이제는 정보를 주고 받는 얼굴에 화장도 하고 멋을 부리는 성숙의 단계가 된 것이지요. 또한 예전보다는 스크립팅도 다양한 웹 에디팅 프로그램의 출현으로 접근이 쉬워지고 앞으로는 더욱 디자인적 가치가 표현되는 쪽으로 웹 커뮤니케이션도 바뀌어 갈 것이라는 걸 지난 5년 동안의 변화를 볼 때 쉽게 예상 할 수 있습니다. 여러분들도 이번 강의를 통해서 프로그램설계자나 기획자 뿐만 아니라 디자이너로서의 접근방법을 연습해 보기 바랍니다. 감사합니다.

끝