1. 왜 ‘AI 기반 웹 개발, 웹 제작’인가
최근 몇 달 동안 웹 제작 부업 시장에서 가장 빠르게 성장하는 분야는 AI를 활용한 반응형 웹페이지(랜딩페이지) 제작입니다.
Cursor, Antigravity, GPT 등 도구들이 등장하면서 코드를 직접 많이 작성하지 않아도 웹페이지 수준이 크게 향상되고 있습니다.
하지만 한 가지 중요한 문제가 있습니다.
코드 자체는 AI가 만들어주지만 구조 이해, UX 설계, 반응형 기획은 사람이 직접 해야 한다는 점입니다.
초보 개발자나 비전공자는
- “코드는 만들어졌는데 수정이 안 된다”
- “페이지 구조가 복잡해서 건드릴 수가 없다”
- “부업 의뢰를 받았는데 유지보수 요청이 오면 대처가 어렵다”
이 문제를 거의 동일하게 경험합니다.
그래서 이 시리즈는 ‘AI는 도구이고, 설계는 사람이 한다’ 라는 관점으로 기획되어 있습니다.
코드는 Part 2 이후에서 만들어지지만, Part 1은 실무에서 반드시 해야 하는 구조 설계와 페이지 기획을 완성하는 단계입니다.
이 기획을 제대로 잡아두면 나중에 AI가 생성하는 코드도 훨씬 깔끔하게 나오고, 수정·확장 난이도도 낮아집니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
2. 구조를 설계할 수 있어야 AI가 진짜 도움이 된다
이 시리즈의 목표는 단순히 “코드를 따라 치는 튜토리얼”이 아니라 다음을 모두 포함합니다.
- 초보 개발자도 실무 기준의 구조 설계를 할 수 있게 만드는 것
- 비전공자도 AI와 협업해 웹페이지를 제작할 수 있게 하는 것
- 부업용 포트폴리오로 제출 가능한 완성도 있는 반응형 웹페이지 제작
- Cursor·Antigravity를 활용한 AI 기반 개발 프로세스 경험
- GitHub로 코드 공유 및 버전 관리 경험
이 Part 1은 기획이지만, 실제로는 실무에서 가장 중요한 단계입니다.
기획이 탄탄해야 Part 2 이후의 코드·레이아웃 구현도 일관성 있게 진행됩니다.
3. 이 시리즈는 어떻게 진행되는가
- Part 1: 페이지 구조 기획 및 UX 설계(현재 글)
- Part 2: AI를 활용한 기본 레이아웃(HTML/CSS) 자동 생성 및 수정
- Part 3: 모바일-데스크톱 반응형 완성
- Part 4: 실제 부업 포트폴리오 수준으로 구조 정리 + GitHub 업로드
Part 1에는 코드가 등장하지 않습니다.
대신, 코드보다 더 중요한 실무적 설계/기획을 완성합니다.
4. 기획 시작 전 반드시 정의해야 하는 요소들
많은 초보자들이 놓치는 핵심이 있습니다. 저도 1년이 지나서야 비로소 깨달았던 것은 바로 이것입니다.
코딩보다 먼저, 페이지 목적과 사용자 정의가 우선입니다.
초보일수록 어떤 목적을 갖고 있고 어떤 정의를 내려야 하는지.
즉, 경험이 부족해 기획력이 없다보니 문제를 해결 할 때도, 혹은 간단한 개발을 할 때에도.
코딩부터 하려고 하는 경향이 강합니다.
다시 말씀 드리지만 “목적” 과 “정의” 가 우선입니다.
4-1. 프로젝트 목적 정의
- 상품 판매용 페이지인지
- 포트폴리오용 데모 페이지인지
- 외주·부업 의뢰를 전제로 하는 샘플 페이지인지
이 목적에 따라 구조도, UI도 완전히 달라집니다.
4-2. 타깃 사용자 정의
타깃이 명확해야 구조가 명확해집니다.
예시:
- 20~30대 쇼핑몰 사용자
- 모바일 사용자 비중이 높은 고객
- 직관적인 상품 탐색을 원하는 사용자
UX 설계의 기준점이 됩니다.
4-3. 페이지의 필수 기능 정의
필수 기능부터 정리하는 것이 실무 방식입니다.
필수 요소 예시:
- 헤더(로고·메뉴·검색)
- Hero(배너)
- 상품 카드 그리드
- CTA 버튼
- 푸터 정보
선택 요소 예시:
- 필터/정렬 기능
- 다크모드
- 리뷰 미리보기
- SNS 공유
이 단계에서 구조가 70% 이상 정리됩니다.
5. 기능 우선순위 선정 (실무 핵심)
AI에게 “쇼핑몰 페이지 만들어줘”라고 하면 기능이 너무 많이 들어갑니다.
따라서 아래처럼 우선순위를 나눠야 AI가 과도한 기능을 넣지 않고 안정적인 구조를 생성합니다.
1순위(반드시 필요)
- 반응형 헤더
- Hero 배너
- 상품 카드 리스트
- CTA 버튼
- 푸터
2순위(있으면 좋음)
- 검색창
- 카테고리 필터
- 상품 hover 애니메이션
3순위(선택)
- 리뷰
- 찜하기
- 상세페이지 바로가기
- SNS 공유
Part 2에서는 이 1순위 기능을 중심으로 AI 코드 생성을 진행합니다.
6. UX 흐름(사용자 여정) 설계
쇼핑몰 페이지를 처음 접하는 사용자의 흐름을 시각화하면 AI가 생성하는 코드가 훨씬 구조가 좋아집니다.
기본 UX 흐름 예시
- 페이지 진입
- 헤더에서 카테고리/검색 확인
- 메인 배너에서 이벤트 인지
- 상품 카드 스크롤 탐색
- 카드 클릭 → 상세 탐색
- CTA 클릭(구매/장바구니/상세 이동)
이 흐름을 바탕으로 AI에게 프롬프트를 구성하면
→ 구조적이고 유지보수 쉬운 HTML/CSS가 생성됩니다.
7. 반응형 기준점(Breakpoint) 설정
반응형은 생각보다 코드 수정량이 많기 때문에 미리 기준점을 잡아두는 것이 실무 흐름입니다.
권장 Breakpoint
- Desktop : 1200px 이상
- Tablet : 768px ~ 1199px
- Mobile : ~ 767px
이 기준점으로
- 헤더 메뉴 정렬
- 상품 카드 개수
- Hero 배너 크기
를 조정할 것입니다.
8. AI와 사람이 협업하는 방식(실무 추천 패턴)
AI에게 맡기기 좋은 일 – 단순, 반복, 기초적
- HTML 레이아웃 초안
- CSS 그리드·Flexbox 구성
- 기본 반응형 스타일
- 반복되는 UI 컴포넌트
- 다크모드 스타일 자동화
사람이 맡아야 하는 일 – 구조설계, 테스트 등
- 페이지 구조 설계
- UI/UX 의도 설정
- 최종 구조 정리
- 모바일·태블릿 테스트
- 디테일한 수정 및 코드 해설
이런 방식으로 협업하면 코딩 스트레스 없이도 실무 구조의 웹페이지를 만들 수 있습니다.
9. 이 시리즈로 완성될 결과물
Part 4까지 완료하면 아래 결과물을 얻게 됩니다.
- 반응형 쇼핑몰 페이지 완성본
- Cursor에 입력한 모든 프롬프트
- 전체 코드 (GitHub 공개)
- Figma/Canva 기반 와이어프레임
- AI 기반 웹개발 실무 프로세스 체험
- 외주·부업 포트폴리오로 활용 가능한 결과물
10. 예상 페이지 레이아웃
만들게 되면 아마 이런 모양의 레이아웃이 나오게 될 것입니다.
해당 부분은 Figma 라는 AI를 활용한 부분이며 Figma는 UX/UI 디자이너 분들이 주로 사용하는 AI입니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
Figma에 입력할 프롬프트를 제공합니다.
---------------------------------------
[HEADER]
- Logo
- Menu
- Search / User icon
---------------------------------------
[HERO BANNER]
- Full width image
- Text + CTA button
---------------------------------------
[PRODUCT SECTION]
- 2~4 columns depending on screen
- Product image
- Product name
- Price
- CTA
---------------------------------------
[FOOTER]
- Links
- Contact
- Copyright
---------------------------------------
위 구조를 Figma의 프롬프트에 붙여 넣으시면 이미지를 볼 수 있습니다.
이 구조를 기반으로 Part 2에서 실제 HTML/CSS 생성이 진행됩니다.
11. AI 프롬프트 예시 (Part 2에서 활용될 내용)
부업용 쇼핑몰 페이지의 반응형 기본 레이아웃을 만들어줘.
헤더, 배너(Hero), 상품 카드 섹션, 푸터 포함.
모바일 기준 레이아웃 우선으로 구성하고, 각 섹션마다 주석을 상세히 달아줘.'
이 프롬프트로 생성되는 코드는 Part 2에서 실제 구현합니다. 다음 편을 기대해 주세요!
12. 외부·내부 링크
외부 링크
- Cursor: https://www.cursor.so
- GitHub(전체 코드 업로드 예정)
내부 링크 : HTML/CSS 입문 – 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
13. 마무리 및 다음 글 예고
Part 1에서는 코드 없이 설계만 진행했지만, 사실 이 기획이 전체 웹 프로젝트의 50% 이상입니다.
구조가 명확해야 AI가 생성하는 코드도 깔끔하고 유지보수가 쉬워집니다.
Part 2에서는:
- 실제로 Cursor를 이용해 코드를 생성하고
- 섹션별 HTML/CSS를 해설하고
- 반응형 기본 구조를 완성하는 단계로 넘어갑니다.