WWW 홈페이지 제작을 위한 그래픽 디자인

장동훈
서울 서대문구 대현동 11-1
이화여자대학교 미술대학 정보디자인과
E-mail : dhchang@mm.ewha.ac.kr
URL : http://www.nexon.co.kr/Chang/

Abstract:: 우리의 주변에 산재해 있는 수많은 원천 정보들을 자료(data)라고 하고, 이러한 자료들을 객관적인 가치를 갖도록 가공한 것을 정보(information)라고 할 때, 그 정보의 질은 가공하는 방법에 따라서 좌우된다. 같은 정보라도 어떻게 구조화되고 디자인되는 가에 따라 전달력이 달라지며 그 자체가 가지고 있는 내용적 가치가 더해질 수도, 덜해질 수도 있는 것이다. 특히 문자를 주요 정보형태로 하는 다른 인터넷 프로그램과 달리 멀티미디어 정보를 전달하는 WWW의 경우, 시작적 요 소의 효과적인 활용은 홈페이지의 질을 결정하는 중요한 요소가 된다. 본연구에서는 홈페이지 디자인시 고려해야할 시각 적 요소와 조형원리들, 그리고 구성시의 고려사항들을 사례분석을 통해 고찰해 봄으로써 향후 홈페이지 제작에 있어서 디 자인 지침을 마련해 보고자 하였다.
Keywords:: 정보디자인, 시각요소, 조형원리, 심미성

Contents:: 1. 정보디자인(information design); 2. 구성요소; 3. 시각 요소; 4. 조형 원리; 5. 구성 원칙; 참고 자료

1. 정보디자인(information design)

WWW홈페이지를 위한 그래픽디자인이란 Information Oriented Systematic Design, 즉 정보디자인(Information Design)을 말한다. 이것은 시각적인 요소들을 적절하게 사용하여 정보를 조직화 함으로써 정보의 전달성과 효용성을 극대화 시키는 것을 말한다.

우리는 남에게 보이기 위해 홈페이지를 만든다. 우리는 자신이 전하고자 하는 정보가 가능한 한 많은 사람들의 시선을 끌고 전달되어지기를 바란다. 시각적인 요소의 효과적인 활용은 수많은 정보의 홍수 속에서 자신의 홈페이지를 특별한 것으로 차별화 시킴으로써 주의를 집중시키고 깊은 인상을 전달할 수 있다.

2. 구성요소

홈페이지는 일반적으로 책의 표지에 해당하는 첫 페이지(local home page)와 내부페이지들로 나누어 볼 수 있으며 그 구성요소들은 다음과 같다.

2.1 머리말(header)

- 사이트 제목(title of the site): 사이트를 나타내는 이름. 사이트 상징이미지와 함께 쓰이거나 심볼, 로고 등이 사용되어 그 자체가 사이트의 상징이 되기도 한다.

- 사이트 상징 이미지(symbol Image): 사이트의 성격을 나타내는 그래픽이미지로 첫 페이지에 주로 쓰인다. 사이트가 가지고 있는 정보의 성격이나 양에 따라 흥미를 유발하는 일러스트레이션이 쓰이기도 하고, 기능적인 면이 강조되어 내용을 선택할 수 있는 버튼을 가진 띠(banner)의 형태로 표현되기도 한다. 전송 속도를 생각하여 이미지의 크기는 너무 크게 하지 않도록 한다.

- 제목(title of the document): 해당 도큐멘트의 이름.

- 부제목(sub title): 도큐멘트 내용 속의 작은 제목.

- 소제목(section title): 세부항목의 제목.

2.2 내용(body)

- 본문(contents of document): 문자와 이미지, 사운드, 동영상 등의 멀티미디어 정보를 포함할 수 있으며, 하이퍼텍스트 기능을 이용하여 사이트 내부의 다른 곳이나 외부의 다른 사이트와 연결할 수 있다. 이미지에는 사진, 그림, 도표, 지도 등이 포함된다.

- 메뉴 버튼(menu buttons): 큰 항목별로 사이트의 내용을 선택할 수 있는 버튼들. 첫 페이지에서는 보통 사이트 상징이미지와 함께 쓰이며, 내부 페이지들에서는 본문 하단부에 버튼 바(button bar)의 형태로 쓰이기도 한다. 해당 사이트의 첫 페이지로 돌아가는 버튼(link to local home page)이 반드시 포함되도록 한다.

2.3 꼬리말(footer)

- 로고(symbol or logo): 사이트를 제공하는 기관의 심볼이나 로고.

- 제작자 혹은 운영자의 이름, 소속기관 및 연락처(author's name, affiliation & contact information): 운영자의 e-mail 주소를 자동으로 연결되도록 해 놓음으로써 보다 신속하고 수월하게 사용자들의 의견을 받아볼 수 있다.

- 제작일 혹은 최종 수정일(revision date): 웹페이지의 가장 큰 장점중의 하나는 정보를 신속하게 교체할 수 있는 데 있다. 최종 수정일의 표시는 정보가 얼마나 최신의 것인지를 알려주며, 새로운 편집이 있었는가의 여부를 사용자가 쉽게 알아볼 수 있게 도와준다. 날짜 표시는 전세계적으로 오해의 소지 없이 알아볼 수 있도록, 숫자를 줄여쓴 표기보다는 March 22, 1996 과 같이 표기하는 것이 좋다.

- 저작권(copyright): 페이지내용의 불법적인 복제를 막기위해 운영자와 소속기관을 명기한 저작권표시.

3. 시각 요소

3.1 문자(typography)

문자는 가장 기본적인 정보 전달 기호이다. 일반적으로 홈페이지 본문의 서체는 사용자 시스템의 문자 지정에 좌우 되지만 제작자는 자신의 스타일을 강조하기 위하여 특정 서체의 조합을 사용할 수 있다. 문자디자인시의 고려 사항은 다음과 같다.

(1) 판독성(legibility)과 가독성(readability)
판독성은 눈에 잘 띄는 것을 말하는 것으로써 고딕체 계열의 산세리프체가 판독성이 높다. 가독성은 읽기 쉬운 것을 말하는 것으로써 명조체 계열의 세리프체가 가독성이 높다. 가독성은 문자간 간격(letter spacing), 단어간 간격(word spacing), 행간(leading)에 따라서도 달라지는데 문자간 간격, 단어간 간격은 일정해야 하며, 행간보다는 좁을 때에 읽기 편하다. 영문의 경우에는 대,소문자의 혼합 사용이 대문자만의 사용 보다 가독성이 높다.

(2) 조직성
제목, 부제목, 소제목, 본문 등 정보의 깊이(level)에 따라, 또는 하이퍼링크가 되어 있는 단어나 그림의 설명문 등 정보의 종류에 따라 서체의 종류, 크기, 색상, 변형서체(typestyle) 등을 일관되게 적용함으로써 문서에 조직성을 부여할 수 있다. 일반적으로 한 문서 내에서의 서체의 종류와 크기는 3가지 이내로 하는 것이 좋다.

(3) 글줄의 길이
한 줄에 한글의 경우 30자 내외, 영문의 경우 40-60자 내외가 읽기에 편하다.

3.2 아이콘, 심볼, 사인(icon, symbol, sign)

아이콘, 심볼, 사인 등을 이용하여 신속하게 의미를 전달하고 사용자의 행위를 유도할 수 있다. 아이콘 디자인시의 고려사항은 다음과같다.

(1)단순 명료한 형태
아이콘의 형태는 가능한 단순, 명료하게 함으로써 시각적으로 쉽게 인식할 수 있어야 한다.

(2) 실생활에서의 비유(metaphor from the real world)
적절한 비유(metaphor)의 사용은 의미전달을 위한 좋은 방법이다. 사람들이 문서(file)를 저장하고 버리는데 폴더(folder)와 휴지통을 사용하므로 폴더와 휴지통은 문서의 저장과 삭제를 위한 좋은 비유이다. 실생활에서의 관례나 행동양식, 형태 등을 비유적으로 이용한 아이콘은 사용자들의 반응을 쉽게, 그리고 올바로 유도할 수 있다.

(2) 표준형의 사용
금지나 주의를 요하는 경우에 손바닥 모양이나 느낌표를 사용하는 것과 같이, 사인의 경우 가장 잘 알려진 표준형의 사용은 의사전달상의 오해를 줄이고 의미를 명확하게 할 수 있다.

(3) 범세계적인 호환성
심볼이나 아이콘은 보통 그 지역, 그 시대의 문화와 관련되어 있어, 동일한 심볼이라도 다른 의미를 나타낼 수가 있다. 홈페이지는 전세계적으로 보여지는 것이기 때문에 여기에 사용되는 아이콘들도 국제적으로 통용될 수 있는 형태와 의미를 사용해야 한다.

3.3 색상 및 패턴(Color and Texture)

색채는 강력한 커뮤니케이션 도구로써, 적절하게 사용된다면 정보표현의 효율을 높이는데 가장 효과적인 수단 중의 하나이다.

주변과 대비되는 색채를 사용함으로써 특정 정보를 강조할 수 있다.

(2) 색채 계획(color plan)
같은 종류의 정보끼리는 동일한 색상을 사용하는 등 정보의 성격과 내용에 따라 체계적인 색채계획을 적용시킴으로써 홈페이지의 조직성을 강화하고 전달력을 높일 수 있다.

(3) 색채 조화(color cordination)
색의 삼요소-색상(hue), 채도(chroma), 명도(value) 중 명도와 채도(tone)를 갖게 함으로써 다른 색상을 사용하더라도 상호간에 조화를 이룰 수 있다.

(4) 색의 상징성 (color symbolism)
색채의 상징성과 선호도는 문화적 요인에 따라 차이가 있지만 공간과 문화를 초월해 공분모를 갖는 색채의 상징성을 이용하여 전달력을 높일 수 있다.

3.4 레이 아웃(Lay-out)

레이아웃이란 화면내에서의 문자나 그림 등의 배치를 말하는 것으로서, 홈페이지상에서의 레이아웃은 일반 편집디자인에 비해 미세한 조정이 까다로운 편이나 테이블 등을 잘 활용하면 어느정도 원하는 레이아웃을 만들 수 있다.

(1) 비례(proportion)와 균형감(balance)
균형에는 화면상에 그림이나 문자들이 균일하게 위치하는 대칭적인 균형과, 크기의 대비나여백을 이용하여 시선의 흐름을 유도하는 역동적인 균형감이 있다. 전자는 공식적이고 점잖은 느낌을, 후자는 독특하고 흥미로운 인상을 전달한다.

(2) 그리드(grid)
화면상에서 그림이나 문자, 아이콘 등이 유기적으로 정리되어 보이게 하려면 그리드를 활용하는 것이 좋다. 그리드는 문서에 보이지않는 줄들을 연결시켜 기본적인 구조를 형성함으로써 시각요소들의 배열에 규칙과 질서를 부여한다.

4. 조형 원리

4.1 통일과 조화

일관된 아이콘이나 그래픽의 스타일, 일정한 규칙에 의한 문자의 서체나 크기, 그리드 시스템에 의한 조직적인

시각요소의 배치, 계획적인 색채의 사용 등은 홈페이지의 조직성과 시각적인 통일감을 형성함으로써 전달력을 높이는 동시에 독특한 인상을 심어줄 수 있다.

5. 구성 원칙

5.1 조직성

조직성은 사용자에게 명백하고 일관성 있는 개념적 모델을 제공함으로써, 정보간의 이동이나 검색이 원활하게 이루어질 수 있도록 도와준다. 조직성을 강화하기 위해서는 일관성의 원칙이 중요하다. 화면상에서의 조직성이란 무질서와 혼란에 반대되는 개념으로서, 질서정연함을 나타낸다.

5.2 일관성

반복에 의한 학습효과로 심리적 모델의 추측이 가능하도록 하며, 시각적 개성(visual identity)이 창조될 수 있도록 한다.

5.3 심미성

미적 만족감의 제공 및 차별화로 전달력, 변별성, 기억도, 선호도를 증대시킨다.

5.4 경제성

홈페이지 디자인에서의 경제성은 시지각적인 측면과 전송속도를 감안한 시간적인 측면이 있다. 시각요소들의 과다한 사용은 보는 이에게 혼란을 가중시킬 수 있다. 꼭 필요한 요소들만을 효율적으로 사용함으로써 시각전달을 보다 명쾌하게 할 수 있다. 이미지의 크기나 색상의 깊이(color depth=bit)를 줄임으로써 전송시간을 줄일 수 있다.

5.5 예측 가능성

아이콘이나 버튼 이미지의 디자인시 실생활에서 쓰이는 소재, 형태, 사고 방법, 관례, 규정 등을 사용함으로써(metaphor from the real world), 사용자들이 컴퓨터의 반응을 예측할 수 있도록 도와줄 수 있다.

5.6 친근감, 흥미성

친근감 있고 유머러스한 형태나 캐릭터의 사용으로 사용자들의 친밀감을 높일 수 있다. 애니메이션이나 사운드의 사용 등으로 사용자들의 흥미를 배가시키고 전달력을 높일 수 있다.

참고 자료

[1]: Marcus, Aron: Graphic Design for Usable GUIs, SSIGRAPH, (1995)
[2]: Marcus, Aron: Graphic Design for electronic documents and user interfaces, ACM Press, Addison-Wesley, NewYork, (1992)
[3]: Apple Computer, Inc.: Macintosh Human Interface Guidelines, 인포메이션, (1995)
[4]: Horton, W. K.: The icon book-visual symbols for computer systems and documentation, Wiley, NewYork, (1994)
[5]: Yale Center for Advanced Instructional media: Yale C/AIM WWW Manual, WWW.info.med.yale.edu, (1995)
[6]: 웹 코리아, 가자! 웹의 세계로-홈페이지 구성하기, 223-280, 정보시대 (1995)
[7]: 이상선, 소프트웨어의 시각적 상호작용에 관한 연구, 서울대학교 대학원, (1992)
[8]: 프로그램세계 10월호, 177-216, (1995)
[9]: 맥마당 2월호, 211-272, (1996)
[10]: 재 화이트 저, 안상수, 정병규 역, 편집디자인, 안 그라픽스
[11]: Josef Muller-Brockmann 저, 김두식 역, 그리드 시스템,
[12]: 김지현 역저, 타이포 그래픽 커뮤니케이션, 브랜 미술
[13]: 데이비드 라우어 저, 이대일 역, 조형의 원리, 미진사
[14]: Luigina De Grandis저, 민철홍 역, 색채-원리에서 활용까지(Theory and Use of Color), 도서출판 국제