studio.soluta
← AI 화면 디자인

실제 화면으로 레퍼런스 리서치

화면을 새로 그리기 전에, 실제로 출시된 화면에서 반복되는 패턴을 먼저 확인합니다.

학습 카드 1장

이 단원의 학습 카드

모든 학습 카드 내용을 아래에서 차례로 볼 수 있습니다.

01 실습 화면 레퍼런스 리서치 Mobbin MCP로 실제 화면 리서치하기 Mobbin MCP로 실제 앱 화면을 검색하고, 패턴별로 묶은 리서치 표를 만들 수 있습니다.
Preply 앱의 언어 학습 온보딩 화면. 주당 학습 시간과 집중 스킬을 고르는 실제 스크린샷
실제 스크린샷을 명시로 요청하면 mobbin_url이 달린 진짜 화면이 돌아옵니다.

기본 요청만으로는 실제 화면이 나오지 않습니다

Mobbin MCP는 iOS·웹 앱 60만 장 이상의 실제 화면을 검색어로 찾아 주는 도구입니다. mobbin.com/mcp 기준으로 Pro·Team 유료 요금제에서만 제공되고, MCP 연결 자체가 아직 베타입니다. Claude Code와 Codex를 포함해 여러 도구에 연결할 수 있습니다.

연결만 마치고 “화면 좀 보여 줘”처럼 막연히 물으면, AI는 검색 결과를 텍스트로 요약하거나 스스로 재구성한 와이어프레임을 내놓을 수 있습니다. 실제 스크린샷과 mobbin_url을 그대로 가져오라고 명시해야 진짜 화면이 돌아옵니다.

실제 검색으로 확인한 패턴 6가지

아래 표는 “언어 듣기 앱의 온보딩 화면”과 “주당 투입 시간을 묻는 온보딩 화면”으로 실제 검색해 받은 스크린샷을 패턴별로 묶은 결과입니다.

패턴등장한 앱(실제 검색 결과)화면이 다르게 표현한 방식
A. 목표·동기 선택Duolingo이모지 카드로 “그냥 재미로 / 커리어 목표로”처럼 다중 선택
B. 주당 투입 시간·빈도 선택Preply, Mimo, Blinkist, Finimize, Whatnot, Alan, Tonal언어 학습부터 독서 요약, 투자, 라이브 커머스, 피트니스까지 도메인이 전혀 달라도 같은 질문 구조를 씁니다
C. 집중 스킬·분야 다중 선택Preply, Udemy, Babbel체크박스 또는 라디오 버튼으로 관심 영역을 좁힙니다
D. 개인화 요약 화면Speak”당신에 대해 이렇게 파악했습니다”로 방금 입력한 값을 되돌려 보여줍니다
E. 콘텐츠 생성 진행률 표시Nibble목표·스킬 확정 뒤 “콘텐츠를 고르는 중 49%“처럼 진행률과 즉석 질문을 함께 보여줍니다
F. 사용 주체·역할 선택Duolingo ABC학습자 본인이 아니라 “내 아이 / 내 학생”처럼 보호자·교사 역할을 먼저 확인합니다

공통 요소는 여섯 패턴 모두에서 나타났습니다. 화면 상단에는 진행률 바를, 하단에는 Continue·Next·Save 같은 단일 진행 버튼 하나만 둡니다.

레퍼런스는 선택지의 모음입니다

Mobbin이 모은 화면은 해외 서비스 비중이 높고 국내 서비스 사례는 상대적으로 적습니다. 캡처 시점의 화면이라 지금 열어 보면 최신 버전과 다를 수도 있습니다. 인지도 있는 대기업의 패턴을 그대로 무명 앱에 옮겨서도 안 됩니다. 레퍼런스는 절대적인 정답이 아니라, 현실성이 반영된 선택지의 모음으로 씁니다.

  1. [Notion 연결 — MCP](/learn/fragment/cl.mcp)와 같은 방식으로 연결한 Mobbin MCP가 지금 세션에 붙어 있는지 확인합니다.

    명령어로 직접 하기

    터미널에서 실행합니다. mobbin 항목이 Connected로 보이면 다음 단계로 넘어갑니다.

    claude mcp list

    확인mobbin이 Connected 상태로 표시됩니다.

  2. 화면을 요청할 때는 반드시 실제 스크린샷을 가져오라고 명시합니다. 명시하지 않으면 AI가 화면을 임의로 재구성해 설명하거나 그릴 수 있습니다.

    Mobbin에서 영어 듣기·말하기 앱의 온보딩 화면을 검색해 줘. 와이어프레임이나 요약 설명이 아니라 Mobbin이 실제로 캡처한 스크린샷을 그대로 가져와 줘. 화면마다 mobbin_url도 같이 적어 줘.

    확인실제 앱 이름과 mobbin_url이 붙은 스크린샷 여러 장이 화면에 그대로 표시됩니다.

    이 단계의 실제 화면
    Preply 앱의 언어 학습 온보딩 화면. 주당 학습 시간과 집중 스킬을 고르는 실제 스크린샷
    화면에서 확인할 것 실제 스크린샷을 명시로 요청한 결과입니다. 앱 이름과 화면 안의 문구까지 그대로 보입니다. Mobbin MCP (BETA) · 2026-08-21
  3. 화면이 여러 장 나오면 각 화면에 번호를 매기고, 뒤이어 붙이는 분석 문장마다 그 번호를 함께 적으라고 요청합니다.

    지금 가져온 화면마다 1번부터 번호를 매기고, 이어지는 분석 문장 하나하나에 어느 번호 화면을 보고 한 말인지 표시해 줘.

    확인분석 문장 앞이나 뒤에 화면 번호가 붙어, 어떤 문장이 어떤 화면을 근거로 하는지 바로 찾을 수 있습니다.

  4. 화면을 하나씩 나열하지 말고 반복되는 패턴별로 묶어 달라고 요청합니다. 패턴을 행으로, 그 패턴이 나온 앱을 열로 둔 표를 만들게 하고, 여러 앱에 공통으로 나타나는 요소는 따로 표시하게 합니다.

    방금 본 화면들을 하나씩 설명하지 말고, 반복되는 요청·질문 패턴별로 묶어 줘. 패턴을 행으로, 그 패턴이 나온 앱 이름을 열로 둔 표로 만들어 줘. 여러 앱에 공통으로 나오는 요소(예: 진행률 바, 하단 버튼 위치)는 표 밖에 별도로 표시해 줘.

    확인패턴×앱 매트릭스 표 하나와, 표 밖에 공통 요소를 정리한 문장이 따로 나옵니다.

    이 단계의 실제 화면
    Preply, Blinkist, Tonal 세 앱의 온보딩 화면을 나란히 놓은 이미지. 세 화면 모두 주당 학습·이용 시간을 묻는 질문을 서로 다른 방식으로 보여줍니다
    화면에서 확인할 것 같은 요청 패턴(주당 투입 시간 확인)이 언어 학습, 독서 요약, 피트니스처럼 서로 다른 도메인에서 반복됩니다.
    1. 1Preply — '주당 몇 시간을 배우고 싶나요'로 시간을 직접 숫자로 고르게 합니다.
    2. 2Blinkist — 마스코트가 먼저 목표를 제안하고 −/+ 버튼으로 조정하게 합니다.
    3. 3Tonal — 요일 다이얼에서 추천값 4일을 강조해 기본 선택지를 유도합니다.
    Mobbin MCP (BETA) · 2026-08-21
  5. 종합 표가 나온 뒤에는 같은 화면을 UX 라이팅 관점, 마케팅·사업 관점처럼 다른 시선으로 다시 보게 할 수 있습니다. 이때는 방금 만든 종합 표와 겹치지 않게 하라는 조건을 함께 적습니다.

    방금 만든 패턴×앱 표와 겹치지 않게, 같은 화면들을 UX 라이팅 관점에서 다시 봐 줘. 문구 길이, 어조, 동사 선택처럼 표에 없던 내용만 새로 짚어 줘.

    확인패턴 표와 다른 각도의 문구·어조 관찰이 나오고, 앞서 만든 표의 내용은 반복되지 않습니다.

  6. 결과가 마음에 들면 그 결과를 만든 요청 문장들을 역으로 정리해 재사용할 수 있는 템플릿으로 저장해 달라고 요청합니다.

    지금까지 내가 보낸 요청 문장들을 순서대로 정리해서, 다음에 다른 주제로 검색할 때 주제만 바꿔 쓸 수 있는 프롬프트 템플릿으로 만들어 줘.

    확인빈칸(주제, 플랫폼 등)만 바꾸면 재사용할 수 있는 요청 문장 세트가 나옵니다.

연습

내 프로젝트와 관련된 화면 하나를 검색해 실제 스크린샷 근거로 패턴 표를 만들어 봅니다.

실제 스크린샷 캡처가 포함된 패턴×앱 매트릭스 표 하나가 나오고, 공통 요소가 표 밖에 따로 적혀 있으면 통과합니다.

알아두면 좋습니다

Mobbin의 수집 화면은 해외 서비스 비중이 높고 국내 사례는 적습니다. 캡처 시점의 화면이라 최신 버전과 다를 수 있고, 대기업 앱의 패턴을 무명 앱에 그대로 옮기면 안 됩니다. Mobbin MCP는 Pro·Team 유료 요금제에서만 제공되고 아직 베타 단계라 도구 이름과 동작이 예고 없이 바뀔 수 있습니다.

예시 화면 Preply, Blinkist, Tonal 세 앱의 온보딩 화면을 나란히 놓은 이미지. 세 화면 모두 주당 학습·이용 시간을 묻는 질문을 서로 다른 방식으로 보여줍니다
언어 학습, 독서 요약, 피트니스처럼 도메인이 전혀 다른 세 앱에서 같은 요청 패턴이 반복해 나타납니다.

용어 풀이

전체 용어집 →
MCP
Model Context Protocol의 줄임말입니다. Claude나 Codex가 Mobbin 같은 외부 서비스의 도구를 대화 안에서 직접 부를 수 있게 연결하는 규격입니다.

2026-08-21 기준 · 출처 · Mobbin — The design reference your AI agents are missing, Mobbin — Pricing, Mobbin — MCP 연결 설정(BETA), 모빈(Mobbin) MCP 하나로 리서치·기획·디자인·제안서까지 — Eric Park

다음 단계