소개
카페 브랜드를 위한 웹사이트를 직접 만들어보고 싶었어요. 우연히 마음에 드는 랜딩페이지 이미지를 보고, "이걸 진짜 똑같이 만들 수 있을까?"라는 궁금증에서 출발했죠.
딱히 실서비스로 연결하진 않았지만, 완성된 결과를 보며 프론트엔드 구성과 스타일링 감각을 익힐 수 있었습니다.
진행 방법
이번 작업은 Antigravity를 활용해 총 3단계에 걸쳐 진행했어요. 다음은 주요 흐름입니다:
🔧 사용한 도구
Antigravity (GPT 기반 디자인 구현 도구)
React + Tailwind CSS 조합으로 생성
Vercel에 배포 (도메인 자동 생성)
🧭 진행 단계
1단계: 이미지 기반 전체 레이아웃 + 톤 복제
2단계: 커피/디저트 섹션을 슬라이더로 구현 (Swiper.js 포함)
3단계: 픽셀 감도 조정 (색감, 여백, 버튼 크기, 폰트 등)
📸 첨부 이미지
🧪 배포 주소 예시
결과와 배운 점
✅ 디자인 구현 정확도 높이기에 대한 감각이 생겼어요.
✅ Antigravity는 구조 먼저 → 세부 스타일 조정 순서로 접근해야 품질이 좋아져요.
✅ 직접 코딩 없이도 컴포넌트 기반 UI를 만들 수 있다는 점이 인상 깊었어요.
💡 반면, 아래와 같은 깨달음도 있었습니다:
“이미지와 똑같이” 만들려면 **중간 점검(스크린샷 비교)**이 필수
프롬프트 수정이 반복될수록 더 정확해지며, 처음에 잘 써야 시간 단축
🚧 다음에는
카드 클릭 시 모달/상세 보기 연동해보고 싶어요
메뉴가 고정되는 sticky header도 실험해볼 예정입니다
