시안을 세 개씩 뽑아 주는 /design 미리보기 가이드
하루 6시간 만에AI 기초부터 나만의
서비스까지 완성
역할: 이 프로젝트의 화면 하나를 여러 안으로 제안하는 담당 맥락: 지금 화면을 고치고 싶은데, 어떤 방향이 나은지 정하지 못한 상태입니다. 바로 코드가 바뀌면 비교할 수가 없어서 곤란합니다. 작업: 1. 먼저 이 화면을 쓰는 사람이 실제로 가장 많이 하는 동작이 무엇인지 코드와 데이터에서 근거를 찾아 알려 주세요. 추측이면 추측이라고 적어 주세요. 2. 그 근거를 바탕으로 서로 다른 방향의 안을 세 개 제안해 주세요. 각 안마다 무엇을 우선했는지 한 줄로 붙여 주세요. 3. 제가 하나를 고를 때까지 코드를 고치지 마세요. 4. 고른 뒤에는 기존 컴포넌트와 색·글꼴 규칙을 그대로 쓰면서 반영해 주세요. 제약: 새 디자인 시스템을 만들지 마세요. 이미 있는 것을 따르세요. 근거 없이 "사용자가 이걸 좋아합니다" 라고 쓰지 마세요. 출력: ①찾은 근거 ②세 가지 안과 각각의 우선순위 ③제가 골라야 할 지점 검증: 세 안이 서로 실제로 달라야 합니다. 색만 바뀐 같은 안이 두 개면 다시 만들어 주세요.
이런 분을 위한 글입니다
- 화면을 고쳐 달라고 하면 바로 코드가 바뀌어 되돌리기 번거로운 분
- 방향을 정하기 전에 여러 안을 놓고 보고 싶은 분
- 디자인 도구를 따로 쓰지 않고 코드 안에서 끝내고 싶은 분
무엇이 바뀌었나
클로드 코드에 화면 디자인을 다루는 명령이 미리보기로 들어왔습니다. 흐름은 세 단계입니다.
말로 설명한다 → 클로드가 초안을 여러 개 낸다 → 내가 고르고 고친다.
핵심은 가운데입니다. 지금까지는 요청 하나에 결과 하나였습니다. 마음에 안 들면 다시 요청해야 했고, 그러면 앞의 것은 사라졌습니다. 여러 안을 나란히 놓고 고르는 단계가 생긴 것이 달라진 부분입니다.
공개된 시연 영상을 프레임 단위로 보면, 화면을 다시 그려 달라는 요청 하나에 서로 다른 방향의 안이 세 개 나옵니다. 각 안에 붙은 이름이 방향을 그대로 드러냅니다 — 자주 쓰는 것을 앞으로 빼는 안, 상황에 따라 배치가 달라지는 안, 최소한만 남기는 안입니다.
코드베이스와 사용 기록을 같이 읽습니다
시연에서 눈에 띄는 대목이 하나 있습니다. 클로드가 해당 화면의 소스 파일을 열어 보는 동시에, 그 화면에서 사람들이 실제로 무엇을 많이 눌렀는지 지표를 조회합니다.
그래서 나오는 안이 "예쁜 배치" 가 아니라 "많이 쓰는 것을 앞에 둔 배치" 가 됩니다. 디자인 도구가 못 하던 부분입니다. 디자인 도구는 코드도 사용 기록도 모릅니다.
이 점이 실무에서 의미하는 바는 분명합니다. 근거가 될 자료가 저장소 안에 있을수록 결과가 좋아집니다. 지표를 붙여 두지 않았다면 그 부분은 추측이 됩니다.
시작하기 전에 — 사용량이 따로 잡힙니다
이 기능을 다루기 전에 알아야 할 것이 있습니다. 디자인 작업은 사용량이 별도로 계산됩니다.
국내 사용기 중에 이 부분을 실제로 겪은 기록이 있습니다. 요지는 이렇습니다.
- 전체 모델 사용량과 별개로 디자인 사용량이 따로 있습니다
- 페이지 몇 개를 만들었을 뿐인데 10~20%가 소진됐습니다
- 가장 낮은 요금제라면 금방 동날 것이라고 적혀 있습니다
즉 이 기능은 탐색용으로 쓰기에 비싼 편입니다. 아무 화면이나 던져 보는 방식은 권하기 어렵습니다. 고칠 화면을 정하고, 판단 근거를 먼저 모은 다음에 부르는 편이 낫습니다.
쓰는 순서
- 고칠 화면 하나를 정합니다. 여러 개를 한 번에 던지지 않습니다
- 판단 근거를 먼저 모읍니다. 이 화면에서 사람들이 무엇을 많이 하는지 알 수 있는 자료가 저장소 안에 있는지 확인합니다
- 말로 설명합니다. 무엇을 우선하고 싶은지 한 줄로 적습니다
- 안이 나오면 비교합니다. 색만 다른 안이 두 개라면 방향이 안 갈린 것이니 다시 요청합니다
- 고른 뒤에 반영합니다. 기존 컴포넌트와 색·글꼴 규칙을 그대로 쓰라고 못 박습니다
5번을 빼먹으면 화면 하나가 나머지와 따로 놉니다.
한계
- 미리보기 단계입니다. 동작과 이름이 바뀔 수 있고, 이 글의 절차도 같이 바뀔 수 있습니다
- 사용량이 따로 잡힙니다. 위 절의 수치는 한 사용자의 기록이며 요금제와 작업 크기에 따라 다릅니다. 본인 값은 직접 확인하십시오
- 격리된 작업 환경에서 돌릴 때 파일이 서로 다른 곳에 쓰인다는 보고가 있습니다. 여러 갈래로 나눠 작업 중이라면 결과가 어디에 쌓였는지 확인하십시오
- 시안을 뽑아 주는 것이지 무엇이 좋은 화면인지 정해 주지는 않습니다. 고르는 일은 사람 몫으로 남습니다
출처
- 발표 X 글 @ClaudeDevs (2026-08-18) — 기능 소개와 시연 영상. 영상은 프레임 단위로 확인했습니다
- 같은 게시물의 답글 — 격리 환경에서 파일이 갈리는 문제 제보
- 국내 사용기 — 디자인 사용량이 별도로 잡히고 페이지 몇 개에 10~20%가 소진된다는 실측
기능 흐름은 공개된 시연 영상에서 직접 확인한 것만 적었습니다. 확인하지 못한 세부 동작은 넣지 않았습니다.
공식 자료
- Claude Code 공식 명령 문서 — 슬래시 명령이 도는 방식.
/design항목은 미리보기 반영 전일 수 있습니다