Claude Design 이 지금 엄청나게 유용합니다.
며칠 전, Claude Code 로 코드를 작성하다가 빠른 영업 문서를 만들어 달라고 요청했습니다.
결과는? 색상과 폰트가 제가 매일 작업하는 제품과 거의 동일했습니다. 솔직히, 잠시 멈춰야 했습니다.
Claude Design 이 출시된 직후에 시도해보고는 한동안 사용하지 않았었습니다. 하지만 "문서가 제품과 자연스럽게 연결되어 나온다"는 이 느낌은 이전 AI 도구에서는 경험하지 못한 것이었고, 제 관점을 완전히 바꿔놓았습니다.
저는 tatsuki (@nobel_824)입니다. 중소기업의 AI 활용을 지원하며 Claude 와 Codex 의 업무 도입을 돕고, 동시에 매일 Claude Code 를 직접 운영하고 있습니다.
이 글은 주로 "코드를 만져보는" 분들을 위해 작성되었습니다.
Claude Design 의 추천 기능인 Design System 을 만드는 방법을 정리한 Design System Kit 를 만들었습니다.
이 글의 마지막 부분에서 제공해 드립니다.
왜 "동일한 톤"으로 나왔을까요?
비결을 말씀드리자면, 미리 "Design System"을 설정해 두었기 때문입니다.
"Design System"이 복잡하게 들릴 수 있지만, 코드를 작성하는 분들에게는 브랜드 규칙을 미리 "설정 파일"처럼 전달하는 것과 같습니다.
색상. 폰트. 제목 스타일. 간격. 하지 말아야 할 것. 이것들을 한 번 작성해두면, 자료를 만들 때마다 매번 불러옵니다.
프로젝트에 CLAUDE.md 파일을 넣어 매번 같은 지시를 입력하지 않아도 되는 것과 비슷한 느낌입니다. "브랜드용 CLAUDE.md 를 하나 작성한다"고 생각하면 이해가 쉬울 것입니다.
이것을 제공하면 결과물의 톤이 매번 일관되게 유지됩니다. 나중에 페이지를 추가해도 첫 번째 페이지와 연결됩니다. "뭔가 AI 가 만든 느낌"도 사라집니다.
가장 좋은 점은 /design-sync 입니다
이 부분은 Claude Code 를 사용하는 분들만 누릴 수 있는 혜택입니다.
Claude Code 쪽에는 GitHub 저장소나 로컬 코드에서 색상, 폰트 등 디자인 시스템 세트를 읽어와 Claude Design 으로 직접 전달할 수 있는 /design-sync 명령어가 있습니다 (2026년 6월 업데이트).
즉, 이미 운영 중인 서비스의 코드를 입력하면 해당 서비스의 색상과 폰트를 사용한 문서나 LP 초안을 출력합니다.
문서의 비주얼과 실제 제품이 충돌하지 않습니다. 색상 코드를 수동으로 복사하는 작업이 완전히 사라집니다. 바로 이 부분이 진가를 발휘하는 지점입니다. 제 환경에서는 베타 버전임에도 정상적으로 작동합니다.
*참고: 이 명령어는 Claude Code (터미널 또는 데스크톱 앱에서 사용하는 별도 도구) 용이며, claude.ai/design 의 채팅 필드에 입력할 수 없습니다. Claude Design 자체가 아직 베타 버전(Pro / Max / Team / Enterprise 플랜 대상)이므로, 플랜에 따라 사용할 수 없을 수도 있습니다.
방치하면 AI 는 평범해지기 마련입니다
반대로, 아무것도 제공하지 않고 요청하면 어디선가 본 듯한 평범한 디자인이 반환됩니다. 톤은 매번 바뀌고, 색상도 제각각입니다.
게다가 Claude Design 은 작업을 다시 할 때마다 사용량 제한을 소모하는 구조였습니다. 해외 보고에 따르면, 수정을 반복하다가 30분 만에 일주일 치 사용량을 소진한 사례도 있습니다 (PCWorld, 2026년 4월). 6월 업데이트에서 제한이 개선되었지만, "재작업을 줄이려는 노력이 직접적으로 효과를 보는" 구조는 동일합니다.
따라서 처음에 디자인 시스템 하나를 만드는 투자가 빛을 발합니다. 공식 가이드에서도 이 설정을 먼저 하도록 전제하고 있습니다.
코드가 없어도 같은 아이디어는 통합니다
"자체 저장소가 없다"고 말씀하셔도 걱정하지 마세요.
코드 대신 로고, 브랜드 색상, 회사 사이트 URL (스크린샷도 괜찮습니다)을 제공하면 됩니다. 거기서 색상과 폰트를 추출합니다. 코드가 있는 분들은 그 부분이 /design-sync 로 자동화되는 것뿐입니다. 그게 거의 유일한 차이점입니다.
그런 다음 문서의 내용을 제공하고 "이 톤으로 만들어 줘"라고 말하세요. 마지막으로, 이름 불일치나 숫자 자릿수 정도만 직접 눈으로 빠르게 확인하면 됩니다. 처음부터 100점을 목표로 할 필요는 없습니다. 폰트 크기와 색상은 나중에 Claude Design 내에서 조정할 수 있습니다.
세미나 슬라이드와 제안 자료부터 한 페이지짜리 내부 요약본과 LP 초안까지—코드를 작성하면서 자료를 대량 생산할수록 이 첫 단계가 나중에 큰 도움이 됩니다.
바로 사용할 수 있는 Kit 를 준비했습니다
하지만 처음부터 만드는 것은 번거롭다고 생각합니다.
그래서 이 글의 내용을 그대로 재현할 수 있는 "Claude Design System Kit" 를 준비했습니다. "평범해지는 문제"와 "재작업으로 제한 소진"을 사전에 방지하도록 설계되었습니다.
- 색상, 폰트, 간격, 구성 요소, 금지 목록만 채우면 되는 브랜드 설정 시트.
- 그대로 따라 할 수 있는 예제.
- 세미나 슬라이드용 템플릿.
- Claude Code 에 전달할 때의 사고 방식 (/design-sync 와 결합하는 방법).
이 글의 내용을 복사해서 붙여넣기만 하면 재현할 수 있는 "Claude Design System Kit" 를 LINE 에서 무료로 배포하고 있습니다.
▼ LINE 에 등록하고 "Claude Design System Kit" 를 받아보세요
https://t.co/90omRA4UQ7
Open Chat (LINE OpenChat) 에 가입하신 후, 메모에 있는 공식 LINE 에서 키워드를 보내주세요:
Design System
을 보내시면 혜택을 받으실 수 있습니다.
*Open Chat 내에서 키워드를 보내는 것은 삼가해 주세요.*
먼저 템플릿을 Claude Design 에 넣고 문서 하나를 만들어 보시길 권장합니다. 그것만으로도 디자인 시스템 사용법을 감잡을 수 있을 것입니다.
▼ LINE 에 등록하고 "Claude Design System Kit" 를 받아보세요
