AI와 함께 디자이너가 만든 웹페이지 제작기

본문에서는 ChatGPT, Claude, Gemini 등 여러 AI 코드 생성 도구를 동시에 활용하여 최적의 코드를 선택하는 방식을 제시함. 동일한 프롬프트 입력 시에도 AI별로 코드 구조와 구현 방식이 상이하여, 실제 Framer 적용 시 결과 차이가 뚜렷하게 나타났다고 함. 특히, 이미지 기반의 시각 자료와 명확한 조건 정리를 함께 전달하는 것이 AI의 의도를 정확히 파악하고 원하는 결과에 빠르게 도달하는 데 효과적이었음. 이는 AI를 단순 코드 생성기가 아닌, 디자이너의 의도를 구체화하는 협업 도구로 활용하는 전략을 보여줌.

Framer를 사용하여 웹페이지의 전체적인 흐름을 잡고, 사용자의 클릭 및 이동 인터랙션을 구현하는 과정에서 AI가 적극 활용됨. 개발 리소스가 제한적인 상황에서 AI는 구현 가능성을 넓혀주는 협업 도구로서의 역할을 수행함. AI가 제안한 코드를 적용하고 비교하며 브랜드 경험에 맞는 구조와 표현 방식을 찾아가는 방식으로 진행되었으며, 스크롤 기반 시퀀스 애니메이션과 같은 복잡한 인터랙션 구현에 AI의 도움을 받았음. 결과적으로 AI는 구현의 가능성을 열어주고, 디자이너는 브랜드 경험에 맞춰 결과물을 다듬는 상호 보완적인 작업 방식을 보여줌.

기존 유튜브 재생목록 제공 방식에서 벗어나, 콘서트팩의 콘텐츠 세계관을 통합적으로 경험할 수 있는 아카이빙 페이지를 목표로 함. 메인 페이지는 스크롤에 따라 키링 오브제가 움직이며 스토리를 펼치는 시퀀스 애니메이션으로 구성되었고, 영상 콘텐츠 페이지는 메인 플레이어와 아티스트별 썸네일 리스트를 결합하여 입체적인 공연 경험을 제공하도록 설계됨. Spline을 활용한 3D 오브제 구현 시도와 웹에서의 상호작용 한계를 인지하고, 스크롤 기반 애니메이션으로 방향을 전환하는 등 브랜드 경험 중심의 설계가 돋보임.

본 제작기는 개발 리소스 부족 문제를 AI와의 협업으로 해결한 사례를 공유함. 디자이너가 직접 Spline, Framer 등의 툴과 ChatGPT, Claude, Gemini를 활용하여 원하는 인터랙션을 구현하는 과정을 상세히 설명함. 특히, 말로 설명하기 어려운 레이아웃이나 인터랙션은 시안 이미지를 첨부하여 AI에게 전달하는 방식이 효과적이었음을 강조함. 이는 AI가 생성한 코드를 바탕으로, 디자이너의 디렉션 하에 결과물을 완성해 나가는 '바이브 코딩'에 가까운 협업 방식을 제시하며, 비개발자도 AI를 통해 구현 범위를 확장할 수 있음을 보여줌.