"좋게 해 줘" 말고 레퍼런스와 근거로 — AI 앱 디자인 V1→V2→V3, Mobbin 화면 참고·근거 보고서·CTA 규칙 고정 프롬프트 4개

AI에게 앱 화면을 부탁하면 첫 결과는 대체로 무난합니다. 버튼도 있고 목록도 있고 색도 그럭저럭 맞습니다. 그런데 "더 좋게 해 줘"라고 다시 부탁하면 이상한 일이 생깁니다. 무엇이 왜 바뀌었는지 알 수 없고, 어떤 화면은 좋아졌는데 어떤 화면은 오히려 낯설어집니다. 빈 캔버스에서 감으로 고치기 때문입니다.

이번에는 AI(클로드)에게 실제로 출시된 앱 화면을 레퍼런스로 주고, 앱 디자인을 V1 → V2 → V3로 단계적으로 개선시키는 방법을 알려드리겠습니다. 핵심은 세 가지입니다. ① 레퍼런스를 줄 때 근거 보고서를 함께 요구하기 ② 이전 버전과 나란히 놓고 비교하기 ③ 좋아진 것을 규칙으로 고정하기. 예제는 교사·학부모가 쓰는 가상의 '우리반 알림장' 앱이고, 레퍼런스 도구로는 실제 앱 화면을 모아 둔 Mobbin을 씁니다.

🔎 먼저 용어부터 쉽게
PRD — 제품 요구사항 문서. 이 앱이 어떤 문제를 풀고, 어떤 기능과 화면이 있는지 적은 기획서입니다.
레퍼런스 — 참고 사례. 여기서는 이미 출시된 다른 앱의 실제 화면을 말합니다. 베끼는 대상이 아니라 배치·흐름의 패턴을 보는 자료입니다.
MCP / 커넥터 — AI가 외부 서비스에 접속해 자료를 찾아 쓰게 해 주는 연결 방식입니다. 클로드에서는 '커넥터'라는 이름으로 추가합니다.
CTA — Call To Action. '회신하기', '제출하기'처럼 사용자가 눌러 주기를 바라는 핵심 버튼입니다.
프로토타입 — 실제 개발 전에 화면 흐름을 눌러 보거나 확인할 수 있게 만든 시제품입니다. 완성도보다 무엇을 확인할지가 중요합니다.

실습 정보

만들 것	가상 '우리반 알림장' 앱 화면 3~4장(홈·공지 상세·일정·회신)의 V1 → V2 → V3
준비물	클로드(웹·데스크톱), 앱 PRD 한 장, 레퍼런스 자료(Mobbin 커넥터 또는 직접 모은 화면 캡처)
레퍼런스 도구	Mobbin — 실제 출시된 앱·웹 화면을 모아 둔 디자인 레퍼런스 서비스. MCP 연결은 유료 플랜에서 제공(2026-10-11 공식 페이지 확인)
결과물 성격	이 글의 화면 그림·보고서·표는 방법을 설명하기 위한 작성 예시입니다. 실제 실행 결과가 아닙니다

📱Mobbin (앱·웹 화면 레퍼런스 라이브러리)실제 출시된 모바일·웹 앱 화면을 검색해 볼 수 있는 디자인 레퍼런스 서비스입니다. 공식 페이지에는 60만 개가 넘는 화면이 있다고 적혀 있습니다(2026-10-11 확인).https://mobbin.com/바로가기 ↗

1. 한눈에 보기 — 버전마다 하나씩만 바꾼다

앱 화면을 개선할 때 가장 흔한 실수는 한 번에 다 바꾸는 것입니다. 색도 바꾸고 배치도 바꾸고 버튼 문구도 바꾸면, 결과가 좋아져도 무엇 덕분인지 모릅니다. 그래서 버전마다 바꾸는 축을 하나로 정합니다. V1은 기획서대로, V2는 사용성만, V3는 브랜딩만 바꿉니다.

바꾸는 축을 하나로 묶어 두면, 좋아진 이유와 나빠진 이유를 버전 단위로 가려낼 수 있습니다.

앱을 만드는 전체 흐름으로 보면 이 글은 디자인 단계에 해당합니다. 그 앞에는 비슷한 서비스를 조사하는 단계와 PRD를 쓰는 단계가 있고, 뒤에는 프로토타입과 실제 구현이 있습니다. 앞 단계가 비어 있으면 디자인 단계에서 AI가 기능까지 지어내기 시작하므로, PRD는 짧게라도 먼저 써 둡니다.

2. 레퍼런스 준비 — Mobbin을 클로드에 연결하기

Mobbin은 실제로 출시된 앱과 웹사이트의 화면을 모아 둔 디자인 레퍼런스 서비스입니다. "온보딩 화면", "일정 목록", "알림 설정"처럼 화면 종류로 검색해 다른 앱이 같은 문제를 어떻게 풀었는지 볼 수 있습니다. Mobbin은 MCP 서버도 제공하므로, 클로드에 연결하면 클로드가 대화 중에 직접 레퍼런스를 찾아볼 수 있습니다.

🔌Mobbin MCP 소개 페이지AI 도구가 Mobbin의 화면을 검색·참고하게 해 주는 MCP 서버 안내입니다. 'Pro·Team 플랜에서 제공', '현재 베타로 사용량 무제한, 앞으로 한도 적용 예정'이라고 적혀 있습니다(2026-10-11 확인).https://mobbin.com/mcp바로가기 ↗

2026년 10월 11일에 Mobbin 공식 문서에서 확인한 클로드 웹·데스크톱 연결 순서는 다음과 같습니다.

클로드에서 Customize → Connectors → Add → Browse connectors로 들어가 Mobbin을 고릅니다.
Connect를 누릅니다.
Mobbin 계정으로 로그인해 접근을 허용합니다.

클로드 팀·엔터프라이즈 플랜에서는 관리자가 먼저 조직에 Mobbin 커넥터를 추가해야 일반 구성원이 연결할 수 있다고 안내되어 있습니다. 메뉴 이름은 화면 개편에 따라 바뀔 수 있으니 아래 두 공식 안내를 함께 보세요.

📘Mobbin 문서 — Claude Desktop and Web 연결 방법클로드 웹·데스크톱에 Mobbin 커넥터를 연결하는 단계와 팀·엔터프라이즈 플랜의 관리자 절차를 안내하는 공식 문서입니다.https://docs.mobbin.com/mcp/clients/claude-desktop-web바로가기 ↗ 🧩Claude 고객센터 — 커넥터 디렉터리 사용하기클로드에서 커넥터를 찾아 연결하는 방법과 '신뢰하고 필요한 도구만 연결하라'는 주의 사항을 담은 공식 도움말입니다.https://support.claude.com/en/articles/11724452-use-the-connectors-directory-to-extend-claude-s-capabilities바로가기 ↗

Mobbin 유료 플랜을 쓰지 않는다면, 평소 쓰는 앱 중 비슷한 기능을 가진 화면을 몇 장 캡처해 번호를 붙여 직접 첨부해도 같은 방법을 따라 할 수 있습니다. 중요한 것은 도구가 아니라 레퍼런스에 번호를 붙여 근거를 추적할 수 있게 하는 것입니다.

3. V1 — 레퍼런스 없이 기획서대로 먼저 만들기

처음부터 레퍼런스를 주지 않는 이유가 있습니다. 기준점이 있어야 V2가 얼마나 나아졌는지 비교할 수 있기 때문입니다. V1에서는 PRD만 주고 "정의한 화면을 그대로 만들어 달라"고만 요청합니다. 이때 PRD에는 누가 쓰는지, 풀려는 문제, 화면 목록, 화면마다 들어갈 정보가 있으면 충분합니다.

첫 제작 — PRD만으로 V1 화면 만들기 (AI오토마타 응용 프롬프트)

프롬프트

[역할] 너는 모바일 앱 화면을 설계하는 UI 디자이너야.
[목표] 아래 PRD에 정의된 화면을 그대로 V1으로 만들어 줘. 지금은 레퍼런스나 꾸밈 없이 기획 내용이 빠짐없이 들어갔는지가 기준이야.

[PRD]
- 앱 이름: 우리반 알림장(가상)
- 사용자: 담임 교사, 학부모
- 풀려는 문제: 공지가 길고 많아 학부모가 꼭 해야 할 일(회신·준비물·마감)을 놓친다
- 화면 목록: ① 홈(오늘의 공지·일정) ② 공지 상세 ③ 이번 달 일정 ④ 회신하기
- 화면마다 들어갈 정보: (화면별로 적기)

출력 형태
1. 화면 4장을 하나의 HTML 파일로, 모바일 폭(390px) 기준으로 나란히 배치
2. 화면마다 위쪽에 화면 이름 표시
3. 맨 아래에 'PRD 항목 → 들어간 화면' 대응표

제약
- PRD에 없는 기능(채팅, 결제 등)은 넣지 않는다. 필요해 보이면 '제안' 목록에만 적는다.
- 학생 이름·연락처는 '학생A'처럼 예시 값만 쓴다.
- 색은 기본 회색·파랑 계열로만. 브랜딩은 아직 하지 않는다.

완료 조건
PRD의 모든 화면과 정보가 대응표에 빠짐없이 연결되어 있다.

확인할 결과 — 대응표에서 빠진 PRD 항목이 없는지, PRD에 없는 기능이 슬쩍 들어오지 않았는지 봅니다. V1은 무난하면 성공입니다. 이 단계에서 디자인을 손보지 않는 것이 요령입니다.

4. V2 — 레퍼런스로 사용성만 고치고, 근거를 보고받기

V2에서 할 일은 색과 브랜드는 그대로 두고 쓰기 편한 정도만 개선하는 것입니다. 이때 V1의 문제를 내가 먼저 짚어 주지 않고 "레퍼런스를 찾아보고 스스로 문제를 찾아 개선하라"고 맡겨 봅니다. AI가 무엇을 문제로 보는지 알 수 있고, 내가 놓친 문제가 드러나기도 합니다.

다만 "알아서 참고해서 좋게 해 줘"로 끝내면 안 됩니다. 반드시 근거 보고서를 요구합니다. 어느 화면의 무엇을 바꿨는지, 어떤 레퍼런스를 참고했는지, 왜 그렇게 판단했는지를 레퍼런스 번호와 함께 적게 하는 것입니다. 번호가 있으면 그 레퍼런스를 다시 열어 정말 그런 패턴인지 확인할 수 있습니다.

레퍼런스 번호(#R1…)가 바꾼 곳과 이유를 이어 줍니다. 표의 앱 종류와 이유는 설명을 위한 예시입니다.

레퍼런스 개선 — 레퍼런스로 V2 만들고 근거 보고서 받기 (AI오토마타 응용 프롬프트)

프롬프트

[역할] 너는 레퍼런스 조사를 근거로 화면을 개선하는 UX 디자이너야.
[목표] 첨부한 V1 화면을 레퍼런스를 참고해 V2로 개선해 줘. 이번에는 '쓰기 편한 정도'만 고친다.

[현재 화면] (V1 HTML 또는 화면 캡처 첨부)
[사용자와 상황] 학부모가 출퇴근길에 한 손으로 휴대폰을 보며 해야 할 일을 확인한다
[레퍼런스] Mobbin 커넥터로 직접 찾아 쓰거나, 내가 첨부한 캡처(#R1~#R8)를 쓴다

진행 순서
1. V1의 사용성 문제를 스스로 찾아 목록으로 적는다(내가 미리 알려 주지 않음)
2. 문제마다 비슷한 상황을 푼 레퍼런스를 찾고 #R 번호를 붙인다
3. 개선한 V2 화면을 만든다

출력 형태
① 근거 보고서 표: 번호 | 바꾼 화면·위치 | 참고한 레퍼런스(#R 번호와 앱 종류) | 판단 이유
② V1과 V2를 화면별로 좌우에 나란히 놓은 HTML 한 파일(바뀐 곳에 보고서 번호 표시)
③ 레퍼런스에서 가져오지 않기로 한 것과 그 이유

제약
- 색·글꼴·로고 등 브랜드 요소는 V1 그대로 둔다.
- 레퍼런스 앱의 문구·아이콘·그림·색을 그대로 옮기지 않는다. 배치와 흐름의 패턴만 가져온다.
- 레퍼런스 근거 없이 바꾼 곳은 보고서에 '근거 없음(제안)'이라고 따로 표시한다.
- 찾지 못한 레퍼런스를 있는 것처럼 쓰지 않는다.

완료 조건
V2에서 바뀐 모든 곳이 보고서의 번호 하나와 연결되어 있다.

확인할 결과 — 보고서 번호를 하나씩 따라가 레퍼런스를 직접 열어 봅니다. 레퍼런스와 이유가 맞지 않거나, 화면에는 바뀐 곳이 있는데 보고서에 없으면 그 부분만 다시 요청합니다. 이때 V1과 V2가 같은 화면끼리 나란히 놓여 있어야 비교가 빠릅니다.

주황 번호는 근거 보고서의 번호와 같습니다. 색은 그대로 두고 정보의 순서와 크기만 바꿨습니다.

5. V3 — 브랜딩 시안 3개를 비교하고 하나만 고르기

사용성이 정리됐으면 이제 색과 분위기를 정합니다. 여기서도 "예쁘게 해 줘" 대신 방향이 다른 시안 3개를 같은 화면에 적용해 나란히 비교하게 합니다. 예를 들어 이런 식입니다.

시안 A · 따뜻한 학교 톤 — 크림색 바탕, 주황 포인트. 친근하지만 자칫 오래된 느낌이 날 수 있음
시안 B · 스티커·일러스트 톤 — 귀엽고 눈에 띄지만 공지라는 내용에 비해 가벼워 보일 수 있음
시안 C · 남보라 단색 포인트 — 흰 바탕에 핵심만 진한 색. 대비가 분명해 해야 할 일이 잘 보임

AI에게 장단점을 함께 적게 하면, 고르지 않은 시안에서 일부만 빌려 오자는 제안이 나오기도 합니다. 예를 들어 C를 고르고 B의 작은 일러스트를 빈 화면 안내에만 쓰는 식입니다. 고른 뒤에는 모든 화면에 색·글자·버튼 모양을 한 번에 적용합니다.

브랜딩 정리 — 브랜딩 시안 비교 후 V3 전면 적용 (AI오토마타 응용 프롬프트)

프롬프트

[역할] 너는 앱의 브랜드와 디자인 시스템을 정리하는 디자이너야.
[목표] V2 화면의 배치는 그대로 두고, 브랜딩 시안 3개를 비교한 뒤 내가 고른 하나를 모든 화면에 적용해 V3를 만들어 줘.

[현재 화면] (V2 HTML 첨부)
[앱 성격] 교사와 학부모가 쓰는 학교 공지·일정 앱. 믿음직하고 읽기 쉬워야 한다
[시안 방향] A 따뜻한 학교 톤 / B 스티커·일러스트 톤 / C 진한 단색 포인트

1단계 — 시안 비교
- 홈 화면 하나에 A·B·C를 각각 적용해 나란히 보여 준다
- 시안마다 장점 2개, 걱정되는 점 2개, 이 앱에 맞는 정도(상·중·하)를 적는다
- 고르지 않은 시안에서 빌려 올 만한 요소가 있으면 제안한다
- 여기서 멈추고 내 선택을 기다린다

2단계 — 내가 고른 시안으로 전면 적용
- 모든 화면의 색·글자 크기·버튼·카드 모양을 통일한다
- 적용한 값을 DESIGN.md 형식의 규칙 목록으로 함께 정리한다

제약
- 배치와 정보 순서는 V2에서 바꾸지 않는다.
- 핵심 버튼(CTA) 색은 한 가지로 정하고, CTA가 아닌 곳에는 그 색을 쓰지 않는다.
- 본문 글자와 바탕의 대비는 4.5:1 이상을 목표로 하고, 계산 근거를 적는다.

완료 조건
모든 화면이 규칙 목록의 값만 쓰고 있으며, 규칙에 없는 색이 화면에 없다.

확인할 결과 — 1단계에서 AI가 멈추고 선택을 기다렸는지, 2단계 결과에 규칙 목록이 함께 왔는지 봅니다. 대비 수치는 AI의 계산을 그대로 믿지 말고 대비 계산 도구로 한 번 더 확인하세요.

6. 마지막 점검 — CTA 색은 규칙으로 못 박는다

V3까지 오면 화면 하나하나는 그럴듯합니다. 그런데 여러 화면을 이어서 보면 자주 걸리는 문제가 있습니다. 핵심 버튼 색이 화면마다 다른 것입니다. 홈에서는 남보라였던 '회신하기'가 공지 상세에서는 빨강, 일정 화면에서는 초록이 되는 식입니다. 반대로 단순한 태그나 장식에 CTA 색이 쓰여서, 누를 수 없는 곳이 눌러야 할 곳처럼 보이기도 합니다.

한 번 정한 CTA 규칙은 대화가 바뀌어도 남도록 규칙 파일(DESIGN.md)이나 공통 스타일(CSS)에 적어 둡니다.

이 문제는 "CTA 색을 맞춰 줘"라고 한 번 말해서는 다음 화면에서 또 생깁니다. 그래서 규칙을 파일로 고정합니다. 디자인 규칙 파일(DESIGN.md)에 적어 두고 새 화면을 만들 때마다 함께 주거나, 버튼을 공통 스타일(CSS의 버튼 클래스 하나)로 만들어 모든 화면이 그것만 쓰게 하는 방법입니다. 규칙 파일 만드는 법은 관련 글에서 자세히 다뤘습니다.

결과 점검 — 화면 전체의 CTA·색 규칙 위반 찾기 (AI오토마타 응용 프롬프트)

프롬프트

[역할] 너는 앱 화면이 디자인 규칙을 지키는지 검수하는 QA 담당자야.
[목표] 첨부한 V3 화면 전체를 규칙 목록과 대조해 위반한 곳만 찾아 고쳐 줘.

[화면] (V3 HTML 첨부)
[규칙 목록] (DESIGN.md 붙여 넣기)

점검 항목
1. CTA: 화면마다 주요 CTA가 1개인가, 모든 CTA가 같은 색인가
2. 색 오용: CTA 색이 태그·아이콘·장식 등 누를 수 없는 곳에 쓰였는가
3. 규칙 밖 값: 규칙 목록에 없는 색·글자 크기·모서리 값이 있는가
4. 이어 보기: 화면 순서대로 넘겨 볼 때 같은 역할의 요소가 같은 모양인가

출력 형태
① 위반 표: 화면 | 위치 | 위반 항목 번호 | 지금 값 → 규칙 값
② 위반한 곳만 고친 HTML
③ 규칙 목록 자체가 모호해서 생긴 위반이면, 규칙 문장 수정안

제약
- 위반이 아닌 곳은 바꾸지 않는다.
- 배치나 문구를 새로 다듬지 않는다. 이번에는 규칙 위반만 다룬다.

완료 조건
위반 표의 모든 줄이 고친 HTML에 반영되어 있다.

7. 버전별로 무엇이 바뀌고 무엇을 확인하나

버전	바꾸는 것	AI에게 함께 요구할 것	내가 확인할 것
V1 기획서대로	없음(PRD를 화면으로 옮기기)	PRD 항목 → 화면 대응표	빠진 기능, PRD에 없는 기능이 끼어들었는지
V2 사용성 개선	정보 순서·크기·버튼 위치 (색은 그대로)	번호 붙인 근거 보고서, V1·V2 나란히 배치	번호로 레퍼런스를 다시 열어 이유가 맞는지, 보고서에 없는 변경이 있는지
V3 브랜딩 정리	색·글꼴·버튼·카드 모양 (배치는 그대로)	시안 3개 비교표, 선택 후 규칙 목록	CTA 색 하나로 통일, 대비 수치 재확인, 규칙 밖 색이 없는지

마지막으로 프로토타입을 어디까지 다듬을지는 무엇을 확인하려는지로 정합니다. "학부모가 할 일을 놓치지 않는가"를 확인하려면 V2 수준의 흑백 화면으로도 충분히 동료 교사나 학부모 몇 명에게 보여 줄 수 있습니다. 색과 분위기에 대한 반응을 보고 싶을 때 V3까지 가면 됩니다.

따라 하기 전에 꼭 확인하세요
- 레퍼런스는 베끼는 자료가 아닙니다. 다른 앱의 화면·문구·아이콘·일러스트·색 조합을 그대로 가져오면 저작권·상표 문제가 생길 수 있습니다. 배치와 흐름의 패턴만 참고하세요.
- Mobbin 화면 캡처를 내 앱 소개 자료나 블로그에 그대로 게시하지 마세요. 참고는 작업용으로만 합니다.
- Mobbin 사용은 계정과 요금제 확인이 필요합니다. MCP는 공식 페이지에 Pro·Team 플랜에서 제공되고 현재 베타로 사용량 무제한, 앞으로 한도가 적용될 예정이라고 적혀 있습니다(확인일 2026-10-11). 요금·조건은 바뀔 수 있으니 가입 전에 직접 확인하세요.
- 커넥터는 신뢰하는 서비스만 연결하고, 연결할 때 요구하는 권한을 읽어 보세요. 학교·기관 계정이라면 관리자 정책을 먼저 확인합니다.
- 이 글의 '우리반 알림장'은 설명을 위한 가상 앱이고, 화면 그림과 보고서는 작성 예시입니다. 학생 이름·연락처는 실제 값 대신 예시 값으로 만드세요.

🏫학급·학교 안내 앱 시안

가정통신문·준비물·회신을 한 화면에서. V2 근거 보고서를 동료 교사와 함께 보면 회의가 짧아집니다.

교사

🏛️기관 신청·예약 화면

신청 단계가 정해진 화면은 비슷한 서비스 레퍼런스가 많습니다. 신청 버튼 색 규칙부터 고정하세요.

기관

💼사내 도구 화면 개선

이미 쓰는 사내 화면을 V1으로 놓고 V2만 해 봐도 무엇이 불편했는지 근거가 생깁니다.

직장인

함께 보면 좋은 글

출처

· Mobbin 첫 화면 — https://mobbin.com/ (2026-10-11 확인: 서비스 성격, 공개 화면 수 표기)
· Mobbin MCP 소개 — https://mobbin.com/mcp (2026-10-11 확인: Pro·Team 플랜 제공, 베타 사용량 무제한·향후 한도 예정)
· Mobbin 문서 Claude Desktop and Web — https://docs.mobbin.com/mcp/clients/claude-desktop-web (2026-10-11 확인: 연결 순서, 팀·엔터프라이즈 관리자 절차)
· Claude 고객센터 커넥터 디렉터리 — support.claude.com (2026-10-11 확인: 커넥터 연결 방법, 신뢰하는 도구만 연결하라는 안내)

AI 오토마타