✅ 오늘의 파쓰 지식 : 중고차 거래 플랫폼 헤이딜러의 사례를 통해 '뒤로가기' 버튼의 2가지 유형 '히스토리 백(History Back)'과 '하이어라키 백(Hierarchy Back)'에 대해서 알아봐요.
✅ 파쓰와 함께 훑는 커머스 비즈니스 : 성공적인 커머스 비즈니스를 위한 2024년 3가지 주요 키워드를 알아보아요.
✅ 파쓰가 전하는 테크 샤라웃 : '추천 서비스'와 '디자인 일관성'을 주제로 이와 관련된 테크 블로그 소식을 가져왔어요. |
|
|
뒤로가기 버튼, Feel🤔이 아니라 Rule📏이다 |
|
|
#UX법칙 #Back버튼 #헤이딜러 #뒤로가기 #닫기 |
|
|
💡핵심 요약
'뒤로가기'는 크게 2가지로 분류할 수 있어요.
- 히스토리 백(History Back) : 사용자가 접근한 화면 순서의 역순으로 돌아가요!
- 하이어라키 백(Hierarchy Back) : 직전화면이 아닌 해당 화면이 속한 상단 메뉴로 이동해요!
|
|
|
서비스가 초창기 단계일수록 PO들은 서비스의 핵심적인 기능에 역량을 집중하게 되는데요. 당연한 이야기이지만 서비스의 핵심가치가 사용자에게 소구되지 않으면 세부적인 사항들이 아무리 완벽해도 소용없기 때문이죠. 그런데 문제는 핵심기능에만 집중하다보면 작은 부분들에 대한 규칙성이 없이 '그때 그때' PO들이 가진 느낌에 따라 '덕지 덕지' 서비스가 완성되어버릴 수 있어요.
그래서 오늘은 여러 인터페이스를 이루는 버튼들 중에서도 절대 없어서는 안될 [뒤로가기] 버튼과 [닫기] 버튼에 대해 중고차거래 플랫폼 '헤이딜러'의 테크블로그에 올라온 글을 바탕으로 어떻게 규칙을 정하고 문제를 해결하였는지 사례를 통해서 소개해 드릴게요😊 |
|
|
먼저 사례 설명에 앞서 우리가 이해해야할 개념을 소개드릴게요. 바로 '뒤로가기'에도 크게 두 가지 유형이 있다는 것입니다🤔
히스토리 백(History Back)
첫 번째 유형은 히스토리 백(History Back)입니다. 히스토리 백(History Back)은 사용자가 접근한 화면 순서의 역순으로 돌아가는 것을 뜻하는데요. 구글의 개발자 가이드에서는 이를 '시스템 백(System back) 버튼'으로 정의하고 있어요. 이는 내가 눌러 보았던 화면들을 순차적으로 돌아갈 수 있는 버튼을 뜻하죠. 그런데 모든 '뒤로가기'버튼을 히스토리 백으로만 처리한다면 사용자가 한 서비스의 깊은 레벨까지 서비스를 이용한 경우, 이전 화면으로 돌아가는 데에 굉장히 오랫동안 '뒤로가기'버튼을 눌러야하는 문제가 발생할 수 있답니다🤮
하이어라키 백(Hierarchy Back)
한편, 하이어라키 백(Hierarchy Back)은 메뉴 계층을 갖는 소프트웨어에서 메뉴 구조의 역순으로 이동하는 것을 말하는데요. 이때의 뒤로가기는 직전화면으로 가는 것이 아니라 해당 화면이 속한 메뉴 상단으로 올라가는 것이에요. 구글 개발자 가이드에서는 이를 '업(Up) 버튼'이라고 정의하죠. 직전에 사용했던 화면이 아니라, 내가 사용하고 있는 화면의 바로 위 레벨의 화면을 보고 싶은 경우에 사용할 수 있는 버튼이랍니다! |
|
|
사실 뒤로가기 버튼이 어떤 방식으로 적용되어야 하는가에는 정해진 규칙이 없어요. 하지만 한 플랫폼 내에서 이에 대한 정확한 규칙이 없을 경우에 사용자 입장에서는 기대와 다른 화면이 나와버려 낭패감을 느낄 수도 있게 되는데요😓 그렇기 때문에 적어도 한 플랫폼 내에서는 '뒤로가기'버튼에 대한 명확한 규칙을 세우는 것이 중요합니다! |
|
|
🔙'뒤로가기' 버튼 규칙
헤이딜러팀은 '뒤로가기'버튼에 대해 다음과 같은 세 가지 순서에 따라 접근하도록 규칙을 정하였습니다.
첫번째로 페이지 간의 위계를 파악하는 것입니다. 버튼 디자인을 위해서 뿐만 아니라 서비스의 전체적 설계를 위해서 화면 위계는 가장 먼저 수행되어야 해요. 위계가 파악이 되었다면 어떤 뒤로가기의 방식이 가장 자연스러울지 고민해야 합니다. 그리고 그에 따라 버튼을 설계할 수 있는데, 만약에 두가지 방식의 '뒤로가기'가 모두 필요한 경우라면 '뒤로가기' 버튼을 하이어라키 백으로 두고, 히스토리 백을 다른 형태의 UI로 해결하는 것을 규칙으로 하였죠. |
|
|
✖️'닫기' 버튼과 🔙'뒤로가기'버튼의 활용
'닫기' 버튼 역시도 '뒤로가기' 버튼과 마찬가지로 PO의 직관에 의해 사용되고 있는 경우가 많은데요. 헤이딜러 팀에서는 '닫기' 버튼에 대해서 모달(Modal)에 대해서만 사용하는 것으로 규칙을 설정했어요. 그리고 모달에 대한 사용 기준 역시도 정하였는데요. 다음 등장하는 화면이 맥락에 해당한다면 모달이 아니므로 뒤로가기 버튼에 좌우 애니메이션을 넣고, 맥락이 아닐 때에는 모달형으로 구성하여 닫기 버튼을 사용한다고 합니다! 즉, 닫기 버튼은 모달을 닫고 현재 작업으로 되돌아오기 위해 사용하는 것이고, 뒤로가기 버튼은 지나왔던 페이지로 되돌아가기 위한 네비게이션으로 사용하는 것이죠!
☕틈새지식: 팝업은 뭐고, 모달은 모달?
모달(Modal)은 하나의 페이지에서 다른 작은 페이지를 띄우는 레이어를 말해요. 사용자 입장에서는 팝업(Pop-up)화면과 헷갈릴 수 있지만, 팝업이 두개의 브라우저 창을 띄우는 것이라면, 모달은 하나의 브라우저에 레이어 창을 띄우는 차이가 있습니다. 무엇보다 팝업과 모달은 활용에 그 차이가 있습니다. 모달의 경우는 현재 수행하고 있는 작업을 끊고, 다른 맥락의 작업을 수행해야할 때에 사용됩니다. 예를 들어, 카페 주문 플랫폼의 주문 과정에서 [영양정보 상세보기] 페이지와 같은 화면이죠. |
|
|
😎 파쓰 Talk
물론 플랫폼에 따라서는 헤이딜러에서 사용한 규칙이 답이 아닐 수도 있어요. 규칙은 플랫폼 서비스를 운영하는 팀 내에서 각자의 철학에 따라 세우는 것이 맞죠. 다만, 헤이딜러 사례를 통해서 한 플랫폼 내에서 사용자가 부지중에 플랫폼에 대해 갖게 되는 예측과 실제 사용을 일치시켜서 동일한 사용 경험을 줄 수 있도록 하기 위해서는 버튼 하나까지도 규칙을 설계해서 사용하는 것이 중요하다는 것을 다시 한번 깨닫고 갑니다! |
|
|
2024년, 성공적인 커머스 비즈니스를 위한 필수 전략! - PART 1 |
|
|
#커머스플랫폼 #AI챗봇 #개인화 #추천 #정기구독 #고객중심 #기술혁신 |
|
|
2024년 커머스 산업은 더욱 흥미진진하고 혁신적인 변화를 맞이할 예정이에요. 이번 글에서는 그 변화의 중심에 서있는 3가지 주요 키워드를 먼저 소개합니다. 각 트렌드가 비즈니스에 미치는 영향과 성공적인 활용 방안을 파쓰와 함께 알아볼까요? |
|
|
2024 놓칠 수 없는 3가지 커머스 키워드
✅ AI 챗봇 ─ 24시간 고객 만족도 향상, 비용 절감
✅ 개인화 추천 ─ 고객의 마음을 읽는 사용자 맞춤형 큐레이션
✅ 정기 구독 모델 ─ 반복적인 수입과 고객 충성도 확보
|
|
|
🤖 AI챗봇: 24시간 고객 만족도 향상을 위한 필수 요소! |
|
|
핵심 기능
- 24시간 고객 응대
- 주문 처리 및 배송 조회
- 개인화된 상품 추천
활용 방안
- 기본적인 FAQ 기능, 결제 및 주문처리, 주문/배송 조회 등 고객 서비스 자동화
- 다국어 지원 챗봇 개발을 통한 글로벌 시장 진출 확대
|
|
|
최근 커머스 플랫폼을 이용하다보면 챗봇을 이용한 서비스들이 많은데요. 자주 발생하는 문의사항부터, 배송 조회까지 이제는 고객센터를 연결하지 않아도 간단한 질문들은 챗봇을 통해 24시간 응대가 가능해졌습니다. 2026년에는 10건의 고객 상담 중 1건이 AI 챗봇으로 처리될 것으로 예상했는데요. 전세계 상담센터에서 대화형 인공지능 채택을 늘리면서 향후 5년 동안 800억 달러(한화 약 111조 1,500억원)의 비용이 절감될 것으로 예측하고 있어요. 또한 Chat GPT와 같은 생성형 AI의 등장으로 이 분야는 더욱더 발전하고 있죠. 인터파크, 11번가 등 국내 커머스에서도 수년 전부터 챗봇 도입이 활발했는데요. SSG닷컴은 전체 상담 문의의 25%를 챗봇으로 처리하고 있고, 롯데온은 개인화된 챗봇 서비스 ‘샬롯’의 사용자가 전년 동기 대비 150% 증가했다고 해요. 챗봇의 활용이 비용 절감과 매출 증대에 도움을 주는 것이 다수의 사례를 통해 검증된 만큼 앞으로 더욱 발전하여 고객과의 소통 창구로써의 주요 역할을 할 것으로 예상돼요. |
|
|
🧚♂️개인화 추천 서비스: 고객의 마음을 읽는 마법! |
|
|
핵심 기능
- 사용자의 선택 피로도를 낮추기 위한 맞춤형 큐레이션
활용 방안
- 구매 이력, 상품 검색 이력 등 데이터를 활용하여 개인화된 추천 상품 큐레이션
- 고객의 상황, 선호도, 맥락을 파악한 정확한 상품 추천 및 잠재 수요 예측
|
|
|
수많은 상품들 중 선택에 지친 소비자들에게 마법같은 기능, 초개인화된 ‘큐레이션’이 등장했어요. 이 기능은 사용자의 구매이력, 상품 검색 이력 등 다양한 데이터를 활용하여 딱 맞는 상품을 추천해주는 건데요. 많은 커머스 기업에서 AI 기반 상품 추천 개발에 투자하며, 그 효과를 경험하고 있어요. 네이버는 자체 개발한 ‘개인화 상품 추천 블록’을 통해 AI 추천 상품 거래액이 전년 대비 30% 증가하는 성과를 보였고, 스타일 커머스 플랫폼 에이블리는 AI 개인화 추천 기술 활용으로 재구매율 60%를 달성했다고 해요. 고객의 상황, 선호도, 맥락을 파악하여 정확한 상품 추천은 물론, 고객이 인지하지 못한 잠재적 수요까지 예측하여 교차 판매의 기회를 창출할 수 있기 때문이죠. 비즈니스에 중요한 역할을 하는 '구매 전환율'과 '재방문율'을 높이는 데 큰 영향을 미치는 만큼 개인화 추천 서비스에 대한 관심은 계속될 것 같아요. |
|
|
출처: 네이버 FOR YOU 서비스 캡처 화면 |
|
|
💸정기 구독 모델 : 반복적인 수입과 고객 충성도 확보 |
|
|
핵심 장점
- 기업 : 안정적인 수익, 고객 충성도 증대
- 소비자 : 구매 시간 절약, 새로운 상품과 서비스 경험
|
|
|
정기 구독 모델은 고객에게는 편리함을 주고 기업에게는 안정적인 수익과 고객 충성도를 제공하는 윈-윈 전략 중 하나에요. 소비자들은 상품 선택과 구매 과정에서의 시간을 절약하고, 새로운 상품과 서비스를 경험할 수 있어요. 또, 기업은 안정적인 수익과 고객 충성도를 확보할 수 있지요.
유통 업계는 멤버십 출혈 경쟁 중 할인 쿠폰이나 무료 체험 기간 정도의 혜택 뿐만 아니라 배송/OTT 및 온라인 매장 제휴 등 온/오프라인을 아우르는 다양한 혜택을 제공하고 있는데요. 2025년 국내 구독 경제 시장은 최대 100조원에 이를 것으로 예상하고 있어요. 기존 쿠팡 와우 멤버쉽, 네이버플러스 멤버쉽 외에도 롯데제과의 ‘월간과자’, 하림 ‘The 미식 정기배송’, CJ 제일제당의 ‘자동 배송 서비스’ 등 성공 사례들이 구독 모델의 가능성을 보여주고 있죠. 앞으로 더 많은 브랜드들이 자체적인 구독 서비스를 런칭하며 시장 경쟁이 더욱 심화될 것 같아요. |
|
|
출처: 좌측부터 롯데제과-월간과자, 하림-더미식 정기배송, CJ제일제당 - 자동배송서비스 |
|
|
오늘 알아본 2024 커머스 트렌드 어떠셨나요? 고객의 필요 뿐만 아니라 고객 스스로도 알지 못하는 전혀 새로운 고객 가치를 제공하는 것이야말로 진정한 기술 혁신이 담당해야 할 역할이라고도 하죠. 기술 전략의 궁극적인 목적은 고객 중심으로 이루어져야 그 효과를 발휘할 수 있다는 사실! 꼭 기억하세요! |
|
|
📚참고한 자료
문현호(2023). "충성고객 잡아라...구독·멤버십 자사몰 힘주는 식품업계". 이투데이
|
|
|
'추천 서비스'와 '디자인 일관성'과 관련된 테크 블로그 소식을 알려드릴게요! |
|
|
토스에는 메이커의 생산성과 사용자의 일관된 경험을 책임지는 디자인 시스템 팀이 있어요. 이를 위한 도구 중 하나로 Toss Design System(TDS)을 운영하고 있는데요. 메이커의 생산성과 최고의 디자인을 만들기 위한 토스의 시스템, 한 번 확인해볼까요?
최근 네이버 호텔 예약 페이지에서는 "FOR YOU"라는 호텔 추천 서비스를 제공하고 있는데요. 수십만 개의 호텔 중에서 나만을 위한, 나에게 딱 맞는 호텔을 추천해주는 서비스입니다. 수십만 개의 호텔 중에서 당신 만을 위한 가장 잘 맞는 호텔을 찾기 위한 기획팀과 개발팀의 여정을 함께 살펴보시죠.
잘 만들어진 공통 컴포넌트는 웹 프런트엔드 개발의 속도를 높여줄 뿐만 아니라 프로젝트의 더 높은 완성도를 만들어내는 데 큰 역할을 하는데요. 카카오엔터테인먼트에서는 공통 컴포넌트를 좀 더 쓸모 있고 가치있게 만들기 위해 여러가지를 고민했다고 합니다. 공통 컴포넌트를 만드는 데 어려움이 있으시다면 지금 확인해보세요!
|
|
|
파쓰레터
오늘도 플랫폼 지식 +1 얻으셨나요?
다음 소식도 기대해주세요~! |
|
|
|