에이전트 드리븐 스킨 작업

# 에이전트 드리븐 스킨 작업 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 카탈로그 - [스킨 공유하기](/guides/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. 브랜딩 , 색상, 로고, 파비콘 - 📋 **워크숍**: W1 M1에서 다룸 - 🎯 **직원 투어**: 관리자 패널에서 **디자인** 투어를 시작하세요

에이전트 드리븐 스킨 작업

이 페이지에서 확인할 내용