1. 첫 프로젝트 만들기

이제 직접 만들어 볼 차례입니다. claude.ai/design에 접속해 새 프로젝트를 만듭니다. 앞 절에서 디자인 시스템을 추가했다면, 프로젝트를 열 때 그 색·폰트가 이미 입혀진 채로 시작됩니다. 아직 아무것도 추가하지 않았다면 깨끗한 상태에서 시작하니 걱정하지 마세요. (디자인 시스템과 브랜드를 더 정교하게 다루는 법은 5장에서 다룹니다.)

2. 느낌으로 말 걸기 — 첫 프롬프트

빈 캔버스를 앞에 두고, 대화 패널에 다음과 같이 입력해 봅시다.

반려동물 산책 예약 앱의 홈 화면을 디자인해줘.
- 상단에 인사말과 사용자 이름
- 가까운 산책 도우미 카드 목록
- 하단에 "산책 예약하기" 큰 버튼
밝고 친근한 느낌으로, 둥근 모서리를 많이 써줘.

잠시 후, 캔버스에 실제 모바일 앱 화면이 그려집니다. 단순한 그림이 아니라 스크롤되고, 버튼에 반응하는 화면입니다. 이것이 바로 2장에서 말한 바이브 디자인 — 픽셀 값을 일일이 정하는 대신, 의도와 분위기를 말로 전달하는 방식입니다.

3. 보면서 고치기 — 두 가지 방법

디자인은 한 번에 완성되지 않습니다. Claude Design의 진짜 힘은 보면서 빠르게 고치는 데 있습니다. 수정에는 두 가지 길이 있습니다.

3.1 대화 패널 — 넓은 변경

화면 전체에 영향을 주는 변경은 대화로 지시합니다.

전체적으로 조금 더 차분한 느낌으로 바꿔줘.
포인트 색을 초록색에서 부드러운 보라색 계열로.

Claude는 결과물을 통째로 새로 만들지 않고, 요청한 부분을 반영해 캔버스를 갱신합니다. 바뀐 색이 화면 전체에 일관되게 적용됩니다.

3.2 인라인 수정 — 콕 집은 변경

특정 요소 하나만 손보고 싶다면, 캔버스에서 그 요소를 클릭해 직접 수정합니다.

(예약 버튼을 클릭한 뒤)
이 버튼의 글자를 "지금 예약하기"로, 크기를 더 크게.

⚠️ 리서치 프리뷰 단계에서는 인라인 코멘트가 처리되기 전에 사라지는 경우가 있습니다. 그럴 때는 같은 내용을 대화 패널에 그대로 붙여넣어 지시하면 됩니다.

4. 한 번에 하나씩, 그러나 묶어서

수정 지시에는 요령이 있습니다.

• 너무 많이 한꺼번에: "전체적으로 다 예쁘게 바꿔줘" → 엉뚱한 곳까지 바뀌어 의도가 흐려집니다.
• 너무 잘게: 한 번에 한 글자씩 → 비효율적입니다.

연관된 변경 2~4개를 묶어서 지시하는 것이 통제와 속도의 균형점입니다.

좋은 묶음 예시:
- 카드 사이 간격을 조금 넓혀줘
- 도우미 이름을 더 굵게
- 카드마다 별점(평점)을 작게 추가해줘

5. 결과가 마음에 안 들 때

수정을 거듭하다 처음보다 나빠질 때가 있습니다. 두 가지 전략을 기억하세요.

1. 되돌리기: "방금 변경 전으로 돌려줘. 대신 ~만 바꿔줘."
2. 기준점 다시 잡기: "처음의 밝고 친근한 버전이 좋았어. 그걸 기준으로 색만 바꿔줘."

대화가 너무 길고 복잡해졌다면, 핵심 요구사항을 정리해 새 프로젝트에서 다시 시작하는 것이 더 빠를 때도 많습니다.

6. 직접 해보기

아래 중 하나를 골라, 첫 프롬프트 → 최소 세 번의 수정까지 직접 해보세요.

1. 카페 모바일 주문 앱의 메뉴 화면
2. 1인 개발자의 포트폴리오 랜딩 페이지
3. 사내 비품을 신청하는 간단한 신청 폼

수정은 이번 장에서 배운 대로 대화(넓은 변경) 와 인라인 수정(콕 집은 변경) 을 번갈아 써보세요. 그리고 한 번쯤은 일부러 "되돌리기"도 시도해, 어떻게 작동하는지 확인해 보세요.

7. 정리하며

• 첫 디자인은 느낌(Vibe)을 담은 프롬프트 한마디에서 시작된다.
• 수정은 대화(넓게) 와 인라인(콕 집어) 두 갈래로 나뉜다.
• 변경은 2~4개씩 묶어서, 산으로 가면 되돌리거나 다시 시작한다.

다음 절에서는 글에 이미지·레퍼런스·코드 같은 맥락을 더해, 의도를 더 정확히 전달하는 법을 다룹니다.