✏️🖥️ Stitch 를 이용한 퍼스널 블로그 시행착오 1

16기 Cursor 스터디를 하고,
개인적인 기능구현 연습 예제가 필요한데
만드는 김에 개인 블로그 만들면서 기능구현 연습하면 좋겠다 싶어 시작했습니다~

추후에 Supabase라는 도구로 댓글 기능도 넣고,
로그인 기능도 넣고 이것저것 연습하는 개인 블로그가 나오지 않을까 싶네요 🌱

💭 처음엔 이렇게 계획했어요

🎯 이상적인 계획 (꿈같은 이야기)

- Figma: 예쁜 디자인 만들기

- MCP: AI와 협업해서 코딩하기

- Stitch: 디자인을 실제 웹사이트로 변환

- GitHub: 코드 저장하고 자동 배포

뭔가 엄청 전문적이고 멋있어 보이죠? 😎

😅 현실은... (카페에서 노트북으로 작업)

하지만 현실은 녹록지 않았어요.
카페에서 노트북으로 작업하려니 복잡한 개발 환경 설정이 어려웠거든요.

그래서 계획을 바꿨습니다:

- V0: 웹에서 바로 디자인하고 코드 만들기

- Vercel: 쉬운 배포 서비스

- Supabase: 댓글 기능을 위한 데이터베이스

🔧 실제로 해보니... (시행착오의 연속)

1단계: 프롬프트 준비하기

먼저 AI에게 "이런 블로그를 만들어줘!"라고 말할 내용을 준비했어요.

하지만 처음엔 너무 욕심을 부렸어요.
한 번에 모든 기능을 다 넣으려고 하니까 AI도 헷갈려하더라고요.

2단계: V0로 시도해보기

ALT

웹 사이트 홈페이지 스크린 샷

그런데 문제가 생겼어요:

1. 한 번에 너무 많이 요구: 복잡한 블로그를 한 번에 만들려니 AI가 처리하지 못했어요

2. 토큰 소진: AI 사용 횟수가 다 떨어져서 더 이상 사용할 수 없게 됐어요 😭

ALT

텍스트가있는 검은 색 화면의 스크린 샷

> 토큰이란? AI 서비스를 사용할 때 소모되는 사용량 단위예요. 무료 계정은 제한이 있어서 다 쓰면 기다리거나 유료로 결제해야 해요.

3단계: Stitch 발견!

포기하려던 순간, Stitch라는 도구를 발견했어요!

ALT

검은 색 화면의 스티치 앱의 스크린 샷

Stitch는 Google에서 만든 웹 디자인 도구예요. Gemini AI를 사용해서 웹사이트를 만들어줍니다.

Stitch 알아보기

Jekyll이란?

Jekyll은 블로그를 만들기 위한 도구예요. 특히 개발자들이 많이 사용하는데, 이유가 있어요:

- 무료: GitHub Pages에서 무료로 호스팅 가능

- 빠름: 정적 사이트라서 로딩이 빠름

- 마크다운: 글을 쉽게 작성할 수 있음

Stitch 데이터 처리 방식

YAML vs JSON vs XML

블로그 글의 정보(제목, 날짜, 태그 등)를 저장하는 방법이 여러 가지 있어요:

XML: 복잡하고 길어요

```xml
<post>
<title>블로그 글 제목</title>
<date>2025-06-08</date>
</post>
```

JSON: 프로그래밍에서 많이 사용해요

{
  "title": "블로그 글 제목",
  "date": "2025-06-08"
}

YAML: 사람이 읽기 쉬워요 (Jekyll에서 사용)

```yaml
title: 블로그 글 제목
date: 2025-06-08
```

Stitch 가 가장 선호하는 마크업 언어는? - YAML

ALT

한국어 텍스트가있는 전화 스크린 샷

결론적으로 YAML이 가장 간단하고 읽기 쉬워서 선택했어요!

🤖 AI 모델 비교해보기

같은 요청을 다른 AI에게 해봤어요:

Gemini 2.5 PRO

- 장점: 논리적 사고가 뛰어남

- 특징: 체계적으로 차근차근 설명

Claude 4

ALT

컴퓨터에서 한국어 앱의 스크린 샷

- 장점: 창의적이고 직관적

- 특징: 사용자 친화적인 설명

특별한 발견: GPT 전용 도구

Stitch JSON Designer라는 특별한 GPT를 발견했어요!

ALT

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

https://chatgpt.com/g/g-68454812c2488191bb3c5cf6d482ed7d-stitch-json-designer

이 도구는 Stitch에서 사용할 수 있는 형식으로 자동 변환해줘서 정말 유용했어요.

💡 깨달음: 작은 단위로 나누기

여러 번 시도해보니 한 가지 깨달음을 얻었어요:

> 한 번에 모든 걸 만들려고 하지 말고, 페이지별로 하나씩 만들자!

이렇게 접근하니 훨씬 수월했어요:

1. 홈페이지부터 시작

2. 글 상세페이지 추가

3. 네비게이션 연결

4. 스타일링 적용

🎨 의외의 발견: Cursor의 다이어그램 기능

작업 중에 Cursor라는 코드 에디터의 숨겨진 기능을 발견했어요!

ALT

한국의 메시지 스크린 샷

단순히 코드만 작성하는 게 아니라 다이어그램도 그려주더라고요. 이런 식으로 블로그 구조를 시각화할 수 있어서 정말 도움이 됐어요.

결과 PRD 문서 -> Cursor 작성 페이지

🔧 사용한 도구들 정리

성공한 도구들 ✅

- Stitch: Google의 웹 디자인 AI 도구

- Jekyll: 블로그 생성 도구

- YAML: 데이터 형식

- Cursor: 코드 에디터 (다이어그램 기능 포함)

아쉬웠던 도구들 😅

- V0: 토큰 제한으로 중도 포기

- 러버블: 결과물이 만족스럽지 않음

📝 배운 점들

1. 환경의 중요성

카페에서 작업하려면 웹 기반 도구들을 활용하는 게 좋아요.
복잡한 설정이 필요한 도구들은 집에서 사용하는 게 낫더라고요.

2. 욕심부리지 말기

처음부터 완벽한 블로그를 만들려고 하지 말고,
기본적인 기능부터 차근차근 만들어가는 게 중요해요.

3. 여러 도구 실험해보기

한 가지 도구가 안 되면 다른 도구를 시도해보세요. 각각 장단점이 다르거든요.

4. AI별 특성 파악하기

- 체계적 설명이 필요하면 → Gemini

- 창의적 아이디어가 필요하면 → Claude

- 특수 기능이 필요하면 → 전용 GPT 도구

🚀 다음 단계는?

이제 기본적인 블로그 구조는 완성했어요!
다음에는 웹 디자인을 해야겠죠?

4. 실제 블로그 글 작성하기

💭 마무리하며

물론 중간중간 막히는 부분도 많았고,
계획대로 되지 않는 것도 많았지만... 그게 또 배우는 재미 아닐까요? 😊

가장 중요한 건 포기하지 않는 것이었어요.
한 가지 방법이 안 되면 다른 방법을 찾아보고,
너무 복잡하면 간단하게 나누어서 접근하고...

혹시 저처럼 개발을 배우며 블로그를 만들어보고 싶은 분들이 있다면,
이 글이 조금이라도 도움이 되었으면 좋겠어요!

다음 글에서는 웹 디자인 작업한 사례글로 마주하겠습니다~

---

🔗 참고 자료

- [Jekyll 공식 문서](https://jekyllrb.com/)

- [Google Stitch](https://stitch.google.com/)

- [Supabase 가이드](https://supabase.com/docs)

- [GitHub Pages 사용법](https://pages.github.com/)