
LINE SPOT Taiwan
대만 라인 스팟
Project Briefs
LINE Spot은 ‘LIFE on LINE(라인이 일상이 되는 세상)’이라는 슬로건 아래, LINE 앱 내에서 제공되는 POI 중심의 머천트 정보 서비스입니다. 사용자는 LINE 앱 내에서 자신의 위치를 기반으로 주변 오프라인 상점 정보를 탐색할 수 있으며, 점주들은 사업 규모와 관계없이 LINE 플랫폼을 통해 비즈니스를 노출할 수 있는 기회를 제공받습니다.
My Role
서비스 전반의 UX 디자인을 디렉팅 하는 동시에, Hands-on 멤버로서 디자인 과정에도 직접 참여했습니다.
Participants
Design Directing: Jay
UX Design: Jay, Ken
Prototyping: Nemo
TV Commercials
Goal Setting
Value Proposition
첫번째 런칭 버전은 아래의 3가지 핵심 가치를 충실히 제공 하는것을 목표로 설정 했습니다.
1. 위치 기반의 편리한 상점 탐색 UX 제공
2. 상점의 서비스 퀄리티를 평가하고 열람 하는 기능 제공
라인 페이 및 라인 포인트가 지원되는 상점을 손쉽게 검색할 수 있는 기능 제공
UX Orientation
본 서비스의 UX 방향성은 상점의 세부 정보를 손쉽게 확인하는 동시에, 지도 상에서 위치를 직관적으로 파악할 수 있도록 하는 데에 두었습니다.
해당 방향성을 충족하기 위해서는 지도를 얼마나 편리하게 조작할 수 있는지가 중요 하다고 판단 하였으며, 이에 따라 지도 중심의 ‘지도 뷰’, 정보 탐색에 용이한 ‘리스트 뷰’, 그리고 지도와 리스트를 함께 확인할 수 있는 ‘스탠다드 뷰’를 모두 제공 하도록 설계하였습니다.
또한 각 뷰 타입을 간단한 프레스&드래그 제스처만으로 전환할 수 있도록 하였으며, 전환 과정에는 모션 효과를 적용하여 사용자가 전환 과정을 직관적으로 인지할 수 있도록 설계 하였습니다.
Design Outcome
3가지 뷰 타입
사용자가 지도 뷰에서 위치를 중심으로 탐색 할지, 리스트 뷰에서 머천트 세부 정보를 중심 으로 탐색 할지 선택할 수 있도록 지원했습니다. 또한 각 뷰타입 간 전환은 Press & Drag 방식으로 직관적이고 손쉽게 이루어 지도록 설계 했습니다.
뷰 타입 - UX 시나리오
지도 뷰와 리스트 뷰 간 전환 과정이 세부 케이스별로 어떻게 전개 되는지를 구체적인 시나리오로 정의하고, 이를 기반으로 UX를 검증하였습니다. 또한 모든 뷰 타입에서 공통으로 사용할 수 있는 범용 필터 UX를 설계하였습니다. 이와 함께 사용자가 탐색 과정에서 필터를 빈번하게 열고 닫더라도, 지도 상에 표시된 정보의 시인성이 저해되지 않도록 UX를 정교하게 설계 하였습니다.
필터 - UX 시나리오
필터는 모든 뷰타입에서 일괄적으로 적용되는 범용 필터 입니다. 카테고리와 머천트 조건(오픈 여부, 라인페이 지원 여부, 프로모션 여부 등)을 동시에 조합 하여 정보를 소팅할 수 있도록 설계 하였습니다. 특히 사용 빈도가 높은 머천트 조건은 필터가 접힌 상태 에서도 ON/OFF 토글 방식으로 제공 되도록 하여, 편의성을 증대 하였습니다.
아이콘 디자인
지도 뷰에서 표현되는 다양한 상점 유형을 시각적으로 명확히 구분할 수 있도록, 선명하고 직관적인 아이콘을 디자인하였습니다.
아이콘은 지도 정보와 명확히 구분 되면서도 상점 유형을 쉽게 식별할 수 있어야 했으며, 라인 포인트 지원 여부 또한 한눈에 인지할 수 있도록 설계 되었습니다. 이를 위해 각 상점 유형의 특성을 효과적으로 드러내는 아이콘 스타일을 정의하고, 유형별로 구분된 컬러군을 적용하여 컬러만으로도 상점 유형을 직관적으로 인식할 수 있도록 구성하였습니다.
검색 - UX 시나리오
‘검색 홈’ 화면은 모든 뷰 타입에 공통으로 적용 되는 범용 UX로 설계 하였습니다. 다만 검색 결과는 사용자가 검색을 시작한 뷰 타입에서 그대로 노출 되도록 구성 하였습니다.
또한 뷰 타입을 전환 하더라도 검색 결과가 변경되지 않도록 설계 하여 탐색의 연속성을 유지 하였으며, 뷰 타입 전환은 프레스&드래그 제스처를 통해 손쉽게 수행할 수 있도록 제공 하였습니다.
Modal for the First Visit
Loading Animation
Current Location Indicator
Search In & Out
View Type Change
Filter Modal
Pin Selecting
Merchant Info Modal Expand
Add Spot UX Flow

Add Spot Mode A

Add Spot Mode B
















