GUIDE · 디자인
클로드 밤티 화면을 없애는 레퍼런스 한 장 프롬프트
읽는 데 4분2026-09-25 공개
하루 6시간 만에AI 기초부터 나만의
서비스까지 완성
참고 화면 없이 클로드에게 페이지를 맡기면 보라색 그라데이션과 이모지 카드처럼 흔한 기본값 화면이 나오기 쉽습니다. 이 자료는 갤러리에서 레퍼런스 한 장을 고르고, 캡처를 첨부하고, 색·여백·폰트를 따라 다시 만들게 하는 프롬프트와 결과를 확인하는 세 가지 기준을 담았습니다.
Quick Start
클로드가 만든 화면이 밤티 나는 이유는 대부분 따라 할 기준이 없어서입니다. 마음에 드는 화면 한 장을 캡처해 함께 주고, 무엇을 따라야 하는지(색·여백·폰트)를 한 줄로 알려 주면 결과가 크게 달라집니다.
- STEP 1에서 갤러리에서 내 서비스와 분위기가 맞는 화면을 한 장 고릅니다.
- STEP 2에서 그 화면을 캡처해 프롬프트와 함께 클로드에 보냅니다.
- STEP 3에서 결과를 색·여백·폰트 세 가지로 확인하고 부족한 것만 다시 요청합니다.
STEP 1 · 3분레퍼런스를 한 장만 고른다
여러 장을 한꺼번에 주면 스타일이 섞입니다. 처음에는 한 장만 고릅니다.
| 사이트 | 이럴 때 |
|---|---|
| Land-book | 웹사이트·섹션별로 나눠 보고 싶을 때 |
| Godly | 요즘 느낌의 사이트를 빠르게 보고 싶을 때 |
| Lapa Ninja | 랜딩페이지 예시를 많이 보고 싶을 때 |
| Landingfolio | 업종·색으로 걸러 비슷한 화면을 찾을 때 |
| One Page Love | 한 장짜리 소개 페이지를 만들 때 |
고를 때는 예쁜 화면보다 내 서비스와 분위기가 맞는 화면을 고릅니다. 회의록 도구처럼 차분한 서비스라면 어두운 배경에 명조 제목을 쓴 화면, 쇼핑몰이라면 사진이 큰 화면이 맞습니다.
STEP 2 · 2분캡처를 붙여 넣고 프롬프트를 보낸다
고른 화면에서 만들려는 부분(보통 첫 화면)만 캡처해 클로드 채팅창에 붙여 넣고, 아래 프롬프트를 함께 보냅니다. 이미 만든 페이지가 있다면 그 코드나 캡처도 같이 넣습니다.
첨부한 레퍼런스의 색·여백·폰트를 따라서 이 페이지를 다시 만들어 줘. 글 내용은 바꾸지 말고, 색은 3개 이하, 폰트는 2종류까지만 써 줘. 이모지 아이콘과 그라데이션 배경은 빼고, 섹션 사이 여백은 레퍼런스처럼 넉넉하게 잡아 줘.
첨부한 레퍼런스의 색·여백·폰트를 따라서 [서비스 이름]의 랜딩 페이지를 만들어 줘. 서비스 설명은 "[한 줄 설명]"이고, 섹션은 첫 화면·기능 3개·마지막 버튼 순서로 해 줘. 레퍼런스의 사진이나 문구는 쓰지 말고 분위기만 따라 줘.
성공하면 같은 글이 레퍼런스와 비슷한 색 조합, 여백, 글꼴로 다시 배치된 화면이 나옵니다.
STEP 3 · 2분색·여백·폰트 세 가지만 확인한다
- 색: 배경·글자·보조색까지 3개 이하인지 봅니다. 더 많으면 "레퍼런스에 없는 색은 빼 줘"라고 요청합니다.
- 여백: 섹션 사이가 답답하면 "섹션 사이 여백을 지금의 두 배로 늘려 줘"라고 요청합니다.
- 폰트: 제목용과 본문용 2종류까지인지 봅니다. 더 많으면 "제목은 명조, 나머지는 한 가지 글꼴로 통일해 줘"라고 요청합니다.
레퍼런스와 비교해서 [색 / 여백 / 폰트] 가 다른 부분만 고쳐 줘. 나머지는 그대로 둬.
알아 둘 한계
- 영상 속 전후 화면은 설명을 위해 에브리 AI가 직접 만든 데모 페이지입니다. 오른쪽 화면은 Land-book에 올라온 한 템플릿의 색·여백·폰트를 따라 손으로 바꾼 것이며, 클로드 출력 결과를 그대로 캡처한 것은 아닙니다. 실제 결과는 모델과 프롬프트에 따라 달라집니다.
- 레퍼런스는 분위기를 참고하는 용도로만 씁니다. 다른 사이트의 로고·사진·문구를 그대로 가져오면 저작권 문제가 생길 수 있습니다.
- 갤러리 목록은 2026년 9월 25일 각 사이트를 열어 확인한 기준입니다. 일부 템플릿은 유료입니다.