클로드로 디자인하기

AI 디자인 시대, Claude가 바꾸는 것

AI가 디자인 업계를 어떻게 바꾸고 있는지 살펴보고, Claude로 디자인 작업을 시작하는 법을 배운다. 이 시리즈 전체 로드맵과 Claude의 디자인 활용 범위를 이해한다.

프롬프트로 디자인 언어 말하기

디자인 프롬프트의 구조를 이해하고, Claude에게 정확하게 디자인 의도를 전달하는 법을 배운다. 좋은 프롬프트와 나쁜 프롬프트의 차이, 레퍼런스 전달법, 반복 개선 대화 방법을 실습한다.

브랜드 아이덴티티 기획

Claude와 함께 브랜드 아이덴티티를 처음부터 기획한다. 브랜드 이름, 미션, 타겟 페르소나, 톤앤매너를 체계적으로 설계하고 하나의 문서로 정리하는 전 과정을 실습한다.

색상 팔레트 & 타이포그래피 설계

Claude로 브랜드에 맞는 색상 팔레트를 설계하고, 어울리는 폰트 조합을 선정한다. CSS 변수로 디자인 토큰을 정리하고, 실제 코드에서 재사용 가능한 색상 시스템을 구축한다.

UI 컴포넌트 설계

버튼, 폼, 카드, 배지 등 핵심 UI 컴포넌트를 Claude로 설계하고 HTML/CSS 코드로 구현한다. 재사용 가능한 컴포넌트 시스템을 구축하는 방법을 배운다.

랜딩 페이지 설계 & 구현

랜딩 페이지의 7가지 섹션 구조를 배우고, Claude로 와이어프레임 아이디어를 잡은 뒤 실제 HTML/CSS 코드로 완성한다. Hero부터 CTA까지 전환율 높은 랜딩 페이지를 처음부터 끝까지 만든다.

반응형 레이아웃 설계

모바일 우선(Mobile First) 설계 원칙을 이해하고, Claude로 미디어 쿼리와 Flexbox/Grid를 활용한 반응형 레이아웃을 구현한다. 6강에서 만든 랜딩 페이지를 완전한 반응형으로 완성한다.

다크모드 & 테마 시스템

CSS 변수 기반의 다크모드를 구현하고, 사용자가 직접 테마를 선택할 수 있는 테마 시스템을 만든다. prefers-color-scheme 미디어 쿼리와 JavaScript 토글을 모두 다룬다.

마이크로인터랙션 & 애니메이션

버튼 클릭, 호버, 스크롤 등 사용자 행동에 반응하는 마이크로인터랙션을 CSS와 JavaScript로 구현한다. Claude로 UX를 살리는 애니메이션 효과를 빠르게 만드는 방법을 익힌다.

이미지 & 아이콘 활용

Unsplash 이미지 선택 프롬프트, SVG 아이콘 생성, 이미지 생성 AI(Midjourney/DALL-E) 프롬프트 작성까지 Claude와 함께 비주얼 리소스를 완성하는 모든 방법을 익힌다.

포트폴리오 사이트 실전 제작

1~10강에서 배운 모든 기술을 종합해 개인 포트폴리오 사이트를 처음부터 끝까지 완성한다. 브랜드 설계, 색상 시스템, 컴포넌트, 랜딩 페이지, 반응형, 다크모드, 애니메이션까지 하나의 완성된 프로젝트로 구현한다.

디자인 핸드오프 & 실전 협업

Claude로 만든 디자인을 개발자에게 효율적으로 전달하는 핸드오프 방법을 배운다. 디자인 스펙 문서 작성, Figma 연동, 코드 주석 규칙, 유지보수 가이드까지 실무 협업의 전체 흐름을 익힌다.