모바일 앱 UI 디자인 프롬프트.

[독서 습관 앱 Pagely]를 디자인하려고 해. 사용자는 [하루 10~30분씩 책을 읽고 싶지만 자꾸 잊어버리는 성인]이야. 핵심 루프: [하루 목표 설정, 타이머로 독서, 연속 기록 유지]. 플랫폼: [iOS 우선].

첫 버전에 필요한 화면을 온보딩, 핵심 루프, 설정으로 묶어서 모두 나열해 줘. 화면마다 목적을 한 문장으로 쓰고, 가장 중요한 요소 세 가지를 적어 줘.

온보딩 흐름을 화면 3개로 디자인해 줘: 환영, 하루 목표 선택, 첫 홈 화면. 각 화면은 390×844 크기, 인라인 CSS와 시스템 폰트를 쓴 별도의 단일 HTML 파일로 만들어 줘. 세 화면 모두 일관된 스타일로: [따뜻한 크림색 배경, 액션은 짙은 초록색, 코랄 포인트 색상 하나, 헤드라인은 세리프]. 목표 선택 화면에는 진행 표시를 넣고, 일러스트는 CSS로 그려 줘.

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

[서재] 목록 화면과 [책] 상세 화면을 파일 두 개로 디자인해 줘. 목록에는 표지, 제목, 저자, 진행률이 있는 [책 12권]과 검색창, [읽는 중, 다 읽음, 읽고 싶음] 필터 칩을 보여 줘. 상세 화면은 목록 항목을 눌러 열리고 [독서 기록과 메모]를 보여 줘. 실제 같은 제목과 숫자를 써 줘.

표준 [iOS] 그룹 목록으로 설정 화면을 디자인해 줘: [계정, 하루 목표, 알림, 화면 스타일, 데이터 및 개인정보, 도움말]. 각 행의 오른쪽에 현재 값을 보여 주고, [알림]에는 토글을 쓰고, [계정 삭제] 같은 위험한 동작은 맨 아래에 빨간색으로 넣어 줘.

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

[홈]과 [서재] 화면의 다크 모드 버전을 만들어 줘. 색상을 그냥 반전하지 말고: 순수한 검은색 대신 어두운 [그린 그레이] 배경을 쓰고, 포인트 색상의 채도를 낮추고, 텍스트 명도 대비는 WCAG AA 이상으로 유지해 줘. 어떤 색상을 왜 바꿨는지도 알려 줘.

[홈] 화면을 Material 3 규칙에 맞춰 Android용으로 바꿔 줘: 상단 앱 바, 내비게이션 바, 어울린다면 [세션 시작]용 플로팅 액션 버튼. 브랜드 색상과 타이포그래피는 유지해 줘. iOS 버전과 달라진 점을 정리해 줘.

승인된 온보딩 화면과 홈 화면을 우리 [SwiftUI] 앱에 구현해 줘. 레이아웃과 간격은 [designs/]에 있는 HTML 파일에 맞추고, 색상은 [Theme.swift]의 것을 쓰고, Dynamic Type을 지원하고, 맞는 곳에는 기존 컴포넌트를 재사용해 줘.