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

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

PRS-002 · 2026. 03. 04

화면 이름 프라이빗 세일 - 작품 구해요 등록 화면
화면 위치 프라이빗 세일 > 작품 구해요 버튼
화면 ID PRS-002
작성일 2026. 03. 04
9:41
작품 구해요
* 작가 이름
작가 이름을 입력해주세요
* 작품 도상
작품의 도상을 선택해주세요
* 작품 사이즈
작품 호 사이즈를 입력해주세요
* 구매 희망 금액
구매 희망 금액을 입력해주세요
인감 기간 요청사항
인감 기간 요청사항을 입력해주세요
기타 요청사항
기타 사항을 입력해주세요
취소
다음
1
1-2
1-3
1-4
1-5
1-6
1-7
9:41
작품 구해요
* 작가 이름
작가 이름을 입력해주세요
* 작품 도상
작품의 도상을 선택해주세요
* 작품 사이즈(호)
작품 사이즈를 입력해주세요
* 작품 금액 범위
구매 희망 금액을 입력해주세요
구매 희망 금액을 입력해주세요

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

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

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

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

확인
3
Description
0 화면 접근 조건
  • PRS-001 화면에서 "작품 구해요" 버튼 클릭 시 진입
  • 로그인 사용자만 접근 가능, 비 로그인 시 로그인 화면으로 이동(LOG-009)
  • 본 화면 진입 시 기존 입력된 데이터는 초기화하여 노출
1-1 헤더
  • 구성
    • 뒤로가기 버튼
    • 타이틀: "작품 구해요"
  • 동작
    • 뒤로가기 버튼 클릭 시 앞선 입력 데이터 있는 경우 취소 모달 노출
    • 입력 데이터 없는 경우 PRS-001 화면으로 이동
1-2 작가 이름 입력필드
  • 구성
    • 필수값 표시: "* 작가 이름"
    • 플레이스홀더: "작가 이름을 입력해주세요"
  • 동작
    • 텍스트 직접 입력 가능
    • 자동완성 미지원 (향후 검토)
1-3 작품 도상 드롭다운/선택
  • 구성
    • 필수값 표시
    • 플레이스홀더: "작품의 도상을 선택해주세요"
  • 동작
    • 클릭 시 선택 목록 노출
    • 복수 선택 불가, 단일 선택만 허용
1-4 작품 사이즈 입력필드
  • 필수 작품 크기 입력
  • 구성
    • 필수값 표시
    • 호 사이즈를 입력해주세요
  • 동작
    • 숫자만 입력 가능
    • 0호 단위로 입력
1-5 구매 금액 설정 필드
  • 구성
    • 플레이스홀더: "구매 희망 금액을 입력해주세요"
  • 동작
    • 숫자만 입력 가능
    • 0원 단위로 입력
1-6 기타 요청사항 입력필드
  • 추가 요청 조건 입력
  • 선택사항으로 비워도 진행 되도록
  • 플레이스홀더: "기타 사항을 입력해주세요"
  • 최대 500자 입력 가능
1-7 취소/다음 버튼
  • 입력 중 또는 다음 단계 전환
    • 구성
      • 취소 버튼
      • 다음 버튼
  • 취소 버튼
    • 입력 데이터 있으면 취소 안내 모달 발생 후 PRS-001 이동
    • 입력 데이터 없으면 바로 PRS-001 이동
  • 다음 버튼
    • 필수값이 모두 입력된 경우만 활성화
    • 다음 화면(구매 문의 바텀시트) 노출
    • 필수값 미입력 시 비활성 상태 유지
2 구매 문의 바텀시트
  • 구매 요청 최종 확인 및 연락처 수집
    • 안내 문구
      • "어쿠님 전용 매니저가 1일 이내 연락드립니다"
    • 보조 문구
      • "고객님의 개인정보는 구매 작품 문의 외에 활용되지 않습니다."
  • 입력 필드
    • 성함 입력
    • 연락처 입력
    • 개인정보 제공 동의 체크박스
  • 버튼
    • 본래가기: 바텀시트 닫힘, 입력 화면 복귀
    • 확인: 등록 완료 화면(3) 전환
3 작품 구매 요청 완료 화면
  • 구성
    • 체크 아이콘
    • 안내 문구: "전용 매니저가 신속하게 연락드리겠습니다"
  • 동작
    • 확인 버튼 클릭 시
      • PRS-001 화면으로 이동
4 토스트 메시지 정의
  • 필수값 위반시 상태에서 "다음" 버튼 클릭 시
    • "작품 정보를 입력해주세요" 토스트 노출
  • 개인정보 미동의시 "확인" 클릭 시
    • "개인정보 제공에 동의해주세요" 토스트 노출
  • 서버 지연 임시
    • "잠시 후 다시 시도해주세요" 토스트 노출
5 공통 규칙
  • PRS-002 작성 미완료시 바텀시트 화면 유지, 화면 진출 미수행
  • 배경 스크롤은 바텀시트 노출 시 잠김(비활성도 유지)
  • 입력 화면의 필수 입력 항목 미기재 시 다음 버튼 비활성 유지
  • 입력 데이터는 사용자가 직접 입력만으로 작성

Design Output

UI 디자인 산출물

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

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

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

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

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

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

확인
Applied Design Tokens
요소Token값
전체 배경 --bg #FAFAF8
헤더 타이틀 --sans · 17px · 700 Pretendard, --charcoal, center
뒤로가기 아이콘 chevron-left · square/miter --charcoal, 1.5px stroke, 20px
필드 라벨 --sans · 11px · 600 Pretendard, --charcoal, 필수: --red-brand *
입력 필드 48px height · --charcoal 4% bg 직각 (R=0), border: rgba(26,26,26,0.07)
플레이스홀더 --sans · 14px · --text-muted letter-spacing: -0.005em
취소/다음 버튼 50px · rgba(26,26,26,0.06) 직각, 비활성: --text-muted
바텀시트 배경 --bg 직각 (R=0)
딤 오버레이 --charcoal 45% rgba(26,26,26,0.45)
확인 버튼 --charcoal bg · 50px 직각, 15px, 600 weight
체크 아이콘 (완료) 72px 원형 · square/miter --charcoal border + stroke
좌우 패딩 24px 전체 콘텐츠 마진
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • PRS-001 화면에서 "작품 구해요" 버튼 클릭 시 진입
  • 로그인 사용자만 접근 가능, 비 로그인 시 로그인 화면으로 이동(LOG-009)
  • 본 화면 진입 시 기존 입력된 데이터는 초기화하여 노출
1-1 헤더
  • 구성
    • 뒤로가기 버튼
    • 타이틀: "작품 구해요"
  • 동작
    • 뒤로가기 버튼 클릭 시 앞선 입력 데이터 있는 경우 취소 모달 노출
    • 입력 데이터 없는 경우 PRS-001 화면으로 이동
1-2 작가 이름 입력필드
  • 구성
    • 필수값 표시: "* 작가 이름"
    • 플레이스홀더: "작가 이름을 입력해주세요"
  • 동작
    • 텍스트 직접 입력 가능
    • 자동완성 미지원 (향후 검토)
1-3 작품 도상 드롭다운/선택
  • 구성
    • 필수값 표시
    • 플레이스홀더: "작품의 도상을 선택해주세요"
  • 동작
    • 클릭 시 선택 목록 노출
    • 복수 선택 불가, 단일 선택만 허용
1-4 작품 사이즈 입력필드
  • 필수 작품 크기 입력
  • 구성
    • 필수값 표시
    • 호 사이즈를 입력해주세요
  • 동작
    • 숫자만 입력 가능
    • 0호 단위로 입력
1-5 구매 금액 설정 필드
  • 구성
    • 플레이스홀더: "구매 희망 금액을 입력해주세요"
  • 동작
    • 숫자만 입력 가능
    • 0원 단위로 입력
1-6 기타 요청사항 입력필드
  • 추가 요청 조건 입력
  • 선택사항으로 비워도 진행 되도록
  • 플레이스홀더: "기타 사항을 입력해주세요"
  • 최대 500자 입력 가능
1-7 취소/다음 버튼
  • 입력 중 또는 다음 단계 전환
    • 구성
      • 취소 버튼
      • 다음 버튼
  • 취소 버튼
    • 입력 데이터 있으면 취소 안내 모달 발생 후 PRS-001 이동
    • 입력 데이터 없으면 바로 PRS-001 이동
  • 다음 버튼
    • 필수값이 모두 입력된 경우만 활성화
    • 다음 화면(구매 문의 바텀시트) 노출
    • 필수값 미입력 시 비활성 상태 유지
2 구매 문의 바텀시트
  • 구매 요청 최종 확인 및 연락처 수집
    • 안내 문구
      • "어쿠님 전용 매니저가 1일 이내 연락드립니다"
    • 보조 문구
      • "고객님의 개인정보는 구매 작품 문의 외에 활용되지 않습니다."
  • 입력 필드
    • 성함 입력
    • 연락처 입력
    • 개인정보 제공 동의 체크박스
  • 버튼
    • 본래가기: 바텀시트 닫힘, 입력 화면 복귀
    • 확인: 등록 완료 화면(3) 전환
3 작품 구매 요청 완료 화면
  • 구성
    • 체크 아이콘
    • 안내 문구: "전용 매니저가 신속하게 연락드리겠습니다"
  • 동작
    • 확인 버튼 클릭 시
      • PRS-001 화면으로 이동
4 토스트 메시지 정의
  • 필수값 위반시 상태에서 "다음" 버튼 클릭 시
    • "작품 정보를 입력해주세요" 토스트 노출
  • 개인정보 미동의시 "확인" 클릭 시
    • "개인정보 제공에 동의해주세요" 토스트 노출
  • 서버 지연 임시
    • "잠시 후 다시 시도해주세요" 토스트 노출
5 공통 규칙
  • PRS-002 작성 미완료시 바텀시트 화면 유지, 화면 진출 미수행
  • 배경 스크롤은 바텀시트 노출 시 잠김(비활성도 유지)
  • 입력 화면의 필수 입력 항목 미기재 시 다음 버튼 비활성 유지
  • 입력 데이터는 사용자가 직접 입력만으로 작성
← 이전 화면: PRS-001 다음 화면: PRS-003 →