Codex용 모바일 앱 홈 화면 디자인 프롬프트

내가 가장 중요하다고 정한 요소를 중심으로, 하단 탭 바와 실제 같은 통계를 갖춘 재방문 사용자용 앱 홈 화면을 디자인합니다.

연속 기록 [12]일째인 재방문 사용자의 홈 화면을 디자인해 줘. 가장 중요한 요소는 [하루 목표 대비 오늘의 진행 상황]이니까 가장 먼저 눈에 들어오게 해 줘. 그 아래에: [페이지 진행률이 표시된 읽고 있는 책], [독서 세션 시작] 기본 버튼, [이번 주 통계]. [오늘, 서재, 통계, 프로필] 탭이 있는 하단 탭 바도 넣어 줘.

지원 도구

Codex, ChatGPT

프롬프트 모음

모바일 앱

이 프롬프트 소개

Codex가 재방문 사용자가 보는 홈 화면을 디자인하는데, 예시에서는 독서 연속 기록 12일째입니다. 프롬프트는 하루 목표 대비 오늘의 진행 상황이라는 요소 하나를 지정해 가장 먼저 눈에 들어오게 하고, 그 아래에 읽고 있는 책, 주요 행동, 이번 주 통계를 순서대로 놓고, 맨 아래에 탭이 네 개인 탭 바를 둡니다.

대괄호를 내 앱에 맞는 것으로 바꾸세요. 재방문 사용자가 되는 일수나 상태, 가장 중요한 요소, 그 아래 콘텐츠, 기본 행동, 탭 이름입니다. 가장 중요한 요소를 하나만 지정하라는 지시는 그대로 두세요. 그렇지 않으면 홈 화면이 똑같은 비중의 카드 그리드가 되기 쉽습니다.

기본 버튼은 엄지가 닿는 화면 아래쪽 절반에 두고, 탭 바가 그것을 가리지 않는지 확인하세요. 이 화면이 뒤이어 나올 목록, 설정, 상태 화면의 패턴을 정하므로, 넘어가기 전에 한두 번 다듬을 가치가 있습니다.

이 모음의 다른 프롬프트

• Codex용 목록·상세 화면 디자인 프롬프트검색창과 필터 칩이 있는 목록 화면과 항목을 열었을 때의 상세 화면을, 실제 같은 제목과 숫자로 파일 두 개에 디자인합니다.
• Codex용 앱 설정 화면 디자인 프롬프트표준 그룹 목록, 행마다 현재 값, 필요한 곳의 토글, 빨간색 위험 동작을 갖춘 앱 설정 화면을 디자인합니다.
• Codex용 빈 상태·로딩·오류 상태 디자인 프롬프트앱 화면의 빈 상태, 로딩, 오류 상태를 일반 화면과 같은 내비게이션과 헤더로 별도 파일에 디자인합니다.
• Codex용 앱 다크 모드 디자인 프롬프트색조가 있는 어두운 배경, 채도를 낮춘 포인트 색상, WCAG AA 텍스트 대비로 다크 모드를 만들고 바꾼 색상을 정리합니다.
• Codex용 Android Material 3 적용 프롬프트iOS 앱 화면을 Material 3로 Android에 맞게 바꿉니다. 상단 앱 바, 내비게이션 바, FAB을 쓰고 브랜드 색상은 유지합니다.
• Codex용 모바일 앱 목업을 SwiftUI 코드로 바꾸는 프롬프트승인된 HTML 화면을 내 SwiftUI 앱에 구현하게 합니다. 레이아웃과 간격을 맞추고, 테마 색상을 쓰고, Dynamic Type을 지원합니다.