Engineering
AI와 함께 만든 콘서트팩 아카이빙 웹페이지
여기어때 Brand Design Team여기어때
2026년 6월 5일
원문에서 보기 ↗브랜드 콘텐츠를 더 입체적으로 경험하게 만드는 웹 제작기
디자이너로 일하다 보면 “이 인터랙션 꼭 넣고 싶은데 개발 리소스가 없네…” 싶은 순간을 자주 마주하게 됩니다. 이번 콘서트팩 아카이빙 웹페이지를 만들면서는, 그 벽을 AI로 한번 넘어보고 싶었어요.
Spline으로 3D를 만들고, Framer로 웹페이지를 구현하고, ChatGPT · Claude · Gemini로 코드를 비교하며 작업했습니다. 이번 글은 개발자 없이 디자이너 혼자 원하는 인터랙션을 구현해 본 제작기입니다.
어떤 웹페이지를 만들었나
여기어때 콘서트팩은 공연과 숙박이 결합된 여기어때의 오리지널 콘텐츠로, 이전에 한번 소개한 적이 있었는데요! (🔗콘서트팩) 어느덧 8회차를 맞이하면서 유튜브 영상, 라이브 클립, 아티스트 라인업 등 방대한 자산이 쌓였고, 이를 하나의 URL 안에서 통합적으로 경험할 수 있는 아카이빙 페이지가 필요했어요. 단순히 콘텐츠를 나열하는 게 아니라, 콘서트팩의 콘텐츠 세계관을 경험할 수 있는 웹페이지를 목표로 했어요. 그러다 보니 구현하고 싶은 인터랙션도 자연스럽게 복잡해졌고, 이 과정에서 AI를 본격적으로 활용하게 됐습니다.
사용한 툴은 세 가지로, 3D 인터렉션엔 Spline, 웹페이지 구현엔 Framer, 그리고 코드 생성엔 Claude, ChatGPT, Gemini를 활용했습니다.
여러 AI를 비교하며 최적의 코드 고르기
이번 프로젝트에서 가장 많이 활용한 방법은 하나의 프롬프트를 여러 AI에 동시에 입력해보고, 결과를 비교한 뒤 가장 원하는 방향에 가까운 코드를 선택해 디벨롭하는 방식이었어요. 이미 다양한 AI 툴이 나와있는 상황에서, 어떤 툴이 내가 원하는 바를 가장 잘 구현해 주는지 직접 확인해 볼 필요가 있었습니다. 같은 요청을 해도 코드 구조나 구현 방식이 조금씩 달랐고, 실제로 Framer에 적용했을 때 결과의 차이가 더 뚜렷하게 보이더라고요.
프롬프트를 작성할 때 가장 신경 쓴 건, 누가 봐도 이해하기 쉬운 요청 내용을 전달하는 것이었어요. 특히 콘서트팩처럼 아이덴티티가 명확한 콘텐츠의 아카이빙 페이지는 컨셉과 방향이 뾰족해야 한다고 생각했는데요. 그래서 기획 단계에서 전체 플로우, 인터렉션 구조, 디자인 시안을 어느 정도 잡아둔 뒤 AI를 협업 도구로 활용하는 방법으로 진행했습니다. 말로만 설명하는 것보다 시각 자료를 함께 전달했을 때, 원하는 의도를 훨씬 정확하게 전달할 수 있었기 때문이에요. 제가 진행한 워크플로우는 아래와 같습니다!
[ 디자인 시안 → 프롬프트 초안 작성 → AI 코드 생성 → Framer에 적용 → 검토 및 보완 → 수정 반복 → 완성 ]
레이아웃을 이미지로 보여주고 조건을 명확하게 정리해 전달하는 방식은 텍스트만으로 설명하는 것보다 훨씬 효과적이었고, 특히 디테일한 레이아웃이나 인터랙션처럼 말로 설명하기 까다로운 내용일수록 이미지 첨부가 큰 도움이 됐어요.
이 글에서는 개발자 없이 AI를 활용해서 웹페이지를 구현하기까지 있었던 시행착오와 제작기를 공유하고자 합니다!
제작기 1. 메인 페이지 스크롤 인터랙션
웹페이지 구성안
홈페이지의 얼굴이라고 할 수 있는 메인 페이지는 스크롤에 따라 콘서트팩의 스토리가 펼쳐지는 방식으로 기획했습니다. 콘서트팩의 상징 오브제인 ‘키링’이 화면 중앙에 등장하고, 스크롤을 내릴수록 마치 영상이 재생되는 것처럼 움직이는 인터랙션이었어요. 키링은 단순한 굿즈를 넘어 공연, 숙박, 여행을 하나로 잇는 콘서트팩의 정체성을 담은 오브제였기 때문에, 3D로 구현해 존재감을 더 크게 보여주고 싶었어요.
키링 등장 → 줌인 → 회전 → 소개 문구 → 줌아웃 → 아카이빙 맵 → 맵핀 등장 → 회차별 팝업창(영상 자동재생)
(좌) 마우스 호버 인터렉션 적용안 · (우) 스크롤 시퀀스 애니메이션 적용안
그래서 작업 초기에는 모델링과 모션, 인터랙션을 모두 스플라인으로 진행했지만, 오브젝트를 클릭했을 때 현재 화면 안에서 콘텐츠가 열리는 흐름처럼
웹에서 필요한 일부 상호작용은 스플라인으로 구현하기에 한계가 있었습니다. 그래서 여러 방식 중 스크롤 기반 시퀀스 애니메이션이 가장 브랜드 경험에 적합하다고 판단해 구현 방법을 조금 바꿔 진행하게 되었습니다. 사용자가 어떤 흐름으로 콘텐츠를 경험하게 될지를 중심에 두고 다시 구성한 방향이었어요. 기존에 제작해둔 비주얼의 분위기는 살리면서, 사용자가 스크롤을 따라 자연스럽게 콘서트팩 세계관을 탐색할 수 있다는 점에서 좋은 방향이라고 생각되었어요.
이후에는 Framer에서 전체 흐름을 잡고, 사용자가 직접 클릭하고 이동하는 인터랙션을 하나씩 더해갔습니다. 개발 리소스가 충분하지 않은 상황이었기 때문에, 이 과정에서 AI를 적극적으로 활용했어요.
AI가 제안한 코드를 각각 적용해 보고, 그중 프로젝트 방향에 가장 가까운 결과를 기준으로 다듬어갔습니다. 처음부터 완성도 높은 결과가 나온 것은 아니었지만, 여러 방식을 비교하면서 브랜드 경험에 맞는 구조와 표현 방식을 찾아갈 수 있었습니다. 같은 프롬프트를 입력해도 툴마다 조금씩 다른 결과물을 내놓아 작업과정에서 비교해 보는 재미도 소소하게 있었네요.🤓
이번 작업에서 AI는 결과물을 대신 만들어주는 도구보단, 구현 가능성을 넓혀주는 협업 도구에 가까웠다고 볼 수 있을 것 같은데요. 개발 리소스가 제한된 상황에서도 AI를 활용해 시도할 수 있는 범위를 넓혀보고, 디자이너의 디렉션으로 결과물을 다듬어갔다는 점에서 의미 있는 작업이었다고 생각됩니다. AI가 다양한 방법을 제안해 준다면, 그중 어떤 방식이 브랜드 경험에 더 잘 맞는지 판단하고 조정하는 건 작업자의 디렉션이 중요한 것 같았습니다.
동일 프롬프트 입력시 AI별 코드 비교
제작기 2. 영상 콘텐츠 아카이빙 구현
콘서트팩은 회차별 공연 영상을 꾸준히 아카이빙 해 왔어요.
기존에는 유튜브 재생목록으로 제공했지만, 이번에는 단순한 영상 나열을 넘어 하나의 브랜드 경험으로 확장하고자 했어요. 그래서 라이브 영상과 함께 공연 당시 아티스트의 셋리스트도 함께 제공해, 그날의 공연을 보다 입체적으로 보여줄 수 있도록 구성했습니다.
페이지 레이아웃은 상단의 메인 플레이어(영상+셋리스트)와 하단의 아티스트별 썸네일 리스트, 크게 2단 구조로 잡았습니다. 메인 플레이어에서는 영상과 셋리스트를 함께 볼 수 있고, 하단 썸네일을 클릭하면 아티스트별 영상으로 이동하는 방식이죠.
페이지 기획안과 실제 구현안
이 페이지 역시 디자인 시안을 이미지로 첨부하고, 구현 조건을 구체적으로 정리해 여러 AI에 코드를 요청하는 방법으로 진행했습니다. 물론 코드로 구현하는 과정에서 디자인 툴로 작업할 때만큼의 세밀한 조정은 어려운 부분도 있었습니다. 원하는 디자인 시안을 첨부해서 요청해도 완벽하게 구현되지 않는 경우가 있었거든요. 예를 들면 세부 프레임 디자인이나, 디바이스 별로 레이아웃을 다르게 적용할 때 디테일한 조정 같은 부분들이요. 이런 부분은 구현 가능한 범위 안에서 조정하거나, 필요한 경우 어느 정도 타협하면서 진행했습니다. AI가 코드를 만들어주더라도, 디자인 완성도의 마지막 한 끗은 여전히 직접 손봐야 하는 영역이더라고요.
이렇게 제작한 웹페이지는 아래 링크에서 확인 할 수 있습니다.
AI로 완성도를 높이는 세 가지 포인트
거창하진 않지만, 비개발자로서 얻은 작은 경험치라고 한다면
✅ 원하는 디자인이 있다면 시안 이미지를 함께 첨부하기
저는 웹 빌더 툴을 사용했기 때문에, 웹 빌더 툴 기준으로 느낀 점인데요. 디자인 패널에 없는 기능도 코드를 활용하면 구현 범위를 넓힐 수 있었어요.