1. 디자인 페이지

1) 메인홈 페이지

• 구성 : 헤더(로고, 프로필), 통계(경매), 출석(퀴즈), 오늘의퀴즈, 퀴즈, 추천 경매물건

• 레이아웃

  1. 로고, 프로필
  2. 이번주 출석 현황
  3. 오늘의 퀴즈
  4. 경매 정보 버튼
  5. 퀴즈 진입 버튼
  6. 지도, 달력, 모의경매, 커뮤니티, 만화, 기타 등등
  7. 추천 경매 물건

• 내용 : 기존 경매 메인 화면에 퀴즈 화면을 추가하여 경매 + 퀴즈 2개의 핵심 기능 표현, 기존의 탭 구조를 하나로 변경

• 화면 : https://auction-marketing.s3.ap-northeast-2.amazonaws.com/design/%E1%84%92%E1%85%A9%E1%86%B7%E1%84%91%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%B5.jpg

• 화면 : https://auction-marketing.s3.ap-northeast-2.amazonaws.com/design/%E1%84%92%E1%85%A9%E1%86%B7%E1%84%91%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%B5(%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3).jpg

2) 퀴즈홈 페이지

• 구성 : 현재 포인트, 하트, 나의 캐릭터, 이번주 출석 현황, 퀴즈 카테고리 진도 표시

• 레이아웃

  1. 내 캐릭터
  2. 현재 포인트, 현재 하트
  3. 이번주 출석 현황
  4. 퀴즈 카테고리 리스트

• 내용 : 퀴즈의 메인 홈 페이지

• 화면 : https://auction-marketing.s3.ap-northeast-2.amazonaws.com/design/%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3%E1%84%86%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%AB.jpg

• 화면 : https://auction-marketing.s3.ap-northeast-2.amazonaws.com/design/%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3%E1%84%86%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%AB(%E1%84%8B%E1%85%A5%E1%86%AF%E1%84%80%E1%85%AE%E1%86%AF%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC).jpg

3) 퀴즈상세카테고리 페이지

• 구성 : 현재 카테고리 이름, 포인트, 하트, 상세 카테고리 리스트, 퀴즈 페이지 진입 전 해설 모달

• 레이아웃

  1. 뒤로가기, 카테고리 이름, 포인트, 하트
  2. 상세 카테고리 리스트 (캐릭터 이동?)
  3. 상세 카테고리 선택 시 진입 모달

• 내용 : 경매 카테고리 진입 시 상세 카테고리 화면 캐릭터가 이동 혹은 전체 진도를 쉽게 확인 할 수 있으면 좋을 듯

• 화면 : https://auction-marketing.s3.ap-northeast-2.amazonaws.com/design/%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3%E1%84%89%E1%85%A1%E1%86%BC%E1%84%89%E1%85%A6%E1%84%8F%E1%85%A1%E1%84%90%E1%85%A6%E1%84%80%E1%85%A9%E1%84%85%E1%85%B5.jpg

• 화면 : https://auction-marketing.s3.ap-northeast-2.amazonaws.com/design/%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3%E1%84%89%E1%85%A1%E1%86%BC%E1%84%89%E1%85%A6%E1%84%8F%E1%85%A1%E1%84%90%E1%85%A6%E1%84%80%E1%85%A9%E1%84%85%E1%85%B5(%E1%84%92%E1%85%A2%E1%84%89%E1%85%A5%E1%86%AF%E1%84%86%E1%85%A9%E1%84%83%E1%85%A1%E1%86%AF).jpg

4) 퀴즈상세 페이지

• 구성 : 타이머, 진도, 문제, 보기, 결과 모달 혹은 피드백(정답, 오답)

• 레이아웃

  1. 닫기, 타이머, 진도
  2. 문제
  3. 보기
  4. 보기 선택 시 결과 모달

• 내용 : 경매 퀴즈 풀이 화면

• 화면 : https://auction-marketing.s3.ap-northeast-2.amazonaws.com/design/%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3%E1%84%89%E1%85%A1%E1%86%BC%E1%84%89%E1%85%A6.jpg

• 화면 : https://auction-marketing.s3.ap-northeast-2.amazonaws.com/design/%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3%E1%84%89%E1%85%A1%E1%86%BC%E1%84%89%E1%85%A6(%E1%84%8B%E1%85%A9%E1%84%83%E1%85%A1%E1%86%B8%E1%84%86%E1%85%A9%E1%84%83%E1%85%A1%E1%86%AF).jpg

• 화면 : https://auction-marketing.s3.ap-northeast-2.amazonaws.com/design/%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3%E1%84%89%E1%85%A1%E1%86%BC%E1%84%89%E1%85%A6(%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%83%E1%85%A1%E1%86%B8).jpg

• 화면 : https://auction-marketing.s3.ap-northeast-2.amazonaws.com/design/%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3%E1%84%89%E1%85%A1%E1%86%BC%E1%84%89%E1%85%A6(%E1%84%8C%E1%85%AE%E1%86%BC%E1%84%83%E1%85%A1%E1%86%AB%E1%84%86%E1%85%A9%E1%84%83%E1%85%A1%E1%86%AF).jpg

5) 퀴즈결과 페이지

• 구성 : 퀴즈 결과 (전부 정답 인지 아닌지?), 획득 포인트, 해설 모달

• 레이아웃

  1. 퀴즈 결과
  2. 획득 포인트
  3. 해설 보기 클릭 시 해설 모달

• 내용 : 퀴즈 결과에 대한 시각적인 피드백

• 화면 : https://auction-marketing.s3.ap-northeast-2.amazonaws.com/design/%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3%E1%84%80%E1%85%A7%E1%86%AF%E1%84%80%E1%85%AA.jpg

• 화면 : https://auction-marketing.s3.ap-northeast-2.amazonaws.com/design/%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3%E1%84%80%E1%85%A7%E1%86%AF%E1%84%80%E1%85%AA(%E1%84%92%E1%85%A2%E1%84%89%E1%85%A5%E1%86%AF%E1%84%86%E1%85%A9%E1%84%83%E1%85%A1%E1%86%AF).jpg

6) 퀴즈랭킹 페이지

• 구성 : 전체 랭킹, 나의 랭킹, TOP 3랭킹

• 레이아웃

  1. 나의 랭킹
  2. TOP 3 랭킹
  3. 4~100위까지 랭킹

• 화면 : https://auction-marketing.s3.ap-northeast-2.amazonaws.com/design/%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3%E1%84%89%E1%85%AE%E1%86%AB%E1%84%8B%E1%85%B1.jpg

7) 퀴즈구매 페이지

• 구성 : 구매 가능 물품 리스트, 구매 승인 모달

• 레이아웃

  1. 구매 가능 물품 리스트
  2. 물푼 선택 시 구매 승인 모달

• 화면 : https://auction-marketing.s3.ap-northeast-2.amazonaws.com/design/%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3%E1%84%80%E1%85%AE%E1%84%86%E1%85%A2.jpg

8) 퀴즈구매내역 페이지

• 구성 : 구매 내역 리스트, 구매 내역 모달
• 레이아웃
  1. 구래내역 리스트
  2. 구매내역 선택 시 구매 내역 모달
• 화면 : 미구현

2. 참고 레퍼런스

1) 퀴즈

• Duolingo https://mobbin.com/apps/**duolingo**-ios-688f6e68-12be-4b63-80b7-8377c8482911/6dd7debf-b7ed-44e2-bd87-3041e476d117/screens
• Ahead https://mobbin.com/apps/ahead-ios-5f6db6dd-13a1-4644-a51f-a58d600f3d7a/8ef8a7eb-e64c-405d-a56c-8d12552ba9a0/screens
• https://dribbble.com/shots/20712646-UI-Elements-Quiz-App

2) 경매

• 토스 : https://designus.io/reference/service/17
• 당근마켓 : https://designus.io/reference/service/26
• 네이버부동산 : https://fin.land.naver.com/articles/2435644044

3. 앱 다운로드 링크

• 안드로이드 : https://play.google.com/store/apps/details?id=com.os1.auction
• 아이폰 : https://apps.apple.com/kr/app/%EB%AA%A8%EB%91%90%EC%9D%98%EA%B2%BD%EB%A7%A4-%EB%B2%95%EC%9B%90-%EA%B2%BD%EB%A7%A4-%EB%B6%80%EB%8F%99%EC%82%B0-%EC%9E%90%EB%8F%99%EC%B0%A8/id1591716640