마산열린교회 홈페이지, 어떻게 만들었나 — 교회 홈페이지 제작 케이스 스터디

클라이언트 소개

경남 마산에 위치한 마산열린교회는 지역 사회와 함께 성장해 온 교회입니다. 활발한 소그룹 사역과 지역 봉사로 알려져 있지만, 온라인 존재감은 오래된 홈페이지 하나에 머물러 있었습니다. 모바일 대응도 전혀 없었고, 새가족이 방문했을 때 교회 정보를 한눈에 파악하기 어려운 구조였습니다.

담임 목사님과의 첫 미팅에서 이런 말씀을 들었습니다.

"우리 교회가 어떤 교회인지, 처음 오시는 분들이 미리 알 수 있었으면 합니다. 그리고 간사가 공지 하나 올리는 데 너무 많은 시간을 씁니다."

이 두 문장이 프로젝트의 방향을 결정했습니다.

해결해야 할 문제

프로젝트 착수 전 현황을 정리했습니다.

온라인 접근성 문제

• 기존 홈페이지는 PC에서만 정상 표시, 모바일 레이아웃 깨짐
• 네이버·구글 검색에서 교회 이름으로 검색해도 홈페이지가 상위 노출되지 않음
• 새가족이 예배 시간, 오시는 길을 찾기 위해 전화를 해야 하는 상황

행정 부담 문제

• 주보, 공지사항, 행사 안내를 담당 간사가 HTML을 수기로 작성해 업로드
• 설교 영상 유튜브 링크를 매주 수동으로 복사해 붙여넣기
• 새가족 등록 신청을 카카오톡 채팅방으로만 받아 누락 발생

접근 방법

목적 우선 설계

기술 스택을 먼저 고르지 않았습니다. 대신 이 질문을 먼저 답했습니다.

"새가족이 10분 안에 교회를 이해할 수 있는가?"

이 기준으로 와이어프레임을 잡았습니다.

1. 진입 즉시 교회 비전과 분위기 전달 (히어로 섹션)
2. 이번 주 예배 정보 바로 확인 (고정 위치)
3. 오시는 길 모바일 지도 한 번에 표시
4. 새가족 등록 폼 (이름·연락처만 받는 간단 구조)

기술 선택

Next.js 15 App Router를 선택한 이유는 명확합니다. 정적 생성(SSG)으로 페이지 로딩 속도를 극대화하면서, 공지사항처럼 자주 바뀌는 콘텐츠는 ISR(Incremental Static Regeneration)로 처리할 수 있기 때문입니다.

Supabase는 관리자 CMS로 활용했습니다. 목사님과 간사가 직접 Supabase Table Editor에서 공지사항을 작성하고, 설교 영상 유튜브 URL을 입력하면 홈페이지에 자동 반영됩니다. 별도 CMS 서버 없이, 이미 검증된 PostgreSQL 기반 플랫폼을 그대로 활용한 것입니다.

Cloudflare Pages는 배포 비용 절감을 위한 선택입니다. 교회 홈페이지는 대부분 정적 콘텐츠이기 때문에 글로벌 엣지 CDN으로 서빙하면 비용이 사실상 무료에 가깝습니다.

관리자 독립성 확보

가장 중요하게 생각한 부분이었습니다. 개발자 없이 운영팀이 직접 콘텐츠를 관리할 수 있어야 합니다. Supabase Table Editor를 Excel처럼 사용하도록 안내서를 함께 제작했고, 주요 작업(공지 작성·설교 등록)을 10분 안에 완료할 수 있도록 UI를 단순화했습니다.

핵심 기능 구현

예배 안내 자동 달력

예배 시간은 자주 바뀌지 않지만, 특별 예배(성탄절·부활절·특별 집회)는 수시로 추가됩니다. Supabase worship_schedule 테이블에 날짜·시간·장소·설명을 입력하면 홈페이지 예배 섹션에 자동 반영됩니다. 특별 예배는 배지로 표시되어 성도가 바로 인식할 수 있습니다.

설교 유튜브 자동 연결

설교 아카이브는 유튜브 영상 ID만 입력하면 썸네일·제목이 자동 표시됩니다. 이전에는 HTML을 수작업으로 편집했던 작업이 이제는 영상 URL 붙여넣기 한 번으로 끝납니다.

새가족 등록 폼

이름, 연락처, 방문 경로(검색/지인 소개/기타) 세 가지만 받는 최소 폼입니다. 제출 즉시 Supabase에 저장되고, Resend를 통해 담임 목사님께 이메일 알림이 발송됩니다.

오시는 길 (카카오 지도 연동)

모바일에서 지도 앱으로 바로 연결되는 '길 찾기' 버튼을 필수로 포함했습니다. 처음 방문하는 분들이 교회를 찾아오는 마지막 허들을 없앤 기능입니다.

결과

수치보다 더 인상 깊었던 피드백은 목사님의 이 말씀이었습니다.

"이제는 주일 예배 전에 교회 홈페이지를 먼저 보고 오시는 새가족들이 생겼어요. 교회를 미리 알고 오시니까 첫 만남이 훨씬 자연스러워졌습니다."

기술이 사람의 첫 만남을 더 따뜻하게 만든다는 것을 다시 한번 경험한 프로젝트였습니다.

배운 점

교회 홈페이지에서 가장 중요한 것은 화려한 디자인이 아닙니다.

'오시는 길'과 '예배 시간'이 모바일에서 즉시 보이는 것.

이것 하나만 잘 되어도 새가족에게 실질적인 도움이 됩니다. 첫 버전은 이 두 가지에 집중했고, 나머지 기능은 운영해보면서 실제로 필요한 것들을 추가했습니다. 완벽한 설계보다 빠른 출시와 지속적인 개선이 더 효과적이었습니다.

또 하나: 관리자 독립성 확보가 프로젝트의 진짜 완성입니다. 개발자가 없으면 아무것도 못 하는 시스템은 진짜 완성된 게 아닙니다. 운영팀이 스스로 운영할 수 있을 때 프로젝트가 완성됩니다.

이런 서비스가 필요하다면

교회 홈페이지 제작에 관심이 있으시다면 아래 링크에서 상담을 신청해 주세요.

교회 홈페이지 상담 신청 →