1. AI로 코딩하는 시대, 왜 “구조”부터 봐야 할까요?
최근 AI 도구를 활용한 웹 개발이 빠르게 확산되고 있습니다.
Cursor, GPT 계열 도구를 사용하면 HTML과 CSS는 물론, JavaScript 코드까지도 비교적 쉽게 생성할 수 있습니다.
실제로 많은 분들이 이렇게 시작하십니다.
- “AI로 게시판 만들어줘”
- “댓글 기능 있는 페이지 만들어줘”
- “반응형 웹페이지 코드 짜줘”
그러면 놀랍게도 바로 실행 가능한 코드가 생성됩니다.
하지만 문제는 그 다음부터 입니다.
- 코드가 너무 길어서 어디를 고쳐야 할지 모르겠고
- 조금 수정하면 전체 레이아웃이 깨지고
- 기능을 추가하려고 하면 더 복잡해집니다
이런 상황은 개인 능력 부족이 아니라, 접근 순서의 문제입니다.
AI로 코딩할수록 오히려 더 중요해지는 것이 있습니다.
바로 페이지 구조와 데이터 흐름을 먼저 이해하는 것입니다.
그래서 이번 시리즈는
“코드를 먼저 보지 않는다”는 원칙으로 시작합니다.
2. 왜 하필 ‘게시판’인가요?
웹 페이지에는 여러 형태가 있습니다.
- 랜딩 페이지
- 쇼핑몰
- 대시보드
- 관리자 페이지
그중에서도 게시판은 가장 기본적이면서도 실무 요소가 가장 많이 담긴 구조입니다.
게시판 하나에는 다음과 같은 개념이 모두 들어갑니다.
- 데이터 목록 출력
- 상세 페이지 구조
- 사용자 입력 폼
- 데이터 저장과 갱신 흐름
- 검색, 페이징, 필터 개념
- UX(사용자 경험) 설계
즉, 게시판을 제대로 이해하면
웹 서비스의 뼈대를 이해했다고 볼 수 있습니다.
그래서 이 시리즈에서는 게시판을 “연습용 예제”가 아니라
실제 서비스의 축소판으로 다룹니다.
3. 이 시리즈의 핵심 관점
이 시리즈는 처음부터 명확한 관점을 가지고 진행됩니다.
AI는 코드를 만들어주는 도구이고,
구조와 흐름은 사람이 설계해야 합니다.
AI가 아무리 좋은 코드를 만들어도
구조를 이해하지 못하면 다음 문제가 반복됩니다.
- 왜 이 div가 여기 있는지 모르겠다
- 이 코드가 어떤 역할을 하는지 모르겠다
- 수정 요청이 오면 대응할 수 없다
그래서 Part 1에서는
아직 코드를 보지 않습니다.
대신, 게시판이 어떤 구조로 만들어지고
데이터가 어떤 흐름으로 이동하는지부터 정리합니다.
4. 게시판을 “화면”이 아니라 “데이터 흐름”으로 이해하기
초보자분들은 게시판을 이렇게 인식하는 경우가 많습니다.
“글 목록 페이지 하나, 글쓰기 페이지 하나면 끝 아닌가요?”
하지만 실제로 게시판은 데이터 흐름의 집합입니다.
예를 들어 게시판에서 글 하나를 클릭하는 순간, 내부에서는 이런 일이 발생합니다.
- 사용자가 게시판 목록에 접속합니다
- 글 목록 데이터가 화면에 표시됩니다
- 특정 글을 클릭합니다
- 해당 글의 상세 데이터가 불러와집니다
- 댓글 데이터가 함께 로딩됩니다
- 사용자가 댓글을 작성합니다
- 데이터가 저장되고 화면이 다시 갱신됩니다
이 흐름을 이해하지 못하면
AI가 만든 코드를 봐도 “그냥 결과물”로만 보이게 됩니다.
5. 게시판에서 다루는 데이터는 무엇인가요?
게시판의 데이터는 생각보다 단순합니다.
게시글(Post) 데이터 예시
- 글 번호 (id)
- 제목 (title)
- 내용 (content)
- 작성자 (author)
- 작성일 (createdAt)
- 조회수 (viewCount)
댓글(Comment) 데이터 예시
- 댓글 번호
- 소속 글 ID
- 댓글 내용
- 작성자
- 작성일
Part 1에서는 이 데이터들을 어디에 저장할지보다,
어떤 흐름으로 사용되는지에 집중합니다.
6. 게시판의 기본 화면 구성
이번 시리즈에서 다룰 게시판은 다음 구조를 기준으로 합니다.
- 게시글 목록 화면
- 게시글 상세 화면
- 글쓰기 화면
- 댓글 영역
이 네 가지 화면은 이후 모든 기능의 기준이 됩니다.
7. 사용자 기준으로 보는 게시판 UX 흐름
UX(User Experience)는
“사용자가 서비스를 이용하면서 느끼는 흐름”입니다.
게시판 UX는 다음 질문에 답할 수 있어야 합니다.
- 글을 쉽게 찾을 수 있는가?
- 읽는 흐름이 자연스러운가?
- 댓글을 쓰는 과정이 직관적인가?
기본적인 UX 흐름은 다음과 같습니다.
- 게시판 진입
- 글 목록 확인
- 글 클릭 → 상세 진입
- 댓글 확인
- 댓글 작성
- 목록으로 돌아가기
이 흐름을 기준으로
HTML 구조와 CSS 레이아웃이 결정됩니다.
8. 왜 Part 1에서는 코드를 작성하지 않을까요?
많은 튜토리얼은 바로 코드부터 시작합니다.
하지만 이 방식은 초보자에게 다음 문제를 남깁니다.
- 코드를 이해하지 못한 채 복사하게 되고
- 조금만 구조가 바뀌면 대응하지 못합니다
그래서 이번 시리즈에서는
구조 → 흐름 → 코드 순서로 진행합니다.
이 순서가 되어야
AI가 진짜 “도움이 되는 도구”가 됩니다.
9. 이번 게시판 시리즈 전체 구성
| Part | 내용 |
|---|---|
| Part 1 | 게시판 구조와 데이터 흐름 설계 |
| Part 2 | 반응형 게시판 기본 레이아웃 |
| Part 3 | 글쓰기 & 댓글 기능 구현 |
| Part 4 | 페이징·검색·필터 기능 |
| Part 5 | UI/UX 개선 + 코드 최적화 |
10. Part 1을 통해 반드시 가져가야 할 핵심
이 글을 읽고 나서
다음 질문에 스스로 답할 수 있다면 충분합니다.
- 게시판에 어떤 데이터가 필요한지 설명할 수 있는가?
- 글 목록 → 상세 → 댓글의 흐름을 말로 설명할 수 있는가?
- “이 기능은 왜 필요한가?”를 생각해볼 수 있는가?
이 상태가 되면
Part 2에서 등장하는 AI 코드가 훨씬 이해되기 시작합니다.
11. 다음 글에서는 무엇을 하나요?
다음 Part 2에서는
이번 글에서 정리한 구조를 바탕으로,
- Cursor를 사용해
- 반응형 게시판 기본 레이아웃을 생성하고
- HTML/CSS 구조를 하나씩 해설합니다
그때부터 실제 코드가 등장합니다.
지금은 조급해하지 않으셔도 됩니다.
이 Part 1이 이후 모든 이해도를 결정합니다.
다음 글에서 계속 이어가겠습니다.
[Cursor AI 바로가기]
이전 편 다시보기
AI 웹 개발 : 부업용 쇼핑몰 페이지 구조 기획 (초보자·비전공자 실무 강화) | 쇼핑몰 만들기 Part 1
AI 웹 개발 : Cursor로 반응형 쇼핑몰 페이지 구현하기 (초보자·비전공자 실무 강화) | 쇼핑몰 만들기 Part 2
AI 웹 개발 : Cursor로 상품리스트 & 카드 UI 구현하기 (초보자·비전공자 실무 강화) | 쇼핑몰 만들기 Part 3
AI 웹 개발 : Cursor로 검색·필터·페이징 기능 구현하기 (초보자ㆍ비전공자 실무 강화) | 쇼핑몰 만들기 Part 4
AI 웹 개발 : Cursor로 장바구니·결제 UI + UX 최적화 (초보자ㆍ비전공자 실무 강화) | 쇼핑몰 만들기 Part 5
AI 코딩 시리즈 다시보기
[HTML/CSS 입문] AI로 로그인 페이지 만들어보기 (GPT vs Cursor vs AntiGravity) | Part 1
[HTML/CSS 입문] AI로 반응형 로그인 페이지 개선하기 (GPT vs Cursor vs AntiGravity) | Part 2
[HTML/CSS 입문] AI로 반응형 로그인 페이지 확장하기 (GPT vs Cursor vs AntiGravity) | Part 3
[HTML/CSS 입문] AI로 로그인 페이지 레이아웃(탭 메뉴) 만들어보기(GPT vs Cursor vs AntiGravity) | Part 4
[HTML/CSS 입문] AI로 반응형 UI 만들어보기 (GPT vs Cursor vs AntiGravity) – Part 5
[HTML/CSS 입문] AI로 만드는 헤더·푸터·레이아웃 비교(Gpt vs Cursor vs AntiGravity) | Part 6
[HTML/CSS 입문] AI로 로그인 이후 ‘대시보드 UI’ 만들기 (GPT vs Cursor vs AntiGravity) | Part 7
[HTML/CSS 입문] AI로 대시보드 차트 UI 만들기(GPT vs Cursor vs AntiGravity) | Part 8
[HTML/CSS 입문] AI로 실시간 데이터·검색/필터·테이블/페이징 UI 만들기 (GPT vs Cursor vs AntiGravity) | Part 9
[HTML/CSS/JS 입문] AI로 만드는 ‘완성형 실무 대시보드’ (GPT vs Cursor vs AntiGravity) | Part 10