컨텍스트 손실 없이 Claude Design에서 Claude Code로 마이그레이션하는 방법 (2026)

Claude Design은 이제 Claude 내부에서 작동합니다. Anthropic의 시작 가이드에 따르면 이는 "아티팩트를 시작할 수 있는 템플릿 중 하나로, 모든 채팅, Claude Code, 아티팩트 탭에서 캔버스 편집 및 디자인 시스템이 포함된 상태로 사용할 수 있습니다." Free, Pro, Max, Team, Enterprise 플랜에서 모두 사용 가능합니다.

기존의 독립형 사이트인 claude.ai/design은 폐쇄될 예정입니다. Anthropic의 마이그레이션 가이드에 따르면 "2026년 12월 14일에 폐쇄될 예정이며, 해당 날짜까지는 계속 액세스할 수 있습니다." 해당 사이트의 프로젝트는 Claude 내의 아티팩트로 이동할 수 있으며, 이 기능은 유료 플랜부터 순차적으로 적용되고 있습니다.

따라서 빌드하려는 디자인의 시작점은 다음 세 가지가 될 수 있습니다.

• Claude에서 아티팩트로 제작된 디자인
• 여전히 독립형 사이트에 있는 디자인
• Claude Code 내부에서 /design 명령어로 초안이 작성된 디자인

세 가지 모두 결국 같은 목적지에 도달하지만, 경로와 함께 제공되는 내용은 다릅니다.

핸드오프를 통한 디자인 자체

시작 가이드에서는 핸드오프를 한 문장으로 설명합니다. "디자인이 소프트웨어가 될 준비가 되면 Claude Code로 전달할 수 있으며, Claude Code는 스크린샷에서 새로 시작하는 대신 기존 작업물에서 이어서 작업을 진행합니다."

내보내기 옵션에서 Claude Code로의 핸드오프는 두 가지 목적지가 있습니다. 내 컴퓨터의 Claude Code를 위한 'Send to local coding agent'와 클라우드 세션을 위한 'Send to Claude Code Web'입니다. 동일한 메뉴에서 .zip 다운로드, PDF, PPTX, Google Slides, 독립형 HTML 등 다른 형식도 제공합니다.

Claude Code 측면에서 같은 문서는 다음과 같이 설명합니다. "Claude Code에서 /design을 사용하여 디자인을 코드베이스로 임포트하거나, 코드를 라이브 프로토타입으로 내보내거나, Claude가 처음부터 끝까지 전체를 빌드하게 할 수 있습니다."

/design-sync를 통한 디자인 시스템

디자인 시스템은 두 번째 핵심 요소입니다. Anthropic의 디자인 시스템 관련 글에 따르면, 디자인 시스템이 "이미 React 컴포넌트로 존재한다면 Claude Code에서 /design-sync를 실행하세요. 이는 토큰과 컴포넌트를 직접 읽어 들이며, 코드로 구현된 제품 디자인 시스템에 가장 적합합니다."

시작 가이드는 그 목적을 분명히 밝힙니다. "/design-sync를 사용하여 디자인 시스템을 가져오면, Claude Design에서 빌드하는 모든 것이 기존 컴포넌트에서 시작됩니다." 컴포넌트가 저장소(repository)에 있으면 저장소가 소스가 되고, 디자인은 실제로 배포되는 요소들로부터 시작됩니다.

CLAUDE.md를 통한 디자인 토큰

Claude Code는 시각적 규칙을 위한 자체적인 공간도 가지고 있습니다. Claude Code 아티팩트 문서에 따르면, 아티팩트를 브랜딩과 일관되게 유지하려면 "프로젝트의 CLAUDE.md나 저장소의 테마 파일과 같이 Claude가 찾을 수 있는 곳에 기록하세요." 또한 Claude가 이를 처리하는 우선순위를 다음과 같이 덧붙입니다. "Claude는 자체적인 선택보다 사용자의 디자인 시스템을 더 높은 우선순위로 처리하며, 프롬프트는 이 둘보다 더 높은 우선순위를 가집니다."

따라서 색상, 타이포그래피, 간격이 포함된 CLAUDE.md의 짧은 디자인 시스템 섹션은 해당 저장소의 모든 Claude Code 세션이 읽게 됩니다. Claude Code의 하위 디렉토리 CLAUDE.md 제한에 관한 가이드에서 중요한 라인들이 계속 로드될 수 있도록 긴 파일을 어디에 두어야 하는지 설명합니다.

Anthropic의 핸드오프 설명은 디자인에 초점이 맞춰져 있습니다. 디자인 이면의 대화 내용이 함께 이동한다는 언급은 없으며, 독립형 사이트의 경우 채팅과 댓글은 이동할 수 없다고 명시되어 있습니다. 다음 세 가지 종류의 컨텍스트는 직접 챙겨야 합니다.

디자인을 형성한 대화. 특정 레이아웃을 선택한 이유, 처리하기로 합의한 예외 케이스, 설정한 제약 조건 등은 채팅 속에 남아 있습니다. 독립형 사이트에 대해 Anthropic은 명확히 밝힙니다. "채팅과 댓글은 Claude로 이동할 수 없으므로 폐쇄될 때까지 독립형 버전에 남아 있습니다." 이전되지 않는 항목 목록에는 "Claude와의 채팅" 및 "프로젝트 및 디자인 시스템에 대한 댓글"이 포함되어 있으며, "독립형 버전이 폐쇄되기 전에 채팅과 댓글에서 필요한 내용을 저장하세요"라고 권고합니다.

댓글 및 리뷰 노트. 디자인에 남겨진 피드백 역시 독립형 사이트에서 이전되지 않는 목록에 포함됩니다.

단일 디자인을 넘어 적용되는 규칙들. 폼(form)에 어떤 컴포넌트를 사용할지, 빈 상태(empty states) 문구는 어떠해야 하는지, 에러 메시지는 어떻게 작성하는지 등입니다. 이러한 사항들이 대화 중에 결정되었다면 디자인 파일에는 포함되어 있지 않습니다.

이것은 핸드오프 기능의 결함이 아닙니다. 디자인 파일은 디자인을 담는 그릇입니다. 그 뒤에 숨겨진 결정 사항은 별개의 문제이며, Claude Code는 저장소 내의 파일로부터 이를 읽어 들입니다.

스크린샷 전송. 대략적인 시작에는 도움이 되지만, Anthropic은 핸드오프를 스크린샷에서 새로 시작하는 것과 대조하여 설명합니다. 스크린샷은 구조나 컴포넌트 정보를 담고 있지 않습니다.

전체 디자인 채팅 내용을 Claude Code에 붙여넣기. 논리적 근거를 가져올 수는 있지만 수많은 노이즈가 섞이게 되며, 세션의 컨텍스트를 불필요한 논의로 가득 채우게 됩니다.

Claude Code가 디자인 시스템을 추론하도록 방치하기. CLAUDE.md에 토큰이 없거나 읽을 수 있는 컴포넌트가 없다면, Claude Code는 자체적인 시각적 선택을 내리게 됩니다.

독립형 프로젝트를 12월까지 방치하기. 그곳의 채팅과 댓글은 이동되지 않으며, 독립형 프로젝트의 공개 링크는 폐쇄 후 작동이 중단됩니다.

1단계: 디자인, 시스템, 결정 사항 수집

핸드오프를 하기 전에 세 가지를 준비하세요.

• 디자인. 빌드하려는 버전이 최신 버전인지 확인하세요. 여전히 독립형 사이트에 있다면 옵션이 제공될 때 프로젝트를 Claude로 이동시키거나 .zip으로 다운로드하세요. Anthropic은 프로젝트 이동 시 "이동되는 항목, 다르게 작동하는 항목, 남겨지는 항목을 나열하는" 리뷰가 표시된다고 언급합니다.
• 디자인 시스템. 시스템이 코드로 존재한다면 어떤 저장소와 컴포넌트인지 확인하세요. 브랜드 자산을 기반으로 Claude에서 구축되었다면, 제대로 이동되었는지 그리고 디자인에서 사용 중인 시스템이 맞는지 확인하세요.
• 결정 사항. 디자인 채팅을 다시 훑어보며 무엇이 왜 결정되었는지 기록하세요. 레이아웃 선택, 각 화면에 필요한 상태, 카피 규칙, 접근성 요구 사항, 제외하기로 한 사항 등을 포함합니다. 결정당 한 줄씩 정리하세요. 독립형 프로젝트의 경우 채팅이 이동되지 않으므로 12월 14일 이전에 이 작업을 완료해야 합니다.

2단계: 각 요소를 Claude Code로 가져오기

기능이 구현될 저장소에서 다음을 수행하세요.

1. 디자인 시스템 가져오기. 컴포넌트가 저장소에 있다면 /design-sync를 실행하여 Claude Design과 Claude Code가 동일한 컴포넌트를 사용하도록 하세요.
2. CLAUDE.md에 시각적 규칙 추가. 색상, 타이포그래피, 간격이 포함된 짧은 디자인 시스템 섹션을 작성하거나 이를 포함하는 테마 파일을 지정하세요.
3. Claude Code가 읽을 수 있는 곳에 결정 사항 추가. 기능 전반에 적용되는 규칙은 CLAUDE.md나 CLAUDE.md가 참조하는 짧은 디자인 노트 파일에 넣으세요. 일회성 세부 사항은 세션 자체를 위해 남겨두세요.
4. 디자인 전달. 디자인에서 로컬 세션을 위해 'Send to local coding agent'를 선택하거나 클라우드 세션을 위해 'Send to Claude Code Web'을 선택하세요. 또는 Claude Code에서 /design을 사용하여 임포트하세요.
5. 컨텍스트를 확인하며 빌드 시작. 첫 번째 메시지에서 Claude Code에 이것이 어떤 디자인인지, 어떤 결정 사항을 따라야 하는지, 완료된 상태가 무엇인지 알려주세요. 그런 다음 코드를 작성하기 전에 빌드할 내용을 요약해 달라고 요청하세요.

클라우드 세션으로 핸드오프하는 경우, 내 컴퓨터의 로컬 전용 설정은 자동으로 따라오지 않습니다. Claude Code 클라우드 세션에서 로컬 설정 유지에 관한 가이드에서 클라우드 환경이 로드하는 내용을 확인하세요.

수동 마이그레이션도 작동하지만, 결정 사항들이 어디에 있었는지를 보여줍니다. 바로 이동되지 않는 디자인 채팅 속이죠. 이 저장소를 위해 CLAUDE.md에 복사해 넣어도, 다른 제품을 위한 다음 디자인은 똑같은 과정을 반복해야 합니다. ChatGPT에서 빌드를 리뷰하거나 다른 어시스턴트에서 다음 기능을 계획할 때도 그 결정 사항들은 그곳에 없습니다.

MemoryLake는 여러분이 작업하는 디자인 결정 사항과 컨벤션을 하나의 관리되는 목록으로 유지하여 Claude Code뿐만 아니라 ChatGPT, Codex 등 연결된 다른 어시스턴트에서도 사용할 수 있게 해주는 memory 레이어입니다.

여러분은 자신의 언어로 직접 항목을 작성합니다. Claude Design, 아티팩트, 디자인 시스템, Claude 채팅 또는 어떤 벤더의 저장소에서도 내용을 읽거나 쓰거나 삭제하지 않습니다. 업무 콘텐츠의 경우, 툴 외부 보관에 관한 조직의 정책을 따르세요.

1단계: API 키 생성

로그인 후 대시보드에서 키를 생성하세요. 이 키는 MemoryLake 워크스페이스에 속하며 Claude 계정과는 별개입니다.

2단계: 첫 번째 memory 업로드

수동 마이그레이션 1단계에서 기록한 결정 사항들(레이아웃 선택, 상태, 카피 규칙, 제외 사항 등)부터 시작하세요. 항목당 하나의 결정을 작성하고, 날짜를 기입하고, 해당 제품이나 기능의 라벨을 붙이세요.

3단계: AI 및 에이전트 연결

Claude Code와 사용하는 다른 어시스턴트들을 연결하세요. 다음 디자인 핸드오프, 리뷰 또는 후속 기능 작업은 이미 준비된 결정 사항들과 함께 시작됩니다.

첫 번째 차이점은 빌드 결과물이 올바른 이유로 디자인과 일치하게 된다는 것입니다. Claude Code는 디자인, 컴포넌트, 그리고 그 이면의 결정 사항을 모두 가지고 있으므로 왜 두 번째 단계가 선택 사항인지 추측할 필요가 없습니다.

두 번째는 디자인 시스템이 한 곳에 유지된다는 점입니다. /design-sync가 저장소에서 컴포넌트를 읽고 CLAUDE.md에서 토큰을 읽으므로, 새로운 디자인과 새로운 코드는 동일한 소스에서 시작됩니다.

세 번째는 결정 사항들이 도구보다 오래 살아남는다는 것입니다. 12월에 닫히는 독립형 채팅이나 다시 열어보지 않을 디자인 채팅이 논리적 근거를 함께 가져가 버리지 않습니다. ChatGPT에서도 디자인을 하신다면, ChatGPT가 디자인 시스템을 잊어버리는 이유에 관한 가이드에서 해당 내용을 확인하세요.

스크린샷이 아닌 디자인을 전달하세요. 핸드오프는 Claude Code에 필요한 구조를 유지해 줍니다.

저장소를 컴포넌트의 소스로 만드세요. 디자인 시스템이 코드로 존재할 때 /design-sync를 사용하세요.

시각적 규칙을 CLAUDE.md에 넣으세요. 저장소의 모든 세션이 이를 읽습니다.

디자인 채팅을 떠나기 전에 결정 사항을 기록하세요. 이유와 함께 한 줄씩 정리하세요.

12월 14일 이전에 독립형 채팅과 댓글을 저장하세요. Claude로 이동되지 않습니다.

빌드 전에 Claude Code에게 계획을 다시 설명해 달라고 요청하세요. 결정 사항이 제대로 전달되었는지 확인하는 가장 빠른 방법입니다.

기능 전반의 규칙과 일회성 세부 사항을 분리하세요. 규칙은 파일에, 세부 사항은 세션에 넣으세요.

만약 Claude Code가 여전히 합의된 내용에서 벗어난다면, Claude Code가 프로젝트 컨텍스트를 잊어버리는 이유에 관한 가이드에서 일반적인 원인들을 확인해 보세요.

Claude Design은 이제 Claude와 Claude Code 내부에 존재합니다. 완성된 디자인은 'Send to local coding agent' 또는 'Send to Claude Code Web'을 통해 Claude Code로 전달하거나 /design으로 임포트할 수 있습니다. 코드로 된 디자인 시스템은 /design-sync로 가져올 수 있고, 시각적 규칙은 CLAUDE.md에 배치할 수 있습니다.

Anthropic은 핸드오프 시 디자인 이면의 대화가 함께 이동한다고 설명하지 않습니다. 디자인 채팅을 마치기 전에 결정 사항을 기록하고, 기능 전반에 걸친 사항은 저장소에 보관하며, 디자인 파일보다 오래 지속될 수 있는 곳에 보관하세요. 그러면 빌드 결과물은 디자인이 만들어진 바로 그 이유와 동일한 논리로 완성될 것입니다.