사내 인트라넷 메인 화면을 설계해 줘 — 공지와 결재가 중심

## 역할과 목표

<지시>
너는 사내 인트라넷의 정보 구조와 사용자 경험을 설계하는 UI 설계자다. 공지와 결재가 중심인 사내 인트라넷 메인 화면의 설계안을 작성하라. 화면을 실제로 사용하는 임직원이 공지와 결재 업무를 빠르게 파악하고 다음 행동으로 이동할 수 있도록 구성하라.

산출물은 화면 목록, 화면별 구성요소, 상태별 동작, 디자인 토큰을 포함한 설계안이어야 한다. 완료 여부는 공지와 결재가 메인 화면에서 우선순위 있게 드러나고, 로딩·빈 상태·오류 상태·키보드 조작·스크린리더 라벨까지 정의되어 있는지로 판단하라. 확인되지 않은 조직 구조, 업무 절차, 브랜드 정보는 사실처럼 확정하지 말고 슬롯으로 표시하라.
</지시>

## 범위와 전제

<맥락>
사용자 입력에서 확인되는 사실은 다음과 같다.

- 대상은 사내 인트라넷의 메인 화면이다.
- 공지와 결재가 중심 기능이다.

다룰 범위는 메인 화면의 정보 우선순위, 공지 영역, 결재 영역, 보조 탐색 영역, 상태별 동작, 접근성, 한글 조판, 디자인 토큰이다. 공지 작성·수정 권한, 결재선 설정, 결재 문서의 상세 업무 규칙, 백엔드 API, 데이터베이스 구조, 실제 브랜드 시각 요소는 입력에 없으므로 확정하지 마라.

다음 값은 설계에 필요할 경우 슬롯으로 남겨라.

- [입력 필요: 사용 기기 및 반응형 지원 범위]
- [입력 필요: 브랜드 색상·로고·디자인 시스템]
- [입력 필요: 결재 기능의 범위와 사용자 권한 체계]
- [입력 필요: 공지의 분류·게시 기간·고정 규칙]
- [입력 필요: 임직원별 개인화 정보 제공 범위]

각 슬롯 뒤에 해당 값을 어떤 담당자나 자료로 확인해야 하는지 한 줄로 적어라. 특히 결재의 단계, 권한, 상태 이름은 사용자 입력에 없으므로 임의로 업무 규칙을 채우지 마라.
</맥락>

## 작업 규칙

<지시>
1. 먼저 판단 과정을 간단히 제시한 뒤 최종 설계안을 작성하라. 판단 과정에는 다음 순서를 사용하라.
   - 공지와 결재 중 사용자의 즉시 확인 가능성이 더 높은 정보를 우선 배치한다.
   - 각 정보의 긴급성, 미확인 여부, 처리 필요 여부를 분리해 판단한다.
   - 정보가 개인별로 달라지는지 확인하고, 달라진다면 권한과 개인화 범위를 슬롯으로 남긴다.
   - 화면 요소마다 사용자가 취할 다음 행동을 연결한다.

2. 메인 화면은 공지와 결재를 시각적으로 동등하게 나열하지 말고, 다음 조건에 따라 우선순위를 정하라.
   - 처리해야 할 결재가 있으면 결재의 미처리 항목을 주요 행동 영역으로 둔다.
   - 긴급하거나 고정된 공지가 확인되는 경우 공지의 중요 정보를 상단 또는 주요 영역에 둔다.
   - 긴급성·고정 여부를 판단할 입력이 없으면 해당 기준을 확정하지 말고 `[입력 필요: 공지 우선순위 기준]`으로 표시한다.
   - 개인별 결재 데이터가 없는 사용자는 실제 수치나 문서 건수를 만들지 말고 빈 상태 설계로 제시한다.

3. UI 상태를 반드시 정의하라.
   - 로딩 상태: 공지와 결재 영역에서 콘텐츠를 불러오는 동안의 자리표시자와 사용자가 확인할 안내를 제시한다.
   - 빈 상태: 새로운 공지가 없거나 처리할 결재가 없을 때의 문구와 다음 행동을 제시한다.
   - 오류 상태: 데이터 조회가 실패했을 때 오류 메시지, 재시도 동작, 대체 탐색 경로를 제시한다.
   - 권한 없음 상태: 사용자가 결재 또는 특정 공지를 볼 권한이 없을 때 정보를 노출하지 않는 방식과 안내를 제시한다.
   - 상태 문구에는 실제 원인을 알 수 없는 경우 구체적인 원인을 단정하지 마라.

4. 접근성을 설계에 포함하라.
   - 키보드만으로 주요 영역, 공지 목록, 결재 목록, 검색 또는 이동 기능을 사용할 수 있게 하라.
   - 포커스 순서와 포커스 표시 방식을 정의하라.
   - 아이콘만 있는 버튼에는 한국어 스크린리더 라벨을 지정하라.
   - 색상만으로 긴급성, 미확인, 처리 상태를 구분하지 말고 텍스트나 보조 기호를 함께 사용하라.
   - 한국형 웹 콘텐츠 접근성 지침(KWCAG)을 기준으로 점검하라.
   - 공공기관·교육·복지 대상 여부가 확인되면 장애인차별금지법상 정보접근성 의무 적용 여부를 별도로 확인 항목으로 남겨라. 해당 여부를 추측하지 마라.

5. 한글 조판을 명시하라. 본문은 어절 단위 줄바꿈을 우선 고려하고 `word-break`와 `line-break` 처리 방향을 제시하라. 본문 행간은 라틴 문자 중심의 기본값을 그대로 복사하지 말고 한글 가독성을 기준으로 정하되, 구체적인 수치를 입력받지 못했다면 `[입력 필요: 본문 행간 기준]`으로 남겨라.

6. 브랜드 고정 묘사나 브랜드 디자인 시스템이 입력되면 모든 화면에서 동일하게 유지하라. 입력되지 않았다면 색상, 로고, 서체를 특정 브랜드의 값처럼 쓰지 말고 디자인 토큰을 슬롯 또는 중립적 역할명으로 제시하라.
</지시>

## 산출물 구조

<출력형식>
다음 순서로 작성하라.

1. **설계 판단 요약**
   - 공지와 결재의 우선순위를 어떻게 정했는지 서술형으로 설명한다.
   - 입력에 없어 확정할 수 없는 판단은 슬롯과 확인 방법을 함께 적는다.

2. **화면 목록**
   - 메인 화면의 주요 영역을 번호 목록으로 제시한다.
   - 각 영역에 목적, 우선순위, 주요 사용자를 적는다.
   - 최소한 공지 영역과 결재 영역을 별도 항목으로 포함한다.

3. **화면별 구성요소**
   - 공지 영역에는 제목, 중요도 또는 상태 표시, 게시 시점, 목록 이동, 상세 이동에 필요한 요소를 정의한다.
   - 결재 영역에는 처리 필요 항목, 문서 상태, 문서 상세 이동, 전체 목록 이동에 필요한 요소를 정의한다.
   - 데이터 기준이 입력되지 않은 경우 실제 건수·날짜·상태값을 넣지 말고 표시 구조만 제안한다.
   - 구성요소마다 목적, 표시 내용, 사용자 행동, 접근성 라벨을 표로 정리한다.

4. **상태별 동작**
   - 공지와 결재 각각에 대해 정상·로딩·빈 상태·오류·권한 없음 상태를 표로 작성한다.
   - 각 상태에 화면 표시, 사용자 행동, 시스템 반응, 안내 문구를 포함한다.
   - 재시도나 이동 버튼의 목적이 분명하지 않으면 `[입력 필요: 오류 복구 경로]`로 남긴다.

5. **사용자 흐름**
   - 사용자가 메인 화면에 진입해 공지를 확인하는 흐름과 결재를 처리할 항목으로 이동하는 흐름을 각각 번호로 제시한다.
   - 로그인, 권한, 실제 결재 처리 완료 여부는 입력되지 않았으므로 화면 설계에서 확정하지 마라.

6. **디자인 토큰**
   - 색, 타이포그래피, 간격, 테두리·표면, 아이콘·상태 표시를 표로 제시한다.
   - 브랜드 색상과 서체가 없으면 특정 값을 사실처럼 쓰지 말고 역할 기반 토큰과 `[입력 필요: 브랜드 디자인 기준]`을 함께 둔다.
   - 한글 줄바꿈, 행간, 명도 대비, 포커스 표시를 별도 행으로 포함한다.

7. **접근성 및 구현 확인 항목**
   - KWCAG 기준의 키보드 조작, 스크린리더 라벨, 색상 의존 방지, 포커스 이동, 반응형 동작을 점검 목록으로 제시한다.
   - 반응형 범위와 실제 브라우저·기기 기준은 `[입력 필요: 테스트 환경]`으로 남긴다.

8. **확정이 필요한 입력**
   - 결과에 영향을 주는 미확정 항목을 최대 10개까지 표로 정리한다.
   - 열은 `항목 / 현재 상태 / 확인할 사람 또는 자료 / 반영 위치`로 한다.
   - 항목 이름과 작성 지시만 제시하고, 입력되지 않은 기관명·권한·색상·수치·업무 규칙을 대신 채우지 마라.
</출력형식>

## 문체 규칙

<지시>
hybrid 문체를 사용하라. 설계 판단 요약과 사용자 흐름 설명은 짧은 서술형 문단으로 작성하고, 화면 목록·구성요소·상태별 동작·디자인 토큰·확인 항목은 표와 번호 목록 중심의 개조식으로 작성하라. 전체 레지스터는 사내 업무 설계 문서에 맞는 명확하고 중립적인 존댓말로 통일하라. “한눈에”, “직관적으로”, “사용자 친화적”처럼 기준이 불명확한 홍보성 표현은 관찰 가능한 UI 동작이나 판단 기준으로 바꿔 쓰라.
</지시>

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

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

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

## 제출 전 자기 감사

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

## 자기검증

<지시>
제출 전에 다음 항목을 번호 순서대로 점검하고, 하나라도 충족하지 못하면 결과를 수정하라.

1. 메인 화면의 핵심이 사내 인트라넷이며, 공지와 결재가 별도 주요 영역으로 포함되었는지 확인하라.
2. 화면 목록·화면별 구성요소·상태별 동작·디자인 토큰이 모두 포함되었는지 확인하라.
3. 공지와 결재의 우선순위를 긴급성, 미확인 여부, 처리 필요 여부와 연결했는지 확인하라.
4. 실제 공지 건수, 결재 건수, 날짜, 조직명, 권한 체계를 입력 없이 추가하지 않았는지 확인하라.
5. `[입력 필요: 사용 기기 및 반응형 지원 범위]`, `[입력 필요: 브랜드 색상·로고·디자인 시스템]`, `[입력 필요: 결재 기능의 범위와 사용자 권한 체계]`를 임의 값으로 채우지 않았는지 확인하라.
6. 로딩·빈 상태·오류 상태·권한 없음 상태에서 화면 표시와 사용자 행동을 각각 정의했는지 확인하라.
7. 키보드 조작, 포커스 순서, 스크린리더 라벨, 색상 외 상태 전달을 포함했는지 확인하라.
8. KWCAG를 접근성 기준으로 언급하고, 공공기관·교육·복지 대상 여부와 장애인차별금지법상 적용 확인을 추측 없이 분리했는지 확인하라.
9. 한글 조판에 `word-break`, `line-break`, 행간 기준을 포함했는지 확인하라.
10. 설계 범위를 넘어 백엔드, 결재 업무 규칙, 실제 브랜드 시안을 확정하지 않았는지 확인하라.
11. 입력에 없던 사실 추가, 슬롯의 임의 채움, 요청 범위 이탈이 각각 발생하지 않았는지 점검하라.
12. hybrid 문체의 서술형 구간과 개조식 구간이 구분되고, 최종 문서의 모든 표와 목록이 실제 화면 설계 항목을 가리키는지 확인하라.
</지시>