FAQ 페이지 (검색 기능 포함)
Cursor AI를 활용해 검색 기능과 아코디언 형태의 인터랙티브한 FAQ 페이지를 만들어봅시다.
프로젝트 개요
섹션 제목: “프로젝트 개요”완성 모습
섹션 제목: “완성 모습”자주 묻는 질문 (FAQ)┌──────────────────────────────┐│ 🔍 질문을 검색하세요... │└──────────────────────────────┘
[일반] [계정] [결제] [배송] [반품]
▼ 배송은 얼마나 걸리나요? 일반적으로 주문 후 2-3일 소요됩니다...
▶ 반품은 어떻게 하나요?
▶ 회원가입 없이 구매할 수 있나요?1단계: 프로젝트 시작
섹션 제목: “1단계: 프로젝트 시작”Cursor에서 새 폴더 생성
섹션 제목: “Cursor에서 새 폴더 생성”File > Open Folder → 새 폴더 “faq-page” 생성
Cursor AI에게 첫 요청:
섹션 제목: “Cursor AI에게 첫 요청:”FAQ 페이지 만들어줘.
필요한 파일:- index.html- style.css- script.js- faq.json (질문/답변 데이터)
기본 구조만 만들어줘.2단계: JSON 데이터 만들기
섹션 제목: “2단계: JSON 데이터 만들기”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”faq.json 만들어줘.
각 FAQ 항목에 포함할 정보:- id (고유번호)- 카테고리 (일반, 계정, 결제, 배송, 반품/교환)- 질문- 답변 (마크다운 형식 가능)- 조회수- 도움됨 카운트
각 카테고리별로 4-5개씩총 20개 질문 만들어줘.
실제 쇼핑몰에서 자주 묻는 질문들로 구성해줘.3단계: HTML 구조 만들기
섹션 제목: “3단계: HTML 구조 만들기”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”index.html 만들어줘.
구조:1. 헤더 - 페이지 제목: "자주 묻는 질문" - 부제: "궁금한 점을 빠르게 찾아보세요"
2. 검색 섹션 - 큰 검색 입력창 - 검색 아이콘 - 플레이스홀더: "질문을 검색하세요..." - 실시간 검색 결과 개수 표시
3. 카테고리 탭 - "전체" 포함 6개 탭 - 클릭 시 해당 카테고리만 표시 - 선택된 탭 강조
4. FAQ 목록 - 아코디언 형태 - 각 항목: - 질문 (화살표 아이콘) - 답변 (접혀있음) - 카테고리 뱃지 - "도움이 되었나요?" 버튼 (👍 / 👎) - 도움됨 카운트
5. 빠른 링크 사이드바 - 인기 질문 Top 5 - 클릭하면 해당 질문으로 스크롤
6. 푸터 - "원하는 답변을 찾지 못하셨나요?" - "문의하기" 버튼 (문의 폼으로 이동)
디자인:- 깔끔하고 읽기 쉽게- 넓은 여백- 부드러운 색상- 반응형 디자인4단계: CSS 스타일링
섹션 제목: “4단계: CSS 스타일링”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”style.css 만들어줘.
디자인 요구사항:- 메인 색상: #4A90E2 (파란색)- 배경: #F7F9FC (밝은 회색)- 텍스트: #333- 카드 배경: 흰색
검색 섹션:- 큰 검색창 (최소 60px 높이)- 그림자 효과- 포커스 시 테두리 강조- 아이콘 왼쪽에 배치
카테고리 탭:- 가로 배치- 모바일에서는 가로 스크롤- 선택된 탭: 배경색 변경, 하단 테두리- 호버 효과
FAQ 아이템:- 흰 배경- 둥근 모서리- 각 항목 사이 간격- 질문: 굵은 글씨, 큰 사이즈- 답변: 회색 글씨, 적당한 줄간격- 화살표 애니메이션 (펼침/접힘 시 회전)
아코디언:- 부드러운 열림/닫힘 애니메이션- max-height 전환 효과- 열린 항목은 배경색 약간 다르게
버튼:- 도움됨 버튼: 작고 둥근 형태- 호버 시 색상 변경- 클릭 시 애니메이션
반응형:- 모바일: 사이드바 숨김, 검색창 작게- 태블릿: 2컬럼 레이아웃- PC: 메인 콘텐츠 + 사이드바
애니메이션:- 페이드인- 슬라이드 다운- 부드러운 전환5단계: JavaScript 기능 구현
섹션 제목: “5단계: JavaScript 기능 구현”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”script.js 만들어줘.
기능 목록:
1. 데이터 로딩 - faq.json 읽기 - 페이지 로드 시 전체 FAQ 표시 - 에러 처리
2. 아코디언 기능 - 질문 클릭 시 답변 펼치기/접기 - 다른 항목은 자동으로 닫기 (옵션) - 화살표 회전 애니메이션 - 부드러운 전환
3. 검색 기능 - 실시간 검색 (디바운싱 500ms) - 질문과 답변 모두 검색 - 검색어 하이라이트 - 매칭된 항목 개수 표시 - 검색 결과 없을 때 메시지
4. 카테고리 필터 - 탭 클릭 시 해당 카테고리만 표시 - "전체" 탭은 모든 항목 표시 - 선택된 탭 시각적 표시 - URL 해시로 카테고리 저장 (#category=payment)
5. 도움됨 기능 - 👍/👎 버튼 클릭 - 카운트 증가 - 로컬 스토리지에 저장 (중복 방지) - 이미 클릭한 항목은 버튼 비활성화
6. 인기 질문 - 조회수 + 도움됨 기준 Top 5 - 사이드바에 표시 - 클릭 시 해당 질문으로 스크롤 - 자동으로 펼치기
7. URL 공유 - 특정 FAQ 항목 URL로 접근 가능 - (?id=5) 형태 - 페이지 로드 시 해당 항목 자동 펼침 - 해당 위치로 스크롤
8. 조회수 기록 - 항목 열 때마다 조회수 증가 - 로컬 스토리지에 저장
코드 구조:- 클래스 기반 (FAQManager)- 함수 분리- async/await- 이벤트 위임- 주석 추가6단계: 고급 기능 추가
섹션 제목: “6단계: 고급 기능 추가”6-1. 검색어 하이라이트
섹션 제목: “6-1. 검색어 하이라이트”Cursor에게 요청:
검색 기능 개선해줘.
기능:- 검색된 단어를 노란색 배경으로 하이라이트- 대소문자 구분 없이- HTML 태그는 하이라이트 안 되도록- 검색어 지우면 하이라이트 제거6-2. 관련 질문 추천
섹션 제목: “6-2. 관련 질문 추천”Cursor에게 요청:
각 FAQ 답변 하단에 "관련 질문" 섹션 추가해줘.
기능:- 같은 카테고리의 다른 질문 3개- 작은 링크 형태로 표시- 클릭하면 해당 질문으로 이동- 자동으로 펼치기6-3. 다크 모드
섹션 제목: “6-3. 다크 모드”Cursor에게 요청:
다크 모드 토글 추가해줘.
기능:- 헤더 우측에 토글 버튼- 아이콘: 🌙 / ☀️- 모든 색상 다크 버전으로 전환- 로컬 스토리지에 설정 저장- 부드러운 전환 애니메이션7단계: 문의 폼 추가
섹션 제목: “7단계: 문의 폼 추가”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”FAQ에서 답을 못 찾은 사람을 위한문의 폼 섹션 추가해줘.
푸터에 배치:- 제목: "답변을 찾지 못하셨나요?"- 간단한 문의 폼 - 이름 - 이메일 - 카테고리 선택 - 질문 내용 (textarea) - 제출 버튼
제출 시:- 입력 검증- 로딩 상태 표시- 성공 메시지 (alert 또는 모달)- 폼 초기화
실제 전송은 안 하고콘솔에 데이터 출력만 해줘.8단계: 인쇄 최적화
섹션 제목: “8단계: 인쇄 최적화”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”인쇄용 CSS 추가해줘.
@media print 스타일:- 검색창, 버튼 숨김- 모든 FAQ 항목 펼침- 흰 배경- 페이지 나누기 최적화- 링크 URL 표시9단계: 접근성 개선
섹션 제목: “9단계: 접근성 개선”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”접근성 개선해줘.
요구사항:- 아코디언에 ARIA 속성 추가 - aria-expanded - aria-controls - role="button"- 키보드 네비게이션 - Enter/Space로 펼치기/접기 - Tab으로 이동- 스크린 리더 지원 - alt 텍스트 - aria-label- 충분한 색상 대비- 포커스 표시 명확하게10단계: 애니메이션 및 피드백
섹션 제목: “10단계: 애니메이션 및 피드백”Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”사용자 경험 개선을 위한 애니메이션 추가해줘.
애니메이션:1. 페이지 로드 시 FAQ 항목 순차적 페이드인2. 검색 결과 필터링 시 부드러운 전환3. 도움됨 버튼 클릭 시 하트 애니메이션4. 탭 전환 시 슬라이드 효과5. 스크롤 시 사이드바 고정
피드백:- 로딩 스피너- 토스트 메시지 (간단한 알림)- 호버 효과 개선- 클릭 시 리플 효과완성 확인
섹션 제목: “완성 확인”테스트 항목
섹션 제목: “테스트 항목”- FAQ 항목이 모두 표시되는가?
- 아코디언이 잘 작동하는가?
- 검색이 실시간으로 작동하는가?
- 카테고리 필터가 작동하는가?
- 검색어가 하이라이트되는가?
- 도움됨 버튼이 작동하는가?
- URL 공유가 작동하는가?
- 인기 질문 클릭이 작동하는가?
- 반응형이 잘 작동하는가?
- 키보드 네비게이션이 가능한가?
GitHub & Cloudflare Pages 배포
섹션 제목: “GitHub & Cloudflare Pages 배포”1. Git 초기화
섹션 제목: “1. Git 초기화”git initgit add .git commit -m "FAQ 페이지 초기 버전"2. GitHub 저장소 생성 및 푸시
섹션 제목: “2. GitHub 저장소 생성 및 푸시”git branch -M maingit remote add origin https://github.com/사용자명/faq-page.gitgit push -u origin main3. Cloudflare Pages 연결
섹션 제목: “3. Cloudflare Pages 연결”- Cloudflare Pages 대시보드 접속
- “Connect to Git” 클릭
- 저장소 선택
- “Save and Deploy” 클릭
- 배포 완료 후 URL 확인
FAQ 추가/수정하기
섹션 제목: “FAQ 추가/수정하기”새 질문을 추가하려면 faq.json만 수정:
Cursor에게 요청:
섹션 제목: “Cursor에게 요청:”faq.json에 새 질문 추가해줘.
카테고리: 배송질문: 해외 배송도 가능한가요?답변: 네, 일부 국가에 한해 해외 배송이 가능합니다...수정 후 Git 푸시하면 자동 배포!
추가 개선 아이디어
섹션 제목: “추가 개선 아이디어”Cursor에게 요청할 수 있는 것들:
섹션 제목: “Cursor에게 요청할 수 있는 것들:”- AI 챗봇 통합
간단한 챗봇 위젯 추가해줘.- 우측 하단에 채팅 아이콘- FAQ 데이터 기반 자동 응답- 키워드 매칭으로 관련 FAQ 추천- 비디오 답변
FAQ 항목에 비디오 추가 기능 넣어줘.- faq.json에 videoUrl 필드 추가- 답변에 YouTube 임베드- 비디오 있는 항목 아이콘 표시- 다국어 지원
한국어/영어 전환 기능 추가해줘.- 언어 선택 버튼- faq-ko.json, faq-en.json- 로컬 스토리지에 언어 설정 저장- 피드백 수집
"이 페이지가 도움이 되었나요?" 설문 추가해줘.- 페이지 하단 배치- 5점 만점 별점- 간단한 피드백 텍스트- 로컬 스토리지 저장- 검색 히스토리
최근 검색어 기록 기능 추가해줘.- 검색창 포커스 시 표시- 최대 5개- 클릭하면 다시 검색- 삭제 버튼- 북마크 기능
자주 보는 FAQ 북마크 기능 추가해줘.- 각 항목에 별 아이콘- 클릭하면 북마크 추가/제거- "내 북마크" 탭- 로컬 스토리지 저장- 통계 대시보드
관리자용 간단한 통계 페이지 만들어줘.- 가장 많이 본 질문- 도움됨이 많은 질문- 카테고리별 분포- 차트로 시각화문제 해결
섹션 제목: “문제 해결”아코디언이 안 열려요
섹션 제목: “아코디언이 안 열려요”Cursor에게:
아코디언 클릭 이벤트 확인해줘.- 이벤트 리스너가 제대로 붙었는지- 콘솔에 클릭 로그 출력- max-height 전환 확인검색이 느려요
섹션 제목: “검색이 느려요”Cursor에게:
검색 성능 개선해줘.- 디바운싱 시간 조정- 검색 알고리즘 최적화- 대량 데이터 처리 개선모바일에서 탭이 안 보여요
섹션 제목: “모바일에서 탭이 안 보여요”Cursor에게:
모바일 탭 레이아웃 수정해줘.- 가로 스크롤 가능하도록- overflow-x: auto- 스크롤바 스타일링URL 공유가 안 돼요
섹션 제목: “URL 공유가 안 돼요”Cursor에게:
URL 파라미터 처리 로직 확인해줘.- URLSearchParams 사용 확인- 페이지 로드 시 파라미터 읽기- 해당 FAQ 항목 찾기 및 펼치기다음 단계
섹션 제목: “다음 단계”FAQ 페이지를 완성했습니다. 이제 설문조사 페이지를 만들어봅시다!