AI-First Global News Insight (Newspapler) 프로젝트 보고서
1. 프로젝트 개요

Newspapler는 AI 기자(AI Reporter) 시스템과 1인 편집자(운영자)가 협업하여 운영하는 혁신적인 글로벌 온라인 신문 플랫폼입니다. 뉴욕타임즈(NYT) 스타일의 정갈하고 미니멀한 레이아웃(Serif 폰트, 그리드 레이아웃, 미니멀 라인)을 채택하였으며, 한국어와 영어 다국어(Multi-language) 기사를 동시에 제공하는 것을 목표로 기획되었습니다.

2. 최초 사이트 개발 기획 과정

기획의 핵심은 "AI를 단순한 도구가 아닌 전문성을 갖춘 기자(Persona)로 활용하는 것"이었습니다. 초기 guide.md와 ask.md에 정의된 핵심 기획 과정과 기능은 다음과 같습니다.

1. AI 기자 등록 시스템 (Persona)

   • 관리자가 다양한 전문 분야를 가진 AI 기자를 생성합니다. (예: 역사 전공, 미디어 비평 전문 등)

   • 기자의 학위, 장점, 기사 작성 톤(존댓말 배제, 전문적 어조 등)을 프롬프트 형태로 DB에 저장하여, 기사 생성 시 해당 페르소나에 맞춰 글이 작성되도록 기획했습니다.

2. 자동화된 기사 작성 워크플로우 (Core Engine)

   • 관리자가 기사 주제(초안, 백그라운드 데이터 URL, 섹션 등)를 작성하여 큐(Queue)에 등록합니다.

   • 선택된 AI 기자가 스크래핑 및 요약을 통해 맥락을 파악하고 한국어/영어 기사를 자동 생성하여 대기열(Pending)에 저장합니다.

   • 편집자는 생성된 기사를 검토(Review)하고 위치(메인 헤드라인, 사이드바 등)를 지정하여 승인 및 배포합니다.

3. UI/UX 디자인 및 수익화 기획

   • 디자인 가이드: NYT 스타일의 헤더, 로고 폰트, 날짜, 반응형 핀터레스트(Masonry) 스타일의 기사 그리드.

   • PWA & 모바일: 무한 스크롤(Infinite Scroll), 앱과 유사한 하단 네비게이션, 속보 푸시 알림.

   • 수익화 전략(광고): 네이티브 인피드 광고, 본문 스마트 광고, 고정형 사이드바 등 다양한 광고 배치 기획.

   • 감성적 기능: '오늘의 시(Poem of the Day)' 모달과 같은 감성적이고 우아한 요소 배치.

3. 기술 스택 (Tech Stack)

최신 웹 기술과 서버리스 백엔드, AI API를 결합한 스택을 사용했습니다.

• 프레임워크 (Frontend): Next.js 16.1.6 (App Router), React 19, TypeScript

• 스타일링 (CSS): Tailwind CSS v4, clsx, tailwind-merge

• 애니메이션 & 아이콘: Framer Motion, Lucide React

• 리치 텍스트 에디터: Tiptap (Headless Editor)

• 백엔드 및 데이터베이스 (BaaS): Supabase (PostgreSQL), @supabase/ssr, @supabase/supabase-js

• AI 연동: Google Generative AI (Gemini API / @google/generative-ai)

• 유틸리티: date-fns (날짜 처리), dompurify (XSS 방어)

4. 데이터베이스(Database) 구조

Supabase (PostgreSQL) 기반으로 설계되었으며, 주요 엔티티가 밀접하게 연결되어 있습니다.

1. articles (기사)

   • 기사의 핵심 데이터 (한국어/영어 제목, 요약, 본문).

   • 상태(status), 생성일, 작성자(author), 연결된 카테고리(category_id), AI 메타데이터 등.

2. categories (카테고리)

   • 기사 분류 체계. 한국어/영어 이름, 슬러그(slug), 노출 순서 및 레이아웃 설정 포함.

3. ai_reporters (AI 기자)

   • AI 페르소나 정보. 이름(nickname), 전문분야(specialty), 학위(degree), 작성 스타일(writing_style).

4. article_generation_queue (기사 생성 대기열)

   • 관리자가 요청한 기사 초안 큐. 배경 URL(background_urls), 대상 기자(reporter_id), 대상 카테고리(category_id), 처리 상태 및 생성된 기사 참조(result_article_id).

5. homepage_slots (홈페이지 슬롯)

   • 홈 화면의 레이아웃 배치를 관리하는 슬롯 정보 (메인 헤드라인, 추천 기사 등). articles와 연결됨.

6. site_settings (사이트 설정)

   • 사이트 다국어 이름, 메타데이터, 광고 설정(Google Adsense), 로고 및 폰트 설정 등을 단일 레코드로 중앙 통제.

7. 기타 부가 기능 테이블

   • poems: '오늘의 시' 콘텐츠 관리.

   • inquiries: 사용자 고객 문의 내역.

   • subscribers: 뉴스레터 등 구독자 이메일 목록.

   • pages: 정적 페이지(회사 소개, 이용약관 등) 관리.