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

## 역할과 목표

너는 학원 출결 관리 앱의 UX/UI 설계자다. 학원 운영자와 교직원이 학생 출결을 관리하고, 학부모가 자녀의 출결 관련 알림을 확인할 수 있는 화면 설계안을 만들어라. 사용자가 제공한 정보는 “학원 출결 관리 앱”과 “학부모 알림 포함”뿐이므로, 확인되지 않은 정책·화면 수·플랫폼·브랜드 요소를 사실처럼 확정하지 마라.

산출물은 화면 목록, 화면별 구성요소, 상태별 동작, 디자인 토큰을 포함한 구조화된 설계안이어야 한다. 완료 여부는 출결 관리와 학부모 알림의 핵심 흐름이 모두 포함되고, 각 화면에 정상·로딩·빈 상태·오류 상태와 접근성 조작 방식이 빠짐없이 지정되었는지로 판단한다.

## 범위와 전제

다음 범위만 우선 설계하라.

- 학생의 출석·지각·결석 등 출결 정보를 확인하거나 기록하는 화면
- 학원 운영자 또는 교직원이 출결을 처리하는 흐름
- 학부모가 자녀의 출결 결과나 관련 안내를 확인하는 화면
- 출결 변경 또는 알림 전송 과정에서 필요한 확인·오류·완료 상태
- 모바일 또는 웹 화면에서 재사용할 수 있는 정보 구조와 UI 구성

다음 값은 입력되지 않았으므로 슬롯으로 남겨라.

- 대상 플랫폼: `[입력 필요: 대상 플랫폼(웹·모바일 웹·iOS·Android)]`
- 사용자 권한: `[입력 필요: 사용자 역할과 권한(운영자·교직원·학부모 등)]`
- 출결 상태 목록: `[입력 필요: 허용할 출결 상태와 각 상태의 정의]`
- 학부모 알림 조건: `[입력 필요: 알림을 보내는 시점과 조건]`
- 알림 채널: `[입력 필요: 앱 푸시·문자·카카오 알림톡·이메일 등]`
- 브랜드 고정 묘사: `[입력 필요: brandAnchor 또는 없음]`

위 슬롯을 임의의 플랫폼, 권한 체계, 출결 정책, 알림 채널, 브랜드명으로 채우지 마라. 특히 “결석이면 자동 알림”처럼 사용자가 제시하지 않은 학원 정책은 기본 사실로 확정하지 말고, “정책 확인 필요”로 표시하거나 선택 가능한 설계 조건으로 제시하라. 이 요청에는 결제·수납·상담·학습관리 기능이 없으므로 별도 화면으로 확장하지 마라.

## 작업 규칙

1. 사용자 역할이 확정되지 않은 경우 다음처럼 분기하라.
   - 학원 운영자·교직원이 사용하는 화면이면 학생 목록, 수업 또는 날짜 기준 필터, 출결 상태 변경, 저장 결과를 우선 배치한다.
   - 학부모가 사용하는 화면이면 자녀 선택, 출결 현황, 최근 알림, 상세 안내를 우선 배치한다.
   - 역할이 한 화면에 섞이면 권한 혼동이 생길 수 있으므로 운영자용과 학부모용 흐름을 구분해 제시한다.

2. 출결 상태는 사용자가 제공한 목록이 없으므로 특정 상태를 확정하지 마라. 예시 상태가 필요하면 “출석·지각·결석 등”으로 표시하고, 실제 상태명과 정의는 `[입력 필요: 허용할 출결 상태와 각 상태의 정의]`를 채운 뒤 확정하도록 지시하라.

3. 학부모 알림은 발송 조건과 채널이 입력되지 않았으므로 자동 발송을 기정사실로 만들지 마라.
   - 알림 정책이 확정된 경우 해당 조건, 수신자, 채널, 발송 결과를 화면에 반영한다.
   - 정책이 미확정이면 알림 설정 화면 또는 정책 확인 상태를 두고, 어떤 조건을 확인해야 하는지 표시한다.
   - 알림 실패 시 재시도, 실패 원인, 운영자 확인 방법을 구분한다. 확인되지 않은 오류 원인이나 복구 시간을 지어내지 마라.

4. 브랜드 고정 묘사인 `brandAnchor`가 입력되면 모든 관련 화면 설명에서 같은 문구를 그대로 반복하라. 입력되지 않았으면 브랜드명·로고·고유 색상을 만들지 말고 중립적인 디자인 토큰으로 제시하라.

5. 모든 화면에 로딩·빈 상태·오류 상태를 포함하라.
   - 로딩: 어떤 정보가 아직 준비되지 않았는지 설명한다.
   - 빈 상태: 학생·출결 기록·알림이 없을 때 각각의 안내와 다음 행동을 제시한다.
   - 오류: 사용자가 다시 시도할 수 있는 조작과, 저장·알림 전송 여부를 확인하는 방법을 제시한다.
   - 저장되지 않은 출결 변경이 있으면 화면 이탈 전에 변경사항 손실 여부를 알리도록 한다.

6. 접근성은 한국형 웹 콘텐츠 접근성 지침(KWCAG)을 기준으로 검토하라. 키보드만으로 주요 기능을 수행할 수 있는지, 모든 아이콘 버튼에 스크린리더 라벨이 있는지, 상태를 색상만으로 구분하지 않는지 지정하라. 공공기관·교육·복지 대상 서비스라면 장애인차별금지법상 정보접근성 의무가 적용되는지 `[확인 필요]`로 남기고 확인을 요구하라.

7. 한글 조판을 명시하라. 긴 학원명·학생명·알림 문장이 어절 단위로 자연스럽게 줄바꿈되도록 `word-break`와 `line-break` 처리 방향을 적고, 본문 행간은 라틴 문자 중심 화면보다 넉넉하게 설정하라. 한국식 이름·주소·전화번호 입력이 필요한 경우 실제 입력 형식과 개인정보 처리 조건을 확인하도록 한다.

## 산출물 구조

다음 순서와 형식으로만 작성하라.

1. **화면 목록**
   - 화면 ID
   - 화면명
   - 사용자 역할
   - 화면 목적
   - 진입 조건과 다음 이동
   - 운영자용·학부모용 구분

2. **화면별 구성요소**
   각 화면마다 다음 항목을 표 또는 목록으로 작성하라.
   - 상단 영역과 현재 위치
   - 학생·수업·날짜·출결 정보
   - 주요 버튼과 버튼의 동작
   - 학부모 알림 관련 정보와 확인 조작
   - 권한에 따른 노출·수정 가능 범위
   - 입력 오류와 확인 메시지
   - 키보드 포커스 순서
   - 스크린리더 라벨

3. **상태별 동작**
   최소한 다음 상태를 화면별로 구분하라.
   - 정상 상태
   - 로딩 상태
   - 출결 기록이 없는 빈 상태
   - 알림이 없는 빈 상태
   - 저장 실패 상태
   - 학부모 알림 전송 실패 상태
   - 권한 부족 상태
   - 네트워크 또는 서버 오류 상태
   - 저장하지 않은 변경사항이 있는 상태

4. **디자인 토큰**
   - 색: 출결 상태를 색상만으로 구분하지 않도록 텍스트·아이콘·보조 설명을 함께 지정한다.
   - 타이포그래피: 한글 본문, 제목, 보조 문구의 계층과 행간을 지정한다.
   - 간격: 목록 행, 카드, 버튼, 폼 요소의 간격 체계를 제시한다.
   - 컴포넌트: 버튼, 상태 배지, 알림 카드, 학생 선택기, 오류 메시지의 공통 규칙을 제시한다.
   - 한글 조판: `word-break`·`line-break` 처리와 긴 텍스트 대응을 포함한다.
   - 접근성: 대비, 포커스 표시, 터치 또는 클릭 영역, 스크린리더 대응을 포함한다.

출력은 위 네 부분을 모두 포함한 마크다운 설계안으로 작성하라. 확정되지 않은 값은 `[입력 필요: 항목]` 또는 `[확인 필요]`로 표시하고, 수치·색상 코드·화면 수를 임의로 확정하지 마라. 단, 설계상 선택지가 필요하면 “안 A/안 B”로 나누고 각각의 적용 조건을 적어라.

## 문체 규칙

문체는 **hybrid(혼합형)**으로 작성하라. 화면 목록, 구성요소, 상태별 동작, 디자인 토큰은 표·번호·불릿 중심의 개조식으로 작성한다. 화면 목적, 사용자 흐름, 접근성 판단 이유, 정책 확인이 필요한 지점은 짧은 서술형 문단으로 작성한다. 레지스터는 제품 설계 문서에 맞는 명확하고 중립적인 한국어로 유지하라. “직관적인 사용자 경험”, “깔끔하고 세련된 디자인”처럼 기준이 불분명한 홍보성 표현 대신 화면 요소와 동작으로 설명하라. 출결과 알림을 한 문장에 과도하게 압축하지 말고, 운영자용 정보와 학부모용 정보를 섞어 모호하게 쓰지 마라.

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

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

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

## 제출 전 자기 감사

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

## 자기검증

1. 학원 출결 관리 앱의 운영자·교직원 흐름과 학부모 흐름이 화면 목록에서 구분되어 있는지 확인하라.
2. 출결 상태를 사용자 입력 없이 임의의 확정 목록으로 만들지 않았는지 확인하라.
3. 학부모 알림의 발송 조건, 채널, 자동화 여부를 사실처럼 추가하지 않고 `[입력 필요: 항목]` 또는 조건부 분기로 남겼는지 확인하라.
4. 운영자용 화면과 학부모용 화면의 권한 차이와 수정 가능 범위를 적었는지 확인하라.
5. 정상·로딩·출결 빈 상태·알림 빈 상태·저장 실패·알림 전송 실패·권한 부족·네트워크 오류를 모두 다뤘는지 확인하라.
6. 키보드 조작, 포커스 순서, 스크린리더 라벨, 색상 외 출결 상태 표현을 포함했는지 확인하라.
7. KWCAG 검토와, 해당되는 경우 장애인차별금지법상 정보접근성 의무 확인 항목을 넣었는지 확인하라.
8. 한글 줄바꿈을 위한 `word-break`·`line-break`와 넉넉한 본문 행간을 디자인 토큰에 포함했는지 확인하라.
9. `brandAnchor`가 없는데 학원명·로고·브랜드 색상을 지어내지 않았는지 확인하라.
10. 입력에 없던 결제·수납·상담·학습관리 기능을 산출물 범위에 추가하지 않았는지 확인하라.
11. 모든 확정되지 않은 플랫폼·사용자 권한·알림 채널·정책을 슬롯으로 남겼는지 확인하라.
12. 최종 결과가 화면 목록 / 화면별 구성요소 / 상태별 동작 / 디자인 토큰 순서와 마크다운 형식을 지키는지 확인하라.