소개
시도하고자 했던 것과 그 이유를 알려주세요.
사이트 제작을 ai로. 쉽게 만들고 자동화를 하고 싶었습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
gpt, 러버블, 구글 시트
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
1. 디자인
컬러: Primary #3B82F6, Secondary #06B6D4, BG #F3F8FF, Text #111827
폰트: Nanum Gothic
UI: 카드 둥근 모서리 12px, 버 튼 8px, 부드러운 그림자, 블루 그라데이션
2. 구조
Header: 로고 “쿠폰나라” / 메뉴(인기 브랜드 드롭다운, 카카오톡 구독) / 검색바(브랜드·상품·카테고리 필터)
Hero: 3개 카드(여행·숙소·프로모션), 클릭 시 해당 섹션으로 스크롤
탭: Popular·Travel·Hotel·Shopping – 클릭 시 Featured Coupons 필터링
Featured Coupons: 2열 그리드, 브랜드 아이콘·이모지, 조건·유효기간, 버튼(코드 복사 후 제휴 링크)
구독: 이메일 폼 → Apps Script 전송, BG #E0F7FA
Footer: ©2025 쿠폰나라, 카톡 친구추가, “매일 02:00 UTC 업데이트” 문구
3. 데이터 & 자동화
CSV: 구글 시트 CSV → 매일 02:00 UTC fetch
이미지: Custom Search 또는 Unsplash API로 브랜드 로고 자동 로딩(실패 시 기본 logo.svg 사용)
검색: 입력 시 실시간 필터, 엔터 시 첫 매칭 섹션으로 스크롤
4. 접근성·SEO
모든 이미지
alt/aria-label, 시맨틱 HTML,<title>,<meta>, Open Graph, Twitter Card 적용
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
ai와 대화가 정말 중요하다는 생각이 듭니다.
러버블 ai / gpt
전 gpt에게 말하고, gpt는 러버블 ai에게 전달할 내용을 만듭니다.
그래서 한번에 전체를 수정하게 1~10번까지 리스트를 만들어서 러버블ai에게 전달합니다.
과정 중에 어떤 시행착오를 겪었나요?
5회 밖에 안되기 때문에 최대한 많은 수정 사항을 gpt에게 말하고, 요청사항을 만들었습니다.
도움이 필요한 부분이 있나요?
아직까진 없었습니다.
앞으로의 계획이 있다면 들려주세요.
사이트가 제대로 구성이 된다면 구글 시트 자동화도 연구를 해봐야 할 것 같습니다. 우선 n8n을 생각을 하는데 좀더 연구를 해봐야할 것 같습니다.
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
(내용 입력)
