당신의 수준 파악완료: 하지말아야 할 애니메이션 실수들

3년차가 되고 이것저것 할 줄은 아는 것 같은데, 앞으로 무엇을 커리어 방향으로 잡아야 할지 고민했을 때 저는 UX 능력도 갖춘 프론트엔드면 좋을 거라 생각했습니다. 사이드 프로젝트할 때도 혼자서 뚝딱뚝딱 만들어볼 수도 있고 말이죠.

공교롭게도 일각에서는 AI의 등장으로 개발자가 대체되기보다는, 기획자-디자이너-개발자 트라이앵글의 협업 구조가 1인 1프로덕트로 바뀔 수 있다고 말했습니다. 저조차도 현 회사에서 프로덕트 하나당 개발자 1~2명만 담당하고 여기에는 기획과 디자인을 포함하고 있죠. (고맙습니다 클로드 코드!)

그래서 저는 UX 역량을 키울 때 가장 가시적인 능력을 보일 수 있는 게 애니메이션을 적재적소에 하는 거라고 생각합니다. 스크롤 애니메이션으로 랜딩페이지를 화려하게 만드는 것도 재밌고, 로딩 애니메이션을 부여할 수도 있죠.

그중에서 저는 트랜지션을 좋아합니다. 멋지기도 하지만 실용적이기도 하거든요! 갑작스러운 변화는 사용자에게 부담을 느끼게 합니다. 그래서 앱에서는 트랜지션이 많이 적용되죠. 이런 추세가 웹에도 퍼지고 있습니다.

유튜브 뮤직을 보면 페이지 경로가 이동하지만 트랜지션 효과도 같이 부여되어서 마치 내가 페이지를 떠나지 않고 콘텐츠만 바뀐다고 생각하죠. 인스타그램 웹도 마찬가지고요. 저는 주기적으로 이런 웹사이트들의 UX를 분석하는데 매번 유저들이 어떻게 하면 콘텐츠를 쉽게 이동하며 볼 수 있을까 고민의 흔적이 느껴집니다. 은근히 자주 업데이트하더라고요. 그 덕에 저는 오늘도 하루종일 유튜브와 인스타그램을 봅니다 ㅋㅋ

하여튼 트랜지션은 Google의 Material Design 팀과 Uber에서도 중요하게 생각합니다.

• Material Design - Transitions
• Uber Base Design - Transitions

여기서는 잘된 트랜지션 소개와 함께 잘못된 트랜지션도 소개합니다. 설계 자체가 잘못되었거나 쓰임새를 잘못 쓰고 있는 거죠.

트랜지션에서도 패턴이 있다는 거 알고 계셨나요? 전환 효과가 그저 이쁜 게 적용되는 게 아니라, 페이지 이동 구조에 따라 어느 정도 정답지가 있습니다. 오늘은 전문가들이 "절대 하지 마라"고 하는 트랜지션 실수들을 알아보도록 하겠습니다.

전문가들이 "절대 하지 마라"고 하는 트랜지션 실수들

Material Design과 Uber Base 가이드라인을 분석하면서 발견한 건데, 개발자들이 무심코 저지르는 트랜지션 실수들에는 확실한 패턴이 있더라고요. 이런 실수들은 사용자에게 "아, 이 앱 뭔가 어색하네"라는 느낌을 주죠.

1. 어? 화면이 뿌옇게 겹쳐 보이네?

fade 효과로 콘텐츠가 바뀔 때 이전 콘텐츠가 사라지고, 새로운 콘텐츠가 생기는 상황을 생각해보세요. 이때 이전 콘텐츠가 사라지고 난 다음을 기다리고, 새로운 콘텐츠가 나오도록 기다려야 합니다. 동시에 오버랩을 하면 지저분해 보이거든요.

<출처: Material Design - Transitions>

Material Design에서는 "기존 콘텐츠를 완전히 사라지게 한 후에 새 콘텐츠를 나타내라"고 명시합니다. Uber에서는 한 발 더 나아가서 등장 fade 시간보다 사라지는 fade 시간을 더 짧게 가져가길 권유합니다. 이러면 답답함 없이 자연스럽게 전환되죠.

특히 주의할 점: 공유 요소가 확장하면서 전환될 때도 오버랩을 피해야 합니다. 카드가 전체 화면으로 확장되는 애니메이션에서 배경과 겹치면서 뿌옇게 보이는 경우가 대표적입니다.

참고로 Framer Motion의 AnimatePresence 컴포넌트에는 mode="wait" prop이 있어서 이런 걸 쉽게 구현할 수 있어요.

2. Hero 요소는 하나만, 나머지는 제자리에서!

공통된 요소만 모두 트랜지션 효과를 주는 실수입니다. 저는 이걸 Hero 애니메이션이라고 하는데, 계층 이동할 때 공유된 요소가 움직이면서 전환 효과를 주면 수려한 효과를 낼 수 있습니다. 하지만 정도껏!

<출처: Material Design - Transitions>

인스타그램이나 핀터레스트에서 썸네일이 전체화면으로 확장되는 효과를 생각해보세요. 이런 확장하듯 펼쳐지는 트랜지션은 자주 활용되니까 주의하면 좋습니다.

주축을 만들어야 하는 이유: 공유 요소가 움직이면서 중간에 겹치면 이상해 보이기 때문입니다. Hero 요소 하나만 멋지게 변환시키고, 나머지는 fade 효과로 그자리에서 등장하는 게 훨씬 깔끔해 보여요.

3. 아무 애니메이션이나 넣으면 되는 줄 알았지?

계층 이동에 탭용 슬라이드 넣기

계층 이동할 때는 drill forward 방식을 써야 합니다. 나가는(out) 페이지는 모션을 짧게(30px 정도만 translate) 해서 모션감을 줄이고, 들어오는(in) 페이지는 그대로 입장하는 방식이죠. 탭에서나 쓰는 전체 페이지 슬라이드와는 완전히 다른 접근법입니다.

<출처: Material Design - Transitions>

해결 방법: 계층 이동에는 drill forward 패턴으로 "들어간다"는 느낌을 자연스럽게 표현하세요.

Top Level에서 형제관계용 슬라이드 사용하기

바텀 네비게이션바나 헤더로 움직이는 것들은 top level 이동입니다. 즉, 페이지 간의 연관성이 별로 없어요. 이런 데 형제 관계에서 할 법한 슬라이딩 효과는 어색합니다.

<출처: Material Design - Transitions>

슬라이드 트랜지션은 onboarding이나 회원가입 퍼널처럼 "같은 레벨의 계층에서 관련된 전체의 일부"를 보여줄 때 적합합니다. 화면들이 수평으로 함께 움직이면서 "관련된 전체의 일부"라는 느낌을 주거든요.

해결 방법: Top level 효과는 fade가 가장 단순한 방법이고, awwwards 사이트에 가보면 브랜드 효과를 내는 참신한 효과들도 많이 만나볼 수 있어요.

---

이런 실수들을 피하는 것만으로도 사용자는 "어? 이 앱 뭔가 자연스럽네"라고 느끼게 됩니다. 하지만 매번 이런 걸 신경 쓰면서 개발하기는 쉽지 않죠. 그래서 다음에는 이런 문제들을 쉽게 해결해줄 수 있는 도구를 소개해드리려고 합니다.

트랜지션 패턴 3가지

트랜지션 패턴에는 정답이 있습니다. 페이지 이동 구조에 따라 어느 정도 정답지가 있다는 거죠. 그래서 저는 ssgoi라는 웹 페이지 이동 애니메이션 라이브러리를 만들어서 이를 크게 3가지 카테고리로 나눴습니다.

1. Top Level 이동

<출처: https://ssgoi.dev/ko>

홈에서 설정으로, 쇼핑에서 마이페이지로... 전혀 관련 없는 페이지 간 이동입니다. 바텀 네비게이션이나 헤더 메뉴를 통한 이동이 대표적이죠. 페이지 간의 연관성이 별로 없기 때문에 컨텍스트가 완전히 바뀌었음을 자연스럽게 전달해야 합니다.

저는 Flim이 영사기 앞에서 전환되는듯한 효과를 표현해 봤습니다.

2. 형제 관계 이동

<출처: https://ssgoi.dev/ko/docs>

블로그 포스트 간 이동, 온보딩 스텝, 갤러리 이미지 넘기기... 같은 레벨의 콘텐츠를 순차적으로 탐색하는 상황입니다. 인스타그램에서 릴스 넘길 때를 떠올려보세요. 웹에서도 한번 확인해보시면 비슷한 패턴을 발견할 수 있을 거예요. 연속성과 순서감을 주는 게 핵심입니다.

여기서는 문서를 탐색할때 마치 스크롤로 이동하는 듯한 효과를 표현했습니다.

3. 계층 이동

<출처: https://ssgoi.dev/ko/blog>

제품 목록에서 상세 페이지로, 갤러리에서 풀스크린으로... 더 깊은 레벨로 들어가거나 나오는 상황입니다. 많이 보셨을 거예요. 스택처럼 쌓이듯 가거나, 카드가 확대되면서 상세 화면으로 변하는 그런 느낌이죠. 사용자가 "더 깊이 들어갔다"는 것을 시각적으로 알려주는 게 중요합니다.

더 자세한 내용은...

각 트랜지션 패턴의 구체적인 사용법과 실제 구현 예시는 제가 별도로 정리한 글에서 확인하실 수 있어요:

View Transition의 3가지 패러다임과 실전 활용법

여기서는 실제 데모와 함께 언제 어떤 패턴을 써야 하는지 정리했습니다!

그래서 결국...

저는 트랜지션이 "있으면 좋고 없어도 되는" 옵션이 아니라고 생각합니다. 사용자가 "이 앱/웹사이트 잘 만들었네"라고 느끼는 순간들 중 상당 부분이 이런 디테일에서 나온다고 보거든요. 물론 기능이 제대로 작동하는 게 먼저지만, 같은 기능이라면 더 자연스럽고 부드러운 경험을 주는 쪽이 승리한다고 생각해요. 물론 성능과 주 사용층 유저 기기의 성능을 고려해서 해야겠지만요.

이런 거 넣는 게 어렵긴 합니다. 무작정 화려한 애니메이션을 넣는 건 오히려 독이 될 수 있고요. 중요한 건 "왜 이 전환을 쓰는지" 이해하는 것이라고 생각해요. 사용자가 지금 어디에 있고, 어디로 가고 있는지를 자연스럽게 알려주는 것. 그게 바로 UX 감각을 갖춘 개발자와 그렇지 않은 개발자의 차이가 아닐까 싶습니다. 앞으로 이런 디테일에 조금씩 관심을 가져보시면, 분명 사용자도, 동료도, 그리고 본인도 만족할 만한 결과를 얻을 수 있을 거라 생각합니다.

github <-- star 눌러주시면 큰 도움이 됩니다!!