Le Labo

The mandate

"오프라인의 시향 경험을
온라인에 옮겨주세요."

기존 온라인 스토어는 단순 리스트형. 매장에서의 무드와 큐레이터의 개입이 사라진 채 가격과 썸네일만 남았습니다. 첫 미팅에서 받은 요청은 단순했지만, 그 이면의 질문은 결국 "디지털에서 어떻게 결정을 도와줄 것인가"였습니다.

매장에선 직원이 "어떤 향을 좋아하세요?"라고 물어봐주는데, 온라인에선 그냥 그리드만 떠요.
르라보가 르라보 같지 않아요.
Brand team, kick-off (2026.01)

나의 해석

"시향"은 후각 경험이지만, 디지털에서 그것을 흉내낼 수는 없습니다. 대신 "고르는 과정"을 콘텐츠로 격상하면 후각의 빈자리를 의사결정 서사로 채울 수 있습니다. 큐레이션 IA가 시향 경험의 디지털 대체재가 됩니다.

What I diagnosed

기존 구조에서 3가지 단절을 찾았습니다.

단순 그리드의 문제는 미적 결함이 아니라,
"사용자가 결정하기 위한 정보가 어디에도 없다"는 구조 결함이었습니다.

FIG · 02-A

FIG. 02-A · Diagnostic flow · purchase funnel breakage

From symptoms to goals

3가지 단절을
3가지 목표로 옮겼습니다.

Problems · 진단

P-01사용자의 구매 의도를 시작 단계에서 묻지 않음. 진입자 모두에게 같은 그리드.
P-02향수의 비교 단위가 없음. 노트·강도·계열을 추상적 단어로만 노출.
P-03PDP가 "무엇을 사는지"는 알려주지만 "왜 이 향이 나에게"는 답하지 않음.
P-04장바구니→결제 사이에 시향 샘플 추가의 자연스러운 분기가 없음.

Goals · 디자인 목표

G-01Finder 진단 흐름을 별도 진입점으로 분리 (4-step questionnaire). 카탈로그 외 의도-기반 진입 옵션 추가.
G-02모든 PDP에 구조화된 향 카드(Top·Heart·Base + 시간 메타데이터) 도입.
G-03PDP에 Top/Heart/Base 노트 아키텍처를 핵심 정보 모듈로 격상.
G-04장바구니 하단에 카테고리 cross-sell (Home / Body / Gift) 모듈 도입 향수 외 라인업 노출로 객단가 보강.

Field interviews · n=12

같은 말을 다른 표현으로
3번 들었을 때, 그것은 데이터입니다.

입문자 6명, 브랜드 충성고객 4명, 선물 구매자 2명.
인터뷰는 2시간씩, 실제 구매 화면을 함께 봤습니다.

"온라인에서 향수를 살 땐 실패할까봐 두려워요. 매장에선 직원이 물어봐주잖아요 그런 게 화면에 있으면 좋겠어요."

"Santal 33은 알아요. 근데 비슷한 향이 또 있는지 그건 도저히 사이트에서 못 찾겠더라고요. 결국 블로그 검색해요."

"사진은 다 비슷비슷해요.
라벨만 바뀌어 있고. 결국 가격순으로 보다가 안 사고 닫아요."

"샘플이 있다는 건 알아요. 근데 어디서 어떻게 추가하는지를 모르겠어요. 그냥 본 제품만 사고 끝나요."

Information Architecture · Concept-stage proposal

"어떻게 고를지"의 분기점을
홈 첫 화면에 만들었습니다.

현재 라이브 빌드: 카탈로그 + Finder 진단 페이지(별도).
아래 다이어그램은 컨셉 단계의 IA 제안Finder 진단을 홈 1차 분기로 끌어올린 가상 시나리오입니다. 빌드는 Shop · Finder · Journal 각각 독립 페이지로 운영됩니다.

FIG · 05-A

FIG. 05-A · Concept IA · Finder discovery + cross-sell cart (proposed direction)

The trade-off log

남긴 결정과 버린 결정을
같은 무게로 적습니다.

좋은 디자인은 "추가한 것"보다 "삭제한 것"으로 평가됩니다.
6개의 핵심 결정을 왜 그 길을 갔고, 왜 다른 길을 거부했는지 함께 기록했습니다.

# Before After Why

D-01

홈 = 시즌 제품 슬라이더 + 전체 카탈로그 그리드

홈 = 브랜드 swiper hero + Finder 진단 진입점 (별도 페이지)
※ 컨셉 IA의 3-way landing은 다음 단계 제안

사용자가 진입할 때 마음 상태가 다르다.
Finder를 별도 진단 페이지로 분리해 "의도가 있는 사용자"의 진입점을 만들었다. 홈 1차 분기로 끌어올리는 것은 IA 제안으로 남겼다.

D-02

PDP 첫 화면 = 거대한 제품 사진 + 가격

PDP 첫 화면 = Top/Heart/Base 향 카드 + 시간 메타데이터

제품 사진은 향을 설명하지 않는다.
노트 아키텍처를 결정 위치 가까이 둬 "왜 이 향이 나에게"의 답을 보강한다. 가격은 스크롤 1단계 아래로.

D-03

전체 향수 그리드 1페이지 노출

계열별 6 클러스터 + 이전 선택 기억

"전체"는 위계가 아니다.
비슷한 향끼리 묶어 비교 가능하게 만든다.
한 번 본 클러스터는 다음 진입에서 우선 노출.

D-04

결제 직전: "쿠폰 / 적립금 / 배송지" 3개 폼

결제 직전: 카테고리 cross-sell
(Home / Body / Gift) 모듈 + 폼 접힘

결제 망설임 구간을 "브랜드의 다른 라인업 발견"으로 전환.
향수 단일 라인업 의존 대신 Home·Body·Gift로 객단가 보강.
폼은 신뢰가 쌓인 뒤 펼친다.

D-05

상세 추천 = 알고리즘 ("이 상품을 본 사람들…")

상세 추천 = 조향사 큐레이션 + 알고리즘은 fallback

에디토리얼 브랜드의 신뢰는 "사람의 손길"에서 온다.
알고리즘은 효율은 높지만 르라보다움을 깎는다.

D-06

검색 = 키워드 매칭

검색 = 키워드 + 자연어 + 최근 본 4개

사용자는 제품명을 모르는 경우가 더 많다.
향의 묘사로 검색되도록 단, 자연어는 옵션으로만.

Component states · 향 카드

같은 카드를 4가지 상태로
정의했습니다.

Discovery 단계에서 사용자가 가장 많이 만지는 컴포넌트는 "향 카드"입니다.
이 카드만 4가지 상태로 정밀하게 다듬으면, 전체 화면의 디테일이 따라옵니다.

S-01

Default

노트 + 강도 미니 차트만. 가격은 hover에만.

S-02

Hover · Focus

가격 배지 + 비교 정보(노트 강도 라인) 노출.

S-03

Selected

진단 결과 카드. 어두운 배경으로 우선 위계.

S-04

Disabled · OOS

재고 없음 명시 + 알림 신청 분기 노출.

Tokens · 시스템 추출

결정을 토큰으로 굳혔습니다.

매 결정이 매번 새로 협의되지 않도록, 색·타입·간격을 토큰으로 고정했습니다.
다음 인하우스 디자이너가 와도 흐름이 끊기지 않게.

Color tokens

Forest / Primary #1A2421 본문 · 헤더 · 다크 밴드

Copper / Accent #C98A53 큐레이션 · CTA 액센트

Surface Soft #F5F5F4 카드 hover · 섹션 분리

Surface #FFFFFF 캔버스 · PDP 컨테이너

Line / Beige #E5E2DC 헤어라인 · 구분선

Type stack

Le Labo

Display · DM Serif Display Italic · clamp(38, 5.4vw, 60)

Hand blended, in Brooklyn.

H1 · Outfit / Inter / Noto Sans KR · clamp(30, 3.4vw, 40)

Body copy holds the rationale, the small facts, the texture. It's where decisions become readable.

Body · Outfit / Inter · 14px / 1.6

CASE 01 / EDITORIAL · 2026

Mono · Space Mono 400 · 11px / 0.2em

Projected · Concept-stage simulation

숫자는 맥락 안에서만 의미가 있습니다.

컨셉 프로젝트로, 아래 수치는 실측이 아닌 시뮬레이션 기반 예상치입니다. 동일 카테고리 산업 평균과 사용성 테스트를 결합해 6주 코호트로 보정했습니다.
절대 수치보다 "이 결정이 어떤 수치를 만들 수 있는가"의 가설로 읽어주세요.

K-01 · 핵심 퍼널 +24%

Finder 진단 → 결제 전환율 상승 (예상)

Finder 진단 도착 코호트만 측정 가설. 일반 카탈로그 진입 코호트는 베이스라인 수준. 의도-기반 진입점 분리가 효과의 80% 이상으로 가설.

K-02 · 이탈 구간 −18%

PDP 평균 이탈률 감소 (예상)

Top/Heart/Base 향 카드 + 시간 메타데이터 도입이 PDP 평균 체류를 끌어올린 가설. 특히 입문자 코호트에서 −32%로 가장 크게 작동할 것으로 예상.

K-03 · 객단가 1.5x

평균 주문 객단가 증가 (예상)

장바구니 하단 cross-sell (Home/Body/Gift) 모듈 도입. add-rate 자체보다, 향수 외 카테고리가 평균 객단가에 기여하는 비율이 의미 있음.

What I'd do differently

케이스가 끝난 자리에서
다음 케이스가 시작됩니다.

R-01

"진단"이 마법은 아니었다.

Finder 4-step 진단의 시뮬레이션 완료율은 64%. 2단계에서 빠지는 사용자가 많았습니다. 다음 버전에서는 "Skip · 그냥 둘러볼래요" 분기를 명시해, 진단을 강요하지 않는 톤이 필요하다고 봅니다.

R-02

데이터는 천천히, 결정은 빠르게.

Cross-sell 모듈의 efficacy는 시뮬레이션 데이터로 확신했지만, 그 결정 자체는 CS 응대 로그를 본 다음날 했습니다. 데이터가 결정을 만들지 않습니다. 결정은 가설이고, 데이터는 그 가설의 보강재입니다.

R-03

에디토리얼은 비용이다.

노트 아키텍처 너머의 "조향 스토리 콘텐츠"를 모든 제품에 만드는 일은 디자인이 아니라 콘텐츠 운영의 문제. 이번 빌드에서는 Top/Heart/Base 메타데이터까지만 구현했고, 다음 케이스에서는 콘텐츠팀 합류 시점을 Discovery 단계에 끌어와야 합니다.

"오프라인의 시향 경험을 온라인에 옮겨주세요."

나의 해석