Claude, 지난번처럼 해줘: 흔들리지 않는 디자인·프론트엔드·스킬
1. Claude가 스스로 확인할 수 있는 구조
일관된 결과는 모델의 성향보다 명확한 완료 기준과 검증 루프에서 나옵니다.
- 완료 기준
- 테스트, 빌드, 스크린샷 비교처럼 Claude가 직접 실행할 수 있는 수용 기준을 제공합니다.
- 막연한 개선 요청보다 원본과 차이를 찾고 수정하라는 작업이 안정적으로 반복됩니다.
- 검증 강도
- 간단한 작업은 프롬프트에 기준을 넣고, 중요한 작업은 `/goal`이나 Stop hook으로 종료 조건을 고정합니다.
- 별도의 리뷰어 서브에이전트가 새로운 컨텍스트에서 결과만 검토하게 할 수도 있습니다.
2. 규칙을 알맞은 메모리 계층에 배치하기
드리프트는 규칙이 없어서보다 잘못된 위치에 있거나 너무 많은 컨텍스트에 묻힐 때 자주 발생합니다.
- 역할에 따른 분리
- 모든 작업에 필요한 핵심 규칙만 짧게 정리해 `CLAUDE.md`에 둡니다.
- 가끔 필요한 도메인 지식과 긴 절차는 스킬로 분리합니다.
- 반드시 실행돼야 하는 린트와 검증은 설명이 아니라 Hooks로 고정합니다.
- 컨텍스트 관리
- 관련 없는 작업 사이에는 `/clear`로 이전 맥락을 정리합니다.
- 조사와 리뷰는 별도 서브에이전트에 맡겨 구현 컨텍스트가 불필요하게 길어지지 않게 합니다.
3. Claude Design과 Figma MCP를 구현까지 연결하기
디자인 시스템을 기준점으로 만들고 Figma 파일을 정돈해야 재사용 가능한 코드가 나옵니다.
- Figma 준비
- 반복 요소는 컴포넌트로 만들고 Code Connect를 통해 실제 코드 컴포넌트와 연결합니다.
- 색상, 간격, 타이포그래피는 변수와 토큰으로 관리합니다.
- 의미 있는 레이어 이름, Auto Layout, 주석을 사용해 화면에 보이지 않는 구조와 동작까지 전달합니다.
- 프론트엔드 루프
- Claude Code가 코드 구조를 탐색하고 계획을 작성한 뒤 구현하도록 작업을 나눕니다.
- 브라우저에서 스크린샷을 찍고 원본 디자인과 비교해 차이를 수정하는 과정을 반복합니다.
4. 매번 같은 방식으로 작동하는 스킬
스킬은 새로운 판단을 대신하기보다 이미 정한 작업 기준에서 에이전트가 벗어나지 않게 합니다.
- 트리거와 구조
- `description`에 스킬이 하는 일과 사용 시점을 함께 적어 정확히 호출되게 합니다.
- 본문은 짧게 유지하고 긴 참고 자료와 실행 스크립트는 별도 파일로 나눕니다.
- 결과가 쉽게 망가지는 단계에는 정확한 값, 명령과 낮은 자유도를 적용합니다.
- 검증 설계
- 체크리스트와 검증 → 수정 → 재검증 루프를 스킬 안에 포함합니다.
- 반복 작업에는 매번 코드를 생성하게 하기보다 검증된 스크립트를 제공합니다.
- 새로운 세션에서 스킬 적용 전후를 비교해 실제로 결과가 안정되는지 확인합니다.
