6화: AI 프로토타이핑에 3D 인터랙션 더하기

2달 안에 AI 프로토타이핑 마스터하기

최근 AI 툴이 빠르게 발전하면서 많은 소프트웨어 회사들이 새로운 기능을 출시하고 있습니다. 특히 AI 기술을 활용한 기능을 적극적으로 홍보하려는 움직임이 많습니다. 이때 많은 회사들이 공통적으로 추구하는 비즈니스 목표가 있습니다. 다음과 같은 기업 이미지를 사용자에게 전달하는 것입니다.

우리는 현대적이고 혁신적인 제품을 만들고 있다

적절한 곳에 3D 모션 그래픽을 조금만 더해도 훨씬 현대적이고 혁신적인 느낌을 줄 수 있습니다.

3D 모션을 만드는 툴은 여러 가지가 있지만 저는 Spline을 자주 사용합니다. 비교적 배우기 쉽고 웹 프로덕트에 넣기도 편하기 때문입니다. 저는 Figma 내에서 2D 모션 그래픽을 구현하기 때문에 사용 안하지만, Spline 내에서 2D 모션 그래픽도 구현도 가능합니다.

3D 모션 그래픽을 만들기 위해 복잡한 지식이 꼭 필요한 것은 아닙니다. Figma를 다룰 줄 안다면 Spline은 유튜브 튜토리얼 한 30개 정도 보면 어떻게 사용하는지에 대한 감이 옵니다. 저는 5분에서 20분 정도 하는 Spline 유튜브 튜토리얼을 한 50개 봤는데, 아침이나 점심시간에 틈틈히 보면 3주에서 4주 정도면 간단한 3D 인터랙션 디자인에 필요한 작동법을 배울 수 있습니다.

Spline을 이해하는 가장 쉬운 방법은 해리포터에 나오는 움직이는 액자라고 생각하는 것입니다. Spline에서는 다음 세 가지를 설정할 수 있습니다.

액자 안에 들어가는 디자인

디자인의 움직임

어떤 행동이 움직임을 트리거하는지 (클릭, hover 등)

이렇게 만든 3D 모션을 링크로 가져와서 AI 프로토타이핑 툴에 전달하면 됩니다. 그러면 AI에게 특정 위치에 그 모션을 배치해 달라고 요청할 수 있습니다.

Spline 요소는 화면 위에 얹는 레이어라기보다는 Figma 프레임 컨셉처럼 하나의 프레임에 가깝습니다. 그래서 다른 UI 요소 위에 겹치게 배치하기보다는 디자인과 자연스럽게 어울리는 위치에 단독으로 배치해야 합니다.

프레임은 영어로 액자라는 뜻이기도 해서, 3D 모션 그래픽 디자인은 디자이너가 만든 집의 벽에 액자를 거는 것과 비슷합니다. 없어도 집은 완성되지만, 적절하게 사용하면 결과물의 느낌과 완성도를 업그레이드할 수 있습니다.

또 하나의 장점은, AI 프로토타입의 결과물 생성이 5분을 넘어갈 때도 있는데, 이 때 시간을 투자하고 실험해 보기 좋은 영역이라는 점입니다.

---

몇년전부터 Spline을 사용하고 있었는데, 지난달에 Spline에서 연락오더니 팀을 위해 무료로 Spline Trial도 제공해주고 신기능도 사용해볼 수 있게 해줘서 다른 모션 그래픽 툴들도 있지만 Spline을 훨씬 적극적으로 활용하고 있습니다. 어떤 분야든지간에 열정 넘치게 일에 임하는 사람들이 참 멋진 것 같습니다.

Spline에서 무료로 Trial도 제공해주고 신기능도 사용해볼 수 있게 해주고, Enterprise Design Partner의 회신이 굉장히 빠릅니다.

포도라는 스타트업에서 디자인 매니저가 말합니다.

Notion 캐릭터 움직이는 거 봤어? Notion 캐릭터처럼 우리도 모션 그래픽을 AI 기능에 접목해보자.

매니저가 얘기한 Notion AI의 모션 그래픽 디자인

다음은 AI 프로토타입에 3D 모션을 추가하는 간단한 워크플로우입니다.

AI 프로토타입에 3D 모션을 추가하는 워크플로우

Step 1. Figma에서 베이스 디자인 준비하기

먼저 Figma에서 3D 모션을 추가하고 싶은 화면을 엽니다.

어떤 영역에 3D 요소를 넣을지 먼저 정하고, 그 영역에 프레임을 만들고 프레임에 들어갈 시각 요소를 기준으로 작업을 시작합니다.

어떤 3D 모션을 만들고 싶은지 대략적인 디자인을 피그마에서 만듭니다.

Step 2. Spline에서 3D 모션 만들기

Figma에서 만든 만들고 싶은 3D 모션 이미지를 Spline으로 레퍼런스로 가져옵니다. (처음에는 복잡한 장면보다는 단순한 shape와 단순한 움직임으로 시작하는 것이 좋습니다.)

Figma에 있는 프레임 픽셀 크기에 맞춰서 디자인을 만듭니다. 예를 들어서 Figma에 배치하고 싶은 3D 모션 프레임이 200px * 200px면, Spline에서도 해당 크기에 맞춰서 디자인을 해야 나중에 AI 프로토타이핑할 때 편합니다.

그 이미지를 바탕으로 디자인을 3D로 다시 만들고 간단한 모션을 추가합니다.

Step 3. Spline 코드를 AI 프로토타이핑 툴에 연결하기

Spline에서 Export → Viewer → Copy Embed를 눌러 viewer 코드를 복사합니다.

그 다음 Cursor나 Claude로 이동해 Placeholder 컴포넌트를 해당 Spline 코드로 교체해 달라고 요청합니다. 예를 들면 다음과 같이 프롬프트할 수 있습니다.

Replace the “[component name]” with the Spline viewer code.
[Spline viewer code]

Spline Viewer를 Export하는 방법. 먼저 Export을 누르고 Viewer가서 코드를 Copy 하면 됩니다.

Step 4. Local server에서 결과 확인하기

Terminal에서 프로젝트 폴더를 열고 local server를 실행합니다.

브라우저에서 실제 화면을 보면서 3D 모션이 원하는 위치에 잘 들어갔는지, interaction이 자연스럽게 작동하는지 확인합니다.

Step 5. Spline과 local server를 오가며 반복 개선하기

원하는 상태가 나올 때까지 Spline에서 수정하고, 다시 local server에서 확인하는 과정을 반복합니다.

이 단계에서는 모션의 속도, 위치, 크기를 조금씩 조정하면서 제품과 자연스럽게 어울리는 상태를 찾으면 됩니다.

뉴욕 테크 실무에서 실제로 적용하며 배운 팁입니다.

1. 단순한 도형과 단순한 모션으로 시작하세요

처음부터 복잡한 3D 애니메이션을 만들려고 하면 오히려 시간이 더 오래 걸리고 포기하기 쉽습니다. 또한, 미니멀한 디자인이 유행도 거의 안 타고 현대적인 느낌을 줘서 이해관계자의 buy-in을 얻기도 쉽습니다.

2. Spline Community의 Remix 기능을 활용해 보세요

Community 탭에서 다양한 3D 디자인과 모션을 보고 Remix 버튼을 눌러 직접 실험해 볼 수 있습니다. Spline과 직접 커뮤니케이션한 결과, Spline에서 만든 asset을 Remix한 다음에 수정해서 사용할 경우 조금만 수정했어도 상업적인 목적으로 디자인을 사용할 수 있습니다.

3. 로딩 상태에 3D 모션을 사용하는 것을 추천합니다

AI 기능은 결과를 생성하는 데 시간이 걸리는 경우가 많고, 보통 소프트웨어 제품들은 다 로딩 디자인을 필요로 합니다. 이때 3D 모션 로딩 상태를 사용하면 사용자가 기다리는 동안 지루함을 줄일 수 있습니다. 동시에 제품의 브랜딩을 강화하는 효과도 있습니다.

---

다음 글에서는 Figma Code Connect를 활용해 디자인 시스템 컴포넌트를 코드와 연결하고, AI 프로토타이핑의 정확도를 높이는 방법을 다루겠습니다.

---

MIT 석사 졸업 후 글로벌 테크 회사 뉴욕 지사에서 AI 기능을 디자인하는 시니어 UX 디자이너입니다. 이 브런치북에서 실무에서 AI 프로토타이핑을 적용하며 배운 내용을 나눕니다.

예제 파일은 이메일로 무료 공유합니다.
이번 화 예제 파일을 원하시면 댓글에 이메일을 남겨주세요. 주 1회 확인 후 보내드립니다.