PULSE 실시간 맥락 기반 자동화 기획전 PRD

UX_GUIDELINES

PULSE_DESIGN_SYSTEM

OPTIMIZATION_REPORT

PULSE Design System

Figma 디자인과 Lovable 구현안을 비교해, 두 디자인에서 유지할 만한 장점만 합쳐 정리한 디자인 시스템 가이드입니다. 목표는 발견형 커머스의 감도와 사용성을 동시에 살리는 것입니다.

1. Design Direction

PULSE는 검색보다 발견에 가까운 경험을 제공한다. 화면은 상품을 나열하기보다, 날씨, 시간, 일정, 취향 같은 맥락을 편집된 기획전처럼 보여준다.

가져갈 장점

• Figma의 강점: 고급 패션 매거진 같은 어두운 무드, 큰 이미지, 절제된 텍스트, 여백 중심의 에디토리얼 구성
• Lovable의 강점: 실제 앱처럼 작동하는 헤더, 검색, AI 큐레이션 카드, 필터, 하단 탭 내비게이션, 저장/알림 액션
• 통합 방향: Noir Editorial Commerce
• 핵심 인상: 조용함, 고급스러움, 실시간성, 개인화, 큐레이션

2. Visual Principles

Image First

상품과 브랜드 이미지는 화면의 주인공이다. 텍스트는 이미지를 보조하고, 정보는 필요한 순간에만 드러낸다.

• 히어로는 전체 분위기를 결정하는 대형 비주얼로 구성한다.
• 피드 이미지는 1:1, 3:4, 4:5, 5:4 비율을 혼합해 리듬을 만든다.
• 이미지 위 텍스트는 하단 그라데이션 오버레이 위에 배치한다.
• 이미지에는 약한 확대 hover 또는 transition을 허용한다.

Context First

큐레이션 이유를 사용자가 즉시 이해할 수 있어야 한다.

• 날씨, 위치, 날짜, 이벤트, 시간대 같은 맥락을 작은 pill 배지로 표시한다.