1. 타이틀의 비쥬얼화 시키기
 
(타이포를 비쥬얼화 시킴으로써 자연스러움 연출)

타이포텍스트의 개념에서 벗어나 하나의 디자인 요소로 생각했을 때, 타이포그라피에 접근 할 수 있는 출발점이 될 수 있을 것이다.

비전공자들이 겪는 타이포 그라피의 막연한 두려움에서 벗어나 일상생활에서 발견할 수 있는 장면들을 웹사이트 디자인에 잘 접목한다면 누구나 쉽게 멋진 타이포그라피를 연출할 수 있을 것이다.


아래 그림들은 타이포가 담긴 비쥬얼들을 하나의 비쥬얼존으로 구성함으로써 가장 자연스러운 비쥬얼존을 형성하고 있는 예이다. 굳이 새롭게 타이틀을 만들 필요도 없는 이유가,이한장의 그림으로 사이트의 목적과 디자인이 완성 되었다. 하지만 이런 분위기를 연출하기 위해 타이포와 이미지를 합성하는 경우 인위적으로 꾸며진 느낌을 줄이는데 노력 해야 할것이다.


3D 애니메이션에서의 작품성은 실사처럼 구연된 자연스러움에 있듯이. 마찬가지로 타이틀을 비쥬얼과 한장의 그림 처럼 담아내는 것 역시 얼마만큼 자연스럽게 연출되었는가 하는 것이 중요하다.


 
아래 그림들은 사이트명을 직접 그림으로 만들어 보다 자연스러운 효과를 이끌어 내고 있는 그림들이다.


 
 
2. 메인 타이틀에 강약을 주자
(이포의 비쥬얼을 통한 자연스러움 연출 기법)
 
디자이너의 실력을 알 수 있는 잣대는 크게 타이포 처리 능력과 색상 사용에 있다. 이는 그만큼
사이트 디자인에 있어 주가 되는 요소이고, 컨셉을 설정하는 핵심 요소이기 때문이다.
타이포는 그 모양과 표현 방법에 따라 사이트가 가지는 성격을 반영하게 된다. 가령 명조체
위주로 사이트가 이루어진 경우, 전통적인 색채가 강한 사이트임을 쉽게 알 수 있을 뿐더러,
화련한 동적 요소보다는 안정된 디자인을 추구하는 사이트임을 눈치 챌 수 있을 것이다.

그러나 디자인을 시작한지 얼마 되지 않는 디자이너의 경우는 타이포의 형태가 가지는 의미와
사이트의 컨셉 자체를 잘 연결 시키지 못하는 단점이 있다.
그리고 타이포를 단순히 정보전달을 위한 매게체인 텍스트로 끝내는 경우가 많다.
타이포의 변화를 통해 얼마나 사이트의 디자인이 고급스럽게 변화할 수 있는지, 그리고
얼마나 많은 디자인적 재미를 줄 수 있는지 알아보고 이것을 자신의 것으로 습득해 갈 필요가
있다.

배경이 정적인 비쥬얼이거나, 색상이 단조로울때 타이포에 강한 변화를 주면 동적인 비쥬얼로 전환된다.

아래 사이트들의 그림을 보면 배경이 되는 그래픽들이 정적인 비쥬얼이거나 색상이 한톤인
그림들이다. 그러나 위에 새겨진 타이포는 단순히 사이트의 목적을 알리는 텍스트라기 보다는
그림과 함께 어우러진 타이포 그래픽적인 요소로서의 경향이 매우 강하다.
단순히 나열식의 타이포로만 쓰였다만 별다는 재미가 없었겠지만 타이포의 굵기, 크기 변화를
통해 심심함을 줄이고 강한 역동성을 주고 있다.

 
자 그럼 위의 그림들 처럼 타이포의 변화를 통해 어떤 디자인적 변화가 있는지를 직접 비교해
보도록 하자. 먼저 위의 효과를 얻기 위해서는 색상변화가 심한 그래픽을 사용하는 것보다는
타이포의 느낌을 강하게 전달 할 수 있도록 하기 위해 색상차가 적고 글자와의 대비를 뚜렷하게
할 수 있는 이미지를 준비하는 것이 효과적이다.
만약 이미지의 색상이 너무 밝거나 색상수가 많은 경우 타이틀과 함께 썪일때 시선의 혼동만
줄 위험이 매우 크다. 이도 실험을 통해 한번 연구해 보도록 하자..

1. 타이틀이 두 문장으로 이루어져 있는 경우 메인 타이틀을 강조하고 서브 타이틀의 크기를 줄이고 밝기를 약하게 했을때 보다 안정스런 배열을 느낄 수 있다.


 
2. 다음으로 강조된 텍스트에 단어마다 크기와 농도변화를 주면 보다 동적인 느낌과 재미를 수 있을 것이다.


글자에 강약을 주어 강한 타이포를 이끌어 내고자 하는 경우 반드시 주의해야 하는 점은 다음과 같다.
 
1.글자의 색상과 배경의 색상이 강한 대비를 이끌어 낼 수 있어야만 타이틀에 힘이 실릴 수 있다.
2.글자의 자간을 너무 벌리지 말아야 한다. 자간을 너무 벌리게 되면 집중되는 힘이 약해지고
  시선이 분산되어 강한 비쥬얼을 느낄 수 없게 된다.
3.가장 두껍게 처리하는 문자는 가능한 고딕계열이 좋을 수 있다. 이는 고딕계열이 명조계열
  보다는 무게감이 깊게 느껴지기 때문이다.
 
색상변화를 통해 타이틀의 운동감과 변화의 재미를 이끌어 내보자
아래 그림들에서 나타나는 특징들은 같은 크기, 서체모양으로 이루어진 문장을 단어별로
색상값을 틀리게 하여 변화를 준 점이다. 이는 가장 주가 되는 단어에 강한 칼라를 사용함
으로써 사용자로 하여금 사이트의 목적을 쉽게 인지할 수 있도혹 하면서도 타이포의
변화를 통해 재미를 주고 있다.
 

 
 
3. 이미지의 방향과 타이틀을 일치시키면 공간감이 생긴다
(타이포의 방향 및 위치설정에 관해)
 
비쥬얼과 타이포가 감각적으로 결합될 수 있는 방법중의 하나가 바로 이미지의 방향에 따라
타이포를 배치시키는 방법이다. 아래 그림중 상단 2개의 그림은 전체 이미지의 각도에 따라
타이포가 배치 된 예로서 주로 적은 크기의 타이포를 배치 시킬 때 많이 쓰는 방법이다.
타이포의 크기가 크게 되면 이미지의 방향과 타이포의 방향이 통일됨으로써 가지는
아기자기한 구성에 방해가 될 수 있기 때문이다.
또한 글자의 크게되면 그림에서 가지는 공간감이 다 사라지기 때문에 이미지 전체의 방향과
타이포를 일치 시킬 때는 비쥬얼의 공간을 최대한 살리면서 배치하는 것이 좋은 방법이다.

 
위 그림에서 하단의 2개의 그림은 비쥬얼 존의 주체가 되는 모델들의 시선에 맞춘 형태로서
상단의 그림이 평면적인 공간감을 형성하고 있다면 하단의 그림들은 시선의 흐름에 따라
타이포가 형성되기 때문에 3D적인 공간 이미지를 연출할 수 있다.
단순 나열식의 배치기 아닌 그림의 방향과 일치 시킨 타이포는 보다 비쥬얼적인 화면
구성과 함께 공간감을 형성하는 입체적인 디자인의 형태를 얻기에 좋다.
가령 디지털 제품관련 사이트를 만든다면 제품의 특징을 그대로 살리면서 위의 방식처럼
타이포를 배치한다면 보다 사실적인 느낌을 연출 할 수 있을것이다.
 
 
4. 사이트 구성요소를 멀리서 찾지말자
(기업, 제품의 특징을 반영한 디자인 )
 
브랜드 관련 웹사이트 제작에서 컨셉을 잡아 나갈때 가장 효과적인 방법은 무엇일까? 바로
브랜드의 특징을 그대로 살리면서 브랜드의 가치를 향상 시키는 방법이 아닐까 생각된다.
아래 사이트들은 제품이 가지고 있는 형태를 이용하여 디자인에 반영함으로써 친근감과
함께 재미적인 요소를 잘 살려내고 있는 사례들이라 할 수 있다.
일상적인 틀에 박혀 디자인을 하다보면 가로, 세로 레이아웃을 적용할지 아니면 어떤식의
레이아웃을 적용할지 많은 디자이너들이 힘들어 하는 부분이다.
틀에 맞힌 디자인을 생각하기 보다는 제품이 가지고 있는 요소들을 어떻게 사이트에 반영
할지를 먼저 생각하면 이외로 디자인 컨셉은 쉽게 잡힐 수 있다.

 
 
5. 로고를 통한 디자인 컨셉 도출하기 1
(CI,BI를 통해 레이아웃에 도입한 사례 분석과 응용)
 
로고를 통해 레이아웃 도출하기
차별화된 레이아웃과 기업, 제품의 브랜드 아이덴티티와 웹 아이덴티티를 통일 시키는데
있어서 가장 쉽게 접근 할 수 있는 방법은 바로 로고에서 레이아웃을 도출하는 방법일 것이다.
고는 기업이나 제품이 가지고 있는 여러가지 성격들을 함축하고 있기 때문에 사이트 제작시
이를 반영하여 디자인 한다면 클라이언트에게 쉽게 어필할 수 있는 장점이 있다.
웹사이트 디자인이라는 것이 단지 이쁜 것을 보여주는 디자인 아니라 사이트가 가지고 있는
목적성을 얼마나 잘 뒷받침 하느냐에 따라 그 성패가 좌지우지 된다고 할 수 있다.
이번 강좌에서는 로고를 통해 어떠한 식으로 레이아웃을 도출하였는지 사례들을 살펴보고
이를 적용하는 방식들을 알아 보도록 하자
 
"U"의 부드러운 곡선을 이용한 유니레버 홈페이지
다국적 생활용품.식품기업 유니레버의 CI는 "활력(vitality)"이라는 기업 비전을 보여주기
위해 태양,하트,비둘기 등 25개의 다른 기호들로 이뤄졌다.
소비자들의 삶에 활력과 생명력을 불어넣고 지역사회와 환경에 대해서도 책임있게
행동하겠다는 기업의지의 표현이 담겨져 있다.
이를 웹사이트에 반영하기 위해 기업의 첫글자가 되는 "U"의 반쪽 부분을 비쥬얼 존의
외곽 형태로 구성하고 그 안에 제품들 플래쉬 형태로 번갈아 가며 보여줌으로써 유니레버
제품 이미지 제고를 해주고 있으며 "U"자 형의 비쥬얼존 외곽라인은 로고 색상인 BULUE를
3단계의 면으로 마무리 함으로써 입체적인 느낌과 기업 아이덴티티를 효과적으로 표현하고 있다.

 
신세대를 상징하는 티모드의 "T"로 표현된 레이아웃
티모드(Tmode)의 T는 TRY,TOP,TREND,TALENT 등의 의미를함축하며, 넘치는 끼와 재능,
세련된 감각, 빠르게변화하는 유행과 개성을 추구하는 신세대를 상징하며, Mode 는 특정한
상태를 의미하는 말로, 쿨한 티모드의 T를 유지하려는 의지를 상징이다.
브랜드가 가지는 의미와 상징을 웹사이트에 반영하기 위해 "T"자를 중심으로 한 레이아웃을
구현 하였으며 "T"자가 가지는 특징을 이용하여 글자의 왼편에는 네비게이션바를 우측에는
컨텐츠 존을 구성하였다.
"T"자 안에 기업의 성격을 비쥬얼로 표현하기 위해 채도가 높은 YELLOW GREEN색상을
배경색상으로 채택하였다.

 
미래 지향적이며 역동적인 기업이미지 표현을 위한 사선 레이아웃의 금호타이어
'K'의 백색 획은 동적이며 과학적으로 앞선 이미지를 자아냄과 동시에 미래지향적으로 발전해 나가는 기업정신을 포괄적으로 담고 있으며, 단순명료한 형태속에 차별화가 뚜렷한 특징을 갖고 있다.

 
레이아웃을 통해 최고의 기업임을 표현하는 E1 홈페이지
E1의 CI는 Energy, Environment, Excellence, Essence, Efficiency 등의 다양한 의미를
상징하는 영문 이니셜 “E”와 First, Best,근원,One 등을 표현한 숫자”1”의 조합을 통해
Energy First, Environment First를 상징화 하였으며 에너지의 열정과 고객친화를 상징하는
E1 오렌지 Color로 감싸고 둥근 라운드로 마무리함으로써 환경친화와 안전을 표현하고 있다.
웹사이트에 사용된 "1"을 통해 그런 의미를 강하게 담아내고 있으며 하단의 외곽을 둥근
라운로 마무리하여 CI에서의 환경친화와 안전에 대한 이미지를 통일감있게 유지하고 있다.
사이트의 특성상 새로운 브랜드의 홍보를 위해 CI에 담긴 기업 이미지를 비쥬얼로 표현하고
있음을 알 수 있다.

 
 
6. 로고를 통한 디자인 컨셉 도출하기 2
(CI,BI를 비쥬얼존에 도입한 사례)
 
이번 강좌에서는 기업아이덴티티와 브랜드아이덴티티를 높이기 위해
로고를 비쥬얼화 시켜 사이트를 제작한 사례들을 살펴보고, 이러한
표현들이 가지는 효과는 어떠한지 살펴볼 것이다.
웹디자인에 있어 중요한 표현은 사이트의 주체가 가지는 이미지를
시각적으로 표현하고, 이를 통해 방문자로 하여금 감성적 접근이 가능
하게 하는데 있다고 볼 수 있다.
따라서 기업사이트나 제품 사이트에 있어 좋은 디자인이란 무의미한
직설적 표현 보다는 웃음, 재미, 신뢰등의 요소를 수반함으로써
사이트를 통해 전달하고자 하는 의미를 보다 효과적으로 전달하는데 있다.
가령 회사소개 페이지를 구현하는데 있어 많은 사이트들이 빌딩등의
이미지를 사용하여 컨텐츠의 내용을 연상시키는 방법들을 많이
사용하는데, 이는 페이지의 디자인적 구성에만 의미가 있고, 기업의
이미지를 심어주는데는 효과적이지 못한 방법이다.
 
이온의 느낌을 "O"자로 표현하여 신선하고 깨끗한 느낌을 전달해 주는 뉴온
뉴온 사이트의 경우 nuon의 o자를 이미지화 하여 이온의 움직임을
표현함과 동시에 기업브랜드 이미지의 제고를 높이고 있다.

 
Solution, Manpower, Teamwork를 담다 웹에이전시 CK인터드림
LG애드 사이트로 유명한 웹에이전시 CK인터드림의 홈페이지는 과일
상자를 모티브로 하여 디자인된 사이트로서 로고중 "I"자 위에 있는
세개의 점을 과일의 이미지를 빌려 신선하고 맛있는 기업 이미지를
전달하고 있다.
위 세개의 점은 CK인터드림의 기술력, 맨파워, 팀웤등을 상징하는
것으로서 이를 과일등의 음식물로 형상화 한것은 클라이언트에게
CK인터드림의 신선한 크리에티브를 선물하겠다는 그들의 의지가
담겨져 있는 것이다.


 
심볼로고를 통해 아이들의 공부방 연출 - 프뢰벨 -

 
 
7. 메인 비쥬얼에서 이미지 사용 법칙
(이미지의 효과적인 배치 방법에 대하여)
 
많은 웹디자이너들이 사이트 디자인에 사용하는 이미지들을 이미지CD에서 얻거나
스캔을 통해 얻게 된다.
이는 그 사이트만이 가진 아이덴티티를 저해하는 요소로 작용하기도 하며, 때로는
사이트의 성격과 상관없는 비쥬얼을 만들어 내기도 한다.
아무리 퀄리티가 좋은 이미지라도 사이트의 내용을 효과적으로 전달 할 수 없는
이미지는 좋은 이미지라 할 수 없다. 따라서 디자이너가 이미지를 선택할 때
어떠한 이미지를 적용시킬 것인지를 미리 정한 후 그에 맞는 이미지를 찾아내는
것이 좋은 디자인을 이끌어 내기 위한 방편이다.
이미지 소스에서 원하는 이미지를 찾을 수 없다면, 직접 촬영을 한다거나
클라이언트에게 촬영을 의뢰 함으로써 사이트 디자인의 퀄리티를 높여야 하는
것도 디자이너의 몫이다.
사이트에 들어갈 이미지가 선정되어지면 포토샵 작업을 통해 편집을
시작하게 되는데 이때 이미지를 어떠게 사용하면 효과적인 디자인 될 수 있는
지를 살펴보도록 하자
 
1. 주체가 되는 이미지는 크게 넣는다.
디자인을 하다보면 의도하지 않게 처음의 디자인 컨셉에서 벗어나는 경우가
종종 발생하게 되는데 그 이유중의 하나가 디자이너의 욕심에서 비롯되게 된다.
사이트를 대표할 주제 이미지가 선정되더라도 배치상 화면이 세련되게 나오지
않으면 주제 이미지를 축소시키고 사이트와 크게 연광성이 없는 이미지를
퀄리티가 좋다는 이유만으로 전면에 부각시키는 우를 많이 범하기 때문이다.
화면을 보기 좋게 꾸미는 것은 디자이너의 당연한 욕심이다. 그러나 디자이너가
만들어 내는 디자인은 스스로의 만족을 위한 작품이 아닌, 대중에게 보여질
제품이라는 것을 항상 염두해 두어야 할것이다. 즉 디자인만을 너무 강조하다
제 기능을 할 수 없는 제품을 만들어 버리게 되면 이는 좋은 디자인이라 할 수 없다.
따라서 주제가 되는 이미지가 배치상 화면의 퀄리티에 저해가 된다면 과감히
그 이미지를 포기하고 그에 맞는 유사 이미지를 다시 찾아보거나 재촬영 하여 구할 필요가 있다.
그렇다고 이미지의 해상도가 매우 낮은데도 이미지를 전면에 내 세우는 것은 좋지 않다.
이미지의 질이 크게 떨어져 사이트의 질을 손상 시킬 위험이 있는 경우 역시
유사 형태의 해상도가 좋은 이미지를 새롭게 찾아야 할것이다.

 
2. 가급적 대칭 방향을 피해 이미지 배치하기
초보 디자이너들이 많이 하는 실수 중의 하나가 주제가 되는 이미지를 화면의 가운데
배치하는 것이다. 이는 고의적인 의도를 통해 주제를 크게 부각 시킬 경우가 아니라면
가급적 피하는 것이 좋다.
대칭 구조는 화면을 좁게 만드는 요소가 되기도 하며, 심리적으로 부담감을 준다.
사진에서 인물 촬영시 증명사진을 제외 하고는 중앙에서 벗어난 인물을 촬영하는 것이
이유에서다.
중앙에서 벗어나 이미지를 배치하면 보는 이들을 편안하게 해 줄 뿐만 아니라 배경과
주제가 되는 이미지의 효과적인 조화를 이끌어 낼 수도 있다.
 
3. 인물의 시선을 화면 안쪽으로 위치 시킨다.
비쥬얼존에 인물을 배치 시키는 경우 인물 시선의 방향을 어디에 두느냐에 따라서
사이트의 전체적인 가독성에 큰 영향을 미치게 된다.
아래 그림에서 왼쪽의 그림은 인물의 시선이 왼쪽으로 위치 하여 있어 컨텐츠존과
비쥬얼 존이 서로 조화를 이루지 못하고 있다. 따라서 사용자의 시선을 분산시킬
위험이 있다.
오른쪽 그림은 인물의 시선에 따라 사용자의 시선이 바로 컨텐츠 영역존으로 흐르게
됨으로써 전체적인 컨텐츠의 가독성을 높이고 있는 것을 알 수 있다.

(*자료출처 : http://www.iwebdy.net)



㉿ 당신의 홈페이지 파트너 - 웹인터렉티브 케듀존 닷컴 (www.keduzone.com)