Codex용 빈 상태·로딩·오류 상태 디자인 프롬프트

앱 화면의 빈 상태, 로딩, 오류 상태를 일반 화면과 같은 내비게이션과 헤더로 별도 파일에 디자인합니다.

[서재] 화면의 상태 세 가지를 별도 파일로 더 디자인해 줘: 빈 상태(책이 하나도 없는 신규 사용자, 분명한 다음 행동 하나), 로딩(실제 레이아웃과 맞는 스켈레톤 플레이스홀더), 오류(오프라인, 다시 시도 버튼). 내비게이션과 헤더는 일반 화면과 똑같이 유지해 줘.

지원 도구

Codex, ChatGPT

프롬프트 모음

모바일 앱

이 프롬프트 소개

Codex가 화면 하나의 버전 세 가지를 더 디자인합니다. 빈 상태는 아직 아무것도 없는 신규 사용자를 위해 분명한 다음 행동 하나를 주고, 로딩은 실제 레이아웃과 같은 모양의 스켈레톤 플레이스홀더, 오류는 기기가 오프라인일 때를 위한 다시 시도 버튼을 갖습니다. 내비게이션과 헤더는 일반 화면과 똑같아서 콘텐츠 영역만 달라집니다.

대괄호는 데이터가 없을 수 있는 어떤 화면에 맞춰도 됩니다. 피드, 받은편지함, 검색 결과 화면도 같은 세 상태가 필요합니다. 프롬프트를 실행하기 전에 빈 상태의 다음 행동을 정하세요. 첫 책 추가나 읽기 목록 가져오기처럼 적어 두면 Codex가 임의로 지어내지 않습니다.

이런 상태는 개발 중에 뒤늦게 나타나서 개발자가 즉흥적으로 만들어야 하는 경우가 많습니다. 완성된 목록 화면을 바탕으로 지금 디자인해 두면 스켈레톤이 실제 행과 맞고 오류 메시지도 앱의 어조를 유지합니다. 메인 화면과 함께 넘겨서 네 가지를 한 번에 만들게 하세요.

이 모음의 다른 프롬프트

• Codex용 앱 다크 모드 디자인 프롬프트색조가 있는 어두운 배경, 채도를 낮춘 포인트 색상, WCAG AA 텍스트 대비로 다크 모드를 만들고 바꾼 색상을 정리합니다.
• Codex용 Android Material 3 적용 프롬프트iOS 앱 화면을 Material 3로 Android에 맞게 바꿉니다. 상단 앱 바, 내비게이션 바, FAB을 쓰고 브랜드 색상은 유지합니다.
• Codex용 모바일 앱 목업을 SwiftUI 코드로 바꾸는 프롬프트승인된 HTML 화면을 내 SwiftUI 앱에 구현하게 합니다. 레이아웃과 간격을 맞추고, 테마 색상을 쓰고, Dynamic Type을 지원합니다.
• Codex용 모바일 앱 브리프와 화면 목록 프롬프트앱의 사용자, 핵심 루프, 플랫폼을 설명하고 첫 버전의 모든 화면을 묶음별로, 화면마다 목적과 함께 나열하게 합니다.
• Codex용 앱 온보딩 흐름 디자인 프롬프트환영, 목표 선택, 첫 홈 화면으로 이어지는 390×844 온보딩 화면 3개를 CSS 일러스트와 공통 스타일로 디자인합니다.
• Codex용 모바일 앱 홈 화면 디자인 프롬프트내가 가장 중요하다고 정한 요소를 중심으로, 하단 탭 바와 실제 같은 통계를 갖춘 재방문 사용자용 앱 홈 화면을 디자인합니다.