폰트클럽 :: 안병국의 웹타이포그래피 - #5 기능성과 목적성을 잃어버린 타이포그래피

산돌 백종열펜M

HOME > 매거진 > 타이포 컬럼 > 스페셜컬럼

안병국의 웹타이포그래피 - #5 기능성과 목적성을 잃어버린 타이포그래피

2010.07.22

글. 안병국 (비주얼스토리 / 아이웹디넷 대표)

웹디자인은 상업적 측면이 우선되는 디자인 분야이고 짧은 시간 안에 메인 페이지에서 사이트의 목적이나 내용을 파악할 수 없으면 사용자는 사이트를 쉽게 떠나버리는 경향이 강하다. 그만큼 사이트 디자인은 단순히 화면을 예쁘게 보이기 위한 측면 보다는 커뮤니케이션의 중요한 수단으로서 인식해야 하는 이유이기도 하다. 디자인이 필요하여 디자인을 하는 것이 아닌, 디자인을 통해 감성적 커뮤니케이션과 더불어 효과적인 메시지 전달을 위한 과학적이고 전략적인 디자인 접근이 필수적이라 할 수 있다.그러나 이러한 목적성을 잃어버리고, 화면을 채우기 위한 디자인으로 잘못 사용된 디자인들을 쉽게 볼 수 있는데, 타이틀에 목적성과 기능성을 잃은 사례들을 살펴봄으로써 타이틀에서 주의해야하는 부분들은 무엇이 있는지 알아보도록 하자.

복잡한 형태의 이미지와 겹치지 않게 배치한다.

글자 배치 시 초보 디자이너들이 많이 겪는 실수의 중의 하나가 배경 이미지의 컬러 배합 여부를 고려하지 않은 채 배치하는데 있다. 이는 타이틀의 가독성을 크게 해칠 뿐 아니라 사용자에게도 시각적 혼란스러움을 가중시킴으로서 디자인의 완성도를 크게 저해하는 요소가 되기도 한다.

따라서 배경 이미지의 색상을 글자와 적절히 어울릴 수 있도록 보정하거나, 단일 색상톤의 이미지 부분에 앉히는 것이 시각적 안정감을 준다. 하지만 색상 보정이 어렵거나 단일 톤을 차지하는 범위의 위치가 글자 배치 시 적절한 위치가 아닌 경우는 차라리 글자를 크게 함으로써 가독성을 높이는 것이 우선이라 할 수 있겠다.

위의 그림들을 보면 메인 타이틀이 적용된 곳의 배경이 복잡한 구조를 가지고 있어 타이틀이 눈에 거의 띄지 않을뿐더러 복잡함이 더해지고 있다. 이는 타이틀의 위치가 잘못된 것이며, 구조상 현재 위치해 있는 곳이 가장 안정된 레이아웃을 이끌어 낼 수밖에 없다 하더라도 타이틀의 크기를 좀 더 과감하게 크게 위치 시켰더라면 보다 자연스러운 이미지를 연출 할 수 있었을 것이다.

예를 들어 다음의 그림들을 살펴보도록 하자. 훼스탈 사이트에서 타이틀이 위치해 있는 배경 그림을 유심히 보면 타이틀이 잘 보일 수 있도록 배경 부분을 의도적으로 밝게 처리하여 가독성과 판독성을 높이고 있다. 특히 타이틀과 배경의 전체 색상이 SKY BLUE로 이루어져 있는데, 타이틀이 위치해 있는 부분은 햇살이 강하게 비쳐 타이틀이 배경에 묻히는 현상이 발생하지 않도록 하였으며 배경색상을 뭉게는 의도적인 이미지 편집을 통해 타이틀 부분에 대한 집중력을 높이고 있다.

▲ http://www.handok.co.kr/productsite/festal/

▲ http://www.ssyenc.com/kor/

쌍용건설 사이트에서는 배경이미지로 사용된 이미지들이 복잡한 형태의 구조를 가지고 있거나 색상이 강한 이미지들로 이루어져 있다. 또한 시간에 따라 계속하여 배경이미지가 바뀌는 형태로 제작되어 있는 것에 반해 타이틀은 흰색 하나의 색상을 유지하고 있다. 이는 자칫 배경 이미지에 따라 타이틀에 대한 가독성과 판독성이 저해될 위험을 안고 있지만, 타이틀에 입체적인 그림자 효과를 추가함으로써 이런 위험 요소를 제거 하고 있다. 이미지 역시 최대한 타이틀이 읽히는데 방해가 되지 않도록 하기 위해 우측 상단 부분은 형태적 복잡함이 없는 이미지를 선택하였다.

같은 계열의 색상 사용을 피하고 그림자를 적절히 활용한다.

앞의 쌍용건설의 웹사이트에서 배경으로 밝은 하늘 이미지가 사용된 예에서 보듯 타이틀이 배경이미지 색상과 비슷하면 가독성에 영향을 줄 수 있다. 이에 의도적으로 타이틀에 그림자 처리를 하여 배경과 타이틀을 시각적으로 분리시키는 방법으로 가독성을 높이기도 하는데 아래 두 그림에서는 이러한 처리조차 없어 타이틀의 가독성이 현저히 떨어지고 있다.

비록 타이틀에 사용된 글자의 색상을 배경보다 진하게 처리하여 가독성을 높이고자 하였으나 색상의 차가 거의 없고 건물의 형태가 복잡하여 건물 안에 위치한 글자는 전혀 읽혀지지 않고 있다. 심지어 건물의 상단 부분은 글자 색상보다 진해 글자가 아예 배경 부분에 숨어 버리는 현상마저 발생하고 있음을 알 수 있다. 더욱이 우측 부분에 한글로 위치한 메뉴에서는 글자에 흰색색상을 사용하여 눈에 잘 띄고 안정적이어서 왼쪽에 사용된 타이틀은 단순히 장식적인 의미로 밖에 비춰지지 않는다. 이럴 경우 타이틀을 사용하여 건물을 가리는 것 보다는 차라리 타이틀을 생략하는 편이 훨씬 디자인의 세련미를 높이고 디자인의 안정성을 높이는데 유리했을 것이다.

위의 그림은 쉽게 보면 밝은 이미지의 배경처럼 보일 수 있으나 이미지 안에 글자색상과 비슷한 톤의 작은 알맹이 형태의 지글 거리는 점들이 패턴처럼 반복되어 있어, 글자를 판독하기 어려운 상태이다. 이는 전체적으로 봤을 때 밝은 톤의 이미지라 할 수 있으나 타이틀에 사용된 글자의 크기가 배경이미지에 포함되어 있는 어두운 톤의 이미지들에 비해 확연히 크지 못해 가독성에 어려움을 주고 있는 사례이다. 이럴 경우 글자 크기를 상대적으로 크게 했다면 글자 굵기가 차지하는 면적으로 인해 이러한 부분을 상단 부분 커버할 수 있을 것이다.

▲ http://www.nhncorp.com

상대적으로 NHN의 경우는 타이틀에 약한 그림자 효과만으로도 타이틀이 돌출되는 분위기를 연출해 가독성이 높게 디자인 되었으며, 세련된 분위기를 연출해 주고 있다. 배경이미지가 그리 밝은 편도 아니고 어두운 편도 아니어서 글자에 어두운의 계통의 컬러를 적용했더라면 비주얼 하단 부분의 이미지와 중심의 구로 인해 타이틀이 배경이 묻히는 현상이 발생했을 것이다. 그러나 간단한 그림자 효과로 타이틀의 가독성을 높이고 입체적인 볼륨감도 함께 전달해 주어 디자인의 완성도를 높였다.

한 단어 내에서의 급격한 변화는 피한다.

특별한 경우가 아니고서는 한 단어에서 율동감을 주기 위한 방편으로 글자의 급격한 크기 변화나 위치변화 색상 변화는 디자인의 안정성을 떨어뜨리면서 혼란스러움을 더해 줄 수 있다. 이는 급격한 변화로 인해 시선이 혼란해짐으로써 그만큼 가독성이 떨어지고 그리드가 깨지기 때문이다.

특히 긴 문장의 타이틀에서 이런 변화는 타이틀의 기본 역할이라 할 수 있는 메시지 전달을 더욱 어렵게 한다. 그렇기 때문에 4개 이상의 단어들의 조합으로 이루어진 문장에서는 무조건 피하는 것이 좋다. 불가피하게 단에의 위치나 크기 색상의 변화를 주게 되는 경우에는 최소 한 가지 이상의 공통점을 줘서 이를 최소화해야 할 것이다.

타이틀로 사용된 '쟁이의 장인 정신이 담긴..' 부분에서 거의 모든 단어가 위아래로 심하게 위치 변화와 크기 변화가 생겨 시선을 혼란스럽게 만들고 있다. 특이 '장인' 부분은 위치 변화는 있으나 위를 중심으로 수평선 상에 위치하고 있고 동일한 컬러로 되어 있어 다른 단어들에 비해 판독하기 쉬운 상태라 할 수 있다. 또한 강조를 위해 사용된 오렌지 톤의 컬러는 비록 세 글자 밖에 없어 강조된 것처럼 느껴질 수 있으나 컬러가 적용된 글자들은 검정색의 나머지 글자들에 비해 상대적으로 글자 크기가 커 마치 같은 비율로 구성된 것처럼 보인다. 이는 오렌지 컬러가 강조 색상인지 블랙 색상이 강조 색상인지 글자의 의미를 파악하기 전에는 구분 자체가 힘들 정도이다.

각 단어들을 분리해 보면 가장 크기가 큰 장인이 먼저 읽히고 그 다음 정신이 읽힌다. 그러나 이 두 단어는 하나로 묶여져 하나의 단어처럼 읽히는 것이 보다 메시지를 전달하는데 효과적이었을 것이다. 또한 위치 변화 때문에 시선이 하단에서 상단 다시 하단으로 와야 하는 불편함이 있는데 다음에 이어지는 '이'와 '담긴'에서도 높이의 변화가 심해 다음 문장은 아예 읽기를 포기할 정도로 어수선한 상태이다.

위의 그림 역시 모든 단어가 심하게 위치와 크기 변화가 있어 가독성에 있어 혼란을 주고 있고, 핵심적인 단어가 있어 해당 단어를 중심으로 판독해 갈 수 있는 상태가 전혀 아니다. 앞의 경우에는 위치와 크기 변화는 있었지만 적어도 중요 단어에 컬러를 통일시킴으로써 중심이 되는 포인트를 만들어 주었으나, 지금의 경우는 그러한 통일성이 보이지 않는다. 좌측에서는 '예,인,상', 우측에서는 '공,상'이라는 글자가 강조되었으나 이 글자들이 하나로 연결되었을때 의미하는 바가 전혀 없어 의도된 디자인으로 보기에도 힘든 상태라 할 수 있다.

의도적으로 단어들 간의 띄어쓰기를 적용하지 않은 상태에서 단어 시작의 첫 글자에 대비가 강한 레드 색상을 적용해 단어 사이의 구분을 주었으나 이 역시 명확한 규칙 없이 적용되었고 가운데 회색들의 글자까지 더해 이것이 시선을 더욱 혼란스럽게 하는 역효과를 주고 있다.

너무 많은 컬러와 폰트를 사용하지 않는다.

어느 요소들 보다 타이포그래피에서의 색상 사용은 신중해야 될 필요가 있다. 특히 타이포그래피는 그 자체만으로 메시지가 전달되어지는 수단이며 사용자의 시선이 가장 먼저 가는 곳이기 때문이다. 전략적인 고민 없이 단지 심미적 효과만을 위해 글자에 색상을 적용한다면 사이트의 전체 분위기를 해칠 뿐 아니라 집중되어야 할 핵심 키워드를 놓치게 하는 위험을 안게 된다. 컬러 사용을 통해 특정 단어를 강조할 수 있게 되지만, 너무 많은 단어들이 강조되다 보면 오히려 서로 강조될려고 하는 상황이 연출됨으로써 정작 강조되어야 할 것이 소외되는 경우가 생길 수 있다.

아래 그림만 보더라도 거의 모든 단어들이 각각의 색상을 가지고 있어 어느 것이 정작 중요한 것인지 알 수 없을 정도로 시선이 분산되어 지고 있다.

너무 과도한 컬러 사용은 시선을 분산시킴으로서 사용자의 집중도를 저해 시켜 전달하고자 하는 메시지를 효과적으로 전달 할 수 없는 반면 너무 많은 폰트의 사용은 사이트의 전체적인 아이덴티티를 떨어뜨릴 수 있다. 최근 들어 포털과 기업들이 앞다투어 전용서체를 만들어 기업 아이덴티티 확립에 적극 활용하고 있을 정도로 폰트의 모양은 디자인 컨셉트나 콘텐츠의 성격을 대변해 주는 역할을 하고 있다. 그런 만큼 폰트의 사용은 신중해야 한다. 너무 과한 컬러, 불필요하게 다양한 폰트의 사용은 그만큼 타이틀 부분에서 메시지 전달력이 떨어질 수밖에 없다.

>> 안병국의 웹타이포그래피 - #1 웹타이포그래피에 대한 고찰
>> 안병국의 웹타이포그래피 - #2 컨셉트에 따른 타입의 설정①
>> 안병국의 웹타이포그래피 - #3 컨셉트에 따른 타입의 설정②
>> 안병국의 웹타이포그래피 - #4 비주얼로서의 웹타이포그래피

위 기사를 블로그 및 개인 웹사이트 등에 게재하고자 하시는 분은 기사의 출처를 명시하고 링크를 걸어주시기 바랍니다.
기사의 출처를 밝히지 않거나 편집해 게재하실 경우 합법적인 절차에 따라 책임을 묻게 됩니다.
기타 기사 게재와 관련된 내용은 폰트클럽 관리자에게 문의해 주시기 바랍니다.

https://www.fontclub.co.kr/Magazine/Magazineview.asp?boardtype=8&subtype=01&boardnum=6842

▶	안병국의 웹타이포그래피 - #5 기능성과 목적성을 잃어버린 타이포그래피	2010.07.22	1,032

37	안병국의 웹타이포그래피 - #4 비주얼로서의 웹타이포그래피	2010.05.14	1,115

36	안병국의 웹타이포그래피 - #3 컨셉트에 따른 타입의 설정②	2010.04.29	1,079

35	북디자인의 서체 선택	2010.04.14	1,013

34	공병우 타자기와 공한체 2	2010.03.16	1,359

33	공병우 타자기와 공한체 1	2010.03.12	1,257

32	안병국의 웹타이포그래피 - #2 컨셉트에 따른 타입의 설정①	2010.02.05	3,041

31	베타 조합에 있어서의 일본어조판의 기본과 과제	2010.02.02	466

30	일본의 디지털서체의 현상과 문제점:지유코우보가 임하는 기본서체	2010.01.07	718

29	안병국의 웹타이포그래피 - #1 웹타이포그래피에 대한 고찰 (1)	2009.12.15	1,993

1 2 3 4