MAKING PROCESS
지피터스 랜딩 — 이렇게 만들어졌어요
클로드 코드 + 클로드 디자인으로 만든 랜딩이 4단계로 진화한 과정입니다.
각 카드의 열어보기를 누르면 그 단계의 실제 화면이 그대로 열립니다. 순서대로 비교해 보세요.
📝 프롬프트 메이킹 로그 (어떤 프롬프트로 만들었나) →
v1 · 최초 완성본
기본 뼈대와 모션
- Pretendard, 바이올렛(#6c5ce7) + 시안(#00e0c6)
- 이모지 아이콘 🎯🚀🤝
- 히어로 세로 마스크 라인 전환, CSS 마퀴
- 페이드업 · 카드 스태거 · 단순 카운트업
열어보기 →
v2 · 디자인+모션
지피터스 디자인 시스템 + 콘텐츠
- 지피터스 오렌지(#eb5a10) + Noto Sans KR
- 커뮤니티 + 스터디(가로 커리큘럼) 개편
- 글자 마스크 리빌 · 마퀴 속도반응
- 텍스트 하이라이트 · 숫자 슬롯머신
열어보기 →
v3 · 검수 반영
모션 다양화 + 씬 애니
- 히어로 3라인: 세로마스크 / 좌우슬라이드 / 스케일 줌
- 코드잇식 브라우저 목업 씬 순차 애니
- 섹션 배경색 전환 · 숫자 막대
- shimmer · 호버 팽창 디테일
열어보기 →
v4 · 최종
브랜딩·카피·배경 다듬기
- 히어로 순차 전환(겹침 제거) + '작아지며 위로'
- GPTERS 오렌지 그라데이션
- 24기 대기신청 CTA + ai-study-list 링크
- Lucide 라인 아이콘 · 듀오톤 배경 + 필름 그레인
열어보기 →
💻 코드 변화까지 보고 싶다면 (개발자용)
이 프로젝트는 각 단계가 git 커밋으로 남아 있어요. 터미널에서 아래로 단계별 코드 차이를 볼 수 있습니다.
git log --oneline — 4개 커밋(v1~v4) 확인
git diff v2커밋 v3커밋 — 두 단계 사이 바뀐 코드만 보기
git show 커밋해시 — 한 단계에서 바뀐 전체 내용