Claude에게 UI 코드를 요청할 때 어떻게 프롬프트를 써야 더 좋은 결과를 받을 수 있을지 고민해본 적 있으신가요? Design Skill과 함께 효과적인 프롬프트를 조합하면 훨씬 완성도 높은 결과물을 얻을 수 있어요.
이번 글에서는 Claude Design Skill 환경에서 프롬프트를 어떻게 작성해야 하는지, 실용적인 팁과 예시를 함께 살펴볼게요.
Claude Design Skill 프롬프트의 기본 원칙
구체적으로 요청하기
Design Skill이 적용된 환경에서도 프롬프트가 모호하면 원하는 결과를 얻기 어려워요. “버튼 만들어줘” 보다는 “파란색 배경에 흰색 텍스트, 호버 시 어두워지는 기본 버튼 컴포넌트를 React와 Tailwind CSS로 만들어줘”처럼 구체적으로 요청하면 훨씬 정확한 코드를 받을 수 있어요.
기술 스택 명시하기
어떤 프레임워크와 라이브러리를 사용하는지 명시하는 게 중요해요. React, Vue, Svelte인지, CSS 방식은 Tailwind인지 CSS Modules인지, TypeScript를 사용하는지 등을 명확하게 알려주면 Claude가 올바른 문법과 패턴으로 코드를 생성해줘요.
컨텍스트 제공하기
단순히 컴포넌트 하나를 요청하는 것보다는 그 컴포넌트가 어떤 페이지의 어떤 역할을 하는지 설명해주는 게 좋아요. “이 버튼은 결제 화면의 주요 CTA(Call to Action)로 사용될 거야”라는 컨텍스트가 있으면 더 적합한 디자인을 생성해줘요.
효과적인 프롬프트 패턴들
컴포넌트 요청 기본 패턴
UI 컴포넌트를 요청할 때 효과적인 패턴은 다음과 같아요. “역할 + 기술 스택 + 상태 변화 + 접근성 요구사항” 순서로 요청하는 거예요. 예를 들어 “Tailwind CSS와 React를 사용해서 드롭다운 메뉴 컴포넌트를 만들어줘. 메뉴 항목은 최대 5개, 키보드 네비게이션과 aria 속성도 포함해서”라고 하면 완성도 높은 코드를 받을 수 있어요.
페이지 레이아웃 요청 패턴
전체 페이지나 섹션 레이아웃을 요청할 때는 화면 크기별 반응형 동작을 함께 명시해요. “모바일에서는 1열, 태블릿에서는 2열, 데스크탑에서는 3열 그리드로 배치되는 카드 섹션을 만들어줘”처럼 구체적인 반응형 조건을 넣어주면 더 실용적인 코드를 얻을 수 있어요.
디자인 참고 요청 패턴
특정 디자인 스타일을 참고하고 싶을 때는 그 특성을 언어로 설명해요. “미니멀하고 여백이 넉넉한 스타일로”, “다크 테마 기반에 강조색으로 파란색 계열을 사용해서”, “Material Design 원칙을 따르는” 등의 표현이 유용해요.
Design Skill과 프롬프트를 조합하는 방법
Skill의 기본 원칙을 활용하기
Design Skill 파일에 정의된 원칙들을 프롬프트에서 참조하면 더 일관된 결과를 얻을 수 있어요. 예를 들어 Skill에서 색상 팔레트를 정의했다면 프롬프트에서 “Skill에서 정의된 primary 색상을 사용해서”라고 언급하면 돼요. Claude가 Skill 파일을 읽고 해당 색상을 적용해줘요.
기존 코드 개선 요청
새 컴포넌트를 만드는 것 외에도 기존 코드를 Design Skill에 맞게 개선해달라고 요청할 수도 있어요. “이 컴포넌트를 Design Skill에서 정한 접근성 기준에 맞게 개선해줘”처럼 요청하면 Skill의 지침을 바탕으로 코드를 리팩토링해줘요.
단계별 개발 요청
복잡한 UI를 한 번에 요청하기보다는 단계별로 나눠 요청하는 게 효과적이에요. 먼저 기본 구조를 잡고, 그 다음에 스타일을 추가하고, 마지막으로 인터랙션과 접근성을 추가하는 방식으로 진행하면 각 단계에서 품질을 확인하고 수정할 수 있어요.
잘못된 프롬프트와 개선 예시
모호한 프롬프트의 예
나쁜 예: “멋있는 헤더 만들어줘”
이런 모호한 요청은 Claude가 임의로 해석해서 예상과 다른 결과를 줄 수 있어요. 멋있다는 게 어떤 스타일인지, 헤더에 어떤 요소가 들어가야 하는지 전혀 알 수 없거든요.
개선된 프롬프트 예
좋은 예: “React + Tailwind CSS로 SaaS 제품 랜딩 페이지의 네비게이션 헤더를 만들어줘. 로고(텍스트), 상단 메뉴 3개, 오른쪽에 ‘시작하기’ CTA 버튼 포함. 모바일에서는 햄버거 메뉴로 전환되는 반응형이어야 해. 배경은 흰색, 스크롤 시 그림자 효과 추가”
이렇게 구체적으로 요청하면 Claude가 정확히 원하는 컴포넌트를 생성해줘요.
프롬프트 작성 시 유용한 키워드들
디자인 관련 키워드
- 반응형 (Responsive) – 화면 크기별 다른 레이아웃
- 접근성 (Accessibility) – 스크린리더, 키보드 네비게이션 지원
- 다크 모드 (Dark mode) – 라이트/다크 테마 전환
- 애니메이션 (Animation) – 전환 효과, 호버 효과 등
기술 관련 키워드
- TypeScript – 타입 정의 포함 요청
- 스토리북 (Storybook) – 컴포넌트 문서화
- 단위 테스트 – 테스트 코드 함께 요청
- 최적화 – 성능 최적화 코드 요청
마무리
Claude Design Skill과 효과적인 프롬프트의 조합은 AI를 활용한 프론트엔드 개발의 퀄리티를 크게 높여줘요. 구체적이고 명확한 요청, 기술 스택 명시, 컨텍스트 제공이 좋은 프롬프트의 핵심이에요.
처음에는 요청이 길어지는 게 번거롭게 느껴질 수 있지만, 몇 번 반복하면 자연스럽게 좋은 프롬프트를 쓰는 습관이 생겨요. Design Skill과 함께 AI 코딩의 효율을 최대로 높여보세요!