미담뉴스 모으는 사이트 클코로 만들기

소개

일단 같이 스터디하시는 분들과 스터디장님께 죄송, 스스로에게 미안한 마음입니다.

개인적으로 공부하고 있는 분야가 있어서 스터디에 적극적으로 참여를 못했습니다. 스터디를 제대로 못듣고 다시보기도 제대로 못봐서 내용 파악도 제대로 안 되었습니다.

괜히 찔려서 변명이 길었습니다! 그래도 이제까지 해온 것 사례게시글 올려봅니다.

만들고 싶은 것은 미담(긍정)뉴스 웹사이트입니다.
1. 뉴스가 워낙 자극적인 것만 보여주다보니, 세상이 그리 흉흉(?)하지 않다는 것을 보여주고 싶어서 뉴스나 SNS에서 떠도는 미담을 모아서 뉴스사이트를 만들고 싶었습니다. 사건사고 많은 세상사에서 잠깐 쉬어가는 느낌이랄까요.
2. 기본 방향은 미담뉴스와 요약내용을 블록형태로 표출합니다. 눌러서 "좋아요" 등도 표현할 수 있고, 각 분야별 카테고리를 나눕니다.(선행, 사회, 동물, 환경, 기타 등)
3. 그리고 나중에는 SNS 자동게시하거나, 사회공헌과 연계하는 등의 흐름도 생각했습니다.(일단 꿈이라도 거창하게요 ㅎㅎ)
우선 1주차에 만들어주신 사이트에서 클로드코드와 bkit을 설치했습니다! 한참 헤매면서 경로 설정하고 어쩌고 하느라 시간이 오래 걸렸는데, 정말 빠르게 설치하고 진행합니다. (감사드립니다.)

예전에 다른 오프라인 모임에서 Lovable로 만들어본 껍데기(?)가 있습니다. 우선 이 사이트를 주면서 여러 가지 개선점을 도출하고 만들어 달라고 합니다. 디자인은 괜찮다고 칭찬을 하네요. 고마워 클코ㅎㅎ

  지금 상태 진단

  현재 HTML은 이미 꽤 완성도가 높아요:
  - 디자인/레이아웃 ✅
  - 카드 구조 ✅
  - 응원 버튼 (시각적) ✅
  - 뉴스 데이터가 코드 안에 하드코딩 → 이게 지금의 한계

  ---
  추천 로드맵

  1단계 (지금)  → HTML 완성 + Vercel 배포    [개발 경험 불필요]
  2단계 (나중)  → Next.js + DB 연결          [약간의 학습 필요]
  3단계 (나중)  → 관리자 페이지 + 크롤링     [본격 개발]

  ---
  1단계에서 할 것

  현재 HTML에서 보완할 것들:
  1. 뉴스 데이터를 외부 JSON 파일로 분리 — 코드 건드리지 않고 뉴스만 추가 가능하게
  2. 카테고리 필터 추가 (선택)
  3. Vercel에 무료 배포

뉴스 끌어오기! 껍데기만 있고 정작 뉴스를 끌어오는 작업이 어렵더라구요. 예전에 n8n 스터디를 재미있게 해서 n8n으로 어찌저찌 해보려고 했는데, 지금은 클로드 코드에게 해달라고 합니다. 저는 pro요금제라 아무래도 사용량을 계속 확인하게 됩니다.

● 이미 20개 뉴스가 성공적으로 추가됐는지 확인해볼게요.

● Bash(python -c "
      import re…)
  ⎿  �� ���� ��: 26��
     ID ����: 1 ~ 9
     … +6 lines (ctrl+o to expand)

● 26개 뉴스 추가 성공! 다만 두 가지 문제가 있어요:
  1. 이미지가 전부 Google 기본 썸네일로 같은 이미지 → 실제 기사 이미지 추출 필요
  2. 요약이 너무 짧음 → 실제 기사 페이지에서 추출 필요

  실제 기사 페이지를 방문해서 이미지와 내용을 제대로 가져오도록 개선할게요.

  Read 1 file (ctrl+o to expand)

● Google News 링크가 JavaScript 리다이렉트라서 직접 기사 페이지에 못 도달하는 게 문제예요. 실제 기사 URL을 추출하는 로직으로 수정할게요.

다만 현재 안되는 언론사에 계속 시도하면서 토큰을 엄청 썼네요. 그냥 일단 사전지식 없는채로 부딪치다보니 조금 한계가 느껴지네요!

잠깐 멈췄어요. 어떻게 진행할까요?

  지금까지 확인된 상황을 정리하면:

  ┌─────────────────┬────────────────────────────────────────────────────────┐
  │      방법       │                          결과                          │
  ├─────────────────┼────────────────────────────────────────────────────────┤
  │ Google News RSS │ 제목/날짜 수집 ✅, 이미지/요약 추출 ❌ (JS 리다이렉트) │
  ├─────────────────┼────────────────────────────────────────────────────────┤
  │ Naver 뉴스 검색 │ JS 렌더링이라 스크래핑 불가 ❌                         │
  ├─────────────────┼────────────────────────────────────────────────────────┤
  │ 연합뉴스 RSS    │ 테스트 중단됨                                          │
  └─────────────────┴────────────────────────────────────────────────────────┘

  현실적인 선택지 두 가지:

  A. 지금 당장 작동하는 버전
  - 제목/날짜는 Google News에서 자동 수집
  - 이미지는 카테고리별 고품질 Unsplash 사진 자동 배정
  - 요약은 뉴스 제목 기반으로 생성
  - → 지금 바로 실행 가능

  B. 제대로 된 버전 (API 키 필요)
  - Naver 검색 API 무료 등록 (developers.naver.com)
  - 실제 기사 이미지 + 요약 포함
  - → 5분 등록 후 사용 가능

  어떻게 하시겠어요?

  ─────────────────────────────────────────────────
  📊 bkit Feature Usage
  ─────────────────────────────────────────────────
  ✅ Used: Read/Edit (크롤러 개선), Bash (RSS/URL 테스트)
  ⏭️ Not Used: /pdca, agents
  💡 Recommended: Naver API 키 등록 후 B 방식 진행

조금 더 진행해보고 진행상황 공유하겠습니다! 해보고 일단 빠르게 vercel로 배포 후 차근차근 수정해나가는 방향으로 가보려고 합니다.
공통강의와 스터디도 다시보기하면서 해보겠습니다. 스터디장님과 치얼업 해주시는 아루나님께 감사드립니다.

📣 24기 대기자 모집이 시작되었습니다!

미담뉴스 모으는 사이트 클코로 만들기

소개

뉴스레터 무료 구독