감각이 없어도, 말로 깔끔한 디자인을 뽑는다
완성하면 생기는 것
컬러·폰트 시스템, 로고(SVG), 화면 목업, 히어로 이미지 한 세트
Claude Pro 이상 구독필수
디자인 아이디어를 코드(SVG·HTML)와 이미지 설명으로 바꿔 주는 두뇌입니다. claude.ai 웹에서 바로 쓰거나, VS Code의 Claude Code 확장으로 써도 됩니다.
컴퓨터와 웹 브라우저필수
만든 디자인(SVG·HTML)을 미리 볼 도구는 브라우저 하나면 충분합니다.
(선택) 이미지 생성 도구선택
사진 같은 이미지가 필요하면 이미지 생성 AI를 함께 씁니다. 없으면 Claude로 일러스트풍 SVG·도형 그래픽을 만들 수 있습니다.
(선택) VS Code선택
디자인을 바로 코드에 적용하려면 앞의 코딩 트랙처럼 VS Code를 쓰면 편합니다.
디자인의 90%는 '일관성'입니다. 색 몇 개, 폰트 한두 개, 여백 규칙만 정해도 훨씬 전문적으로 보입니다. Claude는 이 규칙을 잡아 주고, 코드로 바로 쓸 수 있게 만들어 줍니다.
이 트랙에선 컬러·폰트 시스템 → 로고 → 화면 목업 → 이미지 순서로, 하나의 통일된 브랜드를 말로 만들어 봅니다.
팁
예시 브랜드를 하나 정해 두고 시작하세요. 예: '도시 직장인을 위한 차분한 명상 앱, 이름은 숨(SOOM)'. 구체적일수록 결과가 좋습니다.
가장 빠른 길은 claude.ai에 로그인해 바로 대화하는 것입니다. 디자인 결과를 코드에 적용까지 하려면 VS Code의 Claude Code 확장을 쓰면 됩니다.
어느 쪽이든 Pro 이상 구독이면 충분합니다.
무엇을, 누구를 위해, 어떤 느낌으로 만들지 한 문단으로 적습니다. Claude에게 "명상 앱 '숨'의 디자인 방향을 잡아줘. 분위기는 차분하고 미니멀, 대상은 20~40대 직장인, 신뢰감과 편안함이 느껴지면 좋겠어"처럼 시킵니다.
Claude가 분위기 키워드, 추천 색 방향, 폰트 느낌을 정리해 줍니다. 이게 앞으로의 기준이 됩니다.
팁
마음에 드는 브랜드나 앱이 있으면 'OO 같은 느낌'이라고 말하면 방향이 빨리 잡힙니다.
"'숨' 브랜드의 컬러 팔레트를 만들어줘. 메인 색, 보조 색, 배경, 글자색을 HEX 코드로 주고, 각 색을 언제 쓰는지도 적어줘. 어울리는 무료 폰트도 제목용·본문용으로 추천해줘"라고 시킵니다.
결과로 받은 HEX 코드와 폰트 이름이 디자인의 뼈대입니다. 마음에 안 드는 색은 '메인을 더 차분한 청록으로'처럼 바로 바꿉니다.
팁
색이 잘 어울리는지 보려면 Claude에게 '이 팔레트로 색 견본(swatch)을 보여주는 HTML 한 장 만들어줘'라고 한 뒤 브라우저로 열어 보세요.
"'숨(SOOM)' 텍스트 로고를 SVG로 만들어줘. 부드러운 곡선 느낌으로, 위에서 정한 메인 색을 쓰고, 옆에 들숨/날숨을 상징하는 간단한 심볼도 함께"라고 시킵니다.
받은 SVG 코드를 빈 텍스트 파일에 붙여 logo.svg로 저장한 뒤 브라우저로 열면 로고가 보입니다. '심볼을 더 단순하게', '글자 간격 넓게'처럼 다듬습니다.
팁
SVG는 아무리 키워도 안 깨지는 그래픽이라 로고·아이콘에 가장 좋습니다. 색·크기 변경도 코드 한 줄로 됩니다.
오류가 나면?
"'숨' 앱의 첫 화면 목업을 HTML 한 파일로 만들어줘. 위에서 정한 색·폰트·로고를 쓰고, 가운데에 '오늘의 호흡 시작' 큰 버튼, 아래에 추천 명상 3개 카드를 넣어줘. 모바일 화면 비율로"라고 시킵니다.
받은 코드를 design.html로 저장해 브라우저로 열면 실제 화면처럼 보입니다. 진짜 앱을 만들기 전에 모습을 먼저 확정하는 단계입니다.
팁
여러 화면이 필요하면 '같은 스타일로 설정 화면도 만들어줘'처럼 이어서 시키면 톤이 유지됩니다.
사진 같은 이미지가 필요하면 이미지 생성 AI에 넣을 영어 프롬프트를 Claude에게 받습니다. "'숨' 앱 메인에 쓸 차분한 새벽 안개 낀 호수 이미지를 위한 영어 프롬프트를 만들어줘. 우리 브랜드 색감(청록·미색)에 맞게"처럼요.
사진이 아니어도 된다면 Claude에게 도형·그라데이션 기반의 추상 배경을 SVG/CSS로 직접 만들어 달라고 해도 됩니다. 텍스트가 없는 추상 그래픽은 이 방식이 더 정확합니다.
주의
이미지 생성 AI는 글자(텍스트)를 깨뜨리는 경우가 많습니다. 로고·문구는 이미지에 넣지 말고, 4~5단계처럼 SVG·HTML로 따로 얹는 게 깔끔합니다.
만든 색 코드, 폰트, 로고(SVG), 이미지 파일을 한 폴더(assets)에 모읍니다. 이제 이 디자인을 웹사이트·앱·영상 트랙에서 그대로 씁니다.
코드에 바로 넣고 싶으면 VS Code의 Claude에게 "이 컬러·폰트·로고를 내 Next.js 프로젝트에 적용해줘"라고 하면 연결까지 해 줍니다.
팁
SVG 로고를 PNG로도 저장해 두면(브라우저에서 캡처하거나 변환), 발표 자료·SNS 등 어디에나 쓰기 좋습니다.
축하합니다. 색·폰트·로고·화면·이미지가 하나로 어울리는 브랜드 한 세트가 생겼습니다.
이제 이 디자인을 웹사이트·앱·게임 트랙과 합치면, 보기에도 전문적인 진짜 결과물이 됩니다. 만든 디자인은 커뮤니티에 공유해 피드백을 받아 보세요.
