Mobbin MCP로 앱 디자인하기, 클로드 /design 레퍼런스 활용법

Mobbin MCP를 클로드에 연결하면, 클로드가 실제 출시된 앱 화면 60만여 개 안에서 레퍼런스를 찾아 디자인에 반영합니다. 이 글은 기획 문서(PRD)에서 출발해 클로드 코드의 /design으로 1차 화면을 만들고, Mobbin 레퍼런스로 사용성(V2)과 브랜딩(V3)을 차례로 고친 뒤, AI가 실제로 답하는 대화창 프로토타입까지 만드는 35단계 순서입니다.

Mobbin MCP와 /design으로 하는 일

예제로 쓰는 앱은 "AI 총무"입니다. 친구·가족 단톡방에 AI를 멤버로 초대해 약속과 결정을 정리하고 기억해 주는 iOS 채팅 앱입니다. 같은 PRD로 세 번 디자인해 비교합니다.

• V1: /design에 "PRD에서 정의한 화면들을 만들어서 보여 줘."만 줍니다. 스킬도 레퍼런스도 없이 만든 기본 결과는 무난한 편입니다.
• V2: Mobbin 레퍼런스를 쓰되 컬러와 브랜드는 건드리지 말고, V1과 나란히 배치하고, 근거 보고서를 쓰게 합니다.
• V3: 브랜딩·컬러·디자인 시스템 컴포넌트까지 Mobbin 레퍼런스로 바꾸고, 시안 3개 중 하나를 고릅니다.
• 프로토타입: 아티팩트 안에서 Claude가 직접 답하는 대화창을 API 키 없이 만듭니다.

핵심 요령은 하나입니다. 레퍼런스를 무작정 적용하게 하지 말고, 어떤 레퍼런스를 왜 썼는지 보고서를 꼭 요구합니다. 그래야 결과를 검토하고 고를 수 있습니다.

모델은 Claude Opus 5.5를 씁니다. Anthropic의 최상위 모델인 Claude Fable 5.1보다 값이 싸면서 성능이 좋다는 평가를 받는 모델입니다. API 가격으로 보면 100만 토큰당 Opus 5.5는 입력 4달러·출력 20달러, Fable 5.1은 입력 10달러·출력 50달러입니다(2026년 10월 Anthropic 공식 가격).

왜 Mobbin 레퍼런스인가

Mobbin은 실제 출시된 앱·웹 화면을 60만 개 넘게 모아 둔 레퍼런스 서비스입니다. 실제 서비스 화면이라 사용자 검증과 기술 구현 가능성이 이미 확인된 자료라는 장점이 있습니다. 드리블(Dribbble) 같은 곳은 실험적인 디자인이 많아 iOS·안드로이드 디자인 규칙을 따르지 않는 경우가 많습니다.

60만 개를 한꺼번에 넘기는 방식이 아닙니다. Mobbin MCP(클로드가 외부 서비스를 직접 쓰게 해 주는 연결 규격)를 연결해 두면, 클로드가 필요할 때 그 안에서 검색해 참고합니다. 클로드 코드나 코덱스 같은 도구가 사이트를 직접 뒤지지 않아도 리서치와 디자인을 한 흐름으로 이어 갈 수 있습니다.

디자인 능력은 한 덩어리가 아니다

AI의 디자인 능력에는 시각적 전달, 레퍼런스 리서치, 기획, QA(품질 점검)가 다 들어 있습니다. 새 모델이 나오면 "UI 슬롭(어디서 본 듯한 AI풍 화면)은 거의 해결됐다"는 평가와 "UX 라이팅(화면 문구)은 여전히 못한다"는 평가가 함께 나옵니다. 이 실습은 그중 리서치와 시각적 전달에 초점을 둡니다.

앱 제작 흐름을 브레인스토밍·리서치, 기획, 디자인, 프로토타입, 검증의 5단계로 나누면, 이 글은 앞의 두 단계가 끝났다고 보고 디자인과 프로토타입만 다룹니다. 프로토타입은 완성도보다 목적(가설 검증, 내부 의사결정)에 맞으면 충분합니다.

시작 전에

준비물

• 클로드 데스크톱 앱과 클로드 계정. /design은 Pro·Max·Team·Enterprise 요금제에서 쓸 수 있는 연구 미리보기(research preview) 기능이고, 클로드 코드 v2.1.234 이상이 필요합니다.
• Opus 5.5 모델을 고를 수 있는 상태. 무료 계정의 모델 목록에는 없습니다.
• 만들 앱의 기획 문서(PRD). 작업 폴더에 PRD.md 같은 파일로 넣어 두면 클로드 코드가 바로 읽습니다.
• Mobbin 계정. Mobbin MCP는 유료 요금제에서 쓸 수 있습니다.
• 힉스필드(Higgsfield) 계정. 아바타·일러스트 이미지가 필요할 때 씁니다. 힉스필드 MCP 연결에도 유료 구독이 필요합니다.
• 요금은 자주 바뀌니 각 서비스의 공식 요금 안내를 확인합니다.

순서 한 가지

V2부터는 클로드가 Mobbin을 직접 찾아봐야 하므로, 실제로 따라 할 때는 3장(Mobbin MCP 연결)과 4장(힉스필드 연결)을 2장 요청보다 먼저 해 둡니다. 아래는 작업 흐름을 이해하기 쉽게 V1 → V2 요청 → 연결 순으로 적었습니다.

따라 하기 35단계

1. 클로드 코드에서 /design으로 1차(V1) 만들기

1단계. 클로드 데스크톱 앱을 켭니다

확인: 앱 화면이 열립니다.

2단계. 왼쪽의 클로드 코드(Code) 탭을 누릅니다

확인: 클로드 코드 화면으로 바뀝니다.

3단계. 새 대화(세션)를 시작합니다

확인: 작업 폴더를 고를 수 있는 새 대화 화면이 보입니다.

4단계. 작업 폴더를 고릅니다

PRD 파일이 들어 있는 폴더를 고릅니다.

확인: 선택한 폴더가 대화에 연결되고, 이후 산출물과 파일이 그 폴더에 쌓입니다. 디자인 캔버스와 문서는 아티팩트로도 저장됩니다.

5단계. 입력창에 /design을 입력합니다

/design은 디자인 결과를 아트보드(시안 한 장씩을 담는 틀) 캔버스에 펼쳐 보여 주는 스킬입니다. 캔버스에서 텍스트와 컬러를 프롬프트 없이 바로 바꿀 수 있습니다.

확인: 입력창에 /design이 들어간 상태입니다.

6단계. /design 뒤에 아래 프롬프트를 이어서 입력합니다

/design PRD에서 정의한 화면들을 만들어서 보여 줘.

확인: 입력창에 문장이 들어가 있습니다.

7단계. 모델에서 Opus 5.5를 고릅니다

입력창 근처의 모델 이름을 눌러 고릅니다. 보내기 전에만 고르면 됩니다.

확인: 선택된 모델이 Opus 5.5로 표시됩니다.

8단계. 엔터를 눌러 보냅니다

확인: 클로드가 캔버스 링크를 보여 주고, 링크를 열면 PRD에 정의된 화면들의 1차 버전(V1)이 펼쳐집니다.

2. 2차(V2): Mobbin 레퍼런스로 개선 요청하기

9단계. 아래 요청을 입력합니다

아티팩트 캔버스에 새 페이지를 만들어서, 지금 디자인을 개선한 버전을 만들어 줘.
모빈(Mobbin) 레퍼런스를 활용해 줘.
컬러나 브랜드는 건드리지 마.
V1과 V2를 나란히 볼 수 있게 배치해 줘.
보고서도 써 줘: 어떤 근거와 레퍼런스로 결정했는지, 실제 레퍼런스 이미지를 첨부하고, 참고한 부분에 번호를 달아 줘.

확인: 입력창에 요청이 들어가 있습니다.

참고: 컬러·브랜드를 묶어 두는 건 사용성 자체가 어떻게 나아지는지 보려는 것입니다. V1의 아쉬운 점도 일부러 지적하지 않습니다. 클로드가 문제를 스스로 찾는지 보기 위해서입니다.

10단계. 엔터를 눌러 보냅니다

확인: 캔버스의 새 페이지에 V2가 만들어지고, V1도 그대로 남아 있습니다.

3. Mobbin MCP 연결하기

Mobbin은 클로드 커넥터 목록에 공식 커넥터로 올라와 있습니다. 가장 쉬운 길은 목록에서 고르는 방법(11~14단계)이고, 목록에 보이지 않으면 주소를 직접 넣는 방법(15~20단계)을 씁니다.

11단계. 클로드 앱에서 커넥터 화면을 엽니다

메뉴에서 맞춤 설정(Customize) > 커넥터(Connectors)로 들어갑니다. 웹에서는 claude.ai/directory/connectors/mobbin으로 바로 가도 됩니다.

확인: 커넥터 목록이 보입니다.

12단계. "추가" > "커넥터 둘러보기(Browse connectors)"를 누릅니다

확인: 연결할 수 있는 커넥터 목록이 나옵니다.

13단계. 목록에서 Mobbin을 고르고 "연결(Connect)"을 누릅니다

확인: Mobbin 로그인 창이 열립니다.

14단계. Mobbin 계정으로 로그인해 접근을 허용합니다

확인: 커넥터 목록에 Mobbin이 연결됨으로 표시됩니다. 데스크톱 앱에서는 이 연결이 클로드 코드에서도 쓰입니다.

주의: Team·Enterprise 요금제는 관리자가 먼저 조직 설정 > 커넥터에서 Mobbin을 추가해 둬야 구성원이 연결할 수 있습니다.

15단계. (목록에 없을 때) Mobbin 사이트의 MCP 안내 페이지를 엽니다

mobbin.com/mcp에서 연결할 도구(Claude)를 고르면 연결 방법이 나옵니다.

확인: Claude용 연결 안내와 MCP 주소가 보입니다.

16단계. 안내에 나온 MCP 주소를 복사합니다

공식 주소는 아래와 같습니다. 안내 화면의 주소와 같은지 한 번 확인합니다.

https://api.mobbin.com/mcp

확인: 주소가 클립보드에 복사됩니다.

17단계. 클로드 설정 > 커넥터에서 "추가" > "사용자 지정 커넥터 추가"를 누릅니다

확인: 이름과 주소를 넣는 칸이 나옵니다.

18단계. 주소 칸에 복사한 MCP 주소를 붙여 넣습니다

확인: 주소 칸에 주소가 들어가 있습니다.

19단계. 이름 칸에 알아보기 쉬운 이름을 적고 "추가"를 누릅니다

예: "모빈", "모빈 MCP".

확인: 인증 화면이 나옵니다.

20단계. Mobbin 계정으로 로그인해 인증을 마칩니다

Mobbin MCP는 별도 API 키 없이 로그인(OAuth) 방식으로 연결됩니다.

확인: 커넥터 목록에 Mobbin이 추가됩니다.

4. 힉스필드 연결하기 (이미지가 필요할 때)

클로드에는 이미지 생성 모델이 없습니다. "AI 총무" 앱에는 대화 상대 아바타 같은 이미지가 필요해서 이미지 생성 서비스인 힉스필드를 커넥터로 붙입니다.

21단계. 클로드 설정 > 커넥터에서 "사용자 지정 커넥터 추가"를 누릅니다

이름은 "Higgsfield", 주소는 아래 공식 주소를 넣습니다.

https://mcp.higgsfield.ai/mcp

확인: 이름과 주소 칸이 채워집니다.

22단계. "추가(연결)"를 누릅니다

확인: 힉스필드 로그인·인증 화면이 나옵니다. higgsfield.ai에 이미 로그인돼 있으면 자동으로 넘어가기도 합니다.

23단계. 인증을 마칩니다

확인: 커넥터 목록에 힉스필드가 보이고, 클로드에서 힉스필드로 이미지를 만들 수 있게 됩니다.

5. V2 결과와 보고서 확인하기

24단계. 캔버스에서 V1과 V2를 나란히 놓고 봅니다

확인: 새 페이지의 V2가 V1보다 개선돼 있습니다. 예제에서는 V2에 아바타와 일러스트가 더해졌습니다.

25단계. 아티팩트의 보고서 문서를 엽니다

확인: 결정 근거, 실제 레퍼런스 이미지, 참고한 부분의 번호가 들어 있습니다.

참고: 보고서는 아티팩트 문서(Docs) 형식으로 만들어질 수 있습니다. HTML 페이지가 아니라 노션처럼 바로 고칠 수 있는 문서입니다.

6. 3차(V3): 브랜딩·컬러·컴포넌트 업데이트

V2의 그린 톤은 강약이 없어 힘이 없어 보였습니다. 그래서 브랜딩까지 바꿉니다.

26단계. 아래 프롬프트를 입력합니다

브랜딩 컬러 디자인 시스템 컴포넌트도 모빈(Mobbin) 레퍼런스를 활용해서 이 앱에 어울리는 걸로 업데이트 해 줘. 그리고 보고서를 써 줘.

확인: 입력창에 문장이 들어가 있습니다.

27단계. 엔터를 눌러 보냅니다

확인: 브랜딩 시안이 올라오고, 보고서에 각 시안이 어떤 레퍼런스를 왜 썼는지 표시됩니다.

28단계. 시안들을 비교합니다

확인: 시안마다 콘셉트와 참고 레퍼런스를 알 수 있습니다.

예제의 비교는 이랬습니다.

• 따뜻한 컬러 시안: 폰트까지 조금 올드해 보였습니다.
• 스티커·카툰 콘셉트 시안: 클로드도 "가족이 쓰기엔 가볍다, 부분 차용을 권한다"고 평가했습니다.
• 고른 시안: 세 개 중 가운데 놓인 청보라 메인 컬러. 대비와 강약이 뚜렷했습니다.

29단계. 고른 시안으로 진행하자고 보냅니다

예: "가운데 청보라 시안으로 진행해 줘."

확인: 최종 V3 화면이 만들어집니다.

30단계. V1, V2, V3를 나란히 비교합니다

확인: V2는 사용성 개선(아바타·일러스트 추가), V3는 브랜딩·컬러·컴포넌트까지 바뀌어 있습니다.

7. 화면 점검하기

31단계. 각 화면의 메인 CTA(가장 중요한 버튼) 색이 같은지 확인합니다

확인: 메인 CTA 색이 모든 화면에서 같고, CTA가 아닌 곳에는 그 색이 쓰이지 않습니다.

주의: 예제 최종본에서도 메인 CTA는 빨간색인데 다른 화면에 보라색 CTA가 섞여 있었습니다. 사용자는 어느 버튼이 중요한지 헷갈릴 수 있습니다.

대안: 실전 프로젝트라면 "CTA 색을 다른 요소에 쓰지 말 것" 같은 규칙을 디자인 문서(DESIGN.md)나 CSS 컴포넌트에 만들어 둡니다.

8. 대화창 프로토타입 만들기

대화가 많아지면 화면이 오히려 복잡해 보일 수 있어서, 실제로 어떻게 작동하는지 프로토타입으로 확인합니다.

32단계. 아래 프롬프트를 입력합니다

실제 모든 걸 가능하게는 안 하더라도 친구들 AI랑 대화할 때 클로드 API가 되도록 해서 내가 실제로 앱을 사용하는 것처럼 구현해 줄 수 있어 이런게 가능할까

확인: 입력창에 문장이 들어가 있습니다.

33단계. 엔터를 눌러 보냅니다

확인: 아티팩트 안에서 Claude가 직접 답하는 프로토타입이 만들어집니다. API 키는 필요 없습니다.

참고: 클로드 아티팩트는 안에서 Claude를 불러 쓰는 작은 AI 앱이 될 수 있고, 그때 쓰는 사용량은 그 아티팩트를 쓰는 사람의 요금제 한도에서 빠집니다. 설정 > 기능의 "AI 기반 아티팩트 만들기" 항목이 꺼져 있으면 켭니다. 서비스 안에 AI가 등장하는 시나리오를 미리 돌려 볼 때 쓸모가 큽니다.

34단계. 프로토타입 대화창에 메시지를 보냅니다

예: "안녕", "우리 어디까지 이야기했지?"

확인: AI가 대화에 답합니다.

35단계. 일정을 정하는 대화에서 나온 항목을 저장합니다

일정을 정해야 하는 대화를 하면 결정 항목이 나오고, 이를 저장할 수 있습니다.

확인: 저장됐다는 표시가 나오고, 확정된 항목 페이지에서 볼 수 있습니다.

주의: 프로토타입이라 약간의 버그가 있을 수 있습니다. 가설 검증과 내부 논의용으로 씁니다.

다 했는지 점검

• V1(PRD만), V2(Mobbin 레퍼런스·컬러 유지), V3(브랜딩·컬러·컴포넌트 변경)가 캔버스에 각각 있습니다.
• 클로드 커넥터에 Mobbin이, 필요하면 힉스필드도 연결돼 있습니다.
• V2·V3 보고서에 레퍼런스 이미지, 번호, 사용 이유가 들어 있습니다.
• 메인 CTA 색이 화면 전체에서 일관됩니다.
• 프로토타입 대화창에서 AI가 답하고 일정 저장이 됩니다.

화면별로 본 개선 포인트

글자 크기

실무에서 써 본 체감으로는 GPT 계열이 중요한 정보도 11~12 크기로 써서 가독성이 떨어지는 반면, Opus는 주요 정보를 13보다 작게 잘 쓰지 않았습니다. 같은 조건으로 비교한 실험은 아니어서 참고만 합니다.

동의 화면

V1은 텍스트 나열이라 정보 위계가 약했습니다. 개선판은 일러스트로 화면 목적을 알려 주고, 핵심 문구를 짧고 굵게 썼습니다. 제목도 "제주 가는 여섯"에서 "제주 가는 여섯 방에 참여할까요?"로 바뀌어 사용자가 할 행동을 바로 보여 줍니다.

리스트·대화창·요약·결정 화면

• 리스트: V2에 슬랙의 캐치업 기능에서 착안한 "요약 보기"가 생겼습니다. 새 메시지 칩 색을 흔한 빨간색에서 바꾼 점도 좋았습니다.
• 대화창: 날짜 같은 중요 정보에 색·굵기·아바타를 써서 전달이 쉬워졌습니다. 다만 대화가 많아지면 오히려 복잡해 보이기도 합니다.
• 놓친 대화 요약: 정해진 것과 안 정해진 것을 체크 표시와 점선으로 나누고, 바로 행동할 수 있는 칩·버튼을 넣었습니다.
• 결정된 것들: V1은 노션 템플릿 같은 텍스트 나열이었는데, 배경·아바타·도형으로 시각적 위계가 생겼습니다.

레퍼런스 디자인에서 얻는 것과 한계

• 기본 디자인(V1)도 생각보다 괜찮았습니다. 다만 기대치가 낮아서 그렇게 보였을 수도 있습니다.
• 개선 여지는 많았습니다. 레퍼런스를 써도 완벽하지 않고, 적절한 레퍼런스를 못 찾을 때도 있었습니다.
• 레퍼런스의 가장 큰 장점은 관점을 바꿔 "생각해 볼 거리"를 준다는 것입니다.

한 사람이 한 번 해 본 결과라서, 여러 번 반복하거나 다른 모델과 같은 조건으로 비교하면 달라질 수 있습니다.

자주 막히는 곳

클로드에게 아바타·일러스트 이미지를 만들게 할 수 없다

클로드에는 이미지 생성 모델이 없습니다. 4장처럼 힉스필드를 커넥터로 연결합니다.

레퍼런스를 참고하라고만 했더니 무엇을 왜 바꿨는지 모르겠다

근거를 요구하지 않아서입니다. 보고서를 요청하고, 레퍼런스 이미지 첨부와 번호 달기까지 시킵니다.

무엇이 나아졌는지 한눈에 안 보인다

버전이 따로 떨어져 있으면 그렇습니다. 새 버전은 캔버스의 새 페이지에 만들게 하고, V1과 V2를 나란히 배치해 달라고 요청합니다. 이렇게 하면 V1도 그대로 남습니다.

메인 버튼 색이 화면마다 다르다

색 규칙이 없어서입니다. CTA 색 규칙을 디자인 문서나 CSS 컴포넌트에 만들어 둡니다.

커넥터를 빼고 싶다

클로드의 커넥터 화면에서 해당 커넥터를 열어 연결을 끊거나 제거합니다.