Bedtime Companion App Mockup

A two-screen iPhone app prototype for a calming Japanese bedtime companion experience with a winged plush mascot and night-sky UI.

목표: {argument name="character name" default="이 아이"}를 중심으로 한 부드러운 취침 도우미 앱을 위해, 꿈결 같은 밤하늘 테마와 귀여운 봉제 인형 수호 캐릭터가 포함된 2개의 아이폰 화면이 나란히 배치된 세련된 모바일 앱 프로토타입 목업을 제작하세요.

캔버스: 깔끔한 흰색 배경의 1:1 정사각형 이미지. 둥근 모서리, 다이내믹 아일랜드, 상태 표시줄, 하단 홈 인디케이터가 있는 검은색 아이폰 목업 2개를 좌우로 나란히 배치하세요. 은은한 그림자가 있는 사실적인 기기 프레임을 사용하세요.

시각적 스타일: 짙은 네이비에서 인디고로 이어지는 그라데이션 배경, 흩뿌려진 작은 별들, 부드럽게 빛나는 달빛, 프리미엄 일본 웰니스 앱 디자인, 차분하고 미니멀한 스타일. 둥근 UI 요소, 은은한 글래스모피즘, 차분한 라벤더색 패널, 따뜻한 오렌지색 강조 버튼을 사용하세요. 전체적인 분위기는 졸음이 오고, 다정하며, 안전하고 마법 같은 느낌이어야 합니다.

공통 캐릭터 세부 정보: 두 화면 모두에 중앙 마스코트 1개를 표시하세요. 파스텔 라벤더 색상의 테디베어 같은 아기 생명체로, 작고 둥근 귀, 단순한 검은색 눈, 작은 미소, 부드러운 봉제 질감, 앉아 있는 자세, 작은 크림색 천사 날개를 갖추고 있습니다. 마스코트 주변에 부드러운 빛을 추가하세요. 각 화면 우측 상단 근처에 초승달 아이콘을 1개씩 포함하세요.

왼쪽 화면 레이아웃: 상단 상태 표시줄에는 18:11 시간과 작은 신호, Wi-Fi, 배터리 아이콘이 표시됩니다. 왼쪽 상단 근처에는 흰색으로 {argument name="greeting text" default="こんばんは"}라는 인사말을 표시하고, 그 아래 더 작은 줄에 {argument name="sleep countdown text" default="睡眠時間 0:30"}을 적으세요. 우측 상단 근처에는 작은 원형 스피커/오디오 버튼을 1개 포함하세요. 날개 달린 봉제 인형 마스코트를 중앙 상단에 배치하세요. 그 아래에는 일본어 설명 텍스트 “TikTok・Instagram Reels・YouTube Shorts 를見ていた君が、ここで一緒に眠れるれるよ。”를 추가하세요. 하단 근처에는 {argument name="primary button text" default="この子と、夜を終える"}라고 적힌 크고 둥근 크림색 기본 버튼을 1개 배치하세요. 그 아래에는 단순한 라인 아이콘과 일본어 라벨이 있는 작은 둥근 내비게이션 버튼 4개를 한 줄로 배치하세요: 1) 반짝임 아이콘, “森”; 2) 전화기/직사각형 아이콘, “日々みる”; 3) 초승달/수면 아이콘, “おやすみ”; 4) 톱니바퀴 아이콘, “せってい”. 큰 크림색 버튼의 오른쪽 하단 가장자리에 겹치도록 주황색 원형 액션 버튼을 1개 추가하세요.

오른쪽 화면 레이아웃: 상단 상태 표시줄에 다시 18:11 시간과 전화기 아이콘을 표시하세요. 맨 위 중앙에는 짧고 얇은 라벤더색 핸들 선을 포함하세요. 그 아래 중앙에 흰색으로 {argument name="memory title" default="この子の思い出"}라는 제목을 표시하세요. 왼쪽 화면보다 약간 작게 제목 아래에 날개 달린 봉제 인형 마스코트를 배치하세요. 마스코트 우측 상단에 초승달을 배치하세요. 마스코트 아래에는 중앙 정렬된 작은 일본어 텍스트 “まだ思い出はないよ。今夜が、最初の一夜になるかも。”를 추가하세요. 하단 절반은 별이 드문드문 있는 빈 공간으로 두세요. 화면 오른쪽 하단 근처에 작은 주황색 플로팅 원형 버튼을 1개 추가하세요. 하단에는 흰색 홈 인디케이터를 포함하세요.

제약 사항: 정확히 2개의 휴대폰 화면, 총 2개의 마스코트, 총 2개의 초승달, 왼쪽 화면에 4개의 하단 내비게이션 버튼, 총 2개의 주황색 플로팅 액션 버튼을 사용하세요. 모든 타이포그래피는 선명하고 읽기 쉬워야 하며, 일본어 텍스트는 깔끔하게 렌더링되어야 합니다. 추가 패널, 로고, 워터마크 또는 추가 캐릭터를 넣지 마세요.

기계 번역 — 실제 결과물을 만든 것은 원문 프롬프트입니다.

✨ 생성 저장 프롬프트 복사 공유 원본 게시물 Hitboard에서 열기