허니드림 간단 디자인 자연어 프롬프트

"모바일 웹사이트를 제작하기 위한 디자인 지침입니다. 첫 방문 온보딩 플로우(게임 설명 시뮬레이션, 수면 MBTI 테스트, 그룹 배정, 아바타 생성)와 두 번째 방문 시의 메인 화면 및 6개의 탭(수면의 비밀, 숙면의 길, 나의 꿈나라, 오늘의 별자리, 별빛 속 친구들, 숙면 상점)을 설계합니다. 별빛 배경 테마를 적용하며, 각 화면은 375x667px(모바일 화면 크기)로 설정하고, 직관적이고 부드러운 UI를 유지합니다. 아바타 상점은 '나의 꿈나라' 탭 내에 포함되고, '숙면 상점'은 실물 제품 추천 탭으로 운영됩니다. 아래는 각 화면의 세부 레이아웃, UI 요소, 스타일 가이드입니다."

공통 스타일 가이드

• 배경: 별빛 테마(짙은 블루-퍼플 그라데이션, #1E2A5E에서 #3A1E5E로 전환, 작은 흰색 점으로 별 효과 추가)
• 폰트:
  • 제목: Montserrat Bold, 24px, 색상: #FFFFFF
  • 본문: Montserrat Regular, 16px, 색상: #D3D3D3
  • 버튼 텍스트: Montserrat Medium, 18px, 색상: #FFFFFF
• 버튼 스타일:
  • 배경: #5A4BFF (밝은 퍼플), 모서리 반경: 10px, 패딩: 15px x 30px
  • 호버 효과: 밝기 10% 증가
• 카드/컨테이너:
  • 배경: 반투명 흰색 (#FFFFFF, 투명도 10%), 테두리: 1px #D3D3D3, 모서리 반경: 15px
• 아이콘: 크기 24px, 색상: #FFFFFF
• 탭 내비게이션: 하단 고정, 375x60px, 배경: #2A2F5E, 아이콘+텍스트(12px, #FFFFFF), 선택된 탭 강조: #5A4BFF

첫 방문 온보딩 플로우

화면 1: 게임 설명 시뮬레이션

• 목적: 게임 소개 및 몰입 유도
• 레이아웃:
  • 배경: 별빛 테마 적용
  • 상단 여백: 50px
  • 중앙 애니메이션 영역 (300x300px, 화면 중앙):
    • 아바타 이미지(150x150px, 중앙): 별빛 속에서 미션 수행 후 코인 획득 애니메이션
    • 텍스트 (Montserrat Regular, 16px, #D3D3D3): "숙면 미션과 챌린지를 통해 코인을 모아 아바타와 나만의 수면 나라를 꾸며보세요!", 애니메이션 아래 20px 여백
  • 하단 버튼 (화면 하단에서 50px 위):
    • "시작하기" 버튼 (150x50px, 중앙 정렬, 버튼 스타일 적용)
• 흐름:
  • "시작하기" 버튼 클릭 → 수면 MBTI 테스트 화면

화면 2: 수면 MBTI 테스트

• 목적: 사용자의 수면 스타일 분석
• 레이아웃:
  • 배경: 별빛 테마 적용
  • 상단 여백: 30px
  • 진행도 바 (300x10px, 화면 상단 중앙, 배경: #D3D3D3, 채우기: #5A4BFF, 진행도 20% 표시)
  • 질문 영역 (화면 중앙, 325x400px 카드):
    • 제목 (Montserrat Bold, 24px, #FFFFFF): "질문 1/5", 중앙 정렬, 카드 상단 20px 여백
    • 질문 텍스트 (Montserrat Regular, 16px, #D3D3D3): "나의 수면 mbti 테스트", 제목 아래 20px 여백
    • 1. 수면 시간 & 루틴
      1. 나는 정해진 시간에 자고 일어나는 것이 편하다.
         • A: 매우 그렇다
         • B: 약간 그렇다
         • C: 별로 그렇지 않다
         • D: 전혀 그렇지 않다
      2. 자기 전에 스마트폰을 꼭 본다.
         • A: 항상
         • B: 자주
         • C: 가끔
         • D: 거의 안 함
      3. 새벽까지 깨어있는 경우가 많다.
         • A: 자주
         • B: 가끔
         • C: 드물게
         • D: 거의 없음
      4. 알람을 여러 번 맞춰야 일어날 수 있다.
         • A: 항상
         • B: 자주
         • C: 가끔
         • D: 거의 안 함
      2. 스트레스 대응 방식
      1. 고민이 생기면 밤에 잠이 잘 안 온다.
         • A: 매우 그렇다
         • B: 약간 그렇다
         • C: 별로 그렇지 않다
         • D: 전혀 그렇지 않다
      2. 스트레스를 받으면 운동이나 산책으로 푼다.
         • A: 자주
         • B: 가끔
         • C: 드물게
         • D: 거의 안 함
      3. 걱정이 많아 머릿속 생각이 멈추지 않는다.
         • A: 자주
         • B: 가끔
         • C: 드물게
         • D: 거의 없음
      4. 감정을 일기나 노트로 적으면 진정된다.
         • A: 매우 그렇다
         • B: 약간 그렇다
         • C: 별로 그렇지 않다
         • D: 전혀 그렇지 않다
      3. 감정 감수성 & 민감도
      1. 주변 소음이나 빛에 잠을 쉽게 방해받는다.
         • A: 매우 그렇다
         • B: 약간 그렇다
         • C: 별로 그렇지 않다
         • D: 전혀 그렇지 않다
      2. 감정 기복이 수면에 영향을 준다고 느낀다.
         • A: 자주
         • B: 가끔
         • C: 드물게
         • D: 거의 없음
      3. 감정 변화에 예민하고 꿈을 자주 꾼다.
         • A: 매우 그렇다
         • B: 약간 그렇다
         • C: 별로 그렇지 않다
         • D: 전혀 그렇지 않다
      4. 따뜻한 말 한마디가 숙면에 도움이 된다.
         • A: 매우 그렇다
         • B: 약간 그렇다
         • C: 별로 그렇지 않다
         • D: 전혀 그렇지 않다
      4. 에너지 시간대
      1. 오전보다는 오후나 밤에 더 생기가 돈다.
         • A: 매우 그렇다
         • B: 약간 그렇다
         • C: 별로 그렇지 않다
         • D: 전혀 그렇지 않다
      2. 아침에 일찍 일어나는 게 힘들다.
         • A: 자주
         • B: 가끔
         • C: 드물게
         • D: 거의 없음
      3. 밤늦게 창의적인 아이디어가 잘 떠오른다.
         • A: 자주
         • B: 가끔
         • C: 드물게
         • D: 거의 없음
      4. 아침에 무언가를 해야 하면 스트레스를 받는다.
         • A: 매우 그렇다
         • B: 약간 그렇다
         • C: 별로 그렇지 않다
         • D: 전혀 그렇지 않다
      5. 문제 해결 성향
      1. 수면 문제에 대해 인터넷 정보를 자주 찾아본다.
         • A: 자주
         • B: 가끔
         • C: 드물게
         • D: 거의 안 함
      2. 문제를 명확하게 기록하고 분석하는 걸 좋아한다.
         • A: 매우 그렇다
         • B: 약간 그렇다
         • C: 별로 그렇지 않다
         • D: 전혀 그렇지 않다
      3. 작은 변화라도 꾸준히 실천하려는 편이다.
         • A: 매우 그렇다
         • B: 약간 그렇다
         • C: 별로 그렇지 않다
         • D: 전혀 그렇지 않다
      4. 실패하면 바로 포기하지 않고 새로운 방법을 시도한다.
         • A: 자주
         • B: 가끔
         • C: 드물게
         • D: 거의 안 함
      결과 유형 및 가상 국가:
      • 깊은 몰입형 (Deep Diver): 규칙적, 분석적, 목표 지향 → 클리어랜드 (맑은 호수와 성곽 마을).
      • 예민한 감각형 (Light Sensor): 감성적, 민감, 창의적 → 드리미아 (꿈같은 안개 숲).
      • 불규칙한 변동형 (Rhythm Seeker): 활동적, 외향적, 도전적 → 에너지카 (활기찬 도시).
      • 안정적 규칙형 (Stable Sleeper): 느긋함, 자연 친화, 안정 지향 → 릴렉시아 (녹음 짙은 휴양지).
      • 회복 중심형 (Recovera): 회복 중심, 힐링 지향 → 리커버라 (온화한 산골 마을).
      구현 방식:
      • 각 문항의 답변에 점수를 부여(예: A=4, B=3, C=2, D=1)하고, 카테고리별 점수 합산.
      • 점수 분포로 유형 결정, 사용자에게 유형 설명과 아바타가 가게 될 국가 배경 이미지 제공.
      • UX: 몽환적인 배경, 진행 바, 긍정적 피드백(예: “잘했어요, 50% 완료!”).
      타당성 평가:
      • 20문항은 수면 관련 심리 프로파일링에 충분하며, 5개 유형은 행동 미션과 국가별 커뮤니티 설계에 활용 가능.
      • 소규모 테스트로 유형 분류의 정확성을 검증 권장.
  • 하단 버튼 (카드 하단에서 20px 위):
    • "다음" 버튼 (150x50px, 중앙 정렬, 버튼 스타일 적용)
• 흐름:
  • "다음" 버튼 클릭 → 다음 질문으로 이동, 마지막 질문에서 "제출" 버튼으로 변경

화면 3: 그룹 배정

• 목적: 사용자 그룹 배정 및 환영
• 레이아웃:
  • 배경: 별빛 테마 적용
  • 상단 여백: 50px
  • 중앙 애니메이션 영역 (300x300px, 화면 중앙):
    • 별빛 애니메이션 (반짝이는 별 효과)
    • 텍스트 (Montserrat Bold, 24px, #FFFFFF): "루나리아 왕국", 중앙 정렬
    • 환영 메시지 (Montserrat Regular, 16px, #D3D3D3): "루나리아 왕국에 오신 것을 환영합니다! 같은 유형의 사용자들과 함께 숙면을 개선해보세요.", 20px 여백
  • 하단 버튼 (화면 하단에서 50px 위):
    • "아바타 만들기" 버튼 (150x50px, 중앙 정렬, 버튼 스타일 적용)
• 흐름:
  • "아바타 만들기" 버튼 클릭 → 아바타 생성 화면

화면 4: 아바타 생성

• 목적: 사용자 사진 기반 아바타 생성
• 레이아웃:
  • 배경: 별빛 테마 적용
  • 상단 여백: 30px
  • 미리보기 영역 (200x200px, 화면 상단 중앙):
    • 아바타 미리보기 (150x150px, 중앙 정렬, 기본 아바타 이미지)
    • "사진 업로드" 버튼 (150x50px, 미리보기 아래 20px 여백, 버튼 스타일 적용)
  • 설정 영역 (325x200px 카드, 미리보기 아래 30px 여백):
    • 헤더 텍스트 (Montserrat Bold, 24px, #FFFFFF): "아바타 설정", 중앙 정렬, 카드 상단 20px 여백
    • 슬라이더 3개 (세로로 20px 간격):
      • "헤어 색상" (슬라이더, 300x10px, 기본값 50%)
      • "눈 색상" (슬라이더, 300x10px, 기본값 50%)
      • "피부 톤" (슬라이더, 300x10px, 기본값 50%)
  • 하단 버튼 (카드 하단에서 20px 위):
    • "완료" 버튼 (150x50px, 중앙 정렬, 버튼 스타일 적용)
• 흐름:
  • "완료" 버튼 클릭 → 메인 화면으로 이동

두 번째 방문 시 화면

화면 5: 메인 화면

• 목적: 사용자 상태와 주요 정보 직관적 제공
• 레이아웃:
  • 배경: 별빛 테마 적용
  • 상단 여백: 30px
  • 코인 잔액 (화면 상단 우측, 100x30px, 본문 스타일): "코인: 150"
  • 아바타 상태 (150x150px, 화면 상단 중앙):
    • 아바타 이미지 (컨디션 점수 81~100: 춤추는 동작)
    • 텍스트 (본문 스타일, 아바타 아래 10px 여백): "컨디션: 85/100"
  • 수면 점수 (325x100px 카드, 아바타 아래 20px 여백):
    • 텍스트 (본문 스타일): "어제 밤 수면 점수: 질: 82, 양: 7시간, 코골이: 10, 호흡: 90"
  • 헥사곤 그래프 (150x150px, 카드 중앙, 선 색상: #5A4BFF): 질, 양, 코골이, 호흡, 규칙성, 깊이 표시
  • 미션/챌린지 (325x80px 카드, 그래프 아래 20px 여백):
    • 텍스트 (본문 스타일): "개인 미션: 10분 스트레칭", "그룹 챌린지: 루나리아 왕국 100시간 수면 달성 (75/100)"
  • 꿈해몽 및 행동강령 (325x100px 카드, 미션 아래 20px 여백):
    • 텍스트 (본문 스타일): "꿈해몽: 물 꿈 → 새로운 시작", "행동강령: 오늘의 색: 블루, 식단: 연어 샐러드"
  • 커뮤니티 메시지 (325x80px 카드, 꿈해몽 아래 20px 여백):
    • 텍스트 (본문 스타일): "루나리아 왕국: '오늘 명상 성공했어요!'"
  • 추천 아이템 (325x150px 카드, 메시지 아래 20px 여백, 가로 스크롤 가능):
    • 아이템 이미지 3개 (각 100x100px, 10px 간격): 의상, 가구, 장식
  • 탭 내비게이션 (하단 고정): "수면의 비밀", "숙면의 길", "나의 꿈나라", "오늘의 별자리", "별빛 속 친구들", "숙면 상점"

화면 6: 수면의 비밀 (수면 점수 분석 탭)

• 목적: 수면 데이터 분석 및 개선 팁 제공
• 레이아웃:
  • 배경: 별빛 테마 적용
  • 상단 여백: 30px
  • 제목 (화면 상단 중앙, 제목 스타일): "수면의 비밀"
  • 추이 그래프 (325x150px 카드, 제목 아래 20px 여백):
    • 선 그래프 (선 색상: #5A4BFF): 주간 수면 점수 추이
  • 수면 단계 분석 (325x100px 카드, 그래프 아래 20px 여백):
    • 텍스트 (본문 스타일): "깊은 수면: 30%, 얕은 수면: 50%, REM: 20%"
  • 개선 팁 (325x100px 카드, 분석 아래 20px 여백):
    • 텍스트 (본문 스타일): "깊은 수면 부족 → 취침 전 따뜻한 차 한 잔 추천"
  • 버튼 (카드 하단에서 20px 위):
    • "수면 데이터 연동" 버튼 (150x50px, 중앙 정렬, 버튼 스타일 적용)
  • 탭 내비게이션 (하단 고정)

화면 7: 숙면의 길 (미션 수행 탭)

• 목적: 미션 및 챌린지 수행
• 레이아웃:
  • 배경: 별빛 테마 적용
  • 상단 여백: 30px
  • 제목 (화면 상단 중앙, 제목 스타일): "숙면의 길"
  • 개인 미션 (325x150px 카드, 제목 아래 20px 여백):
    • 텍스트 (본문 스타일): "미션: 10분 스트레칭, 보상: 20 코인"
    • "시작" 버튼 (100x40px, 카드 우측 하단, 버튼 스타일 적용)
  • 그룹 챌린지 (325x100px 카드, 개인 미션 아래 20px 여백):
    • 텍스트 (본문 스타일): "루나리아 왕국: 75/100시간 달성"
    • "참여" 버튼 (100x40px, 카드 우측 하단, 버튼 스타일 적용)
  • 이벤트 배너 (325x80px 카드, 챌린지 아래 20px 여백):
    • 텍스트 (본문 스타일): "이벤트: 10일 연속 미션 성공 시 숙면 베개 증정!"
  • 탭 내비게이션 (하단 고정)

화면 8: 나의 꿈나라 (아바타 및 환경 꾸미기 탭, 아바타 상점 포함)

• 목적: 아바타 및 환경 꾸미기, 아바타 상점 운영
• 레이아웃:
  • 배경: 별빛 테마 적용
  • 상단 여백: 30px
  • 제목 (화면 상단 중앙, 제목 스타일): "나의 꿈나라"
  • 아바타 편집 (325x150px 카드, 제목 아래 20px 여백):
    • 아바타 미리보기 (100x100px, 카드 중앙)
    • 카테고리 탭 (의상, 헤어, 액세서리, 가로 3개, 각 100x40px, 선택된 탭: #5A4BFF)
    • "적용" 버튼 (100x40px, 카드 하단 중앙, 버튼 스타일 적용)
  • 환경 편집 (325x150px 카드, 아바타 편집 아래 20px 여백):
    • 환경 미리보기 (200x100px, 카드 중앙)
    • 카테고리 탭 (가구, 장식, 배경, 가로 3개, 각 100x40px)
    • "적용" 버튼 (100x40px, 카드 하단 중앙, 버튼 스타일 적용)
  • 아바타 상점 (325x150px 카드, 환경 편집 아래 20px 여백, 가로 스크롤 가능):
    • 아이템 3개 (각 100x100px, 10px 간격): 의상, 가구, 장식
    • 가격 텍스트 (본문 스타일): "50 코인"
    • "구매" 버튼 (80x30px, 각 아이템 하단, 버튼 스타일 적용)
  • 탭 내비게이션 (하단 고정)

화면 9: 오늘의 별자리 (행동강령 탭)

• 목적: 꿈해몽 및 행동강령 제공
• 레이아웃:
  • 배경: 별빛 테마 적용
  • 상단 여백: 30px
  • 제목 (화면 상단 중앙, 제목 스타일): "오늘의 별자리"
  • 꿈해�mong (325x100px 카드, 제목 아래 20px 여백):
    • 텍스트 (본문 스타일): "하늘을 나는 꿈 → 자유로운 하루"
  • 행동강령 (325x150px 카드, 꿈해�mong 아래 20px 여백):
    • 텍스트 (본문 스타일): "운세: 새로운 도전이 행운을 가져옵니다!", "식단: 바나나 스무디", "패션: 파란색 셔츠"
  • 공유 버튼 (150x50px, 카드 하단 중앙, 버튼 스타일 적용): "공유하기"
  • 탭 내비게이션 (하단 고정)

화면 10: 별빛 속 친구들 (커뮤니티 탭)

• 목적: 사용자 간 소통
• 레이아웃:
  • 배경: 별빛 테마 적용
  • 상단 여백: 30px
  • 제목 (화면 상단 중앙, 제목 스타일): "별빛 속 친구들"
  • 채팅창 (325x200px 카드, 제목 아래 20px 여백):
    • 메시지 2개 (본문 스타일): "오늘 명상 성공했어요!", "같이 힘내요~"
  • 게시판 (325x150px 카드, 채팅창 아래 20px 여백):
    • 텍스트 (본문 스타일): "수면 팁: 따뜻한 물로 족욕 추천!"
  • 작성 버튼 (150x50px, 게시판 하단 중앙, 버튼 스타일 적용): "메시지 작성"
  • 탭 내비게이션 (하단 고정)

화면 11: 숙면 상점 (실물 제품 추천 탭)

• 목적: 실물 제품 추천 및 구매 링크 제공
• 레이아웃:
  • 배경: 별빛 테마 적용
  • 상단 여백: 30px
  • 제목 (화면 상단 중앙, 제목 스타일): "숙면 상점"
  • 제품 추천 (325x150px 카드, 제목 아래 20px 여백, 가로 스크롤 가능):
    • 제품 2개 (각 150x150px, 10px 간격): "수면 유도 차", "숙면 마스크"
    • 텍스트 (본문 스타일): "20% 할인"
    • "구매 링크" 버튼 (100x40px, 각 제품 하단, 버튼 스타일 적용)
  • 이벤트 배너 (325x80px 카드, 제품 아래 20px 여백):
    • 텍스트 (본문 스타일): "숙면 마스크 증정 이벤트!"
  • 탭 내비게이션 (하단 고정)

추가 지침

• 스크롤 가능: 메인 화면 및 탭은 세로 스크롤 가능
• 애니메이션 효과: 별빛 반짝임은 화면 전환 시 부드럽게 페이드 인/아웃
• 여백 및 정렬: 모든 요소는 중앙 정렬, 여백은 일관성 유지
• 확장성: 각 화면은 추가 콘텐츠 삽입 가능하도록 여백 확보
• 출력 형식: Figma/Adobe XD에서 바로 활용 가능한 레이어 구조로 내보내기