1. 게시판을 “쓰는 공간”에서 “찾는 공간”으로
Part 3까지 진행하면서
우리 게시판은 다음 상태가 되었습니다.
- 게시글 목록이 있고
- 글을 작성할 수 있으며
- 댓글을 통해 사용자 참여도 가능한 상태
하지만 여전히 한 가지 큰 문제가 남아 있습니다.
글이 많아졌을 때,
이 게시판을 어떻게 탐색할 것인가?
실제 서비스에서
게시판이 불편하다고 느껴지는 순간은 대부분 이때입니다.
- 글이 너무 많아 한눈에 안 보일 때
- 원하는 글을 찾기 어려울 때
- 페이지 이동이 직관적이지 않을 때
그래서 이번 Part 4에서는
게시판의 “가독성과 탐색성”을 책임지는 핵심 기능들을 다룹니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
2. Part 4에서 구현할 기능 정리
이번 글에서 다룰 기능은 다음 세 가지입니다.
- 페이징(Page Navigation)
- 검색(Search UI)
- 필터(Filter UI)
⚠️ 중요한 점은
이번 Part에서도 실제 데이터 처리 로직은 구현하지 않습니다.
이번 단계의 목표는:
- “기능이 붙을 수 있는 구조”
- “실무에서 바로 확장 가능한 UI”
를 만드는 것입니다.
3. 용어 설명 — 페이징, 검색, 필터란 무엇인가요?
초보자분들을 위해
먼저 용어부터 간단히 정리하겠습니다.
▪ 페이징(Paging)
게시글을 여러 페이지로 나누어 보여주는 방식입니다.
예: 1 / 2 / 3 / 다음
👉 한 페이지에 너무 많은 글을 보여주지 않기 위해 사용합니다.
▪ 검색(Search)
사용자가 키워드를 입력해
원하는 게시글을 찾는 기능입니다.
👉 제목, 내용, 작성자 기준으로 확장될 수 있습니다.
▪ 필터(Filter)
게시글을 조건별로 걸러서 보는 기능입니다.
예:
- 최신순 / 오래된 순
- 특정 카테고리
- 특정 상태
👉 검색보다 더 “선택형 탐색”에 가깝습니다.
4. 왜 이 기능들이 실무에서 중요한가요?
실무 기준으로 보면
이 세 가지 기능은 “옵션”이 아닙니다.
- 게시판이 커질수록 필수
- 없으면 “연습용 프로젝트”처럼 보임
- 있으면 서비스 완성도가 급격히 상승
특히 포트폴리오 관점에서는 Part 4 기능이 들어가느냐에 따라
“연습 프로젝트”와 “실무형 프로젝트”가 갈립니다.
5. 페이징 UI 구조 설계하기
먼저 페이징입니다.
페이징 UI는 보통 다음 요소로 구성됩니다.
- 이전 버튼
- 페이지 번호
- 다음 버튼
이 세 가지가 한 묶음으로 구성되어야
이후 기능 구현이 수월해집니다.
📌 Cursor 입력 프롬프트 ① — 페이징 UI
게시판 목록 하단에 페이징 UI를 추가해 줘.
조건:
- 이전 / 페이지 번호 / 다음 버튼 구성
- 모바일에서도 누르기 쉬운 크기
- 실제 동작은 구현하지 않고 UI 구조만 작성
- 기존 게시글 목록과 자연스럽게 연결
HTML과 CSS만 사용하고 각 요소에 주석을 추가해 줘.
이 단계에서 중요한 것은
“페이지가 넘어간다”가 아니라,
페이지가 넘어갈 수 있어 보이는 구조입니다.
이해를 돕기 위해 직접 제공하는 캡쳐화면으로 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
Cursor 가 생성한 페이징 UI 소스코드(일부발췌)
<!--
============================================
페이지네이션 영역 (Pagination Section)
============================================
여러 페이지가 있을 때 페이지를 이동할 수 있는 영역
이전 페이지, 페이지 번호, 다음 페이지 버튼 포함
게시글 목록 하단에 자연스럽게 배치됨
-->
<section class="pagination-section">
<!--
페이지네이션 컨테이너
이전 버튼, 페이지 번호들, 다음 버튼을 감싸는 부모 요소
-->
<div class="pagination">
<!--
============================================
이전 페이지 버튼 (Previous Button)
============================================
이전 페이지로 이동하는 버튼
첫 페이지일 때는 비활성화 상태로 표시 가능
-->
<a href="#" class="pagination-btn pagination-prev" aria-label="이전 페이지">
<!-- 이전 버튼 텍스트 -->
<span class="pagination-btn-text">이전</span>
</a>
<!--
============================================
페이지 번호 영역 (Page Numbers)
============================================
각 페이지 번호를 클릭하여 해당 페이지로 이동
현재 페이지는 활성화 상태로 표시
-->
<div class="pagination-numbers">
<!-- 페이지 번호 1 -->
<a href="#" class="pagination-number">1</a>
<!-- 페이지 번호 2 (현재 페이지 - 활성화 상태) -->
<a href="#" class="pagination-number pagination-number-active">2</a>
<!-- 페이지 번호 3 -->
<a href="#" class="pagination-number">3</a>
<!-- 페이지 번호 4 -->
<a href="#" class="pagination-number">4</a>
<!-- 페이지 번호 5 -->
<a href="#" class="pagination-number">5</a>
</div>
<!-- pagination-numbers 끝 -->
<!--
============================================
다음 페이지 버튼 (Next Button)
============================================
다음 페이지로 이동하는 버튼
마지막 페이지일 때는 비활성화 상태로 표시 가능
-->
<a href="#" class="pagination-btn pagination-next" aria-label="다음 페이지">
<!-- 다음 버튼 텍스트 -->
<span class="pagination-btn-text">다음</span>
</a>
</div>
<!-- pagination 끝 -->
</section>
<!-- pagination-section 끝 -->
Cursor 가 생성한 페이징 UI 소스코드 설명
- 페이지네이션 컨테이너를 활용해 이전 버튼, 페이지 번호들, 다음 버튼을 감싸는 부모 요소를 담아냅니다.
- 이전 페이지 버튼으로 첫 페이지일 때는 비활성화 상태로 표시 가능
- 페이지 번호 영역에 페이지 구성으로 각 페이지 번호를 클릭하여 해당 페이지로 이동 현재 페이지는 활성화 상태로 표시
- 다음 페이지 버튼으로 마지막 페이지일 때는 비활성화 상태로 표시 가능
이해를 돕기 위해 직접 캡쳐하여 제공하는 이미지로 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
6. 검색 UI는 어디에 배치해야 할까요?
검색 UI는
게시판 UX에서 위치가 매우 중요합니다.
일반적으로는:
- 게시판 제목 바로 아래
- 또는 게시판 상단 오른쪽
이 두 위치가 가장 많이 사용됩니다.
이번 시리즈에서는
게시판 상단 영역에 검색 UI를 배치합니다.
📌 Cursor 입력 프롬프트 ② — 검색 UI
게시판 상단에 검색 UI를 추가해 줘.
조건:
- 검색어 입력 input
- 검색 버튼 포함
- 모바일에서는 세로 배치
- 데스크톱에서는 가로 배치
- 실제 검색 기능은 구현하지 않음
게시판 제목 영역과 자연스럽게 연결해 줘.
검색 UI가 추가되면
게시판의 “서비스 느낌”이 크게 살아납니다.
이해를 돕기 위해 제공하는 캡쳐화면으로 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
Cursor 가 생성한 검색 UI 소스코드(일부발췌)
<section class="search-section">
<!--
검색 폼 컨테이너
검색어 입력 필드와 검색 버튼을 감싸는 부모 요소
-->
<form class="search-form" action="#" method="get">
<!--
============================================
검색어 입력 영역 (Search Input Area)
============================================
사용자가 검색어를 입력하는 input 필드
-->
<div class="search-input-wrapper">
<!-- 검색어 입력 필드 -->
<input
type="text"
id="search-keyword"
name="keyword"
class="search-input"
placeholder="검색어를 입력하세요"
>
</div>
<!-- search-input-wrapper 끝 -->
<!--
============================================
검색 버튼 영역 (Search Button Area)
============================================
검색을 실행하는 버튼
(실제 검색 기능은 구현하지 않으므로 type="button" 사용)
-->
<div class="search-button-wrapper">
<!-- 검색 버튼 -->
<button type="button" class="search-btn">
검색
</button>
</div>
<!-- search-button-wrapper 끝 -->
</form>
<!-- search-form 끝 -->
</section>
<!-- search-section 끝 -->
Cursor 가 생성한 검색 UI 소스코드 설명
- input field로 검색어 입력 필드 생성
- Wrapper 활용으로 입력 필드 정의
- 검색 버튼 생성
이해를 돕기 위해 직접 캡쳐한 화면으로 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
7. 필터 UI는 검색과 어떻게 다른가요?
검색은 사용자가 직접 입력합니다.
필터는 사용자가 선택합니다.
그래서 필터 UI는 보통:
- 드롭다운(select)
- 버튼 그룹
- 체크박스
형태로 구성됩니다.
이번 Part 4에서는
드롭다운 기반 필터 UI를 사용합니다.
📌 Cursor 입력 프롬프트 ③ — 필터 UI
게시판 검색 영역 옆에 필터 UI를 추가해 줘
조건:
- 드롭다운(select) 형태
- 예: 최신순 / 오래된순
- 검색 UI와 함께 배치
- 모바일에서는 줄바꿈 처리
- UI 구조만 구현
HTML/CSS 기준으로 작성해 줘.
이렇게 검색 + 필터가 함께 있으면
게시판 탐색 UX가 훨씬 좋아집니다.
이해를 돕기 위해 직접 캡쳐한 화면으로 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
Cursor 가 생성한 필터 UI 소스코드(일부발췌)
<!--
============================================
필터 영역 (Filter Area)
============================================
게시글 정렬 방식을 선택하는 드롭다운 필터
검색 UI와 함께 배치됨
-->
<div class="filter-wrapper">
<!-- 필터 드롭다운 -->
<select id="sort-filter" name="sort" class="filter-select">
<!-- 기본 옵션: 최신순 -->
<option value="latest" selected>최신순</option>
<!-- 오래된순 옵션 -->
<option value="oldest">오래된순</option>
</select>
</div>
<!-- filter-wrapper 끝 -->
Cursor 가 생성한 필터 UI 소스코드 설명
- 필터 드롭다운: select 요소 사용
- 옵션: 최신순(기본), 오래된순
- 위치: 검색 입력 필드와 검색 버튼 옆에 배
이해를 돕기 위해 직접 캡쳐한 화면으로 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
8. 초보자가 꼭 이해해야 할 실무 포인트
이 단계에서
많은 분들이 착각하는 부분이 있습니다.
“아직 기능도 없는데
이걸 왜 이렇게까지 만드나요?”
실무에서는 오히려 반대입니다.
- UI 구조가 먼저
- 그 위에 기능이 얹혀짐
- 구조가 잘못되면 기능 추가가 어려움
그래서 Part 4는
기능 구현 전 마지막 구조 설계 단계라고 보시면 됩니다.
9. Part 4까지 완성된 게시판 상태
여기까지 완료하셨다면
게시판은 다음 상태가 됩니다.
- 게시글 목록
- 글쓰기 / 댓글 UI
- 페이징 UI
- 검색 UI
- 필터 UI
- 반응형 레이아웃 유지
즉,
“기능만 붙이면 바로 서비스가 될 수 있는 상태”
까지 온 것입니다.
전체 소스코드 보기 => [제로의 GitHub 저장소 바로가기]
10. 다음 Part 5에서는 무엇을 하나요?
다음 Part 5는
이번 게시판 시리즈의 마지막 글입니다.
Part 5에서는:
- 전체 UI/UX 정리
- 중복 구조 정리
- 코드 가독성 개선
- 실무 기준으로 마무리
즉,
게시판을 ‘완성본’으로 정리하는 단계입니다.
마무리
AI를 사용하면
페이징·검색·필터 UI는 정말 빠르게 만들 수 있습니다.
하지만 이 Part 4의 진짜 목적은
“빠른 구현”이 아니라,
게시판 구조를 실무 기준으로 이해하는 것
입니다.
다음 Part 5에서
이번 게시판 시리즈를 깔끔하게 마무리해보겠습니다.
다음 글에서 이어가겠습니다.
이전 편 다시보기
AI 웹 개발 : 쇼핑몰 페이지 편(Part1~Part5) 다시보기
AI 웹 개발 : 반응형 게시판 기본 레이아웃 만들기 (초보자ㆍ비전공자를 위한 AI 웹 개발 실무 시리즈) | Part 2
AI 웹 개발 : 반응형 게시판 글쓰기 & 댓글 기능 구현하기 (초보자ㆍ비전공자를 위한 AI 웹 개발 실무 시리즈) | Part 3