🎨 디자인 키워드 & 바이브 디자인 — 클로드 코드 무료 학습

바로 실행하기: 웹페이지 만들기

오늘은 Claude Code로 눈에 보이는 결과물을 만들어볼 거예요. 자기소개 웹페이지를 하나 만들어 봅시다. 프롬프트 하나면 돼요.

Claude Code에 입력

내 자기소개 웹페이지를 만들어줘.
이름: 김과장, 직업: 사무자동화 전문가
모던하고 깔끔한 디자인으로,
다크 테마에 애니메이션 넣어줘.
index.html 파일로 저장해줘.

이 한마디를 받으면 Claude Code가 다음을 전부 알아서 해요.

디자인 설계

다크 테마 색상, 레이아웃, 폰트 선택

HTML + CSS + JavaScript 작성

구조, 스타일, 애니메이션까지 한 파일로

반응형 처리

데스크톱, 태블릿, 모바일 모두 보기 좋게

파일 저장

index.html 하나로 바로 브라우저에서 열 수 있게

프롬프트 하나로 웹페이지 완성

디자인부터 코드, 반응형까지 — Claude Code가 전부 해줘요.

생성된 index.html 파일을 더블클릭하면 바로 브라우저에서 열려요.

프롬프트 하나로 만들어진 자기소개 페이지 — 다크 테마, 카드 레이아웃, 반응형

이런 멋진 페이지가 뜰 거예요. 이게 바이브 디자인의 시작이에요.

결과가 마음에 안 들면?

“색상 좀 더 밝게 바꿔줘”, “프로필 사진 영역 추가해줘”, “스크롤 애니메이션 넣어줘” — 이렇게 말만 하면 Claude가 바로 수정해줘요. 원하는 결과가 나올 때까지 대화를 이어가면 돼요.

디자인 키워드의 힘

방금 만든 웹페이지, 괜찮긴 한데 뭔가 특별하진 않죠? 여기서 키워드 하나만 추가하면 결과가 완전히 달라져요.

디자인 키워드는 AI에게 “이런 느낌으로 만들어줘”라고 전달하는 시각적 언어예요. 마치 카페에서 “아메리카노”와 “바닐라 라떼”가 완전히 다른 음료인 것처럼, 같은 웹페이지도 키워드 하나로 완전히 다른 결과물이 나와요.

디자인 스타일 키워드

Neo Brutalism

굵은 테두리, 원색, 과감한 그림자. 개성 강한 디자인

Glassmorphism

반투명 유리 효과, 블러 배경, 그라데이션. 미래적인 느낌

Bento Grid

다양한 크기의 카드가 모자이크처럼 배치. Apple 스타일

Neumorphism

부드러운 입체감, 눌린 듯한 버튼. 고급스러운 느낌

Aurora UI

오로라 빛 그라데이션, 어두운 배경에 빛나는 색상

UI 프레임워크 키워드

Shadcn UI

미니멀, 모노톤, 깔끔한 라디우스. 개발자들이 좋아하는 스타일

Material Design

Google 스타일. 카드, 그림자, 리플 효과

Tailwind UI

실용적이고 현대적인 컴포넌트 디자인

Ant Design

기업용 대시보드 스타일. 데이터 중심 UI

Chakra UI

접근성 좋은 깔끔한 컴포넌트. 유연한 테마

효과 & 색상 키워드

카테고리	키워드	설명
효과	Parallax scroll	스크롤 시 배경과 전경이 다른 속도로 움직임
효과	Gradient mesh	유기적인 그라데이션 배경
효과	Blur backdrop	배경 흐림 효과로 깊이감 표현
효과	Hover animation	마우스 올리면 움직이는 인터랙션
색상	Dark theme	어두운 배경, 밝은 텍스트. 세련된 느낌
색상	Pastel palette	부드러운 파스텔톤. 따뜻하고 친근함
색상	Monochrome	단색 톤. 미니멀하고 집중도 높음
색상	Neon glow	네온 발광 효과. 사이버펑크 분위기
색상	Earth tone	자연 색감. 안정적이고 따뜻한 느낌

키워드를 몰라도 괜찮아요

위 키워드를 전부 외울 필요 없어요. 그냥 느낌을 말해도 돼요. “애플 홈페이지 같은 느낌으로”, “깔끔하고 고급스럽게”, “톡톡 튀는 색감으로” — Claude가 알아서 해석해요. 키워드를 알면 더 정확한 결과를 얻을 수 있을 뿐이에요.

키워드 하나로 이렇게 달라집니다

같은 “자기소개 웹페이지 만들어줘”인데, 디자인 키워드 하나만 바꾸면 결과가 이렇게 달라져요.

키워드	결과물 특징	어울리는 용도
Neo Brutalism	굵은 검정 테두리, 원색 배경, 그림자 오프셋이 크게 빠짐. 마치 포스터 같은 느낌	포트폴리오, 크리에이터 소개
Bento Grid	다양한 크기의 카드가 모자이크처럼 배치. Apple 제품 소개 페이지 느낌	능력/경력 소개, 대시보드
Shadcn UI	미니멀 모노톤, 깔끔한 라운드 코너, 절제된 색상. 심플하고 프로페셔널	개발자 소개, 기업 페이지
Glassmorphism	반투명 유리 카드, 블러 배경, 부드러운 그라데이션. 미래적이고 세련됨	디자이너 소개, 이벤트 페이지

실제 결과물 비교

직접 비교해보세요

같은 요청에 키워드만 추가해보세요. 결과가 완전히 달라지는 걸 직접 확인할 수 있어요.

기본 프롬프트

내 자기소개 웹페이지를 만들어줘.

키워드 추가 프롬프트

내 자기소개 웹페이지를 만들어줘.
Neo Brutalism 스타일로,
Parallax scroll 효과 넣어줘.

첫 번째 프롬프트는 평범한 결과가 나오지만, 두 번째 프롬프트는 굵은 테두리와 원색이 돋보이는 개성 있는 페이지에 스크롤 시 배경이 따로 움직이는 효과까지 들어가요.

키워드 조합이 핵심이에요

키워드는 하나만 써도 되지만, 조합하면 더 멋진 결과가 나와요. “Glassmorphism + Dark theme + Hover animation”처럼 스타일 + 색상 + 효과를 섞어보세요.

Figma → 코드 변환

디자이너가 Figma로 만든 시안이 있다면, Claude Code의 공식 Figma 플러그인으로 실제 동작하는 웹페이지로 변환할 수 있어요.

Figma 플러그인 설치

터미널에서 실행

claude plugin install figma@claude-plugins-official

설치 후 Claude Code 안에서 인증을 연결해요.

Claude Code 안에서

/mcp
→ figma 선택 → Authenticate → Allow Access
→ "Authentication successful" 확인

사용법

Figma URL을 주고 구현 요청

이 Figma 디자인을 HTML로 구현해줘.
URL: figma.com/design/abc123...
1:1로 똑같이, 반응형으로 만들어줘.

Claude Code가 Figma 파일의 레이어, 색상, 폰트, 간격을 읽어서 코드로 변환해요. /implement-design 명령으로도 실행할 수 있어요.

명령어	기능
/implement-design	Figma 프레임 → 코드 변환
/create-design-system-rules	팀 개발 규칙을 가이드라인으로 생성
/code-connect-components	Figma 컴포넌트 ↔ 코드 컴포넌트 매핑

Figma 무료 플랜에서도 가능해요

이전에는 Dev Mode(유료)가 필요했지만, 공식 플러그인은 Figma 무료 플랜에서도 기본적인 디자인 데이터를 읽을 수 있어요. 단, 고급 기능(Code Connect 등)은 Professional 이상이 필요해요.

Figma 플러그인 vs Pencil.dev

AI로 디자인과 코드를 연결하는 도구가 두 가지 있어요.

항목	Figma 플러그인	Pencil.dev
방향	Design → Code + Code → Design	Design ↔ Code (완전 양방향)
환경	Claude Code + Figma 앱	Cursor IDE 내장 캔버스
설치	`claude plugin install figma`	Cursor 마켓플레이스
가격	플러그인 무료 (Figma 계정 필요)	무료 얼리 액세스
강점	Anthropic 공식 · 디자이너 협업	코드와 디자인 완전 동기화

둘 다 안 써도 괜찮아요

Figma나 Pencil.dev가 없어도 Claude Code로 디자인을 만들 수 있어요. 앞서 배운 디자인 키워드만으로도 충분히 멋진 결과물을 얻을 수 있거든요. 도구는 나중에 필요할 때 도입하면 돼요.

카드뉴스 & 상세페이지 만들기

바이브 디자인의 진짜 실용적인 활용 —카드뉴스와 상세페이지를 만들어볼 거예요. 인스타그램, 블로그, 쇼핑몰 상세 페이지까지 전부 가능해요.

카드뉴스 만들기

Claude Code에 입력

"AI로 업무 시간 절약하는 5가지 방법" 주제로
카드뉴스를 만들어줘.

- 5장짜리 HTML
- 인스타그램 정사각형 비율 (1080x1080)
- 각 카드에 번호, 제목, 설명, 아이콘 배치
- 밝은 그라데이션 배경
- 마지막 장에 CTA (팔로우 유도)
index.html로 저장해줘.

Claude Code가 5장짜리 카드뉴스를 HTML로 만들어줘요. 브라우저에서 열면 카드 형태로 보이고, 각 카드를 스크린샷 찍어서 인스타에 올리면 돼요.

상세페이지 만들기

Claude Code에 입력

모바일 상세페이지를 만들어줘.

상품명: AI 업무 자동화 워크샵
가격: 33,000원
내용: 3시간 실습, 초보자 환영, 소규모 클래스

- 모바일 최적화 (가로 390px 기준)
- 세로 스크롤 레이아웃
- 상단 히어로 이미지 영역
- 특징 3가지 카드
- 수강 후기 섹션
- 하단 고정 CTA 버튼
detail.html로 저장해줘.

쇼핑몰이나 클래스 판매 상세페이지도 프롬프트 하나면 완성이에요. 디자이너 없이도, Canva 없이도 — Claude Code 하나로 전부 가능해요.

스크린샷 꿀팁

만들어진 HTML을 이미지로 변환하고 싶다면, Claude Code에게 “이 HTML을 Playwright로 스크린샷 찍어줘”라고 하세요. Step 4에서 설치한 Playwright가 여기서 활약해요.

직접 해보기

아래 미션 중 하나를 골라서 직접 만들어보세요. 키워드를 조합할수록 결과가 더 흥미로워져요.

미션 1: 나만의 자기소개 페이지

내 자기소개 웹페이지를 만들어줘.
이름: [내 이름], 직업: [내 직업]
[좋아하는 키워드] 스타일로,
애니메이션 넣어줘.

키워드 추천: Glassmorphism, Bento Grid, Neo Brutalism, Aurora UI

미션 2: 내 주제로 카드뉴스

"[내 관심 분야] 입문 가이드" 주제로
5장짜리 카드뉴스 만들어줘.
인스타 정사각형 비율, Pastel palette.

예: 주식 투자, 영어 공부, 요리, 운동, 여행 등 뭐든 좋아요

미션 3: 반복 수정으로 완성도 높이기

미션 1이나 2를 완성한 후, 아래처럼 수정 요청을 이어가보세요.

색상을 좀 더 따뜻하게 바꿔줘.
프로필 사진 넣을 영역 추가해줘.
폰트를 좀 더 둥근 느낌으로.
하단에 연락처 섹션 추가해줘.

한 번에 완벽할 필요 없어요. 대화를 이어가면서 발전시키는 게 바이브 디자인이에요.

에러가 나도 걱정 마세요. Claude Code에게 “에러 났어, 고쳐줘”라고 하면 알아서 해결해요. 결과가 어색하면 “좀 더 세련되게 바꿔줘”라고 하면 돼요.

확인 체크리스트

자기소개 페이지를 만들었다디자인 키워드를 2개 이상 시도했다수정 요청을 해봤다

디자인 프롬프트 팁

디자인 키워드를 효과적으로 쓰는 팁을 정리했어요. 이것만 기억하면 프롬프트 실력이 확 올라가요.

1. 레퍼런스를 보여주세요

“Apple 홈페이지 같은 느낌으로”, “Notion 앱처럼 깔끔하게”, “토스 앱 스타일로” — 유명 서비스를 레퍼런스로 말하면 Claude가 그 스타일을 정확하게 이해해요.

2. 구체적인 수치를 제시하세요

“큰 글씨”보다는 “제목은 48px, 본문은 16px”. “여백 많이”보다는 “섹션 간격 80px”. 구체적인 숫자가 결과의 정확도를 높여요.

3. “하지 말아야 할 것”도 말해주세요

“그라데이션 쓰지 마”, “애니메이션 과하지 않게”, “빨간색은 빼줘” — 원하지 않는 것을 명확히 하면 불필요한 수정 횟수가 줄어요.

4. 단계적으로 요청하세요

처음부터 모든 걸 한 번에 요청하지 마세요. “기본 레이아웃 먼저 잡아줘” → “색상 적용해줘” → “애니메이션 넣어줘” 순서로 단계적으로 진행하면 각 단계에서 방향을 조정할 수 있어요.

궁극의 팁

프롬프트를 잘 쓰는 가장 좋은 방법은 많이 시도해보는 거예요. 같은 주제로 키워드만 바꿔가며 3~4번 만들어보세요. 어떤 키워드가 어떤 결과를 내는지 감이 잡히면, 그때부터 원하는 디자인을 정확하게 만들 수 있게 돼요.

참고 자료

Figma Plugin — claude.com/plugins/figma
Pencil.dev — pencil.dev