스킬을 통한 프론트엔드 디자인 개선

LLM에게 지침 없이 랜딩 페이지를 구축하도록 요청하면, 거의 항상 Inter 글꼴을 따르고, 흰색 배경에 보라색 그라데이션을 적용하며, 애니메이션을 최소화하는 것을 알 수 있습니다. 

문제는 무엇일까요? 분포 수렴 샘플링 과정에서 모델은 훈련 데이터의 통계적 패턴을 기반으로 토큰을 예측합니다. 안전한 디자인 선택, 즉 보편적으로 효과적이고 누구에게도 불쾌감을 주지 않는 디자인이 웹 교육 데이터의 주요 요소입니다. 지시가 없으면 Claude는 확률이 높은 중심값으로 샘플을 추출합니다

고객에게 직접 판매하는 제품을 구축하는 개발자의 경우, 이러한 획일적인 디자인은 브랜드 정체성을 훼손하고 AI 생성 인터페이스를 즉시 알아볼 수 있게 하여 기각할 수 있습니다.

조정 가능성 문제

좋은 소식은 적절한 프롬프트가 주어지면 Claude를 원하는 방향으로 조정할 수 있다는 점입니다. Claude에게 'Inter와 Roboto를 피하라' 또는 '단색 대신 분위기 있는 배경을 사용하라'고 지시하면 결과가 즉시 개선됩니다. 이러한 지침에 대한 민감성은 Claude가 다양한 디자인 맥락, 제약 조건, 미적 선호도에 적응할 수 있다는 것을 의미합니다.

하지만 이로 인해 현실적인 어려움이 생깁니다. 작업이 전문화될수록, 더 많은 맥락을 제공해야 합니다. 프론트엔드 디자인의 경우, 효과적인 지침에는 타이포그래피 원칙, 색채 이론, 애니메이션 패턴, 배경 처리까지 포함됩니다. 다차원에 걸쳐 어떤 기본값은 피하고, 어떤 대안을 선호할지 명확히 해야 합니다.

이 모든 것을 시스템 프롬프트에 넣을 수 있지만, 그렇게 되면 Python 디버깅, 데이터 분석, 이메일 작성과 같은 모든 요청에 프론트엔드 디자인 맥락이 포함되게 됩니다. 결국 문제는 이것입니다. 관련없는 작업에는 불필요한 맥락 부담을 주지 않으면서, 필요한 순간에만 Claude에게 도메인 특화 지침을 제공하려면 어떻게 해야 할까요?

Skills: 동적 맥락 로딩

이것이 바로 Skills가 설계된 목적입니다. 불필요한 상시 부담 없이 필요할 때 전문화된 맥락을 제공하는 것입니다. Skill은 지침, 제약 조건, 도메인 지식이 포함된 문서(주로 마크다운 형식)로, Claude가 간단한 파일 읽기 도구로 액세스할 수 있도록 지정된 디렉토리에 저장되어 있습니다. Claude는 이러한 스킬을 활용해 런타임에 필요한 정보를 동적으로 로드하고, 미리 모든 정보를 로드하는 대신 맥락을 점진적으로 확장해 나갑니다. 

이러한 스킬과 이를 읽는 데 필요한 도구가 갖춰지면, Claude는 현재 작업에 따라 관련 스킬을 자동으로 식별하고 불러올 수 있습니다. 예를 들어, 랜딩 페이지를 만들거나 React 컴포넌트를 만들라는 요청을 받으면, Claude는 프론트엔드 디자인 스킬을 로드하고, 해당 지침을 적시에 적용할 수 있습니다. 이것이 핵심적인 개념 모델입니다. Skills는 필요에 따라 활성화되는 프롬프트 및 맥락적 리소스이며, 영구적인 컨텍스트 부담 없이 특정 작업 유형에 대한 전문적인 지침을 제공합니다.

이를 통해 개발자는 여러 작업에 걸쳐 서로 다른 지침을 시스템 프롬프트에 밀어 넣어서 컨텍스트 창에 과부하를 주지 않고도 Claude의 조정 가능성이라는 이점을 활용할 수 있습니다. 앞에서 설명했듯이, 컨텍스트 창에 토큰이 너무 많으면 성능 저하가 발생할 수 있으므로, 모델에서 최상의 성능을 이끌어내는 데 있어 컨텍스트 창의 내용을 간결하고 집중된 상태로 유지하는 것이 매우 중요합니다. Skills는 효과적인 프롬프트를 재사용 가능하면서 맥락화된 형태로 제공함으로써, 이러한 문제를 해결합니다.

더 나은 프론트엔드 결과물을 위한 프롬프트

프론트엔드 디자인 스킬을 만들면, 영구적인 맥락 부담 없이도 Claude에서 훨씬 개선된 UI 생성 결과를 얻을 수 있습니다.  핵심 인사이트는 프론트엔드 엔지니어의 관점에서 프론트엔드 디자인을 생각하는 것입니다. 미적 개선 요소를 실제로 구현 가능한 프론트엔드 코드로 더 많이 연결해낼수록, Claude는 이를 더 정확하게 실행할 수 있습니다.

이러한 인사이트를 바탕으로, 타이포그래피, 애니메이션, 배경 효과, 테마와 같은 몇 가지 영역에서 타깃팅된 프롬프트가 특히 효과적으로 작동한다는 점을 확인했습니다. 이러한 요소들은 Claude가 작성할 수 있는 코드로 깔끔하게 변환됩니다. 이를 프롬프트에서 구현하는 데는 상세한 기술적 지침이 필요하지 않으며, 모델이 디자인 요소를 더 비판적으로 고려하도록 유도하는 타깃팅된 표현을 사용하기만 해도 더 강력한 결과물을 이끌어낼 수 있습니다. 이 내용은 컨텍스트 엔지니어링 블로그 글에서 제시한 지침과 밀접하게 맞닿아 있습니다. 즉, 모델을 프롬프트할 때 적절한 ‘고도’를 유지하고, 정확한 16진수 색상 코드를 지정하는 것과 같은 저고도 하드코딩 논리와, 공통된 맥락을 가정하는 모호한 고고도 지침이라는 두 극단을 모두 피하는 것이 중요합니다.

타이포그래피

이를 실제로 확인하기 위해, 먼저 프롬프트를 통해 영향을 미칠 수 있는 한 가지 요소로서 타이포그래피를 살펴보겠습니다.. 아래의 프롬프트는 Claude가 더 흥미로운 글꼴을 사용하도록 구체적으로 유도합니다.

기본 프롬프트를 사용하여 생성된 결과물:

기본 프롬프트 및 타이포그래피 섹션으로 생성된 결과물

‍

흥미롭게도, 더 인상적인 글꼴을 사용하라는 지침은 디자인의 다른 측면도 개선하도록 유도한다는 것입니다. 

타이포그래피만으로도 상당한 향상이 이루어지지만, 글꼴은 여러 디자인 요소 중 하나일 뿐입니다. 그렇다면 인터페이스 전반에 걸쳐 일관된 미적 완성도를 구현하려면 어떻게 해야 할까요?

테마

프롬프트로 조정할 수 있는 또 다른 요소는 잘 알려진 테마와 미학에서 영감을 얻은 디자인입니다. Claude는 인기 있는 테마를 폭넓게 이해하고 있습니다. 이를 바탕으로 우리가 프론트엔드에서 구현하고자 하는 구체적인 미학 요소를 전달할 수 있습니다. 다음은 그 예시입니다.

이를 통해 다음과 같은 RPG 테마 UI가 생성됩니다.

타이포그래피와 테마는 타깃팅된 프롬프트가 효과가 있음을 보여줍니다. 하지만 모든 디자인 요소를 수동으로 지정하는 방식은 번거로울 수 있습니다. 이 모든 개선 사항을 재사용 가능한 하나의 자산으로 통합할 수 있다면 어떨까요?

범용 프롬프트

같은 원리가 다른 디자인 영역으로도 확장됩니다. 정적 디자인에 부족한 부분을 보완하는 모션(애니메이션과 마이크로 상호작용)으로 세련미를 더하고, 더 흥미로운 배경 선택으로 모델을 유도하며, 깊이감과 시각적 흥미를 창출합니다. 바로 이 지점에서 종합적인 Skill이 진가를 발휘합니다.

이 모든 요소를 결합하여, 400토큰 길이의 프롬프트를 개발했습니다. 이는 Skill로 로드된 경우에도 맥락을 과도하게 확장하지 않는 컴팩트한 형태로, 타이포그래피, 색상, 모션, 배경 전반에서 프론트엔드 결과물을 크게 개선합니다.

위 예제에서, 우선 Claude에게 문제에 대한 일반적인 맥락과 우리가 해결하고자 하는 목표를 제공합니다. 이와 같은 고수준 맥락을 모델에 제공하는 방식이 출력 결과를 보정하는 데 효과적인 기법임을 확인했습니다. 그런 다음 이전에 논의한 개선된 디자인 벡터를 확인하고, 모델이 이러한 모든 차원에서 더 창의적으로 사고할 수 있도록 타깃팅된 조언을 제공합니다.

또한 Claude가 다른 국소 최적해로 수렴하는 것을 방지하기 위해, 프롬프트의 마지막에 추가적인 지침을 포함합니다. 특정 패턴을 피하라는 명시적인 지침이 있더라도, 모델은 다른 일반적인 선택 사항(예: 타이포그래피를 위한 Space Grotesk)을 기본값으로 선택할 수 있습니다. 마지막에 ‘틀에서 벗어나 생각하라’고 다시 한 번 상기시키는 것은 창의적인 변화를 강화하는 데 도움이 됩니다.

프론트엔드 디자인에 미치는 영향‍

이 Skill을 활성화하면, Claude는 다음과 같은 여러 프론트엔드 디자인 유형에서 결과물을 개선하고 있습니다. 

예제 1: SaaS 랜딩 페이지

예제 2: 블로그 레이아웃

예제 3: 관리 대시보드

‍

Skills를 활용한 Claude.ai의 아티팩트 품질 개선

디자인 취향만이 유일한 제약 조건은 아닙니다. 또한 Claude는 아티팩트 구축 시 아키텍처의 제약에 직면하게 됩니다. 아티팩트는 Claude가 생성해 채팅 옆에 표시하는 편집 가능한 상호 작용 콘텐츠(예: 코드나 문서 등)입니다.

위에 설명된 디자인 취향 문제 외에도, Claude는 claude.ai에서 훌륭한 프론트엔드 아티팩트를 생성하는 능력을 제한하는 또 다른 기본 동작을 가지고 있습니다. 현재 Claude는 프론트엔드 제작을 요청받으면 CSS와 JS가 포함된 단일 HTML 파일만 구축합니다. 왜냐하면 Claude는 프론트엔드가 아티팩트로 올바르게 렌더링되려면 단일 HTML 파일이어야 한다는 것을 이해하고 있기 때문입니다.

인간 개발자가 단일 파일에 HTML/CSS/JS만 작성할 수 있다면 매우 기본적인 프론트엔드 아티팩트만 생성할 수 있을 것으로 예상되는 것처럼, Claude에게 더 풍부한 도구를 활용하라는 지침을 내리면 더 인상적인 프론트엔드 아티팩트를 생성할 수 있을 것이라는 가설을 세웠습니다.

이를 통해 Claude의 컴퓨터 활용 능력을 사용한 web-artifacts-builder skill을 개발하고, 여러 파일과 React, Tailwind CSS, shadcn/ui 같은 최신 웹 기술을 활용해 아티팩트를 구축하도록 Claude를 안내합니다. 내부적으로 이 Skill은 (1) Claude가 기본 React 저장소를 효율적으로 설정하도록 돕고, (2) 편집 후 Parcel을 활용해 단일 파일로 모든 것을 번들로 묶어, 단일 HTML 파일 요구 사항을 충족하는 스크립트를 제공합니다. 이것이 Skill의 핵심 이점 중 하나입니다. Claude에게 정형화된 작업을 실행하는 스크립트에 대한 액세스 권한을 제공하여, 신뢰성과 성능을 향상시키는 동시에 토큰 사용량을 최소화할 수 있었습니다.

Claude는 web-artifacts-builder skill을 바탕으로, shadcn/ui의 폼 컴포넌트와 Tailwind의 반응형 그리드 시스템을 이용해 더 포괄적인 아티팩트를 생성할 수 있었습니다.

예제 1: 화이트보드 앱

예를 들어, web-artifacts-builder skill이 없어도 화이트보드 앱을 만들라는 메시지가 표시되었을 때, Claude는 매우 기본적인 인터페이스를 출력했습니다.

반면, Claude는 새로운 web-artifacts-builder skill을 활용할 때, Claude는 즉시 더 깔끔하고 기능이 풍부한 애플리케이션을 생성했으며, 여기에는 다양한 도형과 텍스트를 그리는 기능이 포함되어 있었습니다.

‍

예제 2: Task Manager 앱

마찬가지로, 작업 관리 앱을 생성하도록 요청받았을 때, Claude는 기능적이지만 매우 미니멀한 애플리케이션을 생성했습니다.

Claude는 이 Skill을 바탕으로 별도의 설정 없이도 더 많은 기능을 갖춘 앱을 만들었습니다. 예를 들어, Claude에는 사용자가 작업과 관련된 카테고리와 마감일을 설정할 수 있는 ‘Create New Task’ 양식 구성 요소가 포함되었습니다.

‍

Claude.ai에서 이 새로운 Skill을 시도하려면 Skill을 활성화한 후, 아티팩트를 생성할 때 ‘web-artifacts-builder skill을 사용’하도록 Claude에 요청하면 됩니다.

Skills로 Claude의 프론트엔드 디자인 역량 최적화

이 프론트엔드 디자인 Skill은 언어 모델 기능에 대한 더 넓은 원칙을 보여줍니다. 모델은 기본적으로 표현된 것 이상을 수행하는 능력을 가진 경우가 많습니다. Claude는 디자인 이해도가 높지만, 가이드가 없으면 분산형 수렴으로 인해 그 역량이 드러나지 않습니다. 이러한 지침을 시스템 프롬프트에 추가할 수도 있지만, 그 경우 해당 지식이 업무와 관련이 없는 요청도 항상 프런트엔드 디자인 맥락을 반영하도록 전달하게 됩니다. 반면 Skills를 활용하면 Claude가 지속적인 지침이 필요한 도구에서 모든 업무에 도메인 전문 지식을 제공하는 도구로 탈바꿈할 수 있습니다. 

Skills는 또한 고도로 맞춤화할 수 있어, 구체적인 요구 사항에 맞게 나만의 Skill을 직접 생성할 수 있습니다. 이를 통해 회사의 디자인 시스템, 특정 컴포넌트 패턴, 산업별 UI 규칙 등, Skill에 적용하고자 하는 정확한 기본 요소를 정의할 수 있습니다. 이러한 결정을 Skill로 인코딩하면, 에이전트의 사고 일부를 전체 개발팀이 활용할 수 있는 재사용 가능한 자산으로 전환할 수 있습니다. 이 Skill은 지속적이고 확장되는 조직적 지식으로 이어지며, 프로젝트 전반에서 일관된 품질을 보장합니다.

이 패턴은 프론트엔드 작업을 넘어서고 있습니다. 더 넓은 이해력을 갖고 있음에도 불구하고 Claude가 일반적인 결과물을 생성하는 모든 영역은 Skill 개발 대상이 될 수 있습니다. 이 접근 방식은 일관되게 진행됩니다. 수렴 요건을 파악하고, 구체적인 대안을 제시하며, 적절한 수준에서 지침을 구성하고, Skill을 통해 재사용할 수 있도록 합니다.

프론트엔드 개발의 경우, 이는 요청마다 프롬프트 엔지니어링 없이도 Claude가 차별화된 인터페이스를 생성할 수 있음을 의미합니다. 시작하려면 프론트엔드 디자인 가이드를 살펴보거나, Claude Code에서 새로 출시된 프론트엔드 디자인 플러그인을 사용해 보세요.

영감을 얻으셨나요? 자신만의 프론트엔드 Skills를 만들고 싶으시다면 skill-creator를 확인하세요.

‍

감사의 글
Anthropic의 Applied AI 팀인 Prithvi Rajasekaran, Justin Wei, Alexander Bricken이 마케팅 파트너 Molly Vorwerck, Ryan Whitehead와 함께 작성한 감사의 글입니다.

‍