Claude Code로 드디어 수준 높은 UI 만들기 (그 비결은 이것)

영상 흐름

1. 0100:00

   미리 보는 실제 제품 레퍼런스

   실제 앱과 웹사이트를 모은 Mobbin 라이브러리는 새 제품 조사, 평범한 웹사이트 개선, 애니메이션 프레젠테이션 스타일 변경이라는 세 가지 작업 흐름에 디자인 영감을 제공합니다. AI에 모든 세부 사항을 만들어 달라고 하기보다 실제 레퍼런스를 활용해 디자인 결정을 내리는 방식입니다.

   MobbinClaudeCursorRemotion+1
2. 0201:18

   실제 앱, 웹사이트, 사용자 흐름 둘러보기

   Mobbin은 엄선된 웹사이트 예시와 개별 섹션은 물론 앱 스크린샷, 사용자 흐름, 계정 삭제나 결제 같은 특정 화면도 제공합니다. 실제로 작동하는 제품은 상상으로 만든 레이아웃이나 정적인 영감 이미지보다 더 현실적인 레퍼런스가 됩니다.

   Mobbin
3. 0303:48

   MCP를 통해 Mobbin 연결하기

   Mobbin의 MCP 커넥터를 사용하면 에이전트가 외부 도구와 레퍼런스에 접근할 수 있습니다. Claude와 Cursor는 커넥터 또는 마켓플레이스 설정에서 Mobbin을 설치하고 권한을 승인해 연결할 수 있습니다. 기존 Cursor 연결을 이용하는 등 Grok Bot에서도 Mobbin을 연결할 수 있습니다.

   MobbinClaudeCursorGrok
4. 0405:28

   암호화폐 지갑의 화면과 사용자 흐름 조사하기

   제안된 암호화폐 지갑 Coinlio를 위해 Claude는 Mobbin MCP로 실제 제품을 조사하고 권장 화면, 사용자 흐름, 모범 사례, MVP 구성을 제시합니다. 권장 항목에는 온보딩, 보안, 주요 탭, 홈, 활동, 스왑, 탐색, 마켓, 거래 흐름이 포함되며, 실제 앱을 참고 사례로 제공합니다.

   MobbinClaude
5. 0507:14

   레퍼런스 없이 SaaS 사이트 생성하기

   먼저 Claude는 디자인 레퍼런스 없이 Mobbin에도 연결하지 않은 채 짧은 프롬프트만으로 홈, 소개, 요금제, 로그인 페이지가 있는 소셜 미디어 마케팅 SaaS 웹사이트를 만듭니다. 결과물에는 보라색-분홍색 그라데이션, 아이콘 대신 이모지 사용, 중앙 정렬 레이아웃 등 흔히 볼 수 있는 일반적인 AI 디자인 특성이 나타납니다.

   Claude
6. 0608:34

   Mobbin 레퍼런스로 SaaS 사이트 재설계하기

   Claude는 Mobbin MCP로 다채롭고 생동감 있는 SaaS 사례를 조사하고, 개선 사항을 계획한 뒤 레퍼런스를 복사할 자료가 아닌 영감으로 삼아 두 번째 웹사이트 버전을 만듭니다. 재설계된 사이트에는 더 명확한 행동 유도 문구와 풍부한 홈, 소개, 요금제, 로그인 페이지가 추가됩니다. 나란히 비교하면 첫 번째 버전보다 구조와 스타일이 더욱 차별화된 것을 확인할 수 있습니다.

   MobbinClaude
7. 0715:46

   애니메이션 프레젠테이션 스타일 바꾸기

   강의 프레젠테이션은 처음에는 다채롭지만 제작자의 취향에는 너무 평범해 보입니다. Claude Code는 직선과 은은한 효과를 활용한 미니멀한 흑백 Mobbin 레퍼런스를 바탕으로 프레젠테이션을 고유한 스타일로 바꾸되, 애니메이션과 전환 효과는 유지합니다. 제작자는 업데이트된 버전의 더 깔끔하고 힘 있는 분위기를 선호합니다.

   MobbinClaude CodeRemotion
8. 0818:17

   AI에 더 나은 레퍼런스 제공하기

   에이전트가 실제 제품, 화면, 사용자 흐름을 기반으로 삼고 그 패턴을 프로젝트에 맞게 변형하면 디자인 작업의 완성도가 높아집니다. 원본 디자인을 복사하지 않으면서 새 앱, 웹사이트 재설계, 기존 제품에 이 접근 방식을 적용할 수 있습니다.