더 눈에 띄게 만들기--- 게시판 디자인

웹사이트에서 게시판(Board)이란 글을 읽고 쓸 수 있는 게시판을 의미하며, BBS(Bulletin Board System)이라고도 부릅니다. 대표적인 게시판 솔루션으로는 제로보드, 그누보드 등이 있으며, 게시판 디자인은 사용 목적과 용도에 따라 다양하게 설계됩니다.

Part1: 게시판 디자인의 모든 것

1.게시판은 웹에게 중요성&용도

게시판은 웹사이트에서 글을 읽고 쓸 수 있는 기능으로, 방문자의 생각을 파악하고 참여도를 높일 수 있어 다양한 유형의 웹사이트에서 활용하고 있습니다. 예를 들어 커머스 웹에서는 구매자와 판매자 또는 웹 사이트 운영자가 소통하기 위해 상품 Q&A 게시판이나 리뷰 게시판 등을 만들어 활용합니다.

그리고 게시판 디자인은 용도와 형태에 따라 구분됩니다. 웹사이트에서 목록이 아래로

나열되는 리스트 게시판, 이미지 썸네일과 제목을 함께 배치하는 웹진 게시판, 묻고 답하는 목록이 아래로 나열되어 질문 항목을 클릭하면 아래에 답변이 아래로 열리는 FAQ 게시판, 온라인 문의 양식을 나타내는 등록 형태 게시판 등으로 종류가 구분됩니다.

2.게시판 기본 구성요소

게시판은 목록 페이지, 뷰 페이지, 등록 페이지, 수정 페이지 4가지로 구성됩니다.  

목록(List)

게시판에서 목록페이지는 등록한 글들의 목록을 보여줍니다. 보통 목록페이지에서는 글번호, 글제목과 작성자, 등록일 등으로 구성되며 게시판 특성에 따라 이미지 썸네일, 본문 내용 일부가 노출되기도 합니다. 아래 네이버 블로그 게시판 디자인의 경우는 좋아요 수와 댓글 숫자들도 함께 목록에 표기됩니다.

뷰(View)

뷰페이지는 종종 리드(READ)페이지라고도 불리웁니다. 뷰 페이지는 목록에서 게시물을 선택해 클릭해서 접근할 수 있습니다. 뷰 페이지는 고유의 글 번호가 존재하며 글 번호 기준으로 뷰 페이지 내용이 바뀌게 되며, 이러한 글 번호는 보통 URI에도 표기됩니다. 아래 예시 이미지인 네이버 블로그에서도 숫자로 표기된 글 번호를 확인할 수 있습니다.

등록(Reg) &수정(Edit)

등록 페이지는 게시물의 특징에 따라 제목, 작성자, 등록일과 추가적인 내용으로 구성됩니다. 게시판 성격에 따라 추가적인 내용이 다양하게 나타납니다.

수정 페이지는 별도로 만드는 경우도 있지만 함께 구성하기도 합니다. 등록 페이지가 내용이 없는 상태에서 글 내용을 저장하는 방식이라면, 수정페이지는 기존에 저장된 글을 불러온 후, 수정사항을 반영해 다시 저장하는 페이지 입니다.

결국 등록한 내용이 표시되는 점만 다를 뿐 비슷한 역할을 합니다. 수정 페이지에서는 등록했던 내용이 나와야 하기 때문에 해당 게시물의 번호를 가지고 있어야 합니다.

Part2:  눈에 띄는 게시판 디자인 포인트

1. 이미지 강조형 게시판 디자인

이미지를 강조하는 게시판 디자인은 가장 많이 활용하는 형태의 게시판 디자인입니다. 목록에서 대표이미지와 제목을 함께 노출하면서 보는 이로 하여금 게시물 컨텐츠를 예상할 수 있게 합니다.

이러한 이미지 강조형 게시판 디자인은 후기, 리뷰, 블로그 등의 게시판으로 활용하기 좋은 디자인 형태입니다.

2. 타임라인 게시판 디자인

타임라인 게시판은 게시판 목록에서 썸네일 이미지와 게시글 일부를 보여주는 형태입니다. 이미지는 여러장 첨부가 가능하며 이미지 상단에 이미지 개수를 표기하기도 합니다. 대표적으로 페이스북, 인스타그램 등이 이러한 타임라인 게시판입니다.

타임라인 게시판은 게시글 스타일에 제한 없이 사용가능하며, 회원 커뮤니티를 위한 공간에 활용하는 것을 추천합니다.

3. 아코디언 게시판 디자인

아코디언 게시판은 주로 공지사항용 게시판에 자주 활용합니다. 게시판 목록에서 게시물 제목만 보여지며, 제목을 선택하면 게시물 상세 내용을 확인할 수 있습니다.

보통 이러한 아코디언 게시판과 목록형 게시판을 함께 사용합니다.

아래 예시인 네이버 카페는 상단 공지를 아코디언 게시판 형태로 구성해 제목을 어필하기 위해 활용하고 있습니다. 하단에는 아래에는 일반적인 컨텐츠들을 목록형으로 보여주고 있습니다.

4. 대화(그룹채팅) 게시판 디자인

대화형태의 게시판도 최근에는 자주 사용되고 있는데, 국내에서는 쿠팡과 네이버 스토어 등등 주요 커머스들이 고객센터 게시판으로 활용하고 있습니다. 그룹 채팅방으로 활용하는 형태로도 제작이 가능하며, 실시간으로 사용자와 관리자가 대응할 수 있습니다. 고객이 원하는 상담 분야를 설정하고 많이 하는 질문에 대해서는 채팅봇으로 답변을 지정해 활용할 수도 있습니다.

추가팁:3분에 간단한 게시판 디자인 만들기--Pixso

최근 주목받고 있는 디자인 도구인 Pixso로 간단한 게시판 디자인을 만들어 보겠습니다. 우선 pixso 커뮤니티 페이지에서 맘에 드는 웹 디자인 템플릿을 선택합니다. 커뮤니티에서는 웹디자인 템플릿 뿐만 아니라 아이콘, 컴포넌트, 디자인 시스템, UI KIT등 다양한 디자인 리소스를 사용할 수 있습니다.

커뮤니티에서 선택한 웹디자인 템플릿의 상세보기 페이지를 클릭 후, 페이지 오른쪽 상단 copy 버튼을 클릭하면 Pixso 작업 페이지에 해당 웹디자인이 복사됩니다.

선택한 웹디자인 템플릿은 여행 예약 사이트로, 여기에서 이미지를 강조하는 게시판 디자인을 완성했습니다. 새로운 디자인을 추가하기보다는 기존 템플릿들 중에 원하는 형태를 선택하고 세부 컨텐츠 중에 적당한 디자인을 복사와 붙여넣기 등을 활용해 간단하게 제작 했습니다.

무료 이용