이커머스의 탑(Top) 버튼은 어떻게 다를까?

[5분 UI/UX]

언제부턴가 이커머스에서 빠지면 안 될 필수요소로 자리 잡은 탑 버튼.

대부분의 이커머스에서 Top 버튼을 사용하고 있지만 커머스의 성격과 탑 버튼을 바라보는 관점에 따라 탑 버튼의 용도와 활용방법은 판이하게 다를 수 있다. 탑 버튼은 언제 어떻게 쓰여야 하고 서비스의 성격에 따라 어떻게 달라질 수 있을까?

---

탑 버튼의 히스토리 톺아보기

---

탑 버튼에 대해 본격적으로 비교 분석하기 전 탑 버튼은 어떻게 탄생되었고 어떻게 쓰였는지 탑 버튼의 정의와 히스토리에 대해 알아보자.

탑 버튼은 콘텐츠의 최상위로 이동하는 버튼이다. 탑 버튼은 웹초창기 긴 콘텐츠를 가진 페이지에서 앵커와 함께 주로 쓰였다. 탭이나 하이퍼링크 형태의 앵커에서 해당 위치로 이동 후 다시 링크 앵커로 돌아가려 할 때 탑 버튼을 클릭해 앵커로 돌아가는 형태로 말이다.

웹 초창기 Top 버튼의 활용 예제

HTML과 CSS의 발달로 페이지와 컴포넌트의 동적활용이 가능해지며 탭 전환, 아코디언 등 앵커의 대체 수단이 등장하기 시작했고 자연스럽게 탑 버튼의 용도도 줄어들며 탑 버튼은 사장되는 듯 보였다.

탑 버튼이 화려하게 부활한 건 모바일의 등장 이후다. 작은 스마트폰에서 세로로 긴 콘텐츠를 노출하다 보니 스크롤이 길어졌고 콘텐츠의 최상위로 이동해야 할 필요성이 생기면서 탑 버튼이 주목받기 시작한 것이다.

데스크톱과 모바일의 스크롤 비교

모바일 시대를 맞아 탑 버튼은 데스크톱보다 더 다양한 곳에서 광범위하게 사용되고 있다. 특히 탑 버튼을 적극적으로 활용하고 있는 곳은 이커머스 서비스다. 그렇다면 이커머스에서는 탑 버튼을 어떻게 사용하고 있을까?

---

탑 버튼은 왜 오른쪽 아래에 있을까?

---

이커머스의 탑 버튼을 보면 공통적인 특징이 하나 있는데 어떤 서비스든 탑 버튼이 오른쪽 아래에 위치해 있다는 것이다. 탑 버튼이 오른쪽 아래에 있는 이유는 뭘까?

탑 버튼이 오른쪽 아래에 있는 이유는 크게 두 가지다.

① 사용성
② 콘텐츠 가독성 측면

우리가 앞서 배운 개념 중 스티븐 후버의 스마트폰 파지 방법론을 떠올려보자. 오른손 사용자를 기준으로 터치하기 편한 위치는 주로 오른쪽 아래 영역이다. 사용성 측면에서 사용자가 터치하기 편한 위치는 엄지의 유효 터치 범위인 오른쪽 아래이다. 탑 버튼 배치 역시 이러한 기조에 따라 터치하기 편한 오른쪽 아래에 배치되어 있다.

또 다른 이유는 콘텐츠의 가독성 측면이다. 탑 버튼은 일반적으로 콘텐츠 위를 덮는 플로팅 버튼(Floating Button) 형태가 일반적이다 보니 필연적으로 버튼이 콘텐츠를 가릴 수밖에 없고 이는 가독성 측면에서 큰 방해요소가 된다. 탑 버튼이 콘텐츠 가독성 측면에서 방해요소가 되지 않으려면 눈에 띄지 않는 구석 자리에 위치해 있어야 한다. 왼쪽 아래와 오른쪽 아래 2개 위치를 후보로 놓고 비교해 봤을 때 사용자의 시선은 왼쪽에서 시작해 오른쪽으로 이동하기 때문에 (구덴베르크 법칙) 왼쪽에 탑 버튼이 있으면 시작부터 방해 요소가 된다. 그래서 콘텐츠 가독성 측면에서 왼쪽 아래보다 오른쪽 아래에 배치하는 것이 더 효과적이다.

터치하기 편한 위치 + 콘텐츠 흐름과 가독성에 방해가 되지 않는 최적의 위치 두 가지 요소를 모두 만족하는 최적의 위치가 바로 오른쪽 아래인 것이다.

그래서 모든 Top 버튼은 우측 하단에 배치되어 있다.

---

탑 버튼은 언제, 어떻게 보여줘야 할까?

---

탑 버튼을 보여주는 시점은 크게 2가지로 구분된다.

① 페이지 진입 시점부터 보여주기

② 일정 범위 이상 스크롤을 내리면 보여주기

과거에는 ①번처럼 페이지 진입 시점부터 탑 버튼을 노출하는 것이 일반적이었다. 그런데 서비스가 고도화되면서 일부 작업자들이 "페이지 진입 시점에 탑 버튼을 쓸 일이 없는데 탑 버튼을 보여주는 게 맞나?"라며 사용성에 의문을 가지기 시작했고 사용성을 고려해 처음에는 탑 버튼을 노출하지 않다가 일정 영역 이상 스크롤을 내렸을 때 탑 버튼이 노출되도록 노출 시점을 변경하기 시작했다. 현재는 ②번 방식이 대세로 자리 잡은 상황이다.

② 일정 범위 이상 스크롤을 내리면 탑 버튼 노출

처음에는 이런 방식에 큰 문제가 없었다. 그런데 챗봇이 등장하며 챗봇을 오른쪽 아래에 배치하면 탑 버튼과 위치가 겹치는 문제가 발생하기 시작했다. 탑 버튼이 고정적으로 노출될 땐 챗봇과 탑 버튼의 배치만 고민하면 됐지만 탑 버튼이 처음에는 표시되지 않다가 스크롤을 일정 범위 이상 내렸을 때 표시하게 하려면 탑 버튼과 챗봇의 배치와 함께 인터렉션까지 고민해야 한다. 이 문제를 해결하기 위해 다양한 솔루션이 등장하기 시작했는데

Type A 챗봇을 오른쪽 아래에 고정적으로 배치하고 챗봇 위에 탑 버튼을 노출

Type B 챗봇을 오른쪽 중간이나 오른쪽 살짝 아래에 배치하고 탑 버튼은 오른쪽 아래에 노출

Type C 챗봇을 오른쪽 아래에 배치했다가 스크롤을 내리면 챗봇이 올라가고 탑 버튼이 오른쪽 아래에 노출

어떤 안을 선택하느냐는 챗봇의 중요도와 관련이 있다. 챗봇의 중요도와 쓰임새가 높은 서비스면 챗봇을 오른쪽 아래에 고정시키고(Type A) 챗봇보다 탑 버튼이 더 중요하다고 생각되면 탑 버튼을 오른쪽 아래에 배치하면 된다.(Type B 또는 C) 챗봇과 탑 버튼 위치에 정답은 없다. 각 기능의 중요도, 서비스 특성에 따라 노출 방식은 달라질 수 있다.

---

탑 버튼은 어디서 보여줘야 할까?

---

탑 버튼을 보여줘야 하는 기준이 따로 있나?
모든 페이지에서 전부 노출하면 되는 거 아냐?
라고 생각하는 분이 계실지도 모르겠다. 하지만 서비스의 성격, 콘텐츠 구성에 따라 탑 버튼 노출 여부는 달라질 수 있다. 잠깐 국내와 해외 주요 이커머스 서비스의 페이지별 탑 버튼 노출 여부를 살펴보자

국내외 주요 이커머스 서비스를 비교하면 한 가지 큰 차이를 발견할 수 있다. 같은 종합몰이라도 국내서비스는 목록과 상세 페이지 모두에서 탑 버튼을 노출하지만 해외 서비스는 서비스 성격에 따라 어떤 곳은 목록만, 어떤 곳은 상세만 탑 버튼을 노출한다. 왜 이런 차이가 있는 걸까? 이 차이를 이해하려면 먼저 국내 이커머스와 해외 이커머스의 발달 과정과 특징을 이해해야 한다.

국토가 좁고 물류 시스템이 발달한 우리나라는 이커머스 초창기부터 온라인에서 취급하기 어려운 다양한 품목을 판매할 수 있었고 기능도 해외에 비하면 상당히 고도화되어 있었다. (2010년대 중반, 온라인에서 자유로운 반품과 구매취소가 가능했던 국내 이커머스에 비해 해외 이커머스 서비스는 주문취소를 하려면 콜센터에 직접 전화를 하거나 이메일을 보내야 했다.)

온라인에서 취급하기 어려운 다양한 품목을 판매할 수 있었고 지원하는 기능도 많았던 국내 이커머스는 주문취소와 반품이 쉽다 보니 반품률을 줄이기 위해 상품 상세정보에 되도록이면 많은 정보를 담아 상품 정보를 구체적이고 상세하게 표기하려는 경향이 강했다. 경쟁도 치열하다 보니 남들보다 더 눈에 띄기 위해 상품 상세정보에 이미지를 적극 활용해 화려하게 꾸밀 수밖에 없었고 자연스럽게 상세페이지의 길이도 길어질 수밖에 없었던 것이다.

국토가 넓고 우리나라만큼 물류 시스템이나 온라인 서비스가 발달하지 않았던 해외의 상황은 좀 달랐다. 상품의 크기와 스펙이 규격화되어 있고 파손 위험이 적은 서적 > 의류 > 전자제품 순으로 취급물품을 늘리며 이커머스가 발달해 왔고 크기와 스펙이 규격화되어 있다 보니 상품 상세정보에 많은 정보를 표기할 필요가 없었다. 그래서 해외 이커머스는 상품 상세정보에 꼭 표시해야 되는 주요 정보(크기, 무게, 품번 등)를 텍스트로 두세 줄 표현하는 정도가 전부였고 자연스럽게 상세페이지의 길이도 길지 않았다. 이러한 경향은 지금까지도 남아있어 이미지로 상품 상세정보를 표시하는 국내 이커머스는 상세페이지가 길고 텍스트 위주로 간단하게 상품 상세정보를 표시하는 해외 이커머스는 상세페이지가 비교적 짧은 편이다.

국내 이커머스는 상세 페이지에 탑 버튼을 노출하지만 해외 이커머스는 상세 페이지에 탑 버튼을 노출하지 않는 이유가 바로 여기에 있다. 이미지를 적극 활용하는 국내 이커머스는 페이지의 세로 길이가 길어 탑 버튼이 필요하지만 아직도 텍스트 위주인 해외 이커머스는 상세 페이지에 탑 버튼을 노출하지 않는 경우가 많다.

이를 단적으로 증명하는 좋은 예가 하나 있다.
해외 SPA 브랜드인 자라와 H&M 상세페이지를 살펴보자.

ZARA, H&M, SPAO의 상세 페이지 비교

앞서 설명했던 것처럼 자라와 H&M은 상품 상세 페이지에 간단한 상품정보와 착용샷 정도만 제공하고 상세 페이지도 길지 않다 보니 상세 페이지에서 탑 버튼을 노출하지 않는다. 반면 같은 SPA 브랜드라도 국내 브랜드들은 여전히 상세페이지에 디자인 요소를 많이 사용하고 길이도 긴 편이라 탑 버튼을 노출한다. 같은 품목을 취급하더라도 페이지 구성과 성격에 따라 탑 버튼 노출 여부가 달라질 수 있는 것이다.

---

다르게 보여주는 방법은 없을까?

---

탑 버튼은 오른쪽 아래에 있고 스크롤을 내리면 표시된다.

많은 이커머스가 공식처럼 이 형태로 탑 버튼을 노출하고 있다. 그런데 이게 정말 정답일까?
다른 방법은 없을까?

여기 남들과는 다르게 탑 버튼을 노출하는 서비스가 있다.

아마존은 왼쪽 위, 스크롤을 내렸을 때 상품 정보 탭 바에 탑 버튼을 노출한다.

아마존은 왜 상품 정보 탭 바에 탑 버튼이 있는 걸까?

상세페이지를 이용하는 사용자 관점에서 한번 생각해 보자.

스크롤을 내려서 상품 정보 탭바가 상단에 고정되는 순간부터 사용자의 액션은 크게 3가지로 나뉜다.

① 스크롤을 아래로 내리면서 상품 정보를 확인

② 상세 정보 탭을 눌러 해당 위치로 이동 (상품 정보, 고객 리뷰 등)

③ 탑 버튼을 눌러 상품 상단으로 이동해 상품 옵션 선택 또는 구매

아마존의 상세페이지는 하단 스티키 버튼(장바구니 담기, 바로 구매)이 없다. 상세페이지에서 정보를 둘러보다 구매를 하려면 Add to Cart 버튼이 있는 최상단으로 이동해야 하는 구조다. 아마존은 이렇게 생각한 것 같다. 상품 정보 탭바가 생기는 순간부터 페이지 내 이동은 상품 정보 탭바에서 기능명(Detail, Explore, Questions, Reviews)을 터치해 이루어질 확률이 높다. 탑 버튼 액션도 페이지 내 이동이니 같은 기능으로 분류해 상품 정보 탭바에 위치시키자.

아마존은 기능 관점에서 유사한 기능끼리 그룹핑하는 형태로 탑 버튼을 배치했다.

과거 탑 버튼은 모든 페이지에서 오른쪽 아래에 배치해야 된다가 공식처럼 받아들여졌다면 이제 탑 버튼 UI도 조금씩 변화하는 양상을 보이고 있다. 서비스 성격에 따라 목록 페이지 혹은 상세 페이지에서만 탑 버튼을 노출하기도 아예 탑 버튼을 쓰지 않는 곳도 늘어나고 있다. 탑 버튼의 위치도 무조건 오른쪽 아래가 아니라 다른 곳에 배치하려는 시도를 하는 곳도 하나둘씩 생겨나고 있다. 탑 버튼을 배치할 때 한 번쯤 생각해 보자. 우리 서비스는 탑 버튼이 꼭 필요한 서비스인지, 꼭 필요하다면 오른쪽 아래 말고 다른 위치에 배치하는 방법은 없을지 말이다.

✔️ 핵심 3줄 요약

---

1️⃣ 탑 버튼을 배치할 때 터치하기 편한 위치 + 가독성에 방해가 되지 않는 최적의 위치는 오른쪽 아래이다.

2️⃣ 탑 버튼은 기능의 중요도, 서비스 특성에 따라 노출 방식이 달라질 수 있다.

3️⃣ 같은 품목을 취급하더라도 페이지 구성과 성격에 따라 탑 버튼 노출 여부가 달라질 수 있다.

---