대구교회 홈페이지 제작

• #HTML#PHP#CSS#그누보드5#ImageSlider#Responsive#Mobile#DaeguChurch#Churchlife

• 2017년 대구교회 홈페이지 교체에 따른 홈페이지 제작 의뢰로 인해 개발하게 되었다. 그누보드5를 이용하여 반응형 웹으로 구성하였으며, 기존 그누보드의 테마를 이용하지 않고 개발하였으며 PC, 모바일 버전 2가지를 다르게 개발하였다. 따라서 모바일 환경과 PC환경을 별도로 관리하며 게시판는 4가지종류(오디오, 비디오, 일반게시판, 이미지)로 구성되어있으며, 많은 게시판을 보유하고있는 웹페이지이다.
• [TOPIC]
• • 기존의 대구교회 홈페이지의 경우 일반 홈페이지로 화면의 비율에 관계없는 비반응형 웹사이트로 구성이 되어 있었으며, 따라서 모바일의 경우 PC에서의 홈페이지로 구성이 되어 사용자가 불편으로 인해 새롭게 반응형 웹사이트로 구축을 위하여 개발하게됨.

       * 대구교회의 겨우 기존 데이터는 복원을 해야하며, 게시판이 100개 이상으로 많아서 웹보드를 그누보드5를 사용하게 되었다.

• [SKILL]
• • 1) 메인페이지는 Header(Sub_Menu), Body(ImageSlider, latest_Content), Tail(Social_Icon)으로 구성.

       * 대구교회의 겨우 기존 데이터는 복원을 해야하며, 게시판이 100개 이상으로 많아서 웹보드를 그누보드5를 사용하게 되었다.

  • 2) Body의 ImageSlider는 JS와 CSS를 통해 구현하였고, 애니메이션 효과를 통해 화면전환을 이용하고, 최신글 또한 JS로 생성.

       * ImageSlider에 LeftMenu와 유사한 형태, Position을 absolute로 이미지를 겹쳐서 버튼을 생성.

       * 최신글은 특정게시판 그룹에서 불러오고 정렬한다.

  • 3) 모든 Content/Board는 Head를 Include하고, 헤드의 하단부에 이미지슬라이더와 Sub-Sub-Menu로 구성.
  • 4) Board(게시판)은 일반게시판/오디오/비디오/이미지 게시판으로 구성하고 그룹으로 묶어 관리한다.
  • 5) CSS를 이용하여 화면 사이즈에 따라 모든 이미지/글꼴 등의 사이즈는 새로 지정하는 Responsive.css를 구성
  • 6) PHP를 이용하여 모바일/PC로 Device별 형태로 구분하여 CSS분할 적용
  • 7) 모바일의 경우 Hover보다 버튼식이 효율적/직관적이므로 Index의 Header를 Slider메뉴 형태로 구성.

       * 기타 Index, Board, Contet를 Mobile로 CSS변형

• [ELEMENT]
• 대구교회[PC버전 바로가기]
• 대구교회[Mobile버전 바로가기]
• [[ACHIEVEMENT]]
• 현재 개발은 최종적으로 완료하였으며, 추후의 유지/보수는 대구교회에서 할 것이며 현재 http://churchlife.net[주소] 접속 시 개발이 마무리된 홈페이지를 볼 수 있다. 일부 세부적으로 수정사항이 있을 수 있지만 대구교회에서 수정/보완 할 것이다.

• ★ 개발언어/엔진

• Gruboard5(HTML / PHP / CSS / JavaScript)

• ★ 개발인원

• 1명

• ★ 개발기간

• 2017.5 – 2017.6 / 2개월
• ★ 개발내용
• • • 그누보드5 분석/구조 파악
  • • MainIndex / Subpage 제작
  • • ImageSlider js제작
  • • 반응형에 따른 CSS 설계/구현
  • • PC/Mobile 구분에 따른 submenu 별도 제작
  • • 일반게시판/media게시판 제작