방문자는 Next.js와 TypeScript 공개 컴포넌트에서 Firebase SDK로 설교·소식·갤러리를 조회합니다. 관리자는 Authentication 로그인 후 에디터로 글을 편집하고 Canvas로 사진을 압축해 Storage에 업로드합니다. 콘텐츠와 이미지 URL은 Firestore 문서에 저장됩니다. API 라우트는 YouTube 라이브와 RSS 최신 영상을 조회하며 코드상 라이브 영상을 설교 문서로 추가하는 경로가 있습니다.
Next.js 공개 페이지
홈과 예배·설교·소식·갤러리·사역·위치 안내를 App Router로 구성하고 CSS Modules로 반응형 화면을 구현했습니다.
관리자 CMS · 콘텐츠 CRUD와 에디터
콘텐츠 데이터와 컴포넌트 props를 타입으로 정의하고 에디터를 활용한 게시물 관리 화면을 구성했습니다.
Firebase · YouTube 연동
Authentication으로 로그인하고 Firestore에 문서를, Storage에 이미지를 저장합니다. 서버 라우트에서 YouTube 라이브 상태와 RSS 최신 영상 정보를 조회하는 코드가 있습니다.
기술 선택 이유
Next.js · TypeScript
페이지 라우팅과 서버 API를 같은 프로젝트에서 구성하고 콘텐츠·props·상태에 타입을 적용했습니다.
Firestore · Storage
설교·소식·갤러리는 NoSQL 컬렉션의 문서로 관리하고 업로드 파일은 Storage에 분리해 저장합니다.
CSS Modules · Jodit 에디터
컴포넌트별 스타일을 관리하고 운영자가 에디터에서 게시물 본문을 작성할 수 있도록 구성했습니다.
DB · API · 인프라 구조
NoSQL 문서 구조
sermons·news·gallery 컬렉션에서 콘텐츠를 관리합니다. 공개 컴포넌트는 날짜나 생성 시각으로 정렬한 자료를 조회하고, 관리자는 같은 문서를 편집합니다.
이미지 압축·업로드
브라우저 Canvas로 이미지 너비를 최대 1000px로 조정하고 JPEG 품질 0.7로 변환하는 유틸리티를 사용합니다. 업로드한 파일의 다운로드 URL을 문서에 저장합니다. 실제 압축률은 이미지마다 달라집니다.
라이브 조회 API
/api/live에서 YouTube 라이브 페이지와 RSS 피드를 조회하고 60초 재검증을 사용합니다. 방송 중인 영상은 기존 URL을 조회한 뒤 설교 문서로 추가하는 코드가 포함되어 있습니다.
핵심 처리 흐름
01. 관리자 로그인과 콘텐츠 선택
Firebase Authentication 로그인 후 설교·소식·갤러리 관리 화면을 선택합니다.
02. 본문 편집과 사진 업로드
콘텐츠를 입력하고 사진을 압축·업로드합니다. 갤러리는 여러 사진과 대표 이미지 선택을 지원합니다.
03. 문서 저장과 공개 조회
Firestore 문서에 콘텐츠와 이미지 URL을 저장하고 공개 페이지에서 목록·상세로 표시합니다.
04. 라이브와 최신 영상 구분
라이브 상태를 확인하고 방송 중이 아니면 RSS에서 최신 영상 ID를 가져오는 분기를 구성했습니다.
가장 어려웠던 문제와 해결
비방송 시간의 영상 선택
문제
라이브 주소가 방송 중이 아닐 때 오래된 영상을 가리킬 수 있어 최신 영상 선택을 구분할 필요가 있었습니다.
해결 방법
라이브 상태를 먼저 확인하고 비방송 상태에서는 RSS 피드의 최신 영상 ID를 사용하는 경로를 구성했습니다.
검증 결과
코드에서 라이브·비방송 분기를 확인했습니다. 이번 캡처에서는 운영 DB에 쓰기가 발생할 수 있는 라이브 조회 API를 호출하지 않았습니다.
운영자가 올리는 사진 관리
문제
원본 사진을 그대로 업로드하면 크기와 용량이 제각각이라 파일 관리가 어려울 수 있습니다.
해결 방법
업로드 전 최대 너비와 JPEG 품질을 조정하는 압축 유틸리티와 사용량 확인 기능을 구성했습니다.
검증 결과
압축·업로드 경로를 구현했습니다. 업로드 시간이나 저장 공간 감소율은 별도로 측정하지 않았습니다.
내가 직접 구현한 것
의뢰 제작과 공개 화면 구현
교회 공식 웹사이트의 예배·설교·소식·갤러리·안내 화면을 제작했습니다.
콘텐츠 관리 기능
게시물 관리와 에디터, 사진 압축·업로드, 대표 이미지 선택 기능을 구현했습니다.
외부 영상 연동
YouTube 라이브 상태와 최신 영상을 구분하는 서버 API를 구성했습니다.
03 / RESULTS & VALIDATION
결과/검증 — 그래서 무엇이 좋아졌는가
실제 서비스 적용 여부
https://www.gnhc.kr/ 도메인에서 운영되는 의뢰 제작 프로젝트입니다.
의뢰 결과물의 실제 서비스 적용
교회 공식 도메인에 공개 페이지와 콘텐츠 제공 화면을 적용한 프로젝트입니다.
콘텐츠 운영 기능 마련
관리자가 설교·소식·갤러리를 편집하고 사진을 관리할 수 있는 기능을 구현했습니다. 콘텐츠 갱신 시간이나 방문자 증가 수치는 제시하지 않습니다.
검증 방법과 근거
TypeScript 소스와 관리자·Firebase·이미지 유틸리티·영상 연동 코드를 검토했습니다. 2026년 10월 7일 공개 홈페이지와 갤러리의 HTTP 200 응답을 확인하고 데스크톱 1440×1000·모바일 390×844 화면을 캡처했습니다. 관리자 쓰기와 라이브 자동 등록 작업은 실행하지 않았습니다.
