프로젝트: 간단한 블로그

JSON 파일로 블로그 글을 관리하는 간단한 블로그를 Cursor AI로 만들어봅시다.

프로젝트 개요

완성 모습

맑은소프트 기술 블로그
┌─────────────────────────────────┐
│ [최신글] [인기글] [카테고리▼]    │
└─────────────────────────────────┘

┌──────────────────────────┐
│ JSON 활용하기            │
│ JSON으로 데이터 관리...  │
│ 2024-01-15 | 조회 128     │
│ #개발 #JSON              │
└──────────────────────────┘

1단계: 프로젝트 폴더 구조

Cursor에서 프로젝트 폴더 생성:

blog/
├── index.html
├── post.html
├── style.css
├── script.js
└── posts.json

2단계: Cursor AI로 JSON 데이터 만들기

Cursor에게 요청:

블로그 글 데이터를 담은 posts.json 파일 만들어줘.

각 글에 포함할 정보:
- id (고유번호)
- 제목
- 작성자
- 날짜 (YYYY-MM-DD 형식)
- 카테고리 (개발, 디자인, 마케팅)
- 내용 (요약)
- 전체 내용
- 태그 (배열)
- 조회수
- 썸네일 이미지 URL

5개 글 만들어줘.

3단계: 메인 페이지 만들기

Cursor에게 요청:

index.html 만들어줘.

구조:
1. 헤더
   - 블로그 제목
   - 네비게이션 (전체, 개발, 디자인, 마케팅)

2. 검색 바
   - 제목 검색 입력창
   - 정렬 옵션 (최신순, 조회수순)

3. 글 목록
   - 카드 형태
   - 썸네일 (또는 플레이스홀더)
   - 제목
   - 작성자, 날짜
   - 내용 요약 (2줄)
   - 태그
   - 조회수
   - "더 읽기" 버튼

디자인:
- 블로그 느낌
- 카드 그리드 레이아웃
- 깔끔하고 읽기 좋게
- 반응형 (모바일 1열, 태블릿 2열, PC 3열)

4단계: CSS 스타일링

Cursor에게 요청:

style.css 만들어줘.

스타일:
- 전문적인 블로그 느낌
- 헤더는 흰색 배경에 그림자
- 카드는 호버 시 살짝 올라오는 효과
- 태그는 파스텔 톤 뱃지
- 읽기 좋은 타이포그래피
- 부드러운 애니메이션

5단계: JavaScript 기능 구현

Cursor에게 요청:

script.js 만들어줘.

기능:
1. 페이지 로드 시 posts.json 읽기
2. 글 카드 동적 생성
3. 검색 기능 (제목, 내용에서 검색)
4. 카테고리 필터 (버튼 클릭 시)
5. 정렬 (최신순, 조회수순)
6. "더 읽기" 클릭 시 post.html로 이동 (글 ID 전달)

코드 구조:
- async/await 사용
- 함수 분리 (loadPosts, displayPosts, filterPosts 등)
- 에러 처리

6단계: 상세 페이지 만들기

Cursor에게 요청:

post.html 만들어줘.

기능:
- URL에서 글 ID 가져오기 (예: post.html?id=1)
- posts.json에서 해당 글 찾기
- 글 전체 내용 표시

구조:
- 뒤로 가기 버튼
- 제목
- 작성자, 날짜, 조회수
- 카테고리, 태그
- 전체 내용
- 이전글/다음글 링크

스타일:
- 읽기 좋은 본문 스타일
- 적절한 줄간격
- 코드 블록 스타일 (있다면)

7단계: 고급 기능 추가

7-1. 인기글 표시

Cursor에게 요청:

index.html에 인기글 섹션 추가해줘.
- 조회수 상위 3개 글
- 작은 카드 형태
- 사이드바 또는 상단에 배치

7-2. 최근글 표시

Cursor에게 요청:

최근 5개 글을 날짜순으로 정렬해서 표시하는 기능 추가해줘.

7-3. 태그 클라우드

Cursor에게 요청:

모든 글의 태그를 모아서 태그 클라우드 만들어줘.
- 태그 클릭하면 해당 태그가 있는 글만 필터링
- 빈도수에 따라 크기 다르게

8단계: 검색 기능 개선

Cursor에게 요청:

검색 기능 개선해줘:
- 제목, 내용, 태그에서 검색
- 입력하는 동안 실시간 검색 (디바운싱 적용)
- 검색 결과 개수 표시
- 하이라이트 효과

9단계: 페이지네이션 추가

Cursor에게 요청:

글 목록에 페이지네이션 추가해줘.
- 한 페이지에 6개 글
- 이전/다음 버튼
- 페이지 번호 표시
- 현재 페이지 강조

10단계: 로딩 상태 추가

Cursor에게 요청:

데이터 로딩 중 표시 추가해줘.
- 스피너 또는 스켈레톤 UI
- 로딩 완료 후 부드럽게 나타나는 애니메이션

완성된 프로젝트 테스트

로컬에서 테스트

1. Cursor에서 Live Server 실행
2. index.html 우클릭 → “Open with Live Server”
3. 브라우저에서 확인

테스트 항목

• 글 목록이 잘 표시되는가?
• 검색이 작동하는가?
• 카테고리 필터가 작동하는가?
• 정렬이 작동하는가?
• 상세 페이지로 이동이 잘 되는가?
• 뒤로 가기가 작동하는가?
• 반응형이 잘 작동하는가?

GitHub에 배포

Cursor 터미널에서:

git init
git add .
git commit -m "블로그 프로젝트 초기 커밋"
git branch -M main
git remote add origin https://github.com/사용자명/blog.git
git push -u origin main

Cloudflare Pages 연결

1. Cloudflare Pages 대시보드
2. “Connect to Git” 클릭
3. 저장소 선택
4. “Save and Deploy” 클릭

글 추가하기

새 글을 추가하려면 posts.json만 수정:

Cursor에게 요청:

posts.json에 새 글 추가해줘.

제목: Cloudflare Pages 배포하기
카테고리: 개발
내용: Cloudflare Pages로 웹사이트를 배포하는 방법...
태그: cloudflare, 배포, 호스팅

수정 후 Git 푸시하면 자동 배포!

추가 개선 아이디어

Cursor에게 요청할 수 있는 것들:

1. 다크 모드

다크 모드 토글 추가해줘.
- 로컬 스토리지에 설정 저장
- 부드러운 전환 애니메이션

2. 댓글 기능 (외부 서비스)

Disqus 댓글 시스템 추가해줘.
post.html에 댓글 섹션 통합

3. 공유 버튼

SNS 공유 버튼 추가해줘.
- 페이스북, 트위터, 링크복사
- 상세 페이지 상단에 배치

4. 목차 자동 생성

긴 글에서 자동으로 목차 생성해줘.
- h2, h3 태그 기반
- 사이드바에 고정
- 클릭하면 해당 섹션으로 스크롤

5. 읽은 시간 표시

각 글에 예상 읽는 시간 표시해줘.
- 단어 수 기반 계산
- "5분 읽기" 형태로 표시

문제 해결

글이 안 보여요

Cursor에게:

posts.json 파일 경로 확인하고, fetch 에러 처리 추가해줘.
콘솔에 에러 메시지 출력하게 해줘.

상세 페이지가 안 열려요

Cursor에게:

post.html에서 URL 파라미터 제대로 가져오는지 확인해줘.
URLSearchParams 사용해서 id 추출하는 코드 수정해줘.

스타일이 안 맞아요

Cursor에게:

style.css에서 카드 레이아웃 수정해줘.
그리드 간격을 늘리고, 카드 크기를 좀 더 크게 해줘.

다음 단계

간단한 블로그 프로젝트를 완성했습니다. 이제 회사 소개 페이지를 만들어봅시다!