클로드로 밤티 없는 화면 만드는 프롬프트 8가지

추석 AI 부트캠프 하루 6시간 만에
AI 기초부터 나만의
서비스까지 완성 이번 연휴를 기회로 삼으세요일정 보기 ↗

Quick Start

참고 화면을 기준으로 색, 글자, 아이콘, 부품, 배치, 움직임을 차례로 정합니다. 각 단계는 바로 앞의 코드와 확정한 규칙을 이어받습니다. 참고 이미지와 사용할 폰트·SVG 파일을 준비하고 대괄호를 채우세요.

1. 01~04에서 참고 화면의 구조와 색·폰트·아이콘을 정합니다.
2. 05~07에서 부품·배치·움직임을 현재 코드에 적용합니다.
3. 08에서 실제 캡처를 비교하고 영향이 큰 차이를 고칩니다.

STEP 1 · 1분참고 화면에서 가져올 구조를 고른다

참고 화면과 서비스 설명을 함께 넣습니다. 오늘셋에서는 정보 순서와 여백을 살피고 가져올 구조와 바꿀 구조를 나눴습니다. 추정 수치와 직접 확인한 값을 섞지 마세요.

Reference Analyst 역할을 맡아줘. [참고 화면]과 [내 서비스 설명]을 보고 정보 순서, 여백, 글자 위계를 분석해줘. 그대로 가져올 구조와 우리 서비스에 맞게 바꿀 구조를 나눠줘. 로고, 사진, 문구는 복제하지 말고, 확인할 수 없는 글꼴 이름이나 수치는 추정이라고 표시해줘.

성공하면 참고할 구조와 우리 서비스에 맞게 바꿀 부분이 나뉩니다.

STEP 2 · 1분색을 역할별 변수로 정한다

01의 분석과 선택한 색 코드를 넣습니다. 배경·글자·버튼의 실제 조합을 기준으로 대비를 계산하고, 다음 단계에도 같은 CSS 변수를 전달하세요.

Color Designer 역할을 맡아줘. 앞의 방향과 [색 코드]를 기준으로 배경, 본문, 보조 글자, 주요 버튼 색을 정해 CSS 변수로 묶어줘. 대비는 일반 본문 4.5:1, 테두리와 focus 표시 3:1 이상인 조합으로 계산해줘. 그라데이션과 새 강조색은 넣지 말고, 오류 색이 꼭 필요하면 하나만 정해 대비를 함께 계산해줘.

성공하면 색의 용도와 텍스트·배경 대비가 함께 정리됩니다.

STEP 3 · 1분제목과 본문의 글자 위계를 맞춘다

02의 색 규칙과 제공할 한글 폰트 파일을 넣습니다. 짧은 제목만 보지 말고 긴 한글 문장도 넣어 좁은 화면의 줄바꿈을 확인하세요.

Type Designer 역할을 맡아줘. [한글 폰트 파일]로 제목, 본문, 버튼의 크기와 굵기, 줄 간격을 정해줘. 390px과 1440px에서 제목과 긴 문장이 자연스럽게 줄바꿈되게 하고, 본문은 16px 이상에 대체 글꼴도 지정해줘. 색과 문구는 유지해줘.

성공하면 폰트가 적용되고 제목·본문·버튼의 위계가 보입니다.

STEP 4 · 1분필요한 아이콘만 같은 세트로 맞춘다

03까지의 화면과 사용할 SVG 파일을 함께 넣습니다. 기능에 맞는 파일이 없으면 글자 버튼을 유지하세요. 장식 아이콘과 아이콘만 있는 버튼의 이름을 구분합니다.

Icon Curator 역할을 맡아줘. [아이콘 세트]와 [SVG 파일]만 써서 필요한 기능에 아이콘을 짝지어줘. 크기와 선 굵기를 통일하고, 장식용은 접근성 트리에서 숨기고, 아이콘만 있는 버튼에는 이름을 붙여줘. 맞는 아이콘이 없으면 이모지로 채우지 말고 글자로 남겨줘.

성공하면 아이콘의 크기·선 굵기와 접근성 이름이 정리됩니다.

STEP 5 · 1분반복되는 부품의 상태를 통일한다

04까지 반영된 코드와 색·폰트·아이콘 규칙을 전달합니다. 입력 오류나 비활성 조건이 실제 기능에 있는지 먼저 확인하고, 같은 부품의 상태를 나란히 비교하세요.

Component Designer 역할을 맡아줘. [내 화면 코드]의 주요 버튼, 보조 버튼, 입력창, 카드를 공통 규칙으로 정리하고 앞의 색, 폰트, 아이콘을 적용해줘. 상태는 기본, hover, focus를 만들고, disabled와 오류는 실제로 그런 조건이 있는 부품에만 넣어줘. 기존 기능과 문구는 유지하고, 실제로 반복되는 부품만 묶어줘.

성공하면 반복 버튼·입력창·카드가 공통 규칙을 따릅니다.

STEP 6 · 1분화면 너비에 맞게 배치를 조정한다

05의 부품을 적용한 코드를 넣습니다. 390px과 1440px에서 중요한 행동이 먼저 보이는지 살피고, 긴 문장과 띄어쓰기 없는 입력도 넣어 넘침을 확인하세요.

Layout Editor 역할을 맡아줘. [내 화면 코드]에 앞서 정한 부품을 적용하되 문구는 유지해줘. 가장 중요한 행동 하나가 먼저 보이게 하고, 390px은 한 열, 1440px은 내용에 맞게 배치해줘. 섹션 간격과 최대 너비는 CSS 변수로 정리하고, 가로 넘침과 긴 한글 줄바꿈도 확인해줘.

성공하면 행동 순서와 간격이 정리되고 가로 넘침을 점검할 수 있습니다.

STEP 7 · 1분상태 변화를 알려주는 움직임을 넣는다

06의 코드에 버튼 반응과 목록 추가 동작만 지정합니다. 움직임을 줄이는 설정에서도 확인하고, 목록이 나타나는 동안 다음 입력이 가능한지 함께 검사하세요.

Motion Designer 역할을 맡아줘. [내 화면 코드]에 상태 변화를 알려주는 160~240ms 전환만 넣어줘. 버튼 반응과 목록 추가에만 적용하고, 반복 배경 애니메이션은 넣지 마. prefers-reduced-motion에서는 이동 효과를 없애고, 동작을 기다리느라 입력이 막히지 않게 해줘.

성공하면 움직임이 상태 변화를 알리고 입력을 막지 않습니다.

STEP 8 · 1분실제 화면을 비교하고 차이를 고친다

07의 코드와 실제 캡처, 처음 참고 화면을 함께 넣습니다. 의도적으로 바꾼 색과 수정할 차이를 나누고, 영향이 큰 항목을 고친 뒤 같은 너비로 다시 확인하세요.

Mockup Reviewer 역할을 맡아줘. [내 화면 코드]와 [실제 캡처]를 처음 참고 화면과 비교해줘. 390px과 1440px에서 색, 폰트, 간격, 정렬, focus 상태의 차이를 짚고, 영향이 큰 3개만 고쳐 수정 코드와 확인 방법을 줘. 보지 못한 화면이나 실행하지 않은 검사는 완료라고 쓰지 마.

성공하면 수정 전후의 차이와 확인 방법이 함께 남습니다.

한눈에 보는 8단계 흐름표

실제로 돌려본 전후 화면

왼쪽은 기본 스타일의 시작 화면, 오른쪽은 08까지 적용한 최종 화면입니다. 같은 너비에서 입력창·버튼·목록의 배치를 비교할 수 있습니다.

가로 넘침은 문서 전체 너비와 표시 영역 너비를 비교한 값입니다. 대비는 화면의 텍스트와 배경색을 상대휘도로 계산한 값입니다.

08에서는 영향이 큰 차이를 다음 3건으로 좁혀 수정했습니다.

삭제 글자의 대비는 6.19:1로 유지됐습니다. 처음부터 다른 화면을 다시 만드는 대신, 앞 단계에서 정한 색과 폰트를 유지하며 차이를 조정했습니다.

알아 둘 한계

• 실행 기록 기준일은 2026년 10월 4일입니다. Claude Code 안의 Claude(Opus 5.5) 서브에이전트가 01→08을 앞 단계 결과를 이어 붙여 한 번 실행했습니다. claude.ai 웹과 Sonnet 5.5에서는 실행하지 않았습니다. 이 글은 보관된 실행 기록을 대조한 것이며 새 실행 결과가 아닙니다.
• 현재 카드에는 실행 후 02의 오류 색·비텍스트 대비, 03의 긴 문장, 05의 실제 비활성·오류 조건, 06의 문구 유지 지시가 보완됐습니다. 전문은 현재 카드 기준이며 이 문구 그대로 전체 재실행한 기록은 없습니다.
• 참고 화면과 연습용 오늘셋 화면을 같은 에이전트가 만들고 한 번 실행했습니다. 외부 서비스나 다른 모델에서도 같은 결과가 나온다고 보장하지 않습니다.
• 전후 화면은 헤드리스 Chrome 캡처입니다. 실제 휴대폰·Safari·Windows, 화면 낭독기, 폰트 실패 시 대체 글꼴 화면은 미검증입니다. 대비 측정만으로 전체 접근성 검사를 마쳤다는 뜻은 아닙니다.
• 오류 상태와 hover 상태의 구분이 약한 점은 남아 있습니다. 글에 표시한 STEP 시간은 읽고 입력을 준비할 분량 안내이며 실제 생성·수정 소요시간 실측이 아닙니다.

FAQ

참고 화면만 있으면 되나요? 서비스 설명, 사용할 색 코드·폰트 파일·SVG, 현재 화면 코드도 해당 단계에 함께 넣어야 합니다. 참고 화면의 로고·사진·문구는 복제하지 않습니다.

마지막에는 무엇을 전달하나요? 실제 코드와 390px·1440px 캡처, 처음 참고 화면을 함께 전달합니다. 바꾸기로 한 차이와 고쳐야 할 차이를 구분하면 수정 범위를 좁힐 수 있습니다.

공식 참고 자료

• Claude Code 공식 — 코드 읽기·수정·명령 실행 개요
• Anthropic 공식 — 프롬프트 엔지니어링 개요

두 공식 문서를 2026년 10월 4일에 직접 열어 확인했습니다. 위 수치는 공식 문서의 성능 주장이 아니라 오늘셋 실행 기록에서 가져온 결과입니다.