워드프레스 강좌 #5. 한국형 게시판 추가

워드프레스로 웹사이트를 구축하려던 어느 한국인의 이야기

워드프레스를 설치했을 때에 게시판이 기본적으로 제공되지 않는다는 점에서 처음으로 당황합니다.
그렇지만 정신을 차리고 워드프레스에 제공되는 다양한 플러그인을 찾아보면 되겠다고 생각합니다.
플러그인 설치 페이지에서 board, forum 등을 검색해 보고 수많은 플러그인의 목록과 영어로 된 설명 때문에 막막함을 느낍니다.
무작정 평가가 좋은 플러그인을 하나씩 설치하고 테스트해보지만 겉모습부터 한국형 게시판과 많이 다르기 때문에 이건 아니라고 판단하고 삭제합니다.
몇 번 해보다가 이건 아닌 것 같다는 생각이 들어 네이버에서 워드프레스 한국형 게시판을 검색해 봅니다.
한국인들이 개발한 몇몇 게시판 플러그인들을 찾아서 설치해 봅니다.
다른 문제들을 다 떠나, 포럼이 아니라 한국형 게시판의 형태로 출력된다는 것에 만족합니다.
예전에 사용하던 제로보드나 그누보드 등에 비교하면 아쉬운 것은 사실이지만 아쉬운대로 사용해야겠다고 생각합니다.
게시판을 테스트하기 위해서 게시물을 작성하고 댓글을 달아보고 수정하다 보니 예상치 못한 곳에서 버그가 발생합니다.
그런데 무엇이 문제인지, 어떻게 해결해야 하는지 알 방법이 없습니다.
또 다른 한국형 게시판 플러그인을 설치해 보고 같은 과정을 반복합니다.
그러다 보면 애초에 워드프레스로 웹사이트 제작하는 게 아니었다는 후회가 밀려옵니다.

…는 제 이야기였습니다.

한국형 게시판 vs 포럼

웹사이트에는 고객센터, 질문과 답변 등과 같이 의사소통을 위한 페이지가 필요합니다.
이러한 기능을 구현하기 위해서는 흔히 게시판을 이용하게 됩니다.

우리나라에서 사용하는 게시판(이하 한국형 게시판)은 기본적으로는 글번호, 제목, 댓글수, 작성자, 작성시각을 목록으로 표시해 주고, 글을 클릭하면 내용과 댓글을 보여주는 형태입니다.
한국형 게시판의 중요한 특징은 최초에 작성된 순서대로 글을 정렬한다는 것입니다.

그런데 외국에서는 이런 게시판을 대신하여 포럼을 사용합니다.
포럼에서도 글의 목록을 보여주고, 글을 클릭하면 글의 내용과 댓글 목록을 보여준다는 점에서는 한국형 게시판과 큰 차이가 없습니다.
그러나 글의 목록을 정렬하는 기준이 최초 작성 시간이 아니라 신선도(freshness)라는 점이 중요한 차이점입니다.
신선도란 글이 최종적으로 수정된 시간 또는 마지막 댓글이 달린 시간을 의미합니다.
이 개념은 페이스북의 뉴스피드를 예로 들면 이해하기 쉬운데, 예전에 작성된 글에 좋아요 버튼을 클릭하거나 댓글을 달면 최근 소식으로 취급되어 글 목록의 상단에 노출되게 됩니다.

포럼의 이러한 기능은 게시판에 비해 여러 가지 장점을 가지고 있습니다.
같은 주제의 글은 하나의 스레드에 작성하면 되므로 불필요하게 새로운 글이 올라올 필요성이 줄어듭니다.
따라서 포럼에 올라오는 글은 대개 주제(topic) 라고 불립니다.
또한, 같은 내용의 글을 반복해서 작성하여 게시판을 도배할 필요가 없어집니다.
이 방식이 악용되어 오래된 글을 목록의 상단으로 끌어올리기 위해 무의미한 댓글을 달기도 하는데(bumping), 이에 대응하여 관리자는 특정 주제에 더 이상 댓글을 달지 못하도록 글을 잠금(lock) 처리할 수 있습니다.

그 동안에 한국형 게시판의 단점들을 해결하기 위한 노력이 없었던 것은 아닙니다.
각종 커뮤니티들에 사용되는 게시판이나 댓글 시스템을 살펴보면 여러 가지 발전된 모습을 찾아볼 수 있습니다.
인기 있는 글을 따로 모아 보기 위한 추천 기능이 있고, 최근 글과 최근 댓글을 따로 모아 보여주는 기능을 제공하기도 합니다.
게시판 내에 태그, 카테고리를 도입하여 글을 주제별로 나열할 수 있도록 하기도 합니다.
또한 작성시간 뿐 아니라 작성자, 제목, 조회수, 댓글수 등을 기준으로 글을 정렬할 수 있도록 했습니다.
그러나 이러한 발전에도 불구하고 한국형 게시판에 아쉬운 점이 없는 것은 아닙니다.

포럼과 한국형 게시판의 차이에 관한 보다 자세한 설명은 네이버 블로그의 아래의 글을 참조하세요.

포럼과 게시판

왜, 언제부터 이런 차이가 생겼는지, 한국형 게시판도 미래에는 포럼 형태로 바뀌게 될지는 알 수 없습니다.
그러나 분명한 사실은 이러한 국내외의 차이 때문에 한국형 게시판 플러그인을 구하기 어렵다는 것과, 이러한 점이 워드프레스를 이용하여 국내 웹사이트를 구축하는 사람들에게 걸림돌로 작용한다는 것입니다.

한국형 게시판을 구현하는 방법

워드프레스에서는 기본적으로 한국형 게시판을 제공하지 않습니다.
따라서 이를 구현하기 위해서는 다양한 방법을 찾을 수 있습니다.

크게 다음 2가지 방법을 생각할 수 있습니다.

1. 워드프레스 이외의 다른 게시판을 추가 설치
2. 워드프레스 플러그인 이용

한국형 게시판을 구현하는 방법 #1. 워드프레스 이외의 다른 게시판을 추가 설치

워드프레스가 설치된 상태에서 제로보드(XE)나 그누보드 등을 추가로 설치하는 방법입니다.
그런 뒤에 워드프레스의 헤더, 사이드바, 푸터 등을 각 페이지마다 include하거나, iframe으로 게시판만 보여주도록 설정하면 됩니다.

이 방식에는 다음과 같은 장점이 있습니다.

기존에 사용하던 게시판을 사용하므로 개발자가 원하는 기능과 디자인을 구현하기 쉽습니다.
웹사이트의 방문자에게 익숙한 UX를 제공할 수 있습니다.

이 방식에는 다음과 같은 단점이 있습니다.

회원 연동이 기본적으로 이루어지지 않고, 이를 위해서는 추가 작업이 필요합니다.
하나의 데이터베이스에 많은 테이블이 존재하여 유지관리가 어려워지고 자료가 중복됩니다.
게시판 내에 작성한 글은 워드프레스 내의 컨텐츠로 간주되지 않기 때문에 검색에서 노출되지 않습니다.
include로 구현한 경우 워드프레스 웹사이트의 테마를 변경하면 수동으로 헤더, 사이드바, 푸터에 관한 .php 파일을 수정해 주어야 합니다.
iframe으로 구현한 경우 iframe의 가로폭은 조절하기 쉽지만 세로폭 조절은 까다롭습니다.
iframe으로 구현한 경우 외부에서 게시물의 링크를 클릭하면 헤더와 푸터 없이 게시판만 보입니다.

결국 저는 이 방식들을 사용하지 않았습니다.

한국형 게시판을 구현하는 방법 #2. 워드프레스 플러그인 이용

절대적인 숫자는 부족하지만, 우리나라에서 사용하는 워드프레스 한국형 게시판 플러그인은 꾸준히 개발되고 있고, 질과 양에서 성장하고 있습니다.

다음과 같은 플러그인들이 대표적입니다.

MH Board

LH Board

Amumu Board

이 플러그인들은 게시물을 작성 순서대로 나열하는 한국형 게시판의 목록 방식을 따르고 있습니다.
그러나 저는 한국형 게시판에 비해 포럼 방식이 더 나은 방식이고, 앞으로의 한국형 게시판이 포럼 형태로 발전해야 한다고 생각하기 때문에 이 방식을 사용하지 않았습니다.

대신에 bbPress 플러그인을 사용하여 포럼을 만들고, 이를 변형하여 사람들에게 익숙한 한국형 게시판 형태로 만들기로 하였습니다.
이 강좌의 제목은 한국형 게시판 추가이지만, 실제로는 겉모습만 한국형 게시판이고 내부 작동 방식은 포럼 방식을 따르도록 bbPress 플러그인을 변형하여 게시판 형태로 만드는 방법을 다룹니다.

bbPress를 한국형 게시판 형태로 변형하기 #1. 플러그인 설치

관리 페이지에서 플러그인 > 플러그인 추가하기를 클릭합니다.
bbPress를 검색하면 다음과 같은 검색 결과를 볼 수 있습니다.

bbPress 항목에서 지금 설치하기 링크를 클릭하여 플러그인을 설치합니다.
플러그인 설치가 완료되면 다음과 같은 화면을 볼 수 있습니다.

플러그인은 활성화(activate) 되기 전까지는 작동하지 않습니다.
따라서 플러그인을 활성화 라는 링크를 클릭해서 방금 설치된 bbPress 플러그인을 활성화시킵니다.
관리 페이지에서 좌측 메뉴 중간에 Forums, Topics, Replies 항목이 추가된 것이 보이면 설치가 완료된 것입니다.

bbPress를 한국형 게시판 형태로 변형하기 #2. 플러그인 한국어화

bbPress 플러그인은 기본적으로 영어로 제공됩니다.
게시판에 글을 쓰거나 읽을 때 뿐 아니라 관리 페이지도 영어로 되어 있기 때문에 불편합니다.
이를 해결하기 위해서는 bbPress를 한국어로 바꾸어 주어야 합니다.

제가 직접 번역하여 이 블로그에서 사용중인 bbPress 한국어 팩은 아래 링크에서 다운받을 수 있습니다.

bbpress-ko_KR.zip

또는 아래의 링크에서 다른 분이 만드신 bbPress 한국어 팩을 다운받을 수 있습니다.

내가 손본 bbPress 한국어 언어 파일을 공유한다 – 웹으로 말하기

bbPress 한국어 팩을 설치하는 방법은 이 블로그에 있는 아래의 글을 참조하세요.

영어 버전 한국어화

bbPress를 한국형 게시판 형태로 변형하기 #3. 설정, 게시판 생성

관리 페이지에서 설정 > 게시판(Forums)을 클릭하면 설치된 bbPress의 설정을 할 수 있습니다.
몇몇 중요한 설정 항목들은 다음과 같습니다.

글 편집 제한시간(Disallow editing after): 최초 글 작성 후 수정할 수 있는 제한시간
익명 글 작성(Anonymous posting): 로그인하지 않은 방문자에게 글 작성 허용 여부
글 태그(Topic tags): 글에 태그를 달 수 있는지 허용 여부

bbPress 설정이 끝나면 저장한 뒤에 게시판(포럼)을 추가합니다.

관리 페이지에서 Forums > New Forum을 클릭하여 게시판 이름을 입력하면 하나의 포럼(게시판)이 생성됩니다.
예를 들어 방명록이라는 이름의 게시판을 추가하고 게시판 보기를 클릭하면 다음과 같은 화면을 볼 수 있습니다.

bbPress를 한국형 게시판 형태로 변형하기 #4. UI 수정

생성된 게시판에 글을 작성해 보면 한국형 게시판과 여러 부분에서 차이가 나는 것을 발견할 수 있습니다.
UI를 한국형 게시판 형태로 수정하기 위해서는 우선 bbPress 플러그인이 작동하는 방식을 알아야 합니다.
bbPress 공식 웹사이트의 내용을 참조하면 bbPress이 템플릿을 사용한다는 사실을 알 수 있습니다.

/wp-content/plugins/bbpress/templates/default/ 폴더에는 다음과 같은 폴더와 파일들이 있습니다.

bbpress 폴더 내의 .php 파일들은 각종 페이지들을 보여주는 템플릿 역할을 합니다.
css 폴더 내의 .css 파일들은 웹페이지의 스타일을 지정합니다.
extras 폴더 내의 .php 파일들은 bbPress에서 기본적으로 제공되는 것 이외의 기능들을 제공하기 위한 커스텀 템플릿 파일들로서, 특정 page를 생성하고 커스텀 템플릿을 지정하면 사용할 수 있습니다.
js 폴더 내의 .js 파일들은 웹페이지에서 사용할 스크립트를 정의합니다.
bbpress-functions.php 파일은 bbp_로 시작하는 각종 bbPress 함수들을 정의합니다.

이 중에서 bbPress를 커스터마이즈하기 위해서 필요한 폴더는 bbpress와 css 입니다.

/wp-content/plugins/bbpress/templates/default/bbpress 폴더에서 커스터마이즈하려는 몇몇 .php 파일들을 복사해서 /wp-content/themes/(현재 사용중인 테마 폴더)/bbpress/ 폴더 내에 붙여넣기합니다.
그러면 테마 폴더 안에 있는 bbpress 템플릿 파일을 우선적으로 사용하고, 없는 경우에는 bbpres 기본 템플릿을 사용하여 게시판을 보여주게 됩니다.

제가 bbPress를 커스터마이즈하기위해 테마 폴더 안에 있는 bbpress 폴더로 복사한 템플릿 파일들은 아래와 같습니다.

파일 이름을 보면 각각의 기능을 추측할 수 있습니다.
.php 파일을 열어 불필요한 기능을 주석처리하고 필요한 기능을 추가하는 방식으로 한국형 게시판 형태로 만들어 줍니다.

또한 스타일을 커스터마이즈하기 위해서 /wp-content/plugins/bbpress/templates/default/css/ 폴더 안에 있는 bbpress.css 파일을 테마 폴더로 복사해야 합니다.
즉, /wp-content/themes/(현재 사용중인 테마 폴더)/css/ 폴더에 bbpress.css 파일을 복사/붙여넣기한 뒤에, 원하는 스타일로 수정합니다.
유지관리를 쉽게 하기 위해서는 자식 테마에서 .css 파일을 제작할 때와 마찬가지로 부모 css 파일을 import하는 방식을 추천합니다.

이러한 작업을 완료하여 한국형 게시판처럼 보이는 bbPress 테마를 만들었습니다.
첨부된 압축 파일은 아래 링크에서 다운받을 수 있습니다.

theme-bbpress.zip

bbpress 플러그인이 설치된 상태에서 테마를 적용하기 위해서는 다운받은 압축파일을 풀고, bbpress 폴더와 css 폴더를 사용중인 테마 폴더 안에 복사/붙여넣기하면 됩니다.

그 외에

커스텀 페이지 템플릿을 이용하여 게시판 형태를 만들수도 있습니다.
이 블로그에 적용한 것은 아래 링크와 같습니다.

http://www.nam.or.kr/board

강좌를 마치며

이상으로 짧았던 워드프레스 웹사이트 제작 강좌를 마치겠습니다.
이 강좌를 통해서 고기를 잡아드리지는 못했지만, 고기를 잡는 방법을 얻어가셨으면 좋겠습니다.
우리나라에서 워드프레스가 보다 활성화되기를 기대합니다.

참고 자료

Bump (Internet) – 위키피디아

포럼과 게시판 – 네이버 블로그

워드프레스 한국형 게시판 모음 – 티스토리

bbPress 공식 웹사이트

bbPress 함수 레퍼런스

관련 포스트

“워드프레스 강좌 #5. 한국형 게시판 추가”에 대한 33개의 댓글

    1. 감사합니다. 워드프레스 웹사이트 제작에 도움이 되었으면 좋겠네요.

    1. 도움이 되어서 다행입니다.
      홈페이지와 블로그를 잘 연결시킨 핀코인님의 웹사이트 잘 보았습니다.
      사족이지만, 스팸 도배를 방지하기 위한 bbpress 플러그인(recaptcha 등)을 사용해 보시는 것을 추천드립니다.

  1. 차근차근 했으나.. 어렵네요ㅠㅠ.
    질문하나 드립니다. 답변 부탁 드릴께요.

    강좌에서 설명해주신대로..
    1. bbPress 설치
    2. 한글파일 복사
    3. 포럼(방명록) 생성- 제목만 입력
    4. 토픽(게시글) 작성- 3번에서 생성한 포럼을 지정
    5. 메뉴에 포럼(방명록) 추가

    위와 같이 하니,
    메뉴를 클릭하면 [방명록]이 나오고 작성한 글이 보여지고,
    읽기도 정상적으로 됩니다.

    헌데.. [새 글 쓰기]부분을 클릭하니 반응이 없습니다.

    어느 부분(혹은 파일)을 확인해 보아야 할까요?
    도움 부탁 드립니다.

    1. 새 글 입력 form은 스타일의 display 속성이 none으로 지정되어 있어서 기본적으로는 숨겨져 있습니다.
      그러다가 ‘새 글 입력’ 링크를 클릭하면 jQuery의 토글 함수를 사용하여 숨김을 해제하도록 되어 있습니다.
      만약 jQuery를 사용하지 않는 경우에는 새 글 쓰기 링크를 클릭하더라도 아무 반응이 없겠죠.

      따라서 이 문제를 해결하시려면 크게 3가지 방법이 있습니다.
      1. 플러그인이나 테마에서 wp_enqueue_script(‘jquery’)를 실행하여 jQuery를 자동으로 불러오도록 하는 것
      2. ‘새 글 입력’ 링크가 포함된 content-single-forum.php파일 앞부분에

      <script src="(jQuery 파일의 url)/jquery.js" type="text/javascript"></script>

      를 삽입해서 jQuery를 불러오도록 하는 것
      3. content-single-forum.php파일 내의 59행과 67행에 있는

      <a href="javascript:;" onclick="jQuery('.bbp-topic-form').toggle();"  rel="nofollow">새 글 쓰기</a>

      부분을

      <a href="javascript:;" onclick="document.getElementById('new-topic-0').style.display='block';"  rel="nofollow">새 글 쓰기</a>

      로 바꾸어 주는 것

      1. 파일만 바꿔주니 적용되네요. 감사함다.
        그런데 새글쓰기를 테마에서 제공하는 숏코드를 사용해 버튼으로 만들려면 어떻게 해야하나요. 새글쓰기 글씨가 눈에 잘 안띄어서요.
        그리고, 글 작성후 또는 토픽읽기 화면에서 목록보기 버튼을 달고 싶습니다.

      2. child theme에 css 추가후 새글쓰기 라인에 class 부여해봤는데 안돼네요.
        그냥 폰트칼라만 적용도 안돼요 ㅠ

  2. 정말 쉽게 설명해 주셔서 감사합니다.
    한글형 게시판 보다는 이렇게 바꾸어 쓰는게 훨씬 깔끔해 보이네요…
    다만 따라한 결과 다 잘 되는데 깔끔하게 한줄로 정리 되지 않고 두줄로 정리가 되네요.
    css쪽을 수정 하면 뭔가 쉽게 수정 할 수 있을거 같은데 살펴 봐도 잘 안보이네요…
    제가 이쪽 방면에 무지인지라ㅜㅜ
    혹시 어떻게 수정 하면 될지 알려 주시면 감사하겠습니다.
    http://sconp.kr/forums/forum/request/

    1. 테마의 스타일이 적용되어서 padding이나 margin이 들어간 것으로 보입니다.

      테마 폴더/css/bbpress.css 파일을 열어서

      li.bbp-forum-info {
      width: 67%;
      }
      li.bbp-forum-freshness {
      width: 10%;
      }
      li.bbp-topic-title {
      width: 57%;
      }
      li.bbp-topic-freshness {
      width: 10%;
      }

      에 있는 숫자들(67, 10, 57 등)을 작게 조절해보시면 원하시는 결과를 얻으실 수 있을 겁니다.

  3. 저도 요즘 게시판보다는 포럼형태가 결국에는 정착될거라 생각해서 포럼가지고 이래저래 만져보고있습니다. 하지만, 포럼을 만들어도 포럼(게시판)에 있는 글(토픽)들을 메인에 미니게시판을 추출(사이트 메인페이지에 미니게시판을 여러게 출력하는 것)하기가 어렵네요;;

    그래서 advanced post list라는 플러그인을 사용하고 있는데, 이 플러그인은 포스트만 추출이 가능해서 포럼이나 토픽들은 추출이 안됩니다.

    저는 포스트들을 가지고 게시판을 만들어볼까도 생각 중인데, 너무 비효율적인 것 같아서 멘붕상태 입니다.

    php에서 해결해야할 것같은데 이쪽은 이제 막 공부하는 중이라 어디부터 손봐야할지 감이 안잡히네요.;

    혹시 포럼의 토픽들도 메인 페이지에 미니게시판처럼 추출이 가능할지요?

  4. 안녕하세요?

    컴맹이나 마찬가지인데 끙끙거리며 워드프레스 설치형 만들었습니다.
    독립형 사이트를 갖고 싶었던 열망때문에 검색해가며 힘들게 했네요…^^;;

    이제는 XE엔진을 워드프레스에 넣고 싶은데 조언을 구하고 싶습니다.

    초면에 죄송하지만,
    이 부분도 조언 주실 수 있을까요?

    감사합니다.

  5. 어휴 젤 이쁘고 좋네요.. 다른 한국형 게시판 플러그인들 어휴.. 정말 한숨 나옵니다.

    정말정말 감사합니다~!

  6. 혹시 게시판을 자료실처럼 사용하기위해 파일을 첨부할 수도 있는지요?

  7. WordPress, bbpress를 7년째 쓰고 있는데요, 사용팁등을 이렇게 깔끔히 공유할껄 후회가 되네요.ㅎㅎ 감사합니다.

  8. 아무것도 모르고 운영자님의 안내대로 하니 조금 더 나은 게시판을 가질 수 있었습니다.
    정말 감사합니다.

  9. 워드프레스 초짜입니다.
    좋은 글 보고 하나씩 따라하고 있는데요.
    만들어주신 bbpress 테마를 복사해 넣는것 까지는 했는데
    테마 적용을 어떻게 하는지…@.@
    도와주세요.

  10. 엄청난 도움이 되었습니다^^
    워드프레스 파악하누라 진땀 흘렸더니
    바로 게시판 목록이라던가 변형할 방법을
    모색중이었는데

    너무나 좋은 정보라
    제 네이버 블로그에 내용과 링크를 퍼가도 될까요?

    허락해 주시면
    출처랑 원작자 넣어서
    상세하게 포스팅 하고 싶어요 ㅎ 설치 후에 다시 의견도 달고 하고 싶어요 그럼 줄거운 하루되시구요 정보 다시한번 감사합니다~

    1. 안녕하세요, 좋은 글 감사합니다.

      게시판에 본래의 홈페이지 헤더 푸터를 적용하고 싶은데 어디를 수정해야 하나요?

  11. 정말 감사합니다 도움 많이 되었습니다 혹시 게시글 달고난 후 옆에 왼쪽에 프로필이 뜨게 하고 싶은데 어떻게 방법이 없을까요?

답글 남기기

이메일 주소를 발행하지 않을 것입니다.