🤖 Vooster AI + Stitch로 퍼스널 블로그 만들기 실전기 4편

🎯 들어가며: "지난 번에 하려다 말았던 Vooster AI 활용!"

안녕하세요! Vooster AI + Stitch 조합으로 퍼스널 블로그를 만드는 전체 과정을 경험해봤거든요.

지난 Vooster 적용기 : https://www.gpters.org/dev/post/custom-web-clipping-trial-vl4eEMNpveuHGB3

"지난 번에 하려다 말았던 Vooster AI 활용! 이제 원클릭으로 연동이 가능해졌네요!"

ALT

MCP

💡 이 글에서 얻을 수 있는 것

- Vooster AI ASK 모드 실제 사용 후기

- Stitch 프롬프트 최적화 과정의 현실적 어려움

- HTML → React 변환의 예상치 못한 복잡함

- 실무에서 바로 써먹는 구체적인 꿀팁들

- "이게 맞나 싶기도 합니다" - 솔직한 고민과 성찰

🚀 Vooster AI ASK 모드 체험기

🎨 첫 인상: "오홍 이제는 보다 직관적한 테스크를 보여주네요"

Vooster AI는 초기 시스템 구축하는데 있어 도움받기 좋은 것 같아요
이후 상황마다 변하는 PRD 대응능력은 다소 아쉽지만
개발 초기 단계이니 만큼, 달라질 것 같아요

"이제는 보다 직관적인 테스크를 보여주네요!"

💬 ASK 모드로 소통

ASK 모드가 정말 신기했어요. 기존에는 막연히 "블로그 만들어야지" 했다면,
이번엔 정말 다른 경험이었거든요.

"저는 ASK 모드로 천천히 저의 상황을 이야기하며 작업 구체화를 진행했습니다."

단순히 명령을 내리는 게 아니라 AI와 대화하면서 아이디어를 발전시키는 과정이 정말 인상적이었어요. 마치 경험 많은 동료와 브레인스토밍하는 느낌?

📋 체계적 접근: PRD 작성 지원

"지난 클리핑 만들 때 교훈을 바탕으로 미리 폴더 베이스를 구축합니다."

이전 경험을 학습해서 이번엔 처음부터 체계적으로 접근했어요.
Vooster가 정말 도움이 됐던 부분이 바로 이거예요.

"퍼스널 블로그 만드는 목적은 기능구현 연습이기에 보다 자세한 기능 요구사항을 작성합니다."

Vooster가 Taskmaster 역할을 하면서,
막연했던 아이디어를 구체적인 실행 계획으로 만들어주더라고요.
음.. 그런데 태스크매니저 MCP 와 비교했을 때, 더 효과가 좋은지는
바이브 코딩 입문자라 비교하기는 어려운 것 같아요
그냥 툴을 쓰면 오 좋다~ 하는 레벨이라서 그런가봐요

🔧 Stitch 프롬프트 최적화의 현실

🚨 예상치 못한 제약 발견

여기서 첫 번째 큰 벽에 부딪혔어요.

1. Claude 한테 웹 디자인 PRD 를 받고
2. PRD 를 Cursor 에게 쪼개달라 부탁한 상황이라

문서가 이렇게 구분되어졌는데, "Stitch 는 프로젝트 기능이 없기 때문에
일일이 저 나머지 파일에 지침을 먹여야 하는 상황이 발생"
이런 제약을 미리 알았다면... 하지만 이것도 경험이죠!

🛠️ 해결책 모색: 통합 프롬프트 전략

문제를 발견하고 나서는 통합 프롬프트로 해결하는 방향으로 가닥을 잡았어요.

영어 프롬프트 전략도 여기서 나왔어요. "영어 프롬프트로 웹 페이지 뽑고 Cursor 에서 한국어 변환하면 되니까" - 도구별 특성을 고려한 워크플로우 설계가 정말 중요하더라고요.

"이렇게 수정된 Stitch 전용 프롬프트 제작 완료~ 나머지 파일은 과감하게 삭제합니다"

🎨 화면 구현 과정

사전 체크의 중요성

"우선 화면단 만들기 전, Cursor 에서 해야할 선행 작업이 있는지 확인하고 작업합니다."

💡 중요한 깨달음: "만들기 전에, Cursor 가 구현할 수 있는 컬러코딩을 크로스체크하는 것을 권유드려요. 아니면 추가 개발이나 알 수 없는 오류가 발생하더라구요."

폴더 구조 설계

ALT

한국 웹 사이트의 스크린 샷

ALT

한국어 앱의 스크린 샷

"이 방식이 어떤 방식이고, 왜 사용하는지는 모르지만, 나중에 알아봅시다."

완벽히 이해하지 못해도 일단 적용해보는 실무적 접근이 때로는 필요해요.

첫 번째 결과물

음.. 다크한걸 원했는데 이렇게 뽑아주네요. 근데 이것도 맘에 드니 걍 이걸로 쓰려고 합니다.

💻 HTML → React 변환의 예상치 못한 복잡함

🚨 첫 번째 좌절: "반영이 안됐다고 하네요"

"중간 확인했는데, HTML 만든 사이트가 반영이 안됐다고 하네요. 원인을 물어보고 해결해봅시다."

"잘은 모르지만, HTML 문서를 React 라이브러리로 매핑(?) 해야 한다고 하네요"

😅 Cursor와의 소통 과정

ALT

전화에 한국 문자 메시지의 스크린 샷

"React 로 연결하니까 이렇게 구현해주네요"

"평소에 Cursor 에게 오냐오냐 하니까 이건 좀 아닌 것 같습니다"

"Cursor 아 ㅋㅋ 쉽지 않습니다 진짜 .."

🔄 처음부터 다시: 코드베이스 분석

"결과가 계속 이러길래 처음부터 코드베이스 분석하고 당장 해결 가능하면 하고, 아니면 방법 리서치해서 진행해야겠네요 ㅠ"

"이제는 원본 그대로 HTML React 새 폴더를 만들어 작업을 진행합니다"

"아직도 이 프로세스가 머리에 그려지지 않는데 우선 맡겨봅니다"

🎉 드디어 성공!

"오 드디어 나오네요"

"앞으로는 Stitch로 구현한 웹 페이지를 HTML 원본 그대로 구현하라고 명령하는게 좋을 것 같아요"

🔍 워크플로우 이해

"그러다 드는 생각이 FIgma MCP 랑 어떻게 작업하지? 궁금해서 물어보니"

"React 변환 프로세스가 핵심이라고 하네요.
앞으로는 React 변환 프로세스를 메인으로 구축해야겠어요"

🤔 "이게 맞나 싶기도 합니다" - 솔직한 고민

😰 오버 프로세스에 대한 우려

"하.. 근데 이 작업이 좀 오버 프로세스 같은 느낌이 있습니다.
이미 고심해서 만든 프롬프트 -> 추가 수정한 느낌이라
수정의 수정, 파이널 수정하는 느낌이랄까요?"

"퍼스널 블로그 만든다고 힘 주고 만들고 있는건 맞는데 이게 맞나 싶기도 합니다"

이 고민이 정말 현실적이에요. AI 도구를 잘 활용하려다 보니 오히려 복잡해지는 아이러니를 경험했어요.

🤝 Cursor와의 대화에서 배운 것

"커서가 이제는 어떻게 개발할거냐고 방향성을 질문합니다"

"솔직하게 하나도 모른다고 하고 설명해달라고 역으로 질문합니다"

"나온 내용은 문서화를 해서 나중에 공부합시다"

완벽하지 않아도 솔직하게 소통하는 것이 더 좋은 결과를 가져다준다는 걸 배웠어요.

💡 실무에서 써먹는 꿀팁 모음

🔧 HTML 코드 복사 꿀팁

💡 꿀팁: "보기 Code 복사가 안되면, '보기 좋게 다시 만들어줘 :
Please re-render the site to look good' 이렇게 짧게 프롬프트 치면 HTML 코드 복사 가능해집니다."

📋 사전 체크리스트

1. 컬러코딩 사전 확인: Cursor가 구현 가능한지 미리 체크

2. 폴더 구조 설계: 이전 경험을 바탕으로 사전 준비

3. 백업 시스템: "중간, 작업 내용 정리해서 Readme.md 문서화, push 습관 길들이기"

🛠️ 디버깅 전략

- 문제 생기면: "디버깅 코드 만들라고 부탁하기!"

- 방향성 모르면: "나를 납득할 정도로 설명해. 그리고 확장성을 고려해서 방향성을 생각해"

- 윈도우 환경: "PowerShell 이랑 가까이하는 편, 지침으로 수정하면 더 좋아요!"

🎯 개발 접근법

- TDD 방식: "테스트 주도 개발 방법을 학습시키기!"

- 단계별 접근: "내가 필요한 기능만 구현하는 연습을 하려고 합니다"

- 문서화 습관: "중간중간 커밋/푸시, Readme.md 습관화!"

🌱 배운 점과 다음 단계

📚 핵심 깨달음들

1. 폴더 시스템의 중요성

"왜 폴더베이스부터 구축하냐 -> 초반 환경설정에 대한 중요성을 깨달았음"

2. React 변환 프로세스가 핵심

"앞으로는 React 변환 프로세스를 메인으로 구축해야겠어요"

3. AI와의 소통 방식

"예의와 존중을 담아 Cursor 와 대화하며 작업을 진행합시다"

🎯 개선 방향

단기 목표

- [ ] React 변환 프로세스 체계화

- [ ] 컬러코딩 체크리스트 작성

- [ ] 백업 시스템 구축

장기 목표

- 워크플로우 템플릿화: 성공한 패턴을 재사용 가능하게

- TDD 방식 적용: 테스트 주도 개발 방법론 학습

- 문서화 체계: 프로세스와 인사이트를 체계적으로 기록

🤔 남은 질문들

- "Vooster 후기?"

- "Figma MCP 후기?"

- "저는 폴더 시스템부터 만들었는데 다른 좋은 방법이 있을까요?"

- "Stitch -> 사이트 구현 과정 시행착오"

💬 "여러분은 어떻게 작업하시나요?" - 커뮤니티 질문

완벽히 효율적이라고 말하기는 어렵지만,
새로운 워크플로우를 탐험하는 재미와 AI 도구들의 실제 활용 가능성을 확인할 수 있었어요.

특히 "수정의 수정, 파이널 수정하는 느낌"에 대한 고민이 정말 현실적이에요.
AI 도구를 잘 활용하려다 보니 오히려 복잡해지는 아이러니...

### 🙋‍♂️ 독자들에게 질문

여러분은 어떻게 작업하시나요?

- Vooster나 Stitch 같은 도구를 써보셨나요?

- HTML → React 변환에서 좋은 방법이 있을까요?

- 이런 복잡한 워크플로우가 정말 필요할까요?

댓글로 경험을 공유해주세요!

특히 이런 부분들이 궁금해요:

- 폴더 시스템 구축 방법

- AI 도구들과의 효과적인 소통법

- 시행착오를 줄이는 노하우

- 프로젝트 진행 시 백업 전략

다른 개발자들의 다양한 관점이 정말 궁금해요!