A Classification of the Web Design Concepts Elicitation Techniques Based on Design Elements

논문 2011-4-33

디자인 관점에서 본 웹 디자인 콘셉트 도출 기법의 분류

A Classification of the Web Design Concepts Elicitation Techniques Based on Design Elements

정설빈^*, 주복규^**

Seol-Bin Jung, Bok-Gyu Joo

요 약 웹 사이트의 구축과정에서 회사의 이지지를 가장 잘 나타낼 수 있는 디자인 콘셉트를 도출하고 이를 구현하 는 일은 초보 디자이너뿐만 아니라 경험자에게도 쉬운 작업은 아니다

.

,

,

‘

’

.

.

Abstract Elicitation of design concepts is the most important process in web-site design, but it is not an easy task to average designers. In this paper, we have analyzed most of the good web designs and classified them into seven large categories mainly based on design elements. This framework will give a guidance to average designers to easily tackle the elicitation process of web design concepts.

Key Words : Web design, Design Concept, Web 기획

*홍익대학교 컴퓨터정보통신공학과

**홍익대학교 컴퓨터정보통신공학과 교수 접수일자 2011.2.22, 수정일자 2011.7.15 게재확정일자 2011.8.12

Ⅰ. 서 론

인터넷 사용이 일상화된 현대사회에서 웹 사이트는 어느 조직이던 고객과의 원활한 소통을 위한 핵심 수단 이 되었다. 요즘은 거의 모든 회사가 자사 홈페이지를 운 영하고 있으며, 좋은 디자인은 고객과의 효율적인 소통 뿐 만아니라 그 회사의 이미지를 가장 잘 나타내는 얼굴 이 되었다.

불과 몇 년 전까지만 하더라도 텍스트 기반의 정보 전 달에만 치중했던 웹사이트가 대부분을 차지하여 디자인 요소들을 찾아보기 힘들었다. 하지만 인터넷 기술이 급 속도로 발전하고 웹사이트가 주요 커뮤니케이션 수단이 되면서, 디자인은 이제 웹사이트를 단순히 예쁘게 꾸미

기 위한 보조 수단이 아니라, 그 자체가 웹사이트의 평가 대상이 되어버릴 정도로 중요해 졌다.

디자인 콘셉트 도출이란 말로 표현된 회사의 요구 사 항을 이지미로 나타내는 과정이다. 좋은 웹사이트의 디 자인은 좀 더 체계적인 커뮤니케이션을 유도할 수 있어 야 한다. 이를 위해 웹 디자인에서 스타일을 만들어 가는 데 필요한 웹 디자인 콘셉트 도출방법과 그 표현 방식이 이용자들에게 어떻게 전달되어지는지에 관한 디자인적 관점에서 분석이 필요하다. 하지만 이는 디자인에 관한 이론과 실제를 익힌 디자이너에게도 쉽게 접근하기 쉬운 일은 아니다. 우리는 국내의 많은 우수 웹 사이트들을 조 사하고 이들의 디자인 콘셉트 도출 기법을 체계적으로 정리하여 웹 디자이너에게 보여줌으로써 이들이 좀 더 쉬운 방법으로 접근하게 하려고 한다.

새로 오픈되는 웹사이트들을 모아 보여주며 웹사이트

심사, 평가방법, 수상작, 후보작 수록하는 웹사이트들

에는 수많은 디자인 사이트들이 소개된다. 이 연구에서 우리는, 이들 우수 웹 사이트의 디자인 콘셉트 도출 방법 과 웹사이트 디자인에 어떻게 표현하는지를 분석하고, 오직 디자인 요소만을 기준으로 기법을 분류하였다. 이 는 보통 수준의 디자이너에게 여러 가지 기법들을 정리 하여 보여줌으로서 창의적이고 성공적인 기업 웹사이트 개발을 가능하게 할 것이다.

이 논문의 구성은 다음과 같다. 2장에서는 웹 기획 구 축과정을 간단히 요약하였다. 3장에서는 관련된 연구 결 과에 대해 소개한다. 4장에는 국내의 우수 사이트의 콘셉 트 도출 과정을 크게 7가지의 디자인 요소별로 분류하고 세부 사항을 정리 설명하였다. 그리고 5장은 결론을 맺는다.

Ⅱ. 웹 기획 구축과정

웹 디자인은 사이트를 디자인하고 구축하는 일이다.

사이트는 콘텐츠의 효과적인 정보 전달을 위해 그래픽, 텍스트 또는 다양한 멀티미디어 요소들을 활용하여 구성 된다. 또한 HTML, CSS, Javascript 등과 같은 클라이언 트 스크립트 언어와 결합하여 최종 결과물로 완성된다.

여기에서는 웹 사이트를 개발하는데 기본적으로 거쳐야 할 과정을 간단히 정리하였다

.

(1) 요구분석 : 요구 분석은 구축하고자 하는 사이트의 목적과 방향을 잡기 위한 과정으로, 고객의 의도를 파악하는 것이다.

(2) 벤치마킹 : 디자인에서 동일한 성격의 웹사이트나 유사 사이트를 대상으로 성공 사례 및 실패 사례 를 조사 분석하여 성공적인 디자인을 이끌어 내 는 일련의 활동이다. 시행착오를 최소화하고 소비 자의 요구를 쉽게 파악할 수 있는 가장 효율적인 방법이다.

(3) 기획 : 요구 분석서와 벤치마킹 한 것을 기초로 사 이트를 설계하고, 대략적인 구상이 완료되면 디자 이너나 개발자가 작업을 진행할 수 있도록 스토리 보드를 만든다.

(4) 디자인 : 디자인 시안 작업은 기획 단계에서 정해 진 사이트 맵과 스토리보드를 기초로 하여 두 세 개 정도의 시안을 만드는데, 모니터 상에서 즉흥적 인 디자인 작업은 피하고 아이디어 스케치 과정을

통해 접근하는 것이 중요하다. 이때 레이아웃에서 부터 서체 사용에 대한 지침을 지정해 놓아야만 일관된 디자인 스타일을 유지하여 작업의 효율을 높일 수 있다.

(5) 코딩 : 기획 단계에서 정의된 디렉터리 구조 및 디 자인된 페이지를 웹상에서 서비스할 수 있는 HTML 형태의 문서로 변환하는 과정이다. HTML 작업과 함께 스타일 시트 지정을 위한 CSS작성 및 자바스크립트 제작이 함께 이루어진다.

(6) 개발 : 인터넷 문화가 대중화되면서 웹사이트를 통 해 실시간으로 유저와 쌍방향 교신을 할 수 있게 되었다. 이러한 기능을 구현하는 단계가 개발 단계 이며 게시판이나, 온라인 쇼핑, 인터넷뱅킹 같은 기능을 구현하기 위해 데이터베이스를 설계하고 HTML문서를 프로그래밍 화 한다.

(7) 테스트 및 디버깅 : 개발이 종료된 시점에서 기획 자, 디자이너, 개발자가 함께 테스트 과정을 통해 각 분야별로 오류 사항이나 수정사항을 최종적으 로 점검하는 단계이다.

Ⅲ. 관련연구

이 장에서는 웹 사이트의 디자인 콘셉트 도출 방법에 관한 연구와 디자인 콘셉트 도출 기법들을 분류한 기존 의 연구 결과들을 살펴보았다. 그리고 우리가 제안한 분 류와 비교 하였다.

우선 웹 사이트의 디자인 기법에 관한 주요 연구로는, 웹 사이트의 특성에 따라 요구되는 감성을 파악하고 이 를 디자인에 반영하는 기법 연구

, 배색과 레이아웃에 의한 감성효과를 알아보는 연구

, 디자인 전략 유형이 기업성과와 어떤 관계를 갖는 지에 관한 연구

, 등이 있 다. 그리고 웹 사이트의 유형을 분류한 것으로는 사용자 가 웹 사이트에서 제공받기를 원하는 서비스를 기준으로 분류하여 웹 사이트의 표본을 추출하고 정보설계와 메뉴 의 표현방법, 레이아웃을 분석한 연구

가 있다.

굿디자인웹

에는 우리나라의 대표적인 웹 사이트를 소개하기 위한 곳으로 많은 디자인들이 분류되어 있다.

굿디자인웹은 2005년 개설되어 시간과 노력이 많이 투자

된 대기업위주의 사이트들을 소개한다. 이곳에서는 최고

의 기술을 표현한 높은 수준의 웹사이트들을 한눈에 볼

수 있다. 분류는 종류로는 로고를 이용한 디자인, 독특한 레이아웃, 아날로그 감성 접근, 그리드를 활용한 디자인, 인물을 모델로 한 사이트, 제품의 형태를 이용, 실험적인 디자인, 가상공간을 이용한 디자인으로 나누어져 있다.

그러나 원칙 없이 좋은 사이트를 모아서 분류하다보니 체계적이지 않고 복잡하다.

웹 스타일 북

은 웹사이트에 대한 설명을 말로써 풀 이해주어 초보 디자이너가 지식습득을 할 수 있도록 짜 여져 있다. 소규모 디자인 콘셉트를 분류하고 각 분류에 따라 트렌드, 기법의 예들을 풍부히 제시하였고 이를 기 획하고 제작할 수 있도록 디자인 소스 제작 과정에서부 터 완성까지를 상세히 다루어 놓았다. 분류로는 로고를 활용한 디자인 전개, 콘텐츠에 따른 디자인 콘셉트 도출, 브랜드로 만드는 가상의 공간, 일상에서의 발견, 타이포 를 활용한 디자인 전개, 고정된 틀을 깨는 디자인 전개로 나누어 놓았다.

웹디자인 매거진 아이웹디넷

에서는 ‘아날로그’(현실 세계에서 볼 수 있는 물건 소품)이라는 주제로 생활소품 에서 디자인 콘셉트 도출의 여러 가지 예를 자세히 보여 주고 있다.

웹 디자인에서 활용되는 콘셉트 도출방법은 매우 많 다. 하지만 위에서 살펴본 바와 같이 [1]과 [8]에서 분류 한 기준은 디자인 요소에 집중하지 않았고, 원칙도 디자 인과 관련 없이, 다른 요소들도 포함해서 분류하고 있어 산만한 느낌이다. [9]에서는 한가지의 주제(‘아날로그’)를 원칙으로 정하고 분류해 둔 면에서는 우리의 방법과 비 슷하다. 한편 우리는 디자인 요소를 중심으로 분류하였다.

우리는 이 연구에서 국내의 대표적인 사이트와 수상 작 등 현존하는 1800개의 사이트를 조사하여, ‘디자인 요 소’라는 원칙에 따라 전체를 분류하였다. 이에 따라 대부 분의 우수한 디자인 콘셉트는 7가지의 대분류로 수용하 였고 필요에 따라 상세 분류를 두었다. 적절한 분류 개수 와 ‘디자인 요소’라는 한 가지 원칙에 따라 분류되어 있 어, 전문가 뿐만 아니라 입문자도 실제 디자인을 시작할 때 찾아보기도 쉽고 각종 디자인 방법에 익숙해지는 데 매우 도움이 될 것이다.

Ⅳ. 디자인 콘셉트 도출 기법의 분류

웹 디자인을 위한 콘셉트 확정은 웹 기획 구축과정 중

벤치마킹, 기획, 디자인의 세 단계에 걸치는 일련의 과정 이다. 벤치마킹을 한 후 기획할 때에 우리의 연구결과를 보면 어느 정도의 틀을 두어 이해하기 쉽게 정리하여 보 았다.

다양한 종류의 웹사이트의 디자인 표현방법을 조사 분석하고 이를 쉽게 알아보고 이해할 수 있도록 크게 7가 지로 분류하였다. 이는 (1) 로고를 활용한 전개, (2) 콘텐 츠에 따른 전개, (3) 가상공간을 이용한 전개, (4) 일상에 서 발견하는 전개, (5) 타이포를 활용한 전개, (6) 고정된 틀을 깨는 전개, (7) 인물을 모델로 한 전개가 그것이다.

1. 로고를 활용한 디자인 콘셉트 도출

첫 번째 분류에 속하는 것부터 차례로 살펴보자. 그림 1을 보면 왼쪽상단위에 회사의 로고가 들어있다. 이처럼 회사 로고를 이용하여 메인화면을 구성하여 디자인하면 회사의 대표되는 로고를 더 쉽게 인식하는 효과를 볼 수 있다.

그림 1. http://www.amcotown.co.kr Fig. 1. http://www.amcotown.co.kr

2. 콘텐츠에 따른 디자인 콘셉트 도출

가. 한국적이고 동양적인 디자인 콘셉트

서예(Calligraphy), 붓 터치, 한국의 아름다운 정취와

판화기법 등을 이용해 만든다. 그림 2를 보면 화장품의

콘셉트를 동양적인 느낌으로 잡고 붓 터치와 서예 기법

을 이용하여 느낌을 살린 것을 볼 수 있다.

그림 2. http://www.lgcare.com/cleanUp/chungyunjin Fig. 2. http://www.lgcare.com/cleanUp/chungyunjin

나. 젊고 재미있는 디자인 콘셉트

노트에 낙서하는 듯한, 형식에 구애 받지 않고 낙서하 는 듯한, 재미있는 효과로 집중시키는 디자인. 그림 3을 보면 요플레는 먹었을 때 산뜻한 느낌이 드는 것을 보여 주기 위해 20대 여성을 광고 모델로 쓰며 쉽게 다가갈 수 있도록 재미있는 효과를 더해 디자인한 것을 볼 수 있다.

그림 3. http://www.bulgaris.co.kr Fig. 3. http://www.bulgaris.co.kr

그림 4. http://www.lotteins.co.kr Fig. 4. http://www.lotteins.co.kr

다. 인간적이고 감성적인 디자인 콘셉트

사람을 중시하는 기업 이미지를 표현, 인간미 넘치는

경영인의 모습을 담아낸다. 그림 4를 보면 보험회사라고 한다면 사람을 중시하므로 믿음과 신뢰를 줄 수 있는 느 낌을 주어야 한다. 그래서 가족을 찍은 이미지와 잔잔한 느낌을 살려 디자인을 제작한 것을 볼 수 있다.

라. 빛으로 첨단적인 디자인 콘셉트

빛 운동감을 이용한 분위기 연출. 그림 5를 보면 자동 차는 역동적이고 웅장한 느낌을 주기 위해서 검은 배경 에 빛과 구름 등을 이용해서 첨단적인 느낌을 살린 것을 볼 수 있다.

그림 5. http://www.chryslergroup.co.kr/webzine/

event_200810/main.php

Fig. 5. http://www.chryslergroup.co.kr/webzine/

event_200810/main.php

마. 고급스럽고 중후한 디자인 콘셉트

색을 이용해 중후한 느낌과 할로겐 조명등을 이용해 고급스러운 느낌을 표현한다. 그림 6을 보면 그림 2와 같 은 화장품이다. 하지만 그림 6의 화장품 느낌은 고급스러 우며 중후한 느낌이 든다. 그래서 색과 조명등을 이용하 여 느낌을 살린 것을 볼 수 있다.

그림 6. http://www.whoo.co.kr Fig. 6. http://www.whoo.co.kr

3. 가상공간을 이용한 콘셉트 도출

그림 7을 보면 교복제품은 학생들이 입는 옷으로 중.

고등학교 학생을 대상으로 만들어야 하니 어린학생들에 게 재미있는 회사라는 이미지를 갖도록 가상공간을 이용 해 사이트를 구성 제작한 것을 볼 수 있다.

그림 7. http://www.skoolooks.com Fig. 7. http://www.skoolooks.com

4. 일상에서의 발견을 통한 콘셉트 도출

가. 다이어리를 활용한 디자인 콘셉트

생활용품을 디자인 요소로 활용하여 사용자에게 익숙 한 인터페이스 환경을 제공하고 친밀도를 높일 수 있다.

그림 8을 보면 대중적으로 유명한 싸이월드의 미니홈피 의 한 장면이다. 미니홈피란 자기 자신의 프로필과 일기 하루일상 이미지들을 보여주는 곳으로 웹상의 다이어리 라고 볼 수 있다. 그래서 친밀도를 높이기 위해 다이어리 형식으로 만들었다.

그림 8. http://www.cyworld.com Fig. 8. http://www.cyworld.com

나. 책을 활용한 디자인 콘셉트

다이어리와 마찬가지로 생활용품을 디자인 요소로 활 용한 대표적인 예이다. 그림 9를 보면 그림 8과 같이 책 을 웹상에 만들어 놓아 진짜 책을 보는듯한 친밀도를 높 이기 위해 책 형식으로 만든 것을 볼 수 있다.

그림 9. http://www.orionworld.com/grup Fig. 9. http://www.orionworld.com/grup

다. 그 밖의 다양한 소재를 활용한 디자인 신문, 운동장 등의 소재를 이용한 디자인이다. 그림 10 을 보면 스포츠웨어 전문회사로 스포츠하면 연관성 있는 운동장, 잔디밭을 이용해 디자인 한 것을 볼 수 있다.

그림 10. http://www.nike.com/nikeos/p/nike/ko_KR Fig. 10. http://www.nike.com/nikeos/p/nike/ko_KR

5. 타이포를 활용한 콘셉트 도출

그림 11은 게임회사의 하나로 회사이름의 N자를 따와

3D로 만들어 효과를 주었다. 보통 한 글자라면 회사이름

의 첫 글자를 따온다.

그림 11. http://www.ntreev.com Fig. 11. http://www.ntreev.com

6. 고정된 틀을 깨는 콘셉트 도출

가. 사각형의 틀을 깨는 다양한 레이아웃 디자인 사선, 원, 그밖에 독특한 모양의 레이아웃. 그림 12를 보면 그림 11과 같은 게임회사의 하나다. 하지만 이 회사 는 기존에 있던 웹사이트 형식을 탈피하고 사선이라는 새로운 시도를 하여 만든 것을 볼 수 있다.

그림 12. http://event.mgame.com/mgame10th Fig. 12. http://event.mgame.com/mgame10th

나. 아트를 활용한 디자인

그림 13을 보면 그림 12와 같이 기존에 있던 웹사이트 형식을 탈피하고 아트라는 새로운 시도를 하여 만든 것 을 볼 수 있다.

그림 13. http://www.anucall.com/event/secretcolor/

event_main.jsp

Fig. 13. http://www.anucall.com/event/secretcolor/

event_main.jsp

7. 인물을 모델로 한 콘셉트 도출

그림 14를 보면 20대층을 겨냥한 목욕용품이다. 이 회 사의 느낌은 20대의 부드러움과 자연친화적인 제품의 느 낌을 잘 살리기 위해 광고 모델로 쓰는 인물을 배치하고 배경에는 자연의 느낌이 들도록 디자인하여 만든 것을 볼 수 있다.

그림 14. http://www.happybath.co.kr Fig. 14. http://www.happybath.co.kr

Ⅴ. 결론

우리는 현존하는 국내의 수많은 우수한 웹 사이트들

을 조사 분석하고 이들을 디자인적인 요소만을 기준으로

하여 그 디자인 콘셉트 도출 기법을 크게 7가지로 분류하

여 정리하였다. 또한 각 각의 분류에서 세부적인 요소로

다시 분류하여 보여줌으로써, 웹사이트를 만드는데 아이

저자 소개

정 설 빈(준회원)

∙2011년 2월 홍익대학교 컴퓨터정보통 신공학과(학사)

<주관심분야 : 멀티미디어 디자인, 인터 페이스 디자인>

주 복 규(종신회원)

∙University of Maryland, Dept. of Computer Science, 공학박사

∙1990년 ~ 1998년 삼성전자 중앙연구소 수석연구원

∙1998년 ~ 2000년 (주)동양시스템즈 연 구소장

∙2001년 ~ 현재 홍익대학교 컴퓨터정보 통신공학과 교수

<주관심분야 : 소프트웨어 재사용, 인터넷보안, 모바일 네트워 크>

덴티티 확보와 차후 웹사이트 리뉴얼에 반영할 수 있는 디자인 가이드라인을 제시하였다.

우리가 제시한 분류와 그 가이드라인은, 경험이 많지 않는 비숙련 웹 사이트 기획자와 디자이너와 기획자들이 좀 더 쉬운 방법으로 콘셉트 도출 과정에 접근할 수 있는 한 지침이 될 것이다.

향후에는 또 다른 창의적인 디자인이 탄생할 수 있고 고정된 틀을 깨는 전개에 속하는 디자인도 트렌드를 형 성하면 또한 새로운 전개 방법이 될 수 있다. 따라서 이 러한 새롭게 발생하는 사이트의 콘셉트 표현방법을 분석 하여 현재 분류된 기법을 더 강화하거나 새로운 분류를 만들어서 개선해 나갈 필요가 있을 것이다.

참 고 문 헌

[1] 굿 디자인 웹, http://www.gdweb.co.kr/

[2] 디비 컷, http://www.dbcut.com/

[3] 오종혁, 웹 기획 & 웹 프로젝트 매니지먼트, 영진 닷컴, 2004

[4] 감성평가를 이용한 웹 디자인 요소의 활용방안, 경 성대학교 디지털디자인 전문대학원 논문, 2004 [5] 웹 디자인에서 배색과 레이아웃에 대한 감성효과,

연세대학교 인지과학연구소 논문, 2004

[6] 디자인 전략 유형별 성과 비교, 한국디자인경영연 구원 논문, 2010

[7] 웹사이트의 유형 분류에 따른 정보 설계 및 메뉴디 자인의 특성 연구, 연세대학교 생활대자인과 논문,

2003

[8] 최미선, 디자인의 폭을 넓혀주는 웹스타일 북, 안 그라픽스, 2009

[9] http://www.iwebdy.net/