💡 한 줄 요약
구글 문서에 모아둔 수십 편의 소설·우화 원고를 통째로 붙여넣으면, 정규식 규칙에 따라 회차별 카드로 자동 분리하고 맞춤 서식과 원클릭 복사 기능까지 제공하는 전용 연재기 웹앱 제작 바이브 코딩 노하우를 소개합니다!
✍️ 수십 편의 원고, 일일이 블로그에 올리기 힘드셨나요?
구글 문서(Google Docs)나 메모장에 모아둔 수십 회차의 연재 소설이나 이솝우화 원고를 블로그에 발행할 때, 매번 한 편씩 긁어서 복사하고 블로그 에디터에서 글자 크기, 줄간격, 대화문 서식을 맞추는 작업은 매우 번거롭고 시간이 오래 걸립니다.
특히 [원전 그림동화] 011. 오누이 이야기처럼 규칙적인 헤더를 가진 긴 글 묶음을 다룰 때, 사람의 손으로 자르다 보면 내용이 누락되거나 순서가 뒤섞이는 실수가 생기기도 쉽답니다.
이 문제를 완벽하게 해결하기 위해 바이브 코딩(Vibe Coding)으로 '텍스트 자동 분리 + 카드 넘김 뷰어 + 서식 최적화 + 복사 후 다음 카드 자동 이동' 기능을 갖춘 단일 HTML 웹앱을 직접 구축했습니다!
📊 수동 복사 발행 vs 바이브 코딩 연재기 웹앱 비교
| 구분 | 기존 수동 블로그 발행 방식 | 바이브 코딩 자동 분리 연재기 (추천 ⭐️) |
|---|---|---|
| 원고 분할 작업 | 구글 문서에서 한 편씩 드래그 & 복사하여 수동으로 잘라내기 | 전체 텍스트 통째 붙여넣기 시 0.1초 만에 50~100편 자동 분할 |
| 서식 & 레이아웃 | 블로그 에디터에서 폰트, 크기(17px), 행간(1.9배) 매번 수동 수정 | 모바일 최적화 글꼴, 대화문 포인트 라인, 제목 배지 자동 적용 |
| 발행 속도 & 연속성 | 어디까지 올렸는지 체크하며 창을 번갈아 확인 (1편당 3~5분) | '복사 후 다음 이동' 버튼으로 연속 발행 완료 (1편당 5초) |
💡 이 웹앱이 가진 4가지 핵심 스마트 기능
- 스마트 헤더 정규식 감지:
[원전 그림동화] 011. 제목,# 011,011. 제목등 다양한 형태의 제목 패턴을 스스로 감지하여 깔끔하게 회차별 청크로 분할합니다. - 카드 넘김 & 빠른 탭 네비게이션: 상단에
011,012,013회차 바로가기 탭이 생성되고, 좌우 방향키로 카드를 넘기며 검토할 수 있습니다. - 가독성 최적화 인라인 스타일 렌더러: Noto Sans / Noto Serif 글꼴 선택, 17px 모바일 최적 크기, 1.9배 여유로운 행간, 대화문(큰따옴표) 좌측 포인트 라인을 HTML에 인라인으로 자동 주입합니다.
- 연속 복사 & 자동 카드 전환 (Auto-Advance):
[📋 HTML 복사 후 바로 다음 카드로 이동 ➔]버튼을 누르면 클립보드 복사와 동시에 다음 이야기 카드로 화면이 즉시 넘어갑니다.
💡 초보자를 위한 바이브 코딩 실전 사용 예시
✨ [복사용] 다회차 원고 분리 & 블로그 변환기 웹앱 제작 프롬프트
"너는 웹 프론트엔드 및 텍스트 파싱 전문 개발자야. 별도의 백엔드 설치 없이 웹 브라우저에서 단 하나의 HTML 파일로 실행되는 [소설·우화 다회차 카드 분리 & 원클릭 블로그 복사기 웹앱]을 만들어 줘.
[핵심 요구사항]
1. 좌측 텍스트 입력창에 수십 편의 원고를 통째로 붙여넣으면, 정규표현식 패턴(예: [원전] 011. 제목 등)을 감지하여 이야기 단위로 자동 분할할 것.
2. 분할된 각 이야기는 우측에 '카드 넘김 뷰어'와 상단 '회차 바로가기 탭'으로 깔끔하게 렌더링할 것.
3. 본문 글꼴(Noto Sans/Serif), 글자 크기(16~18px), 줄간격(1.8~2.0배), 대화문 왼쪽 포인트 라인 서식 옵션을 제공하고, 이를 반영한 완성형 인라인 HTML 코드를 생성할 것.
4. [HTML 복사 후 바로 다음 카드로 이동] 버튼을 클릭하면 클립보드에 HTML이 복사됨과 동시에 다음 회차 카드로 자동 전환되게 할 것.
5. Tailwind CSS CDN을 활용해 모던하고 직관적인 2단 레이아웃의 단일 index.html 코드를 작성해 줘."
📋 웹앱 제작 및 활용 3단계 순서
- 위 프롬프트를 제미나이(Gemini)나 클로드(Claude)에 입력하여 단일 HTML 코드를 생성받습니다.
- 메모장에 코드를 붙여넣고
story_splitter.html로 저장한 뒤 브라우저로 실행합니다. - 구글 문서의 전체 원고를 복붙한 뒤 [HTML 복사 후 다음 이동]을 누르며 구글 블로그(Blogger)에 빛의 속도로 게시하세요!
🎯 에디터 한줄평
단순 반복적인 '복사-붙여넣기' 노동을 나만의 맞춤형 도구로 자동화하는 것, 이것이 바로 바이브 코딩이 가져다주는 진정한 업무 생산성의 혁신입니다!
💡 블로그 포스팅 팁
구글 블로그(Blogger) 글쓰기 화면에서 'HTML 보기(<>)' 모드로 전환한 뒤 붙여넣으면, 설정한 폰트와 행간 서식이 모바일과 PC 화면에서 100% 동일하게 완벽 렌더링됩니다.
