소개
요즘 유행하는 바이브코딩으로 앱 출시가 가능한지 시도해 보고 싶었고 첫번째 주제로
국내 커뮤니티 사이트를 모아 인기 게시글을 한곳에서 볼 수 있는 앱을 만들어 보고 싶었습니다.
시작은 정확하게 26년 2월 28일에 저녁에 시작하였습니다.
진행 방법
초반에는 Git Bash + Claude code(claude code pro 구독)를 사용하다가 후반부에는 코드 구조가 보고싶어 Cursor(무료)를 사용 했습니다.
이미지가 필요할 때에는 클로드코드에게 필요한 프롬프트를 요청하고 chargpt(무료)를 사용하여 이미지를 뽑아 냈습니다.
웹페이지는 cloudflare + github을 활용하였고, 둘 다 설정을 할 줄 몰라 클로드에게 계속 사용 방법을 문의 하여 진행하였습니다. 중간에 막히는 경우 스크린샷을 찍어 폴더에 넣고, 클로드에게 해당 폴더를 읽히게 한 다음 설정 방법을 익혔습니다.
예) D:\document\img 폴더의 screenshot1.jpg 파일을 읽어 어디에서 설정 해야 하는지 알려줘
26/02/28에 첫 시작한 프롬프트
정확하게 이 프롬프트로 시작한건 아니지만 기록을 보니 어느정도 유사한 형태를 가지고 있습니다. 처음 프롬프트에서 정적 빌드에 대한 요구사항이 있진 않았으나, 커뮤니티 통합 블로그를 만들고 싶다는 목적과 함께 요구사항을 나열하여 작성했습니다.
아래 프롬프트들은 날짜별로 클로드 메모리에 저장된 프롬프트 전문 입니다.
#### 1. 프로젝트 초기 설정 (2026-02-28)
```
Next.js 16 App Router로 한국 커뮤니티 통합 블로그를 만들고 싶어.
요구사항:
1. 17개 커뮤니티 사이트를 크롤링해서 인기 게시글 수집
2. 정적 빌드 (output: 'export')로 DB 없이 JSON 파일 기반
3. 크롤링 스크립트는 별도로 실행 (scripts/crawl.ts)
4. BaseCrawler 추상 클래스를 만들고, 각 사이트별로 상속받아 구현
5. Cheerio로 HTML 파싱
6. 사이트 필터, 무한 스크롤 기능 포함
프로젝트 구조를 설계해줘.
```
#### 2. 크롤러 다중 페이지 확장 (2026-02-28)
```
현재 각 크롤러가 1페이지만 크롤링하는데, 5페이지까지 확장하고 싶어.
요구사항:
1. 모든 크롤러에 for 루프로 5페이지 크롤링
2. 페이지 간 1초 딜레이 (레이트리밋 대응)
3. 429 에러 시 10초 대기 후 재시도
4. 빈 페이지 감지 시 조기 종료
5. 각 사이트의 URL 페이징 패턴에 맞게 구현
- ?page=, &page=, &p=, &pg= 등
14개 크롤러를 한 번에 수정해줘:
- slrclub, theqoo, ruliweb, mlbpark, ilbe, bobaedream
- natepann, cook82, etoland, humoruniv, gasengi
- hygall, todayhumor, inven
```
#### 3. UI 색상 시스템 개선 (2026-03-12)
```
Google Stitch처럼 시각적으로 개선하고 싶어.
요구사항:
1. 17개 커뮤니티마다 고유한 색상 테마 부여
- 클리앙: 파랑, 더쿠: 핑크, 루리웹: 보라 등
2. 라이트/다크 모드 모두 지원
3. 커뮤니티 이름을 색상 배지로 표시
4. 메트릭에 아이콘 추가 (👁️ 조회수, 💬 댓글, ❤️ 좋아요)
5. 정렬 기능 추가 (인기순, 댓글순, 최신순)
lib/utils/site-colors.ts 파일을 만들고,
PostCard와 PostList 컴포넌트를 개선해줘.
```
#### 4. 날짜 파싱 버그 수정 (2026-03-02)
```
클리앙 크롤러에서 모든 게시글의 날짜가 크롤링 시점으로 표시돼.
문제:
- HTML에는 "13:12\n\t\t\t\t\t\t2026-03-02 13:12:12" 형식으로 되어 있음
- 기존 parseDate 함수가 이 형식을 처리 못함
lib/crawlers/clien-crawler.ts의 parseDate 함수를 수정해서
정규식으로 "YYYY-MM-DD HH:MM:SS" 부분을 추출하도록 고쳐줘.
```
#### 5. Pull-to-Refresh 버그 수정 (2026-03-05)
```
Pull-to-Refresh가 스크롤 중간에서도 트리거되는 버그가 있어.
문제:
- 무한 스크롤 중에도 새로고침이 발생
- 의도치 않게 최상단으로 이동
components/pull-to-refresh.tsx를 수정해서:
1. touchMove 중에도 실시간으로 scrollTop 체크
2. scrollTop !== 0이면 상태 초기화
3. overscrollBehavior: 'contain' 추가
최상단에서만 작동하도록 고쳐줘.
```
#### 6. 광고 구현 (2026-03-15)
```
수익화를 위해 광고를 붙이고 싶어.
요구사항:
1. 웹: Google AdSense 자동 광고
- app/layout.tsx에 스크립트 추가
- 환경 변수로 클라이언트 ID 관리
2. 안드로이드: AdMob 하단 배너 광고
- lib/admob.ts 파일 생성
- 실제 광고 단위 ID 사용
3. 설정 가이드 문서 작성
- ADSENSE-SETUP.md
- ADMOB-SETUP.md
구현해줘.
```Tip: CLAUDE.md 파일에는 "작업 후 항상 기본적으로 작업 내용을 요약해서 md파일을 갱신하세요" 명시를 해두었습니다.
그리고 계획을 세운 이후에는 할 일을 TODO.md 파일로 생성하여 해야할 todo list를 작성하도록 지시 했습니다.
그리고 애드몹이나, 애드센스, cloud flare, github 설정의 경우 모두 처음 해본 것이어서 두고두고 내용 확인이 필요한 것들도 모두 세팅 가이드를 md파일로 생성 해달라고 하여 중간중간 참고를 하였습니다.
생성된 md 파일들 그리고 todo.md 파일 내용
요구 사항에 따라 TODO.md 파일에는 해야할 일을 나열하고, 완료가 된 부분은 스스로 체크를 할 수 있게 되었습니다. 현재는 거 의 완료된 상태여서 모두 체크가 되어있습니다.
TODO.md 파일로 관리하여, 토큰이 중간에 모두 고갈 되더라도 이후 TODO.md 파일을 참고하여 작업을 지시하면 체크된 내용을 토대로 작업을 잘 이어갈 수 있었습니다.
결과와 배운 점
결과: 안드로이드 개발자 등록을 마치고 보니, 14일동안 12명의 대상자들에게 테스트를 받아야 하는 내용을 처음 알았습니다. 여기에서 거의 맨붕이 왔었는데 이것은 지인의 추천으로 외부 업체를 이용 하여 해결 하였습니다. 23년을 기준으로 이전에 만든 개발자 계정은 저 조건이 없다고 하는데.. 조금 아쉬운 정책이라는 생각이 들었습니다.
이 기간이 아니었다면 아마 하루에 1~2시간씩 3일이었으면 앱을 출시 했을지도 모른다는 생각을 하게 되었습니다.
그리고 요즘 유행하는 바이브코딩이 가능하다는 것도 알게 된 유익한 시간이었던 것 같습니다.
아래는 출시된 앱 결과 입니다.
앱 다운로드: https://play.google.com/store/apps/details?id=com.communityblog.app
