게시판 디자인, 목록·상세 화면은 어떻게 구성해야 할까?

홈페이지 게시판 디자인은 표를 예쁘게 꾸미는 것보다 목록에서 필요한 글을 빠르게 찾고, 상세 화면에서 내용을 편하게 읽은 뒤 다시 원하는 위치로 이동할 수 있도록 흐름을 만드는 것이 중요합니다.

공지사항처럼 제목과 날짜가 중요한 게시판도 있고, 포트폴리오나 시공 사례처럼 이미지가 먼저 보여야 하는 게시판도 있습니다. 같은 게시판이라도 목적에 따라 목록에 보여줄 정보와 상세페이지 구성이 달라져야 합니다.

게시판 목록은 모든 정보를 보여줄 필요가 없습니다

일반 게시판 목록에는 번호, 제목, 작성자, 날짜, 조회수처럼 여러 정보가 들어갈 수 있습니다.

하지만 모든 항목을 같은 비중으로 보여주면 사용자가 정작 찾으려는 글 제목이 묻힐 수 있습니다.

목록 화면에서 먼저 생각할 것은 사용자가 글을 찾을 때 무엇을 기준으로 보는가입니다.

예를 들어 공지사항이라면 제목을 가장 넓게 배치하고 날짜와 번호는 보조 정보로 둘 수 있습니다. 작성자나 조회수가 실제 이용에 큰 의미가 없다면 비중을 줄이거나 필요에 따라 제외하는 것도 방법입니다.

목록 화면은 많은 정보를 보여주는 곳이라기보다 여러 게시물 가운데 원하는 글을 빠르게 고르는 화면에 가깝습니다.

제목은 게시판 목록에서 가장 먼저 읽혀야 합니다

일반적인 게시판에서는 제목이 가장 중요한 정보가 되는 경우가 많습니다.

그런데 번호, 분류, 작성자, 조회수에 각각 넓은 공간을 주면 제목 영역이 좁아지고 긴 글 제목이 지나치게 많이 잘릴 수 있습니다.

새로운 글이나 중요한 공지를 구분해야 한다면 배지나 아이콘을 활용할 수도 있습니다. 다만 여러 표시를 한꺼번에 붙이면 오히려 제목을 읽기 어려워질 수 있으므로 공지, 새 글, 첨부파일처럼 실제로 필요한 상태만 구분하는 편이 깔끔합니다.

카테고리가 있는 게시판도 마찬가지입니다. 분류명을 제목보다 강하게 보여주기보다 사용자가 글을 구분하는 보조 정보로 활용하는 것이 좋습니다.

일반 게시판과 갤러리 게시판은 목록 구조가 달라야 합니다

게시판이라고 해서 항상 표 형태가 적합한 것은 아닙니다.

갤러리 게시판에서는 이미지가 단순한 장식이 아니라 게시물을 구분하는 주요 정보가 됩니다. 그래서 썸네일 크기와 비율을 일정하게 맞추고, 제목과 짧은 설명이 이미지와 경쟁하지 않도록 구성하는 것이 중요합니다.

예를 들어 인테리어 포트폴리오라면 현장 사진을 먼저 보여주고 프로젝트명이나 공간 유형을 함께 표시할 수 있습니다. 이미지 없이 제목만 나열하는 것보다 어떤 프로젝트인지 빠르게 구분하기 쉽습니다.

검색과 분류 기능은 글이 많아질수록 중요해집니다

게시물이 몇 개 없는 초기에는 전체 목록만 있어도 크게 불편하지 않을 수 있습니다.

하지만 글이 계속 쌓이면 이전 게시물을 찾는 일이 어려워집니다. 이때 검색이나 카테고리 분류가 필요해집니다.

검색창은 눈에 띄기만 하면 되는 것이 아니라 사용자가 무엇을 검색할 수 있는지 이해하기 쉬워야 합니다. 게시판 특성에 따라 제목, 내용, 작성자 등의 검색 범위를 사용할 수 있고, 게시물이 여러 주제로 나뉜다면 카테고리를 함께 활용할 수 있습니다.

현재 게시물 수와 앞으로 콘텐츠가 얼마나 늘어날지를 보고 필요한 기능을 정하는 편이 좋습니다.

상세 화면에서는 본문 읽기에 집중할 수 있어야 합니다

목록에서 글을 선택했다면 상세페이지에서는 정보의 우선순위가 달라집니다.

게시판 목록에서는 여러 글을 비교해야 하지만 상세 화면에서는 선택한 게시물 하나를 읽는 것이 목적입니다.

첨부파일이 있는 게시판이라면 본문과 섞이지 않도록 별도의 영역으로 구분할 수 있습니다. 이미지가 여러 장 들어가는 포트폴리오나 갤러리 게시판이라면 본문 폭과 이미지 크기도 함께 고려해야 합니다.

본문이 너무 넓으면 긴 문장을 읽기 힘들고, 반대로 지나치게 좁으면 줄바꿈이 많아져 화면이 길어질 수 있습니다.

게시판 상세 디자인에서는 화려한 장식보다 제목 → 부가 정보 → 본문 → 다음 이동이 자연스럽게 이어지는지가 더 중요합니다.

상세페이지 아래에는 어디로 이동할지 보여주는 것이 좋습니다

글을 다 읽은 뒤 아무 이동 요소가 없다면 사용자는 브라우저 뒤로 가기를 사용하게 됩니다.

게시판 성격에 따라 목록으로 돌아가는 버튼이나 이전글·다음글 이동을 둘 수 있습니다. 관련 게시물을 계속 탐색하는 것이 중요한 사이트라면 이전글·다음글이 유용할 수 있고, 공지사항처럼 원하는 글 하나를 확인하는 경우에는 목록 버튼만 명확해도 충분할 수 있습니다.

작성 권한이 있는 사용자에게 수정·삭제 버튼이 필요한 경우에도 콘텐츠 탐색 버튼과 같은 비중으로 보여줄 필요는 없습니다.

모바일에서는 PC 게시판을 그대로 줄이면 안 됩니다

PC에서는 번호, 제목, 작성자, 날짜, 조회수를 한 줄에 나란히 보여줄 수 있습니다.

하지만 모바일에서 같은 표를 그대로 줄이면 제목 영역이 지나치게 좁아지거나 가로 스크롤이 생길 수 있습니다.

예를 들어 PC에서는 한 줄로 표시하던 정보를 모바일에서는 제목을 첫 줄에 두고 날짜나 분류를 아래쪽 보조 정보로 배치할 수 있습니다.

갤러리 게시판 역시 PC에서 여러 열로 보이던 카드를 모바일에서는 화면 너비에 맞춰 열 수를 줄이는 식으로 조정할 수 있습니다.

반응형 게시판의 핵심은 PC 화면을 작게 만드는 것이 아니라 좁은 화면에서도 같은 정보를 무리 없이 찾을 수 있도록 다시 정리하는 것입니다.

글이 없을 때와 검색 결과가 없을 때도 화면이 필요합니다

게시판 디자인에서 자주 빠지는 부분이 빈 화면입니다.

아직 등록된 게시물이 없거나 검색 결과가 없을 때 아무것도 나타나지 않으면 오류처럼 느껴질 수 있습니다.

긴 제목, 첨부파일이 많은 글, 이미지가 없는 갤러리 게시물처럼 실제 운영 중 생길 수 있는 예외 상황도 미리 확인하는 것이 좋습니다.

샘플 데이터 몇 개가 예쁘게 들어간 화면만 보고 끝내기보다 콘텐츠가 적을 때, 많을 때, 길어질 때도 레이아웃이 유지되는지까지 보면 실제 운영에서 수정할 일이 줄어듭니다.

디자인키트에서는 어떤 게시판 화면을 볼 수 있을까요?

디자인키트의 상세페이지 템플릿에는 공지사항이나 소식을 전달하는 일반게시판과 이미지 중심의 갤러리 게시판처럼 서로 다른 형태의 게시판 디자인이 있습니다.

일반게시판은 정보와 제목을 확인하기 좋은 목록 구조를 볼 수 있고, 갤러리 게시판은 썸네일과 본문 이미지, 설명 영역을 나눠 구성한 형태를 살펴볼 수 있습니다. 상세페이지 목록에서는 PC와 모바일 샘플을 각각 확인할 수 있는 게시판 템플릿도 있습니다.

또 그누보드 테마가 적용되는 웹 템플릿의 경우 상품에 따라 공지사항, 갤러리, 자주하는질문 등의 게시판 스킨이 포함될 수 있습니다.

따라서 디자인키트에서 게시판 관련 자료를 찾을 때도 먼저 화면 디자인을 찾는 것인지, 그누보드 게시판 기능까지 필요한 것인지를 구분하는 것이 좋습니다.

게시판 디자인 전 확인할 것

게시판 화면을 만들기 전에 게시물의 성격부터 정리하면 목록과 상세페이지 구조를 잡기 쉬워집니다.

모바일에서는 어떤 정보를 줄일지, 상세페이지에서는 본문 외에 첨부파일이나 이전글·다음글이 필요한지도 미리 정하면 이후 퍼블리싱 과정에서 구조를 다시 바꾸는 일을 줄일 수 있습니다.

자주 묻는 질문

좋은 게시판 디자인은 글을 찾고 읽는 과정을 줄여줍니다

게시판 디자인은 선이나 색상을 어떻게 꾸밀지보다 사용자가 원하는 게시물을 얼마나 쉽게 찾을 수 있는지가 먼저입니다.

목록에서는 제목과 핵심 정보를 빠르게 비교할 수 있어야 하고, 상세에서는 선택한 글을 읽는 데 집중할 수 있어야 합니다. 게시물을 읽은 뒤에는 목록이나 다른 글로 자연스럽게 이동할 수 있는 흐름도 필요합니다.

일반 게시판과 갤러리 게시판도 같은 기준으로 만들 필요는 없습니다. 콘텐츠가 텍스트 중심인지 이미지 중심인지에 따라 목록 구조부터 달라지는 것이 자연스럽습니다.

디자인키트의 게시판 상세페이지 템플릿을 살펴볼 때도 색상이나 스타일뿐 아니라 PC와 모바일에서 정보가 어떻게 배치되는지, 목록과 상세 화면이 실제 콘텐츠에 맞는 구조인지 함께 비교해보면 좋습니다.

디자인키트 HTML 소스 가격 개편도 함께 보기

HTML 소스를 활용해 게시판이 포함된 홈페이지 화면을 구성하거나, 그누보드 테마까지 함께 검토하고 있다면 디자인키트의 HTML 소스 가격 개편 내용도 이어서 살펴볼 수 있습니다.

디자인키트 HTML 소스 가격 개편 내용은 관련 공지에서 확인할 수 있습니다.

작성자: 디자인키트

발행일: 2026.09.29

최종 수정일: 2026.09.29