리모컨 중심의 쇼핑경험 구축 전략(Skylife쇼핑+)

리모컨의 한계를 넘는 TV-to-Mobile 커머스 전략

by 김석민


디지털 서비스의 주 무대가 모바일로 옮겨간 지 오래되었지만, 거실의 대화면이 주는 몰입감과 실시간 방송의 영향력은 여전히 강력합니다. 하지만 TV 환경에서의 쇼핑은 모바일이나 웹에 비해 현저히 낮은 접근성과 불편한 탐색 구조를 가지고 있었습니다. 2025년 진행된 Skylife 쇼핑+ 프로젝트는 'TV라는 특수한 환경'에서 사용자가 어떻게 더 쉽고 빠르게 쇼핑을 즐길 수 있을지에 대한 고민에서 시작되었습니다.


image.png


1. TV라는 특수한 디바이스의 UX 환경


TV UX를 설계할 때 가장 먼저 고려해야 할 점은 사용자와 디바이스 사이의 물리적 거리입니다. 스마트폰이 30cm 거리에서 손가락 터치로 조작하는 'Lean-forward' 환경이라면, TV는 약 3m 떨어진 거리에서 소파에 기대어 리모컨으로 조작하는 'Lean-back' 환경입니다.

리모컨 인터페이스는 마우스의 자유로운 포인팅이나 모바일의 스크롤과 달리, 상하좌우 방향키와 확인 버튼만으로 모든 탐색을 수행해야 하는 구조적 한계를 지닙니다. 따라서 TV 커머스 설계의 핵심은 탐색 단계를 최소화하고, 수백 개의 채널에 흩어진 정보를 어떻게 효율적으로 통합하여 제공하느냐에 있습니다.

image.png


2. Branding: '모아보고 더하는' 쇼핑의 본질 시각화


우리는 '쇼핑+'가 전달해야 할 핵심 가치를 정의하는 브랜딩 작업부터 시작했습니다. 수많은 채널 속에서 길을 잃은 사용자들에게 필요한 것은 '명확한 가이드'와 '확장된 선택지'였습니다.

Symbol(눈의 형상): 여러 채널에 분산된 상품 정보를 한곳에 모으는 플랫폼의 본질을 '눈'의 형태로 형상화했습니다. 채널 전환 없이 모든 정보를 직관적으로 비교할 수 있다는 '통합'의 가치를 담았습니다.

Meaning(+): 플러스 기호는 더 많은 선택지와 더 나은 쇼핑 경험을 의미합니다. 간결한 명칭과 심볼은 복잡했던 홈쇼핑 이용 과정을 정리하고 '모아보는 쇼핑'이라는 브랜드 콘셉트를 명확히 인지시킵니다.

image.png
image.png


3. 전략 1: 시각적 가독성과 정보 계층의 재정립


홈쇼핑의 주 이용층인 중장년층에게 TV 화면의 작은 텍스트와 복잡한 레이아웃은 커머스 접근을 막는 큰 장벽입니다. 우리는 시니어 타겟의 사용성을 최우선으로 고려하여 시각 시스템을 설계했습니다.

타이포그래피의 최적화: 3m 거리에서도 정보를 즉각 인지할 수 있도록 헤드라인 28px, 타이틀 24px의 큰 폰트 사이즈를 채택하고, 150%의 충분한 행간을 확보했습니다.

고대비 컬러 시스템: 깊이감 있는 다크 모드 배경(#111111)에 명도가 높은 포인트 컬러(#04D25D)를 매칭했습니다. 이는 눈의 피로를 낮추는 동시에 리모컨 이동 시 현재 선택된 영역(Focus)을 명확하게 구분해 줍니다.

정보 밀도 제어: 무한 스크롤 대신 한 화면에 큐레이션된 카드형 UI를 배치하여 사용자가 한눈에 받아들일 수 있는 정보의 양을 최적화했습니다.

STYLE GUIDE

‘쇼핑+’는 여러 채널을 넘나들 필요 없이 모든 쇼핑을 한 화면에서 완성하는 통합형 홈쇼핑 플랫폼의 정체성을 상징합니다. 간결한 명칭과 직관적인 심볼 구성은 복잡했던 홈쇼핑 이용 과정을 정리하고, ‘모아보는 쇼핑’이라는 브랜드 콘셉트를 명확하게 인지하게 합니다.

image.png
image.png


4. 전략 2: 채널 중심에서 상품 중심으로, 통합 큐레이션


기존 홈쇼핑 이용자들은 원하는 상품을 찾기 위해 수십 개의 채널을 직접 돌려봐야 하는 '재핑(Zapping) 피로도'를 겪어왔습니다. 쇼핑+는 공급자 중심의 채널 나열 방식에서 벗어나 사용자 중심의 상품 모아보기를 구현했습니다.

탐색 동선 단축: 실시간 방송 상품들을 카드형 콘텐츠로 구성해 채널 전환 없이 상품을 확인·비교할 수 있게 했습니다.

데이터 기반 배치: '실시간 인기 채널 TOP 4'를 상단에 고정 배치하여 의사결정 속도를 높였습니다.

기기별 유연한 대응: 셋톱박스의 성능과 환경에 따라 인터랙션 수준을 달리하는 A/B/C 타입별 레이아웃을 설계하여 어떤 환경에서도 안정적인 서비스를 보장했습니다.


전체서비스

대표 이미지를 중심으로 커머스 채널을 직관적으로 구성하고, TOP 4 인기 채널을 상단에 고정 배치해 핵심 콘텐츠의 가시성을 강화했습니다. 영상 시청 없이도 주요 정보를 빠르게 인지할 수 있는 시각 중심 UI를 통해 사용자의 선택을 자연스럽게 유도합니다.

image.png


현재 선택된 홈쇼핑 방송을 중심으로 실시간 인기 채널을 카드형 콘텐츠로 구성해 한 눈에 비교·탐색할 수 있도록 설계했으며 사용자는 흐름을 끊지 않고 콘텐츠 탐색과 쇼핑 몰입을 자연스럽게 경험할 수 있습니다.


image.png
image.png
image.png
image.png


5. 전략 3: TV 시청과 쇼핑의 심리스(Seamless)한 연결


TV 커머스의 가장 큰 딜레마는 '방송 시청'과 '상품 쇼핑' 사이의 간섭입니다. 쇼핑+는 시청 흐름을 방해하지 않는 비간섭 UX를 지향했습니다.

리모컨 조작에 따라 하단 오버레이 형태로 정보를 제공하여 시청 몰입감을 유지하고, 주문 단계에서는 TV의 입력 한계를 인정하는 전략을 취했습니다. 리모컨으로 주소를 입력하는 고통을 덜어주기 위해, 결제와 상세 정보 확인은 QR 코드를 통해 모바일에서 완성하도록 설계하여 주문 이탈률을 획기적으로 낮추었습니다.


image.png


기술보다 사용자의 '상황'에 집중하는 디자인


결국 좋은 UX란 화려한 기술을 뽐내는 것이 아니라 사용자가 처한 불편한 상황을 제거하는 것이 본질입니다. Skylife 쇼핑+ 프로젝트는 리모컨을 든 사용자의 손가락 수고를 덜어주고, 저시력 사용자도 불편함 없이 정보를 읽을 수 있게 만드는 데 집중했습니다.

이번 프로젝트는 파편화된 홈쇼핑 생태계를 사용자 중심으로 통합하여, TV가 단순한 '보는 도구'를 넘어 '가장 편안하게 쇼핑하는 창구'로 진화할 수 있음을 증명한 사례입니다.


이 글은 비쥬얼스토리에서 진행한 ‘Skylife 쇼핑+’ 프로젝트의 브랜딩 및 UI/UX 설계 경험을 바탕으로 작성되었습니다.
매거진의 이전글더 잘 팔고 더 잘 사는 법