생성형 ai 이용하여 UXUI 디자이너를 위한 여러가지 재미있는 실험을 하고 있습니다. 오늘은 클로드 ai와의 대화를 통해 애니메이션을 제작하는 과정을 단계별로 살펴보면서, 인공지능이 어떻게 우리의 작업을 도와줄 수 있는지 알아보겠습니다. 이 과정에서 우리는 디자인 의도를 명확히 전달하는 방법, 피드백을 효과적으로 주고받는 방법, 그리고 최종적으로 원하는 json 애니메이션 결과물을 얻는 방법을 공유해 보겠습니다.
배경
최근 Claude Sonnet 3.5를 경험하면서 향상된 기능에 깊은 인상을 받았습니다. 이를 계기로 평소 만족스럽지 못했던 JSON 애니메이션 제작 과정을 개선해 보고자 하는 아이디어가 떠올랐습니다. 현재 국내 UXUI 디자인 분야에서는 Lottie를 활용한 앱 내 애니메이션 삽입이 보편화되어 있습니다. 그러나 대부분의 경우, Lottie에서 제공하는 기본 라이브러리에 의존하다 보니 디자이너가 원하는 애니메이션을 온전히 구현하는 데 한계가 있었습니다.
이러한 제약을 극복하기 위해 디자이너들은 ‘디자인 제작 → After Effects에서 모션 제작 → Lottie로 추출’이라는 복잡한 과정을 거치곤 했습니다. 하지만 이 방식은 시간 소요가 크고, 디자이너가 After Effects라는 별도의 툴을 숙달해야 한다는 점에서 효율성이 떨어졌습니다. 특히 빠른 반복과 즉각적인 피드백이 중요한 현대의 디자인 프로세스에 걸림돌이 되곤 했습니다.
이러한 문제의식을 바탕으로, 저는 새로운 접근 방식을 실험해보기로 결심했습니다. Figma를 사용해 심플한 아이콘을 제작한 후, 이를 Claude ai에게 전달하여 애니메이션 되는 JSON 파일을 직접 생성받는 것입니다. 이 방식이 성공한다면, 디자이너들은 복잡한 툴체인을 거치지 않고도 원하는 애니메이션을 신속하게 구현할 수 있을 것입니다.
초기 요구사항 명확히 하기
UX/UI 디자인 프로세스에서 가장 중요한 첫 단계는 무엇일까요? 바로 명확한 요구사항 정의입니다. AI와 작업할 때도 마찬가지입니다. 필자는 ‘간단한 자물쇠 아이콘 애니메이션’을 만들어 보려고 합니다.
AI는 우리의 머릿속에 있는 이미지를 직접 볼 수 없기 때문에, 가능한 한 상세하게 설명해야 합니다. 예를 들어, “둥근 모서리의 직사각형 본체와 그 위에 반원형 고리가 있는 자물쇠 모양이에요. 색상은 회색이고, 중앙에 작은 원형의 키홀이 있어요.”와 같이 구체적으로 설명하는 것이 좋습니다. 텍스트로 설명하기 어렵다면 다음 섹션에서 안내하는 레퍼런스 이미지를 활용해도 좋습니다.
또한, 애니메이션의 특성도 명확히 해야 합니다. “자물쇠가 부드럽게 좌우로 흔들리는 애니메이션을 원해요. 1초에 한 번 왕복하도록 해주세요.”와 같이 구체적인 동작과 타이밍을 제시하면 AI가 더 정확한 결과물을 만들어낼 수 있습니다.
이 과정에서 중요한 것은 인내심을 가지고 반복적으로 피드백을 주는 것입니다. 초기 결과물이 마음에 들지 않더라도 좌절하지 마세요. 각 단계마다 “이 부분은 좋네요, 하지만 여기를 이렇게 바꿔주세요”라는 식의 구체적인 피드백을 제공하면, 점진적으로 원하는 결과에 가까워질 수 있습니다.
json 애니메이션 생성 과정
본격적으로 클로드와 함께 애니메이션을 구현해봅니다.
1. 클로드 ai에게 디자인 전달하기
“백문이 불여일견”이라는 말이 있죠. AI와의 커뮤니케이션에서도 이 말은 절대적으로 적용됩니다. 때로는 우리가 아무리 자세히 설명해도 AI가 정확히 이해하지 못하는 경우가 있습니다. 이럴 때 가장 효과적인 방법은 바로 이미지 파일을 제공하는 것입니다. 필자는 json 코드와 이미지 두 가지로 전달을 해보았는데 이미지 전달이 더 형태를 잘 분석했습니다. (참고로 클로드는 svg파일 자체를 제공하면 분석하지 못하기 때문에 해당 코드를 복사 및 붙여넣기로 제공해야 합니다.)
우리의 자물쇠 아이콘 제작 과정에서도 이 방법이 큰 도움이 되었습니다. 처음에는 AI가 만든 자물쇠 모양이 우리가 원하는 것과 달랐지만, 이미지를 제공하자 매우 정확한 결과물을 얻을 수 있었습니다.
레퍼런스 이미지를 사용할 때 주의할 점은, 핵심적인 특징을 명확히 지적해주는 것입니다. “이 이미지의 전체적인 형태는 좋지만, 키홀의 위치를 조금 더 아래로 내려주세요”와 같이 구체적인 가이드를 제시하면 더욱 효과적입니다.
또한, 여러 개의 레퍼런스 이미지를 제공하는 것도 좋은 방법입니다. 예를 들어, 자물쇠의 전체적인 형태에 대한 이미지 하나와 키홀의 세부 형태에 대한 이미지를 따로 제공하면, AI가 각 요소의 중요성을 더 잘 이해하고 반영할 수 있습니다.
이 과정에서 우리는 AI와의 협업이 얼마나 효율적일 수 있는지 깨닫게 됩니다. 우리의 창의적인 비전을 AI의 신속한 실행 능력과 결합함으로써, 더욱 빠르고 정확하게 원하는 결과물을 얻을 수 있습니다.
2. 시행착오
수 많은 시행착오를 겪은 후 원하는 결과물을 얻었습니다. 그 과정에서 얻은 팁을 공유합니다.
처음에 이미지 레퍼런스를 제공하지 않았더니 계속해서 자물쇠 모양이 아닌 알 수 없는 모양을 생성했습니다. 중간에 이미지 레퍼런스를 제공해 보았더니 제공한 이미지를 분석하여 매우 유사하게 형태를 그려냈습니다.
그런데 여기서 애니메이션을 추가로 지시하니, 완성되었던 이미지 형태가 유지되지 않고 이렇게 자물쇠 본체만 있는 형태가 계속 나오기 시작했습니다.
지속적인 피드백을 통해 자물쇠 형태를 얻었지만 이번에는 키홀이 계속 누락되는 문제가 발생했습니다.
결국 여러가지 방법을 시도하다가 해결책을 찾았습니다. 키홀 레이어를 가장 앞으로 오도록 설정해 달라고 하니 키홀이 정확하게 들어갔습니다.
3. 애니메이션 미세 조정하기
애니메이션 제작의 마지막 단계는 미세 조정입니다. 이 과정에서 우리는 AI가 만든 기본 애니메이션을 세밀하게 다듬어 완벽한 결과물을 만들어냅니다. 클로드 AI와의 대화에서도 이 과정이 매우 중요합니다.
처음에는 단순한 좌우 흔들림 애니메이션이었지만, 더 적합한 모션이 생각났습니다. “자물쇠가 부르르 떨리는 듯한 느낌으로 만들어주세요”라는 요청을 해보았습니다.
형태를 완벽하게 구현한 후 모션을 변경해달라고 하니 또 다른 형태를 그려내기 시작합니다. 원하는 형태가 완성되었다면 아래 스크린샷 내용처럼 생성해준 파일중 어떤 파일에 있는 디자인울 유지한 상태에서 원하는 모션을 지시하면 형태가 유지됩니다.
드디어 제가 제공한 디자인과 동일 형태의 아이콘으로 원하는 모션 효과를 적용한 json 파일을 얻었습니다. 이 실험을 통해 클로드와의 협업으로 원하는 json 애니메이션 제작이 가능하다는 것을 알 수 있습니다.
추가로 필요한 것들
1. JSON 구조 이해하기
JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하는 데 사용되는 경량의 데이터 교환 형식입니다. 애니메이션을 위한 JSON 파일을 만들 때, 이 구조를 이해하는 것이 중요합니다. 클로드 AI와의 대화를 통해 만들어진 JSON 파일을 살펴보면, 애니메이션의 각 요소가 어떻게 구조화되어 있는지 알 수 있습니다.
JSON 파일의 기본 구조
- 버전 정보 (v)
- 프레임 레이트 (fr)
- 시작 프레임 (ip)과 종료 프레임 (op)
- 캔버스 크기 (w, h)
- 레이어 정보 (layers)
각 레이어 내에서는 다음과 같은 정보를 정의합니다.
- 위치 (p)
- 크기 (s)
- 회전 (r)
- 불투명도 (o)
- 형태 정보 (shapes)
애니메이션 효과는 주로 위치, 크기, 회전 등의 속성에 키프레임을 설정하여 만듭니다. 예를 들어, 자물쇠가 흔들리는 효과를 주기 위해 회전 속성 (r)에 여러 개의 키프레임을 설정하는 것 입니다.
이러한 JSON 구조를 이해하면, AI가 생성한 코드를 더 쉽게 해석하고 수정할 수 있습니다. “회전 각도를 좀 더 크게 해주세요” 또는 “움직임을 더 빠르게 만들어주세요”와 같은 요청을 할 때, 어떤 부분을 수정해야 하는지 정확히 알 수 있게 되는 것입니다.
또한, 이 지식은 AI에게 더 구체적인 지시를 내릴 수 있게 해줍니다. “60프레임에서 120프레임으로 늘려주고, 그에 맞게 키프레임을 조정해주세요”와 같이 기술적인 세부사항까지 요청할 수 있게 됩니다.
2. 로컬에서 json 파일 열기
클로드가 생성한 json 파일은 아티팩트 프리뷰에서 완벽히 보일때도 있지만 그렇지 않은 경우도 있습니다. 그래서 json 파일을 직접 다운받아 로컬에서 확인하는게 좋습니다. 아래 앱 중 하나를 설치하면 로컬에서 json 파일 애니메이션을 볼 수 있습니다. 사용법은 매우 간단합니다. 앱을 실행하고 생성된 json 파일을 드래그하면 됩니다. 이 글에서 녹화된 영상은 LottieFiles Desktop을 사용했습니다.
결론
이번 실험을 통해 우리는 생성형 AI, 특히 Claude AI와의 협업이 UX/UI 디자인 프로세스에 어떤 혁신을 가져올 수 있는지 살펴보았습니다. JSON 애니메이션 제작이라는 구체적인 사례를 통해 AI가 우리의 창의성을 제한하는 것이 아니라, 오히려 확장시킬 수 있다는 것을 보여줍니다. AI는 복잡한 기술적 과정을 단순화하고, 디자이너가 더 창의적인 측면에 집중할 수 있게 해줍니다.
앞으로 AI 기술이 더욱 발전함에 따라, UX/UI 디자인 분야에서의 활용 가능성은 무궁무진할 것입니다. 우리가 해야 할 일은 이러한 기술을 두려워하거나 거부하는 것이 아니라, 적극적으로 탐구하고 활용하는 것입니다. AI와의 협업을 통해 우리는 더 효율적이고 창의적인 디자인 프로세스를 구축할 수 있을 것입니다.
이 실험이 여러분에게 새로운 영감과 아이디어를 제공했기를 바랍니다. AI와 함께하는 디자인의 미래는 이제 막 시작되었습니다. 어떤 놀라운 가능성을 계속해서 발견하게 될지, 정말 기대됩니다.