디자인 시안

Pencil .pen 단일 파일로 그린 시안 — 잉크 블루 #1D48B0 · Pretendard · 390px 기준. 화면 32장을 서비스 여정 순서로 싣고, 뒤에 디자인 시스템 4장을 붙인다. 이미지를 누르면 원본 크기로 열린다.

화면 플로우

0. 설치 · 스플래시

웹을 홈 화면에 설치하도록 배너로 이끌고, 설치된 앱은 스플래시로 뜬다

1. 온보딩 · 로그인

로그인 전 3장으로 규칙을 익히고, 구글 · 카카오로 들어온다

2. 홈 · 탐색

홈은 최신 경매를, 목록은 검색과 정렬(최신 · 마감 임박 · 사연 많은 순)을 담는다

3. 경매 상세 — 관계별

같은 라우트가 나와 경매의 관계에 따라 셋으로 갈린다. 마감 후에는 유찰 화면이 있다

4. 사연 작성 · 경매 등록

사연과 포인트로 입찰하고, 주최자는 사진 · 제목 · 기간으로 경매를 연다

5. 낙찰 · 채팅

낙찰이 확정되면 주최자와 낙찰자의 1:1 채팅이 열린다

6. 마이페이지 · 포인트 · 배송지

프로필과 탭 3개(내 경매 · 내 사연 · 찜), 포인트 원장과 배송지 1건

7. 알림

마감 임박 · 새 사연 · 낙찰 결과 · 새 메시지. 목록을 열면 읽음이 된다

8. 에러 · 오프라인

없는 주소 · 끊긴 연결 · 그리다 터진 화면 셋 다 갈 곳을 준다. 404는 웹과 앱이 같은 화면을 쓰고, 오프라인은 서비스 워커와 앱 셸이 각자 띄운다

디자인 시스템

00 개요

디자인 원칙 — 관계로 판단한다 · 시각 언어는 한 벌 · 레드는 경고에만 — 과 화면 지도

01 컬러 파운데이션

잉크 블루 · 레드 · 남색 틴트 회색 스케일과 시맨틱 토큰

02 타이포그래피

Pretendard 한 서체 · 타입 스케일 7단 · 숫자 표기 규칙

03 공통 UI 컴포넌트

버튼 · 배지 · 입력 · 스테퍼 · 카드 · 다이얼로그 등 9묶음의 상태별 정의