Mobbin MCP로 UI 디자인 리서치하기

UI 디자인을 시작할 때 가장 중요하면서도 충분한 시간을 들여야 하는 과정이 있습니다. 바로 레퍼런스를 찾는 일입니다.

회원가입 화면을 디자인한다고 해도 단순히 ‘Sign up UI’ 레퍼런스를 검색하는 것만으로는 충분하지 않습니다. 비슷한 서비스를 찾아 어떤 방식으로 문제를 해결했는지 살펴보고, 여러 사례를 비교하면서 전체 플로우와 인터랙션을 확인해야 합니다. 그다음 우리 서비스에 적용할 수 있는 패턴을 선별하고, 실제 사용자 경험에 적합한지 검토하는 과정까지 필요합니다.
문제는 이 과정에 생각보다 많은 시간이 든다는 점입니다. 수많은 레퍼런스 가운데 필요한 사례를 찾는 것도 어렵고, 찾은 패턴이 우리 서비스에도 적합한지 하나씩 비교하고 판단해야 하기 때문입니다.

Mobbin MCP를 활용하면 이런 레퍼런스 리서치 방식이 조금 달라집니다.

Claude나 Codex에 Mobbin MCP를 연결하면, Mobbin 사이트에서 화면을 하나씩 직접 검색할 필요가 없습니다. 해결해야하는 UI/UX 문제를 프폼프트에서 자연어로 설명하면, Mobbin에 수집된 실제 디자인 사례를 찾아 비교하고 패턴을 분석하는 방식으로 리서치할 수 있습니다.

이번 글에서는 Mobbin MCP가 무엇인지, UI/UX 디자이너와 Product Manager가 실제 업무에서 무엇을 할 수 있는지 살펴보겠습니다.

Mobbin MCP 연결하기

Mobbin MCP를 사용하려면 먼저 사용하는 AI 도구와 Mobbin을 MCP 서버로 연결해야 합니다. (이 글에서는 ChatGPT를 기준으로 설명합니다.)

연결이 완료되면 ChatGPT 대화 안에서 별도로 Mobbin 사이트를 열지 않고도 실제 제품의 UI 레퍼런스를 찾고, 여러 사례를 비교하거나 UX 패턴을 분석하는 방식으로 활용할 수 있습니다.

예를 들어 다음처럼 질문할 수 있습니다.

핀테크 앱의 onboarding 화면을 찾아줘.
특히 본인 인증 전에 사용자가 앞으로 진행할 단계를 이해할 수 있도록
설계된 사례를 중심으로 보여줘.

단순히 화면을 보여달라고 할 수도 있지만, 여기서 한 단계 더 들어갈 수 있습니다.

찾은 사례에서 반복적으로 나타나는 UX 패턴을 정리해줘.
Progress indicator, 안내 문구, CTA 구조를 중심으로 비교해줘.

즉, Mobbin MCP의 장점은 UI를 찾는 것을 넘어, 찾은 화면을 AI와 함께 계속 분석할 수 있다는 데 있습니다.

기존 Mobbin 리서치와 다른 점

Mobbin을 직접 사용하는 방식도 충분히 강력합니다.

화면 유형이나 제품을 검색하고, 원하는 레퍼런스를 Collection에 저장하면서 비교할 수 있습니다.

다만 보통 다음과 같은 과정이 필요합니다.

가장 큰 차이는 ‘검색’과 ‘분석’이 같은 대화 안에서 이어진다는 점입니다.

예를 들어 처음에는 단순하게 checkout 사례를 찾은 다음, 이어서 이런 질문을 할 수 있습니다.

모바일 환경에서 checkout step을 가장 짧게 보여주는 제품만 추려줘.

그리고 다시 질문합니다.

선택된 사례에서 사용자가 결제를 완료하기 전에
불안감을 줄이기 위해 사용하는 UI 요소를 비교해줘.

리서치 과정이 한 번의 검색으로 끝나는 것이 아니라 계속 좁혀가는 탐색 과정이 되는 셈입니다.

Mobbin MCP로 할 수 있는 것

1. 빠르게 필요한 UI 패턴을 찾기

가장 기본적인 활용법은 화면 유형을 검색하는 것입니다.

예를 들어 다음과 같은 화면을 바로 요청할 수 있습니다.

• onboarding
• signup
• login
• checkout
• paywall
• pricing
• search
• empty state
• notification permission
• settings
• KYC
• bottom sheet

여기까지는 기존 Mobbin 검색과 크게 다르지 않아 보일 수 있습니다.

하지만 MCP에서는 사용자가 해결하려는 문제까지 같이 설명할 수 있다는 점이 중요합니다.

이렇게 질문하면 단순히 onboarding이라는 화면 유형만 찾는 것보다 리서치 목적이 훨씬 명확해집니다.

2. 특정 프로덕트의 UX 플로우를 조사

특정 서비스를 벤치마킹하고 있다면 제품명을 기준으로 리서치할 수도 있습니다.

이 방식은 한 화면의 비주얼을 보는 것보다 전체 플로우 안에서 각 화면이 어떤 역할을 하는지 이해할 때 특히 유용합니다.

제품을 그대로 따라 하기 위한 목적보다는, 이미 출시된 서비스가 특정 문제를 어떤 순서와 구조로 해결했는지 확인하는 데 적합합니다.

3. 여러 프로덕트의 UX 패턴을 비교

개별 화면을 보는 것보다 더 유용한 기능은 비교입니다.

예를 들어 SaaS 설정 화면을 디자인하고 있다고 가정해보겠습니다.

이렇게 하면 단순히 “예쁜 settings UI”를 찾는 것이 아니라 여러 제품에서 반복되는 convention과 서로 다른 접근 방식을 확인할 수 있습니다.

디자인 리뷰에서도 활용하기 좋습니다.

“저는 이게 좋아 보입니다”보다 “비슷한 유형의 여러 제품에서 공통적으로 사용하는 방식입니다”라고 설명하면 논의 기준이 훨씬 구체적이 됩니다.

4. UX 문제를 기준으로 레퍼런스를 찾기

Mobbin MCP를 사용하면서 가장 유용한 변화 중 하나는 화면 이름이 아니라 문제를 검색할 수 있다는 것입니다.

예를 들어 notification permission 화면이 필요하다고 해보겠습니다.

단순 검색은 이렇습니다.

단순 검색은 이렇습니다.

notification permission screen

문제 중심으로 바꾸면 다음처럼 질문할 수 있습니다.

사용자가 notification permission을 거부하지 않도록
시스템 권한 팝업이 나오기 전에 필요성을 설명하는 앱 사례를 찾아줘.

또는 signup 이탈을 줄이고 싶다면 이렇게 요청할 수 있습니다.

회원가입 단계가 긴 서비스 중
사용자의 중간 이탈을 줄이기 위해 progress와 기대 효과를
잘 보여주는 사례를 찾아줘.사용자가 notification permission을 거부하지 않도록
시스템 권한 팝업이 나오기 전에 필요성을 설명하는 앱 사례를 찾아줘.

UI 컴포넌트를 찾는 것에서 한 단계 더 나아가 사용자 문제를 해결한 실제 사례를 조사하는 방식입니다.

5. 여러 화면에서 반복되는 패턴을 추출

레퍼런스를 많이 모으는 것이 좋은 리서치를 의미하지는 않습니다.

10개 화면을 찾아놓고도 “그래서 어떻게 디자인해야 하지?”라는 질문이 남는 경우가 많습니다.

이때 AI에게 공통점을 정리하도록 요청할 수 있습니다.

단순 검색은 이렇습니다.

앞에서 찾은 10개 paywall UI를 분석해서
반복적으로 등장하는 패턴을 빈도와 함께 정리해줘.

다음 요소를 중심으로 봐줘.
- 가격 표현
- 무료 체험 안내
- 핵심 혜택
- CTA
- 해지 관련 안내
- Social proof
- Plan 비교 방식

그리고 다시 한 번 좁힐 수 있습니다.

공통적으로 사용하는 패턴과
일부 제품에서만 사용하는 특이한 패턴을 나눠서 정리해줘.

이 과정을 거치면 레퍼런스가 단순한 이미지 모음이 아니라 디자인 판단을 위한 자료로 바뀝니다.

6. 경쟁 제품 리서치에 활용

Product Manager에게 특히 유용한 영역입니다.

예를 들어 경쟁 서비스의 upgrade 경험을 조사한다면 다음과 같이 사용할 수 있습니다.

경쟁 제품 3개의 upgrade flow를 비교해줘.

각 서비스에서
1. upgrade를 노출하는 시점
2. 무료 기능 제한을 설명하는 방식
3. 유료 플랜의 가치 전달 방식
4. 가격 노출 위치
5. 최종 CTA

를 기준으로 비교해줘.

중요한 것은 경쟁 서비스를 그대로 모방하는 것이 아닙니다.

여러 제품을 비교하면서 해당 시장에서 공통적으로 사용되는 UX 패턴과 각 제품의 차별화 지점을 파악하는 데 목적을 두는 것이 좋습니다.

Mobbin MCP가 UI/UX 디자이너에게 유용한 이유

레퍼런스를 찾는 시간보다 판단하는 데 집중

디자인 리서치에서 많은 시간이 드는 작업은 생각보다 단순합니다.

화면을 찾고, 저장하고, 분류하고, 다시 펼쳐놓는 과정입니다.

Mobbin MCP는 이런 반복 작업의 일부를 줄여줍니다.

그만큼 디자이너는 다음 질문에 더 집중할 수 있습니다.

• 이 패턴이 우리 사용자에게도 적합한가?
• 우리 서비스에서는 어떤 방식으로 변형해야 하는가?
• 사용자가 가장 혼란스러워할 지점은 어디인가?
• 어떤 convention은 유지하고 어디에서 차별화할 것인가?

AI가 대신 디자인 결정을 내려주는 것이 아니라, 판단할 재료를 더 빠르게 준비하는 도구에 가깝습니다.

AI가 근거 없이 UI를 만드는 문제를 축소

ChatGPT, Claude, Cursor 등에 UI를 만들어달라고 하면 꽤 그럴듯한 결과가 나옵니다.

문제는 그 디자인이 실제 서비스의 UX 패턴과 얼마나 연결되어 있는지 알기 어렵다는 점입니다.

그래서 처음부터 UI를 만들어달라고 하기보다 먼저 레퍼런스를 찾게 하는 방식이 좋습니다.

바로 UI를 만들지 마.

먼저 B2B SaaS 제품에서 사용하는 settings UI 사례를 찾아서
공통적인 information architecture와 navigation 패턴을 분석해줘.

분석이 끝난 다음 그 원칙을 기반으로
우리 제품의 settings 구조를 제안해줘.

리서치 → 분석 → 생성 순서로 사용하는 것입니다.

프로덕트 매니저의 Mobbin MCP 활용법

Mobbin MCP는 디자이너 전용 도구가 아닙니다. 프로덕트 매니저도 다음과 같은 상황에서 활용할 수 있습니다.

• 신규 기능을 정의하기 전 경쟁 서비스 조사
• PRD 작성 전 UX 패턴 조사
• 디자인 리뷰 준비
• Feature benchmarking
• 결제 또는 upgrade flow 비교
• 경쟁사의 정보 구조 분석
• 디자이너와 논의할 레퍼런스 준비

특히 디자인 툴을 직접 다루지 않아도 자연어로 실제 서비스 사례를 탐색할 수 있다는 점이 장점입니다.

Mobbin MCP를 사용할 때 주의할 점

실제 서비스 중인 프로덕트이지만 모두 정답은 아니다

Mobbin에서 발견한 화면은 실제 출시되어 서비스되는 프로덕트 사례입니다.

하지만 유명 서비스에서 사용한다고 해서 우리 제품에도 정답이라는 의미는 아닙니다.

사용자 유형, 비즈니스 모델, 서비스 이용 빈도, 지역, 브랜드 특성에 따라 적합한 UX는 달라집니다.

레퍼런스는 근거 중 하나이지 사용자 리서치나 제품 데이터를 대체하지 않습니다.

화면보다 플로우가 중요!

좋아 보이는 한 장의 화면만 가져오면 디자인 의도를 잘못 이해하기 쉽습니다.

가능하면 다음을 함께 확인하는 것이 좋습니다.

• 이전 화면에서 사용자가 무엇을 했는지
• 이 화면에 왜 도착했는지
• 다음 행동은 무엇인지
• 에러 상황에서는 어떻게 처리되는지
• 신규 사용자와 기존 사용자의 경험이 다른지

특히 onboarding, checkout, KYC처럼 연속적인 과정에서는 한 장의 UI보다 전체 flow가 더 중요합니다.

한국 서비스 맥락은 별도로 검토 필수!

해외 서비스에서 잘 작동하는 UX가 한국에서도 그대로 통하는 것은 아닙니다.

국내 서비스를 디자인한다면 다음과 같은 요소를 함께 고려해야 합니다.

• 본인 인증 방식
• 국내 결제 환경
• 개인정보 관련 요구사항
• 익숙한 로그인 방식
• 한국어에서 달라지는 텍스트 길이
• 국내 사용자가 기대하는 interaction pattern

해외 레퍼런스를 충분히 조사하되 마지막 판단은 한국 사용자와 서비스 맥락에서 내려야 합니다.

Mobbin MCP는 언제 사용하면 좋을까?

다음과 같은 순간에 특히 유용합니다.

• 새로운 기능을 디자인하기 전
• 익숙하지 않은 UX 패턴을 설계할 때
• 경쟁 제품을 비교할 때
• 디자인 리뷰를 준비할 때
• 기존 화면을 개선할 때
• UI 방향에 대한 팀 의견이 갈릴 때
• AI로 UI를 만들기 전에 참고 사례가 필요할 때

결국 Mobbin MCP의 핵심은 AI에게 디자인을 대신 맡기는 데 있지 않습니다.

디자이너가 실제 제품 사례를 더 빠르게 찾고, 비교하고, 판단할 수 있게 만드는 것에 더 가깝습니다.

Mobbin MCP가 바꾸는 것은 디자인보다 리서치 방식

AI 디자인 도구가 등장하면 흔히 “디자이너 대신 화면을 만들어주는 기능”부터 떠올립니다.

하지만 Mobbin MCP는 조금 다른 방향에서 유용합니다.

기존에는

검색 → 수집 → 정리 → 분석

순서로 리서치를 했다면,

Mobbin MCP를 사용하면

질문 → 검색 → 비교 → 분석 → 추가 질문

으로 진행할 수 있습니다.

UI 레퍼런스를 찾는 행위가 검색창 중심에서 대화 중심의 리서치로 바뀌는 것입니다.

출처

• Mobbin MCP