Read Original
#Design

AI와 함께 만든 콘서트팩 아카이빙 웹페이지

AI와 함께 만든 콘서트팩 아카이빙 웹페이지
01

Summary

디자이너 혼자 3D 인터랙티브 웹을? AI와 함께라면 가능합니다!

Spline, Framer, 그리고 LLM을 조합해 완성한 여기어때 콘서트팩 아카이빙 제작기

디자이너가 개발 리소스 부족이라는 제약을 AI 기술로 극복하고 고차원의 브랜드 경험을 직접 구현해낸 실무 기록입니다. 단순한 툴 사용법을 넘어 여러 AI 모델의 특성을 비교하고 최적의 코드를 선별하는 노하우와 디자인 시안을 활용한 효과적인 프롬프트 작성법을 제시합니다.

  • 01Spline을 활용한 3D 키링 인터랙션 및 스크롤 시퀀스 애니메이션 구현
  • 02ChatGPT, Claude, Gemini를 동시 활용한 교차 코드 검증 및 최적 솔루션 선택
  • 03디자인 시안 이미지와 텍스트 프롬프트를 결합한 고효율 AI 협업 워크플로우
  • 04웹 빌더의 디자인 패널 한계를 커스텀 코드로 확장하여 구현 범위 확대
  • 05비개발자 관점에서 정립한 AI 활용 웹 제작의 3가지 핵심 성공 포인트

RECOMMENDATION

개발 협업 없이 빠르게 인터랙티브한 브랜드 페이지를 구축해야 하는 디자이너나 소규모 팀의 마케터에게 특히 강력 추천합니다.

The Problem

개발 리소스가 제한적인 상황에서 디자이너가 직접 브랜드의 복잡한 3D 인터랙션과 대규모 영상 자산을 통합적으로 보여줄 수 있는 아카이빙 웹페이지를 구축해야 했습니다.

The Solution

Spline으로 3D 오브젝트를 제작하고 Framer를 기반으로 웹을 구현하면서, ChatGPT, Claude, Gemini 등 다양한 AI 모델에 디자인 시안과 프롬프트를 입력하여 생성된 코드를 비교 분석 및 최적화하여 적용했습니다.

The Result

개발자 도움 없이 디자이너 단독으로 스크롤 기반 시퀀스 애니메이션과 영상 플레이어가 결합된 고수준의 인터랙티브 웹페이지를 제작하였으며, 여러 AI 툴을 활용한 효율적인 코드 협업 프로세스를 정립했습니다.

Trade-off

AI 생성 코드가 상세한 레이아웃이나 기기별 대응까지 완벽히 처리하지 못하는 경우가 빈번하여, 구현 가능한 범위 내에서 디자인 시안을 일부 타협하거나 수동 보완 작업에 시간이 소요되는 한계가 있었습니다.

03

Key Concepts

Concept · 01

Spline

실시간 협업이 가능하며 웹에서 즉시 구동되는 3D 콘텐츠를 제작할 수 있는 디자인 도구입니다.

  • 브랜드 상징 오브제인 키링을 3D로 모델링하고 스크롤 반응형 모션을 부여하는 데 사용되었습니다.
Concept · 02

Framer

디자인한 결과물을 실제 웹사이트로 빠르게 배포할 수 있게 해주는 노코드/로우코드 웹 제작 플랫폼입니다.

  • 전체적인 웹페이지의 레이아웃 구성과 AI가 생성한 커스텀 코드를 통합하는 메인 엔진으로 활용되었습니다.
Concept · 03

Visual Prompting

텍스트 설명과 함께 디자인 시안 이미지를 AI에게 제공하여 결과물의 정확도를 높이는 방식입니다.

  • 말설명으로 부족한 레이아웃과 인터랙션의 의도를 AI에게 정확히 전달하여 수정 횟수를 줄이는 데 기여했습니다.