태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

이 포스팅은 pixelapse.com에 게시된 Min Ming Lo의 글(Share:The Icon No One Agrees On)을 번역한 것입니다.


이 아이콘들의 공통점은 무엇일까? 짐작하다시피 이 아이콘들은 모두 공유(Share) 기능에 대한 의미를 전달한다. 근래 들어 소셜 네트워크 서비스나 이메일을 활용한 콘텐츠 공유는 꽤 범용적이 되었다 할 수 있지만, 디자이너들은 이러한 기능을 상징하는 아이콘의 표현방식에 대해서 아직 합의점을 도출 해내지 못했다. 그 뿐 아니라 애플의 iOS나 구글의 Android 같은 주요 플랫폼 마저도 수 년간 몇 번의 변화를 거쳐 각기 다른 표현방식을 택해왔다. 따라서 나는 이 중 어떤 아이콘이 사용자에게 '공유'의 의미를 가장 효과적으로 전달할 수 있는지 밝혀내기 위해 고민하게 되었다.



The Outgoing Tray -iOS 7 이전 버젼

이전 버전의 iOS에서 쓰이던 공유 아이콘은 수 년이 흘렀음에도 여전히 맥 OS X 매버릭스에서 쓰이고 있다. ( *역자 주: OS X 요세미티 이후로는 Uploader 아이콘이 쓰이고 있다.) 이 아이콘의 디자인은 나름 괜찮다고 생각한다. 아이콘에서 화살표는 쟁반의 바깥쪽을 향하는 방법으로 공유를 의미한다. 처음 아이폰이 출시된 이후로 수년간 사람들은 점차 이 아이콘과 친숙해지게 되었지만 곧 iOS7이 발표되었다.




Uploader - iOS7 이후


이 아이콘을 처음 본 것은 애플의 WWDC 2013, iOS7 공식 발표때로 기억한다. 나는 다른 사람들도 애플의 이 새로운 아이콘을 싫어한다는 것을 확인하기 위해 즉시 다시 만들어보기도 했다. 이 아이콘은 문제점은 생김새가 마치 업로드 아이콘 같다는 점이다. 만약 당신이 이 아이콘을 다운로드 아이콘 바로 옆에 둔다면 디자인이 얼마나 헷갈리는 지 바로 알아챌 수 있을 것이다. 윗쪽을 향하는 화살표는 명백하게 다운로드 화살표의 반대 방향이며 업로드에 대한 표현이라 볼 수 있다.



Three Dots - 안드로이드

안드로이드의 공유 아이콘은  세 개의 점과 이 점들을 연결하는 라인의 단순한 형태로 구성되어 있으며, 개발자들에게 인기있는 플러그인인 'ShareThis'에서 인기있는 소셜플랫폼에 공유하기 위해 활용되고 있기도 하다. 이 아이콘은 마치 노드를 연결하는 꼭지점 그래프의 형태처럼 보인다. 언뜻 봤을 때 정확히 어떤 의미인지 확 와 닿지는 않지만 디자이너의 의도를 추측해보자면, 아마도 그는 왼쪽의 단일 노드에서 오른쪽의 다른 두 노드까지 확장되는 느낌의 아이디어를 표현해보고자 했던 듯 하다. 전반적으로 이 디자인의 아이디어는 직관적이진 않지만, 유저들이 이미 여러 차례에 걸쳐 어떤 의미인지 학습해왔기 때문에 아이콘에서 공유를 연상하는 것이 가능한 것으로 볼 수 있다.  아마도 애플 제품만 사용하는 유저들은 이 아이콘을 인지하는데 문제를 겪게 될 가능성이 있다.


비과학적인 실험이지만 'share icon'에 대한 10건 중 7건 이상의 구글 검색 결과들은  

표현방식으로써 안드로이드의 아이콘을 차용하는 것으로 나타났다.



The Y - 이전 버젼의 안드로이드

노드 형태의 아이콘에 앞서 안드로이드 기반 디바이스에서는 아래와 같은 Y자 형태의 공유 아이콘이 쓰였었다. 이 아이콘은 한 지점에서 두 방향의 외곽으로 퍼져나가는 형태를 표현하고 있다. 비록 지금은 널리 쓰이진 않지만,  상하 대칭의 구조나 외부를 향한 화살표의 움직임은 공유라는 행위에 대해 훨씬 잘 표현하고 있다고 생각하기 때문에 나는 이 아이콘을 정말 좋아한다. 개인적으로 봤을 때 순수하게 형태로만 판단한다면 이 아이콘이 가장 공유의 컨셉을 잘 표현하고 있다고 생각한다.


왼쪽이 안드로이드의 오리지널 공유 아이콘. 오른쪽과 같이 살짝 다르게 변형 되기도 한다. 



The Gift - 윈도우즈 폰 7

선물인지 뭔지는 몰라도, 윈도우즈 폰 7의 공유 아이콘은 재미는 있지만 조금 이상한 선택인 듯 싶다. 선물을 공유한다 라는 디자인 컨셉은 명확한 편이다. 그러나 이 아이콘의 문제점은 당신이 정말로 선물을 공유해주는 것이 아니라 단지 건네주는 것 뿐 이라는데 있다. 


이 아이콘의 디자인은 새롭고 흥미로운 편이지만, 유저에게는 다소 친숙하지 않은 느낌이다. 처음 이 아이콘을 보았을 때 나는 이 아이콘이 대체 어떤 기능을 할 수 있는지 전혀 알 수가 없었다. 아무튼 윈도우즈 폰에서 이 아이콘이 쓰인 기간은 1년 반 정도로 짧게 끝났고, 윈도우즈 8에서는 새로운 아이콘이 등장했다.



The Circle - 윈도우즈 8

우분투의 로고를 연상시키는 윈도우즈 8의 공유 아이콘은 해당 OS와 윈도우즈 폰 등에서 널리 쓰이고 있다. 그러나 이 아이콘은 어떤 의미를 갖는지 알기 힘들거니와 매우 추상적인 형태여서 만약 레이블 마저 없다면 아이콘을 처음 접하는 유저는 아이콘이 어떤 기능을 수행 하는지에 대해 큰 혼란을 느낄 것이다.




The Hands - Open Share Icon

Shareholic(http://shareholic.com) 역시 디자이너들이 보편적으로 사용할 수 있는 공유 아이콘을 만들어보려 시도했다. 그들은 Open Share Icon을 다음과 같이 설명하고 있다.


Open Share Icon은 누군가의 손에서 다른 사람의 손으로 전해지는 듯한 공유의 컨셉을 시각적으로 표현한 것이다. 더불어 '이것 좀 봐바!' 와 '눈'을 표현한 것이기도 하다.

전반적으로 디자인의 컨셉이나 아이디어는 흥미롭고 독특하지만, 만약 사용자들이 이 아이콘을 보았을 때 손이라고 느끼지 못한다면 의도했던 컨셉은 의미를 잃게 된다. 불행하게도 이 아이콘은 유행이 되지 못했고 몇 몇 사이트를 제외하고는 좀처럼 찾아볼 수 없게 되었다.



디자이너들은 이처럼 다양한 플랫폼에서 갖가지 다른 버젼의 공유아이콘 때문에 절망 했음에도, 여전히 범용적인 공유아이콘을 만들어내려 노력했다. 다음의 몇 가지 아이콘을 더 살펴보자.



The Spread



몇몇 디자이너들은 공유의 의미를 표현하기 위해 'Spreading(퍼짐)'의 아이디어를 사용하기도 했다. 이 아이디어는 공유의 네트워크 효과를 꽤 잘 표현하고 있지만, 좋은 공유 아이콘이 되기에는 전반적으로 복잡하고 어딘가 어수선하다는 느낌을 지울 수 없다.



The Graph Diagram  



어떤 공유 아이콘들은 가운데 점에 연결된 다양한 크기의 원들로 구성되어 있다. 이 아이콘은 그래프 다이어그램과 유사하게 보인다. 이러한 디자인은 화학 구조의 표현에는 적절하다고 볼 수 있지만, 공유의 컨셉을 명확하게 표현하고 있지는 않다고 본다.



The Open Hands


몇년 전, 펼친 손바닥 아이콘(The Open Hands)은 공유된 네트워크 폴더를 의미했다. 그리고 몇몇 기업용 소프트 웨어는 여전히 이 아이콘을 공유 액션에 대한 상징으로 사용하고 있다. 그러나 이 공유 액션은 일반적으로 Lan(Local Area Network)의 공유 세팅을 의미할지언정 소셜 플랫폼의 공유 행동을 의미하지는 않는다.



Many People



이 아이콘은 일반적으로 특정 팀 멤버나 공동 작업자와의 공유를 표현할 때 쓰이곤 한다. 나는 이전에 이 아이콘이 소셜 플랫폼에서의 공유의 맥락에서 쓰이는 것을 본적은 전혀 없다.



Milkshake!

가끔은 디자이너가 아닌 사람에게 디자인의 문제에 대해 묻는 것이 최고의 해답을 얻어 낼 수 있는 길이 되기도 한다. 나는 동거중인 친구에게 이 문제에 대해 물어보았다. "공유를 생각했을 때 가장 먼저 떠오르는 게 뭐야? 공유하는 행위를 아이콘으로 표현한다면 어떻게 할래?" 곧이어 친구는 노트에 음료수 잔을 그리기 시작했다. 그는 이 음료수를 두개의 빨대가 꽂혀있는 밀크쉐이크라고 설명했다.



밀크쉐이크 아이콘은 정말 재미있는 발상이다. 이 아이콘은 공유의 의미를 꽤 적절하게 의미하고 있다. 그러나 여기에는 두가지의 잠재적인 이슈가 있다. 먼저 우리가 이미 일반적으로 사용하고 있는 공유 아이콘과 괴리감이 느껴진다. 더 중요한 문제는 이 아이콘은 단 두 사람이 같은 객체를 공유하고 있는 매우 특정한 컨셉을 전달하고 있지만, 실제 공유가 이루어지는 맥락은 아주 많은 플랫폼과 사람들 사이에서 이루어진다는 점에 있다.


Min Ming Lo가 재작업한 Milkshake 아이콘

 


종합


논의한 공유 아이콘을 종합해보면 위와 같다.



그렇다면 어떤 아이콘을 써야 하나?

앞으로도 우리가 하나의 통합된 공유 아이콘을 사용하는 일이 있을 것 같지는 않다. 애플이 안드로이드의 디자인 언어를 사용하지 않을 것이고, 구글이 마이크로소프트의 디자인 정책을 적용하지도, 마이크로소프트가 다른 플랫폼의 공유 아이콘을 사용하지도 않을 것이기 때문이다. 세 곳의 메이저 OS 회사 각자가 거대한 시장점유율을 나누어 가지기 시작한 이후로 사용자들은 같은 기능을 표현하는 최소 세 종류의 다른 아이콘을 통해 시스템과 상호작용하게 되었다.


최고의 아이콘은 사용자와 가장 친숙한 것.


최고의 아이콘은 가장 심플한 것도 아니고, 가장 감각적인 디자인의 아이콘도 아니다. 최고의 아이콘은 사용자와 가장 친숙한 것이다. 효과적인 아이콘이란, 사용자가 최소한의 인지적 노력으로 기능을 이해할 수 있도록 돕는 것이라 할 수 있다.

 

당신이 만드는 아이콘이 쓰일 플랫폼에 따라 공유 아이콘을 선택해야 한다.


만약 당신이 애플의 iOS7을 기반으로 앱을 개발중이라면, 반드시 해당 플랫폼에서 이미 쓰이고 있는 'Uploader'와 같은 공유 아이콘을 사용해야 한다. 마찬가지로 안드로이드 앱을 개발중이라면 'Three Dots'를 사용해야 한다. 



만약 모든 플랫폼에서 동일한 공유 아이콘을 사용하고 싶다면?

그러나 만약 당신이 플랫폼에 관계없이 앱이나 사이트에서 단 하나의 공유 아이콘을 사용하고 싶다면, 'Outgoing Tray'나 '3 Dots' 아이콘이 최선의 선택이 될 수 있다. 이 아이콘들이 오늘날 가장 널리 알려진 아이콘들이기 때문이다. 더불어 만약 누군가 나에게 둘 중 하나만 고르라하면 '3 Dots'보다 'Outgoing Tray'를  추천하고 싶다. 이전에 애플 제품을 한번도 사용한 적이 없는 사람이라 할지라도 Outgoing Tray 아이콘은 공유 행위에 대한 의미를 잘 전달하는 반면, 3 Dots는 그 표현에 있어서 다소 추상적인 감이 있기 때문이다.


또한 1년 내로 iOS 7 의 'Uploader' 아이콘과 Windows 8의 'Circle' 아이콘은 더 널리 사용될 것이라는 점을 고려할 필요가 있다. ( *역자 주 : iOS 9이 발표된 현재에도 애플은 'Uploader' 아이콘을 채택하고 있다.)



최고의 컨셉

만약 내가 사용자와의 친숙함이나 실제 앱들에서 쓰이는 대중성을 떠나 순전히 디자인으로만 평가했다면, 나는 'The Y' 아이콘에 한 표를 던졌을 것이다. 이 아이콘이 가장 덜 추상적이기도 하고, 무언가를 공유하는 외적 방향성을 가장 쉽고 간단하게 표현하고 있기 때문이다. 상하 대칭과 더불어 매우 독특한 디자인이지만, 불행히도 이 아이콘은 아직 널리 쓰이고 있지 않다.


All works ⓒ Jaehyun Kim 2015



'design' 카테고리의 다른 글

UI 작문  (0) 2018.07.24
게임 튜토리얼에 관한 야매 실험  (0) 2017.05.22
합의되지 못한 공유 아이콘  (0) 2016.03.30
사용자 피드백의 심리학  (0) 2016.03.18

티스토리 툴바