Midjourney와 v0를 활용한 애니메이션 내비게이션 아이콘 제작 가이드
이 영상은 Tesco의 프로덕트 디자인 리드 Rob Graham이 ChatGPT, Midjourney, 그리고 v0를 조합하여 평범한 내비게이션 바에 생동감 넘치는 애니메이션 아이콘을 구현하는 과정을 담고 있습니다. 추억의 만화 스타일을 현대적인 UI에 녹여내어 사용자 경험을 한 단계 높이는 창의적인 AI 워크플로우를 소개합니다.
1. 프로젝트의 시작: 향수를 자극하는 디자인 컨셉 🎨
디자이너 Rob은 최근 트위터나 링크드인에서 유행하던 에어비앤비(Airbnb) 스타일의 아이콘에서 영감을 얻었지만, 자신만의 독특한 스타일을 탐구하고 싶었습니다. 그는 영국 브랜드인 Tesco의 정체성에 맞춰 70~80년대 영국에서 인기를 끌었던 만화 'Mr. Benn' 스타일의 손그림 느낌을 선택했습니다.
"Tesco는 매우 영국적인 브랜드잖아요. 그래서 이런 향수를 불러일으키는 스타일이 잘 어울릴 거라고 생각했어요."
단순히 예쁜 아이콘을 만드는 것을 넘어, 클릭했을 때 짧은 비디오가 재생되는 인터랙티브한 요소를 추가하여 사용자에게 미소를 선사하는 것이 이번 프로젝트의 핵심 목표였습니다. 😊
2. ChatGPT와 Midjourney의 협업: 이미지와 프롬프트 생성 🤖
Rob은 먼저 ChatGPT를 사용하여 구체적인 이미지 컨셉을 잡고, 이를 Midjourney에서 실행할 수 있는 정교한 프롬프트로 변환했습니다.
- ChatGPT의 역할: "Tesco 배달 트럭을 'Mr. Benn' 스타일의 손그림으로 그려줘", "배경은 투명하게 해줘"와 같은 요구사항을 정리하고, Midjourney가 이해하기 쉬운 전문 프롬프트로 만들어줍니다.
- Midjourney의 역할: 생성된 프롬프트를 바탕으로 실제 이미지를 만들고, 최근 추가된 비디오 생성 기능을 활용해 애니메이션을 만듭니다.
"왜 ChatGPT에게 상세 사양을 물어보냐고요? Midjourney에 직접 입력할 수도 있지만, ChatGPT를 거치면 훨씬 더 구체적이고 스타일이 일관된 프롬프트를 얻을 수 있거든요."
특히 Midjourney의 비디오 기능은 시작 프레임과 끝 프레임을 지정할 수 있어, 내비게이션 아이콘에 필수적인 '무한 루프(Seamless Loop)' 애니메이션을 만드는 데 매우 유리했습니다. 🔄
3. 시행착오와 디테일 잡기: "제발 회전하지 마!" 🛵
하지만 AI를 활용한 작업이 항상 순탄하기만 한 것은 아니었습니다. Rob은 배달 트럭이나 오토바이가 앞으로 나아가는 역동적인 움직임을 원했지만, Midjourney는 자꾸만 물체를 3D처럼 회전시키는 경향이 있었습니다.
"바퀴가 굴러가고 먼지가 좀 날리는 정도를 원했는데, 얘네들이 자꾸 미친 듯이 제자리에서 뱅글뱅글 도는 거예요! (웃음)"
오토바이가 자꾸 스핀을 도는 바람에 수많은 시행착오(Trial and error)를 겪어야 했지만, 결국 그중 가장 자연스럽고 귀여운 움직임을 보여주는 결과물을 선택하여 비디오 파일로 내보냈습니다. 📽️
4. v0를 이용한 최종 구현: 코드로 생명 불어넣기 💻
준비된 애니메이션 비디오를 실제 웹 요소로 만드는 마지막 단계는 v0를 사용했습니다. v0는 사용자의 자연어 명령을 기반으로 UI 구성 요소를 생성해 주는 도구입니다.
- 내비게이션 구조 잡기: 상단에 탭이 있는 기본 내비게이션 바 생성을 요청합니다.
- 비디오 삽입: 준비한 아이콘 비디오 파일을 업로드하고 텍스트 레이블 뒤에 배치합니다.
- 인터랙션 설정: 마우스를 올렸을 때(Hover)나 클릭했을 때의 스케일 조정, 애니메이션 재생 여부 등을 미세하게 조정합니다.
"처음부터 끝까지 대략 두 시간 정도 걸린 것 같아요. 사실 대부분의 시간은 Midjourney에서 아이콘이 회전하지 않게 하려고 씨름하는 데 썼죠."
결론: AI가 열어주는 창의성의 기회 🚀
Rob은 자신이 전문 애니메이터가 아님에도 불구하고, 이러한 AI 도구들을 활용해 수준 높은 인터랙티브 디자인을 완성할 수 있었다는 점에 주목합니다.
"이건 단순히 생산성의 문제가 아니라, 예전에는 할 수 없었던 창의성의 빗장을 푸는 일이에요. 저는 애니메이터가 아니지만, 이제는 제 인터페이스에 생동감 넘치는 캐릭터를 직접 불어넣을 수 있게 되었죠."
2026년 현재, 디자인 현장에서는 이처럼 여러 AI 도구를 적재적소에 섞어서 사용하는 'AI 워크플로우 설계 능력'이 디자이너의 핵심 경쟁력이 되고 있습니다. 단순히 기술적인 완벽함보다는 사용자에게 어떤 즐거움을 줄 수 있을지 고민하는 창의적인 시도가 더 중요한 시점입니다. ✨