간단한 홈페이지 만들기 - 06.그누보드5 게시판 생성(기본설정)

안녕하세요.

이전 포스팅(간단한 홈페이지 만들기 - 05.그누보드5 설명 및 설치하기)에서는 그누보드5를 웹 서버에 설치하는 과정을 다뤘습니다. 그누보드

이번 포스팅에서는 그누보드5의 기본 기능을 이용하여 홈페이지를 간단하게 꾸미는 방법에 대해 다루고자 합니다. 사실 궁극적으로는 그누보드5를 이용하여 게시판을 생성하는 방법을 소개하는 것이 이번 포스팅에 주 목적입니다.

Step. 1.1. 게시판 그룹 생성 - 게시판 그룹관리 페이지

그누보드5의 게시판을 생성하기 위해서는 먼저 관리 페이지로 접속해야 합니다. 관리 페이지 주소는 "http://호스팅URL/adm/" 입니다. (예. http://hostID.dothome.co.kr/adm/) 

관리 페이지로 접속을 하면 (버전에 따라 조금씩 다르겠지만) 아래 그림과 같은 화면이 나옵니다.

최초 접속 시에는 로그인 화면이 뜨며, 그누보드5 설치 시 입력했던 최고관리자 계정으로 로그인하면 됩니다.

그누보드5의 모든 게시판은 특정 게시판그룹으로 묶어야만 생성할 수 있습니다. 현재는 생성한 게시판 그룹이 없기 때문에 게시판 그룹부터 생성해야 합니다. 게시판 그룹을 생성하기 위해 아래 그림과 같이 상단 카테고리의 "게시판 관리 - 게시판 그룹관리"로 이동합니다.

Step. 1.2. 게시판 그룹 생성 - 게시판 그룹 추가 버튼

게시판 그룹관리 페이지에서는 생성한 그룹에 대한 수정/삭제와 새로운 게시판 그룹을 추가 할 수 있습니다. 새 게시판 그룹을 생성하기 위해 "게시판 그룹 추가 버튼"을 클릭합니다.

Step. 1.3. 게시판 그룹 생성 - 게시판 그룹 정보 입력

게시판 그룹 생성 페이지는 아래 그림과 같습니다. 그룹 ID, 그룹 제목, 접속기기 등 다양한 항목들이 보입니다. 우선 아래 그림의 파란색 박스 부분(그룹 ID, 그룹 제목)만 입력하도록 합니다. 해당 포스팅에서는 모든 홈페이지에 기본으로 있는 "공지사항" 게시판을 만들어 보고자 합니다. "공지사항" 게시판이 속할 그룹으로 그룹 ID는 'community'(영문만 가능) 그룹 제목은 '커뮤니티'라고 입력하고 하단에 '확인' 버튼을 클릭하여 게시판을 생성해줍니다. (반드시 이와 같이 입력해야 되는 것은 아닙니다.)

Step. 1.4. 게시판 그룹 생성 - 게시판 그룹 생성 확인

게시판 그룹을 생성한 후 다시 게시판 그룹설정 페이지로 이동하면 아래 그림과 같이 커뮤니티 게시판 그룹이 생성되었음을 확인할 수 있습니다. 이제 해당 게시판 그룹에 속할 '공지사항' 게시판을 만들면 됩니다.

Step. 2.1. 게시판 생성 - 게시판 관리 페이지

게시판을 생성하기 위해서 상단 카테고리의 "게시판 관리 - 게시판 관리"로 이동합니다. 아래 그림은 게시판 관리 페이지의 모습입니다. 게시판 관리 페이지에서는 새로운 게시판을 추가하고, 생성한 게시판을 수정/삭제하는 기능을 제공합니다. 우선 새로운 게시판(공지사항)을 생성하기 위해 "게시판 추가 버튼"을 클릭합니다.

Step. 2.2. 게시판 생성 - 게시판 정보 입력

아래 그림은 게시판을 생성하기 위한 다양한 설정값들을 입력을 하는 페이지입니다. 게시판 그룹과는 달리 굉장히 많은 항목들이 있습니다. 우선 기본적인 TABLE, 그룹, 게시판 제목 항목만 설정하도록 하겠습니다. TABLE은 실제 게시판 이름이며 영문만 입력이 가능합니다. 공지사항의 영문명 'notice'를 입력합니다.(다른 이름으로 입력하셔도 됩니다.) 그룹은 앞에서 생성한 커뮤니티 그룹을 선택하고, 게시판 제목은 '공지사항'으로 입력한 후 "확인 버튼
을 클릭하여 게시판을 생성해줍니다.

Step. 2.3. 게시판 생성 - 게시판 생성 확인

게시판을 생성하였다면, 게시판 관리 페이지에 아래 그림과 같이 생성한 게시판의 목록이 출력됩니다. 지금까지는 만든 게시판이 '공지사항' 하나밖에 없어 아래 그림에서는 한 개의 게시판 항목만 출력되고 있습니다. 처음 만든 게시판이니 한 번쯤 직접 공지사항을 작성해보시는 것도 좋을 것 같습니다. 

이와 같이 그누보드5를 이용하면 게시판을 매우 쉽게 생성해나갈 수 있습니다. 

Step. 2.4. 게시판 생성 - 게시판 적용 확인

실제 생성된 공지사항 게시판의 모습을 확인해보기 위해 홈페이지로 돌아갑니다. 게시판 생성 전과는 다르게 '공지사항'이라는 글귀가 보입니다. '공지사항' 또는 옆에 '더 보기'를 클릭하면 아래 그림과 같이 '공지사항' 게시판 페이지로 이동이 됩니다. 실제로 해당 페이지에서 저희들이 흔히 알고 있는 공지사항에 기능이 모두 가능합니다.

Step. 3.1. 메뉴 설정 - 메뉴 설정 페이지

하지만 위에 방법으로만 공지사항 페이지로 접근이 되는 것은 효율적이지도 않고, 직관적이지도 않습니다. 보통의 홈페이지를 보면 페이지 상단 또는 좌, 우측에 홈페이지의 여러 페이지로 이동이 가능한 링크들이 나열되어 있습니다. 이를 보통 내비게이션(Navigation)이라고 부릅니다. 세부적으로 GNB(Global Navigation Bar), LBN(Local Navigation Bar), SNB(Sub Navigation Bar)로 나뉩니다. 하지만 너무 용어에 너무 집착할 필요는 없다는 게 저의 개인적인 생각입니다. (GNB, LNB, SNB 간략 설명 링크: http://blog.naver.com/PostView.nhn?blogId=star4899&logNo=70135682100 )

저희도 이제 홈페이지 상단 내비게이션공지사항 링크를 추가해보고자 합니다. 실제 위 그림에 "메뉴 준비 중입니다. 관리자모드 > 환경설정 > 메뉴설정에서 설정하실 수 있습니다"라는 문구가 출력되고 있는 부분이 그누보드에서 제공하는 내비게이션위치입니다. 이곳에 "공지사항" 메뉴를 추가해보도록 하겠습니다. 우선 아래 그림과 같이 다시 관리자페이지로 이동한 후 "환경설정 탭 - 메뉴 설정 탭"으로 이동합니다.

Step. 3.2. 메뉴 설정 - 메뉴 추가 버튼

메뉴 설정 페이지로 이동이 되었다면 아래 그림과 같은 페이지가 출력이 됩니다. 메뉴를 추가하기 위해 해당 페이지에서 "메뉴 추가 버튼"을 클릭합니다.

Step. 3.3. 메뉴 설정 - 추가 메뉴 선택

아래 그림과 같은 메뉴 추가 팝업 페이지가 뜨면, "게시판"(대상선택)을 선택합니다. "게시판"을 선택하면 생성되어 있는 모든 게시판의 목록이 출력이 됩니다. 현재까지는 공지사항 한 개만 생성했기 때문에 공지사항 하나만 뜨고 있습니다. 게시판 목록이 정상적으로 출력이 되었다면, 해당 게시판(공지사항)을 선택합니다.

Step. 3.4. 메뉴 설정 - 최종 메뉴 추가

바로 앞 단계에서 선택한 공지사항 게시판이 메뉴 설정 페이지에 추가가 되어 있습니다. 정상적으로 추가가 되었다면, "확인 버튼"을 클릭하여 메뉴 설정 과정을 마무리해줍니다. (반드시 "확인 버튼"을 눌러야만 메뉴가 추가됩니다.)

Step. 3.5. 메뉴 설정 - 메뉴 추가 적용 확인

이제 "공지사항"을 메뉴로 추가하는 과정이 끝났습니다. 정상적으로 추가되었는지 확인하기 위해, 다시 홈페이지로 이동하면 아래 그림과 같이 내비게이션에 "공지사항"이 추가가 되어 있는 것을 확인하실 수 있습니다.

이제부터는 내비게이션에 공지사항을 클릭하여 공지사항 페이지로 이동이 가능합니다.

위와 같은 단계들을 거쳐 홈페이지에 게시판을 추가하고 메뉴도 추가해봤습니다. 이러한 방법으로 여러 개의 게시판( Q&A, 자유게시판 등 )을 추가하고, 메뉴에도 추가한다면 조금 더 좋은 홈페이지로 바뀔 겁니다. 뿐만 아니라 메뉴 추가 팝업 페이지에서 게시판이 아닌 게시판 그룹을 선택하면, 내비게이션의 특정 그룹명이 내비게이션에 출력이 되고, 하위에 해당 게시판 그룹에 속한 게시판들이 출력됩니다. 실제로 직접 추가/수정/삭제를 하면서 변화하는 모습을 본다면 금방 이해하실 수 있습니다. 

이외에도 다양한 그누보드 기본 환경설정을 통해 홈페이지를 가꿀 수 있습니다. 하지만, 해당 방식으로는 전혀 다른 레이아웃의 홈페이지로 변경은 힘들기 때문에 이러한 방법은 이번 한 개의 포스팅으로 간단하게 소개하는 수준으로 끝내고, 그누보드 코드를 조금씩 변형해가면서 자신만의 홈페이지를 가꿔나가는 방식을 설명드리겠습니다.

다음 포스팅에서는 그누보드5 코드들의 대표적인 특징과 구조를 설명드리고, 기존 제공되는 레이아웃을 변형하는 방법에 대해 설명드리도록 하겠습니다. 

(저는 홈페이지 만들기를 전문적으로 공부해 본 적이 없기에 일부 용어나 기술 설명이 틀릴 수 있습니다. 혹, 이런 부분이 있다면 가차 없이 댓글로 남겨주시면 감사하겠습니다. 그 외에 어떠한 내용에 댓글 모두 환영합니다.)