부록 : 디자인도 클로드와 함께, 클로드 디자인

클로드 디자인

💡

클로드 디자인(Claude Design) = 말로 설명하면 실제 화면 디자인을 만들어 주는 AI 도구

디자인 전문 지식과 전용 프로그램 없이, 한국어로 요청만 하면 화면 시안 생성

결과물이 그림이 아니라 실제 코드(HTML, CSS)라서, 그대로 우리 웹페이지에 반영 가능

이번 시간 핵심 : 이미 GitHub에 올리고 배포한 우리 웹페이지의 디자인을 클로드 디자인으로 개선하는 흐름

📍

클로드 디자인은 '웹사이트'입니다 (클로드 코드의 기능이 아님)

코딩 화면(클로드 코드) 안에서 메뉴로 찾는 게 아니라, 브라우저에서 여는 별도 도구

기본 주소 : https://claude.ai/design (여기로 접속해 사용)

별개 도구여도 완성한 디자인은 프롬프트 복사로 클로드 코드에 전달해 우리 웹페이지에 반영 가능 (자세한 방법은 8번)

1. 도입 : 클로드 디자인이 무엇인가

🧭

정의

클로드 디자인 = Anthropic(앤트로픽)이 만든 AI 디자인 도구 (현재 베타)

채팅으로 요청 → 오른쪽 캔버스에 화면이 그려짐 → 그대로 코드로 사용

위치 : 화면 왼쪽은 대화(채팅), 오른쪽은 결과물(캔버스)로 나뉨

입력 : "회원가입 화면 만들어줘" 같은 한국어 요청 한 줄

출력 : 눈에 보이는 시안 + 그 시안을 그리는 실제 코드

사용 모델 : 현재 시점 최상위 모델 자동 적용

📌

기존 도구와 무엇이 다른가

피그마(Figma) 같은 디자인 도구 : 사람이 직접 선, 도형을 그림 → 비디자이너에게 진입장벽

클로드 디자인 : 말로 설명 → AI가 그림 → 코드까지 동시 생성

결과가 코드라서 "디자인 따로, 개발 따로" 단절이 사라짐

2. 왜 쓰나, UX와 UI

💡

클로드 디자인을 잘 쓰려면 'UX와 UI가 무엇인지'부터 알아야 한다

요청을 "예쁘게 해줘"로만 하면 결과도 막연함

"여백을 넓혀서 시선이 제목에 먼저 가게 해줘"처럼 디자인 언어로 요청해야 원하는 결과에 가까워짐

UI와 UX의 차이

🍽️

식당에 비유

UI(User Interface, 사용자 인터페이스) = 메뉴판, 접시, 조명 → 눈에 보이는 것

UX(User Experience, 사용자 경험) = 주문부터 식사까지 전체 흐름이 편한가

접시가 예뻐도(UI 좋음) 주문이 헷갈리면(UX 나쁨) 손님은 불편함

구분	UI	UX
뜻	사용자 인터페이스	사용자 경험
다루는 것	색, 글자, 버튼, 간격 등 보이는 요소	화면 흐름, 편의, 만족도 전체
질문	"보기 좋은가"	"쓰기 편한가"
식당 비유	접시, 조명	주문~식사 전체 경험

좋은 화면을 만드는 다섯 가지 원칙

📐

요청할 때 그대로 쓰는 디자인 언어

아래 다섯 가지를 알면, 막연한 "예쁘게" 대신 구체적으로 요청 가능

시각적 위계(Visual Hierarchy) : 중요한 것을 크고 진하게, 덜 중요한 것은 작게 → 시선 순서 설계

여백(Whitespace) : 요소 사이 빈 공간 → 답답함 해소, 핵심 강조 (비유 : 발표 슬라이드에 글자를 꽉 채우지 않는 것과 같음)

대비(Contrast) : 글자색과 배경색 차이 → 가독성 직결. 권장 기준 명도 대비 4.5:1 이상(WCAG, 웹 접근성 표준)

일관성(Consistency) : 버튼, 색, 간격을 화면마다 통일 → 학습 부담 감소 (제이콥의 법칙 : 사용자는 익숙한 패턴을 기대함)

정렬(Alignment) : 요소를 보이지 않는 격자(그리드)에 맞춤 → 정돈된 인상

💬

요청 문장 비교

❌ "예쁘게 만들어줘"

✅ "제목을 가장 크게, 본문은 회색으로, 버튼은 주황색으로 강조하고 여백을 넉넉히 줘"

3. 무엇을 만들 수 있나

🎨

클로드 디자인으로 만드는 결과물 종류

한 화면짜리 시안부터 여러 화면 묶음까지 생성

랜딩 페이지와 원페이지 소개 화면 : 행사, 모집, 제품 소개

대시보드와 관리 화면 : 숫자, 표, 진척 바가 들어간 운영 화면

회원가입, 로그인 등 입력 화면(폼)

슬라이드, 문서, 와이어프레임(밑그림) : 시작 템플릿으로 제공

우리가 이미 만든 웹페이지의 개선 시안 (7번 핵심)

📌

그림이 아니라 코드라는 점이 핵심

결과물은 그대로 동작하는 웹 화면 (버튼, 입력 칸이 실제로 눌리고 입력됨)

그래서 "보기만 하는 시안"이 아니라 "바로 쓰는 화면"

4. 클로드 디자인 사용 방법

📷

클로드 디자인 시작 화면 : 가운데 요청 입력창, 아래 시작 템플릿, 하단에 내 프로젝트 목록

화면 구성

상단 좌측 : Claude Design 로고 + Beta 표시

가운데 : "오늘은 무엇을 디자인할까요" 요청 입력창

입력창 하단 줄 : 디자인 시스템 / 템플릿 / 모델 표시 / '+' 버튼

아래 : 시작 템플릿(Slides, Document, Wireframe, Animation)

하단 : 지금까지 만든 내 프로젝트 목록

접근 방법 (세 가지 입구)

입구	방법
웹 브라우저	claude.ai/design 접속
클로드 데스크톱 앱	왼쪽 사이드바에서 Design 선택
클로드 코드(터미널)	`/design` 명령으로 이 웹 도구 열기

사용 조건

유료 플랜에서 사용 : Pro, Max, Team, Enterprise (무료 플랜 제외)

회사 계정(Enterprise)은 기본적으로 꺼져 있음. 관리자가 조직 설정에서 켜야 보임 → 안 보이면 관리자 문의

베타 단계라 화면, 기능이 수시로 바뀔 수 있음

5. 기본 4단계 : 처음부터 화면 하나 만들기

🚀

가장 단순한 흐름 : 빈 화면에서 시작

우리 웹페이지 개선(7번)에 들어가기 전, 도구에 익숙해지는 연습 단계

1단계 요청 : 입력창에 만들 화면을 한국어로 설명 (예 : "AI 스터디 모집 원페이지 만들어줘")

2단계 생성 : 오른쪽 캔버스에 화면이 그려짐 (수십 초 소요)

3단계 다듬기 : 대화로 수정 요청 또는 우측 조절 패널로 색, 밀도 변경

4단계 확정 : 마음에 들면 내보내기 또는 코드로 전달 (8번에서 다룸)

📷

4단계를 거친 결과 : 오른쪽 캔버스에 완성 화면, 우측에 색과 표시 방식을 바꾸는 조절 패널(Tweaks)

🎯

첫 요청 예시 프롬프트

아래 문장을 그대로 입력창에 넣어 연습

Plain Text

우리 팀 AI 스터디 모집을 위한 한 페이지 소개 화면을 만들어줘.
제목, 모집 대상, 일정, 신청 버튼이 들어가고
주황색을 강조색으로 써서 깔끔하고 모던하게.

6. 입력하기와 편집하기

입력 : 글자 말고도 붙일 수 있는 것들

📎

'+' 버튼으로 자료를 함께 전달

입력창 하단 '+' 버튼을 누르면 참고 자료를 붙일 수 있음

파일 첨부(Attach file) : 참고 이미지, 문서

폴더 첨부(Attach folder) : 자료 묶음 한 번에

다른 프로젝트 참조(Reference another project) : 이전에 만든 디자인 재활용

코드 연결(GitHub와 로컬) : 우리 웹페이지 불러오기 (7번 핵심)

편집 : 두 가지 방법

✏️

만든 화면을 고치는 법

대화로 고치기와 직접 손보기 두 갈래

대화로 수정 : "버튼을 더 크게", "표를 카드 형태로 바꿔줘"처럼 말로 요청

캔버스에서 직접 편집(Edit) : 화면 위 요소를 직접 선택해 수정

조절 패널(Tweaks) : AI가 만들어 준 조절 버튼으로 강조색, 정보 밀도, 기본 보기 방식 등을 즉시 변경

📌

조절 패널(Tweaks)이 편한 이유

색, 밀도 같은 잦은 수정은 매번 문장으로 요청하지 않고 클릭 한 번으로 처리

단, 항목 구성은 화면마다 AI가 자동으로 다르게 제시함

7. ★ 핵심 : 우리 웹페이지 디자인 개선하기 (GitHub 연동)

💡

이번 시간의 핵심 목표

이미 GitHub에 올리고 배포한 우리 웹페이지를 클로드 디자인으로 개선

GitHub 저장소 연결 → 개선 요청 → 새 시안 생성 → 코드로 반영 → 다시 배포

7-1. 저장소 연결하기 ('+' 버튼)

📷

입력창 하단 '+' 버튼을 누른 모습 : Code 항목에 'GitHub connected'와 'Link local code'

🔗

두 가지 연결 방법

둘 다 디자인 시스템 없이 바로 사용 가능

GitHub connected : GitHub에 올라간 저장소를 직접 선택해 연결 (예 : 우리가 배포한 교육 운영 웹페이지 저장소)

처음 연결할 때는 GitHub 계정 연결 승인(저장소 접근 권한 허용)이 한 번 필요. 비공개 저장소도 권한을 허용하면 읽힘

Link local code : 내 컴퓨터에 있는 코드 폴더를 연결

연결하면 클로드 디자인이 그 코드를 읽어 현재 화면 구조를 파악함

📌

디자인 시스템은 '선택'이지 필수가 아님

디자인 시스템 = 회사 공통 색, 글꼴, 버튼 규칙을 미리 등록해 두는 기능

바이브코딩 입문 단계에서는 굳이 안 만들어도 됨

입문자 권장 경로 : '+' 버튼 → GitHub와 로컬 코드 연결 (디자인 시스템 건너뜀)

7-2. GitHub 링크로 개선 요청하기

🎯

저장소를 연결하거나 링크를 제시하며 개선 요청

연결한 저장소를 지정하고, 어떤 화면을 어떻게 바꿀지 설명

무엇을 개선할지 구체적으로 : "더 깔끔하게"보다 "여백을 넓히고 상단에 핵심 숫자를 카드로"처럼 2번에서 배운 디자인 언어 사용

클로드 디자인이 저장소 코드를 읽고 → 개선된 시안을 캔버스에 생성

원래 화면 구조를 유지한 채 디자인만 다듬으므로, 결과를 코드로 되돌리기 쉬움

🎯

개선 요청 예시 프롬프트

연결한 저장소를 지정한 뒤 입력

Plain Text

연결한 저장소의 운영 대시보드 화면을 더 깔끔하고 모던하게 개선해줘.
상단에 핵심 숫자(전체 인원, 진행 중, 완료)를 카드로 정리하고
여백을 넉넉히, 강조색은 주황색으로.
기존 화면 구조와 기능은 그대로 유지해줘.

7-3. 개선 결과 확인하기

📷

GitHub 저장소를 읽어 개선한 운영 대시보드 : 왼쪽 대화에 '개선점' 설명, 가운데 새 화면, 우측 조절 패널

📌

결과를 그대로 두지 않고 다듬기

왼쪽 대화에서 AI가 무엇을 바꿨는지 설명을 확인

부족하면 대화로 추가 요청 또는 조절 패널로 색, 밀도 조정

확정되면 8번 '내보내기와 반영'으로 코드에 적용

8. 내보내기와 우리 코드에 반영하기

💡

시안을 실제 웹페이지로 되돌리는 단계

클로드 디자인은 결과를 코드로 내보낼 수 있어, 우리 저장소에 반영 가능

8-1. 내보내기 형식

📷

내보내기 패널 : 문서, 발표 자료, 압축본, 웹페이지 형식 제공

형식	용도
PDF	시안을 문서로 공유
PowerPoint	발표 자료로 활용
프로젝트 압축본(zip)	전체 파일 묶음 보관
단독 HTML	그 자체로 열리는 웹페이지 파일

8-2. 코딩 도구로 넘기기 (핵심 반영 경로)

📷

클로드 코드로 보낼 프롬프트를 복사하기 위해 ‘Send’ 클릭

‘Send’ 버튼을 클릭하면…

🔗

클로드 코드로 보내기(Send to local coding agent)

클로드 코드로 ‘클로드 디자인’을 그대로 전달하는 프롬프트 복사 가능

프롬프트 복사하여 내 클로드 코드에게 주면 됨.

만약 프로젝트 폴더에 기존 자료들이 존재한다면 이에 대한 언급도 추가로 해줘야 함.

🔄

반영 후 마무리

클로드 코드가 코드 수정 → GitHub에 올리기(push) → Vercel이 자동 배포

결과 : 개선된 디자인이 실제 우리 웹페이지에 반영됨

9. 실습 미션

⚠️

실습 전 주의

개선 결과를 곧바로 실제 서비스에 덮어쓰지 말 것. 먼저 시안으로 확인 후 반영

회사 계정에서 클로드 디자인이 안 보이면 관리자 권한 문제이므로 무리해서 우회하지 말 것

1️⃣

클로드 디자인 간단 연습 : 빈 화면에서 하나 만들기

claude.ai/design 접속 후 아래 요청 입력

Plain Text

우리 회사 등산 동호회 모집을 위한 1페이지 소개 화면을 만들어줘.
제목, 일정, 신청 버튼을 넣고 키컬러는 OO색으로 깔끔하게.

2️⃣

깃허브 연동 실습 : 우리 웹페이지 개선하기

'+' 버튼 → GitHub와 로컬 코드 연결 → 우리가 배포한 웹페이지 지정 후 입력

Plain Text

연결한 깃허브 저장소의 메인 화면을 더 깔끔하고 모던하게 개선해줘.
여백을 넓히고 핵심 정보를 카드로 정리, 키컬러는 OO색으로.
기존 기능과 구조는 그대로 유지해줘.

3️⃣

반영 : 코드로 되돌리기

마음에 드는 시안을 '클로드 코드로 보내기'로 전달

클로드 코드로 반영 → GitHub 올리기 → Vercel 배포까지 진행

🌱

스몰 프로젝트 : 본인 업무 화면에 적용

본인 직무에서 실제로 쓰는 화면(보고용 대시보드, 신청 폼 등)을 한 가지 골라

클로드 디자인으로 개선 시안을 만들어 보고, 어디가 좋아졌는지 2번의 다섯 원칙으로 설명

10. 주의사항과 마무리

⚠️

사용 시 유의점

베타 기능 : 화면 구성과 메뉴 이름이 예고 없이 바뀔 수 있음

회사 계정(Enterprise) : 기본적으로 꺼져 있어, 관리자가 켜기 전엔 안 보임 (정상)

실제 반영 전 항상 시안으로 확인. 곧바로 실서비스에 덮어쓰지 않기

민감 정보 주의 : 실제 고객, 내부 데이터가 담긴 화면을 무분별하게 올리지 않기

📌

마무리

클로드 디자인 = 말로 요청하면 코드까지 만들어 주는 AI 디자인 도구

잘 쓰려면 UX와 UI 기본 언어(위계, 여백, 대비, 일관성, 정렬)가 필요

핵심 활용 : '+' 버튼으로 우리 GitHub 저장소 연결 → 개선 시안 → 클로드 코드로 반영 → 배포