Skills를 활용해 프론트엔드 디자인 개선하기
이 글은 Anthropic 블로그의 “Improving frontend design through Skills”를 번역한 글입니다. 원문의 구조와 의도를 최대한 유지하되 한국어로 읽었을 때 어색하지 않도록 필요한 범위에서만 표현을 다듬었습니다.
Claude와 Skills를 활용해 더 풍부하고 더 맞춤화된 프론트엔드 디자인을 만드는 모범 사례를 소개한다.
LLM에게 별다른 가이드 없이 랜딩 페이지를 만들어 달라고 요청해 보면, 거의 항상 비슷한 결과가 나온다는 점을 눈치챌 수 있다.
Inter 폰트, 흰 배경 위의 보라색 그라데이션, 최소한의 애니메이션.
문제는 무엇일까?
바로 분포 수렴(distributional convergence) 이다. 샘플링 과정에서 모델은 학습 데이터에 나타난 통계적 패턴을 바탕으로 토큰을 예측한다. 어디에나 무난하게 통하고 누구도 거슬려 하지 않는 안전한 디자인 선택지는 웹 학습 데이터에서 큰 비중을 차지한다. 방향을 주지 않으면, Claude는 이 높은 확률의 중심부에서 샘플링하게 된다.
고객을 대상으로 하는 제품을 만드는 개발자에게 이런 범용적인 미감은 브랜드 정체성을 약화시키고, AI가 만든 인터페이스라는 인상을 즉시 드러내며, 나아가 쉽게 외면당하게 만든다.
조정 가능성의 과제
좋은 소식은 적절한 프롬프트만 주어지면 Claude는 매우 높은 수준으로 조정 가능하다는 점이다. Claude에게 “Inter와 Roboto는 피하라”거나 “단색 배경 대신 분위기 있는 배경을 사용하라”라고 말하면 결과가 즉시 좋아진다. 이러한 민감성은 단점이 아니라 장점이다. Claude가 서로 다른 디자인 맥락, 제약 조건, 미적 취향에 맞게 적응할 수 있다는 뜻이기 때문이다.
하지만 여기에는 실질적인 어려움이 생긴다. 작업이 더 전문화될수록 제공해야 하는 컨텍스트도 더 많아진다. 프론트엔드 디자인에서는 타이포그래피 원칙, 색채 이론, 애니메이션 패턴, 배경 처리 방식까지 효과적인 가이드를 제공해야 한다. 여러 차원에 걸쳐 어떤 기본값은 피하고 어떤 대안을 선호해야 하는지도 지정해야 한다.
이 모든 것을 시스템 프롬프트에 넣을 수도 있다. 하지만 그렇게 되면 Python 디버깅, 데이터 분석, 이메일 작성처럼 모든 요청이 프론트엔드 디자인 관련 컨텍스트를 끌고 다니게 된다. 결국 질문은 이것이다. 관련 없는 작업에까지 영구적인 컨텍스트 오버헤드를 지우지 않으면서, 필요할 때 정확히 도메인 특화 가이드를 어떻게 제공할 것인가?
Skills: 동적으로 컨텍스트를 로딩하기
바로 이 문제를 해결하기 위해 Skills가 설계되었다. Skills는 영구적인 오버헤드 없이 필요할 때 전문화된 컨텍스트를 제공한다. Skill은 보통 마크다운 문서 형태로, 지침, 제약 조건, 도메인 지식을 담고 있으며, Claude가 간단한 파일 읽기 도구를 통해 접근할 수 있는 지정된 디렉터리에 저장된다. Claude는 이러한 Skill을 활용해 실행 시점(runtime)에 필요한 정보를 동적으로 불러올 수 있고, 처음부터 모든 것을 한꺼번에 로드하는 대신 컨텍스트를 점진적으로 확장해 나갈 수 있다.
Claude가 이런 Skills와 그것을 읽기 위한 도구를 갖추고 있으면, 현재 작업에 따라 관련 Skill을 스스로 식별하고 불러올 수 있다. 예를 들어 랜딩 페이지를 만들거나 React 컴포넌트를 생성하라는 요청을 받았을 때, Claude는 프론트엔드 디자인 Skill을 로드해 필요한 순간에 그 지침을 적용할 수 있다. 이것이 핵심적인 사고 모델이다. Skills는 필요할 때 활성화되는 프롬프트이자 컨텍스트 자원이며, 영구적인 컨텍스트 오버헤드 없이 특정 작업 유형에 전문화된 가이드를 제공한다.
이렇게 하면 개발자는 시스템 프롬프트 안에 서로 다른 작업을 위한 잡다한 지침을 마구 집어넣어 컨텍스트 윈도우를 과부하시키지 않으면서도, Claude의 조정 가능성이 주는 이점을 얻을 수 있다. 우리가 이전에 설명했듯, 컨텍스트 윈도우 안에 토큰이 지나치게 많아지면 성능이 저하될 수 있기 때문에, 컨텍스트 윈도우의 내용을 가볍고 목적에 맞게 유지하는 것은 모델의 성능을 최대한 끌어내는 데 매우 중요하다. Skills는 효과적인 프롬프트를 재사용 가능하고 맥락적으로 적용 가능한 형태로 만들어 이 문제를 해결한다.
더 나은 프론트엔드 출력을 위한 프롬프팅
프론트엔드 디자인 Skill을 만들면 영구적인 컨텍스트 오버헤드 없이도 Claude로부터 훨씬 더 나은 UI 생성 결과를 끌어낼 수 있다. 핵심 통찰은 프론트엔드 디자인을 프론트엔드 엔지니어처럼 바라보는 것이다. 미적인 개선을 실제 구현 가능한 프론트엔드 코드로 더 잘 매핑할수록, Claude도 그것을 더 잘 실행할 수 있다.
이 통찰을 바탕으로 우리는 타깃형 프롬프팅이 특히 잘 작동하는 몇 가지 영역을 찾아냈다. 타이포그래피, 애니메이션, 배경 효과, 테마가 그것이다. 이 요소들은 모두 Claude가 코드로 자연스럽게 옮길 수 있다. 이를 프롬프트에 반영하기 위해 상세한 기술 지시가 꼭 필요한 것은 아니다. 모델이 이러한 디자인 축을 더 비판적으로 생각하도록 유도하는 타깃형 언어만으로도 더 강한 출력을 끌어낼 수 있다. 이는 우리가 context engineering 글에서 설명한 “적절한 고도에서 프롬프트하기”라는 가이드와도 맞닿아 있다. 정확한 hex 코드까지 지정하는 저고도 하드코딩이나, 공유된 맥락이 있다고 가정하는 지나치게 모호한 고고도 지시라는 양 극단을 피하는 것이다.
Typography
이를 실제로 보기 위해, 먼저 타이포그래피를 프롬프트로 영향을 줄 수 있는 한 차원으로 생각해 보자. 아래 프롬프트는 Claude가 더 흥미로운 폰트를 사용하도록 구체적으로 유도한다.
<use_interesting_fonts>
타이포그래피는 즉시 품질의 신호를 보낸다. 지루하고 범용적인 폰트는 피하라.
절대 사용하지 말 것: Inter, Roboto, Open Sans, Lato, 기본 시스템 폰트
좋고 인상적인 선택의 예시는 다음과 같다.
코드 미학: JetBrains Mono, Fira Code, Space Grotesk
에디토리얼: Playfair Display, Crimson Pro
기술적 느낌: IBM Plex 계열, Source Sans 3
개성 있는 선택: Bricolage Grotesque, Newsreader
조합 원칙: 높은 대비가 곧 흥미로움이다.
디스플레이 폰트 + 모노스페이스, 세리프 + 기하학적 산세리프, 가변 폰트의 굵기 차이를 활용하라.
400 대 600이 아니라 100/200 대 800/900처럼 극단을 사용하라.
크기 차이도 1.5배가 아니라 3배 이상으로 주어라.
개성 있는 폰트 하나를 골라 과감하게 사용하라.
Google Fonts에서 로드하라.
</use_interesting_fonts>기본 프롬프트로 생성된 결과
기본 프롬프트와 타이포그래피 섹션을 적용해 생성된 결과
기본 프롬프트만 사용했을 때와 타이포그래피 프롬프트를 추가했을 때 결과를 비교해보면 후자가 훨씬 더 완성도 높은 UI를 생성한다.
흥미로운 점은 타이포그래피 개선이 다른 디자인 요소까지 함께 개선하도록 유도한다는 것이다.
Themes
우리가 프롬프트로 유도할 수 있는 또 다른 차원은 잘 알려진 테마와 미학에서 영감을 받은 디자인이다. Claude는 대중적인 테마에 대해 풍부한 이해를 가지고 있기 때문에, 이를 활용해 우리가 원하는 미감을 프론트엔드에 어떻게 담고 싶은지 전달할 수 있다. 예를 들면 다음과 같다.
<always_use_rpg_theme>
항상 RPG 미학으로 디자인하라.
- 풍부하고 극적인 톤의 판타지풍 색상 팔레트
- 장식적인 테두리와 프레임 요소
- 양피지 질감, 가죽 제본 스타일, 낡은 재질감
- 극적인 조명을 활용한 서사적이고 모험적인 분위기
- 장식된 헤더를 갖춘 중세풍 세리프 타이포그래피
</always_use_rpg_theme>이렇게 하면 다음과 같은 RPG 테마 UI가 만들어진다.
타이포그래피와 테마는 타깃형 프롬프팅이 효과가 있다는 점을 보여준다. 하지만 각 차원을 매번 수동으로 지정하는 것은 번거롭다. 이 모든 개선점을 하나의 재사용 가능한 자산으로 합칠 수 있다면 어떨까?
재사용 가능한 일반 프롬프트
이와 같은 원리는 다른 디자인 요소에도 동일하게 적용된다.
모션(애니메이션과 마이크로 인터랙션)에 대한 프롬프트를 추가하면 정적인 디자인에서는 부족했던 완성도를 더할 수 있고 모델이 더 흥미로운 배경을 선택하도록 유도하면 깊이감과 시각적 흥미를 만들어낼 수 있다. 이 지점에서 포괄적인 Skill의 가치가 드러난다.
이 모든 요소를 하나로 묶어, 우리는 약 400토큰 정도의 프롬프트를 만들었다. 이 프롬프트는 Skill로 로드되더라도 컨텍스트를 불필요하게 부풀리지 않을 만큼 충분히 작으면서도, 타이포그래피, 색상, 모션, 배경 전반에 걸쳐 프론트엔드 출력 품질을 극적으로 개선한다.
<frontend_aesthetics>
당신은 일반적이고 “분포 안에 있는(on distribution)” 출력으로 수렴하는 경향이 있다. 프론트엔드 디자인에서는 이것이 사용자들이 “AI 슬롭”이라고 부르는 미감으로 이어진다. 이것을 피하라. 창의적이고, 개성 있고, 놀라움과 즐거움을 주는 프론트엔드를 만들어라.
집중할 것:
- Typography: 아름답고, 독특하고, 흥미로운 폰트를 선택하라. Arial이나 Inter 같은 범용 폰트는 피하고, 프론트엔드의 미감을 끌어올릴 수 있는 개성 있는 선택을 하라.
- Color & Theme: 응집력 있는 미감을 확실히 선택하라. 일관성을 위해 CSS 변수를 사용하라. 소심하게 고르게 분산된 팔레트보다, 지배적인 색과 날카로운 포인트 컬러가 더 좋은 결과를 낸다. 영감을 얻기 위해 IDE 테마와 문화적 미감을 참고하라.
- Motion: 효과와 마이크로 인터랙션을 위해 애니메이션을 사용하라. HTML에서는 CSS만으로 해결하는 방식을 우선하라. React를 사용할 수 있다면 Motion 라이브러리를 활용하라. 가장 효과가 큰 순간에 집중하라. 흩어진 마이크로 인터랙션보다, 스태거드 리빌(animation-delay)을 활용한 잘 설계된 한 번의 페이지 로드 애니메이션이 더 큰 즐거움을 만든다.
- Backgrounds: 단색으로 기본 처리하지 말고, 분위기와 깊이를 만들어라. CSS 그라데이션을 겹치고, 기하학적 패턴을 쓰거나, 전체 미감에 맞는 맥락적 효과를 추가하라.
진부한 AI 생성 미감을 피하라:
- 과도하게 사용된 폰트 계열(Inter, Roboto, Arial, 시스템 폰트)
- 상투적인 색 구성(특히 흰 배경 위의 보라색 그라데이션)
- 예측 가능한 레이아웃과 컴포넌트 패턴
- 맥락에 맞는 개성이 없는 틀에 박힌 디자인
창의적으로 해석하고, 이 맥락을 위해 진짜로 설계된 것처럼 느껴지는 예상 밖의 선택을 하라.
라이트/다크 테마, 서로 다른 폰트, 서로 다른 미감을 다양하게 활용하라.
당신은 여전히 여러 세대에 걸쳐 흔한 선택(예를 들어 Space Grotesk)으로 수렴하는 경향이 있다. 이것을 피하라. 틀 밖에서 생각하는 것이 매우 중요하다.
</frontend_aesthetics>위 예시에서는 먼저 문제와 우리가 해결하려는 목표에 대한 일반적인 맥락을 Claude에게 제공한다. 우리는 이런 종류의 상위 수준 컨텍스트를 주는 것이 출력을 조정하는 데 유용한 프롬프팅 전략이라는 점을 발견했다. 그다음 앞서 논의한 개선 벡터들을 다시 짚고, 이 모든 차원에서 모델이 더 창의적으로 사고하도록 유도하는 타깃형 조언을 제공한다.
또한 Claude가 다른 지역 최댓값(local maximum)으로 수렴하는 것을 막기 위해 마지막에 추가 가이드를 넣었다. 특정 패턴을 피하라는 명시적인 지시가 있더라도 모델은 여전히 다른 흔한 선택지들(예: 타이포그래피에서 Space Grotesk)로 기본 회귀할 수 있다.
그리고 마지막으로 중요한 지시
“think outside the box”
이는 모델이 또 다른 “평균적인 선택”으로 수렴하는 것을 방지하기 위한 장치이다.
프론트엔드 디자인에 미치는 영향
이 Skill이 활성화되면 Claude의 출력은 다음과 같은 여러 유형의 프론트엔드 디자인에서 개선된다.
예시 1: SaaS 랜딩 페이지
Inter 폰트, 보라색 그라데이션, 전형적인 레이아웃을 사용한 AI 생성 SaaS 랜딩 페이지. Skill은 사용하지 않았다.
위 렌더링과 동일한 프롬프트에 프론트엔드 Skill만 추가해 생성한 AI 프론트엔드. 이제는 개성 있는 타이포그래피, 응집력 있는 색상 구성, 레이어드 배경을 갖추고 있다.
예시 2: 블로그 레이아웃
기본 시스템 폰트와 평평한 흰 배경을 사용한 AI 생성 블로그 레이아웃. Skill은 사용하지 않았다.
동일한 프롬프트에 프론트엔드 Skill을 적용해 생성한 AI 블로그 레이아웃. 에디토리얼 느낌의 서체, 분위기 있는 깊이감, 정제된 간격을 갖추고 있다.
예시 3: 관리자 대시보드
시각적 계층 구조가 거의 없는 표준 UI 컴포넌트를 사용한 AI 생성 관리자 대시보드. Skill은 사용하지 않았다.
동일한 프롬프트에 프론트엔드 Skill을 추가해 생성한 AI 관리자 대시보드. 대담한 타이포그래피, 응집력 있는 다크 테마, 목적 있는 모션을 갖추고 있다.
Skills를 활용한 claude.ai 아티팩트 품질 개선
디자인 감각만이 유일한 한계는 아니다. 아티팩트를 만들 때 Claude는 구조적 제약에도 부딪힌다. Artifacts는 Claude가 생성하고 채팅 옆에 표시하는 상호작용 가능하고 편집 가능한 콘텐츠(예: 코드나 문서)를 말한다.
위에서 다룬 디자인 감각 문제 외에도, Claude가 claude.ai에서 훌륭한 프론트엔드 아티팩트를 생성하는 능력을 제한하는 또 하나의 기본 동작이 있다. 현재 Claude는 프론트엔드를 만들라는 요청을 받으면 CSS와 JS를 포함한 단일 HTML 파일만 만든다. 이는 아티팩트가 올바르게 렌더링되려면 프론트엔드가 단일 HTML 파일이어야 한다고 Claude가 이해하고 있기 때문이다.
사람 개발자도 HTML/CSS/JS를 단일 파일 안에서만 작성할 수 있다면 매우 기본적인 프론트엔드밖에 만들 수 없을 것이다. 우리도 같은 방식으로 Claude에게 더 풍부한 도구를 사용하라는 지침을 주면 더 인상적인 프론트엔드 아티팩트를 생성할 수 있을 것이라고 가정했다.
그래서 우리는 web-artifacts-builder skill을 만들었다. 이 Skill은 Claude가 컴퓨터를 사용할 수 있는 능력을 활용하고 여러 파일과 React, Tailwind CSS, shadcn/ui 같은 현대적인 웹 기술을 이용해 아티팩트를 만들도록 안내한다. 내부적으로 이 Skill은 (1) Claude가 기본적인 React 저장소를 효율적으로 설정하도록 돕고, (2) 편집이 끝난 뒤 단일 HTML 파일 요구사항을 만족하도록 Parcel을 사용해 모든 것을 하나의 파일로 번들링하는 스크립트를 제공한다. 이것은 Skills의 핵심 장점 중 하나다. 보일러플레이트 작업을 실행할 수 있는 스크립트에 Claude가 접근할 수 있게 되면, 토큰 사용량을 줄이면서도 신뢰성과 성능을 높일 수 있다.
web-artifacts-builder skill을 사용하면 Claude는 shadcn/ui의 폼 컴포넌트와 Tailwind의 반응형 그리드 시스템을 활용해 더 완성도 높은 아티팩트를 만들 수 있다.
예시 1: 화이트보드 앱
예를 들어, web-artifacts-builder skill 없이 화이트보드 앱을 만들라고 하면 Claude는 매우 기본적인 인터페이스를 출력했다.
반면 새로운 web-artifacts-builder skill을 사용하면, Claude는 별도 설정 없이도 도형 그리기와 텍스트 입력 기능을 포함한 훨씬 더 깔끔하고 기능이 풍부한 애플리케이션을 생성했다.
예시 2: 작업 관리 앱
마찬가지로 작업 관리 앱을 만들라고 했을 때, Skill이 없으면 Claude는 기능은 하지만 매우 최소한의 애플리케이션을 생성했다.
Skill을 사용했을 때는 처음부터 더 많은 기능을 갖춘 앱을 생성했다. 예를 들어 Claude는 사용자가 작업에 연관된 카테고리와 마감일을 설정할 수 있는 “Create New Task” 폼 컴포넌트를 포함했다.
claude.ai에서 이 새로운 Skill을 사용해 보려면, Skill을 활성화한 뒤 아티팩트를 만들 때 Claude에게 “use the web-artifacts-builder skill” 이라고 요청하면 된다.
Skills로 Claude의 프론트엔드 디자인 능력 최적화하기
이 프론트엔드 디자인 Skill은 언어 모델의 능력에 관한 더 넓은 원리를 보여준다. 모델은 기본적으로 드러내는 것보다 더 많은 것을 해낼 능력을 갖고 있는 경우가 많다. Claude는 강한 디자인 이해력을 갖고 있지만 분포 수렴 때문에 가이드가 없으면 그 능력이 가려진다. 이런 지침을 시스템 프롬프트에 넣을 수도 있겠지만 그렇게 하면 관련이 없는 요청에도 모두 프론트엔드 디자인 컨텍스트가 따라붙는다. 반면 Skills를 사용하면 Claude는 끊임없이 지시를 받아야 하는 도구에서 벗어나 매 작업에 도메인 전문성을 가져오는 존재로 바뀐다.
Skills는 또한 매우 높은 수준으로 커스터마이즈 가능하다. 여러분의 필요에 맞춘 Skill을 직접 만들 수 있다. 회사의 디자인 시스템이든, 특정 컴포넌트 패턴이든, 산업별 UI 관례이든, Skill 안에 어떤 기본 요소를 구워 넣고 싶은지 정확히 정의할 수 있다. 이러한 결정을 Skill에 인코딩하면, 에이전트의 사고를 구성하는 요소 일부를 팀 전체가 활용할 수 있는 재사용 자산으로 바꾸게 된다. Skill은 지속되고 확장되는 조직의 지식이 되며 프로젝트 전반에 걸쳐 일관된 품질을 보장한다.
이 패턴은 프론트엔드 작업을 넘어 확장된다. Claude가 더 폭넓은 이해를 가지고 있음에도 불구하고 일반적인 출력으로 수렴하는 모든 도메인은 Skill 개발의 후보가 될 수 있다. 방법은 일관된다. 수렴하는 기본값을 식별하고, 구체적인 대안을 제공하고, 적절한 고도에서 가이드를 구조화하고, Skills를 통해 재사용 가능하게 만드는 것이다.
프론트엔드 개발에서 이것이 의미하는 바는 분명하다. Claude는 요청마다 별도의 프롬프트 엔지니어링을 하지 않아도 개성 있는 인터페이스를 생성할 수 있게 된다. 시작해 보고 싶다면 frontend design cookbook을 살펴보거나, Claude Code의 새로운 frontend design plugin을 사용해 보라.
영감을 받았는가? 직접 프론트엔드 Skill을 만들고 싶다면 skill-creator를 확인해 보라.
감사의 말
이 글은 Anthropic Applied AI 팀의 Prithvi Rajasekaran, Justin Wei, Alexander Bricken과 마케팅 파트너 Molly Vorwerck, Ryan Whitehead가 함께 썼다.
