본문 바로가기

카테고리 없음

simplicity: 아이콘 디자인의 법칙



아이폰을 처음 보았을 때 나를 매료시켰던 디자인은 끝이 둥근 네모 모양의 아이콘들이 일정한 간격으로 그리드를 맞추어 떠 있는 것이었다. 간결의 네모 속의 네모. 네모난 기계 속의 네모난 세상을 통해 우리는 무한한 경험을 하고 있다. 특히나 홈화면의 통화, 메모, 캘린더, 메일 등 애플의 기본 어플리케이션 아이콘들은 애플 자사에서 심혈을 기울인 디자인이다. 의미 이해가 쉽고 배우기 쉽고 명확한 선택을 가능하게 하도록 구체적이며 간결한 기준 하에 제작이 되었다. 수많은 어플리케이션 개발자들이 자신의 브랜드이자 로고인 아이콘을 만드는 데 있어 확실한 제작 기준이 될 수 있도록 가이드라인을 잡아준 셈이다. 

그래픽 사용자 인터페이스 기반의 환경에서 언어의 대안으로 자리잡은 아이콘은 이제 컴퓨터와 인터넷 산업의 핵심이라고 할 수 있다.  아이콘이 잘 나오면 어플이 성공할 가능성도 높은데 그만큼 어플의 정체성이 확실하기 때문이다. 예를 들면 '카카오톡'의 경우 모바일 메시징이라는 기능에 노란색의 잘 나온 아이콘 디자인이 더불어서 성공을 한 케이스이다.



애플은 작년 2010 WWDC 당시 
App store의 아이콘으로 'hyperwall' 디지털 아트를 선보임으로써 많은 관중들을 놀라게 했었다. 영상을 보면 Falling and Movind Icons를 경험할 수 있을 것이다. 컬러별로 분류가 된 아이콘들은 전세계 App store에서 다운로드 될 때마다 약 10,800개의 어플리케이션들이 테트리스 조각처럼 떨어지듯 쏟아진다. 아이콘을 중심으로한 인터랙션이 이루어지는 미디어 아트인 동시에 앱스토어의 대단한 위력을 보여준다. 
 






아이콘을 활용한 'hyperwall'이 첫 선을 보인 것은 2009 WWDC이었다. 애플은 당시 시네마 디스플레이의 육중한 하이퍼월에 그 해 가장 인기있는 아이폰 어플리케이션 20,000종을 전시하였다. 마치 App들이 맥박뛰는 듯이 진동하는 모습에서 관중들은 신기한 듯이 넋을 잃고 쳐다보고 있다. 하지만 이것 또한 단순한 디스플레이 용도가 아니라 실제 App Store에서 어플이 다운로드 되고 있는 실황을 보여주는 것인데 전세계적으로 누군가가 다운로드를 하면 저렇게 심장이 살이 숨쉬는 듯이 반응을 하는 것이다. 1분에 3,000개 이상이 다운로드가 된다고 하는데 그 실황을 관객들은 지켜보고 있는 것이다.   



또 하나 재미있는 조사 결과가 있다. What color are most iPhone & iPad apps? 라는 화두를 가지고 500개의 아이폰, 아이패드 App색상을 조사한 결과 파랑색이 가장 많다고 통계가 나왔다. 두번째는 검정색이다. 대게 정보나 유틸 관련 어플은 파랑색이 많은 편이며, 게임 어플은 다수가 빨간색이다. 도표에서 보이듯이 파랑과 검정색 어플은 압도적으로 많은 숫자를 차지하는데 App개발을 할 때 가급적이면 차별화를 위해 파랑색 아이콘은 피하라는 말도 있다.  
   








아이콘, 애플의 디자이너들에게 이것은 예술이고, 창조적인 표현이며, 유산이다. 커다란 초점과 복잡성이 단순함으로 표현되었다. 그러나 복잡하게 보이는 것보다 단순하게 보이는 것이 훨씬 더 어려운 것이다. 그리고 이러한 단순함이 성공적인 사용자 경험을 제공하는 본질이다. 애플의 아이콘의 디자인은 철저한 Simplicity가 이루어져야 한다. 'Keep It Simple, Stupid'하게 일명 KISS의 법칙이라고 하는 것을 지켜야 한다. 그래픽에서 있어 픽토그램이나 아이콘들은 원래 단순함, Simplicity가 불문율이며 법칙이다. 

스티브 잡스가 'Mac OS X Leopard: Designer's Guide to icons'를 통해 아이콘 디자인에 관하여 한 말이다. 

 

“Gorgeous, artistic icons are an important part of the Mac OS user experience. Users expect beautiful icons that tell an application’s story in a clear and memorable way.”

 
애플이 말하는 아이콘 디자인의 원칙은 
 

1. Approach Icon Design Holistically (아이콘은 미적, 공학적 등 종합적인 관점에서 디자인할 것)
2. Consider Your Audience (고객의 입장에서 디자인할 것)

3. Design for the Size the Icon will be Used At (아이콘이 사용될 공간에 따라 융통성 있게 디자인할 것) 

4. Keep Icons Simple and Iconic (단순하고 상징성이 있을 것)

5. Cast Consistent Lighting, Reflections, and Shadows (조명, 반사, 그림자 등의 일관성을 유지할 것)

6. Utilize a Limited Perspective (원근법 역시 일관성을 유지할 것)

7. Create Consistent Icon Set Styles (통일된 모습의 아이콘 집합을 디자인할 것) 

모든 어플리케이션에는 아이콘이 필요하다. 아이폰이나 아이패드 홈화면에 띄울 아이콘(아이패드 기준 사이즈 72x72)과 앱스토어에 등록할 아이콘(512x512), spotlight 서치 결과에 보여지는 아이콘(50x50) 혹은 셋팅화면용 아이콘(29x29) 은 어플리케이션 등록에 필요한 필수로 제작해야할 아이콘이다.  

아이콘은 홈화면에 다른 어플리케이션의 아이콘들와 함께 그리드를 맞추어 있기 때문에 보다 간결하고, 용도를 즉각적으로 인식할 수 있어야 하며 눈길을 끌 수 있어야 한다. 가치있어 보이고 아름답기도 해야한다. 둥근모서리와 그림자효과, 반사효과를 주는 것이 기본이며 샤인효과는 용도에 따라 뺄 수도 있다. 둥근 네모 안의 이미지는 크게 꽉채워서 눈에 띄게 해주는 것이 좋고 사람들이 흔히 쓰는 배경색과 비슷한 색상은 피하는 것이 좋다. 기어가는 꼬마도 알아 볼 수 있도록 쉬운 심볼이어야 한다. 



안드로이드는 아이콘에서 iOS과 차별화가 이루어지고 있는데 애플은 둥글린 네모가 표준이지만 안드로이드 아이콘은 다양한 shape으로 디자인을 할 수 있으며 무엇보다 비비드한 컬러가 특징이다. 새파란, 새빨간, 샛노란 느낌이 강렬하게 다가온다. 마치 구글의 로고 색상에서 추출한 듯한 색상이다. 구글의 로고에 쉽게 적응하지 못하는 한국인들은 특히나 애플의 불투명한 색상과 둥글린 네모에 익숙해져버리면 이런 강렬한 안드로이드 어플의 아이콘이 거부감이 들기도 하는데 이렇듯 애플과 구글의 캐릭터가 분명한 것이 다행스럽다. 



안드로이드는 공개된 프로그램이라 수많은 사람들이 각자의 용도에 맞게 고치기도 하고 필요없는 기능은 빼고 필요한 것은 더 넣기도 하면서 자신만의 최적화를 거치게 된다. 그래서 사용자에 따라 다른 디자인으로 꾸미게 되면 같은 OS라는 것이 무색할 정도로 중구난방으로 기본적인 인터페이스가 달라질 수가 있다. 그렇게 되면 수준이하의 잘못된 디자인이 나올 가능성이 있기에 안드로이드는 브랜드 파워를 지키기 위해 '안드로이드 UI 디자인 가이드라인'을 준수하라고 한다. 


Do 와 Don't의 법칙을 보면 안드로이드 아이콘도 자신만의 디자인 법칙이 보인다. 무엇보다 애플의 아이콘 디자인과 안드로이드 아이콘 디자인의 차이점은 Glossy의 유무이다. 애플은 아이콘 상단에 그라데이션과 같은 그래픽을 주어 글로시함을 강조하는데 안드로이드는 불투명한 느낌 자체를 거부한다. 

  

어플리케이션의 네모난 아이콘은 의심할 여지없이 애플의 대표적인 그래픽 디자인이다. 'hyperwall'에서도 경험했듯이 스크린이나 유리창 등 다양한 매체를 통해 애플은 아이콘을 그래픽 디스플레이에 사용되고 있다. WWDC 2011의 행사 개최를 위한 메인 로고에서도 우리는 수천 개의 아이콘이 애플의 베어먹은 사과를 가득 채우고 있는 것을 경험한다. 




또한 2009 WWDC 당시 컨퍼런스장을 장식한 아이콘들. 아이폰의 전세계적인 출시로 애플 신드롬이 한창이었던 2009년, 애플은 아이콘 그래픽에 그러한 상징성을 부여하며 샌프란시스코 모스콘 컨퍼런스장 유리 전면을 아이콘으로 디스플레이하였다. 마치 애니메이션이나 게임 쇼케이스를 보는 듯이 신나보인다. 


 삼성이 애플을 베어먹겠다?
 
요즘 한창 이슈거리인 애플의 삼성 고소와 삼성의 애플 맞고소 건에도 아이콘 디자인은 논란의 중심에 있다. 삼성을 상대로 애플이 디자인 표절을 문제삼아 소송을 건 것은 하드웨어 모양, UI와 패키지 디자인뿐만이 아니라 아이콘 디자인도 큰 비중을 차지한다. 연두색 네모 안에 수화기 모양이 그려진 통화 아이콘이나 사진보관함을 나타내는 아이콘의 해바라기 그림 등이 유사하다는 점이 그 예이다.

원래 아이는 자랄 때 어른을 보고 따라한다. 스마트폰의 표준을 제시하며 이미 스탠다드가 되어버린 애플의 아이콘 디자인은 모방을 초래할 수 밖에 없다. 날씨 위젯으로 정체성을 확립한 htc처럼 삼성도 차별성을 띈 신선한 디자인을 전면에 내걸어야 헸는데 그렇지 못한 것이 아쉽다. 아이가 어른을 무서워하지 않는 시점이 되었을 때 성장을 하고 성숙하게 되는데 삼성이 그런 성장통을 겪고 거듭나기를 바란다.  

요즘 갓난 아기들은 종이에 프린트된 둥글린 네모 아이콘만 봐도 꾹 눌러보고 작동하기를 기대할 것이다. 그러나 아무런 작동을 하지 않으면 생각지 못한 의외성에 대한 충격으로 울 수도 있다. 이렇게 우리는 디지털 환경의 아이콘에 익숙한 세대. 아이콘의 simplicity의 법칙은 디지털을 살아가는 우리에게도 필요한 덕목처럼 느껴진다. 정보의 양이 너무 많은 디지털 환경에서 우리는 단순함을 무기로 삼아야만 제대로 기능할 수 있을 것이다. 


+
최윤정 


ps 
애플 아이콘 디자인 가이드라인 참고자료  http://www.durl.kr/ctxp7
안드로이드 아이콘 디자인 가이드라인 참고자료  http://durl.kr/ctxqp