코드는 AI 도움으로 어떻게든 완성했는데, 막상 화면을 열어보면 밋밋하거나 어딘가 "AI가 급하게 만든 티"가 나서 손이 안 가는 경우가 많습니다. 이 글은 UI 디자인 — 화면의 색상·글꼴·배치 같은 시각적 요소를 설계하는 작업 — 을 전혀 모르는 상태에서도 Claude Code(터미널에서 자연어로 지시하면 실제 코드를 만들어 주는 Anthropic의 코딩 도구)만으로 그럴듯한 화면을 완성하는 방법을 다룹니다. Claude Code가 공식으로 배포하는 Frontend Design 플러그인 설치부터 스크린샷으로 다듬는 방법까지, 준비물 확인 10분에 첫 화면 실습 20~30분이면 따라 할 수 있습니다.
🟢 현행 모델 라인업 일치 · 모델 안내 · Fable 구독 안내
Fable 5·5.1 구독 안내(2026년 9월 7일 갱신): 2026년 9월 1일 출시된 Claude Fable 5.1이 현행 Fable 모델이고, Fable 5는 레거시로 전환됐습니다. 구독 조건은 두 모델이 같습니다 — Max·Team Premium 플랜은 주간 사용 한도의 50% 범위에서 포함되고, Pro·Team Standard 플랜은 사용량 크레딧(입력 100만 토큰당
이 글로 할 수 있게 되는 것
Claude Code에 공식 Frontend Design 플러그인을 설치하고, 스크린샷 피드백 루프로 화면을 다듬어 "전형적인 AI 화면" 티가 덜 나는 UI를 완성할 수 있게 됩니다. 준비물 확인 10분, 플러그인 설치 5분, 첫 화면 실습과 다듬기에 20~30분 정도 걸립니다.
시작 전 준비물
- 터미널에서 실행되는 Claude Code가 이미 설치되어 있어야 합니다. (설치 자체를 처음 한다면 공식 설치 가이드부터 진행하세요.)
- Claude Code 사용에는 유료 요금제 또는 API 사용량이 필요합니다. 정확한 조건은 공식 요금 페이지에서 확인하세요.
- 터미널을 열고 명령어를 입력할 수 있는 정도의 기본 사용법.
- (선택) 생성된 화면을 미리 볼 수 있는 브라우저.
용어 빠른 풀이
- 바이브 코딩(vibe coding) — 코드를 한 줄씩 직접 짜기보다, AI에게 원하는 결과를 자연어로 설명하고 AI가 만든 코드를 확인·수정하며 개발하는 방식을 가리키는 표현입니다.
- Claude Code — 터미널(명령어 입력 창)에서 대화하듯 지시하면 실제 파일을 만들고 수정해 주는 Anthropic의 AI 코딩 도구입니다.
- 플러그인(Plugin) / 스킬(Skill) — Claude Code의 기능을 확장하는 부가 기능입니다. 스킬은 특정 작업(이 글에서는 화면 디자인)을 할 때 Claude가 참고하는 지침서라고 이해하면 됩니다.
- 마켓플레이스(Marketplace) — 플러그인을 모아 놓은 카탈로그입니다. 플러그인을 설치하려면 먼저 이 카탈로그를 Claude Code에 등록해야 합니다.
- MCP(Model Context Protocol) — Claude가 Figma 같은 외부 서비스와 직접 데이터를 주고받을 수 있게 해 주는 연결 규약입니다.
- 디자인 토큰 — "배경색은 이 hex 값, 본문 글꼴은 이 폰트"처럼 디자인 구성 요소를 이름 붙여 정리해 둔 값입니다. AI가 텍스트를 처리하는 단위인 '토큰'과는 다른, 디자인 분야에서 쓰는 용어입니다.
Claude Code에 디자인 감각을 달아주는 세 가지 방법
상황에 따라 쓸 수 있는 방법이 다릅니다. 시안이 전혀 없이 맨땅에서 시작한다면 공식 플러그인이, 버튼·폼 같은 기본 부품을 매번 새로 설계하기 싫다면 오픈소스 컴포넌트가, 이미 Figma 시안이 있다면 공식 연동 플러그인이 적합합니다.
| 방법 | 언제 쓰면 좋은가 | 필요한 사전 지식 | 얻는 것 |
|---|---|---|---|
| 공식 Frontend Design 플러그인 | 디자인 시안 없이 맨땅에서 시작할 때 | 없음(자연어 설명만) | Claude가 색상·폰트·레이아웃을 먼저 설계한 화면 코드 |
| 오픈소스 컴포넌트 라이브러리(예: shadcn/ui) | 버튼·폼·다이얼로그 같은 기본 부품을 매번 새로 만들기 싫을 때 | 컴포넌트를 프로젝트에 받아두는 절차 정도 | 이미 접근성까지 고려된 완성 부품. Claude는 그 위에서 배치·문구만 조정 |
| 공식 Figma 연동 플러그인 | 이미 Figma 시안이나 팀 디자이너의 결과물이 있을 때 | Figma 파일 접근 권한 | 시안을 그대로 코드로 옮기거나, 반대로 Claude가 만든 화면을 Figma로 보내 편집 |
단계별 실행: 공식 Frontend Design 플러그인 설치부터 첫 화면까지
-
1단계 — 데모 마켓플레이스 추가. Frontend Design 플러그인은 Anthropic이 자사 GitHub 저장소(anthropics/claude-code)에 공개한 예제 마켓플레이스에 들어 있어, 먼저 이 저장소를 마켓플레이스로 등록해야 합니다. Claude Code 터미널에서 아래 명령을 입력하세요.
/plugin marketplace add anthropics/claude-code이렇게 보이면 성공: 마켓플레이스가 추가되었다는 메시지가 뜨고, 이후
/plugin을 실행해 Discover 탭을 열면 새 플러그인 목록이 보입니다. -
2단계 — frontend-design 플러그인 설치.
/plugin install frontend-design@claude-code-plugins이렇게 보이면 성공: 설치 요약에 "Plugin is now active."가 뜨면 바로 사용할 수 있습니다. 대신 "Run /reload-plugins to activate."가 뜨면 아래 명령을 한 번 더 실행하세요.
/reload-plugins주의: 프롬프트 캐시가 무효화된다는 경고와 함께 실행이 건너뛰어지면
/reload-plugins --force로 다시 실행해야 적용됩니다. -
3단계 — 목적·대상·톤을 구체적으로 설명해 첫 화면 요청. 예를 들어 "음악 스트리밍 앱의 대시보드 화면을 만들어줘. 사용자는 인디 음악을 발굴하는 20대 청취자이고, 차분하고 아날로그적인 느낌이면 좋겠어"처럼 요청합니다.
이렇게 보이면 성공: Claude가 코드를 쓰기 전에 색상 팔레트(이름 붙인 hex 값 4~6개)와 폰트 조합, 레이아웃 구상을 먼저 설명한 뒤 화면 코드를 생성합니다. 결과가 매번 보라색 그라디언트에 둥근 카드 3개 같은 뻔한 형태로만 나오지 않는다면 잘 작동하는 것입니다.
-
4단계 — 스크린샷으로 다듬기. 브라우저에서 생성된 화면을 캡처해 Claude Code 대화창에 이미지로 첨부하고, 고치고 싶은 부분을 구체적으로 짚어 요청합니다. 공식 스킬 문서는 이 과정을 "그림 한 장이 텍스트 설명 천 마디보다 낫다"는 취지로 설명합니다.
이렇게 보이면 성공: 요청한 부분만 정확히 수정되고 나머지 레이아웃은 그대로 유지됩니다.
자주 막히는 지점과 해결
- "/plugin 명령이 안 보여요" — Claude Code 버전이 오래되었을 수 있습니다.
claude --version으로 확인 후 설치 방식에 맞게 최신 버전으로 업데이트하세요(예: npm 설치라면npm install -g @anthropic-ai/claude-code@latest). 그래도 없다면 클라우드 세션처럼/plugin자체를 지원하지 않는 환경일 수 있으니, 이 경우 Claude 데스크톱 앱의 플러그인 브라우저를 이용하세요. - "Marketplace not found" 오류 — 마켓플레이스를 추가하지 않고 바로 설치를 시도했을 때 발생합니다. 1단계의
/plugin marketplace add anthropics/claude-code를 먼저 실행하세요. - 설치했는데 아무 변화가 없어요 — 설치 요약 메시지를 다시 확인해
/reload-plugins실행이 필요한지 확인하세요. - 결과가 매번 비슷비슷해요(보라색 그라디언트, 둥근 카드) — 목적·대상·톤을 더 구체적으로 설명하거나, 참고하고 싶은 사이트의 스크린샷을 먼저 보여주고 "이 스타일을 기준으로 만들어줘"라고 요청하면 도움이 됩니다.
- 주의 — 플러그인과 마켓플레이스는 여러분 컴퓨터에서 코드를 실행할 수 있는 권한을 가집니다. 출처가 분명한 마켓플레이스(이 글에서 다룬 Anthropic 공식 저장소 등)에서만 설치하세요.
응용: 이미 참고할 자료가 있다면
이미 Figma로 만든 시안이 있다면 처음부터 Claude Code에 자동으로 등록되는 공식 마켓플레이스(claude-plugins-official)에 포함된 Figma 연동 플러그인을 쓰는 편이 더 낫습니다. /plugin install figma@claude-plugins-official로 설치하면, Figma 파일의 컴포넌트·레이아웃 정보를 읽어 코드로 옮기거나 반대로 Claude가 만든 화면을 Figma로 보내 편집할 수 있습니다.
버튼·입력창·다이얼로그처럼 매번 새로 디자인하기 번거로운 기본 부품은 shadcn/ui 같은 오픈소스 컴포넌트 모음을 활용하는 방법도 있습니다. 이런 도구는 별도 패키지로 설치해 불러오는 방식이 아니라, CLI(명령줄 도구)로 컴포넌트의 실제 코드를 프로젝트 안에 직접 복사해 넣는 방식이라 이후 자유롭게 수정할 수 있습니다. 기본 부품은 이런 라이브러리로 받아두고, Claude에게는 배치와 문구 조정만 맡기는 식으로 역할을 나눌 수 있습니다.
자주 묻는 질문
Q. UI 디자인을 하나도 몰라도 정말 쓸만한 화면이 나오나요?
처음부터 전문 디자이너 수준을 기대하긴 어렵지만, 공식 Frontend Design 플러그인을 쓰면 최소한 "AI가 급조한 티가 나는" 전형적인 화면은 피할 수 있습니다. Claude가 색상·폰트·레이아웃을 먼저 계획한 뒤 코드를 쓰기 때문입니다. 세부 조정은 스크린샷 피드백 루프로 보완하면 됩니다.
Q. 플러그인을 설치하면 별도 요금이 드나요?
플러그인 설치 자체에 추가 비용은 없고, 이후 대화도 평소 Claude Code 사용량 안에서 처리됩니다. 다만 설치한 플러그인이 많아질수록 매 턴 대화에 추가되는 맥락(컨텍스트) 분량이 늘어날 수 있어, 안 쓰는 플러그인은 꺼두는 것이 좋습니다.
Q. 이미 Figma로 만든 시안이 있으면 이 방법이 필요 없나요?
그 경우엔 공식 마켓플레이스의 Figma 연동 플러그인을 쓰는 편이 더 낫습니다. 처음부터 자동으로 등록되는 공식 마켓플레이스에 포함돼 있어 /plugin install figma@claude-plugins-official로 바로 설치할 수 있습니다.
Q. 코딩 자체를 전혀 몰라도 이 방법을 쓸 수 있나요?
Claude Code는 자연어 지시로 동작하는 도구라 코드를 직접 짤 줄 몰라도 시작할 수 있지만, 터미널을 열고 명령어를 입력하는 정도의 기본 사용법은 필요합니다. 완전히 처음이라면 Claude Code 설치와 기본 사용법부터 익히는 것을 권장합니다.