이런 분께
새 페이지 시안 전에 레퍼런스 사이트를 여러 개 캡처해 두고, 무엇을 가져올지 눈으로만 비교하던 디자이너께 맞아요. 캡처를 클로드에 같이 올리면 항목별 비교표가 나오고, 팀에 공유할 근거 자료가 생겨요.
끝나면 이렇게 됩니다
커피 쇼핑몰 첫 화면 예시 캡처 3장을 클로드에 올려 실제로 받은 표예요.
| 항목 | A (HANA COFFEE) | B (BEANLAB) | C (daily drip) |
|---|---|---|---|
| 첫 화면 구성 | 왼쪽 제목·버튼, 오른쪽 큰 이미지 2단 | 가운데 정렬 큰 제목, 아래 넓은 이미지 | 상품 칸 4개가 먼저, 제목은 그 아래 |
| 바탕·포인트 색 | 베이지 바탕, 진초록 버튼, 갈색 이미지 | 거의 검은 바탕, 주황 버튼 | 흰 바탕, 파란 로고·버튼 |
| 제목 글자 | 굵은 고딕 한글 2줄 | 영문 대문자 굵은 고딕 2줄 | 굵은 고딕 한글 1줄 |
| 버튼 | "정기배송 시작하기", 둥근 알약 모양 | "지금 담기", 각진 사각형 | "전체 보기", 모서리 살짝 둥근 사각형 |
| 사게 만드는 말 | 매주 집으로 | 이번 주 한정 | 2만원 이상 무료배송 |
표 아래에는 "우리 시안에 가져올 점"이 근거 위치와 함께 붙어요. 예: "B안처럼 '이번 주 한정' 같은 기한 문구를 제목 바로 아래에 둔다(화면 가운데, 버튼 위)".
준비물
- 클로드(Claude) 계정. 무료 요금제로 이미지를 올릴 수 있고, 프로젝트는 무료 기준 5개까지예요(2026년 11월 기준, 요금 안내).
- 레퍼런스 캡처 2~5장. 도움말 기준 JPEG·PNG·GIF·WebP를 올릴 수 있고, 한 변 1000픽셀 이상이 잘 읽혀요.
- 캡처 방법: 윈도우는 「Win + Shift + S」, 맥은 「Shift + Command + 4」.
따라 하기
- 레퍼런스 사이트 첫 화면을 같은 창 크기로 캡처해 A, B, C처럼 이름을 붙여 저장해요.
- claude.ai에서 새 채팅을 열고 입력창 왼쪽 아래 「+」 → 「Add files or photos」로 캡처를 한 번에 올려요. 끌어다 놓아도 돼요.
- 아래 프롬프트 1을 붙여 넣고 보내요. 비교표가 나와요.
- 프롬프트 2로 표의 칸마다 근거 위치를 받고, 캡처와 맞춰 봐요. 틀린 칸은 "B의 버튼 칸 다시 봐 줘"라고 보내요.
- 같은 표를 자주 만든다면 왼쪽 메뉴 「Projects」 → 「+ New Project」로 프로젝트를 만들고, 「Set project instructions」에 프롬프트 1을 넣고 「Save instructions」를 눌러요. 그 프로젝트 안 채팅에서는 캡처만 올려도 같은 형식으로 나와요.
복사해서 쓰는 프롬프트
[프롬프트 1]
올린 이미지는 [페이지 종류] 레퍼런스 캡처야. 파일 이름 순서대로 A, B, C라고 불러 줘.
아래 항목으로 비교표를 만들어 줘.
- 항목: 첫 화면 구성 / 바탕·포인트 색 / 제목 글자 / 버튼(문구·모양) / 사게 만드는 말 / [더 볼 항목]
- 화면에 보이는 것만 적고, 보이지 않으면 '안 보임'
- 색은 이름으로만 적어. 글꼴 이름은 추측하지 말고 고딕·명조, 굵기만
- 표 아래에 우리 시안에 가져올 점 3개, 피할 점 2개
- [페이지 종류] 예: 커피 쇼핑몰 첫 화면, 세미나 신청 페이지
- [더 볼 항목] 예: 메뉴 개수, 첫 화면 이미지 비율