디자인 시스템 기반
상품 상세 페이지 클론
아정당 렌탈 상품 상세를 분석하고, 정보 구조·컴포넌트·토큰을 다시 설계해 Figma Make의 클릭 가능한 흐름으로 연결한 프로젝트입니다.
프로젝트 목표
실제 서비스의 구조와 UX 패턴을 분석하고, 이를 재사용 가능한 디자인 시스템과 동작하는 프로토타입으로 재구성하는 것.
화면 복사보다 먼저, 결정 구조를 읽었다
분석 대상
SK매직 풀스텐 케어 비데(BIDS17DR) 상품 상세. 상품 이미지와 모델을 확인하고 약정·관리 방법·관리 주기를 고른 뒤 월 렌탈료와 상담 행동으로 이어지는 화면입니다.
핵심 질문
사용자는 무엇을 빌리는지, 어떤 조건이 가격을 바꾸는지, 다음에 무엇을 해야 하는지를 첫 화면에서 이해할 수 있는가?
프로젝트 전체 프로세스
Step 1 · 원본의 역할을 영역별로 분해
비교 후보를 고정
비용 이점을 앞에서 제시
가격 변수를 선택
선택 결과를 확인
선택 뒤에 필요한 신뢰 근거를 긴 상세 영역에서 보강
위 도식은 원본 화면을 그대로 재현한 이미지가 아니라, 공개 화면에서 관찰한 기능과 정보 관계를 다시 그린 분석 도식입니다.
시각적 위계는 한 줄의 시선 경로로 정리했다
원본에서 유지한 것
이미지와 옵션 패널의 2열 구조, 약정·관리 선택이 가격에 영향을 주는 관계, 스펙·리뷰가 신뢰를 보강하는 흐름.
다시 설계한 것
확정 월 금액과 주 행동의 강조, 관련 정보의 카드 묶음, ‘누구에게 맞는가’와 선택 조건 요약을 CTA 바로 앞에 배치.
정보 구조는 사용자의 판단 순서로 재배치
공식 이름을 화면에 노출하지 않고, 문제 인식 → 공감 → 해결 방법 → 얻는 이익 → 적합성 판단 → 행동의 순서를 콘텐츠에 녹였습니다. 기능을 나열하기보다 “왜 이 상품을 검토하는가”에서 “어떤 조건으로 상담할 것인가”까지 이어지도록 한 결정입니다.
Step 2 · Lo-Fi에서 검증한 것은 장식이 아니라 순서
12열 · 2-column
좌측 상품 이미지와 신뢰 정보, 우측 360~380px 결정 패널. 이후 스펙과 리뷰는 단일 컬럼으로 이어집니다.
4열 · 1-column
상품 이미지 → 상품 정보 → 옵션 → 가격 → CTA 순으로 쌓고, 주 버튼은 전체 폭으로 제공합니다.
와이어프레임의 통과 질문
첫 화면에서 상품 식별, 비용 조건, 신뢰 근거, 다음 행동의 순서가 끊기지 않는가?
Step 3 · 반복 규칙을 자체 디자인 시스템으로
UI Kit을 가져오기보다 원본에서 반복되는 선택·가격·스펙 패턴을 직접 토큰과 컴포넌트로 정의했습니다. 구조는 참고하되 시각 디자인은 Cobalt Field 체계로 재구성했습니다.
#0B1526#145CE6#0D8C68#EEF2F8#DBE3EFButton
Primary · Secondary · Ghost
Option Selector
가격 변수를 같은 패턴으로 학습
Spec Module
번호·요약·열림 상태 반복
Selected 상태는 색상만 바꾸지 않고 2px 테두리·배경·아이콘을 함께 사용하도록 정의했습니다. 간격은 8px을 기본으로 16·24·48·80px 리듬으로 확장했습니다.
원본과 최종안: 무엇을 유지하고 무엇을 바꿨나
| 판단 지점 | 아정당 원본 | 재설계안 | 설계 이유 |
|---|---|---|---|
| 첫 화면 | 운영 기능과 상품·혜택·옵션이 조밀하게 공존 | 상품 확인과 조건 선택을 한 결정면으로 묶음 | 첫 과업을 빠르게 식별 |
| 가격 | 선택 조건과 카드 혜택이 함께 강조 | 옵션 반영 월 금액을 별도 블록으로 고정 | 조건과 결과의 인과관계 강화 |
| CTA | 셀프 가입과 상담 연결을 함께 제공 | 상담 신청을 Primary, 비교를 Secondary로 구분 | 주 행동의 경쟁 감소 |
| 상세 정보 | 풍부한 스펙·가이드·리뷰를 긴 페이지로 제공 | 번호형 스펙 모듈과 요약 탭으로 압축 | 탐색 거리와 정보 밀도 완화 |
| 브랜드 | 원본 브랜드·운영 체계 | 자체 컬러·타입·컴포넌트 규칙 | 패턴을 학습하되 시각 복제는 피함 |
실제 Figma 결과물
첨부된 전체 결과 캡처입니다. 안쪽을 스크롤하거나 이미지를 선택해 공개 Figma Make 결과에서 크게 볼 수 있습니다.
Step 4 · Figma Make로 클릭 흐름을 연결
공개 프로토타입에서 상품 카드가 상세 화면으로 이동하는지 확인했고, 6년·자가관리 월 18,900원 → 3년·자가관리 월 27,900원 → 3년·방문관리 월 31,800원으로 옵션에 따라 화면의 가격이 갱신되는 것을 직접 확인했습니다. 이 값은 프로토타입의 예시 데이터이며 실제 계약 가격을 의미하지 않습니다.
첫 결과를 그대로 쓰지 않고 다듬은 이유
막대는 성과 측정값이 아니라 이번 수정 작업에서 둔 상대적 우선순위입니다.
AI가 빠르게 만든 부분
초기 UI 구조, 반복 컴포넌트, 예시 데이터, 기본 반응형 레이아웃, 클릭 프로토타입.
사람이 결정한 부분
정보 우선순위, CTA의 역할, 콘텐츠 순서, 간격, 상태 일관성, 모바일 순서, 접근성 기준.
반응형·접근성·예외를 핸드오프 규칙으로
| 범주 | 구현 규칙 | 예외 상태 |
|---|---|---|
| 반응형 | Desktop 12열 / Tablet 8열 / Mobile 4열·margin 16px | 긴 가격·옵션명 줄바꿈 |
| 터치 | CTA 48px 이상, 모든 터치 대상 최소 44×44px | Disabled에서도 이유 문구 제공 |
| 대비 | 일반 텍스트 4.5:1, 큰 텍스트·UI 3:1 목표 | 색상 외 테두리·아이콘·텍스트 병행 |
| 데이터 | 가격 로딩 Skeleton, 실패 시 원인과 재시도 | Loading / Error / Empty / Success |
| 상호작용 | 옵션 → 가격 → 선택 요약 → CTA의 변경 관계 명시 | 선택 불가·중복 제출·네트워크 실패 |
결과물과 현재 검증 범위
Deliverables
UX/UI 분석 · Lo-Fi · 자체 디자인 시스템 · Hi-Fi · Interactive Prototype · User Flow · Handoff 규칙 · 회고
확인된 것과 남은 것
확인: 공개 페이지 접근, 목록→상세 이동, 약정·관리 옵션별 가격 갱신.
남음: 실제 사용자 테스트, 실제 계약 가격 연동, 운영 서비스 적용, 성과 측정.
회고
가장 어려웠던 일은 화면을 만드는 작업보다 어떤 정보를 먼저 보여주고 어떤 행동으로 연결할지를 결정하는 일이었습니다. AI는 화면과 상태를 빠르게 전개했지만, 모든 정보가 비슷한 강도로 보이는 첫 결과를 그대로 사용하면 가격·CTA·옵션의 관계가 흐려졌습니다.
다음 프로젝트에서는 User Goal → User Flow → IA → Wireframe → Design System의 순서를 먼저 고정하고, 생성 결과를 이 기준으로 평가하겠습니다.