모션 디자인 예제를 둘러볼 수 있는 사이트 10곳
글이 아니라 움직임을 봐야 할 때 가는 곳: 큐레이션된 쇼케이스, 열린 갤러리, 그리고 파일을 직접 뜯어볼 수 있는 곳.
모션은 정지 화면으로 배우기 어렵습니다. 스크린샷은 구성을 보여 줄 뿐, 카드가 자리를 잡는 데 몇 프레임이 걸리는지, 제목이 어떻게 숨을 쉬며 들어오는지, 왜 어떤 로고 리빌은 비싸 보이고 어떤 것은 템플릿처럼 보이는지는 말해 주지 않습니다. 그 감각은 좋은 작업을 많이 보고, 가능하면 파일을 열어 어떻게 만들었는지 확인해야 생깁니다.
저희가 자주 돌아가는 열 곳을 모았습니다. 대략 "완성작을 감상하는 곳"에서 "작업을 뜯어보는 곳" 순서이고, 그중 하나는 저희 것입니다.
1. Layerz Canvas 갤러리
저희 갤러리이자 이 글을 쓴 이유입니다. 모든 작품은 Layerz Canvas 로 만든
모션·디자인 문서이고, 대부분은 Claude 가 Layerz Canvas MCP 를 통해
만들었습니다. 그래서 예제로 할 수 있는 일이 다릅니다. 작품마다 그것을
만든 프롬프트가 함께 있고, .lcanvas 문서를 내려받아 앱에서 열면 실제
키프레임·이징 곡선·레이어 구조를 추측이 아니라 눈으로 확인할 수 있습니다.
이런 분께: 제품 필름, 앱 홍보 영상, 설명 영상, 그리고 영상이 아니라 영상 뒤의 파일을 보고 싶은 분.
2. Motionographer
모션 디자인 업계의 오래된 에디토리얼 홈입니다. 스튜디오 작업, 타이틀 시퀀스, 광고, 개인 프로젝트가 올라오고, 인터뷰는 과정까지 들어가며 크레딧은 실제로 누가 만들었는지 알려 줍니다. Motionographer 에서 쉬워 보이는 작품은 함께 실린 글을 읽으면 대개 몇 명이 몇 주를 들였는지 드러납니다.
이런 분께: 업계 수준의 모션 그래픽과 그 뒷이야기.
3. Vimeo Staff Picks
모션 스튜디오가 릴과 단편을 원본 화질로 올리는 곳은 여전히 Vimeo 입니다. Staff Picks 채널은 사람이 고르고 완성도에 무게를 두기 때문에, 몇 분만 넘겨 봐도 올해 이 분야의 최상위가 어떤 모습인지 믿을 만하게 감이 옵니다. "motion graphics" 나 "title sequence" 로 검색하면 좁혀서 볼 수 있습니다.
이런 분께: 릴, 단편, 방송 품질의 완성작.
4. Dribbble (Animation)
dribbble.com/shots/popular/animation
몇 초짜리 짧은 루프, 마이크로 인터랙션, UI 전환이 대부분이고 주로 제품· 브랜드 디자이너의 작업입니다. 작은 순간을 보러 가는 곳입니다. 손맛이 맞는 토글, 성격 있는 로딩 상태, 탭하면 움직이는 아이콘. "Animation" 필터를 걸고 인기순이나 최신순으로 보세요.
이런 분께: UI 모션, 마이크로 인터랙션, 프레임 단위로 뜯어볼 짧은 루프.
5. Behance (Motion Graphics)
Behance 의 Motion Graphics 분야에는 긴 케이스 스터디가 모입니다. 프로젝트 한 페이지에 스토리보드, 스타일 프레임, 최종 영상이 차례로 실리는 경우가 많아서, 애니메이션 앞에 어떤 기획이 있었는지 볼 수 있는 몇 안 되는 곳입니다. 검색 페이지에서 creative field 를 Motion Graphics 로 고르세요.
이런 분께: 스타일 프레임과 과정이 담긴 케이스 스터디.
6. LottieFiles
방대한 Lottie 애니메이션 라이브러리로, 상당수가 무료이고 전부 브라우저에서 스크러버로 재생해 볼 수 있습니다. Lottie 는 벡터·레이어 기반이라 여기 예제들은 렌더된 영상보다 "움직이는 작업 파일"에 가깝습니다. 하나 내려받아 Lottie 를 읽는 도구에 넣으면 그것을 움직이는 레이어와 키프레임이 보입니다. Layerz Canvas 도 Lottie 를 가져오므로 리믹스 재료로도 좋습니다.
이런 분께: 아이콘 애니메이션, 로더, 움직이는 일러스트, 그리고 실제로 열어 볼 수 있는 파일.
7. Rive Community
Rive 커뮤니티 페이지는 인터랙티브 애니메이션으로 가득한데, 이것은 종류가 다른 예제입니다. 상태 머신, 호버·누름 반응, 입력에 반응하는 캐릭터. 어떤 작품이든 Rive 에디터에서 열어 상태와 전환이 어떻게 연결돼 있는지 볼 수 있습니다. Rive 파일을 한 번도 쓰지 않더라도, 그냥 재생되는 것이 아니라 사용자에게 반응하는 모션을 모아 둔 공개 컬렉션으로는 최고입니다.
이런 분께: 인터랙티브·상태 기반 모션, 게임 같은 UI, 캐릭터.
8. Awwwards (Animation)
awwwards.com/websites/animation
웹의 모션은 그 자체로 하나의 분야이고, 가장 야심 찬 사례가 모이는 곳이 Awwwards 입니다. Animation 카테고리에는 스크롤로 이어지는 스토리텔링, 페이지 전환, 커서 효과, 히어로 시퀀스가 있는데 전부 녹화가 아니라 직접 스크롤해 볼 수 있는 실제 사이트입니다. 스크롤에 따른 타이밍을 눈여겨보세요. 영상으로는 배울 수 없는 부분입니다.
이런 분께: 웹 애니메이션, 스크롤 안무, 랜딩 페이지 모션.
9. Codrops
Codrops 는 소스 코드가 붙은 웹 애니메이션 데모를 올립니다. 텍스트 효과, 이미지 전환, 메뉴, WebGL 실험. 데모 하나가 오후 한나절이면 읽을 수 있는 작고 집중된 아이디어입니다. 특정 호버 효과가 어떻게 만들어졌는지 궁금했던 적이 있다면 Codrops 튜토리얼이 다뤘을 가능성이 큽니다.
이런 분께: 모션 효과 뒤의 코드를 보고 싶은 개발자와 디자이너.
10. Art of the Title
타이틀 시퀀스는 모션 디자인의 가장 오래된 형식이고, 이 사이트는 그 아카이브입니다. 모든 항목이 시퀀스와 함께 타이포그래피·페이싱·브리프에 관한 인터뷰를 싣고, 수십 년 전까지 거슬러 올라갑니다. 글자가 시간 속에서 어떻게 움직이는지, 90초 안에 분위기가 어떻게 잡히는지 공부하기에 가장 좋은 곳입니다.
이런 분께: 움직이는 타이포그래피, 페이싱, 오프닝.
실제로 활용하는 법
보는 것은 쉬운 쪽입니다. 세 가지 습관이 그것을 남게 합니다.
- 박자를 세세요. 작품 하나를 골라 요소마다 언제 들어오고, 얼마나 머물고, 어떻게 나가는지 적어 보세요. 좋은 모션은 대부분 생각보다 적고 긴 박자로 움직입니다.
- 열 수 있으면 파일을 여세요. Lottie, Rive,
.lcanvas문서는 이징 곡선을 추측이 아니라 눈으로 보게 해 줍니다. 한 번 본 곡선은 다시 만들 수 있습니다. - 일주일에 하나는 다시 만들어 보세요. Dribbble 의 짧은 루프나 저희 갤러리의 한 장면을 처음부터 재현해 보세요. 복제가 목적이 아니라, 내가 다르게 결정했을 지점을 하나하나 알아차리는 것이 목적입니다.
갤러리의 작품이 필요한 것과 가깝다면 다시 만들 필요도 없습니다. 문서를 내려받아 내 것만 바꾸고 내보내면 됩니다.