인터랙션 모션 연구소

지난 포스팅에 이어서 Styles > Motion > Transitions 섹션의 적용편에 주목해보려 한다. 👉 Applying transitions 보러가기구글 디자인 시스템에서는 친절하게 잘된 예시와 피해야 할 예시를 각각 GIF로 보여줍니다. 과연 무엇이 좋은 트랜지션을 만드는가?좋은 트랜지션이 가지고 있는 일곱가지 특징들을 살펴보자! 🎯 1. Consistent (일관된 모션)일관된 트랜지션, 방향, 속도감은 앱이 일관되고 사용자에게 예측 가능한 경험을 준다.사용자는 불필요한 인지적 부담 없이 다음 액션을 쉽게 이해할 수 있다. 🧱 2. Stable layouts (안정적인 레이아웃) 미묘한 펄싱 애니메이션이 들어간 스켈레톤 로더를 사용해서 레이아웃의 로딩을 안정화한다. ✂️ 3. No ja..

UX/UI 디자이너라면 한 번쯤 접해봤을 구글의 Material Design. 이 디자인 시스템은 색상, 타이포그래피, 레이아웃뿐 아니라 모션과 인터랙션까지 다루는 포괄적인 가이드다. 오늘은 그중에서도 Styles > Motion > Transitions 섹션에 주목해보려 한다.*Transitions : 앱의 개별 요소나 전체 화면 뷰를 연결하는 짧은 애니메이션 👉 Transition Patterns 보러가기 들어가기 전에 생각해볼 것은 '앱에 사용되는 트랜지션의 목적은 무엇일까' 라는 것이다.인터랙션은 사실 사용자와 앱을 잇는 가장 최종 단계라고 생각된다. 없어도 앱을 사용하는데에 지장이 크진 않지만 앱의 사용경험을 극대화하려면 필수가 아닐까구글은 트랜지션을 다음과 같이 정의한다.“트랜지션은 앱이..

지난 2월 말, 토스가 10주년을 맞아 성수의 앤더슨씨 카페에서 컨퍼런스를 진행했다. 토스가 쌓아온 인사이트를 나누는 위닝세션도 있었는데, 나는 10년 중 8년을 토스와 함께한 강수영 디자이너가 하는 '토스는 원래 디자인을 잘하지 않았다' 세션에 참여하게 되었다. 강수영디자이너가 워낙 토스에 오래 재직해서 대부분의 히스토리를 알고 있었기 때문에 토스의 태동기, 성장기, 진화기, 그 이후 등으로 나누어 들을 수 있었고, 분야 또한 UX, 브랜딩, 인터랙션 등 다양한 인사이트를 들을 수 있었다. 여기서는 인터랙션에 초점맞춰서 포스팅을 할 예정이다.  (사실 태동기는 지각해서 못들음 ^.^..)📌성장기(2018~2022)성장기(2018~2022)에서는 특히 UX적 변화가 컸다고 한다. 당시 UT(Usabil..

오늘은 인터랙션 모션을 활용하는 분야에서 커리어를 쌓고 싶은 사람들을 위한 글이다.Rive 라는 툴이 아직 국내에서 생소하다보니 과연 실무에 얼마만큼 쓰이는지 궁금할 수 있겠다는 생각에서 쓰게되었다. 📌 국내에서 Rive 활용 사례는?현재 국내에서는 구인 사이트에서 ‘Rive’를 검색하면, 프로덕트 디자이너 채용 시 우대 사항으로 포함되는 경우가 많다.아직 필수 스킬로 요구되는 단계는 아니지만, Rive를 다룰 수 있는 사람이 많지 않기 때문에 희소성이 높은 기술이라 할 수 있다. 국내에서 실무에 적용된 사례 중 하나로 캐릭터 중심의 프로덕트인 ’야핏 무브’에서 캐릭터 인터랙션에 Rive를 활용하는 것으로 보인다.  📌 글로벌하게는 Rive가 어디에서 활용되고 있을까?Rive 사이트에 들어가보면 , ..

오늘은 로띠에서 작업한 애니메이션과 피그마에서 작업한 디자인 리소스 작업물을 Rive로 불러와 상태머신을 추가하고 싶을 때의 작업과정을 공유해본다. 📌 Figma → Rive 불러오기 방법Rive에는 Figma처럼 Assets(에셋) 탭이 존재한다.하지만 Figma 파일을 직접 불러올 수는 없고, SVG 파일로 변환 후 가져와야 한다.*Hierarchy가 완벽하게 유지되지 않을 수도 있음✅ Figma → Rive 임포트 과정1️⃣ SVG 형식으로 내보내기 → Assets 탭의 Images 섹션에서 불러오기2️⃣ 텍스트 요소는 깨져서 들어옴 (폰트 에셋을 따로 추가해야 함)벡터 요소는 가져올 수 있지만, 텍스트는 깨질 수 있으므로 폰트 임포트가 필요하다. (*외부 폰트 에셋 사용은 유료 기능) 📌 Lo..

1편에 이어서 오늘은 빠르게 Rive로 구현할 수 있는 가장 간단한 버튼 인터랙션을 만들어 보려고 한다.버튼이 꺼져있을 때에는 빨간색으로 있다가, 버튼을 클릭하면 노란색으로 변하는 인터랙션이다.1. 버튼 디자인 만들기 (Design 모드) 1️⃣ R 키를 눌러 사각형(Rectangle) 생성한다.2️⃣ 오른쪽 옵션에서 "Corner" 값을 조정하여 버튼 형태로 변경한다.3️⃣ T 키를 눌러 텍스트를 써준다.*인스펙터 창의 Fills and Strokes 옵션에서 컬러를 변경 할 수 있다.*align을 이용하여 아트보드의 중앙으로 정렬도 시켜주었다.   2. 애니메이션 상태 설정 (Animation 모드 → State Machine) 우측 상단에 애니메이션 탭으로 이동하면, 기본적으로 "상태머신 구조"와 ..

인터랙션 모션을 먼저 배우면서 커리어를 시작한 나에게는 오히려 Figma가 나중에 배운 툴이었다.그런데 막상 써보니 파일 관리, 레이어 계층 구조, 레이아웃 시스템 등 Rive와 비슷한 개념들이 많았다.덕분에 피그마도 쉽게 적응할 수 있었고, 피그마를 잘 다루는 프로덕트 디자이너라면 Rive도 어렵지 않게 배울 수 있겠다는 생각이 들었다.그래서 오늘은 Rive의 기본 구조와 Design 탭의 주요 기능을 소개하려고 한다.  1. Rive 시작하기 – 계정 만들기 & 첫 화면 탐색 먼저 Rive 공식 사이트에서 계정을 만들어보자.라이브 사이트답게 "Get started" 버튼을 호버하면 귀여운 고양이 손이 튀어나오는 모션을 볼 수 있다.이런 디테일한 인터랙션을 보면, Rive가 얼마나 모션에 집중된 툴인지..

나는 인터랙션 모션 디자이너이자 3D 디자이너로서 6년간 UXUI 에이전시, IT 회사, 스타트업까지 다양한 팀에서 프로덕트 디자이너, 개발자들과 협업하여 작업해왔다. 그런데 요즘은 기업에서 인터랙션 모션그래픽 디자이너를 따로 채용하는 대신, 프로덕트 디자이너가 모션까지 다루기를 기대한다.UI/UX 디자인을 하는 사람들에게 인터랙션 모션 역량이 점점 더 중요해지고 있다.그래서 내가 알고있는 지식을 공유하려고 이 블로그를 만들었다. 그렇다면, 프로덕트 디자이너들은 어떤 툴을 사용해서 인터랙션 모션을 효과적으로 구현할 수 있을까?  기존 인터랙션 모션의 한계과거에는 After Effects → Lottie(json) 변환 방식이 일반적이었다.✔ After Effects로 애니메이션 제작✔ Lottie를 이용..