러버블 사이트 제작, 상상하던 것을 직접 만드니 감동!

소개

시도하고자 했던 것과 그 이유를 알려주세요.

(내용 입력)

처음 수업때 러버블 사용법을 들었습니다. 사용법도 모르고 처음 듣는 거라 생소했는데 만들어지긴 하더라구요. 그래서 좀더 구체적으로 상업화 할 수 있는 방향으로. 생각을 해봤습니다.

어떤 도구를 사용했고, 어떻게 활용하셨나요?

도구는 gpt, 러버블, 구글시트 이렇게 3가지로. 데이터를 정리한 것을 러버블 사이트로 만드는 것으로 gpt 도움으로 만들었습니다.

Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.

프로젝트 구조 설계
- Next.js(React) 기반으로, Google Sheets CSV를 데이터 소스로 사용하기로 결정
- 시트별로 gid를 확인(여행=0, 숙소특가=1833481209, 프로모션=25715982)해 각 탭을 CSV로 퍼블리시
데이터 페칭 유틸 구현 (lib/fetchCoupons.js)
- fetchTravelCoupons(), fetchAccommodationDeals(), fetchPromotions() 함수로 각 시트 데이터를 PapaParse로 파싱
- fetchCouponsByBrand()로 A열 브랜드별 그룹화
페이지별 데이터 바인딩 (pages/index.jsx)
- getStaticProps에서 세 가지 fetch 함수를 호출해 travelCoupons·accommodationDeals·promotions를 props로 전달
- ISR(revalidate) 설정으로 일정 주기 자동 갱신
헤더 내비게이션 수정 (components/Header.jsx)
- “제품구매 전용” 메뉴 삭제
- “여행 상품 쿠폰”·“숙소 특가 모음” 메뉴를 Hero 카드/섹션(#travel, #accommodation) 클릭 시 부드럽게 스크롤하도록 전환
- “인기 브랜드” 드롭다운에 시트 A열 전체 브랜드(중복 제거) 자동 노출
- “구독” 메뉴를 카카오톡 친구 추가 링크로 연결
- 버튼 호버 색상 → 노란색에서 연한 하늘색(rgba(135,206,250,0.2))으로 변경
- 검색창 입력 시(Enter) 검색어가 매칭된 쿠폰 카드가 있는 섹션으로 자동 스크롤하는 로직 추가

Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.

Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)

(내용 입력)

배운 점과 나만의 꿀팁을 알려주세요.

막연한 사이트에서 좀더 구체적으로 만들어봤는데요. 원하는 기능을 직접 이렇게 만들 수 있는게 너무 신기했습니다. 가능성은 무한한 것 같아요. 물론 오류와 실수도 있습니다 아직 해결도 안된 것들도 많고.. 시간을 들이면 할 수 있다는 것이 가장 중요한 것 같아요.

꿀팁은 gpt와 대화 많이 하고, a~z까지 제작 논의를 한 다음 한번에 명령프롬프트를 주는게 좋았습니다.아직 무료 버전이라.. 한꺼번에 수정하는 게 좋았고. 다만 안되는 것들이 있던데 이유는 모르겠지만. 세부적으로 해보면서 해결을 해야할 것 같아요.

과정 중에 어떤 시행착오를 겪었나요?

구체적인 명령이 되어 안되는 것 같아서 몇번 반복을 했는데 다른 시간으로보고, 작업을 하는게 좋을 것 같다는 생각이 들었습니다. 아직은 해결 안된게 너무 많아요

도움이 필요한 부분이 있나요?

좀더 해보고 안되면 요청해야 할 것 같아요.

앞으로의 계획이 있다면 들려주세요.

처음에는 막연히, 좀더 지나니 더 잘하고 싶고, 지금은 이 걸로 제대로 만들어볼 생각도 하고 있습니다. 이것만 잘해도 충분히 좋은 사이트를 만들 수 있을 것 같아요.

참고한 지피터스 글이나 외부 사례를 알려주세요.

(내용 입력)