1. 이제부터는 “구조를 코드로 옮기는 단계입니다”
Part 1에서는 게시판을 코드가 아닌 구조와 흐름으로 먼저 살펴보았습니다.
게시판이 단순한 페이지가 아니라,
- 데이터가 오가고
- 사용자가 행동하고
- 화면이 그에 맞게 반응하는
하나의 작은 서비스라는 점을 이해하는 것이 핵심이었습니다.
이번 Part 2에서는 그 구조를 바탕으로 처음으로 실제 화면을 만들기 시작합니다.
다만, 이 글의 목표는 “예쁜 게시판을 빠르게 완성하는 것”이 아닙니다.
AI가 만들어준 코드를 이해할 수 있는 상태로 받아들이는 것
이것이 Part 2의 가장 중요한 목적입니다.
2. Part 2에서 무엇을 만들게 되나요?
이번 글에서는 다음을 완성합니다.
- 게시판 목록 화면의 기본 레이아웃
- 모바일부터 데스크톱까지 동작하는 반응형 구조
- 이후 Part 3~4에서 기능을 붙이기 쉬운 HTML 뼈대
아직 이 단계에서는,
- 실제 데이터 처리
- 서버 연동
- 저장 기능
같은 것은 다루지 않습니다.
👉 “게시판처럼 보이는 구조”를 먼저 만드는 단계입니다.
3. 반응형 게시판 레이아웃, 왜 중요한가요?
초보자분들이 흔히 이렇게 생각하십니다.
“일단 PC에서 잘 나오면 되지 않나요?”
하지만 실제 웹 환경에서는 다릅니다.
- 모바일 사용자 비중이 더 높고
- 게시판은 특히 모바일 접근이 잦으며
- 나중에 반응형을 추가하려면 구조를 다시 뜯어야 합니다
그래서 이 시리즈에서는 처음부터 모바일 기준(Mobile First)으로 설계합니다.
모바일 → 태블릿 → 데스크톱
이 순서가 가장 수정이 적습니다.
4. 게시판 목록 화면의 기본 구조 이해하기
코드를 보기 전에,
먼저 “화면이 어떻게 나뉘는지”부터 정리하겠습니다.
게시판 목록 화면은 보통 다음 영역으로 구성됩니다.
- 헤더(Header)
- 게시판 제목 영역
- 게시글 목록 영역
- 페이지 이동 영역(페이징)
이번 Part 2에서는
페이징 UI는 자리만 잡고,
실제 동작은 Part 4에서 구현합니다.
5. Cursor에게 지시할 프롬프트 (중요)
이제 AI에게 코드를 요청할 차례입니다.
여기서 중요한 점은 한 번에 너무 많은 것을 요구하지 않는 것입니다.
아래 프롬프트는
Part 2에서 그대로 입력하셔도 되는 지시문입니다.
📌 Cursor 입력 프롬프트 (1단계)
반응형 게시판 목록 페이지의 기본 레이아웃을 만들어줘.
조건:
- HTML과 CSS만 사용
- 모바일 기준(Mobile First)으로 설계
- 헤더, 게시판 제목 영역, 게시글 목록 영역, 페이지 이동 영역 포함
- 게시글 목록은 테이블이 아닌 div 기반 리스트 구조
- 각 영역마다 주석을 상세하게 작성
초보자가 구조를 이해할 수 있도록 HTML 구조를 최대한 단순하게 구성해줘.
이 프롬프트를 입력하면
실행 가능한 기본 코드가 생성될 것입니다.
이제부터 중요한 것은
“코드를 그대로 쓰느냐”가 아니라
구조를 읽는 연습입니다.
이해를 돕기 위해 제공하는 캡쳐로 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
6. 생성된 HTML 구조, 이렇게 보시면 됩니다
AI가 생성한 HTML을 보면 다음과 같은 구조를 가지고 있습니다.(일부 발췌)
<!--
============================================
헤더 영역 (Header)
============================================
페이지 최상단에 위치하는 고정 영역
사이트 로고, 메뉴, 사용자 정보 등을 표시
-- >
<header class="header">
<!-- 헤더 내부 컨텐츠를 감싸는 컨테이너 -->
<div class="container">
<!-- 사이트 로고 또는 제목 -->
<h1 class="logo">게시판</h1>
<!-- 네비게이션 메뉴 (선택사항) -->
<nav class="nav">
<a href="#" class="nav-link">홈</a>
<a href="#" class="nav-link">게시판</a>
</nav>
</div>
</header>
<!--
============================================
게시판 제목 영역 (Board Title Section)
============================================
게시판의 이름과 설명을 표시하는 영역
-->
<section class="board-title-section">
<!-- 게시판 제목 -->
<h2 class="board-title">자유게시판</h2>
<!-- 게시판 설명 (선택사항) -->
<p class="board-description">자유롭게 글을 작성하고 소통할 수 있는 공간입니다.</p>
</section>
<!--
============================================
푸터 영역 (Footer)
============================================
페이지 하단에 위치하는 영역
저작권 정보, 연락처 등을 표시 (선택사항)
-->
<footer class="footer">
<div class="container">
<p class="footer-text">© 2024 게시판. All rights reserved.</p>
</div>
</footer>
<header>: 상단 영역<main>: 게시판 전체 영역- 게시판 제목
- 게시글 리스트
- 페이지 영역
<footer>: 하단 정보
여기서 중요한 포인트는 다음입니다.
- 게시글 하나하나가 같은 구조의 반복이라는 점
- CSS는 “디자인”보다 정렬과 흐름을 담당한다는 점
- 기능이 없는 지금 단계에서도 확장 가능한 구조를 갖고 있다는 점
7. 게시글 목록 구조를 이해하는 것이 핵심입니다
게시판에서 가장 중요한 영역은
단연 게시글 목록입니다.
이 영역은 이후 Part 3에서:
- 클릭 이벤트가 붙고
- 상세 페이지로 연결되며
- 댓글과 연동됩니다
그래서 이 단계에서는
게시글 하나를 “데이터 덩어리”로 보는 연습이 필요합니다.
예를 들어 게시글 하나에는:
- 제목
- 작성자
- 작성일
- 조회수
같은 정보가 들어갑니다.
지금은 더미 텍스트여도 괜찮습니다.
중요한 것은 구조가 반복 가능하게 만들어졌는지입니다.
8. CSS를 볼 때 초보자가 꼭 봐야 할 포인트
CSS가 길어 보이면 많은 분들이 바로 포기합니다.
한번 보시겠습니다(일부발췌)
.header .container {
/* 플렉스박스 레이아웃 사용 */
display: flex;
/* 요소들을 양 끝으로 배치 */
justify-content: space-between;
/* 세로 중앙 정렬 */
align-items: center;
/* 세로 패딩 */
padding: 15px;
}
/*
============================================
데스크톱 스타일 (Desktop Styles)
============================================
화면 너비가 1024px 이상일 때 적용되는 스타일
*/
@media (min-width: 1024px) {
/* 컨테이너 최대 너비 더 증가 */
.container {
max-width: 1000px;
padding: 0 30px;
}
/* 게시판 제목 폰트 크기 증가 */
.board-title {
font-size: 28px;
}
/* 게시글 제목 링크 폰트 크기 증가 */
.post-link {
font-size: 18px;
}
/* 페이지네이션 요소 간 간격 증가 */
.pagination {
gap: 10px;
}
}
하지만 Part 2에서 CSS는 아래 3가지만 보셔도 충분합니다.
- 레이아웃 방식
- flex 또는 grid 사용 여부
- 반응형 처리
- 미디어 쿼리(@media) 존재 여부
- 모바일 기준 정렬
- 한 줄 구조 → 넓어질수록 확장
색상이나 디자인은 중요하지 않습니다.
이 단계에서는 배치와 흐름만 보시면 됩니다.
9. “이 코드는 왜 여기 있는가?”를 계속 질문하세요
AI가 만든 코드를 볼 때
다음 질문을 계속 던지시는 것이 좋습니다.
- 이 div는 어떤 역할인가요?
- 이 클래스는 어떤 영역을 묶고 있나요?
- 나중에 기능이 추가되면 어디에 붙을까요?
이 질문을 하다 보면
코드를 외우지 않아도 이해가 쌓이기 시작합니다.
10. Part 2에서 완성된 상태 정리
이해를 돕기 위해 제공하는 캡쳐화면으로 본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
여기까지 진행하셨다면,
현재 상태는 다음과 같습니다.
- 게시판처럼 보이는 화면이 존재하고
- 모바일에서도 깨지지 않으며
- 이후 기능을 붙일 수 있는 구조가 완성된 상태
아직은 “동작하지 않는 게시판”이지만,
실무에서도 이 단계가 반드시 필요합니다.
11. 다음 Part 3에서는 무엇을 하나요?
다음 Part 3에서는 이제 정말 “게시판답게” 만들기 시작합니다.
- 글쓰기 화면 구조
- 게시글 클릭 흐름
- 댓글 영역 UI 구성
즉, 사용자 액션이 처음으로 등장합니다.
Part 2의 레이아웃이 잘 이해되어 있다면
Part 3부터는 AI 코드가 훨씬 읽히실 것입니다.
마무리
AI로 코딩을 시작하면
“빨리 결과물을 보고 싶은 마음”이 드는 것이 당연합니다.
하지만 게시판처럼
조금만 복잡해져도 유지되는 구조를 만들려면
이 Part 2 단계는 절대 건너뛸 수 없습니다.
다음 글에서는
게시판에 생명력을 불어넣는 단계로 넘어가겠습니다.
다음 Part 3에서 계속 이어가겠습니다.
이전 편 다시보기
AI 웹 개발 : 부업용 쇼핑몰 페이지 구조 기획 (초보자·비전공자 실무 강화) | 쇼핑몰 만들기 Part 1
AI 웹 개발 : Cursor로 반응형 쇼핑몰 페이지 구현하기 (초보자·비전공자 실무 강화) | 쇼핑몰 만들기 Part 2
AI 웹 개발 : Cursor로 상품리스트 & 카드 UI 구현하기 (초보자·비전공자 실무 강화) | 쇼핑몰 만들기 Part 3
AI 웹 개발 : Cursor로 검색·필터·페이징 기능 구현하기 (초보자ㆍ비전공자 실무 강화) | 쇼핑몰 만들기 Part 4
AI 웹 개발 : Cursor로 장바구니·결제 UI + UX 최적화 (초보자ㆍ비전공자 실무 강화) | 쇼핑몰 만들기 Part 5