Monthly Archives: 1월 2013

---

<2011세계피겨선수권대회 콘텐츠 모바일 아이콘>

이 그림, 혹시 기억나시나요? ^^ 지난 4월, 모바일에서 세계피겨선수권대회 관련 콘텐츠를 보실 수 있도록 연결해 주던 모바일 아이콘입니다. 모바일 화면에서 가로•세로 각각1cm인 모바일 아이콘을 확대시켜 본 그림인데요. 가죽질감이 느껴지는 스케이트화에서는 한 땀 한 땀 바느질선이 보입니다. 얼음판에는 거울에 비친 것처럼 스케이트 날이 고스란히 비쳐 그림자를 만들고 있네요. 실제 모바일 화면에서 보여진 아이콘을 확대해 보면 이렇습니다.

 

<확대해서 본 모바일 아이콘>

무심코 지나치기 쉽지만 1cm 작은 정사각형 안에 서비스의 정체성을 가장 쉽고 명확하게 담아 내야 하는 것이 모바일 아이콘의 사명(^^)인데요. 네이버 모바일 아이콘이 만들어지는 과정을 소개해드립니다.

 모바일 아이콘이 만들어지는 과정

모바일 아이콘이 만들어지는 첫 단계입니다. 컴퓨터 그래픽으로 뚝딱 만들어지는 것이 아닐까 생각하시는 분들도 있는데요. 이렇게 연필로 아이디어 스케치를 하는 아날로그적인 과정이 있습니다.

<모바일 아이콘 스케치 과정>

아이콘의 주제가 되는 오브젝트(object) 샘플을 스케치한 다음에는 이미지에 맞는 색깔을 입혀 테스트 하는 과정을 거칩니다.

<모바일 아이콘 스케치 후 채색 과정>  

<TV아이콘, 증권아이콘, 날씨 아이콘 시안>

같은 모양의 디자인이라도 가로•세로 크기를 다르게 해 봅니다. 혹은 사물을 바라보는 시선의 높이나 각도를 달리 해 보기도 합니다. 

다음 단계는 앱과 모바일웹 아이콘 디자인 별로 박스 보더(board)에 얹어서 테스트 하는 과정입니다. 애플리케이션 아이콘은 네이버를 상징하는 그린컬러 보드와 매칭을 시켰고, 모바일웹 아이콘은 깔끔한 화이트 보드와 매칭했는데요. 배경이 되는 박스보더와 아이콘 색이 유사할 경우, 아이콘 주제 오브젝트가 부각되지 않는다는 단점이 발견되었습니다. 아래 녹색 우산으로 표현한 날씨 아이콘이 녹색보더 위에서 전혀 눈에 띄지 않는 것처럼요.

결론은, 아이콘을 박스보더에서 내리는 것이었습니다. 아이콘 주제 오브젝트의 크기를 박스보더만큼 키워서 그 것 자체로 하나의 아이콘이 되게 하는 방법인데요. 네이버 모바일 아이콘들을 잘 살펴보시면, 배경이 있는 것보다 주제 오브젝트가 하나의 아이콘으로 디자인 되어 있습니다.

<오브젝트 자체가 아이콘 된 네이버 모바일 아이콘>

  재료의 질감이 느껴지는 섬세한 표현

네이버 모바일 아이콘은 입체감이 살아 있다는 특징이 있습니다. 앞에서 피겨선수권대회 바로가기 모바일 아이콘을 확대해서 보여드렸는데요. 이외에도 재료의 질감까지 그리고 세밀한 눈금까지 실물 그대로 섬세하게 표현한 아이콘들이 있습니다. 한 땀~한 땀~ 이태리 장인 정신으로 만든 아이콘! 어떤 비밀이 숨어 있는지 한 번 확대해 볼까요? ^^

가계부 아이콘입니다. 가죽표지의 질감이 느껴지시죠? 오목하게 홈을 파서 입체감을 살린 돼지 저금통도 인상적입니다.

<확대한 네이버 모바일 가계부 아이콘>

날씨 아이콘입니다. 실제 온도계와 똑같이 눈금이 그려져 있습니다. 

<확대한 네이버 모바일 날씨 아이콘>

캘린더 아이콘 인데요. 묶음 부분의 가죽질감은 가계부 아이콘에서도 보실 수 있었던 거고요. 달력이 찢겨나간 흔적… 찾으셨나요? 촘촘하고 섬세한 표현의 종결입니다. ^^

<확대한 네이버 모바일 캘린더 아이콘>

열 여섯 개의 시안과 스무 개가 넘는 사이즈 작업

가로•세로 1cm 작은 사각형 아이콘 하나가 완성되기까지 참 많은 단계와 고민의 과정들이 반복되는데요. 부동산 아이콘이 완성되는 과정에도 그 모든 것들이 고스란히 녹아 있습니다.

아이디어를 수집하고 스케치하는 단계입니다.

<네이버 모바일 부동산 아이콘 아이디어 스케치 과정>

건물 모양과 지붕의 색, 그리고 네이버 로고의 위치, 나무와 펜스의 모양까지 고려해 16개가 넘는 디자인 시안이 만들어졌습니다. 눈치 채셨는지 모르겠지만, 나무에는 그림자까지 포함되어 있습니다. ^^;

<네이버 모바일 부동산 아이콘 시안들>

디자인이 결정되었다고 모든 과정이 끝난 것은 아닙니다. 다양한 스마트폰과 태블릿 PC 단말기 기종에 따라 아이콘의 크기를 달리해서 배포하게 됩니다.

<다양한 크기로 제작된 네이버 모바일 부동산 아이콘>

디자이너 개인적으로는 프로야구중계 아이콘을 만드는 과정이 즐거웠습니다. 야구를 좋아해서 그런지 애착이 간다고 할까요? ‘한 눈에 야구중계로 연결될 것을 예상할 수 있는 재치 있는 아이콘’이라는 어느 이용자의 격려 때문이기도 합니다. ^^

<네이버 모바일 야구중계 아이콘이 만들어진 과정>

야구중계 아이콘은 스포츠 아이콘과 이질적이지 않으면서 야구중계만의 특징을 살려야 하는 과제가
있었는데요. 여러 가지 아이디어와 시안을 거쳐서 완성이 되었습니다. 물론 확대해 보면, 파릇파릇
한 잔디에서 풀냄새가 날 것 같이 섬세한 그림입니다. 야구공의 한 땀~ 한 땀~도 짐작이 가시죠? ^^

<네이버 모바일 야구중계 아이콘>

확대된 아이콘을 보시고 어차피 잘 보이지 않는 부분인데 그렇게까지 자세하게 작업하는 것이 무슨 의미가 있냐고, 의문을 가지시는 분들도 계실 것 같습니다. 물론 요즘 스마트 폰이나 태블릿 PC 기기가 날로 발전하고 있기 때문에 고해상도의 이미지가 필요하다는 실질적인 이유가 가장 먼저입니다. 그리고 한 가지 더해지기를 바라는 것은…’마음’입니다.
네이버에서 하나의 서비스가 만들어지기까지는 기획과 개발과 디자인과 운영 등… 단어조차 생소한 분야의 많은 손길을 거쳐야 합니다. (저도 입사 이후에 알고 놀랐습니다. ^^;) 그렇게 보이지는 않지만 숨은 노력과 땀이 1cm 정사각형 뒤에 녹아 있었습니다. 작고 잘 보이지 않는 부분이라도 서비스의 얼굴일 수 있다는 마음으로 잘, 그리고 정성껏 만들어 보자는 ‘마음’을 숨겨 놓았습니다.
이제 보이시나요? ^^