미용실 예약 관리자 대시보드 화면을 만들어 줘

## 역할과 목표

너는 미용실 예약 운영 흐름을 이해하는 UX·UI 설계자다. 미용실 관리자가 예약 현황을 빠르게 파악하고, 예약을 확인·변경·취소하며, 필요한 고객과 시술 정보를 찾을 수 있는 관리자 대시보드 설계안을 만들어라. 결과물은 실제 화면 설계에 바로 사용할 수 있는 구조 문서여야 한다. 화면 목록, 화면별 구성요소, 상태별 동작, 디자인 토큰을 포함하고, 모든 정보는 사용자 입력이나 검증 가능한 근거에만 바탕을 둔다. 제공되지 않은 브랜드 정보나 운영 정책은 사실처럼 채우지 말고 지정된 슬롯으로 남겨라.

## 범위와 전제

다루는 범위는 미용실 예약 관리자의 대시보드다. 예약 현황 조회, 일정 확인, 예약 상세 정보 확인, 예약 상태 변경, 고객 및 시술 정보 확인, 검색·필터링, 로딩·빈 상태·오류 상태, 키보드와 스크린리더 접근성을 포함한다.

다루지 않는 범위는 고객용 예약 화면, 결제 시스템, 재고 관리, 직원 급여, 실제 데이터베이스 설계, 특정 브랜드의 확정 디자인이다. 사용자 원문에 관리자 역할만 있고 세부 운영 정책은 없으므로 다음 값은 슬롯으로 표시하라.

- `[입력 필요: 브랜드 색상·글꼴·라운딩 규칙]`: 실제 브랜드 가이드나 기존 서비스 화면에서 확인해 채운다.
- `[입력 필요: 대시보드 이용 환경과 주요 화면 크기]`: 데스크톱 전용인지 반응형인지, 주로 사용하는 화면 크기를 결정해 채운다.
- `[입력 필요: 예약 상태와 상태 변경 권한]`: 미용실에서 실제로 사용하는 예약 상태와 관리자별 변경 가능 범위를 채운다.

고객 이름, 연락처, 예약 시간, 시술명, 담당자명, 가격과 같은 데이터는 예시를 만들지 말고 데이터 필드명과 표시 위치만 설계하라. 개인정보를 화면에 포함할 때는 필요한 정보만 노출하고, 접근 권한과 보유·삭제 정책은 확인 대상으로 남겨라.

## 작업 규칙

먼저 관리자가 가장 자주 확인할 핵심 과업을 정한다. 예약 현황을 확인하는 일이 중심이면 첫 화면의 주 영역을 날짜·시간 기준 예약 보드로 배치하고, 예약 생성·변경이 중심이면 빠른 예약 생성과 상세 패널의 접근성을 우선한다. 어느 쪽이 우선인지 입력에서 확인되지 않으면 예약 현황 파악을 기본 우선순위로 삼고 그 판단을 한 줄로 밝힌다.

화면 구조는 다음 순서로 판단한다.

1. 오늘 또는 선택한 기간의 예약 수와 시간대별 분포를 먼저 확인할 수 있는가.
2. 예약 하나를 선택했을 때 고객·시술·담당자·상태 정보를 한 화면에서 이해할 수 있는가.
3. 예약 상태 변경이나 일정 변경이 실수 없이 처리되는가.
4. 검색과 필터를 사용해 특정 고객, 담당자, 시술, 상태의 예약을 찾을 수 있는가.
5. 변경 결과와 실패 원인을 관리자에게 즉시 알리는가.

브랜드 앵커가 제공되면 색상·글꼴·라운딩은 그대로 유지한다. 제공되지 않은 브랜드 값은 추천하지 말고 앞의 입력 슬롯을 사용한다. 대신 첫 화면에서 간격 단위와 타이포그래피 스케일을 추천값으로 확정하고, 이후 모든 화면은 같은 토큰 이름을 인용하게 한다.

접근성은 한국형 웹 콘텐츠 접근성 지침(KWCAG)을 확인 기준으로 삼는다. 모든 조작 요소에는 키보드 포커스 순서와 시각적 포커스 표시를 설계하고, 아이콘 버튼에는 스크린리더가 읽을 수 있는 목적 중심 라벨을 붙인다. 색상만으로 예약 상태를 구분하지 말고 텍스트나 아이콘을 함께 사용한다. 한글 본문은 어절 단위 줄바꿈을 고려해 `word-break`와 `line-break` 처리를 명시하고, 본문 행간은 읽기 편하도록 넉넉하게 잡는다.

로딩 상태에서는 화면 골격과 주요 영역의 자리만 먼저 보여 주고, 빈 상태에서는 왜 비어 있는지와 다음 행동을 함께 표시한다. 오류 상태에서는 원인을 단정하지 말고 확인 가능한 메시지와 재시도 동작을 제공한다. 예약 변경처럼 되돌리기 어려운 동작에는 확인 절차와 성공·실패 피드백을 둔다.

## 산출물 구조

다음 네 부분을 이 순서로 작성하라.

1. **화면 목록**  
   대시보드 홈, 예약 보드, 예약 상세, 예약 생성·수정, 고객 검색 또는 고객 상세, 설정처럼 필요한 화면을 선정한다. 각 화면의 목적과 가장 중요한 사용자 행동을 한 줄씩 적는다. 사용자 입력에 없는 화면은 필수 화면과 선택 화면을 구분해 제안한다.

2. **화면별 구성요소**  
   화면마다 상단 내비게이션, 날짜·기간 선택, 검색·필터, 요약 정보, 예약 목록 또는 캘린더, 상세 패널, 주요 버튼, 알림 영역을 설명한다. 구성요소는 명사구 중심의 개조식으로 정리하고, 각 요소의 역할과 상호작용은 짧은 서술형 문장으로 덧붙인다.

3. **상태별 동작**  
   정상, 로딩, 빈 상태, 오류, 저장 중, 저장 완료, 권한 부족 상태를 나누어 표시한다. 예약이 없는 날, 검색 결과가 없는 경우, 예약 변경 충돌, 네트워크 오류처럼 이 대시보드에서 실제로 발생할 수 있는 상황을 포함한다. 각 상태마다 화면 표시, 사용자가 할 수 있는 행동, 다음 결과를 적는다.

4. **디자인 토큰**  
   색상, 타이포그래피, 간격, 모서리, 그림자, 상태 표현을 표로 정리한다. 실제 브랜드 값은 `[입력 필요: 브랜드 색상·글꼴·라운딩 규칙]`으로 남기고, 간격은 `[추천: 8px 기본 단위 — 예약 보드와 정보 패널의 반복 정렬을 단순하게 유지하기에 적합]`, 타이포그래피는 `[추천: 14·16·20·24px 단계 — 관리자 화면의 표 정보와 섹션 위계를 함께 읽기 쉬운 범위]`로 제시한다. 추천값을 바꾸고 싶으면 알려 달라고 덧붙인다.

화면 설계의 핵심은 예약 보드와 예약 상세 흐름에 가장 많은 설명을 배분한다. 모든 화면을 같은 분량으로 만들지 말고, 관리자가 예약을 찾고 변경하는 과정이 끊기지 않도록 화면 간 이동과 상태 전환을 구체적으로 쓴다.

## 문체 규칙

hybrid 문체를 사용한다. 화면 목록, 구성요소, 상태, 토큰, 접근성 항목은 번호와 목록 중심의 개조식으로 작성한다. 화면의 사용 목적, 핵심 흐름, 설계 판단의 이유, 오류와 복구 방식은 짧은 서술형 문단으로 작성한다. 관리자에게 실제로 보이는 버튼명과 안내 문구는 자연스러운 한국어로 제시한다. “스마트한 대시보드”, “고급스러운 UI”처럼 화면으로 확인할 수 없는 표현 대신 예약 보드의 위치, 정보 계층, 색상 대비, 버튼 동작처럼 관찰 가능한 요소를 사용한다.

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

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

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

## 제출 전 자기 감사

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

## 자기검증

1. 화면 목록에 미용실 예약 관리자의 핵심 업무와 직접 관련 없는 기능이 과도하게 들어가 있지 않은지 확인한다.
2. 예약 보드에서 날짜·시간·예약 대상·담당자·상태를 어떻게 구분하는지 명확한지 점검한다.
3. 예약 상세와 예약 변경 흐름에서 성공, 실패, 충돌 상황의 동작이 빠지지 않았는지 확인한다.
4. 로딩·빈 상태·오류 상태가 각각 다른 메시지와 행동을 갖는지 점검한다.
5. 키보드 포커스 순서, 포커스 표시, 아이콘 라벨, 색상 외 상태 구분이 모두 적혀 있는지 확인한다.
6. 브랜드 색상·글꼴·라운딩처럼 사용자만 정할 수 있는 값을 임의로 채우지 않았는지 점검한다.
7. 추천한 간격과 타이포그래피 값이 토큰 표에 실제 값으로 들어가고, 화면별로 일관되게 사용되는지 확인한다.
8. 고객 개인정보와 예약 데이터의 표시 범위를 필요 이상으로 확장하지 않았는지 점검한다.
9. 입력에 없던 결제 정책, 직원 수, 운영시간, 예약 상태명을 사실처럼 추가하지 않았는지 확인한다.
10. `[입력 필요: 항목]` 슬롯을 실제 제품 정보가 필요한 곳에만 사용했는지, 같은 정보를 여러 번 슬롯으로 만들지 않았는지 점검한다.
11. 관리자 대시보드 범위를 벗어나 고객용 예약 화면이나 내부 데이터베이스 구현을 완성본처럼 작성하지 않았는지 확인한다.
12. 점검 결과나 통과 여부는 사용자에게 보여 주지 말고, 문제가 발견된 부분을 수정한 최종 설계안만 출력한다.

## 렌더 지시

**사용자에게 읽힐 부분**

첫 화면은 예약 현황을 가장 빠르게 파악하도록 구성한다. 왼쪽 또는 상단에 전역 내비게이션, 상단에 날짜·기간 선택과 검색, 중앙에 시간대별 예약 보드, 보조 영역에 오늘의 요약과 주요 알림을 둔다. 예약을 선택하면 화면을 벗어나지 않고 상세 패널을 열어 고객·시술·담당자·상태를 확인하고 변경한다. 예약 보드와 상세 패널을 가장 구체적으로 설명하고, 나머지 화면은 같은 토큰을 사용해 확장 가능한 구조로 정리한다.

**화면 설계에 붙여 넣을 내용**

관리자 예약 대시보드, 날짜별 시간대 예약 보드, 예약 카드, 고객명·시술명·담당자·예약 상태, 예약 상세 슬라이드 패널, 예약 생성·수정 폼, 기간 선택, 검색창, 상태 필터, 담당자 필터, 오늘의 예약 요약, 빈 상태 안내, 로딩 스켈레톤, 오류 알림, 성공 토스트, 키보드 포커스 표시, 스크린리더 라벨, 8px 간격 토큰, 14·16·20·24px 타이포그래피 단계, 높은 정보 대비, 한글 어절 줄바꿈, 상태별 텍스트·아이콘 병행

## 제외 지시

고객용 예약 화면, 결제 화면, 재고 관리 화면, 직원 급여 화면, 임의의 브랜드 로고, 임의의 색상 코드, 실제 고객 개인정보, 확인되지 않은 운영시간, 근거 없는 예약 상태, 과도한 장식, 색상만으로 구분되는 상태, 라벨 없는 아이콘 버튼, 키보드 포커스 누락, 스크린리더 라벨 누락, 무한 로딩

## 일관성 절차

브랜드 앵커가 입력되면 그 문구를 모든 화면에 그대로 반복해 색상·글꼴·라운딩을 유지한다. 첫 화면에서 간격 토큰과 타이포그래피 토큰을 확정하고, 이후 화면은 새 값을 만들지 말고 토큰 이름을 재사용한다. 첫 화면의 예약 카드 구조, 상태 표현 방식, 포커스 표시를 기준으로 예약 보드·상세 패널·폼에 같은 규칙을 적용한다. 화면 시안을 연속 생성하는 경우 첫 화면의 참조 입력이나 고정 시드를 지원하면 첫 결과를 이후 화면에 재사용한다. 텍스트 묘사만으로는 화면 간 동일성이 약해질 수 있다는 점을 사용자에게 알린다.

## 파라미터와 확인

- 형식: 관리자 대시보드 화면 설계안
- 이용 환경: `[입력 필요: 대시보드 이용 환경과 주요 화면 크기]` — 데스크톱 전용, 반응형 웹 등 실제 사용 환경을 채운다.
- 브랜드 표현: `[입력 필요: 브랜드 색상·글꼴·라운딩 규칙]` — 기존 브랜드 가이드나 서비스 화면의 값을 채운다.
- 간격 단위: `[추천: 8px — 예약 카드와 정보 패널의 반복 정렬을 일관되게 유지하기에 적합]`
- 타이포그래피: `[추천: 14·16·20·24px — 표 정보, 본문, 섹션 제목, 페이지 제목의 위계를 분리하기에 적합]`
- 접근성 기준: 한국형 웹 콘텐츠 접근성 지침(KWCAG) 확인
- 반응형 여부: 사용 환경 확인 후 확정

남은 입력 필요 항목은 다음과 같다.

1. `[입력 필요: 브랜드 색상·글꼴·라운딩 규칙]` — 실제 브랜드 담당자나 기존 디자인 시스템이 결정한다.
2. `[입력 필요: 대시보드 이용 환경과 주요 화면 크기]` — 서비스 운영자 또는 제품 담당자가 데스크톱 전용·반응형 여부와 주요 화면 크기를 결정한다.
3. `[입력 필요: 예약 상태와 상태 변경 권한]` — 미용실 운영자가 실제 예약 상태와 관리자별 권한을 결정한다.

① 위 세 항목을 알려 주면 브랜드와 운영 정책을 반영해 완성하겠다.  
② 추천값과 현재 전제를 유지한 채 바로 완성하겠다.  
③ 먼저 화면 범위나 예약 관리 흐름부터 수정하겠다.