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

디자인 프롬프트란?

일반적인 질문과 디자인 프롬프트는 다릅니다. "버튼 색상 추천해줘"는 질문이고, "20대 여성 타겟 뷰티 앱에서 구매 유도용 CTA 버튼의 색상과 텍스트를 추천해줘"는 디자인 프롬프트입니다.

Claude는 맥락이 많을수록 더 좋은 결과를 냅니다. 디자인 프롬프트는 맥락을 구조적으로 전달하는 기술입니다.

좋은 디자인 프롬프트의 5가지 구성 요소

나쁜 프롬프트 vs 좋은 프롬프트

로그인 페이지 디자인해줘

B2B SaaS 기업용 프로젝트 관리 도구의 로그인 페이지를 디자인해줘.

- 타겟: 중소기업 팀장급, 30~45세
- 분위기: 신뢰감 있고 깔끔한. Notion, Linear 레퍼런스 참고
- 색상: 메인 #1e40af (딥블루), 배경 흰색
- 포함 요소: 이메일 + 비밀번호 입력, 구글 로그인 버튼, "비밀번호 찾기" 링크
- 출력: HTML + Tailwind CSS 코드

레퍼런스를 텍스트로 전달하는 법

Claude에게 이미지를 직접 붙여넣거나 URL을 주는 방법 외에, 텍스트로 레퍼런스를 묘사하는 기술이 필요합니다.

방법 1 — 잘 알려진 브랜드 이름 언급
"Stripe처럼 깔끔하고 개발자 친화적인 느낌"
"Apple처럼 여백이 많고 제품 중심의 미니멀 디자인"
"Airbnb처럼 따뜻하고 여행의 설렘이 느껴지는"

방법 2 — 형용사로 분위기 묘사
"밝고 에너제틱한, 젊은, 대담한, 컬러풀한"
"차분하고 신뢰감 있는, 절제된, 프로페셔널한"

방법 3 — 색상과 느낌 조합
"딥 네이비 + 골드 조합. 럭셔리하지만 접근하기 쉬운 느낌"
"파스텔 계열, 봄날 같은, 부드럽고 귀여운"

방법 4 — 이미지를 직접 붙여넣기 (Claude.ai 사용 시)
스크린샷이나 레퍼런스 이미지를 대화창에 드래그해서 전달 가능

반복 개선 대화 — 결과물을 다듬는 법

첫 결과물이 완벽하지 않아도 됩니다. 대화로 다듬는 것이 AI 디자인의 핵심입니다.

1단계 — 큰 방향 잡기
"랜딩 페이지 히어로 섹션 헤드라인 5가지 제안해줘"

2단계 — 방향 선택 후 좁히기
"3번째가 가장 마음에 드는데, 더 간결하게 줄여줘. 15자 이내로"

3단계 — 세부 조정
"좋아. 이제 이 헤드라인을 사용한 서브카피(30자 이내)도 만들어줘"

4단계 — 코드로 구현
"이 헤드라인 + 서브카피를 사용한 히어로 섹션 HTML/CSS 코드 작성해줘.
 배경은 그라디언트(인디고 700 to 바이올렛 800), 텍스트는 흰색"

디자인 프롬프트는 한 번에 완성하려 하지 마세요. 방향 → 선택 → 세부 조정 → 구현의 4단계 대화가 가장 효율적입니다.

실습 — 지금 바로 해보기

나는 재무 계획을 도와주는 모바일 앱 "MoneyMap"을 디자인 중이야.

타겟은 사회초년생 (25~30세), 돈 관리에 불안감을 느끼지만 시작하고 싶은 사람들.
분위기: 겁주지 않고 친근하게, 부드럽고 희망적인 느낌. Toss 앱 참고.

다음을 제안해줘:
1. 앱 메인 컬러 팔레트 (3색, hex 코드)
2. 온보딩 화면 헤드라인 3가지
3. 탭 메뉴 아이콘 이름 5개 (홈, 지출, 수입, 목표, 설정 아닌 창의적인 이름)

결과를 받은 뒤 마음에 드는 항목을 선택하고, "1번 색상 팔레트를 사용해서 카드 컴포넌트 CSS를 만들어줘"처럼 대화를 이어가 보세요.

관련 검색어  ·  디자인 프롬프트 작성법, Claude 디자인 요청, AI 디자인 프롬프트, 프롬프트 엔지니어링 디자인, Claude 활용법