왜 AI로 ‘일상 기록 페이지’를 직접 만들려고 할까요?
요즘 많은 분들이 사진과 일상을 기록하기 위해 SNS나 메모 앱을 사용합니다.
하지만 시간이 지나면 이런 경험을 한 번쯤 하게 됩니다.
- 예전 기록을 다시 찾기 어렵다
- 사진은 많은데, 흐름이 정리되지 않는다
- 나만의 방식으로 정리하고 싶지만 커스터마이징이 안 된다
특히 커플 기록, 개인 성장 기록, 일상 아카이브처럼
“나만의 맥락과 구조”가 중요한 경우에는 기존 서비스가 아쉽게 느껴집니다.
그래서 이번 시리즈에서는 단순한 연습용 페이지가 아니라,
실제로 사용할 수 있는 ‘일상 기록 웹 페이지’를 AI와 함께 직접 만들어보는 것을 목표로 합니다.
개발 경험이 없거나, HTML/CSS가 낯선 분들도
Cursor를 활용해 설계 → 구현 → 개선까지 단계적으로 따라올 수 있도록 구성했습니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
이 시리즈에서 만들게 될 결과물은 무엇인가요?
이번 「커플 / 일상 기록 페이지」 시리즈의 최종 목표는 다음과 같습니다.
- 날짜 기준으로 기록을 남길 수 있는 구조
- 사진과 텍스트가 함께 정리되는 타임라인
- 모바일·태블릿·PC에서 모두 잘 보이는 반응형 화면
- 사용자가 많지 않아도 “잘 만든 웹 서비스”처럼 느껴지는 UX
즉, 단순한 일기장이 아니라 ‘개인용 기록 웹 서비스’에 가까운 결과물입니다.
전체 시리즈 구성 미리 보기
이번 시리즈는 아래와 같은 흐름으로 진행됩니다.
| Part | 내용 |
|---|---|
| Part 1 | 일상 기록 페이지 구조 설계 |
| Part 2 | 반응형 캘린더 + 타임라인 기본 레이아웃 |
| Part 3 | 이미지 업로드 & 미디어 처리 (JS + Async) |
| Part 4 | 타임라인 정렬·필터 기능 + UX 강화 |
| Part 5 | UI/UX 개선 + AI 코드 리뷰로 완성 |
이번 글(Part 1)은 ‘코드를 거의 쓰지 않는 대신, 설계를 제대로 하는 단계’ 입니다.
이 단계가 탄탄할수록 이후 구현이 훨씬 쉬워집니다.
입문 / 초보자를 위한 용어설명
웹 페이지 vs 웹 서비스
- 웹 페이지: 정적인 화면 (정보를 보여주는 역할)
- 웹 서비스: 사용자의 행동(입력, 클릭, 업로드)에 반응하는 구조
이번에 만들 것은 단순 페이지가 아니라
사용자가 기록을 쌓아가는 ‘웹 서비스’ 구조입니다.
반응형 웹이란?
반응형 웹이란,
- PC 화면에서는 넓게
- 모바일에서는 세로로
- 태블릿에서도 깨지지 않게
화면 크기에 따라 자동으로 레이아웃이 바뀌는 웹 구조를 말합니다.
요즘 구글, 애드센스, SEO에서도 반응형은 거의 필수 조건입니다.
일상 기록 페이지, 어떤 구조로 설계할까요?
무작정 화면부터 만들면
중간에 “이걸 어디에 넣지?”라는 문제가 반드시 생깁니다.
그래서 먼저 전체 구조를 나눠서 생각합니다.
1️⃣ 기록의 기준은 ‘날짜’입니다
일상 기록의 핵심은 시간의 흐름입니다.
그래서 기본 구조는 다음과 같습니다.
- 캘린더 영역
→ 특정 날짜 선택 - 타임라인 영역
→ 해당 날짜의 기록이 시간순으로 표시
이 구조는 커플 기록, 여행 기록, 운동 기록 등
어떤 기록 서비스에도 활용할 수 있는 범용적인 설계입니다.
2️⃣ 한 개의 기록은 어떤 정보를 가질까요?
기록 하나를 구성하는 최소 요소는 다음과 같습니다.
- 날짜
- 텍스트(메모, 감정, 설명)
- 이미지(사진 1장 이상 가능)
이렇게 정리하면
“기록 카드”라는 단위 개념이 만들어집니다.
이후 Part 3에서 이 카드 구조를 기준으로 이미지 업로드를 구현하게 됩니다.
3️⃣ 화면은 크게 3영역으로 나눕니다
초보자에게 가장 추천하는 구조는 다음과 같습니다.
- 헤더(Header)
→ 페이지 제목, 간단한 설명 - 메인(Main)
→ 캘린더 + 타임라인 - 기록 카드(Card)
→ 날짜별 일상 기록
이렇게 나누면
HTML 구조도 단순해지고,
CSS로 디자인하기도 훨씬 수월해집니다.
AI는 이 과정에서 어떤 역할을 하나요?
이번 시리즈의 핵심 키워드는 AI 웹 제작입니다.
하지만 AI에게 “다 만들어줘”라고 하지 않습니다.
AI는 다음 역할을 합니다.
- 구조를 말로 설명하면 → 코드 형태로 정리
- 반복적인 CSS 작성 보조
- 초보자가 놓치기 쉬운 부분 지적
즉, 개발자를 대체하는 존재가 아니라, 설계 파트너로 활용합니다.
이 방식은 비전공자·초보자·부업 목적 학습자에게 특히 효과적입니다.
왜 이런 구조가 실무에 도움이 될까요?
이 글은 단순히 “예쁜 페이지 만들기”가 목적이 아닙니다.
- 화면을 먼저 나누는 사고
- 데이터 단위를 정의하는 방식
- UX를 고려한 흐름 설계
이 모든 것은 실제 웹 개발·기획·프론트엔드 실무에서 그대로 사용되는 사고방식입니다.
그래서 이 시리즈를 끝까지 따라오면,
- AI 활용 능력
- 웹 구조 이해도
- 프론트엔드 감각
이 세 가지가 함께 올라가게 됩니다.
다음 편에서는 무엇을 하나요? (Part 2 예고)
다음 글에서는 드디어 화면이 보이기 시작합니다.
- HTML/CSS로 반응형 캘린더 레이아웃 만들기
- 모바일·PC에서 깨지지 않는 구조
- “웹 서비스처럼 보이게 만드는” 기본 틀 완성
👉 Part 2: HTML/CSS로 반응형 캘린더 + 타임라인 기본 레이아웃 만들기
마무리하며
이번 Part 1은
코드를 거의 다루지 않았지만,
전체 시리즈에서 가장 중요한 글입니다.
이 구조를 이해하고 나면
이후 단계는 “조립하듯이” 따라갈 수 있습니다.
천천히, 하지만 제대로
AI와 함께 나만의 기록 웹을 만들어봅시다.
이전 편 다시보기
AI 웹 개발 : 쇼핑몰 페이지 편(Part1~Part5) 다시보기
AI 웹 개발 : 반응형 게시판 편(Part1~Part5) 다시보기
이전 편 소스코드 모음 => [제로의 GitHub 저장소 바로가기]