brunch

매거진 숏터디 Shortudy

라이킷 134 댓글 4

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by berryverylucky Jul 26. 2019

왜 iOS와 AOS에서 다른 공유 아이콘을 쓰는가?

A share icon for iOS and AOS

새로 시작하는 매거진의 첫 번째 아티클로써 이 매거진의 콘셉트를 간단하게 소개하고자 한다.

숏터디(Shortudy)는 Short+Study의 합성어로 작은 주제를 딥하게 공부해보자는 취지이다.

현재 IT기업의 Product designer로 일하면서 여러 질문이 생긴적이 많았다. 그때마다 바로바로 찾아볼 수 없을 때도 있었고, 혹은 혼자 공부하고 잊어버리는 경우도 있었다. 그래서 이 매거진을 통해 작은 요소에 집중하여 스스로 공부할 수 있도록 영감을 주고 또 그 내용을 브런치에 공유하려고 한다.

UI 컴포넌트에 관련된 것 일 수도 있고, 다른 앱의 벤치마킹 혹은 UX flow에 대한 것 일 수도 있다.

제한을 두지 않고 자유롭게 "Why"라는 의문이 들 때마다 스터디를 하려고 한다. 주요 목표는 간단하게라도 그 내용을 정리하고 공유하며 미래의 내가 리마인딩 할 수 있도록 하는 것이다. 아티클을 보면서 수정해야 할 부분이나 추가해야 할 사항이 있으면 언제든지 코멘트 고고!!

Share icon

현재 하고 있는 서비스의 주요 유저가 iOS유저가 많아 우리팀은 디자인을 시작할 때 항상 IOS 화면을 우선작업 한 후 안드로이드 OS에 맞게 UX/UI를 수정하는 방식으로 진행한다. 그동안은 당연한 거라 인지하지 못했는데 개발자한테서 요청이 오고나서 의문이 들었다.

개발자 : AOS 스크린에 iOS 쉐어 아이콘이 들어가 있으니 다시 전달해주세요

나 : 맞다!!! AOS는 세 개의 점이 있는 공유 아이콘을 쓰지!! 근데 왜 공유 아이콘만 OS마다 다르게 쓰는 거지?

아이콘 전달 후 이 요소에 대해 자세히 찾아보고 궁금증을 해결하기로 마음먹었다. 다른 아이콘은 그렇지 않은데 유독 공유 아이콘만 OS에 따라 다르게 쓰이고 있다. 그렇다면 왜 다른 쉐입으로 쓰이는가, 시작은 언제인가, 그 이유는? 또 다른 앱들은 어떻게 운영하고 있는지에 대한 조사가 이 아티클의 내용이 될 것 같다.

History

아이콘은 OS가 업데이트하면서 진화하고 OS마다 차별화가 되어왔다. 위의 아이콘들은 주요 OS의 공유 아이콘들을 버전별로 나열한것이다. 이번 숏터디에서는 iOS와 AOS에만 집중하여 분석하려고 한다.

Android의 공유 아이콘은 구글 안드로이드와 쉐어디스에서 시작되었다. 쉐어 디스는 개발자를 위한 플러그인 웹사이트로 2006년에 시작하였고 위의 아이콘이 쉐어디스의 로고로 활용되고 있다. 워드프로세스 디자이너 알렉스 킹이 오픈소스라이센스에 쉐어아이콘을 릴리즈하고 해당 아이콘이 쉐어디스에 팔렸다. 그리고 현재까지 안드로이드의 대표 공유 아이콘으로 쓰이고 있다.

OS마다 공유아이콘의 개념이 살짝 다른데 안드로이드의 경우 아이콘의 쉐입처럼 'One to many'의 개념으로 하나의 정보를 여러곳에 뿌린다는 스토리가 잘 녹아 있다.

iOS에서는 Share가 아닌 Action이라고 부른다. 이유는 정보를 공유하는 것 뿐만 아니라 복사, 저장, 페이보릿등 여러 액션이 가능한 모달을 부르기 때문이다. Apple iOS6에서는 박스에 오른쪽을 가르키는 화살 아이콘을 썼었는데, WWDC2013에서 iOS7에서 처음 위를 가르키는 화살표와 박스 아이콘이 선보여진 후 줄곳 이 아이콘으로 사용되고 있다. 몇몇 유저들은 해당 아이콘이 다운로드와 업로드의 아이콘과 비슷해 혼란을 줄 수 있다고 코멘트를 하기도 했다.

Reference

kinds of share icon confusing icons iOS Share icon

Comparison

다른 앱들은 iOS와 AOS의 환경에서 어떤 공유 아이콘을 쓰고 있을까? 흥미롭게도 OS에 따라 다른 공유 아이콘을 쓰는 앱도 있었고, 제 3의 공유 아이콘 하나로 여러 OS다 커버하는 경우도 있었다. 공유 아이콘의 쉐입뿐 아니라 누르고 난 후의 기능에서도 차이점을 보였다.

Airbnb

Airbnb는 OS 스텐다드 아이콘들이 사용되었다.

구글 매터리얼 디자인을 적용시킨 앱이라 그런지 AOS에서는 공유 아이콘과 다른 아이콘들도 구글 매터리얼 스텐다드 아이콘이 적용되었다. (Google material - Airbnb)

공유 아이콘을 누른 후 나오는 모달 리스트 구성 또한 달랐다. iOS의 경우 사용자 이름이 오른 상단에 위치하고 정해진 공유 채널만 보여지는 반면, AOS의 공유에서는 Close 버튼이 오른 상단에 위치하고 (안드로이드에 백버튼과 딤드레이어가 있음에도..) 공유 가능한 다양한 앱 리스트들을 볼 수 있다.

Google map

안드로이드의 대표앱 중 하나인 구글맵에도 OS에 따른 공유 아이콘을 사용하는지 궁금해 찾아보게 되었다.

흥미로웠던 점은 OS에 따라 공유 아이콘의 위치와 기능이 다르다는 점이다. iOS에서는 공유 아이콘이 탑바 오른 상단에 위치해 있고 이것을 누를 경우 iOS 시스템 모달이 나온다.

AOS 구글맵의 공유 아이콘은 'Share place'라는 이름으로 오버뷰 탭안에 있고, 아이콘을 장소를 추가하는 기능과 다양한 공유 가능한 앱이 바둑판식 배열로 나타난다.

Share more place를 누르면 이동이 가능한 위젯으로 화면안에 보여져 쉽게 여러장소를 추가하고 한번에 쉐어가 가능하다. AOS에서만 쓸 수 있는 한 단계 업그레이드된 장소 공유 기능이라 볼 수 있다.

그렇다면 공유아이콘은 왜 OS마다 다른곳에 위치해 있는가? 추측하건데 iOS의 경우 홈버튼을 2번 탭하면 상단이 내려오기 때문에 탑바에 있는 아이콘들도 손쉽게 클릭이 가능하다. 반면 AOS의 경우 공유 아이콘을 중간지점 오른쪽 thumb zone에 위치시켜 공유가 쉽도록 하였다.

Netflix

넷플릭스는 공유 아이콘을 제외하고 다른 아이콘들은 OS상관없이 모두 동일하게 적용되었다.

그렇다면 공유아이콘만 다르게 적용해야하는 이유는 뭘까? 해당 OS를 쓰는 유저에게 익숙한 것을 제공하기 위해서 일 것 같다. 한번 핸드폰을 사면 기본 3-4년은 쓰는데 그 OS에서 자주 노출하는 아이콘에 익숙해져 있기 때문일거라 추측해본다. 공유 아이콘을 누르면 나오는 옵션이 두 OS에서 동일하다. 넷플릭스에서는 공유보다영화&드라마 추천의 개념으로 접근하기 때문에 메시지 앱이 주 옵션으로 나온다.

Facebook and Youtube

Facebook과 Youtube에서는 제 3의 공유 아이콘으로 OS상관 없이 동일하게 쓰는 방식을 택하였다.

끝이 샤프한 화살표 아이콘으로 정보를 어디론가 보낼수 있다는 느낌을 준다. 유투브 같은 경우 아이콘 아래에 Share라는 명확한 이름이 붙어 있기 때문에 처음보는 아이콘이라도 그 역활을 쉽게 알수 있다.

쉐어를 누른 후 열리는 모달에서 차이점을 보이는데, IOS는 링크를 보낼 수 있는 4가지 기본 채널이 보여지고, AOS는 내가 다운 받은 앱들 중 쉐어가능한 앱들을 다 보여준다.

Facebook은 탑바의 컬러가 OS에 따라 달라서 아이콘도 그에 따라 IOS에서는 블랙, AOS에서는 화이트의 솔리드 아이콘으로 나타난다. OS마다의 차이점은 쉐어 버튼을 눌렀을때 드러난다. 'More options'에서 OS에 따라 기본 공유 아이콘으로 나타난다.

Others

모든앱이 OS마다 공유 아이콘을 다르게 적용시키고 스텐다드 룰을 따르는건 아니었다.

몇몇앱은 OS상관 없이 섞어쓰는 앱들도 많이 있다. 예를 들면 첫번째 이미지인 마이크로소프트 액셀 앱의 경우 iOS6의 공유 아이콘을 안드로이드앱에 적용시켰다. 두번째 이미지인 스타벅스 태국 iOS앱에서는 오른쪽 상단에 안드로이드 공유 아이콘을 확인할 수 있었다. 마찬가지로 쇼핑앱 라자다 에서도 역시 iOS에서 AOS 공유 아이콘이 쓰였다.

Which icon will be easiest for users to understand?

어떤 아이콘이 유저에게 더 쉽게 공유 아이콘으로 인지되는가?(유저테스트 결과 자세히보기 )

2018년도 유저빌리티 허브에서 진행한 유저 테스트의 결과를 보면 56%의 사람들이 Android OS의 쉐어 아이콘을 더 쉽게 공유를 위한 툴로 인지하는 것 같다. 고작 50명이 참여한 결과라 100% 정확한 답이라고 할 순 없지만 2017년, 2014년도 에 진행된 다른 테스트에서도 AOS 공유 아이콘이 높은 비율로 선택 받았다.

친절한 아이콘 = 익숙한 아이콘

유저에게 친절한 아이콘은 타이틀 없이도 무엇을 나타내는지, 어떤 상호작용을 할지 예상이 되는 아이콘이다.

X(Close), <(Back)처럼 아이콘 하나로만 인지가 가능한게 좋은 아이콘이라 생각한다.

많은 유저들이 하루에도 몇번씩 들어가는 페이스북, 유튜브에서 제3의 공유 아이콘을 노출함으로써,

유저들이 점차 이에 익숙해지고 있는 단계가 아닐까? 4-5년 후에는 이 아이콘을 타이틀 없이도 쓸 수 있고, OS 상관 없이 하나로 사용 가능한 SHARE를 대표하는 아이콘이 될 수 있지 않을까 예상해본다.

영어로 번역한 아티클 보러가기 [Berry's Medium]

keyword