Claude 디자인 스킬 - 한글 페이지로 다시 돌려봤다

영문 블로그에 Claude 디자인 스킬 글을 먼저 썼는데, 실험을 영어 페이지로만 돌린 게 계속 마음에 걸렸다. 한국어로 페이지를 만들면 결과가 달라질지 궁금해서 같은 실험을 한글 브리프로 다시 했다.

계기는 2026년 9월 3일 Anthropic이 frontend-design 스킬에 머지한 “Update frontend-design skill to avoid generic design defaults”라는 변경이다. 새 버전에는 AI가 만든 페이지가 자꾸 비슷해지는 모습 다섯 가지가 적혀 있다. 첫 번째가 크림색 바탕에 세리프 제목, 테라코타 포인트 색인데, 그 색을 “흔히 #D97757 근처”라고 하면서 Anthropic 자신의 Claude 액센트라고 밝힌다. 남의 페이지에서 그 색이 보이면 티가 난다는 얘기다.

세 번째는 가는 선과 각진 모서리의 신문 레이아웃이고, 다섯 번째는 작은 라벨을 고정폭 글꼴로 쓰는 것이다. 사실 이 블로그가 딱 그렇다. 모서리는 0이고 구분선은 1px이고 라벨은 mono다. 일부러 고른 것이고 스킬도 “브리프에 적힌 말이 언제나 이긴다”며 그걸 허용하지만.. 내 홈페이지가 AI 티 목록에 올라 있는 걸 보는 기분이 묘했다.

짧은 결론

Claude Code로 웹페이지를 만들고 하나만 깔겠다면 frontend-design이다. 둘이면 Vercel의 web-design-guidelines를 더한다. 앞의 것은 방향을 잡아주고 뒤의 것은 기본 품질을 점검한다. 아래 커뮤니티 스킬 셋은 더 크고 스크립트나 바이너리를 같이 들고 오니, 그게 필요할 때만 쓰면 될 것 같다.

스타 수는 2026년 10월 20일 GitHub API로 다시 셌다. 관심의 양이지 품질이 아니고, 위 두 개는 스킬 여러 개가 든 저장소라 스킬 하나짜리 저장소와 비교할 숫자가 아니다. 스킬 디렉터리나 추천 글에 도는 설치 수는 더 믿기 어렵다. frontend-design 하나에 세 배씩 차이 나는 숫자가 셋이나 있었고 출처를 끝내 못 찾아서 표에서 뺐다.

스킬이 뭔지 한 문단으로

스킬은 SKILL.md 파일이 든 폴더다. Claude Code는 세션을 시작할 때 설치된 스킬의 짧은 description만 읽고, 작업이 맞아떨어질 때 본문을 불러온다. 그래서 디자인 스킬은 페이지를 만들어 달라고 하기 전까지 거의 비용이 없다. 부르는 순간 CSS를 쓰기 전에 지시문 한두 쪽을 모델 앞에 놓는 것이고, 모델이 바뀌는 게 아니라 모델이 받는 브리프가 바뀐다.

디자인 스킬이 왜 필요한가

방향 없이 랜딩 페이지를 달라고 하면 모델은 자기가 본 랜딩 페이지들의 평균을 내놓는다. 2025년 12월에 처음 공개된 frontend-design은 금지 목록으로 이걸 막으려 했다. Inter 금지, Roboto 금지, 흰 바탕에 보라 그라데이션 금지, “흔한 선택(예를 들어 Space Grotesk)으로 수렴하지 말 것”. 톤은 맥시멀리즘부터 브루탈리즘까지 “극단을 고르라”고 했다.

9월 개정판을 보면 그게 너무 잘 먹혀서 새로운 평균이 생긴 것 같다. 크림과 테라코타, 검정에 형광 초록 하나, 모서리 없는 신문 단. 개정판은 극단을 고르라는 말을 빼고 절차를 넣었다.

순서는 이렇다

1. 먼저 짧은 토큰 계획을 쓴다. 이름 붙인 hex 색 4~6개, 서체와 역할, ASCII로 그린 레이아웃, 이 페이지만의 원칙.
2. 그 계획을 브리프와 대조한다. 비슷한 요청이면 어디서나 나올 부분이 있으면 고치고 뭘 바꿨는지 말한다.
3. 만들고, 스크린샷으로 결과를 비평하고, 끝내기 전에 “장식 하나를 뺀다”.

한번 보면 계속 눈에 밟히는 디테일도 꼽아 놨다. 제목 속 한 단어만 다른 색, 섹션마다 올려 붙인 대문자 eyebrow 라벨(제목 위 작은 라벨), 순서가 아닌 내용에 붙은 01 / 02 / 03, 섹션마다 똑같은 페이드 업. 문구 쪽 조언도 짧고 좋다. 버튼은 무슨 일이 일어나는지 말하고(“제출” 말고 “변경 사항 저장”), “발행”을 누른 뒤 뜨는 토스트는 “발행됨”이라고 한다.

다만 스킬 본문에 한글이나 비라틴 문자 얘기는 한 줄도 없다. 폰트 조언은 전부 라틴 폰트 이야기다.

같은 한국어 브리프를 두 번: 스킬이 없으면 또 크림과 주황

2026년 10월 20일, 영문 글과 같은 조건으로 브리프만 한국어로 바꿔서 두 번 돌렸다. 가상의 자전거 수리 협동조합 ‘바큇살’의 원페이지 사이트를 index.html 하나로, CSS는 인라인, Google Fonts는 허용, 이미지는 금지, 내용은 전부 한국어. 둘 다 Claude Code 2.1.304와 Opus 5.5로 빈 폴더에서 돌렸고 사용자 설정과 플러그인은 껐다. 두 번째 실행에만 frontend-design을 붙였고 Claude는 한 줄도 쓰기 전에 스킬부터 불렀다. 쉘 명령은 막아서 둘 다 자기 페이지를 스크린샷으로 확인하지는 못했다. 각각 한 번씩이니 벤치마크가 아니라 일화로 읽어야 한다.

스킬 없이는 바탕 #f3ede1에 주황 #e2552b이 나왔다. 영문 실험 때가 #f3ede1과 #e2531d였으니 바탕은 같은 값이고 주황은 거의 같다. 스킬 목록의 첫 번째 묶음 그대로다. 제목 “고장 난 자전거, 같이 고쳐요.”에서 ‘같이’만 주황색인 것도 목록에 있는 그 모습이다.

한글이라 달라진 부분도 있다. 한글에는 대소문자가 없으니 대문자 라벨이라는 티는 사라질 줄 알았는데, 대신 “자전거 수리 협동조합 · SINCE 2019”를 고정폭 글꼴에 자간 0.12em으로 벌려 놨다. IBM Plex Mono에는 한글 글리프가 없어서 한글 부분은 대체 글꼴로 나오고 자간만 벌어진다. 영어 페이지의 대문자 eyebrow가 한국어에서는 이런 모양이 되는 것 같다.

가운뎃점은 세기가 애매했다. ·가 열 번 나오는데 “수리·가격”, “세척·주유”처럼 대부분은 한국어 문장부호로 정상적인 쓰임이다. 메타 정보를 점으로 이어 붙인 건 라벨, “중급 · 인기”, 혜택 한 줄 해서 세 군데뿐이었다. 영어 기준의 티 목록이 한국어로는 그대로 옮겨지지 않는 부분이다.

스킬을 붙이니 바탕은 알루미늄 회색 #E4E7E5, 글자는 남색 #1A2233, 주 색은 공구 손잡이 파랑 #2148A6, 포인트는 밸브 황동 #C9A23A가 됐다. CSS 변수 옆에 “체인 기름때 남색”, “밸브 황동” 같은 주석까지 달려 있다. 대문자 규칙도, 화살표도, 메타용 가운뎃점도 없고 움직임은 페이지가 열릴 때 바퀴가 한 번 돌고 멈추는 것 하나뿐이다. 스킬의 “주제에 근거를 두라”는 지시가 그대로 먹힌 것 같다.

재미있는 건 영문 실험에서도 스킬을 붙인 쪽이 “공구 벽 파랑” #1d5ba6이었다는 점이다. 스킬이 없을 때도 있을 때도 언어와 상관없이 비슷한 색으로 갔다. 스킬이 평균을 없애는 게 아니라 다른 평균으로 옮기는 건지는 한 번씩 돌려서는 알 수 없다.

한글 폰트는 둘 다 똑같았다

색과 레이아웃은 확실히 달라졌는데 폰트는 그대로였다. 두 페이지 모두 제목은 Black Han Sans, 본문은 IBM Plex Sans KR이다. 제목 문구도 “고장 난 자전거, 같이 고쳐요”로 똑같다.

생각해 보면 고를 게 별로 없다. 2026년 10월 20일 기준 Google Fonts에는 1,950개 패밀리가 있고 그중 한글 서브셋이 있는 건 38개다. 요즘 한국 웹에서 자주 보이는 Pretendard는 Google Fonts에 아예 없다. 38개 중 손글씨·장식 서체를 빼면 협동조합 사이트에 쓸 만한 건 열 개 남짓이라, “흔한 선택으로 수렴하지 말라”는 조언이 한글에서는 할 수 있는 게 많지 않다.

다른 스킬도 사정은 비슷하다. UI UX Pro Max의 폰트 조합 74개 중 한글은 “Korean Modern” 하나로 제목·본문 모두 Noto Sans KR이다. Impeccable과 Taste Skill의 README에는 Korean이라는 단어가 없다.

다시 말해 한국어 페이지에서 폰트까지 다르게 가려면 스킬에 맡기지 말고 브리프에 직접 적어야 한다. 어떤 폰트를 어디서 불러올지, Google Fonts 밖(Pretendard나 눈누 폰트)을 써도 되는지까지.

비용은 Claude Code 집계로 스킬 없이 $0.37·1분 37초, 스킬을 붙여서 $0.36·1분 35초였다. 영문 때는 스킬 쪽이 10센트 더 들었는데 이번엔 차이가 없었다.

frontend-design: 방향은 주고 점검은 안 한다

Anthropic 스킬의 장점은 5분이면 다 읽는 평범한 텍스트라는 것이고 피할 것만이 아니라 시작하는 방식을 바꾼다는 것이다. 약점은 아무것도 점검하지 않는다는 것. 모바일 대응, 보이는 키보드 포커스, ‘동작 줄이기’ 설정 존중 같은 최소 품질을 요구는 하지만 지키는 건 모델에게 맡긴다.

Claude Code에서는 공식 플러그인 마켓플레이스로 설치한다.

/plugin install frontend-design@claude-plugins-official

web-design-guidelines: 점검 담당

Vercel 스킬은 정반대로 취향이 전혀 없다. SKILL.md는 최신 Web Interface Guidelines를 받아와서 파일을 대조하고 문제마다 file:line으로 보고하라는 게 전부다. 규칙이 grep으로 찾을 수 있을 만큼 구체적이다. 아이콘만 있는 버튼엔 aria-label, 대체 없는 outline: none 금지, transition: all 금지, prefers-reduced-motion 존중, 입력칸엔 autocomplete와 맞는 type, 붙여넣기 막지 않기.

이 블로그에도 CSS 규칙 세 개를 직접 grep해 봤는데 셋 다 걸리는 게 없었다. 그게 요점인 것 같다. 확인할 수 있는 규칙이니 부탁만 하는 스킬보다 확인하는 스킬이 더 쓸모 있다.

실행할 때마다 규칙을 받아오니 네트워크가 필요하고 규칙이 바뀔 수도 있다. 리뷰 결과를 재현해야 하면 사본을 고정해 두는 게 좋다.

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

Impeccable: frontend-design에 공구함을 더한 것

Impeccable은 README에서 Anthropic 스킬에서 출발했다고 밝힌다. 먼저 대상과 목적을 적은 PRODUCT.md를 만드는 설정 명령이 있고, 문제 하나씩을 겨냥한 명령이 24개 있다. /impeccable audit, critique, typeset, layout, quieter, bolder, 에러 상태와 글자 넘침을 다루는 harden 같은 것들이다. 탐지 규칙은 영문 글을 쓸 때 59개였는데 지금은 61개로 늘었다. LLM이나 API 키 없이 돌아서 CI에 넣을 수 있다.

서류상으로는 제일 완성도가 높고 제일 무겁다. 처음 쓸 때 바이너리 엔진을 내려받고 에이전트 설정에 훅을 추가할 수 있는데, 그건 직접 승인해야 한다. 중요한 저장소에서 돌리기 전에 뭘 설치하는지 읽어 보는 게 좋겠다.

UI UX Pro Max: 카탈로그

UI UX Pro Max는 데이터로 움직인다. Python 스크립트가 CSV를 검색하는데, 이름 붙은 스타일 79개(활성 50개), 제품 유형 192개에 맞춘 팔레트 192개, 폰트 조합 74개, Astro·Next.js·SwiftUI·Flutter를 포함한 스택 22개의 가이드가 들어 있다. 제품을 설명하면 금융 앱엔 “AI 보라/분홍 그라데이션” 금지 같은 안티패턴 목록이 붙은 디자인 시스템을 돌려준다.

디자인 의견이 없는데 근거 있는 출발점이 빨리 필요하면 쓸 만하다. 다만 목록에서 고른 모습은 이름만 바꾼 기본값이라는 frontend-design의 주장과는 반대 방향이다. 한글 폰트 조합이 하나뿐인 것도 위에 쓴 대로다. 내부 대시보드라면 몰라도 기억에 남아야 하는 페이지에는 안 쓸 것 같다.

Taste Skill: 자기 결과물을 보는 스킬

Taste Skill v2는 사이트 247개를 연구해서 만들었다. 스크립트가 아트 디렉션 20개 중 셋을 뽑아 주면 에이전트가 하나를 고르고 공개 아카이브의 실제 사진(출처 표기)으로 페이지를 만든다. 그다음 실제 브라우저에서 세 가지 폭으로 열어 보고 AI 티가 나면 불합격시킨 뒤 큰 문제 세 개를 최대 세 번까지 고친다.

다른 스킬에 없는 게 이렇게 브라우저로 열어 보고 고치는 반복인데, 제일 중요한 부분이기도 하다. 자기 페이지를 못 보는 모델은 짐작으로 만들 수밖에 없다. 이번 실험에서도 두 실행 모두 마지막에 “브라우저에서 열어 보지는 않았다”고 했다. 대신 Node 22+와 Chrome·Edge·Chromium 중 하나가 깔려 있어야 하고, 이미지 검색에는 네트워크가 필요하다.

결론. 나라면 두 개만 깐다

frontend-design과 web-design-guidelines. 하나는 Claude가 페이지를 시작하는 방식을 바꾸고 하나는 틀린 걸 잡아내고, 둘 다 설치 전에 끝까지 읽을 수 있는 텍스트다. 나머지는 내 컴퓨터에서 코드를 실행한다. 그게 나쁜 건 아니지만 고민이 “이 지시문이 마음에 드나”에서 “이 프로젝트를 믿나”로 바뀌니, 그건 따로 5분을 들여 볼 일이다.

한국어 페이지라면 여기에 하나를 더한다. 폰트는 스킬이 골라 주지 않으니 브리프나 프로젝트 문서에 직접 적어 둔다. 이 블로그는 영문 사이트와 시각 토큰을 같이 쓰고 그 기준이 문서로 남아 있어서 각진 모서리를 AI 티라고 부르는 스킬을 붙여도 그대로 남는다. 브리프가 이기고, 그 브리프는 적혀 있어야 한다.

다음엔 브리프에 Pretendard를 적어 넣고 한 번 더 돌려볼 생각이다. 폰트가 바뀌면 나머지도 따라 바뀌는지가 궁금하다.