Tag

Claude Code

Browsing

구글 서치 콘솔을 열었는데 빨간 오류가 가득합니다. “페이지를 색인할 수 없음”이라는 메시지가 수십 개씩 쌓여 있는데, 무슨 뜻인지, 뭘 고쳐야 하는지 도무지 알 수가 없어요. 개발자한테 물어보자니 이런 걸로 부탁하기 민망하고, 외주를 맡기자니 비용이 만만치 않습니다. PHP 파일을 직접 건드렸다가 사이트가 통째로 날아갈까봐 그냥 놔두고 있는 분들, 분명히 계실 거예요.

이 글은 그 답답함을 해결하는 방법을 다룹니다. Claude Code와 SSH, WP-CLI를 연결하면 개발자 없이도 워드프레스 SEO를 직접 자동화할 수 있어요. 명령어를 몰라도 괜찮습니다. 한국어로 말하면 Claude가 알아서 서버를 움직입니다.

왜 지금 이 방법이 필요한가

워드프레스로 블로그나 쇼핑몰을 운영하는 분들이 SEO에서 가장 많이 막히는 지점은 크게 세 가지입니다. 첫째, GSC(구글 서치 콘솔)에서 오류가 뜨는데 그게 무슨 말인지 이해하기 어렵습니다. 둘째, 뭘 고쳐야 하는지는 어렴풋이 알겠는데 어떻게 고치는지 모릅니다. 셋째, PHP나 서버 파일을 건드리는 게 두렵고, 그렇다고 매번 개발자에게 의뢰하기엔 비용 부담이 큽니다.

기존에는 이 간격을 메울 방법이 마땅치 않았어요. 그런데 Claude Code가 등장하면서 상황이 달라졌습니다. AI에게 한국어로 지시하면, 그 지시가 실제 서버 명령어로 번역되어 워드프레스를 직접 조작하는 게 가능해졌거든요. 개발자가 하던 일을 이제는 말 한 마디로 처리할 수 있습니다.

이 방법에서 쓰는 도구 4가지

기술 용어가 낯설더라도 비유로 이해하시면 됩니다. 복잡한 설정보다 각 도구가 어떤 역할을 하는지 먼저 파악하는 게 중요해요.

  • Claude Code — 통역사: 내가 한국어로 말한 내용을 서버가 이해하는 명령어로 바꿔줍니다. “색인 안 된 포스트 찾아서 원인 알려줘”라고 하면 Claude가 알아서 처리해요.
  • SSH — 출입문: 워드프레스가 올라가 있는 서버에 들어가는 열쇠입니다. 이 연결이 되어야 나머지 모든 게 작동해요.
  • WP-CLI — 리모컨: 워드프레스 관리자 화면을 열지 않고도 포스트를 수정하고, 플러그인을 설치하고, 데이터베이스를 조작할 수 있는 도구입니다.
  • GSC CLI — 성적표: 구글이 내 사이트를 어떻게 보고 있는지 데이터를 자동으로 가져옵니다. 어떤 포스트의 CTR이 낮은지, 어떤 페이지가 색인되지 않았는지 파악할 수 있어요.

핵심 워크플로우: 말하면 서버가 움직인다

전체 흐름은 단순합니다. 내가 Claude에게 한국어로 지시하면, Claude가 그 내용을 서버 명령어로 변환하고, SSH를 통해 서버에 접속한 뒤 WP-CLI로 워드프레스를 직접 조작합니다. 결과는 다시 나에게 읽기 쉬운 형태로 돌아와요. 중간에 내가 할 일은 없습니다.

예를 들어 이렇게 말할 수 있어요. “어제 발행한 포스트 SEO 점검하고 문제 있는 거 고쳐줘.” 그러면 Claude가 SSH로 서버에 접속하고, WP-CLI로 포스트 목록을 조회한 뒤, robots.txt와 sitemap, noindex 태그까지 한꺼번에 확인하고 문제를 수정합니다. 10분이면 충분해요.

실전에서 이렇게 씁니다: 5가지 시나리오

① 색인 안 된 포스트 찾고 원인 파악하기

GSC에서 색인 오류가 떠도 원인을 모르는 경우가 많습니다. Claude에게 “색인 안 된 포스트 있으면 찾아서 왜 그런지 알려줘”라고 하면, robots.txt 설정, sitemap 포함 여부, noindex 태그 세 가지를 동시에 점검하고 원인을 특정해줍니다. 확인이 끝나면 수정까지 자동으로 처리해요.

② CTR 낮은 포스트 제목과 메타 디스크립션 일괄 개선

노출은 되는데 클릭이 없는 포스트가 쌓여있는 경우에 유용합니다. “노출은 되는데 클릭이 없는 포스트 찾아서 제목 개선안 뽑아줘”라고 하면, GSC 데이터에서 CTR 1% 미만인 포스트를 추출하고 개선된 제목과 메타 디스크립션 목록을 만들어줍니다. 포스트가 수백 개여도 한 번에 처리돼요.

③ 이미지 alt 태그 일괄 처리

이미지 alt 태그가 비어있는 걸 알면서도 수백 개를 하나씩 고치기 어려워 그냥 둔 경험이 있으실 거예요. “alt 태그 비어있는 이미지 전부 채워줘”라고 하면 WP-CLI가 전체 미디어 라이브러리를 스캔하고 일괄 업데이트합니다. 포스트 200개 분량도 3분이면 끝납니다.

④ 내부 링크 구조 분석과 추천

내부 링크가 SEO에 중요하다는 건 알지만 어떻게 구조를 짜야 할지 막막한 분들이 많아요. “내부 링크가 없는 포스트 찾아서 어디에 링크 넣을지 추천해줘”라고 하면 전체 포스트를 분석해 연결 가능한 포스트 쌍을 목록으로 뽑아줍니다.

⑤ 주간 SEO 리포트 자동 생성

“이번 주 SEO 현황 요약해서 리포트 만들어줘”라고 하면 색인 수, 평균 순위, CTR, 개선된 항목을 자동으로 집계해 마크다운 리포트 파일로 저장합니다. 매주 수동으로 GSC를 들여다보는 수고를 없앨 수 있어요.

시작하는 방법: 딱 하나만 직접 하면 됩니다

이 설정에서 사람이 직접 해야 하는 건 SSH 연결 하나뿐입니다. 카페24 기준으로는 호스팅 관리자 → 보안관리 → SSH 접속관리에서 활성화하고 SSH 키를 등록하면 돼요. 이후 Claude Code와 연결 정보를 설정하는 것까지 끝나면 나머지는 모두 Claude에게 맡길 수 있습니다.

WP-CLI 경로 설정도, 백업 자동화 스크립트 작성도, GSC 연동 설정도 전부 Claude에게 지시하면 됩니다. “작업 전에 항상 자동으로 DB 백업하도록 설정해줘”라고 한 마디 하면 Claude가 백업 스크립트를 만들고 규칙으로 등록해요. 이후 모든 작업 전에 타임스탬프 스냅샷이 자동으로 생성됩니다.

주의사항: 서버 직접 수정이라 롤백이 없습니다

이 방법의 한 가지 주의점은 서버를 직접 수정하기 때문에 즉각적인 롤백이 없다는 점입니다. 카페24는 하루 한 번 백업을 제공하지만, 오늘 여러 작업을 했다면 작업 직전 상태로 되돌리기 어려울 수 있어요. 그래서 앞서 언급한 DB 스냅샷 자동화가 중요합니다. 작업마다 타임스탬프가 붙은 백업 파일이 생성되어 있으면, 문제가 생겼을 때 원하는 시점으로 정확하게 복구할 수 있습니다.

PHP 파일을 수정하는 경우라면 Claude가 자동으로 .bak 파일을 만들어두도록 규칙을 추가해두는 것도 좋은 방법이에요. 모르면 Claude한테 물어보면 됩니다. 설정 방법을 모른다고 해서 못 쓰는 도구가 아닙니다.

자주 묻는 질문

코딩을 전혀 몰라도 사용할 수 있나요?

네, 가능합니다. Claude Code는 한국어로 지시를 받아 서버 명령어로 변환해줍니다. 명령어를 직접 입력할 일은 거의 없어요. SSH 연결 설정만 처음 한 번 하면 이후 모든 작업은 자연어로 지시할 수 있습니다.

카페24 호스팅에서도 동작하나요?

네, 동작합니다. 단, 카페24에서 WP-CLI를 실행할 때는 PHP 경로를 직접 지정해야 합니다. 이 부분도 Claude에게 “카페24에서 WP-CLI 실행하도록 설정해줘”라고 하면 알아서 처리해줍니다.

GSC CLI 연동이 어렵지 않나요?

GSC CLI는 OAuth 토큰을 최초 한 번 발급받아야 해서 초보자에게 다소 복잡할 수 있습니다. 처음에는 GSC 웹에서 CSV로 내보낸 파일을 Claude에게 드래그해서 분석하는 방식으로 시작하는 걸 권장드립니다. 익숙해지면 단계적으로 자동화 수준을 높여가시면 돼요.

작업 중 사이트가 다운되면 어떻게 하나요?

Claude에게 “작업 전에 항상 DB 백업부터 해줘”라는 규칙을 CLAUDE.md에 추가해두면, 이후 모든 작업 전에 타임스탬프 백업이 자동 생성됩니다. 문제가 생기면 wp db import 명령으로 특정 시점으로 복구할 수 있어요.

이걸 배우는 데 얼마나 걸리나요?

SSH 연결 설정에 30분 정도 걸립니다. 이후 Claude Code 설치와 연결 정보 입력까지 포함하면 총 1시간 내외예요. 그 이후부터는 익숙해질수록 활용 범위가 자연스럽게 넓어집니다.

마무리

모르는 게 문제가 아닙니다. 모른다는 걸 Claude한테 말하지 못하는 게 문제예요. PHP가 무섭다면 Claude한테 시키면 됩니다. 백업 설정을 모른다면 Claude한테 시키면 됩니다. GSC 오류 해석이 어렵다면 Claude한테 물어보면 됩니다.

SSH 연결 하나만 직접 하세요. 그 이후는 말 한 마디로 서버가 움직입니다.


작성: 전시진 | 시리얼(Sireal)

딸깍이면 된다더니, 왜 이렇게 힘든 걸까

솔직히 말하겠습니다. 누가 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가 확실히 강합니다.

클로드 코드 스킬로 PPT 없이 슬라이드 만드는 방법

클로드 코드(Claude Code)를 사용하면 “슬라이드 만들어줘” 한마디로 고퀄리티 프레젠테이션 슬라이드를 생성할 수 있습니다. 이 글에서는 클로드 코드에서 사용할 수 있는 Slide Generator 스킬의 설치부터 커스터마이징, 활용법까지 단계별로 안내합니다.

노트북LM이나 Claude에게 “PPT 만들어줘”라고 해본 적 있으신가요? PPTX 파일을 받아서 열어보면 글자가 깨지거나, 레이아웃이 뭉개져 있는 경우가 많습니다. 디자인을 수정하려 해도 AI가 생성한 PPTX는 구조가 복잡해서 손대기가 어렵습니다.

글자 오류가 많은 노트북LM으로 생성한 이미지
글자 오류가 많은 노트북LM으로 생성한 이미지

이 문제를 해결하기 위해 만든 것이 클로드 코드용 Slide Generator 스킬입니다. PPTX 대신 HTML로 슬라이드를 생성하고, 브라우저에서 바로 확인하고 html을 수정한 다음, 이미지(PNG)로 캡처하는 방식입니다. HTML/CSS 기반이라 디자인 수정이 훨씬 쉽고, 이미지 캡처이므로 글자가 깨질 일이 없습니다.

Notion핵심기능
Notion핵심기능

클로드 코드가 없어도 사용할 수 있습니다. 이 글 하단에서 스킬 파일을 다운로드한 뒤, Claude 대화창에 첨부하면 바로 동작합니다. 다만 클로드 코드에 설치해두면 매번 첨부할 필요 없이 자동으로 인식되기 때문에 훨씬 편합니다.

한 가지 알아둘 점이 있습니다. 버튼이나 뱃지처럼 도형 안에 글자를 넣는 디자인은 html2canvas로 캡처할 때 글자가 하단으로 밀리는 경향이 있습니다. 그래서 이 스킬은 미니멀 텍스트 스타일을 기본으로 채택했습니다. 도형 장식 없이도 충분히 깔끔한 결과물이 나옵니다.

생성되는 HTML 파일 안에 ZIP 전체 다운로드와 개별 PNG 저장 기능이 이미 포함되어 있으니, 브라우저에서 열고 버튼만 누르면 고해상도 이미지를 바로 받을 수 있습니다.

 

이 글의 순서에 대해

이 글에서는 클로드 코드 설치 방법을 뒤쪽에 배치했습니다. 이유가 있습니다.

이 스킬은 디자인 시스템(컬러, 폰트, 브랜드명 등)을 포함하고 있어서, 먼저 파일을 받고, 디자인을 나에게 맞게 수정한 다음, 클로드 코드에 설치하는 것이 가장 효율적입니다. 물론 문서만으로 완벽하게 맞출 수는 없기 때문에, 설치 후 테스트하면서 다시 수정하는 과정도 함께 안내합니다.


1. 클로드 코드 스킬 파일 다운로드

아래 링크에서 스킬 파일을 다운로드하세요.

클로드 코드 스킬 다운받기

※ 왼쪽 상단 다운로드 버튼이 있습니다.

ZIP 파일을 풀면 3개의 파일이 들어 있습니다.

  • SKILL.md — 클로드 코드가 읽는 워크플로우와 생성 규칙이 담긴 핵심 파일
  • references/design-system.md — 컬러, 폰트, 컴포넌트 정의 (디자인 수정은 주로 이 파일)
  • references/layouts.md — 6가지 레이아웃 패턴 코드

다운로드가 완료되면, 바로 설치하지 마세요. 먼저 디자인 파일을 내 스타일에 맞게 수정하는 과정을 거치는 것이 좋습니다.


2. 디자인 파일을 내 스타일에 맞게 수정하기

클로드 코드에 설치하기 전에 가장 중요한 단계입니다. 기본 디자인은 SIREAL 브랜드 기준으로 되어 있으므로, 우리 기업이나 내 스타일에 맞게 바꿔야 합니다.

직접 파일을 열어서 수정할 수도 있지만, 아래 프롬프트 템플릿을 채워서 Claude에게 보내면 자동으로 수정해줍니다.

다운로드한 파일의 압축을 푼 다음 “references/design-system.md” 파일을 클로드 코드나 Gemini에 던지고, 아래 프롬프트를 사용합니다.

디자인 변경 프롬프트 템플릿

아래 템플릿의 [ ] 부분만 채워서 Claude에게 보내세요. 변경하지 않을 항목은 그냥 지우면 됩니다.

첨부한 design-system.md 파일을 아래 설정에 맞게 수정해줘.

## 브랜드
- 브랜드명: [예: 우리회사, MyBrand]
- 브랜드명 letter-spacing: [기본 6px / 한글 브랜드명이면 3px 추천]

## 컬러
- 메인 컬러(--main): [예: #FF6600, 에르메스 오렌지]
- 메인 밝은 버전(--main-lt): [예: #FF8C42 / 모르면 "메인 컬러 기준으로 밝게 해줘"]
- 슬라이드 배경(--bg): [기본 #F9F9F9 / 변경 시 입력]
- 보조 배경(--bg-sub): [기본 #F3F2F7 / 변경 시 입력]
- 본문 글자색(--text): [기본 #333333]
- 비활성 글자색(--muted): [기본 #9B9B9B]

## 폰트
- 폰트: [예: Pretendard, IBM Plex Sans KR / 기본 Noto Sans KR]
- Google Fonts URL: [모르면 "알아서 찾아줘"도 OK]

## 슬라이드 크기
- 비율: [기본 16:9 (1920x1080) / 변경 시 입력, 예: 4:3]

## 기타
- 카드 모서리 둥글기: [기본 32px / 더 각지게 하려면 줄이기, 예: 12px]
- 카드 그림자: [기본 유지 / 없애려면 "그림자 제거"]
- 추가 요청사항: [자유 입력]

컬러 코드를 모르더라도 “에르메스 오렌지로 해줘”처럼 자연어로 설명하면 Claude가 적절한 코드를 찾아서 적용합니다.

각 항목이 실제로 바꾸는 것

브랜드 컬러 — 가장 효과가 큰 변경

CSS 변수 6개가 전체 색상을 제어합니다. --main 하나만 바꿔도 헤더, 카드 스트라이프, 강조 텍스트, 번호 색상이 전부 변경됩니다. 변수 기반 설계라서 한 곳만 수정하면 전체에 반영되는 구조입니다.

브랜드명

헤더 좌측 로고 텍스트, 우측 하단 워터마크, 다운로드 ZIP 파일명에 들어갑니다. “SIREAL”을 내 브랜드명으로 일괄 치환하면 됩니다.

폰트

Google Fonts에서 제공하는 폰트라면 URL만 교체하면 됩니다. 폰트가 바뀌면 글자 크기나 줄 간격을 미세하게 조정해야 할 수 있습니다.

슬라이드 크기

기본은 16:9(1920×1080)입니다. 변경할 경우 SKILL.md의 캡처 해상도 설정도 함께 수정해야 합니다. 프롬프트에 “SKILL.md도 같이 수정해줘”라고 추가하면 간단합니다.

컴포넌트 스타일

카드 모서리(border-radius), 그림자(box-shadow), 하단 강조 바, 테이블 스타일 등을 조정할 수 있습니다. 더 각진 느낌을 원하면 border-radius를 줄이고, 더 플랫한 느낌을 원하면 그림자를 제거하면 됩니다.

(고급) 클로드 코드 워크플로우 자체를 수정하기

디자인뿐 아니라 스킬의 동작 방식도 바꿀 수 있습니다. SKILL.md 파일에서 기획서 형식, 출력 경로, 파일명 규칙, 레이아웃 자동 선택 기준 등을 변경할 수 있습니다. 다만 이 부분은 스킬 구조를 이해한 후에 수정하는 것을 추천합니다.


3. 클로드 코드에 스킬을 설치하는 방법

디자인 파일 수정이 끝났다면, 이제 설치할 차례입니다. 두 가지 방법이 있습니다.

방법 A: Claude 대화창에 파일 첨부하기 (가장 간단)

수정한 스킬 파일 3개를 Claude 대화창에 그대로 첨부하면 됩니다. 클로드 코드가 없어도 바로 사용할 수 있습니다. 다만 새 대화를 시작할 때마다 다시 첨부해야 하는 단점이 있습니다.

방법 B: 클로드 코드에 직접 설치하기

클로드 코드를 사용하고 있다면, 프로젝트 폴더 안에 스킬 파일을 배치하는 것이 훨씬 편합니다. 한번 설치하면 매번 첨부할 필요 없이 자동으로 인식됩니다.

  1. 프로젝트 루트에 claude-skills/skills/slide-generator/ 폴더를 만듭니다
  2. 수정한 파일 3개(SKILL.md, references/design-system.md, references/layouts.md)를 넣습니다
  3. 클로드 코드에서 “슬라이드 만들어줘”라고 말해서 스킬을 인식하는지 확인합니다

VS Code나 Cursor에서 클로드 코드 확장을 사용하고 있다면, 같은 방식으로 프로젝트 폴더에 배치하면 자동으로 인식됩니다.

 

방법 C: 클로드 > 사용자 지정 > 스킬에 업로드하기

아래 이미지처럼 클로드 데스크톱 앱을 열어 사용자 지정 > 스킬 > + > 스킬 업로드를 눌러 파일을 업로드 합니다.

이 때, 알집 파일을 업로드 해야하므로, 파일의 압축을 풀어 디자인을 수정했다면, 수정한 파일을 함께 압축하여 업로드 하면 됩니다.

클로드의 사용자 지정에 스킬 업로드하기
클로드의 사용자 지정에 스킬 업로드하기

4. 클로드 코드 슬라이드 스킬 사용법

설치가 완료되면, 클로드 코드에서 슬라이드를 요청하기만 하면 됩니다. 스킬은 아래 5단계로 동작합니다.

5단계 워크플로우

  1. 콘텐츠 파악 — 주제, 슬라이드 수, 레이아웃 타입 등을 입력에서 추출
  2. 레이아웃 자동 선택 — 콘텐츠 구조에 맞는 레이아웃을 자동으로 결정
  3. 기획서 생성 — HTML 생성 전에 기획서를 먼저 작성하고 사용자 확인을 받음
  4. HTML 슬라이드 생성 — 디자인 시스템을 적용하여 HTML 파일 생성
  5. 파일 출력 — 기획서(.md)와 HTML 파일을 저장
  6. 이미지 다운 — html 파일을 모두 수정한 후 이미지를 다운

기획서 단계가 있기 때문에, HTML이 생성되기 전에 내용을 확인하고 수정을 요청할 수 있습니다. “카드 B 제목을 이걸로 바꿔줘”, “하단 강조 문구를 변경해줘” 같은 요청이 가능합니다.

클로드 코드 프롬프트 예시

“데이터베이스란 무엇인가”를 주제로 슬라이드를 만들어보겠습니다.

데이터베이스의 종류를 비교하는 슬라이드 만들어줘.
관계형 DB, NoSQL, NewSQL 세 가지를 플로우차트 레이아웃으로 보여줘.

이렇게 요청하면 클로드 코드가 기획서를 먼저 보여주고, 확인 후 HTML을 생성합니다.

 

생성된 파일 확인하기

HTML 파일을 브라우저에서 열면 슬라이드가 바로 보입니다. 우측 상단에 ZIP 버튼과 개별 다운로드 버튼이 있어서, 클릭하면 고해상도 PNG 이미지를 받을 수 있습니다.

vs code, cursor 같은 곳에서 html 을 보고 싶다면, 플러그인 중 Live server를 설치하면 html 파일에서 마우스 우클릭으로 생성한 슬라이드를 볼 수 있습니다.

커서의 html 파일에서 마우스 우클릭 후 Live server를 누르기
커서의 html 파일에서 마우스 우클릭 후 Live server를 누르기


5. 클로드 코드 설치 후 테스트와 재수정

디자인 파일을 문서만 보고 수정했기 때문에, 클로드 코드로 실제 생성한 결과물이 의도와 다를 수 있습니다. 아래 체크리스트로 확인해보세요.

결과물 확인 체크리스트

  • 컬러가 의도한 대로 나오는가?
  • 브랜드명이 올바르게 표시되는가?
  • 폰트가 정상적으로 로드되는가?
  • 레이아웃 선택이 적절한가?
  • 글자 크기와 여백이 자연스러운가?

수정이 필요하다면, 두 가지 방법이 있습니다.

직접 디자인 파일을 수정하기 — 2번(디자인 파일 수정)으로 돌아가서 값을 조정합니다.

클로드 코드에게 수정을 요청하기 — “design-system.md에서 메인 컬러를 좀 더 진하게 바꿔줘”처럼 요청하면 클로드 코드가 디자인 파일 자체를 수정해줍니다. 테스트와 수정을 반복하면서 점점 원하는 결과에 가까워집니다.


6. 클로드 코드 슬라이드 레이아웃 종류 가이드

이 스킬은 6가지 레이아웃 패턴을 제공합니다. 클로드 코드가 콘텐츠에 맞는 레이아웃을 자동으로 선택하지만, 직접 지정할 수도 있습니다.

플로우차트 3단

3개 노드가 좌에서 우로 흐르는 아키텍처, 프로세스 표현에 적합합니다. “A에서 B를 거쳐 C로 가는 흐름”을 보여줄 때 사용하세요.

프롬프트 예시: “마이크로서비스 요청 처리 흐름을 플로우차트 3단으로 만들어줘”

벤토 그리드 2×2 / 3×2

4~6개 항목을 동등하게 나열할 때 사용합니다. 각 항목이 독립적이고 순서가 없는 경우에 적합합니다.

프롬프트 예시: “프로젝트 관리 도구 4가지를 벤토 그리드로 비교해줘”

좌우 비교

두 가지 옵션이나 방법론을 나란히 비교할 때 사용합니다. 중앙에 VS 구분선이 들어갑니다.

프롬프트 예시: “모놀리식 vs 마이크로서비스를 좌우 비교 레이아웃으로 만들어줘”

타임라인 수평

단계별 프로세스를 좌에서 우로 나열합니다. 순서가 있는 4~6개 항목에 적합합니다.

프롬프트 예시: “소프트웨어 개발 생명주기를 타임라인으로 만들어줘”

단일 풀카드

핵심 메시지 하나를 크게 강조하고 싶을 때 사용합니다. 카드 내부를 2컬럼으로 나눠서 텍스트와 시각 요소를 함께 배치할 수도 있습니다.

프롬프트 예시: “우리 팀의 미션 선언문을 한 장 슬라이드로 만들어줘”

피라미드

3~4단계 계층 구조를 표현합니다. 위에서 아래로 갈수록 넓어지는 형태입니다.

프롬프트 예시: “데이터 거버넌스 계층 구조를 피라미드로 만들어줘”


7. 클로드 코드 프롬프트 팁과 활용 예시

클로드 코드에서 잘 만들어진 프롬프트와 대충 쓴 프롬프트는 결과물 품질에 큰 차이를 만듭니다.

좋은 프롬프트의 조건

  • 주제를 구체적으로 — “슬라이드 만들어줘” 대신 “데이터베이스의 종류를 비교하는 슬라이드 만들어줘”
  • 레이아웃을 지정 — “플로우차트로”, “좌우 비교로”, “벤토 그리드로” 등 원하는 형태를 말하면 정확도가 올라감
  • 장수는 적게 — 장수를 줄일수록 한 장의 밀도가 올라감. 핵심만 1장으로 정리하는 것도 좋은 방법

상황별 프롬프트 템플릿

  • 강의 자료: “~를 처음 배우는 학생에게 설명하는 슬라이드 만들어줘”
  • 회의 보고: “~프로젝트 진행 현황을 요약하는 슬라이드, 항목 4개”
  • 비교 분석: “A와 B를 좌우 비교 레이아웃으로 만들어줘”
  • 프로세스 설명: “~하는 과정을 플로우차트로 만들어줘”
  • 여러 장 덱: “~주제로 5장짜리 슬라이드 덱을 만들어줘”

기획서 단계에서 수정하기

클로드 코드의 이 스킬은 HTML을 바로 만들지 않고, 기획서를 먼저 보여줍니다. 이 단계에서 수정을 요청하는 것이 가장 효율적입니다. “카드 B 제목을 ~로 바꿔줘”, “하단 강조 문구를 ~로 변경해줘”처럼 구체적으로 말하면 됩니다.

결과물 수정하기

HTML 생성 후에도 클로드 코드에서 “카드 색을 좀 더 진하게 해줘”, “폰트를 키워줘” 같은 요청이 가능합니다. 직접 HTML 파일을 열어서 CSS 값을 수정할 수도 있습니다. 브라우저의 개발자 도구(F12)를 열면 실시간으로 값을 바꿔보면서 확인할 수 있습니다.


8. 클로드 코드 슬라이드 스킬 자주 묻는 질문

클로드 코드 없이도 사용할 수 있나요?

네. 스킬 파일 3개를 Claude 대화창에 첨부하면 클로드 코드 없이도 동작합니다. 새 대화를 시작할 때마다 다시 첨부해야 하는 점만 감안하면 됩니다. 다만 클로드 코드에 설치하면 자동 인식되어 훨씬 편합니다.

PPT로 변환할 수 있나요?

직접적인 PPT 변환 기능은 없습니다. 하지만 다운로드한 PNG 이미지를 PPT에 삽입하는 방식으로 사용할 수 있습니다. 이미지 기반이라 어떤 환경에서든 동일하게 보이는 장점이 있습니다.

여러 장 슬라이드도 가능한가요?

가능합니다. 클로드 코드에서 “5장짜리 슬라이드 덱을 만들어줘”처럼 요청하면 세로 스크롤 방식으로 여러 장이 생성됩니다. ZIP 다운로드로 전체를 한 번에 받을 수 있습니다.

이미지나 사진을 넣을 수 있나요?

현재 이 스킬은 텍스트와 CSS 기반 시각 요소에 집중되어 있습니다. 외부 이미지 URL을 HTML에 직접 삽입하는 것은 가능하지만, 스킬의 기본 워크플로우에는 포함되어 있지 않습니다.

디자인이 마음에 안 들면 어떻게 수정하나요?

세 가지 방법이 있습니다. 첫째, 클로드 코드에서 “색을 바꿔줘”, “폰트를 키워줘”처럼 요청합니다. 둘째, HTML 파일을 직접 열어서 CSS 값을 수정합니다. 셋째, design-system.md 파일을 수정해서 다음 생성부터 적용되게 합니다.

다른 사람이 만든 스킬 파일을 가져와서 쓸 수 있나요?

물론입니다. 클로드 코드 스킬 파일은 단순한 텍스트(Markdown) 파일이므로, 누구든 다운로드해서 자기 프로젝트에 넣으면 바로 사용할 수 있습니다. 디자인만 자신의 브랜드에 맞게 수정하면 됩니다.


작성: 전시진 | 시리얼(Sireal)