잘 만든 아이콘, 열 기능 안 부럽다
좋은 아이콘의 조건 (feat. 당근마켓 및 카카오톡)
친구와 함께 아이콘 분석을 해보기로 했는데(근데 나만 해옴...) 욕도 해본 놈이 잘한다고 아이콘 제작을 해본 적 없는 나는 뭐가 대체 잘한 아이콘이고 뭐가 못한 아이콘인지 알아볼 수 없었다. 생각보다 아이콘은 잘하면 중박, 못하면 쪽박인 아이템으로 생각된다. 나 자신을 믿을 수 없던 나는 결국 한 아티클을 갖고 그 아티클에서 말하는 '좋은 아이콘 디자인'에 딱 들어맞는 아이콘을 가진 어플을 찾아보기로 했다. 아이콘 디자인에 대해 아예 지식이 없는 사람의 글이므로 주의 또 주의.
좋은 아이콘의 조건
https://brunch.co.kr/@ebprux/172
좋은 아이콘의 조건이 무엇일까 찾다가 위 아티클을 발견했다. Smashing Magazine에 올라온 Nick Babich의 Icons As Part of a Great User Experience의 전문을 번역한 아티클이다. 제목 그대로 아이콘의 UX 디자인 원칙에 대한 글인데, 일단 아이콘은 앱 스크린의 공간을 절약해주며 유저를 안내하는 표지 라는 것에서 시작하려고 한다. 목적에 부합하는 좋은 아이콘이 되기 위해서는 여러 가지 조건이 필요한데, 아티클이 말하는 좋은 아이콘의 조건은 다음과 같다.
1. 아이콘의 모호성을 피하기 위해 텍스트(레이블)를 이용한다.
2. 공간이 너무 적거나, 표준화된 아이콘이거나(ex. 검색-돋보기 아이콘), 아이콘이 구체적인 상황이나 시각적인 것에 관련될 경우(ex. 프린터 아이콘, 배경색을 빨갛게 변경하는 빨간 네모 아이콘) 네 가지 상황 중 두 경우가 생기면 텍스트 없이 아이콘만 사용해도 좋다
3. 튜토리얼로 아이콘을 설명하는 것은 좋은 방식이 아니다.
4. 유저가 아이콘을 먼저 볼 수 있도록 한다.
4-1. 아이콘과 텍스트가 한 줄에 있을 경우, 아이콘을 좌측에 배치한다.
4-2. 제목과 줄글 옆에 아이콘을 배치하게 되면, 제목 옆에 배치한다.
5. 숫자 좌측의 아이콘은 보통 데이터의 의도를 나타내고, 우측의 아이콘은 값의 상태를 나타낸다.
6. 아코디언 메뉴를 나타내는 아이콘은 일반적으로 좌측에 + 아이콘을 사용하는 것이 유저가 예측하기 쉽다. 다만, 우측에 아이콘을 만들 때는 충분히 큰 사이즈로 만들어야 한다.
7. 햄버거 아이콘은 고 연령층 유저에게 익숙하지 않다.
8. 아이콘은 직관적으로 만든다: 디테일에 집중하기보다는 기본적 특성을 베이스로 디자인한다. 익숙한 아이콘을 사용한다. 타겟 플랫폼에 상응하는 아이콘을 사용한다.
9. 터치스크린에서 권장하는 타겟 사이즈는 7~10mm로, 애플은 최소 44x44 px을 추천한다 + 터치 타겟 사이에 최소 거리(최소 2mm)를 유지해야 한다.
10. 유저가 아이콘을 직관적으로 이해하는지, 다음에도 또 사용할 수 있는지 테스트한다.
무려 10가지나 되는데, 실제로는 이 공통점, 혹은 원칙이 어떻게 적용되고 있는지 각각 당근마켓과 카카오톡을 통해서 살펴보았다.
아이콘 디자인 사례
당근마켓
아래 좌측 화면은 당근마켓의 '마이페이지'에 해당하는 화면이다. 맨 위의 오른쪽에는 '설정' 아이콘이 보이고, 바로 아래에는 판매내역, 구매내역, 관심 목록의 아이콘과 텍스트가 있다. 디테일이 강하다는 점에서 위의 8-1번 법칙에 어긋나지만, 당근마켓의 메인 컬러를 살리고 그 아래에 텍스트를 적어서 모호함이 적다. 무엇보다 당근마켓의 메인 기능인 '판매', '구매', '관심 목록 저장'을 위한 아이콘인 만큼 다르게 디자인한 것 같다.
판매내역, 구매내역, 관심 목록 아래에는 4-1에 따라 왼쪽에 아이콘을 두고 오른쪽에 텍스트를 배치하였다. 아이콘도 위의 아이콘보다 많이 간결해졌다. 기능별로 총 세 그룹으로 나눠 관리할 수 있도록 했는데, 먼저 첫 번째 그룹은 나의 기본정보 관리로, 당근마켓의 거래 범위를 한정하고, 거래하고 싶은 아이템이나 중고거래 셀러를 지정할 수 있도록 했다. 아이콘은 일반적인 위치 아이콘을 사용했는데, 키워드 알림이 당근마켓을 처음 사용하는 사람으로서는 헷갈릴 수 있을 것 같다. 다만 모아보기 아이콘이 정사각형으로 되어 있어서 다른 아이콘보다 조금 더 큰 느낌을 준다.
두 번째 그룹은 당근마켓의 중고거래 기능이 아니라 동네 생활 기능에 관련된 설정을 모아놨다. 당근마켓은 중고거래 어플을 넘어 동네를 하나로 잇겠다는 미션을 가지고 있는데, 일종의 OO동 인터넷 카페, OO동 커뮤니티 기능이 있다. '글'과 '댓글' 아이콘을 분리해서 해놓은 점이 눈에 띄는데, 일반적으로 글이 길어서인지 아이콘도 종이에 펜을 쓰는 아이콘으로 두었다. 주제 목록 기능 아이콘은 일반적으로 관심 목록에 많이 쓰이는 별 아이콘을 사용하였다. 초반에 동네생활 기능이 없을 때는 중고거래에서 하트만 사용하다가, 이후 동네생활 기능이 추가되자 비슷한 기능인 주제 목록 추가에 별 아이콘을 사용한 것으로 생각된다.
세 번째 그룹은 친구 초대, 공유, 공지사항, CS센터, 앱 설정 등이 있는데, 친구 초대와 공유의 차이가 명확히 느껴지지 않았고(방식 차이는 있지만 목적이 비슷하다), 맨 위에 있던 앱 설정이 굳이 왜 있는지 이해가 되지는 않았다. 공유는 안드로이드에서 주로 사용되는 공유 아이콘을 이용했는데, 당근마켓 유저층이 안드로이드 유저가 많은 걸까.
맨 아래에 기본 기능으로 홈, 내 근처, 글쓰기, 채팅, 나의 당근이 있는데, 일반적으로 생각되는 아이콘을 사용하고, 현재 있는 화면에 따라 아이콘 색이 달라지도록 해서 어느 화면에 있는지 쉽게 알 수 있었다. 특이한 부분은 흔히 쓰이는 햄버거 아이콘이 없었다는 점인데, 다양한 유저층을 고려해서 넣지 않았는지, 아니면 굳이 넣을 필요가 없던 것인지 궁금하다.
카카오톡
카카오톡에서 기본 정보만 남기고 다 지운 세 화면이다. 카카오톡 배경을 검은색으로 해서 화면 색도 다르고 영어로 해놨지만, 차례대로 친구 목록, 채팅창, 기타 화면이다. 당근마켓과 마찬가지로 맨 아래의 기본적인 아이콘, '친구 목록', '채팅창', '채널', '더보기'가 있고, 어느 화면에 있는지에 따라 아이콘의 색이 달라진다. 회색 사각형은 광고가 뜨는 화면인데 지웠다. 맨 위 우측의 '검색', '음악', '설정' 아이콘은 그대로인데, 어느 화면에 있느냐에 따라서 두 번째 아이콘이 '친구 추가', '채팅방 추가', 'QR 코드 스캔' 등 다른 기능을 나타내며, 다른 아이콘으로 보인다. 설정 아이콘은 어느 화면에 있는지에 따라서 기능이 달라지는데, 아이콘 대신 텍스트로 기능을 선택할 수 있도록 한다.
https://cm.asiae.co.kr/article/2018090718473111889맨 위의 검색, 친구 추가, 채팅방 추가, QR 코드 스캔, 설정 아이콘은 QR코드 스캔 빼고는 다 보편적 아이콘을 사용했다. 다만 당근마켓보다 대중화된 앱이어서인지 아이콘 옆의 텍스트 설명이 거의 없는데, 이는 2013년 디자인에서 대대적으로 바뀐 부분이다. 예전에는 + 아이콘을 통해 검색과 채팅방 추가 기능을 사용했는데, 2018년 안드로이드와 iOS UX를 통일하는 과정에서 맨 위로 기능을 옮기고 아이콘을 추가했고, 반대로 맨 위에 있던 친구 목록, 채팅방, 더보기 기능을 맨 아래로 옮겨 빠르게 이동할 수 있도록 했다.
카카오톡에서 텍스트와 함께 있는 아이콘을 찾아보았는데, 먼저 친구 목록에서 '친구 추가'를 눌렀을 때 그런 아이콘을 발견할 수 있었다. QR 코드를 통해 친구를 추가하거나, 전화번호나 카카오 ID를 통해 친구를 추가하는 방식이 있었고, 나를 친구로 추가한 유저를 추천받는 기능도 있었다. QR 코드를 제외하고는 헷갈리기 쉬운 아이콘이라서 그런지 모두 텍스트가 있다. 그리고 전화번호부와 친구 아이콘을 합치거나, ID를 써놓는 방식으로 전화번호 추가와 ID 추가를 구분 짓는 아이콘을 사용하고 있었다.
채팅 화면에서도 마찬가지였다. 채팅 화면의 맨 위 우측의 채팅방 추가 아이콘을 터치하면 일반 채팅과, 비밀 채팅, 오픈 채팅 기능을 시작할 수 있다. 오픈 채팅은 더 많은 사람과 이야기할 수 있어서인지 채팅방 아이콘 두 개를 겹쳐 놓았다.
오랜 유저로서 카카오톡이 많이 바뀌었다고 생각될 때는 위의 '더보기' 화면을 볼 때다. 카카오페이, 카카오메이커스, 카카오선물하기 등 많은 기능이 추가되면서 이 기능을 모두 더보기에 몰아넣었는데, 정작 이 기능을 모두 사용해본 적은 없는 것 같다. 카카오톡 외부의 프로덕트가 들어오면서, 아이콘의 정체성이 그 프로덕트를 따라가다 보니 전체적인 아이콘의 아이덴티티가 달라지기도 해서 어쩔 수 없지만 아쉽다. 다만 자주 이용되는 기능인 카카오페이는 따로 위로 뺀 부분에서 가산점을 주고 싶다.
이번 케이스 스터디를 진행하면서, 생각보다 표준화된 아이콘이 부족하고, 대부분 텍스트와 함께 사용한다는 것을 알 수 있었다. 그럼에도 불구하고 대표 기능은 아이콘만으로 설명하려고 하는 것도 발견했다. 비록 케이스가 두 개 밖에 안 되지만, 앞으로 아이콘을 볼 때 좀 더 주의하는 나를 바라면서 글을 마친다. 아디오스...
