(비개발자를 위한) Cursor + Playwright MCP + ShadCN MCP로 내 앱의 디자인을 개선하는 방법

바이브 코딩을 계속 하다 보면 천편일률적인 (주로 보라색 계열) 디자인을 마주하는 일이 많습니다. 이 글에서는 Playwright MCP와 ShadCN MCP를 이용해 내 앱의 디자인을 체계적으로 개선하는 방법을 소개합니다. Cursor 기준으로 써있지만 어떤 코딩 에이전트를 사용하든 비슷하게 할 수 있습니다.

큰 흐름은 다음과 같습니다. 두 MCP는 3단계와 4단계에서 쓰이게 되며, 필수로 써야만 하는 건 아닙니다.

1. 내가 만들고 싶은 앱 분석하기
2. 디자인 레퍼런스 찾기
3. 레퍼런스 분석하기 → Playwright MCP (필수는 아님)
4. 디자인 시스템 컴포넌트 페이지 만들기 → ShadCN MCP (필수는 아님)
5. 이 컴포넌트들을 이용해 UI 구현하는 룰 만들기
6. 그 룰을 이용해 앱의 디자인 개선하기

여러분이 작업 중인 프로젝트에서 해보셔도 되고, 제가 GitHub에 만들어둔 Next.js 템플릿을 이용해 따라오셔도 됩니다. MCP를 쓸 때와 안 쓸 때 어떻게 달라지는지를 포함해, 과정을 단계별로 따라하실 수 있게 만들어준 저장소입니다. 이 깃헙 저장소 사용 방법은 아래에서 설명할게요.

1) 내가 만들고 싶은 앱 분석하기

먼저 노트 앱을 켜고 이런 질문들을 스스로 던져봅니다.

• 내가 만들고 싶은 앱은 어떤 특징을 가지고 있나?
• 내가 만들고 싶은 앱은 어떤 기능을 제공하나?
• 내가 만들고 싶은 앱은 사용자로부터 무엇을 입력받아서 무엇을 해주고, 무엇을 출력해주나?

그걸 통해 “XX처럼 YY하는 앱”, 또는 “AA처럼 BB해주는 기능” 같은 묘사가 한 문장으로 나오면 이후 단계가 아주 수월해집니다. 예를 들어:

• Zapier처럼, 여러 종류의 SaaS를 여러 종류의 코딩 에이전트에 연결해주는 앱 → 제 템플릿에서는 이걸 예제로 사용합니다.

• Lovable에서 문서 검색을 AI가 해주는 것처럼, 내가 저장해둔 링크들을 단순히 일치하는 키워드뿐 아니라 채팅을 통해 유사한 데이터를 찾을 수 있게 해주는 검색 기능

2) 디자인 레퍼런스 찾기

1단계에서 이미 레퍼런스를 찾았을 수도 있지만 못 찾았다면 몇 가지 방법을 동원해 디자인 레퍼런스 또는 템플릿을 찾아봅니다.

AI에게 물어보기

AI에게 대략 이런 질문을 던져봅시다.

여러 종류의 SaaS를 여러 종류의 코딩 에이전트에 연결해주는 앱을 만들려고 하는데, 이와 비슷한 기능을 가진 앱이 어떤 게 있을까요? UI/UX를 참고하고 싶어서요.

그냥 물어볼 수도 있고

딥 리서치를 여러 LLM에서 돌려보는 것도 좋아요.

SNS 등을 통해 주변 사람들에게 물어보기

질문의 내용 자체는 위와 같습니다만, AI 대신 댓글 달아주시는 분들과 대화하면서 새로운 발견을 하는 것도 재미있어요.

템플릿에서 찾기

좋은 무료 디자인 템플릿이 웹상에 정말 많습니다. 그냥 구글링만 해봐도 되고, 이런 템플릿 갤러리에서 찾는 것도 좋아요.

• Vercel 템플릿: https://vercel.com/templates
• v0 커뮤니티 템플릿: https://v0.app/community
• Lovable 템플릿: https://lovable.dev/templates
• 미려한 컴포넌트 디자인 템플릿: https://21st.dev/
• 미려한 컴포넌트 디자인 템플릿(2): https://dribbble.com/

만약 괜찮은 디자인 템플릿의 소스 코드를 찾았다면 바로 4단계로 가는 것도 좋습니다. 만약 코드를 가져올 수 없는 상황이라면 3단계로 넘어갑니다.

3) 레퍼런스 분석하기

Cursor에게 디자인 레퍼런스를 분석해서, 그 레퍼런스의 UI/UX를 내가 만들어낼 수 있도록 디자인 시스템과 스타일 가이드라인을 만들어달라고 요청합니다.