프로젝트 개요
실제 교회 운영을 위한 서비스로, 성도 대상 프론트 웹사이트와 관리자 재정/콘텐츠 관리 기능을 하나의 서비스로 구축했습니다. 모바일/PC 반응형 UI, 유튜브 설교 연동, 주보/공지/앨범 게시판, 관리자 인증 기반 장부 관리까지 운영 관점에서 완결된 구조로 구현했습니다.
주요 기능
모바일/PC 반응형 사용자 경험
메인 랜딩, 설교 목록/상세, 주보/공지/앨범 등 주요 화면을 모바일 우선으로 설계하고 PC 레이아웃을 별도 최적화해 실제 사용자 접속 환경에서 일관된 UX를 제공했습니다.
유튜브 설교 자동 동기화
교회 유튜브 채널 기준으로 설교 영상(제목/썸네일/일자/URL)을 API로 수집해 저장하고, 설교 페이지에서 카드형 목록 및 상세 재생 화면으로 제공했습니다.
재정/장부 관리자 기능
헌금/지출/성도 관리, 기간별 집계 대시보드, 입력/수정/삭제(소프트 삭제) 기능을 구현해 운영자가 실사용 가능한 재정 관리 화면을 제공했습니다.
콘텐츠 운영 기능
공지사항 에디터, 주보 PDF 업로드 및 뷰어, 교회앨범 다중 이미지 게시 등 비개발자 운영자를 위한 관리 기능을 백엔드 API와 연동해 구현했습니다.
운영 배포/보안 구성
프론트(Vercel) + 백엔드(EC2 Docker) + DB(Supabase PostgreSQL) 구조로 배포하고, Nginx 리버스 프록시/HTTPS 및 관리자 경로 보호/토큰 기반 인증을 적용했습니다.
담당 역할
서비스 아키텍처 설계
초기 FastAPI + RDS(MySQL) 기반에서 운영비/확장성을 고려해 Supabase(PostgreSQL)로 마이그레이션하고, 실제 운영을 위한 배포 구조를 재설계했습니다.
프론트엔드 구현
Next.js App Router 기반으로 사용자 사이트 및 관리자 화면을 구현하고, 모바일/PC 비율, 정보 밀도, 탐색 흐름을 반복적으로 개선했습니다.
백엔드 API/데이터 모델링
인증, 설교/주보/공지/앨범/재정 API를 설계하고 실데이터 기준으로 스키마 보정, 마이그레이션, 인덱싱/조회 최적화를 진행했습니다.
운영 안정화 및 보안
로그인 세션 만료, 관리자 접근 제어, API 에러 핸들링, 배포 파이프라인 점검 등 운영 중 발생한 이슈를 추적/복구하며 안정성을 높였습니다.
시스템 아키텍처
콘텐츠 제공과 관리 기능을 분리하되, 단일 서비스 경험으로 제공하는 구조를 채택했습니다.
주요 컴포넌트
Frontend (Next.js / Vercel)
사용자 페이지와 관리자 UI를 제공하며, API 호출/인증 상태 기반으로 동작합니다.
Backend (FastAPI / Docker / EC2)
인증, 장부 처리, 콘텐츠 CRUD, 유튜브 동기화 등 핵심 비즈니스 로직을 담당합니다.
Database (Supabase PostgreSQL)
성도/재정/콘텐츠 데이터 저장, 마이그레이션 후 운영 데이터의 일관성을 유지합니다.
Storage (Supabase Storage)
주보 PDF 및 이미지 리소스를 저장/전달하며, 게시판과 연동해 콘텐츠를 제공합니다.
요청 처리 흐름
배포 파이프라인
프론트/백엔드를 분리 배포하고 도메인 및 HTTPS를 적용한 운영형 구성입니다.
Frontend
GitHub main 브랜치 푸시 시 Vercel 자동 배포
Backend
GitHub Actions에서 EC2로 SSH 배포 후 Docker 재기동
Security
Nginx reverse proxy + HTTPS + 관리자 인증 기반 보호를 적용
성과 및 배운 점
- 실제 운영 도메인(seoulwoori.org) 기준으로 서비스 오픈 및 기능 개선 사이클을 반복
- 모바일/PC 각각의 레이아웃 이슈(이미지 비율, 카드 밀도, 상세 가독성)를 실사용 피드백으로 개선
- 재정 데이터 마이그레이션 과정에서 누락/중복/날짜 기준 문제를 정리하고 운영 대시보드 기준값 정합성 확보
- 프론트 자동배포(Vercel) + 백엔드 자동배포(EC2 GitHub Actions)로 배포 시간 단축 및 운영 효율 개선
프로젝트 정보
기술 스택
Frontend
Backend
DevOps & Cloud
프로젝트 스크린샷
PC 메인페이지 - 메인 비주얼과 주요 메뉴를 통해 첫 진입 사용자의 동선을 단순하게 구성했습니다.
모바일 메인페이지 - 터치 중심 그리드 카드 UI로 핵심 기능 접근성을 높였습니다.
모바일 설교페이지 - 설교 카드 중심 레이아웃과 썸네일/메타데이터 가독성을 최적화했습니다.
재정 대시보드 - 기간별 집계와 상세 내역을 한 화면에서 확인할 수 있는 운영형 UI를 구현했습니다.
헌금 입력 화면 - 성도 검색/분류/결제방식 기반 입력 폼으로 실제 운영 흐름에 맞춘 장부 입력을 지원합니다.