CASE 01 · WEB

괴정제일교회

교회 홈페이지 리뉴얼

분야
교회
작업
기획 · 디자인 · 개발
화면
PC · 모바일
구성
메뉴 7묶음 · 하위 36항목

실제 화면

PC와 모바일 첫 화면

PC에서는 상단에 일곱 개의 메뉴를, 휴대폰에서는 하단에 홈·설교·주보·공과공부 바로가기를 두었습니다. 두 화면 모두 가운데에 넘겨 볼 수 있는 교회 안내 슬라이드가 있습니다. 화면을 누르면 크게 볼 수 있습니다.

PC · 모바일 첫 화면 · 2026년 10월 화면 캡처. 슬라이드 속 안내물은 교회 소식에 따라 바뀝니다.

정리한 방향

매주 찾는 정보를
가장 가까이에.

교회 홈페이지를 찾는 분들은 주로 예배 시간, 지난 설교, 이번 주 주보처럼 정해진 정보를 확인하러 옵니다. 그래서 첫 화면 바로 아래에 자주 찾는 안내를 모으고, 서른 개가 넘는 하위 메뉴는 일곱 개의 큰 묶음으로 나눴습니다.

처음 오신 분을 위한 안내와 오시는 길은 따로 묶어, 오래 다닌 교인과 처음 찾아오는 분이 각자 필요한 곳으로 바로 갈 수 있게 했습니다. 글자 크기 조절과 화면 테마 전환을 더해 누구나 편한 방식으로 읽을 수 있도록 했습니다.

메뉴 구조

일곱 개의 묶음으로
정리한 메뉴

교회 안내, 예배, 소식, 부서, 자료, 새가족, 위치. 성격이 같은 정보끼리 모아 어느 메뉴를 열어도 찾는 내용이 예상한 자리에 있도록 했습니다.

홈

  1. 교회소개
    • 교회 소개
    • 담임목사 인사
    • 섬기는 사람들
    • 교회 연혁
  2. 예배와 말씀
    • 예배 안내
    • 설교 말씀
    • 주보
    • 구역공과
  3. 교회소식
    • 공지사항
    • 자유게시판
    • 행사 일정
    • 교우 사업체
    • 교우소식
    • 새가족앨범
    • 교회행사
    • 구역·전도회
  4. 기관안내
    • 주일학교
    • 유치부
    • 초등부
    • 중고등부
    • 방주회
    • 청년부
    • 1청년회
    • 2청년회
  5. 자료실
    • 전체 자료
    • 예배·말씀
    • 교육·양육
    • 교회 행사
    • 교회 행정
    • 생활 안내
    • 교우 나눔
  6. 새가족
    • 처음 오신 분께
    • 자주 묻는 질문
    • 처음 오신 날
  7. 오시는 길
    • 위치와 교통
    • 주차 안내

화면 구성

화면에 담은 것

PC와 휴대폰 모두에서 같은 정보를 찾을 수 있도록, 기기마다 이동 방식을 다르게 설계했습니다.

  • 01

    첫 화면 행사 슬라이드

    교회 행사 안내를 넘겨 보는 첫 화면에 이전·다음·일시정지 조작을 함께 두었습니다.

  • 02

    자주 찾는 안내 바로가기

    예배 안내, 이번 주 주보, 구역공과, 오시는 길로 한 번에 이동합니다.

  • 03

    설교 말씀 목록

    설교 제목과 날짜, 본문을 정리하고 설교 영상으로 이어지게 했습니다.

  • 04

    주보와 구역공과

    이번 주 주보를 바로 펼쳐 보고, 지난 자료도 찾을 수 있습니다.

  • 05

    예배 시간 안내

    주중·주일·다음세대 예배와 모임 시간을 묶어서 보여 줍니다.

  • 06

    교회 소식과 일정

    최근 공지와 다가오는 행사 일정을 첫 화면에서 확인합니다.

  • 07

    함께한 순간

    교회 행사 사진 소식을 모아 보는 영역을 두었습니다.

  • 08

    보기 설정

    화면 테마 세 가지와 글자 크기 조절, 사이트 검색을 제공합니다.

  • 09

    모바일 하단 바로가기

    휴대폰에서는 홈·설교·주보·공과공부로 바로 이동하는 하단 메뉴를 둡니다.

다음 작업 · CASE 02 헨이뷰티 속눈썹 상담소 브랜드 웹사이트 시안

우리 교회에 맞는 메뉴 구성도 상담에서 함께 정리해 드립니다.

제작 문의하기
메일로 제작 문의