LLM과 Skills로 인터페이스를 아름답게 만들기: 프롬프트와 플러그인 실전
앞선 강의에서 AI IDE로 디자인 시안을 코드로 변환하고, 컴포넌트 라이브러리로 빠르게 인터페이스를 구축하는 방법을 배웠습니다. 하지만 한 가지尴尬한 문제를 발견하셨을 수 있습니다. 같은 요구사항인데도 AI가 생성한 페이지는 항상 뭔가 부족해 보입니다. 글꼴은 획일적인 Inter, 색상은 어디서나 볼 수 있는 보라색 그라데이션, 레이아웃은 하품이 나올 만큼 대칭적인 카드 그리드, 전체 페이지에서 진한 "AI 느낌"이 풍깁니다.
이것은 AI의 잘못이 아닙니다. 무엇** 스타일**을 원하는지 말해주지 않았기 때문입니다.
미용실에 가는 것을 상상해 보세요. "머리 좀 잘라주세요"라고만 말하면 미용사는 안전하지만 평범한 결과를 줄 것입니다. 하지만 "일본식 내추럴 웨이브, 앞머리는 팔자형, 길이는 쇄골까지, 레이어감이 뚜렷하게"라고 말하면 기대에 맞는 결과를 얻을 수 있습니다.
AI도 마찬가지입니다. 명확한 미적 방향을 설명해 주어야 아름답고 독특한 인터페이스를 생성할 수 있습니다.
이번 강의에서는 AI가 아름다운 인터페이스를 생성하는 두 가지 방법을 알려드립니다.
- 정교하게 설계된 프롬프트 템플릿 - 자연어로 AI에게 원하는 미학적 스타일을 전달
- 프론트엔드 Skills 플러그인 - AI가 전문 디자인 사양을 자동으로 로드하도록 설정
이번 강의에서 배울 내용
- AI가 기본적으로 생성하는 인터페이스가 "평범한" 이유 이해
- 디자인 스타일을 설명하는 5가지 차원(글꼴, 색상, 레이아웃, 애니메이션, 세부사항) 파악
- 인터페이스를 아름답게 만드는 3가지 Skills 플러그인 사용법 학습
- 세 가지 실전 시나리오를 통해 프롬프트 + Skills로 아름다운 인터페이스 생성 연습
1. AI가 기본적으로 생성하는 인터페이스가 "평범한" 이유는?
AI의 학습 데이터에는 방대한 프론트엔드 코드가 포함되어 있으며, 대부분의 코드는 "안전한" 선택을 사용합니다.
| 차원 | AI의 기본 선택 | 문제점 |
|---|---|---|
| 글꼴 | Inter, Roboto, Arial | 너무 흔하여 개성이 없음 |
| 색상 | 보라색 그라데이션, 파란색 메인 컬러 | 기술 업계에서 과도하게 사용되어 시각적 피로 유발 |
| 레이아웃 | 대칭 그리드, 카드 스택 | 예측 가능하여 놀라움이 부족 |
| 애니메이션 | 페이드 인/아웃, 간단한 hover | 정교하지 않고 깊이가 부족 |
| 배경 | 단색, 단순 그라데이션 | 단조롭고 질감이 없음 |
이러한 선택은 개별적으로 보면 모두 좋지만, 모든 AI 생성 페이지가 이것들을 사용할 때 "AI 느낌"이 됩니다.
💡 핵심 인사이트: AI가 디자인을 못하는 것이 아니라, 기본적으로 "통계적 평균"으로 돌아갑니다. 평균에서 벗어나는 방향을 명확하게 알려주어야 합니다.
2. 방법 1: 프롬프트로 디자인 스타일 설명하기
2.1 디자인 스타일의 5가지 차원
아름다운 인터페이스를 생성하려면 5가지 차원에서 원하는 효과를 설명해야 합니다.
| 차원 | 설명 포인트 | 예시 키워드 |
|---|---|---|
| 글꼴 | 제목은 굵은 디스플레이 폰트, 본문은 읽기 쉬운 폰트 | Space Grotesk, Playfair Display, JetBrains Mono |
| 색상 | 메인 컬러 + 포인트 컬러, 균등 분포 피하기 | #4F46E5 메인 + #F59E0B 포인트 |
| 레이아웃 | 비대칭, 겹침, 그리드 깨기 | Bento Grid, 비대칭 분할, 부유 요소 |
| 애니메이션 | 정교한 페이지 로딩, 마이크로 인터랙션 | staggered reveals, 스크롤 트리거 |
| 세부사항 | 배경, 그림자, 테두리, 텍스처 | 노이즈, 기하학적 패턴, 그라데이션 그리드 |
2.2 직접 확인하기: 일반 프롬프트 vs 미화 프롬프트
랜딩 페이지 예시로 효과를 비교해 보겠습니다.
일반 프롬프트:
AI 글쓰기 도우미의 랜딩 페이지를 만들어 주세요. 네비게이션 바, 히어로 섹션, 기능 소개, 가격, 푸터 포함미화 프롬프트:
AI 글쓰기 도우미의 랜딩 페이지를 만들어 주세요. 요구사항:
**미학적 스타일: 네오 브루탈리즘(Neubrutalism)**
**글꼴:**
- 제목: Space Grotesk, 굵기 700-900
- 본문: IBM Plex Sans, 굵기 400
**색상:**
- 메인 컬러: #000000(순흑)
- 강조색: #FF6B00(오렌지)
- 배경: #FFFDF0(미색)
- 테두리: 3px 검은 실선
**레이아웃:**
- 비대칭 레이아웃, 요소 사이를 굵은 검은 선으로 구분
- 카드에 하드 섀도우(box-shadow: 8px 8px 0px #000)
- 대담한 여백 대비
**애니메이션:**
- 페이지 로딩 시 요소가 아래에서 튀어올라옴
- hover 시 버튼이 2px 위로 이동
**세부사항:**
- 모든 둥근 모서리 0px(직각)
- 버튼에 강렬한 3D 효과
- 배경에 미묘한 노이즈 텍스처 추가같은 요구사항이지만, 두 번째 프롬프트는 AI가 스타일이 뚜렷하고 인상적인 페이지를 생성하게 합니다.
2.3 프론트엔드 미화 Skills 리소스 라이브러리
프롬프트를 처음부터 작성하지 마세요! 프론트엔드 미화와 직접 관련된 AI Skills를 모았습니다.
| 저장소명 | 내용 | Star | 링크 |
|---|---|---|---|
| ui-ux-pro-max-skill | 57가지 스타일 + 95가지 색상 조합 + 56가지 글꼴 | 10k+ | GitHub |
| antigravity-awesome-skills | 일반적인 AI 미적 패턴 회피 | - | GitHub |
| superdesigndev/superdesign | AI 네이티브 UI 개발 도구 | 4.7k | GitHub |
| anthropics/skills/frontend-design | Anthropic 공식 프론트엔드 디자인 Skill | - | GitHub |
💡 더 많은 스타일 프롬프트는 부록: 디자인 스타일 프롬프트 빠른 참조를 참고하세요
2.5 세 가지 자주 사용하는 스타일 템플릿
검증된 세 가지 스타일 템플릿을 제공합니다. 복사하여 수정해 바로 사용하세요.
템플릿 1: 미니멀리즘
**미학적 스타일: 미니멀리즘**
**글꼴:**
- 제목: PP Neue Montreal, 굵기 500-700
- 본문: Inter, 굵기 400
**색상:**
- 메인 컬러: #FFFFFF(흰색)
- 텍스트: #1A1A1A(흑에 가까운 색)
- 강조: #3B82F6(파란색, 적게 사용)
**레이아웃:**
- 넉넉한 여백(padding 최소 64px)
- 단일 또는 이중 컬럼 레이아웃, 가운데 정렬
- 요소 사이를 분할선 대신 여백으로 구분
**애니메이션:**
- 느린 페이드 인 효과(duration 600ms)
- hover 시 색상 그라데이션 전환
**세부사항:**
- 둥근 모서리: 8px
- 그림자: subtle(0 4px 12px rgba(0,0,0,0.08))
- 배경 장식 없음템플릿 2: 글래스모피즘
**미학적 스타일: 글래스모피즘(Glassmorphism)**
**글꼴:**
- 제목: Outfit, 굵기 600-800
- 본문: Plus Jakarta Sans, 굵기 400-500
**색상:**
- 배경: 그라데이션 #667eea에서 #764ba2
- 카드 배경: rgba(255, 255, 255, 0.1)
- 텍스트: #FFFFFF
**레이아웃:**
- 부유 카드 디자인
- 카드 간 겹침 효과
**애니메이션:**
- 페이지 로딩 시 카드가 순차적으로 나타남(staggered)
- hover 시 카드가 1.05배 확대
**세부사항:**
- 둥근 모서리: 20px
- 배경 블러: backdrop-blur-xl
- 테두리: 1px rgba(255, 255, 255, 0.2)
- 미묘한 그라데이션 글로우 효과템플릿 3: Bento Grid(도시락 그리드)
**미학적 스타일: Bento Grid**
**글꼴:**
- 제목: SF Pro Display, 굵기 700
- 본문: SF Pro Text, 굵기 400
**색상:**
- 배경: #F5F5F7(연한 회색)
- 카드: #FFFFFF(흰색)
- 강조: #0071E3(애플 블루)
**레이아웃:**
- 그리드 레이아웃, 다양한 크기의 카드를 조합
- 카드 간격 gap 16px
- 둥근 모서리 24px
**애니메이션:**
- hover 시 카드가 살짝 위로 떠오름
- 클릭 시 누르는 효과
**세부사항:**
- 큰 카드는 중요한 콘텐츠 표시
- 작은 카드는 부가 정보 표시
- 일부 텍스트를 아이콘으로 대체
- 깔끔한 그림자(0 4px 24px rgba(0,0,0,0.06))3. 방법 2: Skills 플러그인으로 디자인 사양 자동 로드하기
매번 스타일 프롬프트를 수동으로 작성하는 것은 번거롭습니다. Skills는 재사용 가능한 디자인 사양 패키지로, 설치 후 AI가 자동으로 이 사양을 적용합니다.
3.1 인터페이스를 아름답게 만드는 세 가지 Skills
| Skills | 특징 | 설치 명령어 |
|---|---|---|
| UI/UX Pro Max | 67가지 스타일, 96가지 색상 조합, 57가지 글꼴 조합 | npm install -g uipro-cli && uipro init --ai claude |
| frontend-design | Anthropic 공식, AI 미적 패턴 회피 | npx skills add anthropics/skills/frontend-design |
| SuperDesign | IDE 플러그인, 다양한 디자인 변형 생성 | VSCode 확장 마켓에서 "SuperDesign" 검색 |
3.2 UI/UX Pro Max 설치(가장 추천)
UI/UX Pro Max는 현재 가장 포괄적인 디자인 사양 Skills로, 다음을 사전 설정하고 있습니다.
- 67가지 UI 스타일: 글래스모피즘, 뉴모피즘, 브루탈리즘, Bento Grid...
- 96가지 색상 조합: 산업별 분류(SaaS, 이커머스, 소셜...)
- 57가지 글꼴 조합: 전문 디자이너가 검증한 조합
- 100개 이상의 디자인 규칙: 간격, 둥근 모서리, 그림자 사양
설치 단계:
bash
# 1. 전역 CLI 설치
npm install -g uipro-cli
# 2. 초기화(사용 중인 AI 도구 선택)
uipro init --ai claude
# 또는
uipro init --ai cursor
# 또는
uipro init --ai trae설치 후 프롬프트에 한 줄만 추가하면 됩니다.
UI/UX Pro Max의 Glassmorphism 스타일을 사용하여 AI 글쓰기 도우미 랜딩 페이지를 만들어 주세요AI가 자동으로 해당 글꼴, 색상, 레이아웃 사양을 적용합니다.
3.3 Anthropic 공식 frontend-design 설치
이것은 Anthropic이 공식적으로 제작한 프론트엔드 디자인 Skill로, "AI 미적 패턴" 문제를 전문적으로 해결합니다.
bash
# Claude Code에서 실행
npx skills add anthropics/skills/frontend-design설치 후 AI가 자동으로 다음을 피합니다.
- ❌ Inter, Roboto, Arial 글꼴
- ❌ 보라색 그라데이션 배경
- ❌ 대칭 그리드 레이아웃
- ❌ 너무 옅은 그림자
대신 다음을 선호합니다.
- ✅ 독특한 글꼴 조합
- ✅ 대담한 메인 컬러 + 날카로운 포인트 컬러
- ✅ 비대칭, 겹치는 레이아웃
- ✅ 질감이 있는 배경(노이즈, 기하학적 패턴)
4. 실전 1: 미화 프롬프트로 랜딩 페이지 다시 디자인하기
앞서 배운 지식을 활용하여 평범한 랜딩 페이지를 아름답게 만들어 보겠습니다.
4.1 일반 버전
먼저 일반 프롬프트로 AI가 무엇을 생성하는지 확인해 보겠습니다.
반려동물 입양 플랫폼의 랜딩 페이지를 만들어 주세요. 포함 항목:
- 네비게이션 바(로고, 링크, 가입 버튼)
- 히어로 섹션(제목, 부제목, CTA 버튼, 반려동물 이미지)
- 반려동물 소개(세 장의 반려동물 카드)
- 우리 소개
- 푸터생성된 페이지는... 작동은 하지만 평범합니다.
4.2 미화 버전
이제 스타일 설명을 추가해 보겠습니다.
반려동물 입양 플랫폼의 랜딩 페이지를 만들어 주세요. 요구사항:
**미학적 스타일: 따뜻하고 부드러움 + 핸드드로잉 느낌**
**글괍:**
- 제목: Nunito(둥근 글꼴), 굵기 700-800
- 본문: Nunito, 굵기 400-600
**색상:**
- 메인 컬러: #FFB347(따뜻한 오렌지)
- 보조 컬러: #FFCCB3(연한 오렌지)
- 배경: #FFF8F0(미색)
- 텍스트: #5D4037(갈색)
**레이아웃:**
- 둥근 카드(border-radius: 24px)
- 카드에 약간의 기울기 회전(다양한 각도)
- 요소의 부유, 겹침 효과
**애니메이션:**
- 페이지 로딩 시 요소가 양쪽에서 슬라이드인
- 반려동물 카드 hover 시 반려동물이 고개를 흔드는 효과(rotate 애니메이션)
- 버튼 hover 시 바운스 효과
**세부사항:**
- 모든 둥근 모서리 16-24px
- 따뜻하고 부드러운 그림자(0 8px 24px rgba(255,179,71,0.3))
- 배경에 발바닥 무늬 장식 추가
- 이미지에 불규칙한 자르기(clip-path) 사용
- 핸드드로잉 스타일 아이콘(outline 스타일)생성된 페이지는 따뜻하고 귀여우며, 반려동물을 입양하고 싶어지는 인터페이스가 될 것입니다.
5. 실전 2: Skills로 대시보드 빠르게 생성하기
Skills는 페이지가 많이 필요한 백엔드 시스템에 특히 적합합니다.
5.1 UI/UX Pro Max 사용하기
UI/UX Pro Max의 Dashboard Dark 스타일을 사용하여
SaaS 제품 관리 백엔드의 대시보드 페이지를 만들어 주세요. 포함 항목:
**상단:** 네 개의 통계 카드(사용자 수, 활성 사용자, 수익, API 호출)
**중간:**
- 왼쪽: 사용자 증가 꺾은선 그래프(최근 7일)
- 오른쪽: 구독 플랜 분포 원형 차트
**하단:** 최근 활동 목록(시간, 사용자, 작업)AI가 자동으로 다크 대시보드의 디자인 사양을 적용합니다.
- 진한 회색 배경(#1A1A2E)
- 고대비 카드(#16213E)
- 선명한 데이터 색상(파란색, 녹색, 오렌지)
- 글래스모피즘 효과의 부유 카드
5.2 frontend-design Skill 사용하기
frontend-design skill을 사용하여
개인 블로그의 홈페이지를 만들어 주세요. 스타일은 독특하고 개성 있게AI가 비주류 미학적 방향(예: 레트로 퓨처리즘이나 매거진 스타일)을 선택한 후, 독특한 글꼴, 색상, 레이아웃으로 구현합니다.
6. 실전 3: 나만의 디자인 시스템 Skill 만들기
고정된 브랜드 스타일이 있다면, 자신만의 Skill을 만들어 모든 AI 생성 페이지가 브랜드에 맞도록 할 수 있습니다.
6.1 Skill 파일 생성
프로젝트에 .claude/skills/my-brand/SKILL.md 파일을 생성합니다.
markdown
---
name: my-brand
description: 내 프로젝트 전용 디자인 시스템, 모든 UI가 통일된 디자인 언어를 따르도록 보장
---
# 내 프로젝트 디자인 시스템
## 브랜드 색상
- 메인 컬러: #6366F1(Indigo 500)
- 보조 컬러: #8B5CF6(Violet 500)
- 성공: #10B981
- 경고: #F59E0B
- 오류: #EF4444
- 배경: #F9FAFB
- 카드: #FFFFFF
## 글꼴 시스템
- 제목: Plus Jakarta Sans
- H1: 700, 48px
- H2: 600, 36px
- H3: 600, 24px
- 본문: Inter
- Body: 400, 16px
- Small: 400, 14px
## 간격 시스템
- 기본 단위: 4px
- 컴포넌트 내 패딩: 8px / 12px / 16px
- 섹션 간격: 24px / 32px / 48px
- 페이지 여백: 64px
## 둥근 모서리
- 버튼: 8px
- 카드: 12px
- 입력란: 8px
- 모달: 16px
## 그림자
- 소: 0 1px 3px rgba(0,0,0,0.1)
- 중: 0 4px 12px rgba(0,0,0,0.1)
- 대: 0 8px 24px rgba(0,0,0,0.12)
## 애니메이션
- 전환 시간: 150ms / 300ms
- 이징 함수: cubic-bezier(0.4, 0, 0.2, 1)
- hover 효과: 살짝 확대(scale-105)
## 금지 스타일
- 보라색 그라데이션 배경 사용 금지
- Inter 외의 글꼴 사용 금지
- 16px 초과 둥근 모서리 사용 금지
- 순흑(#000000) 사용 금지, #1F2937 사용6.2 자신의 Skill 사용하기
생성 후 프롬프트에서 다음과 같이 말하면 됩니다.
my-brand skill을 사용하여 사용자 설정 페이지를 만들어 주세요AI가 정의한 모든 디자인 사양을 자동으로 적용합니다.
7. 요약
AI가 아름다운 인터페이스를 생성하는 두 가지 방법이 있습니다.
| 방법 | 장점 | 단점 | 적용 시나리오 |
|---|---|---|---|
| 프롬프트 설명 | 유연하고 매번 조정 가능 | 반복 작성 필요 | 일회성 페이지, 다양한 스타일 실험 |
| Skills 플러그인 | 한 번 설치로 지속 적용 | 설치 및 설정 필요 | 고정된 스타일 요구사항이 있는 프로젝트 |
Vibe Coding 워크플로우 권장 사항:
- 탐색 단계: 다양한 스타일 프롬프트로 실험하여 좋아하는 미학적 방향 찾기
- 스타일 확정 후: 해당 Skill 설치(UI/UX Pro Max 또는 frontend-design)
- 브랜드 프로젝트: 자신만의 Skill을 만들어 전체 프로젝트의 디자인 언어 통일
연습 문제
다음 중 하나의 시나리오를 선택하여 이번 강의의 방법으로 처음부터 완성해 보세요.
- 스타일 프롬프트로 이전에 만든 프로젝트의 인터페이스를 다시 디자인(좋아하는 스타일 선택)
- UI/UX Pro Max를 설치하고, 특정 스타일로 새 페이지 생성
- 자신만의 디자인 시스템 Skill을 만들어 브랜드 색상과 글꼴 정의
부록: 디자인 스타일 빠른 참조 표
| 스타일 | 키워드 | 적용 시나리오 | 예시 제품 |
|---|---|---|---|
| 미니멀리즘 | 여백, 단색, 간결 | 고급 제품, 개인 포트폴리오 | Apple 공식 웹사이트 |
| 글래스모피즘 | 무유리, 그라데이션, 블러 | 기술 제품, SaaS 랜딩 페이지 | macOS Big Sur |
| 네오 브루탈리즘 | 굵은 테두리, 하드 섀도우, 순색 | 트렌드 브랜드, 아트류 웹사이트 | Brassius |
| Bento Grid | 그리드, 콜라주, 카드 | 정보 표시, 대시보드 | Apple 프로모션 페이지 |
| 레트로 퓨처 | 네온, 그라데이션, 신디사이저 웨이브 | 게임류, 음악류 | STRANGER THINGS |
| 핸드드로잉 스타일 | 불규칙, 둥근 형태, 일러스트 | 교육류, 아동 제품 | Duolingo |
| 매거진 스타일 | 큰 글꼴, 비대칭, 여백 | 콘텐츠형 웹사이트, 블로그 | Medium |
| 다크 럭셔리 | 어두운 색, 금색, 정교함 | 고급 제품, 명품 | 다양한 하이엔드 브랜드 |
부록: Skills 설치 빠른 참조
bash
# UI/UX Pro Max
npm install -g uipro-cli
uipro init --ai claude
# Anthropic frontend-design
npx skills add anthropics/skills/frontend-design
# Anthropic brand-guidelines
npx skills add anthropics/skills/brand-guidelines
# Claude Code에 설치된 Skills 확인
/help부록: 색상 조합 추천
| 색상 조합 | 메인 컬러 | 포인트 컬러 | 배경 | 스타일 |
|---|---|---|---|---|
| 선셋 | #F97316 | #FBBF24 | #FFF7ED | 따뜻함, 활력 |
| 오션 | #0EA5E9 | #06B6D4 | #F0F9FF | 상쾌함, 전문성 |
| 포레스트 | #10B981 | #34D399 | #ECFDF5 | 자연, 건강 |
| 베리 | #8B5CF6 | #EC4899 | #FAF5FF | 로맨틱, 창의성 |
| 커피 | #78350F | #D97706 | #FFFBEB | 따뜻함, 레트로 |
| 모노스톤 | #6B7280 | #9CA3AF | #F9FAFB | 전문성, 중성적 |
부록: 디자인 스타일 프롬프트 빠른 참조
프론트엔드 페이지를 더 아름답게 만들기 위해 시도해 볼 수 있는 프롬프트:
스타일 카테고리
| 스타일 | 키워드(영문) | 핵심 시각적 특징 | 프롬프트 예시 |
|---|---|---|---|
| 팝아트 | Pop Art | 대담한 보색, 검은 윤곽선, 점 무늬 텍스처 | Pop art style website, bold colors and comic dots, vibrant |
| 미니멀리즘 | Minimalism | 넉넉한 여백, 최소한의 색상과 선, 장식 없음 | Minimalist web design, ample white space, geometric, serene |
| 추상표현주의 | Abstract Expressionism | 감정적 장력이 있는 붓터치, 뿌려진 색상 | Abstract expressionism background, dynamic paint splashes, emotional |
| 레트로 스타일 | Retro/Vintage | 올드스타일 글꼴, 빈티지 텍스처, 레트로 색상 | Retro 80s website design, neon grid and synthwave color palette |
| 사이버펑크 | Cyberpunk | 고대비 네온 색상, 글리치 아트 효과, 다크 배경 | Cyberpunk UI, neon lights on dark background, glitch effects |
| 뉴모피즘 | Neumorphism | 부드러운 그림자와 하이라이트, 약간 볼록/오목한 질감 | Neumorphism design style, soft shadows, clean and modern |
| 제너러티브 아트 | Generative Art | 알고리즘으로 생성된 유동적인 시각 패턴 | Generative art background, flowing algorithmic patterns, digital |
| 애시드 그래픽 | Acid Graphics | 금속 질감, 글래스 형태, 톱니 글꼴 | Acid graphics web layout, glass morphism, chaotic typography |
| 몰입형 3D | Immersive 3D | 인터랙티브 3D 장면, 강렬한 공간감 | Immersive 3D website, interactive product model in space |