GUIDE · 앱 디자인 레퍼런스
클로드 앱 밤티를 줄이는 앱 화면 레퍼런스 사이트 5개
읽는 데 5분2026-09-25 공개
하루 6시간 만에AI 기초부터 나만의
서비스까지 완성
클로드에게 앱을 맡길 때마다 보라색 그라데이션과 이모지 카드가 나온다면, 실제 앱 화면을 한 장도 보여주지 않고 시켰기 때문일 가능성이 큽니다. 이 자료는 실제 앱 화면을 모아 둔 사이트 다섯 곳과, 고른 화면을 클로드에 넣는 프롬프트를 담았습니다.
Quick Start
클로드는 따로 기준을 주지 않으면 가장 흔한 모양으로 앱 화면을 채웁니다. 실제로 서비스 중인 앱 화면 한두 장을 함께 주면 버튼 위치·여백·글자 크기 위계·색 쓰는 법을 그 기준에 맞춥니다. 아래 다섯 곳은 로그인 없이 일부를 둘러볼 수 있고, 전체 열람이나 흐름·영상 기능은 유료 플랜인 경우가 많습니다.
- STEP 1에서 만들 화면에 맞는 사이트를 고릅니다.
- STEP 2에서 마음에 드는 앱 화면을 캡처합니다.
- STEP 3에서 캡처와 프롬프트를 클로드에 함께 넣습니다.
STEP 1 · 3분만들 화면에 맞는 사이트를 고른다
| 사이트 | 이럴 때 | 특징 |
|---|---|---|
| Mobbin | 특정 종류의 화면(로그인·결제·설정 등)을 많이 보고 싶을 때 | iOS·웹 앱 1,428개, 화면 621,500장 이상. Screens·UI Elements·Flows로 나눠 찾음. 무료 가입은 일부 앱만, 흐름·검색은 Pro |
| ScreensDesign | 온보딩·결제(페이월) 화면을 만들 때 | 매출 상위 iOS 앱 2,600개 이상의 전체 영상·페이월·온보딩·스토어 화면. 앱마다 월 매출 표기 |
| Page Flows | 화면이 이어지는 순서를 짜야 할 때 | iOS·Android·Web·이메일 흐름을 녹화 영상과 주석으로 보여줌. 3일 체험 후 유료 |
| Appshots | 같은 앱을 플랫폼별로 비교하고 싶을 때 | iOS·Android·Web 탭, 앱 617개·화면 116,231장(탐색 페이지 집계). 무료로 수백 개 앱, 흐름은 Pro |
| Spotted in Prod | 버튼·전환 같은 움직임을 참고할 때 | 잘 만든 iOS 앱과 인터랙션을 골라 짧은 클립으로 모음 |
STEP 2 · 3분마음에 드는 앱 화면을 캡처한다
앱 전체보다 만들려는 화면 한 종류를 캡처합니다. 홈 화면을 만들 거면 홈 화면만, 결제 화면을 만들 거면 결제 화면만 두세 장 모으면 클로드가 무엇을 참고할지 헷갈리지 않습니다. 흐름이 필요하면 Page Flows나 ScreensDesign에서 앞뒤 화면을 순서대로 캡처합니다.
STEP 3 · 5분캡처와 프롬프트를 함께 넣는다
첨부한 앱 화면들의 레이아웃, 여백, 글자 크기 위계, 버튼 모양, 색 쓰는 방식을 먼저 짧게 분석해줘. 그다음 그 기준으로 [우리 앱 한 줄 설명]의 홈 화면을 모바일 크기로 만들어줘. 문구와 이미지는 우리 앱에 맞게 새로 쓰고, 레퍼런스 앱의 로고·문구·사진은 그대로 가져오지 마.
성공하면 분석 요약이 먼저 나오고, 그 기준을 따른 화면이 이어서 나옵니다.
첨부한 화면들은 가입부터 결제까지 순서대로 캡처한 거야. 같은 순서와 화면 수로 우리 앱의 가입→결제 흐름을 만들어주고, 각 화면에서 사용자가 누르는 버튼 하나를 가장 눈에 띄게 해줘.
방금 화면에서 보라색 그라데이션, 이모지 아이콘, 똑같은 카드 네 개처럼 흔한 요소를 빼고, 레퍼런스처럼 여백을 넓히고 강조색을 하나만 써서 다시 만들어줘.
알아 둘 한계
- 레퍼런스는 구조와 분위기를 배우는 용도입니다. 다른 앱의 로고·문구·사진을 그대로 쓰면 저작권·상표 문제가 생길 수 있습니다.
- 앱·화면 수와 무료 범위, 유료 플랜 조건은 바뀔 수 있습니다. 이 글은 2026년 9월 25일 각 사이트 공식 페이지를 직접 열어 본 내용 기준입니다.
- ScreensDesign의 월 매출 표기는 사이트가 제공하는 추정치이며, 이 글에서 따로 검증하지 않았습니다.