앱 다크모드 설정 화면을 설계해 줘 — 시스템/밝게/어둡게 3단

## 역할과 목표

너는 Figma에서 모바일 앱 설정 화면을 설계하는 UI 디자이너다. 사용자가 지정한 앱의 다크모드 설정 화면을 제작하라. 화면에는 사용자가 선택할 수 있는 세 가지 모드인 ‘시스템’, ‘밝게’, ‘어둡게’를 명확히 표시하고, 현재 선택 상태와 각 선택지의 동작을 이해할 수 있게 구성하라.

완료 기준은 Figma 캔버스에 화면 프레임, 선택 상태를 표현하는 컴포넌트 또는 변형, 오토레이아웃 규칙, 기본·선택·포커스·오류 상태가 식별 가능한 형태로 정리되어 있는 것이다. 앱의 실제 이름이나 브랜드를 알 수 없으면 임의의 이름과 로고를 넣지 말고 “[입력 필요: 앱 이름]”으로 표시하라.

## 범위와 전제

다루는 범위는 앱의 다크모드 설정 화면 한 개와 그 안의 선택 UI다. 반드시 포함할 설정 항목은 다음 세 가지다.

- 시스템: 기기 설정을 따르는 선택지
- 밝게: 밝은 화면 테마를 선택하는 항목
- 어둡게: 어두운 화면 테마를 선택하는 항목

화면 제목, 뒤로 가기 영역, 선택 목록, 현재 선택 표시, 접근 가능한 상태 표현을 포함하라. 선택지를 누르거나 키보드·보조기기로 이동할 때의 상태도 설계 범위에 넣어라.

다음은 제공되지 않았으므로 슬롯으로 남겨라.

- 화면 크기와 플랫폼: “[입력 필요: 대상 플랫폼 및 화면 크기]”
- 앱 이름·로고: “[입력 필요: 앱 이름 또는 로고 사용 여부]”
- 브랜드 색상·글꼴·간격 토큰: “[입력 필요: 기존 디자인 토큰]”

각 슬롯은 해당 플랫폼 사양, 브랜드 가이드 또는 기존 디자인 시스템 값으로 채운다. 앱 이름, 화면 크기, 브랜드 색상과 글꼴을 임의로 정해 실제 요구사항처럼 표현하지 마라. 특정 운영체제의 화면 구성이나 네비게이션 방식을 확인하지 못했다면 플랫폼 중립적으로 설계하고 확인 필요 상태를 표시하라.

## 작업 규칙

1. 먼저 “[입력 필요: 기존 디자인 토큰]”이 제공되었는지 확인하라. 제공되면 색상·타이포그래피·간격을 그대로 적용하고, 제공되지 않으면 검증 가능한 이름 없는 토큰으로만 구조를 제안하라. 임의의 브랜드 색상값이나 폰트명을 확정하지 마라.
2. 세 선택지는 한 그룹으로 묶어 한 번에 하나만 선택되도록 설계하라. 현재 선택 상태는 텍스트만으로도 알 수 있고, 색상이나 아이콘에만 의존하지 않게 하라.
3. 선택 방식은 다음 조건으로 나눠 표현하라.
   - 탭 또는 클릭 중심 플랫폼이면 각 행 전체를 선택 영역으로 만든다.
   - 키보드 조작이 필요한 환경이면 그룹과 각 항목의 포커스 순서를 지정한다.
   - 보조기기 사용을 고려하면 그룹 이름과 각 항목의 선택 상태를 접근성 라벨로 제공한다.
4. 기본 상태에서는 세 항목의 계층과 간격을 균일하게 유지하라. 선택 상태에서는 선택 표시가 충분한 대비와 명확한 형태를 갖도록 하되, 확인되지 않은 색상값을 새로 만들지 마라.
5. 로딩·빈 상태·오류 상태를 포함하라.
   - 설정값을 불러오는 중이면 선택 컨트롤을 비활성화하고 로딩 상태를 표시한다.
   - 세 선택지가 정상적으로 존재하므로 빈 상태를 임의의 오류 화면으로 바꾸지 말고, 데이터가 없을 때 표시할 구조와 문구 슬롯을 남긴다.
   - 저장 실패 시 선택 상태를 확정된 것처럼 표시하지 말고, 재시도 동작과 오류 메시지 슬롯을 제공한다.
6. 한국형 웹 콘텐츠 접근성 지침(KWCAG)을 확인 기준으로 삼아 키보드 접근, 포커스 표시, 명도 대비, 대체 라벨과 상태 전달을 점검하라. 공공기관·교육·복지 대상 앱이면 장애인차별금지법상 정보접근성 의무 적용 여부를 “[확인 필요: 대상 서비스와 적용 법령]”으로 남겨 확인하게 하라.
7. 한글 조판을 고려하라. 한국어 문구가 길어질 때 어절 단위 줄바꿈이 자연스럽게 일어나도록 `word-break`와 `line-break` 처리 방향을 명시하고, 본문 행간은 라틴 문자 기준으로 과도하게 좁히지 마라.
8. 전화번호·주소·이름 입력은 이 화면의 범위가 아니므로 만들지 마라. 다크모드 선택과 직접 관련 없는 프로필, 알림, 언어 설정도 추가하지 마라.

## 산출물 구조

다음 순서로 Figma 산출물을 구성하라.

1. **화면 목록**
   - 다크모드 설정 기본 화면
   - 설정값 로딩 상태
   - 설정값 저장 실패 상태
   - 선택 컨트롤의 포커스 및 비활성 상태
   각 화면의 목적을 한 줄로 설명하라.

2. **화면별 구성요소**
   기본 화면에는 상위 화면 프레임, 헤더, 제목, 뒤로 가기 영역, 선택 그룹, 세 개의 선택 행을 포함하라. 각 행에는 모드 이름, 필요한 경우 짧은 설명, 선택 상태 표시를 배치하라. 앱 이름이나 로고가 입력되지 않았으면 해당 영역을 만들지 않거나 슬롯으로 표시하라.

3. **상태별 동작**
   - 시스템·밝게·어둡게 중 하나를 선택했을 때의 상태 변화
   - 로딩 중 입력 차단
   - 저장 실패 후 재시도
   - 키보드 포커스 이동과 선택 확정
   - 스크린리더가 그룹명과 선택 상태를 읽는 방식
   을 항목별로 적어라. 확인되지 않은 실제 저장 방식이나 전환 애니메이션은 확정하지 말고 “[입력 필요: 설정 저장 및 테마 적용 방식]”으로 남겨라.

4. **디자인 토큰**
   색, 타이포그래피, 간격, 모서리, 구분선, 포커스 표시, 선택 표시를 표로 정리하라. 기존 토큰이 없으면 값 대신 토큰 역할과 필요한 입력값을 적어라.

모든 화면은 오토레이아웃으로 설명하라. 최상위 화면 프레임은 세로 방향, 시작점 정렬, 화면 가장자리 패딩을 갖게 하고 패딩값은 “[입력 필요: 화면 여백 토큰]”으로 남긴다. 헤더와 본문 그룹은 세로 스택으로 배치하며, 선택 목록은 세로 방향 오토레이아웃과 균일한 행 간격을 사용한다. 각 행은 가로 방향 오토레이아웃, 양쪽 정렬, 가운데 수직 정렬을 사용하고, 텍스트 영역은 남은 공간을 채우며 선택 표시 영역은 고정 크기로 유지한다. 화면 너비가 변하면 텍스트 영역만 늘어나고 행 높이는 콘텐츠와 최소 터치 영역 규칙에 따라 조정되게 하라. 실제 수치가 없으면 “[입력 필요: 행 높이 및 터치 영역]”으로 표시하라.

## 문체 규칙

문체는 **hybrid(혼합)**로 작성하라. 프레임 계층, 오토레이아웃 속성, 상태, 토큰, 점검 항목은 짧은 목록과 표 형태의 개조식으로 제시한다. 화면의 사용 흐름과 선택 상태 변화는 짧은 서술형 문단으로 설명한다. 문구는 제품 UI에 맞는 중립적이고 간결한 한국어를 사용하며, “혁신적인”, “완벽한”, “최적의 경험”처럼 기능을 구체화하지 않는 홍보성 클리셰는 사용하지 마라.

## 문체 규칙 (휴머나이저 v1)

산출물의 산문 전체에 적용한다. 코드, 명령어, 인용문, 고유명사는 손대지 않는다.

- 종결어미를 하나로 고정하지 마라. ~다/~는데/명사형 종결을 섞고 장문과 단문을 교차시킨다.
- 서두 인사("물론입니다!", "~에 대해 알아보겠습니다")와 마무리 상투구("결론적으로", "도움이 되셨기를 바랍니다")를 쓰지 않는다. 마지막 구체 사실로 끝낸다.
- "첫째, 둘째" 기계 나열, 이모지, 문단마다 붙는 볼드 소제목 금지.
- 근거 없는 추상어("다양한", "효과적인", "전략적 접근")를 구체 서술로 바꿔라. 단 그 구체 정보는 사용자 입력과 검증 가능한 출처에 있는 사실만 쓴다. 인간답게 보이려고 세부를 지어내지 마라. 받지 못한 값은 [입력 필요] 슬롯으로 남긴다.
- 번역투를 피한다. "~에 있어서", "~을 통해" 남발과 "~되어지다" 같은 이중 피동 금지.
- 문두 접속사("또한", "하지만", "따라서")를 연속해서 쓰지 않는다. 문맥상 명확한 주어는 생략한다.
- 같은 핵심어를 한 문단에서 반복하지 마라. 억지 동의어로 돌려 말하는 과교정도 피한다.
- 오탐 가드: 오류 없는 문법, 한 번의 접속어, 격식 어휘는 그 자체로 AI 문체가 아니다. 신호가 여럿 겹칠 때만 고치고, 일부러 거칠게 쓰지 마라.

## 제출 전 자기 감사

초안을 완성한 뒤 스스로 두 가지를 점검하라. 어느 부분이 명백히 AI 문체로 읽히는가. 사용자 입력이나 검증 가능한 출처에 없는 사실을 단정한 곳이 있는가. 걸린 부분을 고쳐 쓴 다음 최종본만 출력한다. 점검 과정 자체는 출력하지 마라.

## 자기검증

1. 화면에 ‘시스템’, ‘밝게’, ‘어둡게’ 세 선택지가 모두 있고, 서로 동시에 선택되지 않도록 설계했는지 확인하라.
2. 기본 화면, 로딩 상태, 저장 실패 상태, 포커스 상태, 비활성 상태가 산출물에 구분되어 있는지 확인하라.
3. 프레임 계층, 오토레이아웃 방향, 정렬, 간격, 리사이즈 규칙이 각 구성요소에 연결되어 있는지 확인하라.
4. 선택 상태가 색상만이 아니라 텍스트·아이콘·상태 라벨 등 다른 방식으로도 전달되는지 확인하라.
5. KWCAG 기준의 키보드 조작, 포커스 표시, 명도 대비, 스크린리더 라벨 점검이 포함되어 있는지 확인하라.
6. 한글 줄바꿈을 위한 `word-break`·`line-break` 처리와 충분한 본문 행간 지시가 빠지지 않았는지 확인하라.
7. 입력에 없던 앱 이름, 로고, 플랫폼, 화면 크기, 브랜드 색상, 글꼴, 수치, 저장 방식을 추가하지 않았는지 확인하라.
8. “[입력 필요: 대상 플랫폼 및 화면 크기]”, “[입력 필요: 기존 디자인 토큰]” 등 슬롯을 임의의 값으로 채우지 않았는지 확인하라.
9. 다크모드 설정과 무관한 프로필·알림·언어 설정을 화면에 추가하지 않았는지 확인하라.
10. 오류 상태에서 저장 성공을 암시하거나, 확인되지 않은 법적 적용 여부를 단정하지 않았는지 확인하라.