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

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

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

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

제어 가능성 문제

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

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

이 모든 것을 시스템 프롬프트에 넣을 수 있지만, 그러면 Python 디버깅, 데이터 분석, 이메일 작성과 같은 모든 요청에 프론트엔드 디자인 맥락이 포함되게 됩니다. 그렇다면 문제는 다음과 같습니다. 관련없는 작업에는 불필요한 맥락적 부담을 주지 않으면서, 필요할 때 Claude에게 정확히 도메인별 지침을 제공하는 방법은 무엇일까요?

스킬: 동적 맥락 로딩

스킬은 바로 그 목적을 위해 설계되었습니다. 영구적인 오버헤드 없이 필요에 따라 전문화된 맥락을 제공합니다. 스킬은 지침, 제약 조건, 도메인 지식이 포함된 문서(주로 마크다운)로, Claude가 간단한 파일 읽기 도구로 액세스할 수 있도록 지정된 디렉토리에 저장되어 있습니다. Claude는 이러한 스킬을 활용해 런타임에 필요한 정보를 동적으로 로드하고, 미리 모든 것을 로드하지 않고 맥락을 점진적으로 향상시킬 수 있습니다. 

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

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

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

프런트엔드 디자인 스킬을 창출하면서, 영구적인 맥락 부담 없이 Claude에서 훨씬 개선된 UI를 얻을 수 있습니다.  핵심 인사이트는 프론트엔드 엔지니어의 관점에서 프론트엔드 디자인을 생각하는 것입니다. 미적 개선사항을 구현 가능한 프런트엔드 코드에 더 많이 매핑할수록, Claude의 실행 능력이 향상됩니다.

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

타이포그래피

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

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

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

‍

흥미롭게도, 더 흥미로운 글꼴을 사용하라는 지시는 디자인의 다른 측면도 개선하도록 유도하는 것 같습니다. 

타이포그래피만으로도 큰 성과가 나오지만, 글꼴은 하나의 차원에 불과합니다. 전체 인터페이스에 걸친 일관된 미학은 어떨까요?

테마

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

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

타이포그래피와 테마는 구체적인 프롬프팅 결과를 보여줍니다. 하지만 각 치수를 일일이 지정하는 것은 지루한 작업입니다. 이 모든 개선사항을 재사용 가능한 하나의 자산으로 통합할 수 있다면 어떨까요?

범용 프롬프트

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

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

위 예제에서, 우선 Claude에 문제에 대한 일반적인 맥락과 우리가 해결하고자 하는 목표에 대한 전반적인 맥락을 제공합니다. 이러한 유형의 고급 맥락을 모델에 제공하는 것이 결과물을 조정하는 데 도움이 되는 전략이라는 것을 발견했습니다. 그런 다음 이전에 논의한 개선된 디자인 벡터를 확인하고, 모델이 이러한 모든 차원에서 더 창의적으로 사고할 수 있도록 타겟 조언을 제공합니다.

또한 Claude가 다른 로컬 최댓값으로 수렴하지 않도록 마지막에 추가 지침을 포함합니다. 특정 패턴을 피하라는 명시적인 지침이 있더라도, 모델은 다른 일반적인 선택 사항(예: 타이포그래피를 위한 Space Grotesk)을 기본값으로 선택할 수 있습니다. 마지막 '틀에서 벗어나 생각하라'는 리마인드는 창의적인 변화를 강화하는 데 도움이 됩니다.

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

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

예 1: SaaS 랜딩 페이지

예 2: 블로그 레이아웃

예 3: 관리 대시보드

‍

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

디자인 취향만이 유일한 제약 조건은 아닙니다. 또한 Claude는 아티팩트 구축 시 아키텍처의 제약에 직면하게 됩니다. 아티팩트는 Claude가 대화형으로 생성하고 표시하는 대화형 편집 가능한 콘텐츠(코드나 문서 등)입니다.

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

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

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

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

예 1: 화이트보드 앱

예를 들어, 웹 아티팩트 빌더 스킬이 없어도 화이트보드 앱을 만들라는 메시지가 표시되었을 때, Claude는 매우 기본적인 인터페이스를 출력했습니다.

반면, Claude는 새로운 웹 아티팩트 빌더 스킬을 활용할 때, 다양한 도형과 텍스트를 그릴 수 있는 즉시 훨씬 더 깔끔하고 더 다양한 기능의 애플리케이션을 바로 생성했습니다.

‍

예 2: 작업 관리자 앱

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

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

‍

Claude.ai에서 이 새로운 스킬을 시도하려면 스킬을 활성화한 후, 아티팩트 빌딩 시에 '웹-아티팩트 빌더 스킬을 사용'하도록 Claude에 질문하면 됩니다.

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

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

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

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

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

영감을 얻으셨나요? 자신만의 프론트엔드 스킬을 만들고 싶으시다면 스킬-크리에이터를 확인하세요.

‍

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

‍