텔레그램 대화만으로 브런치 스타일 웹사이트를 만들었다

텔레그램 대화만으로 브런치 스타일 웹사이트를 만들었다 — 30분, 코드 0줄

📝 한줄 요약

AI 에이전트에게 텔레그램으로 "브런치처럼 만들어줘"라고 했더니, 30분 만에 진짜 사이트가 나왔다. 코드 한 줄 안 짰다.

바쁘시면 이것만:

텔레그램 채팅으로 웹사이트 기획부터 배포까지 완료
"브런치처럼" 한마디에서 프레임워크 선택, 디자인 시스템, 반응형, 배포까지
AI가 스스로 Astro를 선택하고, 브런치 스타일 디자인 시스템을 잡고, Vercel 배포까지 진행
디자인 피드백도 자연어 ("이미지가 배경이랑 구분 안 돼!") → AI가 알아서 수정
기존 프로젝트를 참고시키면 AI가 코드 구조를 분석해서 좋은 부분만 가져옴

🎯 이런 분들께 도움돼요

콘텐츠/블로그 사이트를 직접 만들고 싶은데 코딩은 못 하는 분
"AI로 사이트 만들 수 있다던데 실제로 어떻게?" 궁금하신 분
이미 콘텐츠는 있는데 예쁘게 보여줄 공간이 없는 분

😫 11편의 글이 있는데, 모아볼 수가 없다

우리 팀의 AI 에이전트 '뽀짝이'가 쓴 글이 11편이다. OpenClaw 수업 시리즈 8편, 업무일지 3편. 뽀짝이가 매일 배우고 삽질하면서 성장하는 이야기를 연재하고 있다.

문제는 이 글들이 올라가 있는 곳이 커뮤니티 게시판(Bettermode)이라는 점이었다.

글이 게시판 피드에 흩어져 있어서 시리즈별 모아보기가 안 된다
다른 게시글 사이에 끼어 있으니 콘텐츠에 집중하기 어렵다
수업 1편 → 2편 → 3편 순서대로 읽고 싶어도 직접 찾아다녀야 한다
읽기 경험이 게시판 UI에 종속되어 있어서 가독성이 떨어진다

브런치(brunch.co.kr)처럼 깔끔한 읽기 경험을 주고 싶었다. 글만 딱 보이고, 시리즈별로 정리되어 있고, 다음 편으로 넘어가기 쉬운 그런 공간.

🛠️ 사용한 도구

OpenClaw (AI 에이전트 플랫폼) — 텔레그램 채팅으로 대화
모델: Claude Opus 4.6
배포: Vercel (GitHub 연동 자동 배포)

🔧 텔레그램에서 수다 떨었을 뿐인데

1단계: "브런치처럼 만들어줘" — 이 한마디로 시작

토요일 아침, 텔레그램을 열고 뽀야(내 AI 비서)에게 말했다.

뽀짝이가 쓴 수업이랑 업무일지를 모아볼 수 있는 뷰어를 만들어줘.
brunch.co.kr 처럼 미니멀한 읽기 경험으로.

이게 내가 한 전부다. 디자인 시안도 없고, 기획서도 없고, 와이어프레임도 없다.

뽀야가 바로 움직이기 시작했다. 그런데 그냥 시키는 대로 만든 게 아니라, 스스로 판단하고 제안하면서 진행했다.

🤖 뽀야가 한 첫 번째 판단 — "Next.js 말고 Astro로 하자"

내가 처음에는 Next.js를 언급했다. 그러자 뽀야가 이렇게 말했다:

"Astro가 더 나을 것 같아! 순수 콘텐츠 뷰어에는 Next.js가 오버스펙이야. Astro는 마크다운을 네이티브로 지원하고, 빌드하면 자바스크립트가 0이라 로딩이 빨라."

솔직히 Astro가 뭔지 몰랐다. 근데 이유가 합리적이라 "그래 그걸로 하자" 했다.

💡 학습 포인트: AI한테 기술 선택을 맡길 때

"Next.js로 해줘"처럼 기술을 지정하면, AI는 그걸 쓴다 — 더 좋은 선택지가 있어도. 대신 "콘텐츠 뷰어 만들어줘"처럼 목적을 말하면 AI가 목적에 맞는 기술을 골라준다.

결론: "뭘로 만들지"보다 "뭘 만들고 싶은지"를 말해라.

🤖 뽀야가 한 두 번째 판단 — 디자인 시스템을 직접 잡다

뽀야는 별도 지시 없이 뽀짝이의 성격(따뜻하고 친근한 봄베이 고양이)에 맞춰서 디자인 시스템을 직접 잡았다:

"뽀짝이 베이지 톤으로 갈게. 브런치는 화이트인데, 뽀짝이는 좀 더 따뜻한 느낌이 어울려."

구체적으로 뽀야가 잡은 디자인 토큰:

배경: 따뜻한 베이지 #FFFBF5 — 브런치의 화이트 대신 더 포근한 톤
포인트 컬러: 뽀짝이 보라색 #7B5EA7 — 포인트 색상이 사이트 전체 톤을 잡아줌
본문 폭: 680px — 브런치와 동일, 읽기에 최적화된 너비
이미지 확장: 960px — 본문보다 넓게 튀어나오는 브런치 스타일
폰트: Pretendard — 한국어에 가장 잘 어울리는 산세리프
글자 크기: 본문 16.5px, 행간 1.8 — 장문 읽기에 편한 설정

이 디자인 토큰들은 global.css 파일 하나에 전부 들어간다. 나중에 색상을 바꾸고 싶으면 이 파일에서 값만 바꾸면 사이트 전체가 바뀐다.

🤖 뽀야가 만든 프로젝트 구조 — "폴더 구조가 곧 사이트 구조"

뽀야가 만든 폴더 구조를 보면, 사이트가 어떻게 생겼는지 바로 감이 온다:

bbojjak-viewer/
├── src/
│   ├── content/              ← 📝 여기에 마크다운 넣으면 글이 된다
│   │   ├── lessons/          ←    수업 시리즈 (lesson-01.md ~ lesson-08.md)
│   │   └── worklog/          ←    업무일지 (episode-01.md ~ episode-03.md)
│   ├── layouts/
│   │   └── BaseLayout.astro  ← 🎨 모든 페이지의 공통 껍데기 (헤더, 푸터)
│   ├── pages/                ← 🌐 이 폴더 구조가 URL이 된다
│   │   ├── index.astro       ←    / (메인 페이지)
│   │   ├── lessons/
│   │   │   ├── index.astro   ←    /lessons (수업 목록)
│   │   │   └── [slug].astro  ←    /lessons/lesson-01 (개별 글)
│   │   └── worklog/
│   │       ├── index.astro   ←    /worklog (업무일지 목록)
│   │       └── [slug].astro  ←    /worklog/episode-01 (개별 글)
│   └── styles/
│       └── global.css        ← 🎨 디자인 시스템 전부 여기
└── public/images/            ← 🖼️ 이미지 파일

💡 학습 포인트: Astro의 "파일 기반 라우팅"

Astro에서는 pages/ 폴더 구조가 그대로 URL이 된다.

pages/index.astro → / (메인 페이지)

pages/lessons/index.astro → /lessons (수업 목록)

pages/lessons/[slug].astro → /lessons/lesson-01, /lessons/lesson-02...

[slug]는 "여기에 아무 이름이나 들어올 수 있다"는 뜻이다. 마크다운 파일명이 slug가 된다. 즉, 파일을 만드는 것 = 페이지를 만드는 것. 코드를 짤 필요가 없다.

뽀야가 이 구조를 알아서 잡은 이유를 설명해줬다:

"시리즈가 2개(수업/업무일지)니까 content 폴더도 2개로 나눴어. 나중에 시리즈 추가하고 싶으면 폴더 하나 더 만들면 돼."

URL 구조 — "파일명이 곧 주소"

마크다운 파일명을 어떻게 짓느냐에 따라 사이트 주소가 결정된다:

마크다운 파일사이트 URL보여지는 것lessons/lesson-01.md/lessons/lesson-01수업 #1 읽기lessons/lesson-08.md/lessons/lesson-08수업 #8 읽기worklog/episode-01.md/worklog/episode-01업무일지 #1 읽기

이 URL 패턴도 내가 직접 요청했다:

각 페이지 Url은 lesson-01 / episode-01 이런식이 될수있을까

lesson-01이면 수업 1편, episode-03이면 업무일지 3편. 누가 봐도 바로 안다.

마크다운 파일 하나의 구조:

각 글 파일은 이렇게 생겼다. 맨 위에 frontmatter(---로 감싼 부분)에 제목과 정보를 넣으면, 목록 페이지에 자동으로 뜬다:

---
title: "뽀짝이는 어디에 살아요?"
episode: 1
series: lessons
description: "OpenClaw 설치부터 첫 번째 에이전트 설정까지"
publishedAt: "2026-02-28"
---

여기부터 본문. 마크다운 문법 그대로.
이미지도 ![설명](이미지경로)로 넣으면 된다.

2단계: 첫 결과물 — "오, 이거 진짜 브런치 느낌인데?"

10분쯤 지나서 뽀야가 로컬 서버를 띄우고 스크린샷을 보내줬다. 진짜 브런치 감성이었다.

뽀야가 만든 결과물 상세:

메인 페이지 (/):

"안녕하세요, 뽀짝이입니다" 히어로 섹션에 뽀짝이 일러스트
수업 시리즈 카드 — "8편" 뱃지, 최신 글 제목 표시
업무일지 카드 — "3편" 뱃지
상단 고정 헤더에 수업/업무일지/소개 네비게이션

글 읽기 뷰 (/lessons/lesson-01):

상단에 시리즈 뱃지 "🐈‍⬛ 뽀짝이의 OpenClaw 수업 #1"
본문 680px 폭에 이미지만 960px로 확장 (브런치처럼 좌우로 튀어나옴)
글 끝에 "← 이전 편 / 다음 편 →" 네비게이션
발행일, 한줄 설명 표시

반응형 (모바일 390px):

카드가 세로로 스택
본문 여백 자동 축소
이미지 100% 폭
헤더 네비게이션 잘 들어감

뽀야가 말했다:

"모바일도 확인해봤어. 반응형 잘 되고 있어!"

따로 "반응형으로 만들어줘"라고 요청하지 않았는데, 알아서 반응형으로 만들고 모바일 스크린샷까지 찍어서 보여줬다.

3단계: Vercel 배포 — 내가 한 건 인증 코드 입력뿐

뽀야가 GitHub에 리포를 만들고 코드를 push한 다음, Vercel 배포를 시작했다.

"Vercel 배포하려면 로그인이 필요해. 지금 인증 코드 보내줄게!"

Vercel 웹사이트에서 인증 코드를 입력했다. 그러면 끝이다.

뽀야가 알아서 한 것들:

GitHub 리포 daht-mad/bbojjak-viewer 생성 (private)
코드 전체 push
Vercel CLI로 프로젝트 연결 — Astro 프레임워크 자동 감지
GitHub ↔ Vercel 자동 연동 설정 — 앞으로 git push만 하면 자동 재배포

✅ 뽀짝이의 서재 — Vercel 배포 완료!
🔗 https://bbojjak-viewer.vercel.app

• GitHub 연결됨 → git push하면 자동 재배포
• Astro 자동 감지 + 빌드 성공

여기까지 약 15분.

4단계: "이미지가 배경이랑 구분 안 돼!" — 느낌으로 디자인 수정

배포된 사이트를 폰으로 둘러보다가 하나 걸렸다.

본문에 이미지가 살짝 잘 안보이는데 배경색이랑 이미지배경색이랑 똑같아서!

이미지 카드 배경이 베이지인데, 페이지 배경도 베이지라서 경계가 보이지 않는 거였다.

뽀야가 바로 수정했다:

"이미지에 border + 그림자 넣었어. 이제 배경과 확실히 구분돼!"

수정 내용: 이미지에 연한 베이지 테두리(#E8DDD0)와 그림자를 추가. "border 1px solid 뭐뭐에 box-shadow 어쩌고"라고 말한 게 아니라, **"잘 안 보여"**라고 했을 뿐인데 알아서 원인을 파악하고 고쳐준 거다.

💡 학습 포인트: 디자인 피드백 주는 법

AI한테 디자인 수정을 요청할 때, CSS를 몰라도 된다. 오히려 느낌을 정확하게 말하는 게 더 효과적:

❌ "box-shadow를 0 4px 24px rgba(0,0,0,0.1)로 바꿔줘"

✅ "이미지가 배경이랑 구분이 안 돼"

✅ "글자가 너무 빡빡해 보여"

✅ "이건 너무 사무실 느낌이야, 좀 더 따뜻하게"

AI는 "왜 불편한지"를 알면 해결책을 스스로 찾는다.

5단계: "왜 1편만 있어?" — 서브에이전트가 나머지를 맡다

배포된 사이트에 수업 #1만 올라가 있었다.

그리고 이미 md파일있는걸 보여주기만하는거아니야? 왜 1편만있어?

맞는 말이었다. 프로토타입으로 1편만 넣어둔 거였다. 나머지 10편(수업 #2~#8, 업무일지 3편)은 마크다운에 frontmatter 추가, 이미지 경로 정리 같은 작업이 필요했다.

뽀야가 서브에이전트(별도의 AI 작업자)를 띄워서 이 작업을 맡겼다:

"서브에이전트 출동시켰어! 🐈‍⬛ 수업 #2~#8 + 업무일지 EP01~03 전편 이식 중이야. 완료되면 알려줄게!"

서브에이전트가 백그라운드에서 하는 작업:

10개 마크다운 파일에 frontmatter(제목, 번호, 설명, 발행일) 자동 추가
베터모드 CDN 이미지 URL → 로컬 이미지 경로로 치환
HTML 형식 이미지(<figure>)를 마크다운 형식(![](...))으로 변환
이미지 파일을 정리된 이름으로 복사
업무일지 목록/읽기 페이지 자동 생성
빌드 테스트 → git push → Vercel 자동 배포

이 작업이 백그라운드에서 돌아가는 동안, 나는 뽀야랑 계속 다른 대화를 이어갔다 — 바로 아래의 "구조 리팩토링" 논의.

6단계: "마크다운 넣으면 바로 보이면 안 돼?" — 근본적인 질문

여기서 근본적인 질문을 던졌다.

난 md파일만 있으면 바로 보여지는구조로 생각했는데..
그게 아니야? 뭔가 작업을 해야만 뷰어에보이는거야?

뽀야가 솔직하게 설명했다:

"맞아, 지금은 마크다운 복사 → frontmatter 추가 → CDN URL 치환 → 이미지 복사 → git push 과정이 필요해. 집사가 원하는 '파일 넣기 = 끝'은 아직 아니야."

뽀야가 두 가지 방향을 제안했다:

sync 스크립트: 스크립트 하나 실행하면 자동으로 전부 처리
Astro가 published 폴더를 직접 읽기: 복사 자체를 없앰

아 웅

이건 2번이 맞지. 근데 방법을 더 구체적으로 보여주고 싶어서, 기존에 만들어둔 다른 프로젝트를 참고시켰다.

/Users/dahtmad/Documents/DEV/_personal/workshop-new
이거함봐봐 이거는 이미지가 그냥 로컬에있는거 바로 뷰어해주거든?

뽀야가 그 프로젝트를 열어서 구조를 분석했다:

"아 이제 완전히 이해했다! workshop-new 방식: content/ 폴더에 마크다운 넣으면 끝. 이미지는 public/images/에 넣고 마크다운에서 참조. Next.js가 파일시스템 읽어서 자동으로 사이드바 + 페이지 생성. frontmatter 없어도 됨 — 파일명이 곧 제목."

그리고 물었다 — "이 구조를 그대로 가져올까?"

나는 한 가지만 강조했다.

사이드바디자인 싫어 지금 뽀짝이꺼 디자인이좋은데ㅠㅠ

뽀야가 바로 이해했다:

"알겠어! 디자인은 지금 뽀짝이 서재 그대로 유지하고, '마크다운 넣으면 바로 보이는' 구조만 가져오자."

최종 합의한 구조 변경:

항목Before (초기 구조)After (리팩토링)콘텐츠 위치src/content/에 복사 필요published/ 폴더를 직접 읽음frontmatter직접 작성 필수파일명에서 자동 추출이미지CDN→로컬 경로 치환 필요마크다운의 URL 그대로 사용새 글 추가5단계 작업파일 넣으면 끝디자인브런치 스타일그대로 유지 ← 이게 핵심

💡 학습 포인트: 기존 프로젝트를 "레퍼런스"로 쓰기

AI한테 "이 폴더 좀 봐봐"라고 하면, AI가 코드를 읽고 핵심 패턴을 파악한다. 나는 코드를 읽을 줄 모르지만, 결과물의 동작을 알고 있다 — "여긴 파일 넣으면 바로 되거든?"

이 패턴을 활용하면:

마음에 드는 프로젝트(남이 만든 것도 OK)를 AI한테 보여주고

"여기서 이 기능만 가져와줘"라고 하면

AI가 구조를 분석해서 좋은 부분만 현재 프로젝트에 적용

"이건 되는데 저건 안 돼"만 말할 수 있으면 충분하다.

✅ 30분 뒤 — 사이트가 떴다

Before vs After

항목BeforeAfter콘텐츠 위치커뮤니티 게시판에 흩어져 있음전용 사이트에 시리즈별 정리읽기 경험게시판 UI, 다른 글과 섞임브런치 스타일 몰입 읽기시리즈 모아보기불가능 (직접 검색)수업/업무일지 별도 목록 + 이전/다음 네비모바일 대응게시판 기본전용 반응형 디자인새 글 추가베터모드에 수동 게시마크다운 파일 넣으면 끝제작 소요 시간-30분내가 쓴 코드-0줄

결과물

🔗 뽀짝이의 서재: https://bbojjak-viewer.vercel.app

📂 최종 프로젝트 구조

리팩토링까지 마친 최종 구조. 핵심은 뽀짝이가 published/ 폴더에 마크다운을 넣으면 사이트에 바로 뜬다는 것:

bbojjak-viewer/
├── published/                    ← 📝 뽀짝이가 여기에 글을 넣는다
│   ├── lessons/                  ←    수업 시리즈
│   │   ├── lesson-01.md          ←    → /lessons/lesson-01
│   │   ├── lesson-02.md          ←    → /lessons/lesson-02
│   │   └── ...lesson-08.md       ←    → /lessons/lesson-08
│   └── worklog/                  ←    업무일지
│       ├── episode-01.md         ←    → /worklog/episode-01
│       ├── episode-02.md         ←    → /worklog/episode-02
│       └── episode-03.md         ←    → /worklog/episode-03
├── src/
│   ├── layouts/
│   │   └── BaseLayout.astro      ← 🎨 공통 껍데기 (헤더, 푸터)
│   ├── pages/                    ← 🌐 폴더 구조 = URL 구조
│   │   ├── index.astro           ←    / (메인)
│   │   ├── lessons/
│   │   │   ├── index.astro       ←    /lessons (목록)
│   │   │   └── [slug].astro      ←    /lessons/{파일명} (읽기)
│   │   └── worklog/
│   │       ├── index.astro       ←    /worklog (목록)
│   │       └── [slug].astro      ←    /worklog/{파일명} (읽기)
│   └── styles/
│       └── global.css            ← 🎨 디자인 시스템
└── public/images/                ← 🖼️ 이미지

초기 구조와의 차이: src/content/에 복사하는 단계가 사라졌다. Astro가 published/ 폴더를 직접 읽는다.

📮 뽀짝이가 새 글을 추가하는 법

뽀짝이(또는 누구든)가 새 글을 사이트에 올리려면:

1. 마크다운 파일을 만든다

published/lessons/lesson-09.md 또는 published/worklog/episode-04.md

2. 끝.

파일명이 곧 URL이 된다. lesson-09.md → bbojjak-viewer.vercel.app/lessons/lesson-09

git push하면 Vercel이 자동으로 빌드하고 배포한다. 수동 작업 0.

💬 이 과정에서 배운 것

레퍼런스를 말로 던져라 — "브런치처럼"이라는 한마디가 디자인 방향 전체를 잡아줬다. 긴 설명보다 "○○처럼"이 훨씬 강력하다.
기술 선택을 AI한테 위임해라 — Astro가 뭔지 몰랐지만, "콘텐츠 뷰어"라는 목적을 말하니 AI가 최적의 도구를 골라줬다.
기존 프로젝트를 참고시켜라 — "이 폴더 한번 봐봐"라고 하면 AI가 코드를 분석해서 좋은 구조만 가져온다. 코드를 읽을 줄 몰라도 된다.
디자인 피드백은 느낌으로 — "배경이랑 구분 안 돼", "사이드바 싫어ㅠㅠ" 같은 감정 표현이 오히려 정확하다.
"왜?"를 계속 물어라 — "왜 1편만 있어?", "왜 작업을 해야만 보여?" 이런 질문이 구조 자체를 더 좋게 바꿨다.
큰 작업은 서브에이전트에 — 10편 이식은 서브에이전트가 백그라운드에서 처리. 나는 그 사이에 구조 리팩토링을 논의했다.
처음부터 완벽하게 기획하지 마라 — "브런치처럼"으로 시작 → 결과물 보면서 피드백 → 점점 좋아지는 구조. 기획서 쓰는 시간에 사이트가 나온다.

📣 5/18일부터 22기 스터디가 시작됩니다!

텔레그램 대화만으로 브런치 스타일 웹사이트를 만들었다 — 30분, 코드 0줄