# 에이전트 드리븐 스킨 작업
Clinic-OS의 스킨은 단순 색상 테마가 아니라, **퍼블릭 페이지 전체의 톤, 상세 템플릿, Hero override, 하위 컴포넌트 레시피**를 묶는 작업 단위입니다.
즉, 스킨 작업은 "버튼 색 바꾸기"가 아니라 아래를 함께 다룹니다.
- 홈 랜딩의 분위기
- 프로그램 상세와 후기/토픽/FAQ/공지 상세 템플릿
- 카드/패널/배너 같은 하위 컴포넌트 표면
- 필요하면 Hero/MainHero 레이아웃 자체
---
## 언제 스킨 경로를 쓰나요?
다음 중 하나면 스킨 작업으로 보는 편이 맞습니다.
- 사이트 전체 분위기를 바꾸고 싶다
- 히어로와 카드 스타일을 한 묶음으로 바꾸고 싶다
- 상세 페이지 템플릿까지 일관되게 바꾸고 싶다
- 한 번 만든 스타일을 다른 설치본과 공유하고 싶다
반대로 문구 몇 줄만 바꾸는 수준이면 관리자가 먼저고, 한 페이지만 병원 전용으로 크게 다르면 `_local` override가 마지막 수단입니다.
---
## 에이전트에게 이렇게 요청하세요
```text
우리 한의원 사이트를 더 에디토리얼한 톤으로 바꾸고 싶어.
스킨 팩 경로로 진행하고, 가능하면 코어 프리셋을 기반으로 파생 스킨을 만들어줘.
/admin/design 미리보기와 실제 퍼블릭 페이지까지 같이 확인해줘.
```
또는:
```text
지금 forestTherapy를 기반으로 더 차분한 버전을 만들고 싶어.
skin:create -> skin:check -> preview -> build 순서로 진행해줘.
```
---
## 실제 작업 순서
1. 현재 활성 스킨과 관리자 디자인 설정을 확인합니다.
2. 코어 프리셋 중 가까운 기반 스킨을 고릅니다.
3. `skin:create` 로 로컬 스킨 뼈대를 만듭니다.
4. `manifest.json` 에서 `defaults`, `tokens`, `sectionStyles`, `componentRecipes`, `pageTemplates` 를 먼저 정리합니다.
5. 부족하면 `skin.css`, 마지막으로 `sections/Hero.astro`, `sections/MainHero.astro` override를 추가합니다.
6. `skin:check` 로 manifest/override/extends/cycle 을 검증합니다.
7. `/admin/design` 과 `/demo/design-system` 에서 미리보기를 비교합니다.
8. 실제 퍼블릭 페이지를 확인합니다.
---
## 핵심 명령
```bash
npm run skin:create -- --id editorial-clinic --extends clinicLight --dry-run --json
npm run skin:create -- --id editorial-clinic --extends clinicLight
npm run skin:check -- --id editorial-clinic --json
```
검증 후에는:
```bash
npm run build
```
---
## 관리자 미리보기에서 꼭 볼 것
`/admin/design` 에서는 한 surface만 보지 말고 아래를 같이 비교해야 합니다.
- 전체 페이지
- Hero Surface
- Card Surface
- Info Surface
- Topic Detail
- FAQ Detail
- Notice Detail
즉, 홈이 예쁘다고 끝이 아니라 상세 페이지 템플릿까지 같이 봐야 합니다.
---
## Pencil MCP를 같이 쓰는 방법
Pencil이 연결된 환경이라면 스킨 작업 전에 분위기 방향을 잡는 데 유용합니다.
추천 순서:
1. Pencil에서 원하는 무드의 스타일 가이드나 preview frame을 만듭니다.
2. 그 결과를 코드에서 `tokens -> sectionStyles -> componentRecipes -> pageTemplates` 로 번역합니다.
3. Hero/MainHero처럼 구조 차이가 큰 경우만 section override로 올립니다.
4. `/admin/design` 과 `/demo/design-system?skin=<skinId>` 에서 비교합니다.
중요한 점은 Pencil 시안을 바로 페이지 override로 옮기지 않고, 먼저 **skin pack 계약 안에 흡수**하는 것입니다.
---
## HQ와 로컬 관리자에서 무엇을 보나요?
- HQ:
- [스킨 라이브러리](/skins): 코어 + HQ curated + 승인된 community 카탈로그
- [스킨 공유하기](/guide#skin-sharing): submit/bundle/install 공유 흐름
- 로컬 관리자:
- `/admin/design`: 선택과 preview
- `/admin/skins/store`: HQ curated/community 스킨 설치/제거
- 에이전트 터미널:
- `npm run skin:install -- --id linenBreeze`
- `npm run skin:remove -- --id linenBreeze`
- `npm run skin:submit -- --id editorial-clinic --source local`
현재 HQ는 스킨을 커뮤니티 제출/심사/승인 흐름까지 다룰 수 있습니다. 지금 단계의 기준은 **로컬 제작 + HQ curated/community install + HQ submit + zip bundle 공유** 입니다.
---
## 관련 콘텐츠
- 📹 **관련 영상**: 커리큘럼 1-6. 브랜딩 — 색상, 로고, 파비콘
- 📋 **커리큘럼**: Stage 1 M1에서 다룸
- 🎯 **직원 투어**: 관리자 패널에서 **디자인** 투어를 시작하세요