딸깍이면 된다더니, 왜 이렇게 힘든 걸까
솔직히 말하겠습니다. 누가 AI로 딸깍하면 디자인 나온다고 했는지 모르겠는데, 직접 해보니 꽤 힘들었습니다. 그런데 결과물을 보니까 생각이 바뀌었어요. 우리 브랜드 컬러, 우리 폰트, 우리 레이아웃으로 나오는 슬라이드를 보는 순간 “이건 해볼 만하다”는 확신이 들었습니다.
제가 직접 Claude와 Gemini를 써서 디자인 시스템을 만들어봤고, 그 과정을 처음부터 끝까지 정리했습니다. 지금 보고 계신 표지부터 본문 슬라이드까지 전부 프롬프트만으로 만든 결과물입니다.
디자인 시스템이 왜 필요한가
디자이너 분들은 이미 아시겠지만, 일반 직장인 입장에서 디자인 시스템이 그냥 “보기 좋으라고” 만드는 거라고 생각할 수 있습니다. 근데 실제로 디자인을 해본 사람은 압니다. 창작의 고통이 어떤 건지.
팀원마다 제각각인 슬라이드, 매번 달라지는 컬러, 통일감 없는 발표 자료. 이런 문제를 한 번에 해결하는 게 디자인 시스템입니다. 같은 브랜드는 같은 규칙으로, 어디서든 동일한 톤으로 만들어내는 거죠.
핵심은 이겁니다. 예쁜 디자인은 도구가 해주지만, 우리 브랜드다운 디자인은 시스템이 해줍니다.
디자인 시스템을 만들면 달라지는 것들
- 프롬프트 기반이라 디자이너에게 요청하듯 Claude에게 요청하면 끝
- 컬러나 폰트 고민 없이 바로 제작 가능
- 한 번 만들어두면 카드뉴스, 슬라이드, 썸네일까지 대량 생산
- 디자이너의 반복 요청 부담 감소
- 어떤 플랫폼이든 동일한 브랜드 톤 유지
Claude 디자인 시스템 구축 7단계
1단계: 회사 로고에서 컬러 팔레트 추출
로고가 있다면 거기서 시작합니다. Coolors라는 사이트에서 로고 이미지를 넣으면 핵심 컬러를 추출해줍니다. 이 메인 컬러가 앞으로 만들 모든 슬라이드의 기준이 됩니다.
로고가 없다면 제품이나 서비스 방향에 맞는 컬러를 먼저 정하세요. Gemini에 제품 이미지를 넣고 컬러 추천을 받는 것도 방법입니다.
"우리 회사 로고에 사용된 컬러야. 이 색조합과 가장 괜찮은 컬러 팔레트 5개를 컨셉과 함께 추천해줘. 컬러 코드는 "https://coolors.co/0903A6-F2CB05-F2B705-F2F2F2-0D0D0D" 와 같은 형식으로 추출해줘. 코드 앞에 반드시 "https://coolors.co/"가 붙어야해.
2단계: 디자인 레퍼런스 수집
제 경우에는 기존에 만든 강의 자료가 레퍼런스였기 때문에 수집이 어렵지 않았습니다. 하지만 처음 시작하는 분들은 Canva, Dribbble, Pinterest 같은 곳에서 마음에 드는 슬라이드 디자인을 모아두면 됩니다.
포인트는 “전체 덱”이 아니라 개별 레이아웃 단위로 수집하는 겁니다. 메인 표지, 섹션 표지, 본문 2컬럼, 3컬럼, 4컬럼 정도면 최소 5개 레이아웃이 나옵니다.
3단계: Gemini로 디자인 가이드 상세 조정
여기가 핵심 포인트입니다. Gemini에 레퍼런스 이미지를 넣고 “이걸 HTML과 CSS로 구현해줘”라고 하면 미리보기를 만들어줍니다. 그런데 처음에 나오는 결과가 마음에 안 들 수 있어요.
그때부터 하나하나 수정하는 겁니다.
- “글자가 너무 커, 40%로 줄여줘”
- “폰트를 Pretendard로 변경해줘”
- “내가 첨부한 이미지의 컬러 팔레트를 적용해줘”
- “슬라이드 비율은 16:9, 가로 1920px로 만들어줘”
Gemini의 강점은 화면에서 특정 요소를 선택해서 “이거 수정해줘”가 된다는 점입니다. 섹션 헤더, 카드 영역, 하단 바 같은 요소를 직접 선택하고 수정 지시를 내릴 수 있어요. Claude에서는 이런 시각적 선택이 안 되기 때문에 Gemini를 쓰는 겁니다.
이 이미지를 HTML로 만들기 위한 디자인 가이드라인을 만들고 싶어. 이미지를 분석해서 HTML/CSS로 추출하여 디자인 가이드를 만들기 위한 프롬프트를 작성해줘. 컬러는 별도 지정할 예정이니 참고해. 앞으로 내가 이미지를 제공하면, 같은 방식으로 이미지를 HTML/CSS로 표현하기 위한 프롬프트를 출력하고, 예시로 가이드에 나온 화면을 구현해줘.
4단계: Claude에서 디자인 가이드 문서 생성
Gemini에서 수정이 만족스러우면 “현재 화면을 디자인 가이드라인 생성을 위한 프롬프트로 작성해줘”라고 합니다. Gemini가 프롬프트를 만들어주면, 그걸 Claude에 가져갑니다.
Claude에는 이렇게 말합니다: “나는 HTML, CSS를 이용한 디자인 가이드를 만들고 싶어. 앞으로 내가 만들고 싶은 디자인에 대한 프롬프트를 줄 테니까 디자인 가이드를 MD 파일로 만들어서 업데이트해줘.”
이 과정을 반복합니다. Gemini에서 레퍼런스 이미지 넣고, 프롬프트 받아서, Claude에 넣고. 원하는 슬라이드 덱이 나올 때까지 이 세 단계를 돌리는 거예요.
나는 html/css를 이용한 디자인 가이드를 만들고 싶어. 앞으로 내가 만들고 싶은 디자인에 대한 프롬프트를 줄테니, 디자인 가이드라인을 md로 만들어서 업데이트 해줘.
5단계: 디자인 가이드라인 다듬기
가이드라인에 들어가야 할 요소들이 있습니다. 컬러 시스템, 타이포그래피 스케일, 레이아웃 그리드, 여백과 간격, 컴포넌트(카드, 헤더, 테이블, 워터마크) 등입니다.
제가 자주 쓰는 꿀팁이 하나 있는데, “MECE 점검”입니다. “MECE로 디자인 가이드라인 파일을 체크해줘”라고 하면 Claude가 중복을 제거하고, 누락된 항목을 추가하고, 불일치하는 부분을 잡아줍니다. 진짜 괜찮은 명령어입니다.
금지 규칙도 중요합니다. 제 경우에는 이모지 금지, 배지(버튼 안 글자) 금지를 걸었어요. 배지는 이미지로 뽑을 때 글자가 밀리는 문제가 있었거든요.
6단계: 디자인 가이드를 Claude 스킬로 변환
디자인 가이드를 만들었으면 이제 Claude 스킬 파일로 변환해야 합니다. 스킬로 만들어야 Claude에서 실행해볼 수 있어요.
핵심은 디자인 가이드 자체가 스킬이 아니라, 가이드를 참고해서 다크모드 지원, 이미지 다운로드, PDF 추출 기능까지 포함한 슬라이드 제작 스킬을 만드는 겁니다.
Claude의 사용자 지정 메뉴에서 스킬 업로드를 하면 됩니다. 업로드 후 일반 채팅에서 슬래시(/) 명령어로 스킬을 호출할 수 있어요.
7단계: 실제 슬라이드 제작 및 수정
스킬을 호출하고 “첨부된 파일을 기반으로 프레젠테이션 만들어줘”라고 하면 Claude가 HTML 파일을 생성합니다.
주의할 점이 하나 있습니다. Claude 앱 안에서 보이는 미리보기와 실제 브라우저에서 여는 결과가 다를 수 있어요. CDN 폰트나 이미지가 다르게 로딩되기 때문입니다. HTML을 다운받아서 브라우저에서 열어보는 게 정확합니다.
Claude Code를 쓴다면 라이브 서버로 바로 브라우저에서 확인할 수 있어서 훨씬 편합니다.
Canva 매직 레이어로 마무리 수정하기
HTML에서 추출한 이미지를 Canva에 넣으면 한 가지 문제가 있습니다. 이미지라서 글자를 수정할 수 없다는 거죠. 그런데 Canva에 새로 나온 “매직 레이어” 기능이 이걸 해결해줍니다.
매직 레이어를 누르면 이미지 안의 글자, 도형, 아이콘을 개별 요소로 분리해서 수정할 수 있게 됩니다. 이 기능을 쓰려면 Canva 설정에서 Language를 English (US)로 변경해야 합니다.
이렇게 하면 Claude가 만든 디자인을 Canva에서 실제 편집 가능한 형태로 활용할 수 있습니다. 우리 회사 디자인을 최대한 유지하면서도 세부 수정이 가능해지는 거죠.
정리하면
디자인 시스템 구축은 딸깍으로 되는 게 아닙니다. 시간을 들여야 합니다. 하지만 한 번 만들어두면 그때부터는 진짜 딸깍입니다. 카드뉴스, 슬라이드, 썸네일, 상세페이지까지 동일한 브랜드 톤으로 찍어낼 수 있습니다.
Claude와 Gemini, 두 도구를 병행하는 걸 추천합니다. 하나만 쓰겠다면 Claude를 쓰세요. 디자인 가이드 문서 생성과 스킬 기반 자동화는 Claude가 확실히 강합니다.
Comments are closed.