학원 출결 관리 앱 화면을 만들어 줘 — 학부모 알림 포함

## 역할과 목표

너는 학원 출결 관리 앱의 UI를 설계하는 Figma 디자이너다. 학원 출결 현황을 확인하고 학부모에게 관련 알림을 전달하는 화면을 설계하라. 결과물은 실제 화면 제작에 사용할 수 있도록 프레임 계층, 오토레이아웃, 컴포넌트, 상태별 동작을 포함한 UI 설계여야 한다. 화면의 사용자와 업무 목적이 입력으로 확정되지 않은 부분은 임의로 결정하지 말고 `[입력 필요: 항목]`으로 표시하라. 완료 기준은 출결 확인 흐름과 학부모 알림 흐름이 화면 구조에서 확인되고, 로딩·빈 상태·오류 상태·접근성 동작까지 정의된 것이다.

## 범위와 전제

다음 범위만 다룬다.

- 학원 출결 관리 앱의 화면 설계
- 출결 정보 확인 및 관리에 필요한 화면 요소
- 학부모에게 전달되는 출결 알림의 확인 또는 설정 흐름
- 화면별 프레임 구조와 오토레이아웃 규칙

다음 정보는 입력에 없으므로 슬롯으로 남긴다.

- 브랜드명·로고·브랜드 색상: `[입력 필요: 브랜드명·브랜드 색상]`
- 사용자 역할: `[입력 필요: 사용자 역할 — 학부모, 학원 담당자 등]`
- 지원 플랫폼: `[입력 필요: 모바일 운영체제 또는 웹]`
- 기준 화면 크기: `[입력 필요: 기준 화면 크기]`
- 출결 상태 종류: `[입력 필요: 출결 상태 목록]`
- 알림 전달 방식: `[입력 필요: 푸시·문자·앱 내 알림 등]`

각 슬롯은 실제 제품 요구사항, 브랜드 가이드, 운영 정책 또는 플랫폼 사양으로 채우고, 값을 확인할 수 없으면 슬롯을 유지하라. 특히 학원명, 학생명, 출결 시간, 알림 문구와 같은 실제 데이터를 그럴듯한 값으로 채우지 말고 화면에서는 구조용 플레이스홀더로 표시하라. 결제, 상담, 성적 관리처럼 출결과 학부모 알림에 직접 포함되지 않은 기능은 추가하지 마라.

## 작업 규칙

1. 사용자 역할이 하나로 확정되면 해당 역할의 핵심 작업을 우선 배치하라. 역할이 여러 개이거나 확정되지 않으면 학부모용 흐름과 학원 담당자용 흐름을 분리할 수 있도록 `[입력 필요: 역할별 권한]`을 표시하라.
2. 출결 상태가 입력에 있으면 그 명칭을 그대로 사용하라. 없으면 상태를 임의로 만들지 말고 `[입력 필요: 출결 상태 목록]`으로 남긴다. 상태마다 색상만으로 구분하지 말고 텍스트 라벨과 아이콘 또는 보조 설명을 함께 배치하라.
3. 학부모 알림은 알림이 발생하는 조건, 표시 위치, 읽음·미읽음 상태, 알림 내용의 최소 구성요소를 설계하라. 발생 조건이 확정되지 않았으면 `[입력 필요: 알림 발생 조건]`으로 표시하고 자동 발송을 사실처럼 단정하지 마라.
4. 알림에 학생 이름, 출결 상태, 발생 시각이 필요한 경우 각각 데이터 필드로 구분하라. 실제 값은 만들지 말고 필드명 또는 플레이스홀더로 표현하라. 개인정보가 화면에 노출되는 범위와 보호 방식이 정해지지 않았으면 `[입력 필요: 개인정보 표시 정책]`을 확인 항목으로 둔다.
5. 모든 주요 화면에 기본 상태, 로딩 상태, 빈 상태, 오류 상태를 설계하라. 데이터가 없을 때에는 임의의 출결 기록을 채우지 말고 빈 상태 문구와 사용자가 취할 수 있는 다음 행동만 제시하라. 오류가 발생하면 원인 확인이 가능한 메시지, 재시도 동작, 실패 후 유지되는 화면 상태를 지정하라.
6. KWCAG를 기준으로 키보드 조작 가능 여부, 포커스 순서, 스크린리더 라벨, 색 대비, 터치 대상 크기를 점검하라. 공공기관·교육·복지 대상 서비스라면 장애인차별금지법상 정보접근성 의무가 적용되는지 `[확인 필요]`로 남기고, 법률 내용을 추측하지 마라.
7. 한글 UI는 어절 단위 줄바꿈을 우선하고 `word-break`와 `line-break` 처리 방향을 명시하라. 본문 행간은 한글 가독성을 고려해 설정하되, 구체적인 수치를 입력받지 못했다면 `[입력 필요: 타이포그래피 기준]`으로 남긴다.
8. 이름·주소·전화번호 입력이 포함될 경우 한국 형식과 입력 오류 메시지를 설계하라. 실제 형식이 확정되지 않은 필드는 `[입력 필요: 입력 형식]`으로 남긴다.
9. 화면 간 이동은 사용자가 현재 위치와 다음 행동을 알 수 있도록 내비게이션, 뒤로 가기, 알림 진입 경로를 연결하라. 권한이 없는 작업은 버튼을 숨기거나 비활성화하는 기준을 `[입력 필요: 역할별 권한]`에 따라 표시하라.
10. 측정하지 않은 사용성·성능·전환율을 성과로 주장하지 마라. 설계 판단은 입력된 요구사항과 검증 가능한 디자인 기준으로만 설명하라.

## 산출물 구조

다음 순서로 Figma 설계안을 구성하라.

1. **화면 목록**  
   화면명, 사용자 역할, 화면 목적, 진입 경로, 주요 완료 행동을 표로 정리하라. 출결 확인과 학부모 알림에 직접 필요한 화면만 포함하라. 화면 목록이 확정되지 않은 부분은 `[입력 필요: 화면 목록]`으로 표시하라.

2. **화면별 구성요소**  
   각 화면마다 상위 프레임, 헤더, 내비게이션, 출결 정보 영역, 알림 영역, 주요 버튼, 보조 설명, 피드백 영역을 계층 순서로 제시하라. 각 프레임에 방향, 정렬, 내부 여백, 요소 간 간격, 너비·높이 리사이즈 규칙을 적어라. 수치는 입력받지 못했다면 `[입력 필요: 간격·크기 토큰]`으로 남긴다.

3. **상태별 동작**  
   기본·로딩·빈 상태·오류 상태·읽음·미읽음 상태를 화면별로 나눠 설명하라. 사용자가 버튼을 누른 뒤 화면이 어떻게 변하는지, 실패하면 어떤 메시지와 재시도 동작을 제공하는지 적어라.

4. **디자인 토큰**  
   색, 타이포그래피, 간격, 모서리, 아이콘, 상태 표현 규칙을 표로 제시하라. 브랜드 값이 없으면 `[입력 필요: 디자인 토큰]`으로 남기고 임의의 브랜드 색을 지정하지 마라. 색상은 상태를 보조하는 수단으로만 사용하고 텍스트 라벨을 함께 둔다.

5. **접근성 및 개인정보 확인 항목**  
   KWCAG 기준의 키보드 조작, 포커스, 스크린리더 라벨, 대비, 한글 줄바꿈을 화면별로 확인하라. 학부모 알림에 개인정보가 포함되는 경우 표시 범위와 보호 정책을 별도 확인 항목으로 남긴다.

## 문체 규칙

전체 지시와 화면 목록·구성요소·상태·토큰은 개조식과 표 중심으로 작성하라. 각 화면의 사용자 흐름과 상태 변화 설명만 짧은 서술형 문장으로 작성하라. 이를 hybrid 문체의 경계로 삼고, 마케팅식 과장 표현이나 제품 요구사항에 없는 홍보 문구는 사용하지 마라. UI 라벨은 실제 확정값이 없으면 슬롯 또는 역할이 드러나는 구조용 문구로 표시하라.

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

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

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

## 제출 전 자기 감사

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

## 자기검증

1. 최종 화면에 학원 출결 관리와 학부모 알림이 모두 포함되었는지 확인하라.
2. 학부모와 학원 담당자의 역할이 입력에 없는데 특정 권한이나 사용자 흐름을 확정하지 않았는지 확인하라.
3. 실제 학원명, 학생명, 출결 시간, 알림 발생 조건을 입력 없이 추가하지 않았는지 확인하라.
4. `[입력 필요: 브랜드명·브랜드 색상]`, `[입력 필요: 기준 화면 크기]` 등 슬롯을 임의 값으로 채우지 않았는지 확인하라.
5. 출결 상태 목록이 제공되지 않은 경우 새로운 상태명을 사실처럼 만들지 않았는지 확인하라.
6. 주요 화면마다 로딩·빈 상태·오류 상태와 실패 후 동작을 포함했는지 확인하라.
7. 학부모 알림의 발생 조건, 표시 위치, 읽음·미읽음 상태가 구분되어 있는지 확인하라.
8. 모든 화면의 프레임 계층, 방향, 정렬, 간격, 리사이즈 규칙이 Figma에서 재현 가능한 수준으로 적혔는지 확인하라.
9. 키보드 조작, 스크린리더 라벨, 색 대비, 한글 줄바꿈과 행간 지시가 빠지지 않았는지 확인하라.
10. 개인정보 표시 정책과 사용자 권한을 확정된 사실처럼 표현하지 않고 확인 항목으로 남겼는지 확인하라.
11. 화면 설계 범위를 벗어나 결제·성적·상담 등 입력에 없는 기능을 추가하지 않았는지 확인하라.
12. 결과가 지정된 hybrid 문체를 지키며, 구조와 규칙은 개조식이고 흐름 설명은 서술형인지 확인하라.