한 화면에 담긴 환대
상단 띠바의 슬로건부터 히어로 풀스크린 이미지, “예배 시간 안내”와 “교회 오시는 길” 두 CTA까지. 처음 방문하는 분이 5초 안에 가장 중요한 정보에 도달할 수 있도록 구성했습니다.
- 실제 교회 사진을 풀스크린 배경으로
- 딥블루 그라데이션 + 텍스트 그림자로 가독성 확보
- 모바일 폭(560px) 고정 — PC에서도 깨지지 않음
- 예배 시간/오시는 길 즉시 진입
Gakkaun Church · 김포 운양동
김포 운양동에 위치한 대한예수교 장로회 가까운 교회 공식 홈페이지를 정적 사이트로 제작했습니다. 36개 라우트, 65개 정적 페이지, 페이지 이동·드롭다운·아코디언·갤러리 라이트박스·캘린더 모달이 그대로 동작합니다.
Overview · 개요
네이밍 ‘가까운’을 디자인 전체에 녹였습니다. 거리·마음·일상이 가까운 공동체를 모바일 우선 디자인과 큰 터치 영역, 본문 17px, Nanum Myeongjo 헤딩으로 표현했습니다. 베이지/크림(#F5F1EA), 딥블루(#1E3A5F), 골드(#C9A961)의 따뜻하지만 단정한 톤.
상단 띠바의 슬로건부터 히어로 풀스크린 이미지, “예배 시간 안내”와 “교회 오시는 길” 두 CTA까지. 처음 방문하는 분이 5초 안에 가장 중요한 정보에 도달할 수 있도록 구성했습니다.
김포 운양동 풍경마을 실제 가까운 교회의 블로그를 스크래핑해 주소·예배 시간·건물 구성·주차 안내를 그대로 반영했습니다. 주일 1·2·3부 예배, 수요·금요·새벽 기도회, 자모실·파이프오르간까지 실제 정보로 구성됩니다. 교역자·연혁·계좌 등 미공개 정보만 더미값으로 채워두어, 백엔드 연동 시 한 곳에서 교체 가능합니다.
Home Tour · 홈 화면 투어
홈 페이지는 한 화면 안에 교회의 핵심 정보를 담고, 스크롤할수록 깊이 있는 콘텐츠가 펼쳐지도록 설계했습니다.








— Matthew 11:28
Pages Tour · 페이지 투어
6개의 소개 페이지로 교회의 정체성·비전·역사·교역자·조직·위치를 깊이 있게 전달합니다.














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









Features · 핵심 기능
정적 사이트로 빌드했지만 라이트박스·모달·필터·아코디언 같은 인터랙션이 데모와 100% 동일하게 동작합니다.
매주 같은 요일에 정기 예배를 자동 펼치고, 카테고리별 색상으로 표시. 카테고리 버튼으로 끄고 켜기. 일정 클릭 시 상세 모달 (일시 · 장소 · 설명 · 참여 신청 버튼).
앨범별로 그리드 배치. 사진 클릭 시 풀스크린 라이트박스 + 좌우 화살표로 이전/다음 사진 탐색 + N/총개수 표시. 클릭 영역 밖으로 클릭하면 닫힘.
제목, 설교자, 성경 본문으로 키워드 검색. 카테고리 필터(주일설교 / 수요예배 / 특별집회). 9개씩 페이지 분할. 상세 페이지에서는 관련 설교 자동 추천.
18문항을 5개 카테고리(교회방문 / 등록교육 / 헌금 / 사역참여 / 기타)로 분류. 키워드로 질문/답변 동시 검색. 펼침/접힘 애니메이션.
익명/실명 선택 등록. 카테고리(개인/가정/교회/나라). “함께 기도하기” 버튼으로 기도 카운트 누적. 부적절한 글 신고 기능. 카테고리 필터.
오시는 길 페이지에 Google Maps 정상 임베드. 카카오맵/네이버맵 길찾기 외부 링크. 운양역 도보 8분 · 김포제일고 무료 주차 안내.
Tech Stack · 기술 스택
App Router + React 19 + Tailwind v4 + TypeScript로 구성한 모던 스택입니다.
Visit · 둘러보기
모바일에서도 동일한 디자인으로 동작합니다. PC에서는 모바일 폭(560px) 고정 + 양옆 자연 배경으로 처리되어 이미지가 늘어나 깨지지 않습니다.
시연 사이트 열기 →