NOMA: 웹디자인트랜드 1~7

웹디자인트랜드

1. DIN서체 이후 영문 인기 폰트 BINARY ITC
2. 자연이미지로 메인 전체를 비쥬얼화
3. 디테일일러스트 (하향세▼) 순수일러스트 (상향세▲)
4. 사선의 사용으로 동적 느낌 전달
5. 2004 트랜드 핫코드 둥근모서리
6. 아이보리 배경색상으로 고급스러움 연출
7. 가상공간의 느낌 그대로, 리얼리티기법

1. DIN서체 이후 영문 인기 폰트 BINARY ITC
현재 국내 웹디자이너들이 가장 선호하고 즐겨 쓰는 영문 폰트는 단연 세련미가 돋보이는 DIN 서체 일것이다. 그러나 올해 초부터 DIN 서체를 대신할 영문폰트로서 BINARY ITC 서체가 등장하기 시작했다.
DIN서체가 가늘고 샤프한 시각적 세련됨을 가졌다면 BINARY ITC서체는 고급스럽고 우아한 멋을 지닌 서체라 할 수 있을 것이다.

DIN서체가 웹디자인에 있어 대중화 되면서, 식상함을 느낀 웹에이전시에서는 메인 타입의 차별화를 위해 조금씩 BINARY ITC서체를 즐겨 사용하고 있는 추세이다.

특히 웹에이전시인 디자인팝은 로고체 자체를 BINARY ITC 서체로 사용하면서 무겁게 느껴지는 로고에 안정감을 주는데 사용하기도 하였으며, 여성스런 느낌의 사이트인 아데랑스 역시 BINARY ITC 서체를 사용함으로써 우아한 맛을 전달해 주고 있다.

2. 자연이미지로 메인 전체를 비쥬얼화 시키기
최근 기업사이트들을 중심으로 메인 비쥬얼 존의 구성 방식이 가독성 높은 컨텐츠 중심에서 기업이미지를 최대한 살리는 비쥬얼 방식으로 변화 되고 있다.특히 사람과 자연을 등장시켜 자연 친화적인 기업이미지 전달과 휴머니티를 강조하고 있는 것이 두드러진 특징이다. 자연이미지를 활용하는 부분에 있어서는 땅과 하늘이 평면적으로 펼쳐진 이미지를 주로 사용하고 있으며 이를 통해 배경이 연장되어진 기법을 주로 많이 사용하고 있다.

위의 KTF웹사이트의 메인화면과 태평양제약의 메인화면은 구성방식에 있어 매우 유사한 기법으로 처리 된 것을 쉽게 알 수 있다. 두 사이트는 배경 이미지와 컨텐츠간의 조화를 중요시 하여 비쥬얼 속에 컨텐츠를 투명기법으로 담고 있으며 최소한의 가독성을 위하여 투명 라인을 통해 컨텐츠존을 형성하고 있다.또한 두 사이트 역시 왼쪽 상단에 메인카피와 서브카피를 구성하고 하단으로 사람을 등장 시켜 휴머니티를 지양하는 기업이미지를 강하게 내빚추고 있다.

그레이블루에서 제작한 대상그룹의 시안은 최대한 혼잡스러움을 줄이고 안정적인 이미지를 통해 간결함을 전달하고자 노력하고 있다. 배경이 되는 자연이미지는 최대한 색상톤이 통일된 이미지를 사용함으로써 사람들을 부각시키고 있음을 알 수 있다.

위의 두 사이트의 경우에는 밝은 모습의 아이들을 등장시켜 공익적인 부분을 강조하고 있으나 위의 사이트들과는 다소 틀리게 컨텐츠존을 명확히 함으로써 가독성과 비쥬얼의 비중을 1:1 정도로 두고 있다.자칫 이런 부분들로 인해 다소 딱딱하게 느껴질 수 있는 느낌을 줄이고자 한화사회공언 사이트의 경우에는 사각형태의 컨텐츠존에서 탈피하여 입체적인 종이의 이미지로 컨텐츠존을 사용하고 있는 것이 특색이다.

3. 디테일일러스트 (하향)▼ 순수일러스트 ▲(상향)
작년말까지 디테일일러스트가 하나의 큰 유행처럼 웹디자인에서 큰 틀을 형성하였었다. 정글 컨텐츠몰이나 프리진, 겟이미지등에서는 CP들과 제휴하여 일러스트 소스를 팔기도 하였고, 비타마인드라는 웹에이전시는 디테일일러스트로 유명세를 타기도 했었다.
하지만 올해들어 디테일일러스트의 사용 빈도가 급격히 줄고 수작업 느낌이 나는 순수 일러스트와 다시 인물을 중심으로 한 포토 이미지를 이용한 메인 화면 구성이 급격히 늘어가고 있다.
그중에서도 사람의 손 맛 느낌을 중시한 순수 일러스트는 사이트에 생명감을 주고, 자연스러운 느낌을 끌어내기 때문에 학생층을 타겟으로 한 교육 사이트를 중심으로 많이 사용되고 있다.

파스텔톤의 동화 일러스트로 깨끗하고 재미난 분위기 연출 아비투스(www.abtoos.com)

아비투스는 아동과 30대 이후의 학부모층에 타겟을 마추고 전형적인 동화 일러스트를 사용하여 친근감을 주는 데 노력하고 있다. 파스텔톤의 동화 일러스트는 아동과 학부모에게 괴리감 없이 자연스럽게 학습지를 보는 듯한 이미지를 심어 주고 있으며, 차분하게 정리된 동화 일러스트를 통해 아비투스의 이미지를 신나는 모험의 세계로의 여행을 연출하고 있다.

수채화기법의 동화 일러스트를 스캔해 이미지존으로 사용한 안전넷(www.isafe.go.kr)

정부에서 운영하는 안전넷은 수채화로 그린 일러스트를 직접 스캔하여 수작업의 느낌을 그대로 반영하여 수채화가 가지는 맑고 투명한 느낌을 100% 살리고 있다.

아크릴톤의 일러스트를 통해 그림과 같은 세상을 열어가는 기업 이미지 창출 SK캐미칼(www.skchemicals.co.kr)

아크릴톤의 일러스트를 통해 기존 디테일 일러스트가 가지고 있는 최대 단점인 딱딱함을 탈피하였고, 아크릴이라는 질감을 사용하여 고급스러운 분위기를 함께 연출하고 있다.
일러스트역시 성인에 촛점이 맞추어진 일러스트를 사용함으로써 기업의 이미지를 부드럽고, 견고한 분위기로 연출을 꾀하고 있음을 알 수 있다.

4. 사선의 사용으로 동적 느낌 전달하기
사각형의 브라우져 화면속에서 수직 수평의 그리드 시스템을 응용한 디자인이 주류를 이루고 있는 것이 현재의 웹디자인 추세이다. 하지만 점차 몇몇 사이트를 시작으로 이런 고정된 툴을 깨고자 하는 노력들이 엿보이기 시작하고 있다. 특히 KTF나 금호 사이트의 경우에는 기업 CI를 응용한 사선을 레이아웃이나 구성요소의 디자인에 반영함으로써 타 사이트와의 디자인적 차별화를 보이고 있다.

금호 사이트의 경우 회사명인 KUMHO의 "K"를 전체적인 레이아웃과 구성요소들에 반영하여 기업 아이덴티티와 웹아이덴티티를 강하게 어필하고 있는 것을 사이트 디자인을 통해 쉽게 발견 할 수 있다. 특히 메뉴바의 구분선 역시 전체레이아웃과 통일감을 주기 위해 일반적인 수직 분할법에서 벗어나 사선을 이용한 분할 방법을 시도하고 있으며 컨텐츠바에 있어서도 일반 사이트들이 수직 막대나 원등을 사용하여 장식하는 것에 반해 수평 막대의 끝을 사선모양으로 마무리 함으로써 차별화된 느낌을 최대한 강조하고 있다.

KTF EVER 사이트는 모델의 포즈를 통해 안정적인 레이아웃에 강한 이펙트 효과를 끌어 내고 있다. 전체적으로는 컨텐츠의 배치 및 레이아웃 구조를 가독성이 쉬운 수평 수직 구조를 취하고 있지만, 모델의 의상과 포즈를 통해 사이트가 가지는 전체적인 느낌을 역동적인 모습으로 가져 갈려 하는 의도가 숨어 있음을 알 수 있다. 특히 모델의 의상이 Yellow 계통인 점은 바탕색과의 강한 대조를 통해 비쥬얼존의 느낌을 사이트의 전반적인 느낌으로 이끌어 갈려는 효과라 볼 수 있을 것이다.

아래 사이트는 웹에이전시인 코발트식스의 웹사이트로 전체가 플래쉬로 이루어져 있으며, 사이트 전체가 사선의 레이아웃으로 구성되어 있어서 디자인적 느낌을 강하게 어필하고 있다.
물론 많은 컨텐츠를 담고 있는 것은 아니지만 크리에이티브 집단의 성격과 고정툴을 깨는 디자인 그룹의 성격을 가장 효과적으로 전달하고자 하는 의도로서 이런 효과가 충분이 클라이언트에게 강한 주목성을 갖게 하기에 충분할 것이라 본다.

5. 2004 트랜드 핫코드 둥근모서리
최근들어 갑작스럽게 나타난 디자인 변화라고는 말 할 수는 없지만, 현재 거의 모든 사이트에서 나타나고 있는 공통적인 특징을 들자면, 직선라인 형태의 구성 방식에서 벗어나, 전체적으로 부드러운 형태의 디자인을 선호하고 있다는 사실이다.
네비게이션존의 구성이나, 베너존 디자인에 있어 모서리가 둥근 형태의 영역존을 점차 사용하긴 했으나, 사이트의 전체 느낌을 둥근 모서리 형태의 레이아웃과 디자인으로 바뀌기 시작한 기점은 소니뮤직코리아 사이트가 그 시발점의 기준이 아닌가 싶다.
이러한 추세는 앞으로도 오랫동안 유지 될것으로 보이며 하드한 느낌의 사이트 보다는 소프트한 느낌의 디자인이 기업 사이트들을 중심으로 번져 나갈것으로 기대된다.

컨텐츠 영역존에서의 둥근 모서리화 신동아화제(www.sdafire.com)와 웹젠(www.webzen.co.kr)

신동아화제의 웹사이트와 웹젠 웹사이트는 느낌은 전혀 다르지만 큰 레이아웃 구성에서 있어서는 많은 유사점을가지고 있다. 전체적으로는 비쥬얼존과 배경을 하나처럼 연결하고 그 가운데 컨텐츠존을 위치시키고 있으며 컨텐츠존은 그 가독성을 위하여 White색상을 배경색으로 선택하고 있는 점이다. 그리고 또 하나 주 색상에 있어서는 색상차가 커서 전혀 다른 분위기를 연출하고 있는 것 처럼 보이지만, 단계차가 적은 그라데이션을 배경색상으로 사용함으로써 부드럽고 자연스러운 이미지를 전달하려 하고 있음을 알 수 있다.
이를 뒷받침 하기 위해 컨텐츠 영역의 구분을 위하여 딱딱한 직선라인을 피하고 끝을 둥글게 처리하고 있다.

신동아화제 사이트를 자세히 살펴 보면 거의 모든 구성요소가 둥근 모서리 형태로 이루어져 있는데 네비게이션바에서 서브 메뉴바를 비롯해 좌측 네비게이션바, 퀵메뉴바, 보조 메뉴바등 모두가 이에 속한다.

6. 아이보리 배경색상으로 고급스러움 연출
웹사이트에서 주로 많이 쓰여지는 색상을 보면 요즘의 웹디자인 트랜드를 파악하기 쉽다. 즉 디자인에 있어 색이 가지는 의미는 그만큼 크다고 할 수 있으며, 색상을 통해 디자인의 컨셉을 반영하는 경우가 많기 때문이라 할 수 있다.
웹사이트를 운영하는 기업의 특징과 컨텐츠의 특징에 따라 주조색이 결정되지만 이를 뒷받침하는 배경 색상은 웹사이트 전체의 이미지를 어떻게 나타낼까 하는 의미가 담겨 있기도 하다.
가령 각 메뉴별로 타겟층에 따라 주조색상을 틀리게 하였더라도 BLACK색상을 배경 칼라로 사용한 경우는 사이트의 전체 이미지가 강한 액션을 연상 하게끔 한다.
예를 들어, 미래의 세계를 연상시키기 위해 게임 사이트에서 블랙을 자주 사용하는 경우나, 전자제품의 메카니즘을 돋보이게 하기 위하여 블랙을 사용한 경우가 이에 속한다 볼 수 있다.

그렇다면 현재 일반적 상업 사이트에서 배경 색상으로 가장 많이 이용되는 칼라는 무엇일까? 물론 아직까지는 컨텐츠의 가독성과 사이트의 깔끔한 이미지 연출을 위해 WHITE색상이 가장 보편화 되어 많이 쓰이고 있다.
하지만 점차 고객 감성에 대한 디자인 전략이 웹사이트를 파고 들면서 자연을 연상시키는 네츄럴한 자연이미지로서 WHITE에서의 지루함을 탈피하거나 눈의 피로를 최대한 줄이는 쪽에서 채도가 높지 않은 아이보리 계열의 색상이나 그레이계열의 색상들의 사용이 많아지고 있다.
배경을 비쥬얼 이미지로 나간 경우는 많은 컨텐츠를 보여 주어야 하는 사이트에서는 정보전달에 있어 부담이 갈 수 밖에 없기 때문에 약간의 미색이 들어간 배경 색상을 선호 하고 있는 것이 현재의 추세이다.

WHITE 색상이 주는 느낌은 전체적으로 안정되고 깔끔한 느낌을 주지만, 평범하고 많이 쓰이는 색상이기에 그만큼 신선한 느낌과 고급스러운 느낌은 덜하다.

최근 많이 사용되는 배경색상인 아이보리 색상을 이용한 사이트들을 살펴보면 WHITE색상 보다는 전체적으로 꽉찬 느낌이나 고급스러운 느낌이 많이 들면서, 기업의 이미지를 일반 기업과는 차별된 신뢰적인 기업으로 유도하고 있다.

넥센타이어 사이트의 경우는 전체 면적에 있어 아이보리 톤의 배경색상이 차지하는 부분을 높여 고급스러운 느낌을 최대한 높였으며, 각 챕터가 가지는 컨턴츠 성격을 반영하기 위해 메뉴별 색상을 액센트 형식의 간결한 라인 형태로 처리하고 있는 것을 볼 수 있다.
화면에서 사용하는 칼라수를 챕터 색상과 배경색상으로 제한 함으로써 시선의 분산을 막으면서도 자칫 가볍게 느껴질 수 있는 부분을 배경 색상을 통해 보완하고 있는 경우이다.

아래의 LG홈쇼핑 기업 홈페이지는 2depth까지는 화면을 베이직 그라데이션 톤으로 전체를 장식하였고, 정보를 본격적으로 보여주는 3depth부터는 White색상을 함께 배치해 가독성을 높이는 방향으로 디자인 되었다.
챕터별 주색상을 약하게 처리한 관계로 사이트의 무게 중심이 가벼워 질 수 있기 때문에 채도가 높은 의상을 입은 모델들을 배치함으로써 시선을 자연스럽게 컨텐츠로 유도하고 있다.
LG홈쇼핑 사이트에서 사용된 모델 이미지는 단순히 사이트의 디자인 구성을 위한 비쥬얼 요소라기 보다는 컨텐츠로이의 이동을 유도하는 인포메이션으로서의 기능을 함께 담당하고 있다.

그리고 위 사이트에서 우리가 쉽게 지나쳐 버릴 수 있는 부분이 있는데, 유심히 살펴보면 챕터별 색상과 모델의상의 연관성 부분이다.
강한 색상을 주는 모델 의상 때문에 서브 비쥬얼존에서의 색상 계획 자체가 얼핏 보면 무신된 듯 처럼 보이지만 자세히 보면 그렇지 않음을 알 수 있다.

LG기업 사이트는 배경색상을 비롯해 배경이 되는 구조적 구성 요소들은 파스텔톤을 유지함으로써 차분하면서도 친근한 기업이미지를 내포하면서 동시에 모델들의 강한 비쥬얼을 통해 심심한 부분들을 보완하고 있다.
그러면서도 위에 그림에서 보면 모델의 양복 색상과 면을 이루고 있는 서브 칼라의 색상을 같은 계열로 가지고 감으로써 통일감을 잃지 않고 있다.

위의 비쥬얼존은 조그만 요소 하나에도 얼마나 세심한 디자인 전략이 들어가 있는지를 잘 알 수 있는 좋은 예라 할 수 있는데 그냥 지나쳐 보면 남자모델과 주색상과는 아무 연관성이 없는 듯 보이나 자세히 보면 넥타이 색상과 챕터의 주색상과 같은 계열임을 알 수 있다.
컨텐츠가 기업의 사업과 관련된 상품입점에 대한 안내 이기 때문에 비즈니스 적인 면을 강조하기 위하여 정장차림의 남성모델을 크게 등장 시켰는데, 만약 이 부분에 케쥬얼을 입은 모델이 있었다면 컨텐츠의 성격과 비쥬얼의 연관성이 크게 떨어 졌을 것이다. 하지만 강제적으로 정장생삭을 칼라풀한 블루 계열로 가져갔다면 어색한 조화가 됬을 것이다. 비즈니스적인 컨텐츠의 비쥬얼을 살리면서 색상과의 연관성을 잃지 않기 위해 넥타이 색상을 블루 계열로 가져간 것은 재치가 돋보이는 부분이 아닌가 싶다.

이외에도 아이보리 색상의 그라데이션 기법을 이용해 배경을 꾸민 사이트들을 모아 보았다. 아래 사이트들 역시 나타나는 공통점은 화면 자체의 색상이 고급스럽게 느껴진다는 점과 친근한 이미지를 연출하고 있는 부분일것이다.

7. 가상공간의 느낌 그대로, 리얼리티기법

한때 VRML을 이용한 가상현실 기법이 화두로 떠 오른적이 있었지만, 인터넷 속도와 표현의 한계에 부딪혀서 금방 사라지고 말았었다.
그리고 몇년이 지난 지금 플래쉬의 발달과 인터넷 회선 속도의 향상으로 다시금 가상현실에 대한 접근이 온라인 브로셔의 형태로 점차 새롭게 모습을 나타내고 있다.

VRML이 3D에 의존한 부분이 많았다면,현재 사용되는 기법은 리얼리티를 최대한 살리기 위해, 3D, 2D, 비디오촬영등의 차 소스로 가공한 다음 플래쉬에서 완성하는 형태로 제작되어 지고 있다.

이곳 저곳을 여행한다. 용평리조트의 버츄얼투어

이번에 새롭게 선보인 용평리조트의 버츄얼투어는 가상체험이 끌어 낼 수 있는 효과와 특징을 가장 잘 반영한 사이트라고 할 수 있을 정도로 매우 높은 완성도를 가지고 있다.
자동차에서 용평리조트로 향하는 길에 표지판과 입간판을 통해 용평리조트의 효과적으로 브랜드를 사용자에게 인지 시키고 그림지도에서 원하는 곳을 찾아가면 그에 해당하는 정보들을 볼 수 있도록 구성되어져 있다.

플래쉬를 통한 가상공간의 연출 기준점, 화이트

이상한 나라의 엘리스를 연상 시키는 화면 전개를 통해 새로운 기업 홍보 방식을 마련한 화이트커뮤니케이션의 사이트는 기존 기업사이트들의 구성 방식에서 벗어나 획기적인 시도로 받아 들여졌었다.
새로운 세계로의 모험이란 컨셉을 통해, 기업이 가지는 이미지를 정보 나열식이 아닌 사용자가 접근해 가면서 만나는 새로운 방식의 틀을 마련한 사이트라고 할 수 있다.