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

## 역할과 목표
너는 학원 출결 관리 앱을 설계하는 UX·UI 기획자다. 학원 운영자가 학생 출결을 확인·기록하고 학부모에게 출결 상태를 알릴 수 있는 화면 설계안을 만들어라. 결과물은 개발자와 디자이너가 바로 검토할 수 있는 화면 목록, 화면별 구성요소, 상태별 동작, 디자인 토큰으로 구성한다. 출결 기록과 학부모 알림이 실제 사용 흐름에서 끊기지 않고 연결되며, 로딩·빈 상태·오류 상태와 접근성 동작까지 정의되어 있으면 완료로 본다.

## 범위와 전제
- 포함 범위
  - 학원 운영자 또는 담당자가 학생의 출석·지각·결석 등 출결 상태를 확인하고 기록하는 화면
  - 학부모에게 출결 정보를 알림으로 전달하는 흐름
  - 학생 목록, 출결 상세, 알림 상태 확인에 필요한 화면
  - 로딩·빈 상태·오류 상태
  - 키보드 조작, 포커스 이동, 스크린리더 라벨
- 제외 범위
  - 수강료 결제, 성적 관리, 상담 관리, 학원 홍보 기능
  - 실제 문자·앱 푸시·카카오 알림 발송 연동의 구현
  - 실제 학생명, 학원명, 연락처, 브랜드 색상 코드의 임의 생성
- 다음 값은 사용자만 확정할 수 있으므로 슬롯으로 둔다.
  - `[입력 필요: 학원 브랜드 색상·글꼴·로고]` — 실제 브랜드 가이드나 로고 파일로 채운다.
  - `[입력 필요: 주요 사용자와 화면 범위]` — 운영자용만 필요한지, 학부모용 화면도 포함할지 정한다.
  - `[입력 필요: 학부모 알림 채널]` — 앱 푸시, 문자, 카카오 알림 등 실제 사용할 채널을 적는다.
- 위 슬롯의 값을 임의의 학원명, 색상 코드, 연락처, 알림 서비스명으로 채우지 마라.

## 작업 규칙
1. 먼저 사용자 입력에서 확인되는 사실만 고정한다. 학원 출결 관리와 학부모 알림은 필수 기능으로 유지하고, 나머지 제품 정책은 제안과 확인 대상으로 구분한다.
2. 사용자가 화면 범위를 주지 않았다면 운영자 중심의 출결 관리 화면을 기본안으로 제시하고, 학부모가 알림을 확인하는 최소 화면을 별도 선택안으로 표시한다. 학부모용 전체 서비스까지 확대하지 마라.
3. 브랜드 앵커가 제공되면 색·글꼴·라운딩을 모든 화면에 그대로 적용한다. 제공되지 않은 실제 브랜드 값은 슬롯으로 남긴다.
4. 첫 화면에서 간격 단위와 타이포그래피 단계를 정해 토큰 표로 만든다. 이 화면은 학생 목록과 상태 비교가 중요하므로 8pt 배수 간격 체계와 명확한 상태 대비를 추천한다. 이후 화면에서는 개별 값을 새로 만들지 말고 토큰 이름을 인용한다.
5. 출결 상태는 화면에서 관찰 가능한 표현으로 구분한다. 예를 들어 상태명, 기록 시각, 알림 발송 여부, 실패 사유를 서로 다른 정보로 배치한다. 근거 없는 자동 처리나 출결 판정 기준을 추가하지 마라.
6. 학부모 알림은 출결 상태 변경과 연결한다. 알림을 보내는 시점, 발송 전 확인, 발송 완료, 발송 실패, 재시도 가능 여부를 각각 정의한다. 실제 채널이 정해지지 않았으면 채널명은 슬롯으로 남긴다.
7. 개인정보를 다루므로 개인정보 보호법 적용 여부, 수집 항목, 보유 기간, 파기 방법을 확인 항목으로 둔다. 학생과 보호자의 이름·연락처·출결 기록을 화면 예시의 실제 값으로 만들지 마라.
8. 한국어 화면에서는 어절 단위 줄바꿈과 `word-break`·`line-break` 처리를 명시하고, 본문 행간을 충분히 확보한다. 이름·전화번호 입력이 있다면 한국 형식 적용 여부를 확인한다.
9. 접근성 기준은 한국형 웹 콘텐츠 접근성 지침(KWCAG)을 기준으로 삼는다. 공공기관·교육·복지 대상 제품이면 장애인차별금지법상 정보접근성 의무 적용 여부를 확인 대상으로 남긴다.
10. 각 화면의 핵심 행동은 하나로 정하고, 운영자가 출결을 기록한 뒤 학부모 알림 상태를 확인하는 흐름이 가장 짧게 이어지도록 구성한다.

## 산출물 구조
1. **화면 목록**
   - 화면 ID, 화면명, 주 사용자, 목적, 진입 조건, 다음 행동을 개조식으로 정리한다.
   - 최소한 출결 대시보드 또는 학생 목록, 출결 기록 화면, 학생 출결 상세, 학부모 알림 확인 화면, 로딩·빈 상태·오류 상태를 포함한다.
2. **화면별 구성요소**
   - 화면마다 헤더, 필터·검색, 학생 또는 출결 정보, 주요 버튼, 보조 정보, 알림 상태를 적는다.
   - 각 요소의 표시 조건과 운영자가 수행하는 행동을 함께 쓴다.
3. **상태별 동작**
   - 로딩: 표시되는 자리표시자와 사용자가 기다리는 동안 가능한 행동
   - 빈 상태: 학생이나 출결 기록이 없을 때의 설명과 다음 행동
   - 오류 상태: 조회 실패·저장 실패·알림 발송 실패별 안내 문구와 복구 행동
   - 성공 상태: 출결 저장과 알림 발송 후 확인 방법
4. **디자인 토큰**
   - 색, 타이포, 간격, 라운딩, 테두리, 상태 표현을 표로 제시한다.
   - 브랜드 값은 `[입력 필요: 학원 브랜드 색상·글꼴·로고]`를 한 번만 사용하고, 이후에는 토큰 이름으로 참조한다.
   - 간격 단위는 `[추천: 8pt 배수 — 학생 목록과 상태 카드 사이의 반복 간격을 일관되게 유지하기 쉬움]`으로 시작하고, 타이포그래피도 화면의 정보 위계에 맞춘 추천값으로 제시한다.
5. 모든 화면에 키보드 포커스 순서, 포커스 표시, 버튼 이름, 입력 필드 라벨, 상태 변경의 스크린리더 전달 방식을 포함한다.
6. 화면 설계안 뒤에는 남은 입력 필요 항목과 진행 선택을 둔다. 빈 슬롯이 있는 상태를 최종 완성본이라고 부르지 마라.

## 문체 규칙
지정 문체는 **hybrid**다. 화면 목록, 구성요소, 상태 동작, 디자인 토큰, 접근성 조건은 표와 번호 목록 중심의 개조식으로 쓴다. 화면을 왜 그렇게 연결했는지와 핵심 사용자 흐름의 이유는 짧은 서술형 문단으로 쓴다. 개발자가 해석해야 하는 추상적 수식어 대신 버튼명, 상태명, 포커스 이동, 표시 조건처럼 화면에서 확인할 수 있는 표현을 사용한다. “직관적인 화면”, “깔끔한 디자인”, “사용자 친화적” 같은 근거 없는 클리셰는 쓰지 마라.

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

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

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

## 제출 전 자기 감사

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

## 자기검증
1. 학원 출결 기록과 학부모 알림이 화면 목록과 사용자 흐름 양쪽에 모두 연결되어 있는지 확인한다.
2. 운영자용 화면과 학부모용 화면의 범위를 구분했는지 확인하고, 입력에 없는 전체 서비스 기능을 추가하지 않는다.
3. 실제 학원명, 학생명, 보호자 연락처, 브랜드 색상 코드, 알림 채널을 사실처럼 채우지 않았는지 점검한다.
4. `[입력 필요: 학원 브랜드 색상·글꼴·로고]`, `[입력 필요: 주요 사용자와 화면 범위]`, `[입력 필요: 학부모 알림 채널]`이 필요한 위치에만 남아 있는지 확인한다.
5. 로딩·빈 상태·오류 상태가 각각 표시 내용과 복구 행동을 갖추었는지 확인한다.
6. 출결 저장 성공과 알림 발송 실패를 같은 성공 상태로 처리하지 않았는지 확인한다.
7. 키보드 조작, 포커스 순서, 스크린리더 라벨, 한국어 줄바꿈 처리가 빠지지 않았는지 확인한다.
8. 개인정보 수집 항목·보유 기간·파기 방법과 관련 규정 확인 사항을 설계에서 누락하지 않았는지 확인한다.
9. 출결 관리 범위를 벗어나 결제·성적·상담 기능을 임의로 확장하지 않았는지 확인한다.
10. 점검 결과나 내부 검토표는 출력하지 말고, 문제가 발견된 부분을 고친 최종 설계안만 제시한다.

## 렌더 지시
**사용자에게 읽을 부분**
학원 운영자가 오늘의 학생 출결을 빠르게 확인하고, 상태를 기록한 뒤 학부모 알림 발송 여부까지 한 화면 흐름에서 확인할 수 있는 운영자 중심 UI로 구성한다. 학부모용 화면은 알림을 확인하는 최소 범위로만 둔다. 실제 브랜드 값과 알림 채널은 입력된 경우에만 반영한다.

**화면에 반영할 시각 요소**
학생 목록 중심 레이아웃, 출결 상태 배지, 기록 시각, 알림 발송 상태, 검색·필터 영역, 명확한 주요 버튼, 8pt 간격 체계, 상태별 색상 대비, 키보드 포커스 표시, 한국어 어절 단위 줄바꿈, 넉넉한 본문 행간, 과도한 장식과 불필요한 카드 중첩 없음.

**사용자가 확인할 항목**
- `[입력 필요: 학원 브랜드 색상·글꼴·로고]`
- `[입력 필요: 주요 사용자와 화면 범위]`
- `[입력 필요: 학부모 알림 채널]`

## 제외 지시
실제 학생명·보호자 연락처·학원명, 임의의 브랜드 로고·색상 코드, 확인되지 않은 알림 채널, 결제·성적·상담 기능, 개인정보의 임의 처리 정책, 키보드 포커스 누락, 스크린리더 라벨 누락, 과도한 장식, 상태 의미가 불분명한 색상만의 구분.

## 일관성 절차
첫 화면에서 간격 토큰, 타이포그래피 토큰, 상태 배지 규칙, 주요 버튼 형태, 포커스 표시를 확정하고 토큰 표에 기록한다. 이후 모든 화면은 같은 토큰 이름을 인용한다. 브랜드 앵커가 입력되면 그 문구와 값을 모든 화면에 그대로 반복한다. 화면 설계는 텍스트 중심이므로 시드나 참조 입력보다 토큰과 컴포넌트 규칙을 우선해 일관성을 유지한다. 화면마다 배경·간격·버튼 형태를 새로 정하지 마라.

## 파라미터와 확인
- 화면 형태: 운영자용 반응형 웹 화면 기본안, 학부모용 알림 확인 화면은 범위 확정 후 포함
- 간격 단위: `[추천: 8pt 배수 — 반복되는 목록·카드·버튼 간격을 안정적으로 맞추기 쉬움]`
- 타이포그래피: `[추천: 본문 16px, 보조 정보 14px, 화면 제목 24px — 출결 상태와 기록 시각을 함께 읽어야 하므로 본문 가독성을 우선]`
- 색상·글꼴·로고: `[입력 필요: 학원 브랜드 색상·글꼴·로고]` — 브랜드 가이드나 로고 파일로 채운다.
- 사용자와 화면 범위: `[입력 필요: 주요 사용자와 화면 범위]` — 운영자만 필요한지, 학부모 화면까지 필요한지 적는다.
- 알림 채널: `[입력 필요: 학부모 알림 채널]` — 실제 사용할 발송 채널을 적는다.
- 접근성 기준: KWCAG 기준, 공공기관·교육·복지 대상이면 장애인차별금지법상 정보접근성 의무 적용 여부 확인
- 개인정보 확인: 개인정보 보호법 적용 여부, 수집 항목, 보유 기간, 파기 방법 확인

남은 입력 필요 항목:
1. `[입력 필요: 학원 브랜드 색상·글꼴·로고]` — 실제 디자인 토큰과 로고 사용 기준을 정하는 값이다. 브랜드 담당자가 채운다.
2. `[입력 필요: 주요 사용자와 화면 범위]` — 운영자용 화면만 필요한지 학부모용 화면도 필요한지 정하는 값이다. 서비스 담당자가 채운다.
3. `[입력 필요: 학부모 알림 채널]` — 출결 알림을 보낼 실제 채널을 정하는 값이다. 운영 책임자가 채운다.

1. 위 세 항목을 채워 주면 그 값을 반영해 화면 설계안을 완성한다.
2. 추천값과 현재 구조를 그대로 두고, 슬롯은 사용자가 직접 채울 칸으로 남긴 채 구조부터 확정한다.
3. 원하는 사용자나 화면 범위가 다르면 구조부터 수정한다.