# Impeccable로 게스트하우스 사이트를 출시하기 위한 디자인 어휘 에이전트 워크플로우 ## 개요 Impeccable은 디자인 어휘를 구조화된 에이전트 워크플로우로 전환하여, 게스트하우스 웹사이트가 일관된 시각 언어를 갖추고 출시되도록 돕습니다. 이 워크플로우는 브랜드 발견부터 최종 배포까지 각 단계를 명확한 어휘 결정으로 분해합니다. ## 1단계: 브랜드 어휘 정의 게스트하우스의 정체성을 디자인 어휘로 번역하는 단계입니다. Impeccable 에이전트에게 숙소의 성격(아늑함, 미니멀, 지중해풍 등)을 입력하면 톤, 색상 팔레트, 타이포그래피 계열에 대한 어휘 제안을 받습니다. 이 단계에서 "따뜻함", "환대", "로컬리티" 같은 추상적 형용사를 구체적인 디자인 토큰으로 매핑합니다. ## 2단계: 컴포넌트 어휘 구축 정의된 브랜드 어휘를 재사용 가능한 UI 컴포넌트로 변환합니다. 객실 카드, 예약 버튼, 갤러리, 위치 안내 등 게스트하우스에 필요한 핵심 컴포넌트를 식별하고, 각 컴포넌트의 상태(hover, focus, disabled)와 변형을 어휘로 문서화합니다. Impeccable은 이 어휘를 일관된 명명 규칙으로 정리합니다. ## 3단계: 레이아웃 및 페이지 어휘 홈, 객실 목록, 객실 상세, 예약, 문의 등 각 페이지의 레이아웃 패턴을 어휘화합니다. 그리드 시스템, 여백 스케일, 반응형 브레이크포인트를 정의하고, 페이지 간 이동 흐름을 어휘로 표현합니다. 에이전트는 이 어휘를 기반으로 와이어프레임 수준의 구조를 제안합니다. ## 4단계: 콘텐츠-디자인 정렬 게스트하우스의 실제 콘텐츠(사진, 설명, 후기)가 디자인 어휘와 어떻게 상호작용하는지 검증합니다. 이미지 비율, 텍스트 길이, 다국어 지원 여부를 어휘에 반영하고, 콘텐츠가 바뀌어도 레이아웃이 무너지지 않도록 유연성을 확보합니다. ## 5단계: 접근성 및 품질 게이트 Impeccable 에이전트가 정의된 어휘를 기준으로 대비율, 터치 타깃 크기, 키보드 탐색 등을 검토합니다. 어휘에서 벗어난 예외는 명시적으로 기록하여 기술 부채를 방지합니다. ## 6단계: 출시 및 어휘 유지보수 배포 후에도 어휘는 살아있는 문서로 유지됩니다. 새로운 기능이나 계절 프로모션이 추가될 때 Impeccable 워크플로우를 통해 기존 어휘와의 일관성을 확인하고, 필요 시 어휘를 확장합니다. ## 핵심 원칙 - **어휘 우선**: 코드보다 어휘를 먼저 합의합니다. - **에이전트 검증**: 각 단계에서 Impeccable이 어휘 일관성을 자동 점검합니다. - **점진적 확장**: 출시에 필요한 최소 어휘로 시작하고 피드백으로 확장합니다.

What they did

프로젝트 루트에서 `npx impeccable install`을 실행하고 코딩 도구를 다시 로드한 뒤 `/impeccable init`을 실행해 에이전트가 코드베이스를 읽고 대상 사용자, 목표, 제약 조건을 담은 PRODUCT.md를 작성하도록 했습니다. 이어서 `/impeccable document`로 기존 비주얼 시스템을 DESIGN.md에 기록해 이후 변경 사항이 브랜드에 맞게 유지되도록 했습니다. 컨텍스트가 마련된 상태에서 전체 페이지 대신 단일 대상에 좁은 명령을 지정했습니다. 점수 기반 UX 리뷰를 위해 `/impeccable critique the pricing cards`, 지나치게 안전한 섹션을 강화하기 위해 `/impeccable bolder the pricing cards`, 과하게 강한 히어로를 낮추기 위해 `/impeccable quieter the landing page`, 마지막 마무리로 `/impeccable polish settings`를 사용했습니다. `audit`로 접근성, 성능, 테마, 반응형 동작을 점검하고 발견 사항을 P0부터 P3까지 순위를 매겼으며, `harden`을 checkout에 적용해 오류, i18n, 오버플로, 엣지 케이스를 다뤘습니다. 또한 로컬 Vite dev 서버를 대상으로 라이브 모드를 시도해 브라우저 오버레이에서 요소를 선택하고 소스에 다시 기록되는 변형을 순환했습니다.

How it went

결과는 같은 모델이 아무 안내 없이 만들었을 때의 기본 크림색 세리프 템플릿 대신, 하나의 강렬한 이미지를 중심으로 구성된 페이지였습니다. slop detector의 62개 결정론적 규칙은 출시 전에 일반적인 단서들과 좁은 패딩, 건너뛴 헤딩 같은 품질 문제를 표시했습니다. Critique와 audit은 순위가 매겨진 수정 목록을 제공했고, 팀은 P0 항목부터 먼저 처리했습니다. 기존 인터페이스에서는 완성도 수준이 높았고, 새 페이지 생성에는 더 많은 유도가 필요했습니다.

Worth knowing

Impeccable은 이미 존재하는 인터페이스에서 가장 강력합니다. 새 페이지를 만드는 것은 더 어려운 모드이며 더 좁은 타깃이 필요합니다. 라이브 모드는 로컬 체크아웃만 편집하며, 배포된 사이트에 주입하거나 프로덕션 CSP를 약화시켜 사용해서는 안 됩니다. 카피 편집을 적용하면 package.json 스크립트가 실행되므로, 해당 스크립트가 무엇을 하는지 검토하세요. Codex에서는 슬래시 명령이 아니라 `$impeccable` 또는 `/skills`로 호출하며, `craft`는 더 이상 사용되지 않는(deprecated) 별칭입니다.

Wiring

프로젝트 루트에서 `npx impeccable install`로 설치하고, 코딩 도구를 다시 로드한 뒤, 프로젝트마다 한 번씩 `/impeccable init`을 실행해 PRODUCT.md를 생성하세요. 이후의 모든 명령은 이 파일을 읽습니다. `/impeccable document`를 실행하면 기존 비주얼 시스템을 바탕으로 DESIGN.md를 작성합니다. 명령은 `/impeccable <command> <target>` 형식이며, 예를 들어 `critique the onboarding flow` 또는 `polish settings`처럼 사용합니다. 자주 쓰는 명령은 `/impeccable pin audit`으로 고정해 `/audit`로 쓸 수 있습니다. slop detector는 LLM이나 API 키 없이 62개의 결정론적 규칙으로 동작합니다. 라이브 모드는 실행 중인 dev 서버(Vite, Next, SvelteKit, Astro, Nuxt, 일반 HTML)에 오버레이를 붙이고, 변형을 핫스왑하며, 수락된 변경을 소스에 다시 기록합니다. 로컬 체크아웃이 필요합니다. Codex에서는 `$impeccable` 또는 `/skills`를 사용하세요.

Try it yourself

이 저장소에 Impeccable을 설치하려면 `npx impeccable install`을 실행한 뒤, `/impeccable init`으로 코드에서 PRODUCT.md를 작성하고 추론할 수 없는 부분만 질문드리겠습니다. 이어서 `/impeccable document`로 현재 비주얼 시스템을 DESIGN.md에 기록합니다. 그다음 pricing 카드와 onboarding 플로우를 각각 비평하고 발견 사항을 P0~P3로 분류한 뒤 P0와 P1 항목만 수정하겠습니다. 마지막으로 settings 페이지에는 `/impeccable polish`를, checkout에는 `/impeccable harden`을 적용해 에러, i18n, overflow, 엣지 케이스를 다룹니다. 배포된 사이트는 건드리지 않고 CSP도 변경하지 않겠습니다.