제품 벤처

12 / 12

Heartnote

향수 탐색, 추천, checkout, 정기 결제, 계정 lifecycle을 갖춰 실제 출시한 소비자 향수 구독 제품입니다.

역할
Frontend Engineer · 2021 — 2022
문제
물리적이고 감각적인 제품을 이해시키면서 복잡한 구독 lifecycle까지 프론트엔드가 담당해야 했습니다.
전략
탐색, 추천, 선택, checkout, 계정 관리를 하나의 여정으로 설계했습니다. 출시 후에는 실제 사용자가 구독을 관리하는 데 필요한 상태를 중심으로 인터페이스를 확장했습니다.
성과
Web3 밖에서 실제 소비자 제품을 출시하고 운영했습니다.

종료된 제품 · 2021–2022

01

문제 정의

왜 이 문제를 해결해야 했는가

Heartnote는 사용자가 향수를 발견하고 선택해 매달 받아볼 수 있게 만든 소비자 향수 구독 제품입니다.

사용자와 시스템이 마주한 문제

  • 향수 탐색은 개인적이고 감각적이어서 온라인 흐름으로 바꾸기 어렵습니다.

  • 구독은 추천, 제품 선택, checkout, 정기 결제, 배송, 계정 변경, 일시정지, 해지까지 이어집니다.

  • 소비자 신뢰를 위해 정상 결제 외의 상태도 명확해야 했습니다.

프론트엔드 오너십

탐색, 구독, 결제, 계정 관리, 출시 후 개선까지 고객-facing 프론트엔드를 구현하고 유지보수했습니다.

  • 반응형 제품·마케팅 경험

  • Catalog, 검색, 상세, 취향 quiz, 추천

  • 구독 calendar, checkout, 정기 결제

  • 계정, 주문, pause, resume, cancel, coupon, referral

02

해결 전략

프로덕션까지 이어지는 시스템 전략

탐색, 추천, 선택, checkout, 계정 관리를 하나의 여정으로 설계했습니다. 출시 후에는 실제 사용자가 구독을 관리하는 데 필요한 상태를 중심으로 인터페이스를 확장했습니다.

시스템 모델

고객 여정은 향수 탐색과 취향 quiz에서 월별 선택, checkout, 정기 배송, self-service 계정 변경으로 이어집니다.

주요 구현 결정

  • 향수 catalog를 검색, 탐색, 취향 흐름으로 구성했습니다.

  • 구독 선택을 결제와 반복되는 계정 상태에 연결했습니다.

  • 최초 checkout 이후의 self-service lifecycle action을 구현했습니다.

  • 소비자 analytics와 국내 commerce 서비스를 연동했습니다.

03

성과

무엇이 달라졌고 무엇을 배웠는가

  • Web3 밖에서 실제 소비자 제품을 출시하고 운영했습니다.

  • 탐색, 커머스, 구독 lifecycle 전반의 고객 경험을 구현했습니다.

  • 제품 매력과 기술 feasibility뿐 아니라 규제와 운영 제약도 함께 검증해야 한다는 점을 배웠습니다.

배운 점

기술적으로 완결된 고객 여정도 인터페이스 밖의 운영·산업별 제약에 영향을 받습니다.

지금이라면

규제와 fulfillment 제약을 더 일찍 검증하고, 구독 상태를 정식 도메인 모델로 정의하며, 검증되지 않은 성장 수치 없이 lifecycle 전환을 관측하겠습니다.

사용 기술

  • Vue 2
  • Vuex
  • Vue Router
  • Iamport
  • Google Analytics
  • Vue Meta

함께 일하기

이 정도의 프론트엔드 오너십이 필요한가요?

연락하기