AI 아이콘에 생명을 불어넣다_케이뱅크 아이콘 AI 연습기 2편

들어가며

 

이제 3D 아이콘을 제작하는 것을 넘어, 아이콘에 생동감을 부여하는 모션 효과를 학습해보았습니다. 각 기술의 소개와 활용 방법은 다음과 같습니다.

디지털 콘텐츠에서 3D 아이콘은 단순한 시각적 요소를 넘어, 브랜드 아이덴티티를 강화하고 사용자 경험(UX)을 풍부하게 만드는 중요한 역할을 하고 있습니다. 최근에는 정적인 3D 아이콘을 넘어서 움직임을 통해 생동감을 더하는 모션 디자인이 점점 더 주목받고 있습니다. 이는 사용자와의 감성적 연결을 강화하고, 콘텐츠의 가독성과 집중도를 높이는 데 탁월한 효과를 발휘합니다.

이번 스터디에서는 단순히 아이콘을 디자인하는 데 그치지 않고, AI 기술을 활용해 3D 아이콘에 애니메이션 효과를 부여하는 실험을 진행했습니다. 애니메이션은 정지된 이미지에 생동감을 부여하고, 이를 통해 더 큰 사용자 몰입감을 유도할 수 있는 강력한 도구입니다. 특히, AI 기반 오픈소스 도구들은 이러한 작업을 보다 효율적으로 수행할 수 있는 가능성을 열어줍니다.

 

움직이는 이미지를 만들기 위해서 아래 3가지 방법을 통해 자사 아이콘을 애니매이션으로 만들었습니다.

1. AnimateDiff
2. SVD(Stable Video Diffusion)
3. SV3D(Stabie Video 3D)

각각의 결과물을 보면, 실사와 같은 이미지에 대해서는 AnimateDiff, SVD가 애니메이션 효과를 잘 부여했지만 아이콘형태의 이미지는 기대한 것 만큼 잘 생성되지 않았습니다. (원본을 헤친다거나 픽셀이 많이 깨짐)

하여, 최종적으로 원본을 거의 해치지 않으면서 턴테이블 형태의 애니매이션 효과를 부여해주는 SV3D모델을 사용하였습니다.

이번 스터디에서는 오픈소스를 통해 움직이는 애니메이션을 만들었지만, 오픈소스 외에도 Luma, Runway, Kling AI등 여러 상용화 서비스가 있기 때문에 이후에 다양한 상용화 서비스도 함께 사용해서 AI 툴을 이용하여 업무에 적용할 수 있는 방안을 모색하고자 합니다.

 

또한, AI 도구를 활용한 애니메이션 제작은 단순한 기술적 도입을 넘어, 디자인 및 마케팅 업무의 생산성 향상과 창의성 확장이라는 측면에서 큰 가능성을 보여주었습니다.

이번 스터디의 목표는 크게 두 가지로 나눌 수 있습니다:

• 기술적 실험과 결과 분석: 각 도구를 활용해 다양한 애니메이션 효과를 테스트하고, 그 결과를 비교 분석했습니다.
• 실무 적용 가능성 탐구: 제작된 애니메이션을 실제 서비스 화면에 적용해 사용자 반응을 검토하고, 이를 통해 데이터 기반의 디자인 의사결정을 도출했습니다.

 

첫 번째, AnimateDiff: 정지 이미지를 애니메이션으로

 

AnimateDiff는 정적인 이미지를 움직이는 애니메이션으로 변환하는 데 중점을 둔 AI 기술로, 특히 Stable Diffusion 기반에서 정적 콘텐츠를 연속적인 프레임 시퀀스로 확장하는 데 탁월합니다. 이를 통해 정지된 3D 아이콘이나 이미지에 동적인 요소를 추가하여 더욱 생동감 있는 결과물을 만들어낼 수 있습니다.

 

주요특징

 

 

1. 정지 이미지의 연속된 움직임 생성:

• AnimateDiff는 단순히 이미지를 연결하는 것에 그치지 않고, 각 프레임 간의 자연스러운 움직임을 생성하는 데 특화되어 있습니다.
• 예를 들어, "A 3D coin spinning smoothly"라는 프롬프트를 입력하면 동전이 부드럽게 회전하는 애니메이션을 생성할 수 있습니다. 이를 통해 정적 콘텐츠를 애니메이션화하는 과정이 단순화되며, 기존에 수작업으로 진행하던 모션 작업을 AI로 대체할 수 있습니다.

 

2. 시간 축 기반의 모션 생성

• AnimateDiff는 각 프레임이 시간 축에 따라 연속적으로 연결되도록 설계되어, 루프 애니메이션을 만들기에 적합합니다.
• 예를 들어, 은행 로고가 점점 커지며 화면 중앙에 자리 잡는 애니메이션처럼, 브랜드 메시지를 전달하기 위한 효과적인 동적 콘텐츠를 제작할 수 있습니다.

 

3. 애니메이션 제작에서의 활용

• AnimateDiff는 특히 3D 아이콘에 자연스러운 모션을 추가하는 데 유용합니다.
• 예를 들어, 3D 돼지 저금통이 천천히 회전하거나, 금화를 떨어뜨리는 애니메이션을 생성하는 등의 작업을 통해 시각적 스토리텔링을 강화할 수 있습니다. 이는 사용자 인터페이스(UI)에서의 주요 시각 요소로 활용되어, 사용자의 관심을 끌고 몰입도를 높이는 데 도움을 줍니다.

 

4. 마케팅 및 비주얼 콘텐츠 제작

• AnimateDiff로 생성된 동영상이나 GIF는 소셜 미디어(SNS), 웹 페이지 등에서 활용 가능한 고품질의 시각 콘텐츠로 변환될 수 있습니다. 브랜드 캠페인에서 제품의 특징을 설명하는 짧은 애니메이션을 제작하거나, 이벤트 프로모션에서 주목도를 높이기 위한 시각적 요소로 활용할 수 있습니다.

 

(용걸님의 도움을 많이 받은 모션을 품은 아이콘)

 

AnimateDiff의 기술적 특징　

 

 

1. 정밀한 프롬프트 기반 생성

• AnimateDiff는 사용자가 입력한 프롬프트를 기반으로 애니메이션을 생성하며, 프롬프트 작성의 세부 사항에 따라 결과물의 품질과 자연스러움이 달라집니다. 특히, 구체적인 동작이나 스타일을 명확히 지정하면 더욱 정교한 애니메이션을 얻을 수 있습니다.

 

2. 루프 애니메이션 최적화

• AnimateDiff는 프레임의 시작과 끝을 부드럽게 연결하여 매끄러운 루프 애니메이션을 생성합니다. 이러한 특성은 배경에서 반복적으로 재생될 아이콘 애니메이션이나 간단한 비주얼 효과를 제작하는 데 이상적입니다.

 

3. 프레임의 자연스러운 전환

• AnimateDiff는 각 프레임 간의 픽셀 변화와 전환을 최적화하여 끊김 없이 자연스러운 모션을 구현합니다. 이 과정에서 픽셀 왜곡이나 이미지 품질 저하를 최소화하며, 고해상도의 3D 아이콘에서도 깔끔한 결과를 제공합니다.

 

실제 활용 예시　

 

 

저는 AnimateDiff를 사용해 "3D 돼지 저금통이 천천히 회전하며 동전을 떨어뜨리는 애니메이션"을 만들어보았습니다. 이 과정에서 은은한 조명을 추가해 돼지 저금통의 입체감을 강조했으며, 결과물은 마치 수작업으로 제작한 것처럼 부드럽고 자연스러웠습니다. 다만, 복잡한 프레임 전환이 필요한 경우에는 추가적인 데이터 보완이 필요하다는 점도 알게 되었습니다.

이 외에도 AnimateDiff는 다양한 산업 분야에서 활용 가능성을 보여줍니다. 교육 콘텐츠, 광고 캠페인, 인터랙티브 웹 디자인 등에서 정적 콘텐츠에 생동감을 더하는 작업을 간단히 수행할 수 있습니다. 특히 마케팅에서는 SNS와 같이 빠르게 소비되는 미디어 환경에 적합한 짧고 매력적인 애니메이션을 제작하는 데 유용합니다.

AnimateDiff는 정적 이미지를 넘어선 새로운 가능성을 열어주는 도구입니다. 앞으로 더 다양한 콘텐츠와 결합하여 창의적인 디자인 작업의 기회를 확대할 수 있을 것입니다.

 

두번째, ControlNet: 이미지 생성의 정밀한 제어

 

ControlNet은 이미지 생성 과정에서 사용자가 원하는 결과물을 더욱 정밀하게 제어할 수 있도록 설계된 기술입니다. Stable Diffusion의 출력을 사용자 입력 데이터(포즈, 깊이 맵, 엣지 맵 등)를 활용해 구체적인 방향으로 유도합니다. 단순 텍스트 프롬프트로는 구현하기 어려운 세부적인 구도나 디테일을 가능하게 하며, 이를 통해 창의적이고 복잡한 결과물을 제작할 수 있습니다.

 

 

주요특징

 

 

1. 기본 정적 이미지 생성의 확장

• ControlNet은 텍스트 프롬프트만으로는 구현하기 어려운 자세나 구도를 더욱 정밀하게 구현할 수 있게 합니다.
• 예를 들어, OpenPose를 사용해 특정 포즈를 지정하면, 해당 자세를 가진 캐릭터 이미지를 정확히 생성할 수 있습니다. 이러한 기능은 특히 캐릭터 디자인, 스토리보드 제작, 광고 콘텐츠 개발에서 매우 유용합니다.

 

2. 엣지 및 깊이 맵을 활용한 정교한 이미지 생성

• ControlNet은 사용자가 제공한 엣지 맵 또는 깊이 맵 데이터를 기반으로 이미지를 생성합니다. 엣지 맵을 활용하면 복잡한 구조나 특정 형태를 유지하면서 스타일을 다양화할 수 있으며, 깊이 맵을 사용하면 이미지의 3D 공간감을 정교하게 제어할 수 있습니다. 이러한 기능은 3D 모델링의 기초 작업이나 복잡한 장면의 시각적 정확성을 보장하는 데 큰 도움을 줍니다.

 

3. 사용자 제공 데이터로 세부적인 컨트롤 가능

• ControlNet은 기존의 텍스트 기반 이미지 생성과 달리 사용자가 직접 입력한 데이터를 적극 활용합니다.
• 예를 들어, 사진에서 추출한 엣지 데이터나 깊이 데이터를 활용하면 사진과 유사한 스타일로 이미지를 변환하거나 새로운 배경과 결합할 수 있습니다. 이를 통해 정밀한 맞춤형 결과물을 얻을 수 있습니다.

 

4. 스타일 변환 및 정확도 개선

• ControlNet은 특정 포즈나 구도를 유지하면서 캐릭터의 스타일을 다양화하거나, 기존의 2D 이미지를 3D 느낌으로 확장하는 데 유용합니다. 또한 복잡한 장면을 생성할 때 조건 데이터를 활용하면 보다 직관적이고 정확하게 결과물을 제어할 수 있습니다.
• 예를 들어, 도시의 스케치 이미지를 엣지 데이터로 입력한 뒤, 이를 미래적인 도시 풍경으로 변환하는 작업이 가능합니다.

 

ControlNet 의 기술적 특징

 

1. OpenPose 및 엣지 맵 지원

• OpenPose를 통해 인물의 자세를 입력하거나 엣지 맵을 사용해 원하는 구조를 정확히 반영할 수 있습니다. 이러한 기능은 특히 복잡한 동작이나 구도를 요구하는 이미지 생성에서 강력한 도구로 활용됩니다.

 

2. 깊이 맵을 활용한 3D 공간감 구현

• ControlNet은 깊이 맵 데이터를 사용해 이미지의 입체감을 조정합니다. 이를 통해 캐릭터나 사물이 3D 공간에서 자연스럽게 배치된 것처럼 보이게 할 수 있습니다.

 

3. ComfyUI 및 다양한 인터페이스와의 호환성

• ControlNet은 ComfyUI와 같은 인터페이스와 쉽게 통합되어 작업 환경을 더욱 효율적으로 만들어 줍니다. 이를 통해 사용자는 직관적인 UI 환경에서 ControlNet의 강력한 기능을 활용할 수 있습니다.

 

실제 활용예시

 

ComfyUI에 ControlNet 추가하여 설치합니다.

구도에 대한 이미지를 찾아서 챗GPT를 통해 프롬프트를 만든 뒤, 적용하고 싶은 모델을 선택하여 다양하게 이미지를 만들어 볼 수 있어요.

저는 케이뱅크 3D icon을 학습시켜 만든 돼지를 이용하여 스케치를 만들어 보았어요.

 

 

저는 ControlNet을 사용해 케이뱅크의 3D 돼지 저금통 아이콘을 기반으로 다양한 스타일의 이미지를 생성해보았습니다. 먼저 OpenPose를 활용해 돼지가 특정 포즈를 취하도록 설정한 뒤, 엣지 맵 데이터를 추가해 구체적인 구도를 유지하면서도 색감과 질감을 다양화했습니다. 이 과정에서 기본 이미지를 완전히 새롭게 변환하지 않고, 기존의 정체성을 유지한 상태에서 창의적인 변화를 줄 수 있었습니다

 

세번째, SVD(Stable Video Diffusion)

 

**Stable Video Diffusion (SVD)**는 Stable Diffusion 기술을 확장해 정적인 이미지 생성에서 나아가 동적인 비디오 콘텐츠 제작을 가능하게 하는 혁신적인 AI 모델입니다. SVD는 기존의 정지된 이미지를 시간 축을 포함한 연속적인 프레임으로 확장하여, 자연스러운 움직임과 시각적 일관성을 유지하면서 동적 콘텐츠를 생성할 수 있도록 설계되었습니다.

 

 

주요특징

 

 

1. 프레임 간 일관성 유지

• SVD의 가장 큰 특징은 연속적인 프레임 간의 시각적 일관성을 보장한다는 점입니다. 이 기술은 각 프레임 간에 발생할 수 있는 불일치나 끊김 현상을 최소화하여, 부드럽고 자연스러운 움직임을 생성합니다.
• 예를 들어, 캐릭터가 걸어가는 동작이나 카메라가 회전하는 장면을 SVD로 제작할 경우, 매끄러운 전환 효과를 얻을 수 있습니다.

 

2. 텍스트에서 동영상 생성 가능

• SVD는 사용자가 입력한 텍스트 프롬프트를 기반으로, 이미지뿐 아니라 연속적인 비디오 콘텐츠를 생성할 수 있습니다.
• 예를 들어, "A futuristic city with flying cars zooming by"라는 프롬프트를 입력하면, 초현실적인 미래 도시의 비디오를 생성할 수 있습니다. 이 기능은 광고, 영화, 게임 트레일러 제작 등 다양한 분야에서 활용 가능성을 제공합니다.

 

3. 시간 축 기반 이미지 확장

• SVD는 기존의 Stable Diffusion 모델에 시간 축을 추가하여, 정적인 이미지를 동적으로 변환합니다. 시간 축의 확장은 정적인 장면에 움직임과 생동감을 부여하며, 단순히 정지된 이미지가 아니라 스토리를 전달하는 콘텐츠를 제작할 수 있도록 돕습니다.

 

4. 사용자 친화적 작업 환경

• SVD는 ComfyUI와 같은 직관적인 인터페이스와 통합되어, 사용자가 복잡한 기술적 작업 없이 손쉽게 동영상을 생성할 수 있습니다. 간단한 프롬프트와 몇 가지 설정만으로도 원하는 동적 콘텐츠를 빠르게 제작할 수 있는 것이 특징입니다.

 

하지만, SVD의 한계와 개선점이 있습니다. SVD는 뛰어난 비디오 생성 능력을 제공하지만, 특정 유형의 이미지에서는 생성된 프레임 간 불일치나 품질 저하가 발생할 수 있습니다. 특히 세밀한 디테일을 요구하는 작업에서는 추가적인 후처리가 필요할 수 있습니다. 이를 보완하기 위해, 모델의 훈련 데이터를 확장하거나 사용자 제공 데이터를 추가적으로 활용해 세밀함을 높이는 작업이 필요합니다.

SVD는 AI 기반 동영상 제작의 새로운 가능성을 열어주는 기술로, 정적인 이미지 생성에 머물렀던 기존의 Stable Diffusion 기술을 한 단계 더 진화시켰습니다. 앞으로 SVD의 활용 범위가 더욱 넓어지며, 크리에이티브한 콘텐츠 제작에 핵심적인 역할을 할 것으로 기대됩니다.

 

네번째, SV3D: 3D 공간의 연속성을 부여하다

 

**SV3D (Stable Video 3D)**는 Stability AI에서 개발한 모델로, 정적 이미지를 기반으로 3D 공간에서의 연속적인 움직임을 생성할 수 있는 독창적인 기술입니다. 특히 Turn Table 효과를 활용해 360도 회전 뷰를 제작할 수 있어, 입체적이고 직관적인 콘텐츠를 제작하는 데 유용합니다.

SVD와 비교했을 때, SV3D는 주로 3D 공간의 입체감과 원본 이미지의 보존에 초점을 맞추는 반면, SVD는 시간 축을 기반으로 한 연속적인 움직임을 생성하여 시나리오 중심의 비디오 제작에 더 적합합니다. SV3D는 특히 원본 이미지의 품질을 최대한 유지하면서 제한된 종류의 동적 효과를 구현하는 데 강점이 있습니다.

 

 

주요특징　

 

 

1. 원본 이미지 보존

• SV3D는 입력 이미지의 구조와 텍스처를 최대한 유지하면서 3D 회전 효과를 생성합니다.
• 반면 SVD는 입력 이미지의 프레임 간 변화를 더 자유롭게 해석해 움직임을 만들어내기 때문에, 원본 이미지의 세부적인 요소가 다소 왜곡될 가능성이 있습니다.
• 예를 들어, SV3D로 제작한 돼지 저금통 아이콘은 원본의 형태와 색상이 거의 그대로 유지되면서 360도 회전하는 모습을 보여줍니다. SVD로 동일 작업을 수행하면 회전뿐 아니라 불필요한 텍스처 변형이나 왜곡이 발생할 수 있습니다.

 

2. 3D 공간에서의 연속성 유지

• SV3D는 3D 회전을 기반으로 한 입체적인 뷰를 생성하여, Turn Table 효과와 같이 특정 오브젝트를 중심으로 자연스러운 시점 변화를 제공합니다.
• SVD는 시간 축을 기반으로 장면 전환 및 비디오 클립 제작에 더 적합하며, 3D 회전보다는 일반적인 동적 움직임 생성에 초점이 맞춰져 있습니다.

 

3. 적용 가능 영역

• SV3D는 주로 3D 모델이나 오브젝트의 입체적인 특징을 강조할 때 유용합니다. 예를 들어, 제품의 360도 뷰를 제작하거나, 로고의 회전 효과를 구현할 때 적합합니다.
• 반면 SVD는 스토리텔링 중심의 비디오 콘텐츠 제작에 더 적합하며, 복잡한 장면 변화나 캐릭터 동작을 포함한 클립 생성에 유리합니다.

 

4. 제작 범위와 한계

• SV3D의 한계: 360도 회전과 같은 제한적인 모션에만 특화되어 있으며, 시간 축을 통한 복잡한 스토리 전개는 지원하지 않습니다. 따라서 SV3D는 정적 오브젝트의 시각적 매력을 극대화하는 데 초점이 맞춰져 있습니다.
• SVD의 한계: SVD는 프레임 간의 일관성을 유지하지만, 디테일한 오브젝트의 구조나 색상을 원본 그대로 보존하기 어려울 수 있습니다.

 

SV3D는 정적인 이미지를 3D 공간에서 생동감 있게 전환해주는 도구로, 입체적인 콘텐츠 제작에서 중요한 역할을 하고 있습니다. 특히 원본 이미지를 거의 손상시키지 않으면서도 생동감을 부여한다는 점에서, AI 기반 비주얼 콘텐츠 제작의 새로운 가능성을 열어주고 있습니다.

 

저는 SV3D 모델을 이용하여 Turn table 효과를 내보도록 하겠습니다. SV3D 모델의 경우가 원본을 유지하면서 비디오를 만들지만, Turn table 형식의 모션만 생성할 수 있었습니다.

 

 

다섯번째, 실제 앱 적용 사례

 

조용걸님이 제작한 Turn Table 효과 애니메이션 아이콘을 홈 화면의 실시간 인기 영역 - 내 신용관리 AB 테스트에 적용한 결과입니다.

 

테스트결과: 3D + 모션 적용 후 클릭률이 79.28% 증가한 것을 확인할 수 있었습니다

서비스 명: 내 신용관리

3D + 모션 노출기간: 2024.10.18 ~ 2024.10.21

2D 노출기간: 2024.10.24 ~ 2024.10.28

이미지 타입	노출	클릭	CTR	2D 평균대비 증감률
3D + 모션	722,686	1,773	0.25%	79.28%
2D	968,248	1,325	0.14%	-

 

 

2025년에도 AI 아이콘 스터디를 꾸준히 이어가 더 큰 성과를 이루고, 이를 블로그에 공유할 수 있도록 노력하겠습니다!