바이브 코딩을 할 땐 어떤 도구를 사용하든 결과물이 묘하게 비슷비슷하게 느껴졌다. 특히 클로드 코드로 만든 결과물이 유독 평범하게 보였다. 그리고 클로드로는 주로 글 정리나 슬라이드를 만들 때만 사용하고 있어서 처음 클로드 코드를 설치한 후, 삭막한 까만 창을 보는 순간에는 그냥 익숙한 커서나 안티그래비티로 만들걸 그랬나? 라는 생각이 들기도 했었다.

설상가상으로 왼쪽에 폴더 트리가 없으니 클로드 코드와 슈퍼베이스(Supabase) MCP를 연결할 때 토큰을 입력할 설정 파일(.claude/settings.json)을 윈도우에서 찾느라 터미널과 한참을 씨름하기도 했다. 그렇지만 MCP(Model Context Protocol)를 사용하면서부터는 한결 편리해져서 클로드 코드를 메인으로 사용하고 있다.

그래서 이번 글에서는 클로드 데스크탑에서 블렌더(Blender), 스테이블리티 AI(Stability AI) MCP를 연결하고, 클로드 코드와 피그마(Figma), 스티치(Stitch) MCP를 연결하여 '평범한 앱'을 '감각적인 앱'으로 끌어올리는 과정을 공유하려 한다.

*참고: 최종 완성된 가족과 함께 남은 삶을 기록하는 웰다잉 앱

앱 디자인에 감각을 더해 완성하기

앞서 언급했듯이 다른 바이브 코딩 도구를 사용하다가 클로드 코드를 사용하게 된 전환점은 MCP를 사용하면서부터였다. 특히 스티치, 피그마와 직접 연결해서 사용하면 디자인 파일을 분석하고 수정 방향까지 제안받을 수 있다.

As-Is 앱 디자인: 스티치에서 만든 디자인 무엇이 문제였을까?

처음엔 스티치에서 UI 디자인을 만든 후 클로드 코드와 연결했다. 다음엔 클로드 코드에 현재 디자인 기반으로 앱을 만들어달라고 요청했더니 아래와 같은 결과물이 나왔다. 따뜻한 느낌의 앱을 원했지만, 결과는 우직한 블루톤 계열이라 차갑게 느껴졌고 UI 디자인에 적합한 스티치로는 키 비주얼을 잡는 데에는 한계가 있었다.

As-Is) 클로드 코드와 스티치 MCP를 연결해서 만든 앱 <출처: 작가>

To-Be 앱 디자인: 앱의 목적과 사용자 감정까지 고려한 디자인으로 수정

웰다잉 앱의 본질은 '죽음 준비'가 아니라 '삶의 기록’이어서 뭔가 따뜻한 느낌을 전달할 수 있는 메모리얼 오브제가 필요했다. 그래서 프롬프트에 메시지와 감정을 담아서 사용자가 기록을 채울수록 빛나는 오브제를 블렌더에서 만들었다.

다음으로 스테이블리티 AI로 배경, 포인트 컬러, 유리 질감 효과, 그리고 부드러운 애니메이션까지 포함된 디자인 방향을 잡았다. 이 스팩을 피그마에서 컴포넌트로 정리한 뒤, 클로드 코드에게 “현재 피그마 스펙에 맞춰 동기화하고, 전체 UI에 반영해 줘"라고 요청해서 최종 완성했다.

이처럼 디자인 컨셉을 정할 땐 프롬프트에 전달할 메시지나 감정을 함께 정하면 결과물이 달라진다.추가로 MCP를 연결하면 디자인 방향을 수정하더라도일관된 컴포넌트를 전체 화면에 적용할 수 있다는 점이 좋았다. 자 지금부터 구체적으로 MCP와 어떻게 연결하고 프롬프트를 작성해서 완성했는지 살펴보자.

클로드 데스크탑에 블렌더, 스테이블 AI MCP 연결하기

따뜻한 디자인으로 변경하기 위해서 핵심 메시지와 감정을 시각화할 수 있는 오브제가 필요했다. 그래서 AI 에이전트에게 삶에 기록이 많아질수록 성장하는 시각적 보상 시스템이 될 만한 게 뭐가 있을까? 라고 질문하는 것부터 시작했다. 클로드는 '별빛 조약돌'이라는 키워드를 제안했다. "삶이 끝나는 것이 아니라, 별이 되어 빛난다"는 핵심 메시지와 함께 별처럼 골드 빛이 나는 조약돌을 만들기로 했다.

보통은 컨셉 이미지나 키 비주얼을 만들 땐 나노바나나(Nano Banana)와 미드저니(Midjourney)를 주로 이용하지만, 3D 이미지와 영상이 필요해서 블렌더를 사용했다. 이처럼 필요한 MCP가 있다면 스미더리, 컴포시오, mcp.so 원하는 기능을 검색한 다음 클로드 데스크탑에서 설치 명령어를 받고 연결해서 사용하면 된다.

1) 블렌더 MCP 연결로 대화하며 3D 이미지와 영상 제작하기

블렌더 MCP를 이용하면 3D 이미지나 영상을 간단한 대화만으로도 만들 수 있다. 블렌더는 연결 과정이 다소 복잡하고 서버 연결이 자주 끊기는 단점이 있지만, AI 에이전트가 알려주는 데로만 하면 되니 걱정하지 않아도 된다. 먼저 파이썬과 UV를 설치하고 MCP를 설정하는 절차와 동일하게 클로드→데스크톱→설정→개발자→설정 편집→ Claude_desktop_config.json 파일에 코드를 입력한다.

추가로 블렌더를 다운로드 받아 설치하고 블렌더 MCP 깃허브에서 설치 명령어를 복사한다. blender-mcp-main.zip 파일을 다운로드 받아 블렌더에서 실행하고 설정한다. 그러면 클로드 데스크탑에서 아래와 같이 프롬프트를 입력해서 블렌더에서 결과물을 만들 수 있다.

프롬프트 : 블렌더로 렌더링해 줘
오브제 형태
└─ Icosphere 기반의 납작한 조약돌 모양 (스케일 조정 + Subdivision + Displace로 자연스러운 굴곡)
└─ 크기가 다른 작은 조약돌 2~3개가 함께 배치된 구성
└─ 어두운 대리석 받침대
뼛가루 유리화 재질 (핵심)
└─ SSS(Subsurface Scattering): 빛이 내부를 투과하는 따뜻한 크림/오프화이트 빛
└─ Translucent BSDF 믹스: 은은하게 빛이 비치는 반투명 효과
└─ 노이즈 텍스처: 표면마다 자연스러운 색상 변화
└─ Bump: 미세한 표면 질감
조명 & 카메라
└─ 3점 조명 (메인 소프트박스 + 차가운 보조광 + 림라이트)
└─ 85mm 망원 느낌의 카메라 앵글

블렌더 MCP 연결하는 방법 및 3D 이미지와 영상 만들기 <출처: 작가>

다소 복잡해 보여도 세팅하고 나면 컨셉만 입력해도 클로드가 블렌더 안에서 직접 오브젝트를 배치하고, 재질을 입히고, 조명을 세팅하고, 렌더링해서 결과물을 만들어 준다. 3D 툴을 한 번도 써본 적 없었는데 '원하는 무드의 비주얼'을 대화로 만들 수 있다는 점에서 매우 만족스러웠다.

2) 스테이블리티 AI MCP 연결로 컨셉 이미지와 키 비쥬얼 만들기

앱 전체를 일관된 이미지로 만들 때 쓸만한 MCP가 뭐가 있을까 찾다가 스테이블리티는 AI를 발견했다. 스테이블리티 AI는 API 연결이 필요해서 대시보드에서 API 키를 받고, 해당 키와 함께 스테이블리티 MCP 깃허브에서 코드를 복사하여 연결하면 된다.

Settings→Security→Generate new token→토큰 복사 후 설정 파일(.claude/settings.json)에 저장한 후 클로드 데스크탑을 다시 실행한다. 이후에는 대화 창에서 원하는 이미지을 설명만하면 Claude가 직접 스테이블리티 AI의 모델을 호출해 결과물을 돌려준다.

스테이블리티 A를 활용하면 단순히 이미지를 하나 뽑는 게 아니라, '배경 제거 → 스타일 조정 → 업스케일'처럼 여러 내장 도구를 유기적으로 연결해 하나의 워크플로로 자동화할 수 있다. 이미지 생성 하나에도 '분석 → 생성 → 수정 → 검토'의 전체 사이클이 한 대화 안에서 이뤄져서 좋았다.

프롬프트 :/stability-ai 로 삶의 마지막을 가족과 함께 기록하는 웰다잉앱의 대표 화면을 만들어줘. 한국인의 정서에 맞는 따뜻하고 감동적인 앱의 화면의 컨셉을 디자인하려고 해. 짙은 네이비 배경, 그래디언트 포인트 컬러, 카드에 유리 질감을 주는 Glass morphism 효과, 그리고 데이터 따뜻한 불빛이 반짝이는 듯한 부드러운 애니메이션이 필요해.

스테이블리티 AI MCP연결 방법 및 컨셉 이미지 만들기 <출처: 작가>

클로드 코드에 스티치, 피그마 MCP 연동하기

앞서 살펴본 스테이블리티 AI와 블렌더로 '비주얼 소재'를 만들었다면, 이제는 클로드 코드에 피그마와 스티치를 MCP로 연결하여 앱 디자인 자체를 바꿔보자. 먼저 클로드 코드에 스티치와 피그마 MCP를 연결하는 방법은 간단한데, 연결하고 나면 클로드 코드가 피그마의 디자인 토큰을 읽어 스티치의 컴포넌트 스펙과 동기화하고, 그 결과를 코드에 반영하는 흐름이 하나의 대화 안에서 이뤄지므로 정말 편리하다.

1) 생각보다 간단한 클로드 코드와 스티치 MCP 연결하기

스티치에서 만든 디자인을 선택하고 오른쪽 상단에 Export→MCP→ Setup MCP→클라이언트에서 클로드 코드로 선택→API 키 복사 후 명령어 입력하면 된다.

프롬프트 :핵심 타겟 (Primary) 부모님과 자신의 노후를 걱정하기 시작한 5060세대가 이용하는 웰 다잉 앱을 만들려고 해 - 공동 작성 엔딩 노트: 가족과 공유하는 법적/정서적 기록, - 타임캡슐 메시지: 사후 지정된 날짜에 전송되는 영상/편지, - 간편 가이드: 상속, 장례, 기부 절차 템플릿

As-Is) 스티치에서 UI 디자인 후 클로드 코드에 MCP 연결하기 <출처: 작가>

2) 클로드코드와 피그마 MCP 연결로 일관된 디자인 적용하기

앞서 블렌더와 스테이블리티 AI로 만든 결과물을 피그마로 불러와서 컴포넌트를 정리했다. 그리고 클로드 코드와 연결하기 위해 Settings→Security→Generate new token→토큰 복사 후 설정 파일(.claude/settings.json)에 복사한 후 명령어 입력을 한다. 이후 클로드 코드에서 /mcp 를 입력하면 MCP 목록이 나타나는데 이때 피그마 항목을 선택하여 Authenticate을 새로운 브라우저 창에서 Allow Access를 클릭하면 연결된다.

프롬프트 :현재 Figma 스펙에 맞춰 동기화하고, 전체 UI에 반영해 주되 좀 더 따뜻한 별빛이 반짝이는 듯한 부드럽게 아름답게 전체 디자인을 단계별로 업그레이드해 줘

To-Be) 피그마 MCP 연결 방법 및 디자인 적용하기 <출처: 작가>

MCP를 통해 감성적인 연결까지 가능한 시대

솔직히 클로드 코드의 까만 창이 처음에는 무척 낯설었고 과연 명령어만으로 원하는 데로 디자인을 할 수 있을까? 라는 생각이 들기도 했다. 그런데, MCP를 사용하면서 그 안에서 피그마의 디자인 언어가, 스티치의 컴포넌트 스펙이, 스테이블리티 AI의 이미지가, 블렌더의 3D 비주얼이 하나로 연결되는 워크플로로 돌아가기 시작했다.

이렇게 여러 디자인 AI 도구를 연결해 이용하면서 같은 기능, 같은 목적의 앱이지만 디자인에 따라 사용자가 느끼는 감정은 달라질 질 수 있다는 점을 알게되었다. 물론 디자이너의 전문성까지는 아니어도 대화 한 번으로 단순히 "예쁘게"가 아니라 어떤 메시지를 전달할지, 어떤 감정을 주고 싶은지까지 설계할 수 있다는 점에서는 한 번쯤 이용해보길 추천한다.

끝으로 대화만으로 컨셉 이미지를 만들고, 3D 입체적인 질감을 구현하고, 앱 디자인을 만드는 전체를 다듬어가는 사이클 자체에서도 매 순간 새로운 영감이 계속 생겼다. 이처럼 누구나 바이브 코딩 시대에 창의적 활동도 함께 시작해 보자.