Codex용 앱 다크 모드 디자인 프롬프트

색조가 있는 어두운 배경, 채도를 낮춘 포인트 색상, WCAG AA 텍스트 대비로 다크 모드를 만들고 바꾼 색상을 정리합니다.

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

지원 도구

Codex, ChatGPT

프롬프트 모음

모바일 앱

이 프롬프트 소개

Codex가 화면 두 개의 다크 버전을 만들고 색상 선택의 이유를 설명합니다. 프롬프트의 규칙은 흔한 문제를 미리 막습니다. 순수한 검은색 대신 색조가 있는 어두운 배경, 어둠 속에서 번쩍이지 않도록 채도를 낮춘 포인트 색상, 최소한 WCAG AA를 만족하는 텍스트 대비입니다.

처음 두 대괄호에 변환할 화면을 적으세요. 홈 화면과 콘텐츠가 많은 화면 하나가 좋은 쌍입니다. 하나는 핵심 비주얼 요소를, 다른 하나는 긴 텍스트를 시험하기 때문입니다. 배경 색조는 브랜드에서 가져오세요. 초록 브랜드라면 그린 그레이, 파란 브랜드라면 블루 그레이로 하면 다크 테마도 같은 앱처럼 느껴집니다.

바뀐 색상 목록은 재사용할 수 있는 다크 팔레트의 출발점입니다. Codex에 역할별 라이트·다크 값을 담은 작은 표로 정리해 달라고 하고, 그 표를 프로덕션 코드 단계에 넘겨서 다크 모드를 화면별이 아니라 토큰으로 만드세요. 라이트 화면과 다크 화면을 나란히 비교하면 지나치게 칙칙해진 포인트 색상을 가장 빨리 잡아낼 수 있습니다.

이 모음의 다른 프롬프트

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