이 글은 AI가 원문을 분석하여 핵심 내용을 요약한 것입니다.
이 게시물은 디자이너가 개발자 없이 AI와 툴을 조합해 콘서트팩 아카이빙 웹페이지를 구현한 제작기 소개 내용입니다.
프로젝트 개요
Spline로 3D 인터랙션을 만들고 Framer로 웹페이지 흐름을 구현하며 Claude·ChatGPT·Gemini로 코드를 비교 생성해 적용했다는 점 정리
워크플로우
디자인 시안 → 프롬프트 초안 → AI 코드 생성 → Framer 적용 → 검토 및 보완 → 수정 반복 형태로 진행
주요 구현 1: 메인 스크롤 인터랙션
키링 등장 후 줌인·회전·소개 문구·줌아웃·아카이빙 맵·맵핀·회차별 팝업(영상 자동재생)까지 스크롤 기반 시퀀스로 구성
주요 구현 2: 영상 콘텐츠 아카이빙
상단 메인 플레이어(영상+셋리스트)와 하단 썸네일 리스트 2단 구조로 아티스트별 영상 이동 구현
AI 활용 포인트
동일 프롬프트를 여러 AI로 테스트, 시안 이미지를 함께 전달해 의도 명확화, 디자인 패널 한계는 코드로 확장하며 디테일은 직접 검토·수정했다는 점 강조 
