728x90
🎥 라이브 커머스 UI
1. 네이버 쇼핑 라이브 UI
✅ 주요 기능 (19가지)
| No. | 상단 (10) |
| 1 | 쇼핑 라이브 홈 버튼 - 버튼을 눌렀을 경우, 쇼핑 라이브 메인페이지로 이동 - 시청 중인 라이브 영상은 우측 하단으로 PIP |
| 2 | 알림 설정 버튼 - 버튼을 눌렀을 경우, 해당 판매자 라이브 진행 알림을 받음 - confirm - 박스 내 '21시-08시 사이에도 알림을 받을래요.' 체크박스 |
| 3 | 공유하기 버튼 - 버튼을 눌렀을 경우, OS 맞는 공유 모달창이 전체 화면에 약 50%정도 가려지게 나타남 - 모달창 닫기 1) 제스처 : 아래로 밀어서 닫기 2) 영약 밖 선택 |
| 4 | 창 축소(PIP) 버튼 - 시청 중인 라이브 영상은 우측 하단으로 PIP - 접근하기 이전인 페이지 나타남 |
| 5 | 닫기 버튼 - 버튼을 눌렀을 경우, 시청 중인 라이브 영상 닫기 |
| 6 | 셀러 프로필 - 버튼을 눌렀을 경우, 셀러의 라이브 커머스 프로필 페이지로 이동 - 시청 중인 라이브 영상은 우측 하단으로 PIP |
| 7 | 제목 - 버튼을 눌렀을 경우, 라이브 안내사항 모달창이 아래서 위로 전체화면의 약 50% 가려지게끔 나타남 - 탭으로 구분 1) 라이브 소개 : 라이브 진행 시간, 판매자 정보, 알림받기 버튼 2) 라이브 혜택 : 셀러가 등록한 라이브 혜택 안내 정보 |
| 8 | 셀러 닉네임 표시 - 제목 아래 셀러(판매자)의 닉네임을 표시 |
| 9 | 누적 시청자수 표시 - 라이브 커머스 진행 중 전체 누적 시청자수를 표시 |
| 10 | 누적 하트수 표시 - 라이브 커머스 진행 중 시청자들이 눌른 누적 하트수를 표시 |
| No. | 좌측 하단 (4) | 우측 하단 (5) |
| 1 | 채팅 목록 - 실시간 채팅 내용을 최신순으로 아래서 위로 올림 - 최대 6줄까지 보여짐 - 채팅 내용 스크롤 가능 - 스크롤 하였을 경우, 최신 채팅으로 이동 버튼 목록 가운데 나타남 |
판매자 제공 쿠폰 버튼 - 버튼을 눌렀을 경우, 사용가능한 쿠폰 내역이 아래서 위로 전체 화면에 약 55% 가려지게끔 모달창 나타남 - 하단에 '전체 쿠폰 다운받기' 버튼 - 모달창 닫기 1) 제스처 : 아래로 밀어서 닫기 2) 영역 밖 선택 - 사용가능한 쿠폰이 없을 경우, 쿠폰 버튼 표시 안함 |
| 2 | 판매자 공지사항 내용 - 채팅 목록 아래 표시 - 채팅 글자와 색 구분하여 표시 - 공지사항이 없을 경우, 표시 안함 |
좋아요(하트) 버튼 - 버튼을 눌러 하트를 보냄 - 상단 제목 아래 하트 개수 카운트 - 횟수 제한 없음 - 애니메이션 : 화면 우측으로 하트를 비롯한 다른 이모지 5개가 랜덤으로 아래서 위로 올라가며 폭죽처럼 터지며 사라짐 |
| 3 | 네이버 제공 쿠폰 팝업 - 버튼을 눌렀을 경우, 네이버 쇼핑라이브 진행 알림을 받음 - confirm - 박스 내 '저녁 9시 이후에도 알림을 받을래요.' 체크박스 |
질문 모아보기 버튼 - 버튼을 눌렀을 경우, 모달창이 전체화면에 약 55% 가려지게끔 나타남 - 탭으로 구분 1) 자주 묻는 질문 : 라이브 관련된 네이버의 안내 2) 라이브 답글 : 판매자가 채팅에 작성한 내용 - 모달창 닫기 1) 제스처 : 아래로 밀어서 닫기 2) 영역 밖 선택 |
| 4 | 진행 중인 라이브 상품 상세 버튼 - 버튼을 눌렀을 경우, 현재 진행 중인 라이브 상품의 상세페이지로 이동 - 시청 중인 라이브 영상은 우측 하단으로 PIP |
채팅 입력 버튼 - 버튼을 눌렀을 경우, 아래서 위로 텍스트 입력키보드 나타남 - 키보드 위, 텍스트입력 필드 - 플레이스 홀더(기본) : 실시간 채팅에 참여하세요 - 커서 표시 - 텍스트입력 필드 우측 '채팅 or 질문'버튼 - 버튼을 눌렀을 경우, 질문 보내기 - 플레이스 홀더 : 상품에 대한 질문을 보내보세요 - 질문하기로 채팅을 보냈을 경우, 채팅 목록에 '채팅' 머릿말으로 구분하여 표시 |
| 5 | 라이브에 소개된 상품 버튼 - 해당 판매자가 진행하였던 라이브 상품 목록 모달창으로 전체화면에 약 45% 가려지게끔 나타남 - 목록의 상품을 선택하였을 경우, 해당 상품의 상세페이지로 이동 - 시청 중인 라이브 영상은 우측 하단으로 PIP - 진행한 상품이 없을 경우, 표시 안함 |
2. 쿠팡 라이브 쇼핑 UI
✅ 주요 기능 (17가지)
| No. | 상단 (10) |
| 1 | 라이브 쇼핑 홈 버튼 - 버튼을 눌렀을 경우, 라이브 쇼핑 페이지로 이동 - 시청 중인 라이브 영상은 우측 하단으로 PIP |
| 2 | 장바구니 버튼 - 버튼을 눌렀을 경우, 내 장바구니로 이동 - 시청 중인 라이브 영상은 우측 하단으로 PIP |
| 3 | 공유하기 버튼 - 버튼을 눌렀을 경우, 아래서 위로 모달창이 화면의 약 25% 가려지며 나타남 - 모달창은 라디오 버튼으로 두가지 내용 중 선택하여 공유 1) 링크 공유하고 캐시받기 2) 캐시적립 없이 공유하기 - 모달창 닫기 1) 모달창 우측 상단 닫기 버튼 2) 영역 밖 선택 |
| 4 | 창 축소(PIP) 버튼 - 시청 중인 라이브 영상은 우측 하단으로 PIP - 접근하기 이전인 페이지 나타남 |
| 5 | 닫기 버튼 - 버튼을 눌렀을 경우, 시청 중인 라이브 영상 닫기 |
| 6 | 라이브 커머스 제목 - 사용자가 작성한 제목 텍스트 표시 |
| 7 | 셀러 프로필 이미지 - 진행 중인 크리에이터 프로필 페이지로 이동 - 팔로워수, 텍스트 인사말, 진행 예정인 라이브 커머스와 지난 라이브 커머스를 표시 - 시청 중인 라이브 영상은 우측 하단으로 PIP |
| 8 | 셀러 닉네임 - 라이브 커머스를 진행하는 사용자가 설정한 닉네임을 표시 |
| 9 | 라이브 누적 시청자수 표시 - 라이브 커머스 진행 중 전체 누적 시청자수를 표시 |
| 10 | 팔로우 버튼 - 사용자가 아직 팔로우가 아닐 경우, 활성화 - 버튼을 눌렀을 경우, 크리에이어 방송 알림 confirm - 알림창 내, '오후 9시~오전 8시 사이에도 알림받기' 체크박스 - 사용자가 팔로우 하였을 경우, 체크 표시 - 크리에이터 프로필 페이지에서 팔로우 해제 가능 |
| No. | 하단 (7) |
| 1 | 타사용자 이벤트 정보 - 이벤트 내용 1) @ 님이 참여했습니다 : 입장 정보 2) @ 님이 장바구니에 담았습니다 : 장바구니 담았을 시 @ : 사용자 이름, 가운데 이름은 *으로 표시 - 애니메이션 : 좌에서 우로 미끄러지며 나타났다가 반대로 흐려지며 사라짐 |
| 2 | 채팅 목록 - 초기 쿠팡 관리자가 등록한 안내 문구 표시 - 실시간 채팅 내용을 최신순으로 아래서 위로 올림 - 최대 7줄까지 보여짐 - 사용자 채팅 내용별 문단 간격 두어 구분 - 채팅 내용 스크롤 가능 |
| 3 | 채팅 버튼 - 버튼을 눌렀을 경우, 아래서 위로 텍스트 입력키보드 나타남 - 키보드 위, 텍스트입력 필드 - 플레이스 홀더(기본) : 궁금한점이 있으신가요? - 커서 표시 - 텍스트입력 필드 좌측 '닉네임 설정' 버튼 - 버튼을 눌렀을 경우, 라이브 참여 설정 팝업 - 팝업은 닉네임 입력 및 저장버튼 |
| 4 | 쿠폰 버튼 - 버튼을 눌렀을 경우, 아래서 위로 모달창이 전체화면의 약 60% 가려져 나타남 - 라이브 커머스 중 적용가능한 쿠폰 목록 - '전체받기' 버튼 - 적용가능한 쿠폰이 없을 경우, '사용할 수 있는 할인쿠폰이 없습니다' 텍스트 문구 표시 - 모달창 닫기 1) 모달창 우측 상단 닫기 버튼 2) 영역 밖 선택 |
| 5 | 좋아요(하트) 버튼 - 좋아요 버튼 위, 뱃지 형태로 라이브 커머스 진행 중 시청자들이 눌른 누적 하트수를 표시 - 버튼을 눌러 하트를 보냄 - 횟수 제한 없음 - 애니메이션 : 화면 우측으로 하트를 비롯한 다른 이모지 5개가 랜덤으로 아래서 위로 올라가며 사라짐 |
| 6 | 상품전체보기 버튼 - 버튼을 눌렀을 경우, 라이브 상품 리스트가 모달창으로 전체화면의 약 60% 가려져 나타남 - 상품정보와 함께 장바구니 버튼, 구매하기 버튼 - 모달창 닫기 1) 모달창 우측 상단 닫기 버튼 2) 영역 밖 선택 |
| 7 | 라이브 상품 중 현재 설명하고 있는 상품 표시 - 좌우 스크롤하여 목록 이동 가능. 상품전체보기 버튼도 함께 이동 - 상품 정보의 좌측 상단에 머릿말로 소개 중인 상품임을 표시 - 상품을 눌렀을 경우, 라이브 상품 리스트 모달창 나타남. 상품전체보기 버튼과 동일 |
3. 그립 라이브 쇼핑 UI
✅ 주요 기능 (14가지)
| No. | 상단 (9) |
| 1 | 프로필 이미지 - 프로필 이미지를 눌렀을 경우, 해당 셀러(크리에이터) 페이지로 이동 - 셀러 페이지에는 팔로워/팔로잉 수, 텍스트 소개말 표시 - 그리고 탭으로 구분 1) 방송 : 지난 방송 녹화 전체 영상 목록 2) 상품 : 판매를 진행한 전체 상품 목록 |
| 2 | 닉네임 표시 - 셀러(크리에이터)가 설정한 닉네임을 표시 |
| 3 | 라이브 누적 시청자수 표시 - 라이브 커머스 진행 중 전체 누적 시청자수를 표시 |
| 4 | 공유하기 버튼 - 공유하기 버튼을 눌렀을 경우, 아래서 위로 모달창이 전체 화면의 약 20% 가려지며 나타남 - 공유하기 : 링크복사, 카카오톡, 페이스북, 라인, SNS, 더보기 - 더보기 버튼을 눌렀을 경우, OS에 맞는 기본 공유하기 화면 나타남 |
| 5 | 더보기 버튼 - 더보기 버튼을 눌렀을 경우, 아래서 위로 모달창이 전체 화면의 약 20% 가려지며 나타남 - 버튼 목록 1) 이 방송 신고 2) 이 그리퍼의 모든 방송 차단 3) 취소 |
| 6 | 창 축소(PIP) 버튼 - 창 축소 방법 1) 우측 상단 버튼 2) 영상을 아래로 제스처 - 시청 중인 라이브 영상은 우측 하단으로 PIP - 접근하기 이전인 페이지 나타남 - PIP 닫기 1) 화면 밖으로 제스처하여 닫음 |
| 7 | 라이브 표시 - 현재 라이브 임을 표시 - 라이브가 아닐 경우, '풀영상 보기' 버튼(기본값) - '풀영상 보기' 버튼을 눌렀을 경우, '하이라이트 보기' 버튼으로 바뀜 |
| 8 | 팔로우 버튼 - 팔로우 버튼을 눌렀을 경우, 해당 셀러(크리에이터)를 팔로우되며 버튼은 사라짐 - 팔로우 해제 방법은 해당 셀러(크리에이터) 프로필 페이지에서 해제 가능 |
| 9 | 타이머 쿠폰 버튼 - 셀러가 설정한 일정 시간을 시청했을 때 발급이 되는 쿠폰 - 금액 할인 - 아래 남은 시간 표시 |
| No. | 하단 (5) |
| 1 | 채팅 목록 - 실시간 채팅 내용을 최신순으로 아래서 위로 올림 - 최대 8줄까지 보여짐 - 마지막 2줄은 셀러가 공지사항으로 등록한 텍스트 보여짐 - 사용자 채팅 내용별 문단 간격 두어 구분 - 채팅 내용 스크롤 가능 - 스크롤 시, 목록 좌측에 최신 채팅으로 이동 버튼 나타남 |
| 2 | 스토어 버튼 - 버튼을 눌렀을 경우, 아래서 위로 모달창이 전체화면의 약 70% 가려져 나타남 - 탭으로 구분 1) 판매상품 : 현재 라이브 판매 중인 상품 2) 장바구니 : 사용자 장바구니 목록 - 모달창 닫기 1) 우측 상단 닫기 버튼 2) 영역 밖 선택 |
| 3 | 채팅 버튼 - 버튼을 눌렀을 경우, 아래서 위로 텍스트 입력키보드 나타남 - 키보드 위, 텍스트입력 필드 - 플레이스 홀더(기본) : 메시지를 입력해주세요 - 커서 표시 |
| 4 | 쿠폰 버튼 - 버튼을 눌렀을 경우, 아래서 위로 모달창이 전체화면의 약 55% 가려져 나타남 - 현재 진행 중인 상품 중에 적용가능한 쿠폰 목록 - 적용가능한 쿠폰이 없을 경우, '이 방송 상품에 적용할 수 있는 쿠폰이 없습니다.' 문구 표시 |
| 5 | 좋아요(하트) 버튼 - 좋아요 버튼 위, 뱃지 형태로 라이브 커머스 진행 중 시청자들이 눌른 누적 하트수를 표시 - 버튼을 눌러 하트를 보냄 - 횟수 제한 없음 - 애니메이션 : 화면 우측으로 하트를 비롯한 다른 이모지 1개가 랜덤으로 아래서 위로 올라가며 사라짐 |
👀 전반적인 기능들이 비슷하지만
현재 e-commerce 시장을 이끌어가고 있는 네이버와 쿠팡.
그리고 라이브 커머스의 시작을 알렸던 그립을 비교해보았습니다.
전반적인 기능들이 비슷하지만 라이브 커머스를 운영하는 방식에 차이가 있습니다.
셀러가 라이브 커머스를 진행하는데 있어 몇가지 채널별 차이가 있는데요.
1) 네이버
- 스마트스토어 판매자들에게 제공
- 본인이 원하는 시간에 자유롭게 방송이 가능
- 수시로 라이브 기획전에 참여할 스토어 판매자들을 모집
2) 쿠팡
- 쿠팡라이브센터(https://livecreator.coupang.com/) 에서 셀러/벤더 모집하여 진행
Coupang Live Platform
livecreator.coupang.com
- 시간대를 나누어 진행
3) 그립
- 그립(운영사) 사용자를 심사하여 라이브를 진행하는 그리퍼를 선별
- 그리퍼는 그립에 입점한 상품 중 선택 또는 선발되어 라이브 커머스를 진행
현재 네이버가 플랫폼 내 유저를 바탕으로 압도적으로 많은 방송수와 시청자수를 보여집니다.
라이브 커머스를 비교하면서 시청한 개인적인 느낌으로는 현재 라이브 커머스는 매력적인 채널, 방송이라고 느껴지지 않습니다.
전체적인 구조는 훌륭하나 컨텐츠를 이루는 내용들이 난잡하고 잘 집중되지 않아 구매까지 연결되기 힘들 것 같습니다.
e-commerce에서는 사용자의 목적 구매가 더 많아지는데 라이브 커머스는 적합하지 않다고 생각합니다.
특히 최근 카테고리별로 전문화된 쇼핑몰들이 많이 생기고 보다 매니아적인 것을 선호하는 상황에 있어 라이브 커머스의 특별한 매력은 없는 것 같습니다.
오히려, 카테고리별로 특색에 맞는 라이브 커머스가 더 많은 사용자들에게 호응을 얻을 수 있지 않을까 생각됩니다.
(ex. 패션 라이브 커머스 : 무신사 유튜브)
폭발적으로 성장하고 있는 라이브 커머스.
앞으로 어떻게 변화할지. 계속해서 네이버와 쿠팡이 시장을 선도할지.
새로운 유니콘 기업의 탄생이 있을지 기대됩니다. 😀
728x90
'서비스 기획 > UI UX design' 카테고리의 다른 글
| [서비스 기획] 모바일 웹(web)과 모바일 앱(app) 차이 (0) | 2021.06.15 |
|---|---|
| [서비스 기획] UX/UI 디자인 영역 (0) | 2021.06.04 |