클로드 웹디자인 스킬 5가지 설치와 사용법, AI 티 지우기
클로드 웹디자인 스킬 다섯 개를 받아 넣는 방법과 실제로 부르는 프롬프트, 쓰는 순서를 정리했다. 애니메이션, 시각 구성, 랜딩 페이지, 스크롤 연출, 레이아웃 검수까지 각 스킬이 무엇을 맡는지 보고 나면 뻔한 AI 디자인 패턴에서 벗어나는 흐름을 그대로 따라 할 수 있다.
바탕이 된 영상은 전문가들이 공개한 스킬 다섯 개를 소개한다. 스킬을 차례로 얹으면 애니메이션부터 최종 점검까지 웹사이트 제작 흐름 전체를 한 번씩 훑게 되는 구성이다. 영상은 13분짜리 원본을 짧게 압축한 쇼츠이고, 다섯 개를 "저장해두고 끝까지 보라"는 안내로 시작한다. 영상이 통째로 건너뛴 설치와 사용법은 이 글에서 채웠다.
클로드 스킬 설치 방법: 받아서 넣기까지
스킬은 클로드에게 특정 작업의 절차와 참고 자료를 파일로 묶어 쥐여주는 기능이다. 영상은 스킬 이름만 나열하고 어디서 받는지는 프로필 링크로 넘긴다. 방법 자체는 어렵지 않다.
개인이 만든 스킬은 만든 사람이 깃허브(GitHub, 개발자들이 코드를 올려 공유하는 사이트) 같은 공개 저장소에 올려둔다. 저장소는 프로젝트 하나를 담아둔 온라인 폴더라고 보면 된다. 쓰는 쪽은 여기서 내려받아 자기 환경에 넣는다.
스킬 찾아서 내려받기
- 검색창에 만든 사람 이름과 skills를 함께 넣어 원 저장소를 찾는다.
- 저장소 첫 화면의 README(저장소 설명서 파일)를 읽는다. 설치 명령 한 줄이 적혀 있으면 그걸 쓰는 게 낫다.
- 설치 명령이 없으면 저장소 화면의 초록색 Code 버튼을 누르고 Download ZIP을 골라 내려받는다.
- 내려받은 zip 파일의 압축을 푼다. 안에서
SKILL.md파일이 들어 있는 폴더 하나가 스킬 하나다.
검색으로 확인되지 않은 주소를 짐작으로 입력하지는 않는 게 좋다.
넣는 위치는 쓰는 환경에 따라 갈린다. 클로드 코드(터미널에서 쓰는 클로드)인지, 웹이나 데스크톱 앱인지에 따라 아래 둘 중 하나를 따른다.
클로드 코드에 스킬 넣기
클로드 코드라면 폴더에 넣는 것으로 끝난다. 클로드 코드가 아직 없다면 앤트로픽 공식 문서의 설치 안내부터 따른다.
어디서 작업하든 항상 쓰고 싶으면 홈 폴더 아래 ~/.claude/skills/ 에 둔다. ~는 내 사용자 폴더(맥은 /Users/내이름, 윈도우는 C:\Users\내이름)를 줄여 쓴 표시다. 이 프로젝트에서만 쓰고 팀과 같이 쓰고 싶으면 작업 폴더 안 .claude/skills/ 에 둔다. 스킬 하나가 폴더 하나이고, 그 안에 지시문 파일 SKILL.md 가 들어 있는 모양이다.
~/.claude/skills/
└── animation/
└── SKILL.md
.claude처럼 점으로 시작하는 폴더는 숨김 폴더라 평소엔 안 보인다. 터미널로 폴더를 만들고 바로 여는 편이 쉽다.
- 터미널을 연다. 맥은 응용 프로그램 > 유틸리티 > 터미널, 윈도우는 시작 메뉴에서 PowerShell을 검색해 연다.
- 아래 명령 중 내 운영체제에 맞는 한 줄을 붙여넣고 Enter를 누른다. 스킬 폴더가 만들어지고 그 폴더가 창으로 열린다.
# 맥
mkdir -p ~/.claude/skills && open ~/.claude/skills
# 윈도우 PowerShell
New-Item -ItemType Directory -Force "$HOME\.claude\skills"; explorer "$HOME\.claude\skills"
- 열린 창에 압축을 푼 스킬 폴더(
SKILL.md가 든 폴더)를 끌어다 놓는다. - 클로드 코드를 껐다 켠다.
- 입력창에
/를 치고 스킬 이름이 목록에 뜨는지 본다. 뜨면 제대로 들어간 것이다.
웹·데스크톱 앱에 스킬 올리기
웹이나 데스크톱 앱은 파일을 직접 옮길 수 없으니 설정 화면에서 올리는 방식이다.
- 스킬 폴더를 zip 파일로 압축한다. 맥은 폴더를 오른쪽 클릭해 "압축", 윈도우는 오른쪽 클릭 후 "압축(ZIP) 파일"을 고른다.
- 클로드 설정에서 기능 또는 스킬 항목을 찾아 들어간다.
- 압축한 zip 파일을 업로드하면 목록에 추가된다.
화면 이름과 경로는 버전에 따라 바뀌므로 공식 문서에서 확인하는 편이 정확하다.
클로드 웹디자인 스킬 부르는 프롬프트 예시
넣어두기만 하면 알아서 걸리는 게 아니다. 클로드는 요청 문장과 스킬 설명을 견주어 지금 쓸 물건인지 판단한다. 그래서 부를 때는 이름을 대고 무엇을 만들지 같이 적는 편이 확실하다. 영상에 프롬프트(AI에게 주는 지시 문장) 예시가 없어서 만들었다.
animation 스킬을 써서 아래를 손봐줘.
대상: 지금 열려 있는 랜딩 페이지의 상단 영역
할 일: 제출 버튼과 메뉴 항목에 마우스를 올렸을 때와 눌렀을 때의 반응,
그리고 스크롤을 내릴 때 섹션이 나타나는 방식
조건
- 움직임은 짧게. 한 동작이 0.2초를 넘지 않게
- 화려한 연출 말고 눌린 게 느껴지는 정도로
- 접근성 설정에서 움직임 줄이기를 켠 사용자에게는 애니메이션을 끌 것
- 고친 부분만 보여주고, 왜 그렇게 했는지 두 줄로 설명해 줘
마지막 두 줄이 결과를 좌우한다. 조건을 안 주면 스킬이 자기 취향대로 움직임을 잔뜩 넣는다.
검수 스킬은 다 만든 뒤에 따로 돌린다.
레이아웃 리뷰 스킬로 지금 페이지를 점검해 줘.
항목별로 나눠서, 문제가 있는 것만 짚어줘.
- 글자 크기와 줄 간격
- 글자와 배경의 밝기 차이
- 화면 폭이 좁을 때 깨지는 곳
- 키보드만으로 이동할 때 순서가 꼬이는 곳
고칠 항목에 순위를 매기고, 지금은 고치지 말고 목록만 먼저 줘.
"지금은 고치지 말고 목록만"이라고 적는 이유는, 한꺼번에 다 고치면 무엇이 어떻게 바뀌었는지 따라가기 어렵기 때문이다.
첫째, 애니메이션 스킬(Emil Kowalski)
제출 버튼을 누르거나 마우스를 올렸을 때의 움직임을 다듬고, 스크롤에 맞춘 화면 전환을 설계하는 스킬이다. 마이크로 인터랙션(버튼을 누르거나 마우스를 올릴 때 나오는 작은 반응)을 담당한다. 만든 사람은 웹 애니메이션 쪽에서 오래 알려진 인터페이스 엔지니어이고, 자기 스킬을 깃허브 공개 저장소에 올려두고 있다. 이름 뒤에 skills를 붙여 검색하면 원 저장소가 바로 나온다.
둘째, 웹 디자인 엔지니어 스킬(토나드리)
실제 웹 디자인 레퍼런스와 스타일 레시피를 참고해 페이지의 시각 구성을 점검하고 다듬는다. 레이아웃(화면에 글자, 사진, 버튼을 배치한 짜임새) 자체를 손보는 단계다. 부를 때는 "웹 디자인 엔지니어 스킬로 이 페이지의 여백과 글자 크기 체계를 정리해 줘"처럼 무엇을 볼지 좁혀 주면 된다.
셋째, 랜딩 페이지 스킬(엘리아디자인)
랜딩 페이지는 광고나 링크를 타고 온 사람이 처음 닿는 한 장짜리 페이지다. 이 스킬은 한 가지 고객 행동(전환 목표)에 집중해 페이지 구조, 카피(페이지에 들어가는 홍보 문구), 색상을 정리한다. 여러 메시지를 욕심내지 않고 하나로 좁히는 게 핵심이다. 이 스킬을 부를 때는 목표 행동을 문장에 반드시 적어야 한다. "무료 체험 신청 하나에만 집중해서 다시 구성해 줘"처럼.
넷째, 어워드 퀄리티 사이트(망토)
스크롤 기반 스토리텔링 원칙과 화면 효과를 웹사이트 설계 과정 전반에 적용한다. 스크롤 기반 스토리텔링은 화면을 내리는 데 맞춰 요소가 나타나며 페이지가 이야기처럼 흘러가게 하는 방식이다. 수상작 수준의 완성도를 노리는 단계다. 넣는 효과가 무거운 편이라 페이지가 느려질 수 있으니, 적용한 뒤 실제 기기에서 스크롤을 한 번 내려보는 게 좋다.
다섯째, 레이아웃 리뷰 스킬(약코릴)
글자, 색상, 접근성, 화면 크기별 구성, 정렬을 항목별로 나눠 점검하고, 고칠 항목을 찾아준다. 여기서 접근성은 눈이 불편하거나 키보드만 쓰는 사람도 페이지를 쓸 수 있는지를 말한다. 앞선 네 스킬로 만든 결과물을 마지막에 검수하는 자리다. 위에 적은 점검 프롬프트가 이 스킬용이다.
첫째를 뺀 나머지 네 개의 제작자 이름은 자막 발음을 그대로 옮긴 것이라 실제 표기와 다를 수 있다. 검색할 때는 스킬 성격을 함께 넣어 찾는 편이 빠르다.
웹디자인 스킬 5가지를 쓰는 순서
다섯 개를 차례로 쓰면 애니메이션, 레이아웃, 카피, 스토리텔링, 최종 리뷰까지 제작과 점검이 이어진다. 순서는 이렇게 잡는 게 자연스럽다.
- 셋째, 랜딩 페이지 스킬로 구조와 카피를 정한다.
- 둘째, 웹 디자인 엔지니어 스킬로 시각 구성을 다듬는다.
- 넷째, 어워드 퀄리티 사이트 스킬로 연출을 얹는다.
- 첫째, 애니메이션 스킬로 움직임을 손본다.
- 다섯째, 레이아웃 리뷰 스킬로 검수한다.
무엇을 말할지부터 정하고 어떻게 보일지를 나중에 손보는 순서다.
영상에 없는 배경 (편집자 정리)
여기부터는 영상에서 다루지 않은 내용이다. 실제로 따라 해보려면 알아야 하는 것들을 따로 정리했다.
클로드 스킬이 무엇인가
스킬은 클로드에게 특정 작업의 절차와 참고 자료를 미리 묶어서 쥐여주는 방식이다. 대화마다 "이런 순서로 해줘"를 다시 설명하는 대신, 그 설명을 파일로 만들어 두고 필요할 때 불러 쓰는 구조라고 보면 된다.
형태는 폴더 하나다. 안에 지시문을 담은 문서 파일이 있고, 필요하면 예제나 참고 자료, 실행 스크립트가 함께 들어간다. 지시문 맨 위에는 이 스킬이 무엇을 하는 물건인지 적는 자리가 있고, 클로드는 요청을 받으면 그 설명을 보고 지금 쓸 스킬인지 아닌지를 판단한다. 그래서 스킬 다섯 개를 넣어둬도 매번 다섯 개가 다 동작하지는 않는다.
영상에 나온 다섯 개는 모두 웹 디자인 쪽 스킬이고, 서로 겹치지 않는 단계를 하나씩 맡고 있다. 움직임, 시각 구성, 전환 설계, 전체 연출, 검수 순이다.
영상에 나온 말 정리
마이크로 인터랙션은 버튼을 누르거나 마우스를 올렸을 때 나타나는 작은 반응이다. 색이 살짝 바뀌거나, 눌린 느낌이 나거나, 로딩 표시가 도는 것들이 여기 속한다. 이 반응이 없으면 화면이 눌린 건지 아닌지 알 수 없어서 답답하게 느껴진다.
스크롤 기반 스토리텔링은 화면을 아래로 내리는 동작에 맞춰 요소가 나타나고 사라지게 해서, 페이지 자체가 이야기처럼 흘러가게 만드는 방식이다.
랜딩 페이지는 광고나 링크를 타고 들어온 사람이 처음 닿는 한 장짜리 페이지다. 여기서 말하는 전환은 그 사람이 실제로 해주기를 바라는 행동 하나를 뜻한다. 가입, 신청, 문의, 구매 중 하나로 좁히는 게 보통이다.
접근성은 눈이 잘 보이지 않는 사람이나 마우스 없이 키보드만 쓰는 사람도 페이지를 쓸 수 있게 만드는 문제다. 글자와 배경의 밝기 차이, 대체 텍스트(사진을 볼 수 없는 사람에게 읽어주는 설명 문구), 키보드 이동 순서 같은 게 점검 대상이다. 다섯째 스킬이 이 항목을 본다.
다섯 개를 한꺼번에 걸면 생기는 일
순서대로 하나씩 쓰라고 권할 만한 이유가 있다. 다섯 스킬은 각자 자기 기준으로 화면을 고치려 든다. 애니메이션 쪽은 움직임을 더 넣으려 하고, 접근성 쪽은 움직임을 줄이라고 한다. 카피를 좁히는 쪽과 연출을 화려하게 가는 쪽도 서로 방향이 다르다. 한 요청에 전부 물리면 지시가 엉켜서 결과가 어중간해진다.
만들 때는 앞의 네 개 중 지금 단계에 맞는 것 하나만 쓰고, 다섯째 검수 스킬은 결과물이 나온 뒤에 따로 돌리는 편이 낫다. 검수에서 나온 지적을 반영할 때도 한 번에 다 고치지 말고 항목을 나눠 고치는 쪽이 되돌리기 쉽다.
스킬이 안 불려올 때
가장 흔한 경우는 요청 문장과 스킬 설명이 서로 안 맞아서 클로드가 그 스킬을 쓸 자리라고 판단하지 못한 것이다. 이럴 때는 스킬 이름을 직접 대면서 시키면 된다. 그래도 안 되면 파일이 실제로 인식되는 위치에 들어갔는지, 지시문 맨 위의 이름과 설명이 제대로 적혀 있는지 확인한다.
반대로 엉뚱한 데서 자꾸 끼어드는 경우도 있다. 이건 설명 문구가 너무 넓게 적혀 있어서 생기는 일이라, 설명을 좁게 고쳐 쓰면 줄어든다.
비용과 전제 조건
스킬 자체는 텍스트 파일 묶음이라 파일값이 따로 붙지는 않는다. 다만 스킬을 붙이면 클로드가 읽어야 할 지시문이 늘어나므로 대화 한 번에 쓰는 분량이 커진다. 사용량 제한이 있는 요금제라면 체감이 된다. 어느 요금제에서 스킬 기능이 열리는지, 한도가 얼마인지는 자주 바뀌는 값이라 공식 요금제 안내를 확인해야 한다.
만들어진 결과물을 실제 사이트로 띄우려면 별도로 도메인(사이트 주소)과 호스팅(사이트 파일을 올려두는 서버 공간)이 필요하다. 이건 스킬과 무관한 비용이다.
남이 만든 스킬을 쓸 때 확인할 것
스킬은 결국 클로드에게 읽히는 지시문 덩어리다. 내려받은 파일을 열어 한 번 읽어보고 쓰는 게 좋다. 안에 실행 스크립트가 들어 있는 스킬이라면 그 스크립트가 무엇을 하는지도 봐야 한다. 출처가 불분명한 스킬을 확인 없이 붙이는 건 출처를 모르는 프로그램을 실행하는 것과 비슷한 일이다.
이 방식이 맞는 사람과 안 맞는 사람
만들어야 할 페이지가 있고 결과물이 어딘가 밋밋하다고 느끼는 사람에게는 쓸모가 있다. 무엇이 부족한지 말로 설명하기 어려운 상태에서, 점검 항목을 대신 짚어주는 역할을 하기 때문이다.
반대로 디자인 방향이 이미 정해져 있고 브랜드 규칙이 확실한 경우에는 스킬이 넣는 기본 취향이 오히려 걸리적거린다. 만들려는 게 페이지 한 장이 아니라 여러 화면이 얽힌 서비스라면, 이 다섯 개만으로는 부족하고 화면 간 일관성을 따로 관리해야 한다.
자주 묻는 질문
클로드 스킬은 어디에 설치하나요?
클로드 코드라면 ~/.claude/skills/ 폴더에 스킬 폴더를 넣으면 된다. 한 프로젝트에서만 쓸 거라면 그 작업 폴더 안의 .claude/skills/에 둔다. 웹이나 데스크톱 앱은 스킬 폴더를 zip으로 압축해 설정 화면에서 업로드한다.
클로드 웹디자인 스킬은 무료인가요?
스킬 파일 자체는 공개 저장소에서 받는 텍스트 묶음이라 따로 돈이 들지 않는다. 다만 클로드를 쓰는 요금제 한도 안에서 돌고, 스킬을 붙이면 한 번에 쓰는 분량이 늘어난다. 어느 요금제에서 스킬 기능이 열리는지는 공식 안내를 확인해야 한다.
웹디자인 스킬 다섯 개를 한 번에 걸어도 되나요?
한 요청에 다섯 개를 다 거는 것은 권하지 않는다. 움직임을 늘리려는 스킬과 줄이려는 스킬처럼 방향이 부딪혀 결과가 어중간해진다. 지금 단계에 맞는 스킬 하나로 만들고, 검수 스킬은 다 만든 뒤 따로 돌리는 편이 낫다.
스킬을 넣었는데 클로드가 안 쓰면 어떻게 하나요?
요청 문장에 스킬 이름을 직접 넣어 부르면 대부분 해결된다. 그래도 안 되면 스킬 폴더가 정해진 위치에 들어갔는지, SKILL.md 맨 위의 이름과 설명이 제대로 적혀 있는지 본다. 클로드 코드는 폴더를 넣은 뒤 한 번 껐다 켜야 목록에 잡힌다.
자막 기반(빠른 모드)으로 정리했다. 화면 캡처 없이 음성 자막만 확인한 내용이라, 실제 화면 조작 장면은 이 글에 없다.
원문: youtube.com/…