클로드 디자인 스킬 5가지, 설치 방법과 쓰는 순서
클로드(Claude)에 웹사이트 디자인을 맡기기 전에 미리 설치해 두라는 클로드 디자인 스킬 5가지를 작업 순서대로 정리한다. 영상이 건너뛴 설치 방법과 제대로 들어갔는지 확인하는 지시문, 남의 사이트를 참고할 때 걸리는 저작권 선까지 채웠다.
클로드 디자인 스킬, 왜 먼저 설치하라고 하나
영상은 도입부터 단호하다. "이 다섯 개를 설치하기 전에 절대 클로드한테 디자인을 시키지 마세요." 여기서 말하는 다섯 개, 즉 클로드 디자인 스킬은 디자인 작업을 시작하기 전에 미리 설치해두는 도구들이다. 스킬은 클로드가 특정 작업을 할 때 꺼내 보는 지시서 묶음을 말한다.
다섯 개는 색을 뽑는 것부터 배포 직전 검사까지, 작업 단계 순서대로 나온다. 배포는 만든 사이트를 인터넷에 올려 누구나 볼 수 있게 공개하는 일이다.
1. 어썸 디자인 — 잘 만든 사이트를 재료로 쓴다
잘 만든 사이트에서 색상·폰트·간격·버튼을 뽑아내 완성된 디자인 시스템 형태로 클로드에 넘겨준다. 디자인 시스템은 색, 글자 크기, 여백 같은 규칙을 한 벌로 묶어 둔 것이다. 클로드가 처음부터 색상표나 여백값을 임의로 정하는 대신, 이미 검증된 값을 받아 시작하게 하는 셈이다.
2. 이미지 코드 — 스크린샷이 곧 재료다
잘 만든 웹사이트를 스크린샷으로 찍어 클로드에 넘기면, 그 스크린샷을 웹사이트(코드)로 바꿔준다. 참고할 디자인을 말로 설명할 필요 없이 이미지 한 장으로 전달하는 방식이다.
3. 테이스트 — 대충 만든 결과물을 다듬는다
클로드가 대충 만든 디자인을 웹사이트 디자인 수준으로 바꿔준다. 이 구간은 자막이 특히 흐려 발표자의 표현 그대로는 옮기지 못했지만, 역할은 "초안을 완성도 있게 끌어올린다" 쪽이다.
이 자리에서 실제로 필요한 일은 정해져 있다. 이미 만들어진 화면을 놓고 색과 여백, 글자 크기 단계를 한 벌로 다시 맞추고, 대비가 모자란 색 조합과 간격이 들쭉날쭉한 자리를 찾아 고치는 것이다. 스킬이 없어도 같은 요청을 글로 적어 시킬 수 있다.
4. 에이전트 브라우저 — 클로드가 직접 화면을 본다
클로드에게 실제 웹 브라우저 권한을 준다. 화면을 스스로 캡처해서 버그를 찾고 고치게 하는 도구다. 결과물을 사람이 눈으로 확인하기 전에 클로드가 먼저 한 번 걸러주는 셈이다.
5. 웹 디자인 가이드라인 스크린 — 배포 전 마지막 검사
버셀이 공개한 웹 인터페이스 가이드라인을 기준으로 배포 전 코드를 검사하고, 취약점과 버그를 찾아준다. 버셀(Vercel)은 웹사이트를 인터넷에 올려 운영해 주는 서비스 회사이고, 취약점은 해킹이나 오작동으로 이어질 수 있는 허술한 곳이다. 이 가이드라인은 접근성(장애가 있거나 마우스를 못 쓰는 사람도 사이트를 쓸 수 있게 하는 것), 키보드 조작, 폼 처리, 로딩과 오류 상태처럼 눈에 잘 안 띄지만 빠뜨리면 티가 나는 항목을 조목조목 적어 둔 문서다. 다섯 개 중 마지막에 배치된 이유가 짐작 가는 대목이다.
클로드 디자인 스킬 설치 방법, 영상이 건너뛴 절차
정작 "이 다섯 개를 한 번에 설치하고 적용하는 방법"은 영상 안에 없다. 발표자는 이 방법을 문서로 따로 정리해뒀고, "게으른 빌더"를 팔로우한 뒤 댓글에 "디자인"이라고 남기면 보내주겠다고 안내한다.
그 댓글을 남기지 않아도 설치 자체는 할 수 있다. 다섯 개는 성격이 두 종류로 갈리고, 종류마다 방법이 정해져 있다.
먼저 준비할 것. 여기서 말하는 설치는 클로드 코드(Claude Code)를 기준으로 한다. 클로드 코드는 터미널에서 돌아가는 개발용 클로드이고, 터미널은 글자로 명령을 입력하는 창이다. 맥은 응용 프로그램 > 유틸리티 > 터미널, 윈도우는 시작 메뉴에서 PowerShell을 검색해 연다. 클로드 코드가 아직 없다면 먼저 설치하고 로그인해 둔다.
스킬로 설치하는 것. 스킬은 클로드가 특정 작업을 할 때 참고하는 지시서 묶음이다. 폴더 하나에 SKILL.md 파일과 부속 파일이 들어 있는 형태이고, 설치는 그 폴더를 정해진 자리에 두는 게 전부다.
~/.claude/skills/<스킬 이름>/SKILL.md 나만 쓰는 자리
<프로젝트>/.claude/skills/<스킬 이름>/SKILL.md 그 프로젝트에서만, 팀과 공유
~는 내 사용자 폴더(맥이라면 /Users/내 이름)를 뜻한다. 깃허브에 올라온 스킬이라면 순서는 이렇다. 깃허브(GitHub)는 코드를 올려 공유하는 사이트다.
- 스킬 저장소 페이지에서 초록색 Code 버튼을 누르고 Download ZIP으로 내려받는다.
- 받은 압축 파일을 푼다.
- 안에서 SKILL.md가 들어 있는 스킬 폴더를 찾는다.
- 그 스킬 폴더만 위 경로로 옮긴다.
.claude처럼 점으로 시작하는 폴더는 숨김 폴더라서, 맥 Finder에서는 Command + Shift + 마침표(.)를 눌러야 보인다. - 클로드 코드를 실행하고 스킬 목록을 부르는 명령으로 확인한다. 입력창에
/를 치면 쓸 수 있는 명령 목록이 뜬다.
목록에 이름이 보이면 끝이다. 이름을 외워 부를 필요는 없고, 관련된 작업을 요청하면 클로드가 알아서 그 지시서를 집어 든다. 배포판이 플러그인 형태로 묶여 있다면 마켓플레이스를 추가한 뒤 플러그인을 설치하는 쪽이 더 간단하다. 플러그인은 스킬과 설정을 한 번에 설치하도록 묶은 꾸러미이고, 마켓플레이스는 그 꾸러미를 모아 둔 목록이다.
MCP 서버로 설치하는 것. 브라우저를 직접 조작하는 네 번째 도구처럼 클로드를 외부 프로그램에 연결하는 것들은 스킬이 아니라 MCP 서버다. MCP는 클로드가 외부 프로그램이나 서비스를 직접 쓰게 해주는 연결 규격이다. 폴더를 옮기는 것으로는 되지 않고, 실행할 명령을 등록해야 한다.
- 그 서버의 안내 문서에서 실행 줄을 찾는다. 등록할 명령은 서버마다 다르므로 적힌 줄을 그대로 옮겨 붙인다.
- 터미널에 아래 첫 줄 형식으로 입력해 등록한다.
- 둘째 줄
claude mcp list로 등록된 목록을 확인한다.
claude mcp add <이름> -- <그 서버를 실행하는 명령>
claude mcp list
- 클로드 코드를 실행하고 안에서 /mcp 를 쳐서 연결 상태를 확인한다. 목록에 뜨고 상태가 정상이면 준비된 것이다.
- 로그인이 필요한 서버는 이 화면에서 인증 절차를 밟는다.
설치한 뒤 확인하는 법. 다섯 개를 한꺼번에 붙이기 전에 하나씩 넣고 한 번씩 시켜본다. 스킬이 실제로 불려 왔는지는 결과물이 달라지는 것으로 안다. 디자인 시스템을 뽑는 첫 번째 도구를 넣었다면 이렇게 시켜 보면 된다. 아래 문장의 디자인 토큰은 색이나 여백 값을 이름 붙여 정리한 목록을 말한다.
참고할 사이트: <주소>
이 사이트에서 색상 팔레트, 글자 크기 단계, 여백 규칙,
버튼의 상태별 스타일을 뽑아 디자인 토큰으로 정리해줘.
로고와 사진, 폰트 파일은 가져오지 말고
폰트는 비슷한 무료 대체 폰트로 지정해줘.
그다음 그 토큰만 써서 소개 페이지 한 장을 만들어줘.
메뉴와 명령 이름은 버전에 따라 조금씩 달라진다. 화면에 뜨는 이름이 위와 다르면 설치된 버전의 목록에서 골라 쓰면 된다.
영상에 없는 배경 (편집자 정리)
여기부터는 영상에서 다루지 않은 내용이다. 실제로 따라 해보려면 알아야 하는 것들을 따로 정리했다.
이름부터 확인하고 시작한다
다섯 개의 이름은 모두 자막 인식을 거친 한글 표기다. 원래 영문 이름이 따로 있을 가능성이 높고, 한글 표기를 그대로 검색창에 넣으면 엉뚱한 결과가 나온다. 이름이 아니라 역할로 찾는 편이 빠르다. "스크린샷을 코드로 바꾸는 도구", "사이트에서 디자인 시스템을 추출하는 도구" 같은 식이다. 이름을 잘못 안 채로 설치를 시도하면 전혀 다른 패키지를 받게 되므로, 설치 전에 제작자와 저장소를 한 번 확인하는 게 좋다.
디자인 시스템이라는 말의 범위
첫 번째 도구가 뽑아준다는 디자인 시스템은 보통 색상 팔레트, 글자 크기와 굵기의 단계, 여백과 간격 규칙, 모서리 둥글기, 그림자, 버튼 같은 반복 요소의 상태별 모양을 한 벌로 정리한 것을 말한다. 이 값이 정해져 있으면 화면을 여러 개 만들어도 서로 어긋나지 않는다. 값이 없으면 클로드는 요청할 때마다 조금씩 다른 색과 간격을 쓴다. 결과물이 어딘가 어수선하게 느껴지는 이유의 상당 부분이 여기에 있다.
남의 사이트를 재료로 쓸 때 걸리는 선
색상값이나 간격 수치를 참고하는 것은 문제가 되기 어렵다. 그러나 로고, 일러스트, 사진, 아이콘 세트는 저작권이 있는 자산이다. 폰트는 특히 조심해야 한다. 웹페이지에서 쓸 수 있는 라이선스와 앱이나 영상에 넣을 수 있는 라이선스가 다르고, 유료 폰트를 파일째 복사해 쓰는 것은 라이선스 위반이 된다. 스크린샷을 코드로 바꾸는 도구는 화면을 그대로 재현하려 하기 때문에 이런 자산까지 딸려 들어오기 쉽다. 만든 다음에 폰트와 이미지를 자기 것으로 갈아 끼우는 단계를 아예 순서에 넣어두는 편이 안전하다.
스크린샷 한 장이 담지 못하는 것
이미지에는 그 순간의 화면만 담긴다. 마우스를 올렸을 때의 변화, 클릭한 뒤의 상태, 입력이 잘못됐을 때의 오류 표시, 화면이 좁아졌을 때의 배치 변화는 스크린샷에 없다. 결과 코드가 데스크톱에서만 그럴듯하고 휴대폰에서 무너지는 일이 흔한 이유다. 참고할 사이트가 있다면 넓은 화면과 좁은 화면을 각각 찍어 같이 넘기고, 확인하고 싶은 상태가 있으면 그 장면도 따로 찍어 주는 게 낫다.
브라우저 권한을 줄 때
클로드가 브라우저를 직접 다루게 하면 그 브라우저에 로그인돼 있는 계정도 함께 노출될 수 있다. 개인 메일이나 회사 계정이 열려 있는 평소 프로필 대신, 검사용으로 따로 만든 프로필이나 로컬 개발 서버 주소에서만 쓰는 편이 안전하다. 프로필은 한 브라우저 안에서 로그인 정보를 따로 쓰는 사용자 칸이고, 로컬 개발 서버는 만들고 있는 사이트를 내 컴퓨터에서만 미리 띄워 보는 주소다. 화면을 자동으로 눌러가며 확인하는 과정이라 실제 서비스 화면보다는 개발 중인 화면에서 돌리는 게 맞다. 다섯 번째 도구가 한다는 배포 전 검사도 코드를 읽고 규칙에 어긋난 부분을 지적하는 쪽에 가깝다. 서버 설정이나 비밀키 관리처럼 코드 밖에서 생기는 문제까지 대신 봐주지는 않는다.
다섯 개가 다 필요한 사람과 아닌 사람
소개 페이지 한 장짜리라면 첫 번째와 세 번째 정도로 충분한 경우가 많다. 참고할 화면이 이미 손에 있다면 두 번째가 시간을 가장 많이 줄여준다. 화면 수가 여러 개고 계속 고쳐가며 쓸 예정이라면 네 번째와 다섯 번째가 있어야 손이 덜 간다. 다섯 개를 한꺼번에 붙여두면 요청마다 참고할 지시가 늘어나 답이 느려지거나 엉뚱한 방향으로 갈 수 있다. 필요한 것부터 하나씩 붙이고 효과를 확인하는 순서를 권한다.
자주 묻는 질문
클로드 디자인 스킬은 어떻게 설치하나요?
스킬 폴더를 내 사용자 폴더의 .claude/skills 안에 넣으면 설치가 끝난다. 특정 프로젝트에서만 쓰려면 그 프로젝트 폴더 안의 .claude/skills에 넣는다. 브라우저 조작처럼 외부 프로그램과 연결하는 도구는 폴더가 아니라 claude mcp add 명령으로 등록한다.
스킬과 MCP 서버는 뭐가 다른가요?
스킬은 클로드가 읽고 따르는 지시서이고, MCP 서버는 클로드가 외부 프로그램을 직접 부리게 해주는 연결 통로다. 그래서 스킬은 폴더를 옮겨 설치하고, MCP 서버는 실행 명령을 등록해 설치한다.
디자인 스킬 다섯 개를 다 설치해야 하나요?
그럴 필요는 없다. 소개 페이지 한 장이라면 첫 번째와 세 번째로 충분한 경우가 많고, 화면이 여러 개인 작업에서 네 번째와 다섯 번째가 값을 한다. 한꺼번에 붙이면 답이 느려지거나 엉뚱해질 수 있으니 하나씩 넣고 효과를 확인하는 편이 낫다.
남의 웹사이트 디자인을 참고해도 저작권 문제가 없나요?
색상값이나 간격 수치를 참고하는 정도는 문제가 되기 어렵다. 로고, 일러스트, 사진, 아이콘, 폰트 파일은 저작권이나 라이선스가 걸린 자산이므로 그대로 가져오면 안 된다. 만든 뒤 폰트와 이미지를 내 것으로 바꾸는 단계를 순서에 넣어 두면 안전하다.
영상 속 스킬 이름으로 검색하면 안 나오는 이유는 뭔가요?
이름이 모두 자막 인식을 거친 한글 표기라 원래 영문 이름과 다를 가능성이 높기 때문이다. "스크린샷을 코드로 바꾸는 도구"처럼 역할로 검색하고, 설치 전에 제작자와 저장소를 한 번 확인하는 편이 빠르고 안전하다.
※ 자막 기반(빠른 모드)으로 정리했다. 화면 판독 없이 발화 내용만 근거로 삼았다.
원본 영상: youtube.com/…