사용자 화면 · 프라이빗 세일

프라이빗 세일 — 작품 구해요 등록

PRS-002 · 2026. 02. 24

화면 이름 프라이빗 세일 - 작품 구해요 등록 화면
화면 위치 프라이빗 세일 > 작품 구해요 버튼
화면 ID PRS-002
작성일 2026. 02. 24
PRS-002 PRS-002 PRS-002
Description
0 화면 접근 조건
  • PRS-001 화면에서 “작품 구해요" 버튼 클릭 시 진입
  • 로그인 사용자만 접근 가능
    • 비로그인 상태에서 접근 시 로그인 화면으로 이동(LOG-008)
1-1 헤더
  • 화면 식별 및 이전 화면 이동
  • 구성
    • 뒤로가기 버튼
    • 타이틀: “작품 구해요"
    • 뒤로가기 버튼 클릭 시
      • 기본적으로 별도의 안내 모달 없이 즉시 이동
      • 입력 이력이 존재할 경우
        • 진행 중인 내용 초기화 안내 모달 노출(PRS-004)
        • 모달 확인 시 이전 단계로 이동, 취소 시 현재 화면 유지
1-2 작가 이름 검색필드
  • 구매 희망 작가명 입력
  • 구성
    • 작가 이름을 입력할 수 있는 검색 입력 필드
    • 플레이스 홀더: “작가 이름을 검색해주세요"
    • 작가명 입력 후 검색 실행 시
      • 입력값 기준으로 작품 리스트 필터링
      • 전체 작품 리스트 유지
1-3 작품 도상 드롭다운 박스
  • 희망 작품 도상 선택
  • 구성
    • 드롭다운 선택 필드
    • 기본값: 미선택 상태
    • 플레이스 홀더: “작품의 도상을 선택해주세요"
    • 클릭 시 선택 옵션 리스트 노출
    • 1개 항목 선택 가능
    • 선택 후 필드에 값 반영
    • 백오피스 내 작가 도상 정보 입력한 내용 노출
    • “목록에 없어요” 항목도 노출
1-4 작품 사이즈 입력필드
  • 희망 작품 크기 입력
  • 구성
    • 숫자 입력 필드
    • 플레이스 홀더: “작품 호 사이즈를 입력해주세요"
    • 숫자 직접 입력
    • 공백만 입력 시 유효값으로 인정하지 않음
1-5 작품 금액 설정 입력 필드
  • 구매 희망 금액 입력
  • 구성
    • 숫자 입력 필드
    • 플레이스 홀더: “구매 희망 금액을 입력해주세요"
    • 숫자만 입력 가능
    • 천 단위 구분자 자동 적용
    • 0원 입력 불가
    • 음수 입력 불가
1-6 기타 요청사항 입력필드
  • 추가 요청 조건 입력
  • 구성
    • 멀티라인 텍스트 입력 필드
    • 플레이스 홀더: “요청 사항을 입력해주세요"
    • 최대 500자 입력 가능
    • 필수값 아님
1-7 취소/다음 버튼
  • 입력 종료 또는 다음 단계 진입
  • 구성
    • 취소 버튼
    • 다음 버튼
    • 취소 버튼 클릭 시
      • 기본적으로 별도의 안내 모달 없이 즉시 이동
      • 입력 이력이 존재할 경우
        • 진행 중인 내용 초기화 안내 모달 노출(PRS-004)
        • 모달 확인 시 이전 단계로 이동, 취소 시 현재 화면 유지
      • 작가 이름/작품 도상/작품 사이즈/작품 금액 완료
    • 필수값 미충족 시
      • 다음 버튼 비활성화
      • ② 바텀 시트 노출
2 구매 문의 바텀시트
  • 구매 요청 최종 확인 및 연락처 수집
  • 구성
    • 안내 문구
      • “아무개 전용 매니저가 1일 이내 연락드립니다"
      • “고객님의 개인정보는 구매 작품 문의 외에 활용되지 않습니다"
    • 연락처 입력 필드
    • 개인정보 제공 동의 체크박스
    • “문의하기" 버튼
    • 닫기버튼
    • 바텀시트 노출 조건
      • PRS-002 ① 화면에서 필수값 충족 후 “다음” 버튼 클릭 시 노출
    • 연락처 입력 필수
      • 숫자만 입력 가능
      • 하이픈 자동 삽입 가능
      • 10~11자리 유효
      • 체크박스 1개 (개인정보 수집∙이용 동의)
      • 체크 상태에 따라 CTA 활성화 조건에 영향
      • 개인정보 수집∙이용 동의 버튼 클릭 시, 동의서 노출
    • 문의하기 버튼 활성화 조건
      • 이름 입력 완료
      • 연락처 입력 완료
      • 개인정보 동의 체크 완료
      • 서버에 구매 요청 데이터 저장
      • 저장 성공 시 PRS-002 ③ 화면으로 이동
      • 저장 실패 시 오류 토스트 노출 후 바텀시트 유지
    • 닫기 클릭 시
      • PRS-002 ① 화면으로 복귀
      • 입력값 유지
3 작품 구매 요청 완료 화면
  • 구매 요청 접수 완료 안내
  • 구성
    • 완료 아이콘
    • 안내 문구
      • “전용 매니저가 신속하게 연락드리겠습니다"
    • 확인 버튼 클릭 시
      • PRS-001 화면으로 이동
      • PRS-002 입력 데이터 초기화
4 토스트 메시지 정의
  • 필수값 미입력 상태에서 “다음" 버튼 클릭 시
    • “필수 항목을 모두 입력해주세요"
    • “연락처를 입력해주세요"
  • 개인정보 미동의 상태에서 “문의하기 클릭 시
    • “개인정보 제공에 동의해주세요”
    • “요청 처리 중 오류가 발생했습니다. 다시 시도해주세요.”
5 공통 규칙
  • PRS-002 입력 데이터는 바텀시트 진입 후에도 유지
  • 바텀시트에서 취소 시 입력 데이터 유지
  • 서버 요청은 “문의하기” 버튼 클릭 시 1회 실행
  • 요청 처리 중 중복 클릭 방지
  • 완료 화면 진입 이후 브라우저 뒤로가기로 재요청 불가
  • 모든 입력값은 사용자 직접 입력값만 저장
  • 자동 저장 기능 없음

Design Output

UI 디자인 산출물

위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.

9:41
작품 구해요
* 작가 이름
작가 이름을 입력해주세요
* 작품 도상
작품의 도상을 선택해주세요
* 작품 사이즈
작품 호 사이즈를 입력해주세요
* 구매 희망 금액
구매 희망 금액을 입력해주세요
인감 기간 요청사항
인감 기간 요청사항을 입력해주세요
기타 요청사항
기타 사항을 입력해주세요
취소
다음
9:41
작품 구해요

어쿠님 전용 매니저가 1일 이내 연락드립니다

고객님의 개인정보는 구매 작품 문의 외에 활용되지 않습니다.

성함을 입력해주세요
연락처를 입력해주세요
개인정보 제공 동의 (필수)
취소
확인
9:41

전용 매니저가 신속하게 연락드리겠습니다

확인
개발 구현 가이드 — PRS-002 작품 구해요 등록

Update History

2026.03.16구현 가이드 최신화 (8섹션 재작성)
2026.03.11완료화면 확인 CTA 레드 그라디언트 적용, 구현 가이드 추가 (7섹션)
2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

  • 화면 유형: Full-screen Form + BottomSheet 확인 + 완료 화면 — 3단계 플로우
  • 진입 경로: PRS-001 "작품 구해요" 버튼 클릭 → 로그인 확인 후 진입 (비로그인 시 LOG-009)
  • 플로우: 정보 입력(화면 1) → "다음" → 바텀시트 확인(화면 2) → "확인" → 완료(화면 3) → PRS-001 복귀
  • 진입 시 입력 데이터 초기화, 직각 원칙 border-radius:0 전면 적용
  • 필수 입력: 작가 이름, 작품 도상, 작품 사이즈, 구매 희망 금액 (4개)
  • 선택 입력: 인감 기간 요청사항, 기타 요청사항 (2개, 최대 500자)

2. 레이어 구조 + 치수

화면 1 — 정보 입력 (Full-screen)

# 영역 높이/위치 비고
1iOS 상태바44px시간, 네트워크, 배터리
2네비게이션 바48pxchevron-left(20px) + "작품 구해요" center
3폼 영역가변, padding 20px 24px6개 입력 필드, 각 48px height, gap 16px
4하단 버튼 바absolute bottom:28px, 50px취소(flex:1) + 다음(flex:2), gap 10px
5홈 인디케이터34pxiOS 홈 바

화면 2 — 구매 문의 바텀시트

# 영역 높이/위치 비고
1딤 오버레이position:absolute, 상단~시트rgba(26,26,26,0.45)
2바텀시트 컨테이너absolute bottom:0, auto height--bg #FAFAF8, R=0
3핸들 바36px x 4px, padding-top 12pxrgba(26,26,26,0.12), center
4닫기 아이콘absolute top:16px right:20pxX 아이콘 22px, --text-muted, square
5안내 문구padding 20px 24px 0타이틀 17px/700 + 보조 12px
6입력 필드 (성함/연락처)각 48px, gap 10px--charcoal 4% bg, R=0
7개인정보 동의 체크auto, gap 8px체크 SVG 18px + 12px label
8버튼 행50px x 2, gap 10px취소 + 확인, padding 0 24px
9홈 인디케이터120px x 5px, R=5px--charcoal bg

화면 3 — 완료

# 영역 높이/위치 비고
1체크 아이콘72px 원형, center2px solid --charcoal, border-radius:50%, 내부 체크 SVG 32px square/miter
2완료 메시지auto, mb 40px17px/600, center, ls:-0.02em
3확인 CTAwidth:100%, 50px--cta-gradient, 15px/600, #fff, R=0
4홈 인디케이터34pxiOS 홈 바

3. 핵심 인터랙션

  • 필드 라벨: --sans 11px/600, --charcoal — 필수 필드: --red-brand (#961E23) 색 "*" 접두
  • 입력 필드: 48px height, bg rgba(26,26,26,0.04), border 1px solid rgba(26,26,26,0.07), R=0
  • 플레이스홀더: --sans 14px/400, --text-muted (#888888), ls:-0.005em
  • 셀렉트 필드(작품 도상): 우측 chevron-down SVG 16px, --text-muted stroke 1.5px square — 탭 시 선택 목록 노출, 단일 선택
  • 취소 버튼: flex:1, 50px, rgba(26,26,26,0.06) bg, --charcoal text 15px/600 — 입력 데이터 있으면 PRS-004 취소 모달, 없으면 PRS-001 직행
  • 다음 버튼: flex:2, 50px — 비활성: rgba(26,26,26,0.06) bg + --text-muted text / 활성(필수값 완료): --charcoal bg + #fff text
  • 바텀시트 닫기(X): 22px SVG, --text-muted, stroke 1.5px square — absolute top:16px right:20px
  • 개인정보 동의 체크: 체크 SVG 18px, --charcoal stroke 1.5px square, 라벨 12px --charcoal
  • 취소 버튼: flex:1, 50px, rgba(26,26,26,0.06) bg — 바텀시트 닫힘, 입력 화면 복귀
  • 확인 버튼(바텀시트): flex:1, 50px, --charcoal bg, #fff 15px/600 — 등록 완료 화면 전환
  • 확인 CTA(완료): width:100%, 50px, --cta-gradient (linear-gradient 135deg #961E23 → #B22A30 → #961E23), #fff 15px/600, ls:-0.01em

4. 상태 변화

  • 입력 필드 기본: bg rgba(26,26,26,0.04), border rgba(26,26,26,0.07)
  • 입력 필드 포커스: border → 1px solid var(--charcoal)
  • 입력 필드 에러: border → 1px solid var(--red-brand) + 하단 에러 메시지
  • 다음 버튼 비활성: rgba(26,26,26,0.06) bg, --text-muted text, pointer-events:none
  • 다음 버튼 활성: 필수 4개 필드 모두 입력 시 → --charcoal bg, #fff text
  • 바텀시트 배경 폼: opacity:0.15 — 입력 화면이 흐리게 비침
  • 개인정보 체크 미동의: 확인 버튼 비활성 유지

5. 네비게이션 플로우

  • 진입: PRS-001 → "작품 구해요" 버튼 → PRS-002 (로그인 필수)
  • 뒤로가기(chevron-left): 입력 데이터 있으면 → PRS-004 취소 모달 노출 / 없으면 → PRS-001 직행
  • 취소 버튼: 뒤로가기와 동일 로직
  • 다음 → 바텀시트: 필수값 충족 시 바텀시트 슬라이드업
  • 취소: 바텀시트 닫힘 → 입력 화면 복귀 (데이터 유지)
  • 확인(바텀시트): → 완료 화면(화면 3)
  • 확인 CTA(완료): → PRS-001 메인으로 이동

6. 에러/예외 처리

  • 필수값 미입력 상태에서 "다음" 클릭 → 토스트 "작품 정보를 입력해주세요"
  • 개인정보 미동의 시 "확인" 클릭 → 토스트 "개인정보 제공에 동의해주세요"
  • 서버 지연/오류 → 토스트 "잠시 후 다시 시도해주세요", 버튼 재활성화
  • 비로그인 접근 → LOG-009 모달 표시
  • 배경 스크롤: 바텀시트 노출 시 잠김 (body scroll lock)
  • 접근성: role="dialog", aria-modal="true", 포커스 트랩 적용

7. 모션 스펙

  • 바텀시트 진입: translateY(100% → 0), duration 300ms, var(--ease-ios-spring)
  • 바텀시트 닫힘: translateY(0 → 100%), duration 250ms, var(--ease-accelerate)
  • 딤 오버레이: opacity 0 → 1, duration 200ms, var(--ease-ios-spring)
  • 버튼 상태 전환: background-color + color, duration 150ms, var(--ease)
  • 입력 필드 포커스: border-color, duration 150ms, var(--ease)
  • 완료 화면 전환: opacity 0 → 1, duration 300ms, var(--ease-ios-spring)

8. 여백 · 간격 요약

  • 전체 좌우 패딩: 24px
  • 폼 영역 상단 패딩: 20px
  • 필드 간 간격: margin-bottom 16px
  • 라벨 → 필드: margin-bottom 6px
  • 하단 버튼 바: absolute bottom:28px, left/right:0, padding 0 24px
  • 버튼 간 간격: gap 10px
  • 바텀시트 내부: padding 20px 24px 0 (콘텐츠 영역)
  • 바텀시트 타이틀 → 보조: margin-bottom 6px
  • 보조 → 입력 필드: margin-bottom 20px
  • 입력 필드 간격: margin-bottom 10px (성함), 14px (연락처)
  • 체크박스 → 버튼: margin-bottom 20px
  • 완료 화면: padding 0 32px, 체크→메시지 24px, 메시지→CTA 40px

9. 적용 디자인 토큰

  • [색상]
  • --bg: #FAFAF8
  • --charcoal: #1A1A1A
  • --red-brand: #961E23
  • --text-muted: #888888
  • [타이포그래피]
  • --sans: Pretendard Variable
← 이전 화면: PRS-001 다음 화면: PRS-003 →