GUIDE · 디자인 레퍼런스
클로드 밤티를 줄이는 밤티 탈출 레퍼런스 사이트 모음
읽는 데 5분2026-09-25 공개
하루 6시간 만에AI 기초부터 나만의
서비스까지 완성
클로드에게 화면을 맡길 때마다 비슷한 그라데이션과 이모지 아이콘이 나온다면, 참고할 화면 없이 시켰기 때문일 가능성이 큽니다. 이 자료는 잘 만든 웹 화면을 모아 둔 사이트 다섯 곳과, 고른 화면을 클로드에 넣는 프롬프트를 담았습니다.
Quick Start
클로드는 따로 기준을 주지 않으면 가장 무난한 모양으로 화면을 채웁니다. 잘 만든 화면 한두 장을 함께 주면 여백·글자 크기 위계·색 쓰는 법을 그 기준에 맞춥니다. 아래 다섯 곳은 로그인 없이 둘러볼 수 있고, 일부 기능은 유료(Pro) 플랜입니다.
- STEP 1에서 만들 화면에 맞는 사이트를 고릅니다.
- STEP 2에서 마음에 드는 화면을 캡처합니다.
- STEP 3에서 캡처와 프롬프트를 클로드에 함께 넣습니다.
STEP 1 · 3분만들 화면에 맞는 사이트를 고른다
| 사이트 | 이럴 때 | 특징 |
|---|---|---|
| Godly | 요즘 느낌을 빠르게 잡고 싶을 때 | 잘 만든 웹사이트를 매일 골라 올리는 큐레이션 |
| Land-book | 특정 부분만 막혔을 때 | 웹사이트·섹션·모바일·모션별로 나눠 볼 수 있음 |
| Lapa Ninja | 랜딩페이지 예시를 많이 보고 싶을 때 | 2015년부터 모은 랜딩페이지 7,300개 이상 |
| Landingfolio | 내 서비스와 비슷한 화면을 찾을 때 | 업종·기기·색으로 걸러 볼 수 있음 |
| One Page Love | 한 장짜리 소개 페이지를 만들 때 | 원페이지 사이트만 골라 모음 |
STEP 2 · 3분마음에 드는 화면을 캡처한다
이 단계에서는 화면 전체보다 만들려는 부분을 캡처합니다. 첫 화면(히어로)을 만들 거면 첫 화면만, 가격표를 만들 거면 가격표만 자르면 클로드가 무엇을 참고할지 헷갈리지 않습니다. 두세 장이면 충분합니다.
STEP 3 · 5분캡처와 프롬프트를 함께 넣는다
첨부한 레퍼런스 화면의 레이아웃, 여백, 글자 크기 위계, 색 쓰는 방식을 먼저 짧게 분석해줘. 그다음 그 기준으로 [우리 서비스 한 줄 설명]의 랜딩 페이지 첫 화면을 만들어줘. 문구와 이미지는 우리 서비스에 맞게 새로 쓰고, 레퍼런스의 로고·문구·사진은 그대로 가져오지 마.
성공하면 분석 요약이 먼저 나오고, 그 기준을 따른 화면이 이어서 나옵니다.
방금 화면에서 보라색 그라데이션, 이모지 아이콘, 가운데 정렬 카드 세 개처럼 흔한 요소를 빼고, 레퍼런스처럼 여백을 넓히고 강조색을 하나만 써서 다시 만들어줘.
알아 둘 한계
- 레퍼런스는 분위기와 구조를 배우는 용도입니다. 다른 서비스의 로고·문구·사진을 그대로 쓰면 저작권 문제가 생길 수 있습니다.
- 사이트별 무료 범위와 유료 플랜 조건은 바뀔 수 있습니다. 이 글은 2026년 9월 25일 각 사이트를 직접 열어 본 내용 기준입니다.
공식 참고 자료
- Godly 공식 — 매일 큐레이션
- Land-book 공식 — 웹사이트·섹션 갤러리
- Lapa Ninja 공식 — 랜딩페이지 7,300개 이상
- Landingfolio 공식 — 업종·기기·색 필터
- One Page Love 공식 — 원페이지 사이트 모음