글 목적
여러 앱 중에서도 '작성하기' 기능을 주 콘텐츠로하는 앱들이 있다. 대표적으로 메모 앱, 블로그 앱, SNS 등등의 앱들이 콘텐츠를 작성하는 자체 기능을 가지고 있다.
오늘은 그런 앱들이 '글쓰기 버튼'을 어디에 배치하여 사용자의 접근을 돕는지 분석해 본다.
* 분류를 위해 사용한 명칭은 제가 임의로 붙인 것입니다.
주목형
'주목형'은 하단 탭바에 배치하면서도 그 중에서 가운데에 '글쓰기' 버튼을 배치한 구조이다.
이런 경우 좌우 대칭이 맞게끔 홀수로 메뉴를 구성한다.
네이버 블로그
네이버 블로그는 메뉴 중앙에 배치해있다. 버튼 모양은 연필 모양이며 왼쪽부터 '이웃 새글', '추천', '글쓰기', '내 소식', '내 블로그' 순으로 메뉴가 배치되어 있다. 글쓰기 버튼을 터치하면 미리 세팅된 값을 바탕으로 글쓰기 창이 열린다.
티스토리
티스토리도 가운데 글쓰기 버튼이 놓여있다. 버튼 모양은 '페이지 플러스 버튼'이며 왼쪽부터 '내 블로그 관리', '피드', '글쓰기', '알림', '내 블로그' 순으로 메뉴가 배치되어 있다. 한 아이디에 다수의 블로그를 지원하는 티스토리 특성 상 여러 블로그를 관리할 수 있는 관리 페이지가 1뎁스depth 메뉴로 자리했다. 티스토리도 글쓰기 버튼을 누르면 새로운 쓰기 창이 뜬다.
인스타그램
인스타그램은 '페이지 플러스' 버튼이 가운데에 있다. 왼쪽부터 '홈페이지', '검색', '글쓰기', '릴스', '마이 페이지' 순이다. 사진을 중시하는 인스타그램 특성 답게 '글쓰기' 버튼을 누르면 갤러리가 하단에 같이 뜬다.
번개장터
판매 물품을 등록하는 번개 장터도 등록 버튼이 가운데에 있다. 여태 보았던 것과 차이가 있다면 아이콘 밑에 글씨를 써서 아이콘이 무엇을 뜻하는지 보여주었다. 개인적인 취향이지만 나는 글씨가 좀 불필요하다고 생각한다. 그렇게 어려운 기능들도 아니어서 충분히 아이콘으로도 의미가 전달되기 때문이다.
기능형
기능형은 하단탭바에 '글쓰기' 버튼이 있지만 기능적인 우선도를 고려하여 가운데가 아닌 위치에 배치한 구조이다. 자주 찾아보기는 힘든 구조이다.
왜 가운데에 배치하지 않나 살펴보면, 기능형은 1 뎁스가 그렇게 다양하지 않다. 억지로 다른 콘텐츠를 1뎁스로 끌어올리기보단 차라리 기능성을 살리며 메뉴를 구성하는 방향으로 설계하였기 때문에 이렇게 된 것이 아닌가 싶다.
노션
노션은 하단 탭바에서 가장 오른쪽에 위치해있다. 통계적으로 세계 인구의 85~90%가 오른손잡이고 그 나머지가 양손잡이를 포함한 왼손잡이이다. 그러므로 UI 구성을 할 때 중요한 기능은 대개 오른쪽에 위치하기 마련이다. 노션의 경우 글을 작성하는 기능이 주 목적이므로 지금과 같은 자리에 자리한 것이다.
iOS 메모
아이폰 기본 앱인 메모앱도 오른쪽에 글쓰기 버튼이 있다. 메모란 게 머릿속에서 흩어지기 전에 후다닥 써야하는 것이다보니 오른쪽 엄지와 맞닿은 자리에 있으면 빠르게 메모를 작성할 수 있어 매우 편리하다. 가운데 버튼이 있으면 엄지를 기존보다 늘여야하기 때문에 조금이라도 시간과 힘을 더 써야한다. 큰 차이는 아니지만 이러한 차이가 쌓이니 지금 같은 iOS의 사용성이 만들어진 것 아닌가 싶다.
독립형
'독립형'은 글쓰기 버튼이 탭바와 묶여있지 않고 별도의 CTA(Call to Action) 버튼으로 독립해 있는 것을 말한다. '독립형'은 글쓰기 버튼을 독립시킴으로써 메뉴의 공간을 확보하고 다른 주목도가 필요한 메뉴를 그 확보한 자리에 배치할 수 있다. 그래서 대개 '독립형'은 메뉴가 이미 5개로 꽉 차 있다.
CTA 버튼을 썼다는 것은 주목형, 기능형보다도 더 사용자의 행동을 유도하고픈 의도가 반영되어있다. 사용자에게 이 버튼과 기능을 찾으려다 헤맬 일을 아주 없애겠다는 의도로 읽히기도 한다. 그러나 글쓰기 버튼이 독립을 하였으므로 메뉴 구성에 대해서도 고려하지 않을 수 없다. 1 뎁스에 올릴 만한 것이 없다면 그 허전함은 감추기 어려울 것이기 때문이다.
'기능형'과 마찬가지로 오른편에 버튼이 위치해있다. 이 역시도 통계에 따라 오른손잡이가 많기 때문에 이렇게 배치하였을 것이다.
당근(구 당근 마켓)
당근은 사용자가 직접 작성한 콘텐츠로 유지되는 바텀-업bottom-up 형식의 플랫폼이다. 그만큼 '글쓰기' 버튼은 가장 무게 있는 버튼이다.
'글쓰기' 버튼이 빠진 하단탭바는 '홈', '동네생활', '내 근처', '채팅', '나의 당근' 순으로 1 뎁스가 구성되어 있다. '당신 근처' 라는 캐치프레이즈답게 '내 근처' 기능이 중앙에 위치해있다. 글쓰기 버튼만큼은 아니더라도 당근의 서비스 측면에서 중요도가 있는 항목이 1 뎁스를 차지한다.
특이사항으로 '글쓰기' 버튼을 누를 시 새로 글쓰기 창이 뜨는 다른 앱들과 달리, 오버레이가 열리며 사용자의 니즈에 따라 선택할 수 있는 다양한 카테고리가 등장한다. 2 뎁스 구성은 취향 차이가 있겠지만 우리의 실생활을 포용하고자하는 앱의 의도를 생각하면 제법 괜찮은 UX라 느꼈다.
X(구 트위터)
X도 당근처럼 바텀-업 방식의 앱이다. 사용자의 트윗이 앱의 정체성과 직결되므로 '글쓰기' 버튼이 눈에 띈다.
'글쓰기' 버튼 대신 들어온 건 커뮤니티라는 기능인데 X 유저의 온라인 모임 같은 것이다. 소셜 네트워크 답게 어울리는 서비스다.
정리
대부분의 앱들이 가운데에 배치한 것을 볼 수 있다. 가장 많이 쓰는 기능을 가운데에 배치하면 사용자의 동선이 안정성을 갖추며 좌우를 아우르는 균형있는 UI 환경이 조성된다. 또한 가운데라 사용자의 시선이 가기 쉽고 터치하기도 쉬운 곳에 위치하여 사용성도 보장한다.
기능형과 독립형은 오른쪽에 자리하는데, 손가락이나 손에 가려질 위험이 아예 없는 건 아니다. 디자인 과정에서 신경 써야할 수도 있다(A/B 테스트에서 이런 의견이 나와버리면 더더더).
여담
공통적으로 홈페이지는 가장 왼쪽, 검색 기능은 두 번째로 배치한 걸 볼 수 있다.
홈페이지는 디폴트 페이지다. 굳이 누르지 않아도 알아서 보게 되는 화면이므로 오른손 엄지와 가장 먼 곳에 위치한다.
검색 기능은 자주 사용할 수 있는 기능이다. 그럼에도 오른쪽에서 두 번째가 아닌 왼쪽에서 두 번째다. 생각해보건대, 우리는 검색을 하려면 양손을 쓴다. 한 손으로 키보드를 입력하기란 쉽지 않다. 요새 커지는 모바일 기기의 화면을 생각하면 더더욱 그럴 것이다. 어차피 양손을 써야하는 기능이면 꼭 오른손의 범위 안에 넣지 않아도 괜찮을 것이다.
그렇다면 글쓰기 버튼도 마찬가지 아니냐는 반론을 할 수 있다. 글을 쓰는 일도 반드시 양손을 쓰니까 말이다. 검색은 어디까지나 자주 사용하지만 위 앱들의 보조 기능이고, 글쓰기는 핵심 중에 핵심 기능이기 때문으로 설명할 수 있겠다. 글쓰기는 가장 눈에 띄거나 가장 빨리 쓰게하는 자리에 위치해야만 하는 것이다.
그렇다고 오른쪽에 검색과 글쓰기를 몰아버리면 사용자는 사용성면에서 피곤함을 느낄 수 있다. 오른쪽 두번째 자리에 '알림'이 있는 기능이 공통적으로 배치하는 이유가 그것이다. 알림은 확인에서 끝나지 무언가 작성으로 이어지는건 부차적이다. 사용성 면에서 부담이 없는 기능을 배치하며 좌우 힘의 균형을 맞춘 것으로 보인다.
P.S. 생각나는 앱 있으면 계속 추가하겠습니다