가 가까운 교회 Gakkaun Church 시연 사이트 →

Gakkaun Church · 김포 운양동

마음에 가까운,
일상에 가까운 교회

김포 운양동에 위치한 대한예수교 장로회 가까운 교회 공식 홈페이지를 정적 사이트로 제작했습니다. 36개 라우트, 65개 정적 페이지, 페이지 이동·드롭다운·아코디언·갤러리 라이트박스·캘린더 모달이 그대로 동작합니다.

시연 사이트 열기 → 스크린샷 보기
65개
정적 페이지
36개
라우트
7개
사역 부서
14MB
빌드 크기

Overview · 개요

교회 정보를 정성껏, 시니어부터 청년까지

네이밍 ‘가까운’을 디자인 전체에 녹였습니다. 거리·마음·일상이 가까운 공동체를 모바일 우선 디자인과 큰 터치 영역, 본문 17px, Nanum Myeongjo 헤딩으로 표현했습니다. 베이지/크림(#F5F1EA), 딥블루(#1E3A5F), 골드(#C9A961)의 따뜻하지만 단정한 톤.

가까운 교회 홈 화면

한 화면에 담긴 환대

상단 띠바의 슬로건부터 히어로 풀스크린 이미지, “예배 시간 안내”와 “교회 오시는 길” 두 CTA까지. 처음 방문하는 분이 5초 안에 가장 중요한 정보에 도달할 수 있도록 구성했습니다.

  • 실제 교회 사진을 풀스크린 배경으로
  • 딥블루 그라데이션 + 텍스트 그림자로 가독성 확보
  • 모바일 폭(560px) 고정 — PC에서도 깨지지 않음
  • 예배 시간/오시는 길 즉시 진입

실제 교회 데이터로 채웠습니다

김포 운양동 풍경마을 실제 가까운 교회의 블로그를 스크래핑해 주소·예배 시간·건물 구성·주차 안내를 그대로 반영했습니다. 주일 1·2·3부 예배, 수요·금요·새벽 기도회, 자모실·파이프오르간까지 실제 정보로 구성됩니다. 교역자·연혁·계좌 등 미공개 정보만 더미값으로 채워두어, 백엔드 연동 시 한 곳에서 교체 가능합니다.

Home Tour · 홈 화면 투어

스크롤하며 만나는 8개 섹션

홈 페이지는 한 화면 안에 교회의 핵심 정보를 담고, 스크롤할수록 깊이 있는 콘텐츠가 펼쳐지도록 설계했습니다.

히어로
01 · Hero
메인 히어로
교회 외관 사진을 배경으로 슬로건과 두 개의 CTA 버튼
Quick Info
02 · Quick Info
이번 주 함께해요
이번 주 예배 시간, 새가족 환영, 오시는 길 3카드
성경 구절
03 · Bible
성경 구절 인용
마태복음 11:28 — 풀폭 딥블루 섹션
담임목사 인사말
04 · Pastor
담임목사 인사말
박은혜 목사 인사 카드 + 더보기 링크
최근 설교
05 · Sermons
최근 설교 3편
날짜·제목·설교자·본문 + 플레이 아이콘
함께하는 공동체
06 · Community
함께하는 공동체
새가족부·청년부·주일학교·섬김·소그룹·선교 6 그리드
교회 소식
07 · News
교회 소식
최근 공지 4개 — 날짜 박스 + 제목 + 카테고리
오시는 길
08 · Visit
오시는 길 (풀폭)
Google Maps + 주소·교통·주차·연락처 + 길찾기/전화
“

수고하고 무거운 짐 진 자들아
다 내게로 오라
내가 너희를 쉬게 하리라

— Matthew 11:28

Pages Tour · 페이지 투어

교회 소개

6개의 소개 페이지로 교회의 정체성·비전·역사·교역자·조직·위치를 깊이 있게 전달합니다.

인사말
ABOUT
담임목사 인사말
박은혜 목사의 전문 인사말
교회 비전
ABOUT
교회 비전
4가지 핵심 가치 + 연간 표어
교회 연혁
ABOUT
교회 연혁
2010년 개척부터 현재까지 타임라인
교역자
ABOUT
교역자 소개
담임목사 강조 + 부목사/전도사 5명
조직도
ABOUT
교회 조직
당회 · 제직회 · 6개 부서 조직도
오시는 길
ABOUT
오시는 길
Google Maps + 카카오/네이버 길찾기 + 교통 안내

예배 · 설교 말씀

예배 안내
WORSHIP
예배 안내
주일·주중·주일학교 전체 예배 시간표
설교 목록
SERMON
설교 목록
카테고리 필터 + 키워드 검색 + 페이지네이션
설교 상세
SERMON
설교 상세
영상 + 노트 다운로드 + 관련 설교 추천

교회 소식

공지사항
NOTICE
공지사항 게시판
카테고리 필터·검색·핀고정
주보
BULLETIN
주간 주보
PDF 다운로드 카드 그리드
교회 행사
EVENTS
교회 행사
카테고리 필터 + 상세 모달
갤러리
GALLERY
갤러리
앨범별 그리드 + 라이트박스
캘린더
CALENDAR
월간 캘린더
정기 예배 자동 반복 + 5가지 색상 카테고리

사역 안내

7개 부서별 페이지. 특히 유아부는 서정희 선생님 소개 + 율동/예배/교육 프로그램으로 상세 구성.

유아부

유아부 · 서정희 선생님

4세부터 7세까지의 어린 친구들이 매주 주일 11:30에 5층 유아 예배실에서 만납니다. 담당 서정희 선생님의 인사말과 프로그램, 예배 한 시간 타임라인까지 정성껏 담았습니다.

  • 원형 프로필 + 짧은 갤러리 (제공받은 4장)
  • 신나는 율동 찬양 / 그림책 성경 / 오감 활동
  • 11:30~12:30 예배 한 시간 타임라인
  • 4가지 기본 정보 (대상·시간·장소·담당)
사역 안내
MINISTRY
사역 안내 인덱스
7개 부서 카드 그리드
교육부
MINISTRY
교육부
영아부 ~ 고등부 6개 부서
찬양대
MINISTRY
찬양대
시온·호산나·어린이 찬양대

새가족 · 헌금 · 문의

새가족
NEWCOMER
새가족 안내
5단계 등록 + 4주 교육 + 신청 폼
헌금 안내
OFFERING
헌금 안내
계좌 복사 + QR + 영수증
FAQ
FAQ
FAQ
18문항 카테고리 + 검색 + 아코디언
문의하기
CONTACT
문의하기
문의 폼 + 직접 연락 + 지도
기도제목
PRAYER
기도제목
등록 + 함께 기도 카운트 + 신고
로그인
AUTH
로그인 (UI 데모)
이메일/카카오 로그인 폼

Features · 핵심 기능

정적 사이트지만 모든 인터랙션 동작

정적 사이트로 빌드했지만 라이트박스·모달·필터·아코디언 같은 인터랙션이 데모와 100% 동일하게 동작합니다.

🗓

인터랙티브 월간 캘린더

매주 같은 요일에 정기 예배를 자동 펼치고, 카테고리별 색상으로 표시. 카테고리 버튼으로 끄고 켜기. 일정 클릭 시 상세 모달 (일시 · 장소 · 설명 · 참여 신청 버튼).

🖼

갤러리 라이트박스

앨범별로 그리드 배치. 사진 클릭 시 풀스크린 라이트박스 + 좌우 화살표로 이전/다음 사진 탐색 + N/총개수 표시. 클릭 영역 밖으로 클릭하면 닫힘.

🔍

설교 검색 & 페이지네이션

제목, 설교자, 성경 본문으로 키워드 검색. 카테고리 필터(주일설교 / 수요예배 / 특별집회). 9개씩 페이지 분할. 상세 페이지에서는 관련 설교 자동 추천.

📋

FAQ 검색 & 아코디언

18문항을 5개 카테고리(교회방문 / 등록교육 / 헌금 / 사역참여 / 기타)로 분류. 키워드로 질문/답변 동시 검색. 펼침/접힘 애니메이션.

🙏

기도제목 등록 & 함께 기도

익명/실명 선택 등록. 카테고리(개인/가정/교회/나라). “함께 기도하기” 버튼으로 기도 카운트 누적. 부적절한 글 신고 기능. 카테고리 필터.

📍

Google Maps 임베드

오시는 길 페이지에 Google Maps 정상 임베드. 카카오맵/네이버맵 길찾기 외부 링크. 운양역 도보 8분 · 김포제일고 무료 주차 안내.

Tech Stack · 기술 스택

안정적인 모던 스택

App Router + React 19 + Tailwind v4 + TypeScript로 구성한 모던 스택입니다.

Next.js 16
App Router · Static Export
React 19
Concurrent + Suspense
TypeScript 5
strict mode
Tailwind v4
CSS-first 토큰
Lucide
Icon system
React Hook Form
Form validation
Sonner
Toast notifications
date-fns
Date formatting

Visit · 둘러보기

직접 시연 사이트에서 만나보세요

모바일에서도 동일한 디자인으로 동작합니다. PC에서는 모바일 폭(560px) 고정 + 양옆 자연 배경으로 처리되어 이미지가 늘어나 깨지지 않습니다.

시연 사이트 열기 →