iOS 애니메이션 실행 가능 예제 색인
MotionBook의 Swift 애니메이션 컬렉션 색인: 분류별로 바로 클론하여 실행할 수 있는 오픈소스 프로젝트를 안내합니다. 이 문서는 '바로 실행 가능한 예제 디렉토리'입니다. 즉, 실행 가능한 코드로의 진입점이며, 애니메이션 작성 방법에 대한 튜토리얼이 아닙니다. 작성 방법은 twostraws SwiftUI 튜토리얼, apple-skills:guide-swiftui-animations, swiftui-design-skill을 참고하세요.
항목은 오픈소스 컬렉션 younatics/MotionBook에서 가져왔으며, 원래의 8개 분류로 정리했습니다. 이 색인에서는 각 분류에서 엄선된 항목과 전체 항목을 별도 파일로 제공합니다. 프로젝트는 주로 바로 클론하여 실행할 수 있는 데모(Swift 위주, 일부 Objective-C)이며, 항목 설명은 한국어로, 링크와 코드는 원문 영어 그대로 제공합니다.
이 색인은 다음을 포함하지 않습니다: SwiftUI 네이티브 .animation/withAnimation 작성법, Lottie/Rive 애니메이션 파일, Core Animation 계층 튜토리얼. 이러한 내용이 필요하면 twostraws SwiftUI, apple-skills:core-animation 또는 해당 공식 문서를 참고하세요.
이 색인 사용 방법
이 파일은 조정 색인 레이어입니다: 8개 분류 각각에서 가장 대표적인 실행 가능 프로젝트 2~3개를 나열하고, '이것이 무엇이며, 언제 어떤 reference 파일을 읽어야 하는지'를 명확히 설명합니다. 나머지 항목은 references/ 아래에 분류별로 별도 파일로 나뉘어 있으며, 참조 파일은 한 단계 깊이로만 구성됩니다.
워크플로:
- 먼저 요구 사항에 따라 아래 8개 분류 중 하나를 찾습니다(아래 '작업별 분류 찾기' 빠른 검색 활용). 엄선된 항목만으로 충분한지 확인합니다.
- 충분하지 않거나 더 많은 구현을 비교하려면 해당 분류의
references/<분류>.md파일을 엽니다. 그 파일이 해당 분류의 전체 항목 테이블입니다. - 목표 프로젝트를 찾으면 클론하여 실제 동작을 실행해 보고, 코드에 적용할지 결정합니다.
- Tableview와 Collectionview 항목이 적으므로, 하나의 파일
references/tableview-collectionview.md에 합쳐 놓았습니다. 파일을 연 후, 내부의 '테이블 뷰 / 컬렉션 뷰' 두 개의 소제목으로 구분하여 읽습니다.
이 프로젝트들은 대부분 UIKit 시대의 성숙한 오픈소스 라이브러리로, 인터랙션 패턴과 애니메이션 곡선은 많은 앱에서 검증되었습니다. SwiftUI 구현 시에는 그 타이밍과 곡선 매개변수를 참고할 수 있습니다.
참조 파일과 분류 대응: menu.md / animation.md / transition.md / tableview-collectionview.md(테이블 뷰 + 컬렉션 뷰 통합) / indicator.md / alert.md / ui-controls.md.
작업별 분류 찾기
어떤 reference 파일을 열어야 할지 모를 때는 먼저 작업 키워드로 대응되는 분류를 찾으세요.
- 사이드/하단/확장/애니메이션 TabBar 메뉴 → Menu
- 일반 애니메이션 라이브러리, 스켈레톤 스크린, GIF, 텍스트/날씨 효과 → Animation
- 페이지 전환, 모달, 카드 확장 전환, 온보딩 페이지 → Transition
- 리스트 셀 인터랙션, 당겨서 새로고침, 종이접기 확장 → Tableview
- 카드 슬라이드/겹침, 패럴랙스 Sticky/스트레치 헤더, 테이블 레이아웃 → Collectionview
- 로딩, 페이지 인디케이터, 네비게이션 바 로딩, HUD → Indicator
- 알림 배너, 커스텀 Alert, 상단 알림, 떼/유리창 팝업 → Alert
- 세그먼트 컨트롤, 슬라이더, 카드, 나이트 모드, 검색, Markdown → UI
메뉴 / Menu
드롭다운, 슬라이드 메뉴, 원형 방사형 메뉴, 단두대, 애니메이션 TabBar 등 메뉴 형태와 인터랙션 애니메이션. 네비게이션 바/사이드바/확장 메뉴/하단 Tab 전환 효과가 필요할 때 이곳을 참고하세요.
- SideMenu - Facebook 스타일 좌우 슬라이드 메뉴
- GuillotineMenu - 단두대식 메뉴 전환 애니메이션
- circle-menu - 원형 버튼이 방사형 메뉴로 확장
드롭다운 메뉴, 슬라이드 메뉴 컨트롤러, 애니메이션 TabBar 등 더 많은 구현은 references/menu.md를 참고하세요(총 7개 항목).
애니메이션 / Animation
일반 애니메이션 라이브러리, 스켈레톤 스크린, 벡터 SVG, 시작 화면, 텍스트/GIF/날씨 효과 등 기본 애니메이션 기능. 먼저 엄선된 항목을 확인하고, 특정 효과(GIF 엔진, 반짝이는 텍스트, 날씨 오버레이)가 필요하면 reference를 참고하세요.
- Spring - iOS 애니메이션을 단순화하는 일반 라이브러리
- SkeletonView - 스켈레톤 스크린 로딩 플레이스홀더 애니메이션
- Macaw - SVG를 지원하는 벡터 그래픽 애니메이션 라이브러리
Pastel, Stellar, RevealingSplashView, Gecco, GlitchLabel, Highlighter, FLAnimatedImage, Ease 등 총 18개 항목은 references/animation.md를 참고하세요.
전환 / Transition
컨트롤러 전환, 모달 버블, 탄력 드래그, 스크롤 전환, 온보딩 페이지 등 전환 애니메이션. 페이지 전환/카드 확장/전환 컬렉션과 관련된 경우 이곳을 참고하세요.
- Hero - 뷰 컨트롤러 전환 프레임워크
- BubbleTransition - 버블 확장식 모달 전환
- Gemini - 스크롤 기반의 다양한 전환 프레임워크
ElasticTransition, AnimatedTransitionGallery, JTMaterialTransition, Pinterest, Walkthrough 등 총 14개 항목은 references/transition.md를 참고하세요.
테이블 뷰 / Tableview
확장 가능 셀, 당겨서 새로고침, 스와이프 동작, 종이접기 확장, 신축성 미리보기 등 UITableViewCell 예제. 리스트 인터랙션/새로고침 효과가 필요할 때 이곳을 참고하세요.
- SwipeCellKit - Mail.app 스타일 스와이프 동작 셀
- folding-cell - 종이접기 확장 셀
테이블 뷰와 컬렉션 뷰 예제가 합쳐져 있습니다. YNExpandableCell, Pull-to-Refresh, elongation-preview 등 11개 항목은 references/tableview-collectionview.md를 참고하세요.
컬렉션 뷰 / Collectionview
카드 슬라이드/겹침, 패럴랙스 Sticky 헤더, 탄력적 스트레치 헤더, 스프레드시트 등 UICollectionView 레이아웃 예제.
- Koloda - Tinder 스타일 카드 슬라이드
- expanding-collection - 카드가 상세 정보로 확장되는 컬렉션 뷰
컬렉션 뷰 예제는 테이블 뷰와 합쳐져 있습니다. MMCardView, CSStickyHeaderFlowLayout, GSKStretchyHeaderView, SwiftSpreadsheet 등 11개 항목은 references/tableview-collectionview.md를 참고하세요.
인디케이터 / Indicator
로딩 애니메이션, 페이지 인디케이터, 네비게이션 바 로딩, HUD 팝업 등 상태 표시. 로딩/페이지 점/진행 알림이 필요할 때 이곳을 참고하세요.
- NVActivityIndicatorView - 방대한 로딩 애니메이션 컬렉션
- PKHUD - Apple HUD 스타일 팝업 인디케이터
TKRubberIndicator, SpringIndicator, BusyNavigationBar 등 총 5개 항목은 references/indicator.md를 참고하세요.
팝업 / Alert
알림 배너, 커스텀 Alert, 팝업 대체, 상단 알림, 떼/유리창 팝업 등 알림 형태.
- NotificationBanner - 커스터마이즈 가능한 앱 내 알림 배너
- PopupDialog - UIAlertController를 대체하는 팝업
- SDCAlertView - 커스텀 콘텐츠를 지원하는 Alert
CDAlertView, CRToast, TKSwarmAlert, MIBlurPopup, SweetAlert 등 총 9개 항목은 references/alert.md를 참고하세요.
UI 컨트롤 / UI
IB 디자인 애니메이션, 텍스트 변형, 세그먼트 컨트롤, 카드, 유체 슬라이더, 검색, 나이트 모드 등 일반 컨트롤 예제.
- IBAnimatable - Interface Builder에서 애니메이션과 전환을 디자인
- LTMorphingLabel - 텍스트 변형 진화 UILabel
- fluid-slider - 버블 값을 가진 유체 슬라이더
Segmentio, Cards, StarWars, YNSearch, DKNightVersion, MarkdownView 등 13개 항목은 references/ui-controls.md를 참고하세요.
전체 MotionBook: https://github.com/younatics/MotionBook 항목은 상위 저장소를 따라 업데이트됩니다. 누락되거나 링크가 깨진 경우 MotionBook 저장소에 피드백해 주세요.