반복 편집 · 채팅 · 댓글 · 슬라이더
Claude Design은 네 가지 편집 방식을 조합한다. 전역 변경은 채팅, 특정 요소는 인라인 댓글, 연속 값은 슬라이더, 즉시 수정은 직접 편집이다. 업데이트: 2026-04-23
핵심 요약
| 구분 | 내용 |
|---|---|
| 📖 정의 | 생성된 디자인을 수정하는 네 가지 상호보완적 방식 |
| 💡 핵심 | 변경 범위와 값의 성격에 따라 편집 방식을 다르게 선택 |
| 🎯 대상 | 디자인 초안을 반복적으로 다듬는 모든 사용자 |
| ⚠️ 주의 | 인라인 댓글의 reasoning이 핸드오프 번들 “구현 노트”로 전달된다 — 의도를 명확히 작성 |
목차
1. 편집 방식 선택 기준
flowchart TD A["수정하고 싶은 것이 무엇인가?"] --> B{"범위는?"} B -->|전역 · 구조 · 스타일| C["채팅 편집"] B -->|특정 컴포넌트·요소| D["인라인 댓글"] B -->|연속 값<br/>여백 · 색상 · 크기| E["커스텀 슬라이더"] B -->|텍스트·배경색 단일 값| F["직접 편집"]
| 방식 | 언제 쓰는가 | 결과 |
|---|---|---|
| 채팅 | 레이아웃 변경, 대안 탐색, 인터랙션 추가 | 전체 재생성 또는 범위 내 재생성 |
| 인라인 댓글 | 특정 컴포넌트만 정밀 수정 | 해당 요소만 업데이트 |
| 슬라이더 | 값의 민감도가 중요한 연속 속성 | 모델 호출 없이 즉시 반영 |
| 직접 편집 | 텍스트 문구·단일 색상 교체 | 즉시 덮어쓰기 |
2. 채팅 기반 편집
잘 먹히는 명령 패턴:
| 유형 | 예시 |
|---|---|
| 전체 적용 | ”이 변경을 전체 디자인에 일괄 적용해줘” |
| 레이아웃 재구성 | ”네비게이션을 왼쪽 사이드바로 옮겨줘” |
| 대안 탐색 | ”이 카드 컴포넌트를 그리드형과 리스트형 두 가지로 만들어줘” |
| 인터랙션 정의 | ”스크롤 시 헤더가 고정되고 로고가 축소되는 애니메이션 추가” |
| 상태 요청 | ”빈 상태·에러·로딩 상태를 추가로 보여줘” |
팁
- 변경 지시에 이유를 같이 적으면 AI가 의도를 유지한 채 다른 수정도 제안한다
- “유지할 것”을 명시하면 Claude가 보존한다 (예: “헤더 레이아웃은 유지하면서 색상만 블루 계열로”)
3. 인라인 댓글
캔버스 위 특정 컴포넌트나 요소를 직접 클릭하면 댓글 입력창이 열린다.
flowchart TD A["캔버스에서 요소 클릭"] --> B["댓글 입력창 표시"] B --> C["피드백 + 의도 작성"] C --> D["해당 요소만 정밀 수정"] C --> E["reasoning → 핸드오프 번들 '구현 노트'"]
- 입력한 피드백은 해당 요소만 수정하는 지시로 전달
- 댓글의 디자인 결정 이유(reasoning)가 핸드오프 번들의 구현 노트로 자동 포함되어 Claude Code가 의도를 반영해 코드화한다
- 따라서 “왜 이렇게 수정하는지”를 함께 쓰는 것이 권장된다 (예: “접근성 대비 부족 — 텍스트는 순백이 아니라 F5F5F5로”)
4. 커스텀 슬라이더
Claude가 자동으로 슬라이더 UI를 생성하는 조건은 연속적인 값 조정이 의미 있는 속성이다. 이산 값(텍스트·아이콘 선택)에는 생성되지 않는다.
| 생성 예시 | 효과 |
|---|---|
| 카드 그림자 깊이 슬라이더 | 0 → 강한 그림자까지 실시간 조정 |
| 브랜드 색상 채도 슬라이더 | 파스텔 ↔ 비비드 |
| 섹션 간 여백 슬라이더 | 조밀 ↔ 여유로운 레이아웃 |
| 타이포그래피 크기 슬라이더 | 본문 14px ↔ 20px |
핵심 장점: 슬라이더는 모델 호출 없이 즉시 값을 반영한다. 여러 번 재생성 없이 최적 값을 찾기에 적합하다.
5. 직접 편집
- 캔버스에서 텍스트 문구와 배경색 등 일부 요소를 직접 클릭·드래그로 수정 가능
- 전체 재생성 없이 특정 값만 덮어쓰는 하이브리드 방식
- 섬세한 복사 편집(마이크로카피, 데모 데이터 교체 등)에 적합
6. 조합 워크플로우
실전에서는 네 방식을 섞어 쓴다. 다음은 일반적 순서의 예시다.
flowchart TD A["① 채팅으로 초안 생성<br/>범위·플로우·상태 포함"] --> B["② 슬라이더로<br/>간격·색상 채도 조정"] B --> C["③ 인라인 댓글로<br/>개별 컴포넌트 수정<br/>(reasoning 포함)"] C --> D["④ 직접 편집으로<br/>카피·데모 데이터 교체"] D --> E["⑤ 채팅으로<br/>빈/에러 상태 추가 요청"] E --> F["핸드오프 · 내보내기"]
| 단계 | 핵심 가이드 |
|---|---|
| 채팅 | 첫 생성과 대규모 변경 |
| 슬라이더 | 정량값 미세 조정 |
| 인라인 댓글 | 개별 요소 + 의도 기록 |
| 직접 편집 | 텍스트·색상 마무리 |