Claude로 UI 디자인 만들기 | 접속부터 결과물 도출까지

 

Claude로 UI 디자인 만들기 | 접속부터 결과물 도출까지

---

Step 1. claude.ai 접속 및 가입

https://claude.ai 접속 후 Sign up 클릭,

Google / Apple 계정 또는 이메일로 가입합니다.

 

클로드에 가입되어있다면 바로 https://claude.ai/design

Claude

로 접근하시면됩니다.

 

클로드 기본 웹으로 접근하셨다면 좌측 패널에서 클로드 Design을 선택하시면 이동합니다.

 

현재 오픈한지 얼마 안되어 그런지 접속하면 인트로가 굉장히 길게 나오는데 우측 하단에

skip intro로 스킵

---

Step 2. Artifacts 기능 확인

 

코드를 생성할 때 채팅창 옆에 별도 패널이 열리며 실시간으로 렌더링됩니다.

HTML, CSS, JavaScript, React 컴포넌트를 바로 미리보기로 확인할 수 있습니다.

채팅 입력 → 코드 생성 → 우측 패널 실시간 렌더링

기본값은 ON입니다. 보이지 않는다면 프로필 아이콘 → Settings → Features 탭 → Artifacts 토글 ON으로 변경합니다.

이렇게 내용을 만들 디렉토리를 만들거나 지정할 수 있습니다.

 

이렇게 프로토 타입이 어떻게 보일지도 선택 가능합니다.

저는 디렉토리를 만들어서 용도에 따라 다른 디렉토리에서 프롬프트를 날립니다

 

선택하고나면 아래와 같이 초기 화면이 나올텐데요, claude 기본화면과 비슷해서 사용에 어려움은 없습니다.

 

---

 

Step 3. 프롬프트 작성

아래 4가지 요소를 포함해서 작성합니다.

[컴포넌트/페이지 종류] + [스타일/분위기] + [포함할 요소] + [기술 스택]

예시:

다크 테마의 SaaS 대시보드 랜딩 페이지를 만들어줘.
히어로 섹션, 기능 소개 3개, CTA 버튼을 포함하고
HTML + CSS + JS로 구현해줘. 애니메이션도 넣어줘.

---

배너를 만들거야. 가로 900px, 세로는 300px로
픽토그램 이미지를 추가해서 만들어줘.
단순한 스타일이야. 그라데이션 글귀는 넣지 말고 나눔체로 글을 써줘.

 

스타일 키워드 참고:

분위기	키워드
미니멀/세련된	clean, minimal, whitespace 활용, editorial
다크/테크	dark theme, glassmorphism, neon accent
부드러운/친근한	pastel, rounded corners, soft shadow, playful
고급/럭셔리	luxury, gold accent, serif font, refined
레트로/감성적	retro, vintage, grain texture, muted palette

 

❌ 정확하게 나오지 않는 추상적인 프롬프트

예쁜 버튼 만들어줘

 

✅ 명확한 요구사항이 있는 프롬프트

SaaS 앱에서 쓸 수 있는 구독 플랜 비교 카드 UI를 React로 만들어줘.
- Free / Pro / Enterprise 3가지 플랜
- Pro 플랜은 "추천" 배지 포함
- 호버 시 카드가 살짝 올라오는 애니메이션
- 색상: 인디고 계열
- Tailwind CSS 없이 인라인 스타일 사용

 

claude design

 

그럼 이렇게 작업 순서를 확인하고 작업을 하기 시작합니다.

 

 

이렇게 랜더링 중간에 claude design에 추가 명령을 내릴 수도 있습니다.

 

---

 

Step 4. 실전 프롬프트 예시

 

랜딩 페이지 히어로 섹션

다크 테마 SaaS 랜딩 페이지의 히어로 섹션을 HTML/CSS/JS로 만들어줘.
- 배경: 그라디언트 메쉬 또는 파티클 효과
- 헤드라인 타이핑 애니메이션
- CTA 버튼 2개 (시작하기, 데모 보기)
- 반응형 레이아웃

 

대시보드 UI

어드민 대시보드 메인 화면을 React 컴포넌트로 만들어줘.
- 좌측 사이드바 네비게이션 (아이콘 + 텍스트)
- 상단 통계 카드 4개 (유저 수, 매출, 전환율, 클릭률)
- 라인 차트 영역 (recharts 라이브러리 사용)
- 다크 모드 기본값

 

카드 컴포넌트

블로그 포스트 목록 카드 UI를 HTML/CSS로 만들어줘.
- 썸네일, 카테고리 태그, 제목, 요약, 날짜 포함
- 카드 호버 시 그림자 + 이미지 줌 효과
- 그리드 레이아웃 (3열)
- Google Fonts에서 폰트 선택

 

요금제 UI

탭 형태의 요금제 선택 UI를 React로 만들어줘.
- 월간/연간 토글 (연간 선택 시 "20% 할인" 배지 표시)
- 플랜 카드 3개: 금액이 토글에 따라 동적으로 변경
- 선택된 플랜 하이라이트 효과

 

---

 

Step 5. 결과물 확인 및 코드 추출

• Preview 탭: 렌더링된 화면 확인
• Code 탭: 소스코드 확인 및 복사

복사 후 VSCode에 붙여넣거나 CodeSandbox / StackBlitz에서 바로 실행할 수 있습니다.

---

Step 6. 수정 요청 — 채팅 vs 인라인 댓글

 

채팅과 상단에 보면 comment가 있는데요, 둘의 차이점은 아래와 같습니다.

채팅: 전체 구조나 방향이 바뀌는 변경에 사용합니다. (큰 수정)

"색 구성표를 더 어둡고 미니멀하게 바꿔줘."
"대시보드를 메트릭은 상단 행, 차트는 하단으로 재배치해줘."
"오른쪽에 설정 패널 추가해줘."
"이 페이지 레이아웃 대안을 2~3가지 버전으로 보여줘."

 

 

"접근성 관점으로 개선할 부분 알려줘."
"색 대비가 WCAG AA 기준을 충족하는지 확인해줘."

 

인라인 댓글: 특정 요소를 직접 클릭해서 해당 부분만 수정 요청할 때 사용합니다. (작은 수정)

"이 버튼 패딩 더 크게 해줘."
"라디오 버튼 말고 드롭다운으로 바꿔줘."
"여기에 브랜드 기본 색상(#dfwdfs) 써줘."
"픽토그램을 우측으로 10px 옮겨줘"

구분	채팅	인라인 댓글
적합한 범위	전체 구조, 방향 변경, 새 섹션 추가	특정 컴포넌트, 특정 요소
예시	레이아웃 재배치, 색 구성 전환	버튼 크기, 폰트 변경
설명이 필요한 경우	✅	❌
위치 지정이 필요한 경우	❌	✅

 

댓글이 사라지는 경우가 간혹 있는데요, 이럴 때는 채팅에 직접 붙여넣으면 됩니다.

---

Step 7. 버전 관리

 

현재 작업을 유지하면서 다른 방향을 시도하려면 아래처럼 요청합니다.

"지금까지 작업한 거 저장해두고, 완전히 다른 방향으로 한 번 시도해줘."

 

Claude가 현재 버전을 저장하고 저장된 위치를 알려줍니다.

이전 버전은 대화 중 언제든 참조할 수 있습니다.

 

---

Step 8. 결과 및 내보내기(Export)

 

 

캔바나 미리캔버스처럼 상세하게 만들 수는 없어도 결과를 이렇게 꽤나 멋드러지게 만들어줍니다.

 

디자인을 완료하였으면 오른쪽 상단 Export 버튼에서 형식을 선택합니다.

형식	용도
.zip으로 다운로드	소스 파일 전체 필요할 때
PDF로 내보내기	이해관계자 시안 공유, 문서 보관
PPTX로 내보내기	발표 자료
Canva로 전송	비개발자 협업, 추가 편집
독립형 HTML로 내보내기	브라우저에서 바로 열리는 단일 파일
Claude Code로 인계	개발 환경으로 연결

 

Claude Code 인계 옵션:

• 로컬 코딩 에이전트로 전송: 로컬 Claude Code CLI로 전달
• Claude Code Web으로 전송: 웹 기반 Claude Code에서 이어서 작업

---

 

참고. 레퍼런스 이미지 활용 / 컨텍스트 설정

 

이미지 첨부: 이미지를 첨부하면 해당 디자인을 참고한 UI를 생성합니다.

[이미지 첨부] 이 레이아웃 참고해서 랜딩 페이지 만들어줘.
색상만 브랜드 컬러인 보라색 계열로 바꿔줘.

 

컨텍스트 선설정: 작업 시작 전 브랜드 기준을 먼저 입력해두면 일관성이 높아집니다.

우리 서비스는 B2B SaaS 프로젝트 관리 툴이야.
메인 컬러: #123123, 보조 컬러: #332242
폰트: 타이틀은 bold serif, 본문은 sans-serif
전체 톤: 전문적이지만 친근한 느낌

이 기준으로 앞으로 UI 컴포넌트들을 만들어줘.
첫 번째로 네비게이션 바 만들어줘.

---

 

코딩을 넘어서 간단한 디자인까지 알아서 하는 클로드가 되었습니다..후후..

내 직종은 얼마나 남았나.