Wireframe

🎨 Wireframe 바로가기

랜딩 페이지

• 우리 서비스가 어떤 서비스인지 소개하는 페이지
• section 1
  • 인트로 메세지
• section 2
  • 메인 페이지 설명 및 이동 버튼
  • 더보기 페이지 설명
  • 퀴즈 기능 설명
  • 반응형 설명
  • 유저 레벨링 기능 및 레벨에 따른 UI 적용 기능 설명
• section 3
  • 3개의 체험형 객관식 퀴즈로 사용자의 참여를 유도하여 관심을 야기시키는 기능 (웰컴 퀴즈)

Nav Bar

• Logo -누르면 랜딩 페이지로 이동
• Main -누르면 메인 페이지로 이동
• Today Quiz
  • 누르면 오늘의 퀴즈 모달 (2문제)
    • 문제를 맞춘 갯수에 따라 경험치 누적
• Sign Up / Sign In
  • 누르면 회원가입 및 로그인 모달
  • 로그인 이후에 프로필 사진 넣기
    • 마이페이지로 이동

메인 페이지

• 주요 기능인 줄임말 단어 검색 기능을 보여주는 페이지
• 검색어 자동완성 구현
• 음성 인식 기능 구현
• 유저 등급(3단계)에 따라 다른 인풋 테두리 & 버튼 디자인을 보여줌.
• 실시간 검색어 차트 기능 (60초마다 갱신)
• 검색 기록 확인 기능 (비로그인 유저도 확인할 수 있음)
• 검색결과에 따라 다른 결과 도출
  • 검색결과가 있을 때
    • 줄임말의 좋아요가 많은 순으로 3개만 보여줌.
    • 더보기 버튼 등장
      • 로그인 상태일 경우에만 더보기 버튼 작동 => 더보기 페이지로 이동
  • 검색결과가 없을 때
    • 새로 만들기 버튼 등장 + " 검색 결과가 없습니다. (이미지) "
      • 로그인 상태일 경우에만 새로 만들기 버튼 작동 => 새로 만들기 모달 띄움

더보기 페이지

• 검색한 단어와 일치하는 컨텐츠(Word Box)들을 보여주는 페이지.
  • 처음에는 4개의 Word Box만 보여줌.
    • 이후에는 무한 스크롤에 따라 4개씩 추가적으로 보여줌.
  • 필터 기능
    • 기본값은 좋아요순으로 보여줌.
    • 필터값으로 최신순을 누르면 최신순으로 Word Box 보여줌.
• Word Box 구성 : 작성자 / 프사 / 단어 이름 / 단어 의미 / 좋아요
  • Word Box에서 좋아요 호버했을 때 "총 몇 명이 눌렀습니다" 보여줌.
• 별도 인풋창을 통해 새로운 단어 검색 가능 (더보기 페이지 유지)
• 새로 만들기 버튼
  • 새로 글 쓰기 모달창이 켜지고 새로운 의미를 작성했을 때 경험치 누적됨.

마이 페이지

• 유저 정보를 확인할 수 있는 페이지
  • 유저의 레벨 및 경험치 확인 가능
  • 유저 정보 수정하기 버튼 클릭 => 마이 정보 수정 페이지로 이동
    • 유저 이름, 비밀 번호, 유저 프로필 이미지를 수정할 수 있는 페이지
    • 마이 정보 수정 페이지에서 유저 정보 수정 가능 (소셜 로그인 유저는 프로필 이미지만 수정 가능)
• 내가 작성한 줄임말 콘텐츠(Word Box)들을 확인할 수 있는 페이지
  • 처음에는 3개의 Word Box만 보여줌.
    • 이후에는 무한 스크롤에 따라 3개씩 추가적으로 보여줌.
  • 필터 기능
    • 기본값은 최신순으로 보여줌.
    • 필터값으로 좋아요순을 누르면 좋아요순으로 Word Box 보여줌.
  • Word Box 삭제 및 수정 기능