클로드 코드는 터미널이나 IDE에서 코드를 읽고 고치고 커밋까지 하는 에이전트형 CLI 도구입니다. 클로드 디자인은 화면 설계나 랜딩 페이지, 컴포넌트 같은 시각 결과물을 캔버스 위에서 다듬는 도구입니다. 실제 작업은 "디자인 → 구현 → 디자인 수정 → 재구현"을 계속 오가는데, 이 둘을 이어서 쓰면 그 왕복을 파일 복사나 스크린샷 없이 같은 세션 안에서 처리할 수 있습니다.
왜 필요한가
디자인과 구현이 분리돼 있으면 "버튼 여백을 좀 넓혀달라" 같은 사소한 수정도 스크린샷을 주고받고, 다시 코드를 열어 값을 바꾸고, 결과를 캡처해서 확인받는 과정을 거치게 됩니다. 클로드 코드 세션 안에서 디자인 산출물을 만들고 다듬을 수 있으면 이 왕복이 같은 대화 맥락 안에서 끝납니다.
핵심 개념
연동은 두 방향으로 나뉩니다.
첫 번째는 코드에서 디자인 쪽으로 가는 방향입니다. 클로드 코드 세션에서 디자인 스킬을 불러오면 화면 목업이나 랜딩 페이지 같은 결과물을 아트보드 형태로 만들고, 이를 클로드 디자인의 캔버스 에디터가 열 수 있는 아티팩트로 발행합니다. 발행된 뒤에는 요소를 클릭해서 선택하고 속성 패널로 값을 바꾸고 텍스트를 인라인으로 고치는 식으로, 코드를 다시 짜지 않고도 다듬을 수 있습니다.
두 번째는 디자인에서 코드 쪽으로 가는 방향입니다. 클로드 디자인의 디자인 시스템 프로젝트에 있는 컴포넌트를 로컬 코드베이스와 동기화하는 별도 도구가 있습니다. 이 도구는 프로젝트의 파일 목록을 읽고 로컬과 비교해서 구조적인 차이를 계산하고, 그 계획을 사람이 확인한 뒤에만 실제로 파일을 쓰거나 지웁니다. 전체를 통째로 덮어쓰는 방식이 아니라 컴포넌트 단위로 하나씩 맞춰나가는 방식입니다.
실전 예시
화면 목업을 만들고 다듬는 흐름은 이렇게 진행됩니다.
- 클로드 코드 세션에서 "로그인 화면 목업 만들어줘" 같은 요청을 하면 디자인 스킬이 캔버스 초안을 아트보드로 그립니다.
- 이 초안이 아티팩트로 발행되면, 클로드 디자인의 캔버스 에디터에서 열린 링크를 통해 각 요소를 직접 클릭해서 색상, 여백, 텍스트를 조정할 수 있습니다.
- 수정한 내용을 저장하면 새 버전이 발행되고, 이 버전을 다시 클로드 코드 세션에서 참조해 실제 컴포넌트 코드로 옮겨 구현합니다.
반대로 이미 만들어둔 디자인 시스템 프로젝트를 코드베이스에 반영할 때는 이런 순서를 따릅니다.
- 쓸 권한이 있는 디자인 시스템 프로젝트 목록을 가져옵니다.
- 그 프로젝트의 파일 목록과 로컬 컴포넌트 폴더를 비교해서 새로 추가할 파일과 지울 파일을 정리합니다.
- 이 계획을 사람이 검토하고 확정한 뒤에야 실제 쓰기·삭제가 실행됩니다. 확정 전에는 어떤 파일도 바뀌지 않습니다.
- 파일은 한 번에 최대 256개까지 묶어서 쓸 수 있고, 그보다 많으면 같은 계획 안에서 여러 번에 나눠 보냅니다.
장단점
장점
- 디자인 수정과 코드 반영 사이의 지연이 줄어듭니다. 스크린샷을 따로 내보낼 필요 없이 같은 작업 맥락에서 요청이 아트보드 수정으로, 다시 컴포넌트 코드 수정으로 이어집니다.
- 동기화가 항상 컴포넌트 단위 계획을 세우고 사람이 확인한 뒤 실행되기 때문에, 실수로 전체 디자인 시스템을 덮어쓰는 사고를 구조적으로 막아줍니다.
단점
- 캔버스 에디터로 직접 다듬는 기능은 계정별로 저장 권한이 열려 있어야 완전히 활용할 수 있고, 그렇지 않으면 초안을 보고 내보내는 수준에 머뭅니다.
- 디자인 쪽 변경 사항이 코드로 자동 반영되는 것은 아니라서, 결국 "동기화 도구를 실행해서 계획을 확인하고 확정한다"는 사람의 검토 단계가 한 번은 들어갑니다.
마무리
완전 자동화된 파이프라인이라기보다는 디자인과 코드 사이의 왕복 비용을 줄여주는 작업 도구에 가깝습니다. 화면이나 컴포넌트를 자주 시각적으로 다듬어야 하는 작업이라면, 클로드 코드 안에서 디자인 초안을 만들고 캔버스로 넘겨 다듬은 뒤 다시 동기화 도구로 코드에 반영하는 흐름이 스크린샷 기반의 수작업보다 빠릅니다.