실행 중인 SwiftUI

안녕하세요, 저는 커트입니다. 월드와이드 개발자 관계(Worldwide Developer Relations) 팀의 기술 전도사이며, 오늘 여러분과 함께하게 되어 정말 기쁘고, 온라인으로 참여해 주신 모든 분들을 환영합니다. 개발자 관계 팀에 합류하기 전에는 SwiftUI 엔지니어로 근무하며 네비게이션과 API 설계에 집중했습니다.

오늘은 SwiftUI를 사용하여 앱에 모션을 도입하기 위한 기초에 대해 이야기해 보겠습니다.

기기의 성능이 향상됨에 따라 인터페이스도 더욱 역동적으로 발전했습니다. 모션은 잘 구현될 경우 기기를 더욱 생동감 있고 개인화된 느낌을 줍니다. 모션은 앱과 플랫폼을 더 쉽게 이해할 수 있게 해줍니다. 모션은 맥락을 제공하고 사용자의 주의를 유도합니다. 게다가, 그 자체로 정말 재미있기도 하죠.

이러한 역동적인 상호작용을 만들어내기 위해서는 여러 요소가 조화를 이루어야 합니다. 설정 앱에서 뷰를 밀어 열어 다른 뷰로 이동하는 것과 같은 전환 효과부터, 지도를 확대해 세부 정보를 확인하거나 앱 간을 스와이프하는 등 사용자가 기기와 직접 상호작용하는 집중 모드 옵션 및 제스처 시트 표시까지 다양합니다.

마지막으로, 화면상의 객체가 움직이거나 커지거나, Dynamic Island(Dynamic Island)의 실시간 현황처럼 시각적 속성이 변화하는 애니메이션도 있습니다. 이 모든 요소가 조화를 이루어 유동적이고 상호작용적인 인터페이스를 만들어냅니다.

SwiftUI는 앱에 유연한 모션을 구현하는 가장 좋은 방법입니다.

SwiftUI의 모션 기능은 매우 광범위합니다. 가장 간단한 경우, 내장된 SwiftUI 컴포넌트를 사용하는 것만으로도 자동 전환 효과를 얻을 수 있습니다.

상태 기반 애니메이션을 통해 한 단계 더 발전할 수 있는데, 여기서는 수정자 메뉴에서 선택하여 특정 속성이 변경될 때 SwiftUI가 어떻게 애니메이션을 적용할지

지정할 수 있습니다. 또는 프레임 단위로 정확히 어떤 동작이 일어날지 직접 지정하는 완전한 사용자 정의 애니메이션을 활용할 수도 있습니다. 오늘은 이 모든 범위에 걸친 예제를 살펴보며, 여러분의 앱에 딱 맞는 역동적인 움직임 경험을 구현할 수 있는 적절한 도구를 선택할 수 있도록 도와드리겠습니다.

많은 SwiftUI 뷰는 자동으로 부드러운 모션 효과를 제공합니다. 위시리스트 앱의 몇 가지 예시를 공유하며, 이러한 자동 효과를 조정하여 앱에서 원하는 느낌을 연출하는 방법을 보여드리겠습니다. 이어서 SwiftUI를 사용하여 앱에 상태 기반 애니메이션을 추가하는 방법에 대해 설명하겠습니다. 수정자와 속성. 여러분이 당면한 과제에 적합한 기법을 선택할 수 있도록, 이러한 애니메이션의 기초를 소개해 드리겠습니다. 마지막으로, SwiftUI에서 사용자 정의 애니메이션의 강력한 기능을 예시로 보여주고, 더 깊이 학습할 수 있는 자료들을 소개해 드리겠습니다. SwiftUI의 내장 뷰를 사용하면 다양한 모션 효과를 자동으로 얻을 수 있습니다.

이 위시리스트 앱은 이러한 기능의 훌륭한 예시입니다. 사용자가 여행을 탭하면 내비게이션 스택이 밀려 들어옵니다. 체크 표시와 같은 썸네일 심볼은 상호작용을 확인시켜 줍니다. 상세 정보는 썸네일로 다시 돌아옵니다. 시트는 애니메이션과 함께 화면에 나타납니다. 팝업 메뉴는 Liquid Glass 버튼에서 변형되어 나타납니다. 스크롤 뷰는 사용자가 스와이프하면 자동으로 가속되고, 스와이프를 멈추면 감속하며, 필요에 따라 특정 뷰에서 멈출 수도 있습니다.

이러한 모션 효과를 자동으로 얻을 수 있는 네 가지 SwiftUI 뷰를 살펴보겠습니다. 먼저, 위시리스트 탭에서 여행 세부 정보를 표시하는 이와 같은 내비게이션 스택부터 시작하겠습니다.

위시리스트 앱은 각 탭 내부에 내비게이션 스택을 사용합니다.

이 스택 안에는 다양한 여행에 대한 타일들이 모두 들어 있습니다. 저는 ‘가을 여행’과 같은 컬렉션에 포함된 모든 여행을 반복 처리하는 ‘for each’ 구문에 집중하겠습니다. 이 썸네일들은 각각 목적지 뷰와 레이블을 제공하는 내비게이션 링크로 그려집니다.

레이블은 사용자가 탭하는 인터페이스의 부분입니다. 사용자가 레이블을 탭하면 목적지 뷰가 스택에 푸시됩니다. 기본적으로 목적지 뷰는 화면의 뒷쪽 가장자리에서 미끄러지듯 들어오고, 사용자가 뒤로 가기 버튼을 탭하거나 화면을 스와이프하면 애니메이션과 함께 사라집니다. 예를 들어 ‘음악’이나 ‘뉴스’와 같은 일부 앱은 ‘줌 전환(zoom transitions)’이라는 기법을 사용하여 이러한 푸시 및 팝 동작을 세밀하게 다듬습니다. 네비게이션 스택에 줌 전환을 사용하도록 지시하는 방법은 단 세 단계뿐입니다. 먼저, 뷰의 속성에 네임스페이스를 추가합니다. 네임스페이스는 SwiftUI가 두 개의 코드 조각을 연관시키는 데 사용할 수 있는 고유 식별자입니다.

둘째, 대상 뷰에 navigation transition 수정자를 추가하고, zoom 매개변수, 고유 ID 및 네임스페이스를 전달합니다.

마지막으로, 링크 레이블에 match transition source 수정자를 추가합니다.

이제 위시리스트 앱에서 여행 이미지를 탭하면 줌 전환이 적용됩니다.

뒤로 돌아가면 상세 보기가 다시 썸네일 크기로 축소됩니다.

줌 전환은 목적지가 레이블에 포함된 내용을 반복할 때 매우 효과적입니다. 예를 들어, 자이언 국립공원의 이 아름다운 사진처럼 말이죠.

때로는 위시리스트의 검색 탭에 있는 이 링크처럼, 내비게이션 링크의 레이블이 더 상세할 수도 있습니다.

여행 이름 옆에 썸네일 사진이 표시됩니다. 이런 경우에는 링크 레이블의 서브뷰에 매칭된 전환 소스를 추가하세요. 방법은 다음과 같습니다. 이 행들은 ‘Search Item View’라는 사용자 정의 뷰로 그려집니다. 이 뷰는 썸네일과 여행 이름을 포함하는 H 스택을 사용합니다.

여기서는 전체 검색 항목 뷰 대신 이미지 썸네일에 매칭된 전환 소스 수정자를 추가했습니다.

주변 내비게이션 스택에서 네임스페이스를 속성으로 전달했습니다. 이제 행을 탭하면 상세 페이지가 썸네일에서 확대되어 나옵니다.

다시 돌아오면 페이지가 썸네일로 다시 축소됩니다. 저는 이 작은 디테일이 정말 마음에 듭니다. 재미있을 뿐만 아니라, 사용자가 시작했던 행으로 시선을 자연스럽게 이끌어 줍니다.

오늘 다룰 두 번째 내장 뷰 유형은 시트입니다. 위시리스트 앱의 시트 코드를 예로 들어 설명해 드리겠습니다. 여기 위시리스트 탭의 네비게이션 스택이 다시 표시되어 있는데, 시트가 표시되는지 여부를 판단하는 데 사용할 ‘is presenting add trip’ 속성이 있습니다. 스택 내부에는 툴바 수정자가 적용된 스크롤 뷰가 있습니다.

툴바 안에는 이 더하기 버튼이 있습니다.

이러한 구조가 마련되어 있다면, 시트를 표시하는 데는 단 두 단계만 거치면 됩니다. 첫째, 툴바의 버튼이 `is presenting add trip` 속성을 `true`로 설정하고, 둘째, 시트 수정자가 `is presenting` 상태일 때 표시될 내용을 지정합니다. `Add trip`이 `true`입니다. 여기서 수정자는 속성에 대한 바인딩을 받습니다. 달러 기호가 바로 그 의미를 나타냅니다. Coal이 잠시 후 바인딩에 대해 더 자세히 설명하겠지만, 지금 중요한 점은 이를 통해 SwiftUI가 `is presenting add trip`을 다시 `false`로 설정할 수 있다는 것입니다. 이러한 설정이 적용된 상태에서 사용자가 시트를 닫으면, 버튼을 탭하면 시트가 화면 하단에서 위로 미끄러지듯 올라옵니다. 닫기 버튼을 탭하면 다시 아래로 미끄러지듯 내려갑니다.

네비게이션에서 했던 것처럼, 3단계 과정을 적용하여 이를 줌 전환 효과로 변환할 수 있습니다. 두 번째. 먼저 뷰의 속성에 네임스페이스를 추가합니다. 둘째, 시트의 콘텐츠에 navigation transition 수정자를 추가하고 zoom 매개변수를 전달합니다. 마지막으로 버튼 레이블에 matched transition source 수정자를 추가합니다.

이제 버튼을 탭하면 시트가 버튼에서 모프 아웃됩니다.

시트를 닫으면 다시 홈으로 모프 인됩니다.

이러한 모션은 사용자가 버튼을 시트와 연관 짓는 데 도움이 됩니다.

SwiftUI 스크롤 뷰도 내장된 모션 효과를 제공합니다. 스크롤 뷰는 사용자가 스와이프할 때 부드럽게 감속하며, 콘텐츠 끝부분에서 자연스러운 반동 효과를 주며 이동합니다. 다음은 ‘Wish List’ 앱에서 제가 획득한 배지를 표시하는 스크롤 뷰입니다. 스크롤 뷰는 사용자가 스크롤하며 볼 수 있는 콘텐츠를 보여주는 서브뷰를 포함합니다. 여기서는 제 모든 배지를 보여주는 타일들이 쌓여 있는 형태입니다. 선택적으로, 스크롤 뷰는 스크롤 가능한 방향을 지정하는 매개변수를 받을 수 있습니다. 위시리스트 앱의 배지 경우,

가로 방향으로 스크롤할 때 스크롤 뷰가 항상 배지가 화면 중앙에 오도록 멈추게 하고 싶습니다. 단 두 단계만으로 SwiftUI에 이를 수행하도록 지시할 수 있습니다. 먼저, ‘스크롤 타겟(scroll target)’ 동작 수정자를 추가하여 SwiftUI가 뷰에 맞춰 정렬된 상태에서 멈추도록 지시합니다. 그런 다음 ‘스크롤 타겟 레이아웃’ 수정자를 추가하여, 이 동작에 포함될 뷰 스택을 SwiftUI에 지정합니다.

이 설정이 완료되면, 이제 배지를 스와이프할 때 스크롤 뷰가 항상 배지가 화면 중앙에 오도록 멈춥니다.

이제 좀 더 재미를 더해 볼까요? 배지가 뷰 안팎으로 스크롤될 때 기발한 효과를 추가하면 재미있을 것 같습니다. 'Books'나 'Sports' 같은 앱에서는 이런 종류의 모션 효과를 사용합니다. 이들은 '스크롤 전환(scroll transition)' 수정자를 사용하여 이를 구현합니다. 변환하고 싶은 뷰에 이 수정자를 적용합니다. 여기요. 이것이 제가 달성한 목표 타일입니다. 전환을 상호작용 가능하게 만들어 수동 스크롤에 반응하도록 하고, 방향을 가로로 설정합니다.

이 수정자는 클로저를 받습니다. 전환을 정의합니다. SwiftUI는 콘텐츠에 대한 프록시와 애니메이션 페이즈를 클로저에 전달합니다.

페이즈는 전환 진행 정도를 나타내며, 선단에서 완전히 스크롤되어 나간 경우 -1, 화면에 완전히 표시된 경우 0, 후단에서 완전히 스크롤되어 나간 경우 +1을 의미합니다.

이 페이즈를 사용하여 콘텐츠를 수정합니다.

여기서는 목표 타일이 화면 밖으로 이동할 때 크기를 축소하고,

수직 축을 따라 3D 회전을 적용하고 있습니다.

한 번 확인해 보세요. 뷰들이 마치 둥근 캐러셀의 일부인 것처럼 가장자리에서 자연스럽게 이어지는 것처럼 보이지 않나요? 정말 멋진 기능입니다.

오늘 다룰 마지막 내장 뷰 유형은 SF Symbols가 포함된 이미지 뷰입니다.

앞서 Mojo가 언급했듯이, SF Symbols는 7,000개 이상의 심볼을 포함하는 아이콘 라이브러리입니다. 이 화면에는 중복된 심볼이 없습니다.

SF Symbols는 San Francisco와 매끄럽게 통합되도록 설계되었습니다. Apple 플랫폼의 시스템 폰트죠.

Apple 개발자 웹사이트에서 다운로드할 수 있는 Mac용 SF Symbols 앱을 사용하면 라이브러리를 탐색하며 사용 사례에 맞는 심볼을 찾을 수 있습니다. 예를 들어, ‘Wish List’ 앱은 활동 목록에서 체크 표시를 사용하는데,

제 앱에도 이 체크 표시를 추가해 보겠습니다. SF Symbols 앱에서 코드에 SwiftUI 이미지를 추가합니다. 원하는 심볼(체크 표시, 원형 채우기)을 컨트롤 클릭한 다음 ‘이름 복사’를 선택합니다.

그런 다음 Xcode에서 이미지 선언부에 이름을 붙여넣으면

체크 표시가 나타납니다. SwiftUI는 SF Symbols에 애니메이션을 적용하는 여러 가지 방법을 제공합니다. 세 가지 예시를 소개하겠습니다.

채팅에서 상대방의 답장을 기다리는 것과 같이 진행 중인 작업을 나타내기 위해 ‘무기한 효과’를 사용합니다. 이러한 효과는 활성화된 동안 지속적으로 실행됩니다. 변수, 색상, 크기 조정, 호흡 효과 등이 그 예입니다.

SF 심볼에 이러한 효과 중 하나를 추가하려면, `isActive` 매개변수와 함께 `symbolEffectModifier`를 사용하세요. 이 매개변수 값이 `true`일 때마다 효과가 실행됩니다.

다운로드와 같은 이벤트를 표시할 때는 이산 효과를 사용하세요. '완료 중'과 같은 효과는 이벤트가 발생할 때 트리거됩니다. 예시로는 바운스, 펄스, 위글 등이 있습니다.

이러한 효과 중 하나를 SPH 심볼에 추가하려면, ‘값’ 매개변수를 가진 심볼 효과 수정자를 사용하세요. 이 매개변수 값이 변경될 때마다 효과가 실행됩니다.

원 안에 체크 표시를 추가하는 등 한 심볼을 다른 심볼로 대체할 때는 콘텐츠 전환 효과를 사용하세요.

SPH 심볼에 이러한 효과 중 하나를 추가하려면 심볼 효과 유형과 함께 콘텐츠 전환 수정자를 사용하세요. 선택한 심볼이 변경될 때마다 전환 효과가 실행됩니다.

SF Symbols 앱을 사용하면 애니메이션을 자유롭게 실험해 볼 수도 있습니다.

여기서는 애니메이션 인스펙터로 전환하겠습니다. ‘breathe’ 애니메이션을 선택하고 실행되도록 설정합니다. 테스트를 위해 재생 버튼을 클릭합니다. 그런 다음 복사 메뉴를 사용하여 애니메이션 구성을 복사합니다.

Xcode로 돌아와 SF Symbols 앱에서 설정한 옵션이 포함된 수정자를 붙여넣습니다.

그러면 심볼이 숨을 들이마시고 내쉬는 듯한 움직임을 보입니다.

SwiftUI의 스택, 시트, 스크롤 뷰, 이미지 같은 기본 뷰는 다양한 내장 효과를 제공합니다. 수정자를 자동으로 추가하여 앱에 맞는 효과를 세밀하게 조정할 수 있습니다.

다음으로, SwiftUI의 또 다른 애니메이션 유형인 ‘상태 기반 애니메이션’을 소개하겠습니다. 자세히 설명해 드리겠습니다. 앞서 Leah는 SwiftUI 뷰가 데이터를 화면상의 픽셀로 어떻게 매핑하는지 설명해 주었습니다. 그리고 Cat은 데이터 모델의 속성 값에 따라 위시리스트 레이아웃에서 뷰가 표시되거나 숨겨지는 예시를 보여주었습니다.

이런 방식으로 사용되는 데이터를 뷰의 ‘상태’라고 합니다.

다음은 위시리스트 앱의 예시입니다. 이것은 하단에 제가 계획한 활동 목록이 있는 여행 상세 정보 뷰입니다. 이 이미지 위에는 제가 완료한 활동의 비율을 보여주는 텍스트와, 활동을 더 완료할수록 채워지는 막대가 떠 있습니다.

활동을 체크하면 SwiftUI는 해당 활동이 완료되었음을 기록하기 위해 연관된 상태를 업데이트합니다. 이 상태에 의존하는 뷰들은 상태가 변경되면 자동으로 업데이트됩니다.

현재로서는 활동을 완료 표시할 때마다 모든 변경 사항이 즉시 반영됩니다. 대신 SwiftUI가 이 과정을 애니메이션으로 처리하도록 설정해 보겠습니다. 이를 위해 `with animation` 함수를 사용합니다. 방법은 다음과 같습니다. 다음은 이 버튼을 표시하는 코드입니다. 이 버튼은 ‘여행 세부 정보’ 페이지의 활동을 나타냅니다.

이 동작 버튼의 액션은 연관된 활동의 ‘is completed’ 상태를 토글합니다.

이 토글 액션을 `with animation` 함수로 감쌉니다. 이렇게 하면 SwiftUI는 감싸진 상태의 변경으로 인해 발생하는 모든 뷰 업데이트를 애니메이션으로 처리하도록 지시합니다. 다시 한 번 업데이트된 모습을 보겠습니다. 이제 활동을 완료하면, 백분율 텍스트가 크로스페이드되고 막대가 채워지며, 활동 색상과 체크 표시가 크로스페이드됩니다.

이러한 변화를 애니메이션으로 표현하기 위해 `with animation`을 추가했습니다. 나머지는 자동으로 처리됩니다.

`with animation`의 장점은 바로 그 단순함에 있습니다. 상태 변경을 이 함수로 감싸기만 하면, 해당 상태에 의존하며 애니메이션이 가능한 뷰의 모든 속성이 자동으로 애니메이션 처리됩니다. 반면, 앱의 일부 요소에서는 이를 표현하기 위해 더 정밀한 접근 방식이 필요할

수도 있습니다. 여기서는 ‘Wish List’ 앱의 이 완료 오버레이에만 집중해 보겠습니다.

앱 내에서 완료율 텍스트, 진행률 막대, 부제목이라는 이 세 가지 뷰는 커스텀 액티비티 진행률 뷰에 포함되어 있습니다.

애니메이션에 집중하기 위해 몇 가지 스타일 수정자와 부제목은 제외하겠습니다. 액티비티 진행률 뷰는 0에서 1 사이의 완료율 값 속성을 받아 완료율을 나타냅니다.

서식이 적용된 텍스트 뷰가 완료율을 표시합니다.

이 불투명도 수정자는 완료 값이 0일 때 텍스트를 숨깁니다.

라임 그린 색상의 막대에는 둥근 사각형을 사용합니다.

막대의 너비는 상수인 막대 너비에 완료 값을 곱하여 설정됩니다.

여기서도 마찬가지로, 완료 값이 0일 때 불투명도 수정자가 뷰를 숨깁니다.

이제 위시리스트 디자인에 따라 활동 진행률 뷰가 사용되는 모든 곳에서 애니메이션을 적용해야 합니다. 이를 위해 애니메이션 수정자를 사용할 수 있습니다.

이 VStack에 애니메이션 수정자를 적용함으로써, 전달된 완료 값이 변경될 때마다 SwiftUI가 해당 뷰들에 애니메이션을 적용하도록 지시합니다.

지금까지의 동작은 다음과 같습니다. 이는 'with animation'을 사용했을 때와 정확히 동일한 애니메이션입니다. 애니메이션 수정자는 `with animation`을 사용하는 대신 사용할 수 있는 대안입니다. 상태가 변경되는 시점에서 말이죠. 애니메이션은 상태 변경의 일부 원인만 애니메이션을 트리거하도록 하고 싶을 때 좋은 선택입니다.

반면, 상태 변경의 원인과 상관없이 뷰가 항상 애니메이션되도록 하려면 애니메이션 수정자를 사용하세요. `with animation`과 애니메이션 수정자 모두 애니메이션의 타이밍, 속도, 가속도, 바운스를 변경할 수 있게 해줍니다. 이를 활용하면 애니메이션의 느낌을 더 세밀하게 제어할 수 있습니다.

예를 들어, 막대가 증가할 때 약간 튀어 오르면 축제 분위기를 더할 수 있습니다. 애니메이션 수정자에 `bouncy`를 전달하면 이를 구현할 수 있습니다. 다음은 그 결과입니다. 녹색 막대가 새로운 값으로 안정되기 전에 아주 약간 진동합니다.

튀는 효과를 더 강화할 수도 있습니다.

이제 어떻게 되는지 확인해 보세요. 막대가 재미있게 튀어 오릅니다.

하지만 텍스트에 뭔가 이상한 점이 있어서, 다시 실행한 후 애니메이션 도중에 화면을 정지시켜 보겠습니다.

튀는 효과가 추가된 애니메이션은 목표 값을 지나쳐 버린 뒤, 원래 값 쪽으로 되돌아오다가 마침내 안정화됩니다. 숫자 부분도 마찬가지입니다. 이 되돌아오는 움직임이 너무 커서 숫자가 시작 값으로 다시 희미해지기 시작합니다. 두 번째 애니메이션 수정자를 추가하면 이 문제를 해결할 수 있습니다.

텍스트 뷰에만 ‘smooth’ 애니메이션을 추가합니다.

이제 바운스 애니메이션은 전체 VStack에 적용되지만, 텍스트 서브뷰에 대해서만 해당 애니메이션을 재정의합니다.

이제 숫자 관련 오류가 사라졌습니다. 바는 바운스하지만, 숫자는 부드럽게 크로스페이드됩니다.

이제 문제가 해결되었으니, 바를 조절하고 약간 되돌린 뒤, 텍스트에 모션 효과를 하나 더 추가해 보겠습니다.

숫자 텍스트 인자가 포함된 콘텐츠 전환 수정자는 숫자가 변경될 때 SwiftUI가 특수한 카운터 애니메이션을 사용하도록 지시합니다. 이제 숫자가 순서대로 위로 굴러 올라가며 변경 사항에 시선을 집중시킵니다.

이 효과가 정말 마음에 듭니다. 요약하자면, SwiftUI 뷰는 데이터를 픽셀로 매핑합니다. 상태 기반 애니메이션을 사용하면 데이터나 상태의 변화로 인해 픽셀이 업데이트될 때의 동작을 제어할 수 있습니다.

실제 상태 변화를 width 애니메이션 함수 안에 포함시키거나, 뷰에 애니메이션 수정자를 추가하여 이러한 애니메이션이 어떻게 동작해야 하는지 지정할 수 있습니다.

자, 다음 주제로 넘어가기 전에, 막대 애니메이션의 탄성을 제어하는 데 사용하는 선택적 매개변수에 대해 간단히 설명해 드리겠습니다. 이 선택적 매개변수는 애니메이션의 타이밍을 제어합니다. 무슨 말인지 보여드리겠습니다. 막대 애니메이션에 탄성 효과를 적용해 보겠습니다. 이 애니메이션은 목적 지점을 지나친 후 서서히 되돌아옵니다. 값 대 시간 그래프에서 내장 애니메이션 중

가장 생동감 넘치는 애니메이션으로, 값이 최종 수준에 도달하기 전에 일단 지나쳐 버립니다.

반면, ‘스내피(snappy)’ 애니메이션은 최종 값으로 빠르게 이동하여 정밀하고 전문적인 느낌을 줍니다.

그래프에서는 값이 최종 수준에 도달하는 지점에 뚜렷한 ‘무릎(knee)’이 나타납니다.

'부드러운(Smooth)' 애니메이션은 '바운시'와 '스내피'의 중간 지점에 위치합니다. 빠르게 안정되지만, '스내피' 애니메이션보다는 더 캐주얼한 느낌을 줍니다.

곡선이 더 완만하며 최종 값에 더 점진적으로 접근합니다. '부드러운' 애니메이션은 범용성이 뛰어난 애니메이션입니다. 사실, 이는 모든 Apple 플랫폼에서 기본으로 설정되어 있습니다.

마지막으로, '스프링' 애니메이션을 사용하면 스프링의 모든 속성을 사용자 정의할 수 있습니다. 이를 통해 세밀한 제어가 가능합니다. 바운스(bounce) 값을 조정하여 애니메이션의 생동감을 조절할 수 있습니다. 바운스 값이 0.6일 경우, 값은 최종적으로 안정화되기 전까지 여러 번 진동합니다. 또한 스프링의 지속 시간이나 다른 스프링 기반 애니메이션과의 상호작용 방식까지 조정할 수 있습니다.

일반적으로 ‘bouncy’, ‘snappy’, ‘smooth’와 같은 명명된 스프링 중 하나가 적합하겠지만, 필요할 때 직접 제어할 수 있다는 점을 알아두면 좋습니다. 애니메이션과 SwiftUI가 내부적으로 어떻게 작동하는지에 대한 자세한 내용은 ‘SwiftUI 애니메이션 살펴보기’를 확인해 보세요. 그런 다음 애니메이션 타이밍에 대한 기술적 및 디자인 지침을 얻으려면 ‘스프링을 활용한 애니메이션’으로 이동해 보세요. 두 동영상 모두 UB 23에서 발췌한 것입니다. 위시리스트 앱이 SwiftUI의 내장 뷰를 활용해 자동으로 아름다운 모션 효과를 구현하는 방법과, 상태 기반 애니메이션을 사용하여 앱에 세련미를 더하는 방법을 공유했습니다.

마지막으로 SwiftUI로 제작한 몇 가지 사용자 정의 효과 예제를 소개하며 마무리하겠습니다.

이 예제들은 현재 위시리스트 앱에 포함되어 있지는 않지만, 어떻게 추가할 수 있는지 설명해 드리겠습니다. 이런 식으로 실험해 보는 것은 SwiftUI에서 어떤 것이 가능한지 감을 잡는 데 훌륭한 방법입니다. 첫 번째 예제는 튀는 공입니다. 이것은 로딩 표시기로도 활용될 수 있습니다. 이 기능을 페이즈 애니메이터를 사용하여 구현해 보겠습니다.

이 애니메이션은 네 단계로 이루어져 있습니다. 먼저, 공이 떨어집니다.

그런 다음 공이 찌그러집니다. 이건 전문 용어입니다. 공이 다시 팽창한 뒤 위로 떠오릅니다.

이 주기가 반복됩니다. 열거형(enum)은 페이즈 애니메이터의 페이즈를 정의하는 데 아주 유용한 방법입니다. 따라서 이 예제에서는 ‘떨어짐(drop)’, ‘찌그러짐(squish)’, ‘팽창(expand)’, ‘올라감(rise)’을 정의합니다. 그런 다음 애니메이션을 적용할 각 속성에 대한 프로퍼티를 추가합니다. 이 예제의 경우, 먼저 y 오프셋 속성을 추가합니다. 각 페이즈가 끝날 때의 값을 반환합니다. 올라가기 페이즈가 끝날 때, 공은 원래 위치보다 40포인트 더 높습니다. 찌그러지기 페이즈가 끝날 때, 공은 5포인트 더 낮습니다.

나머지 두 페이즈가 끝날 때, 공은 원래 위치에 있습니다. 다음으로, 공의 스케일 속성을 추가합니다.

스퀴시 단계에서는 공이 평소 모양보다 약간 더 넓고 약간 더 짧아집니다.

그 외의 단계에서는 둥근 모양을 유지합니다. 단계를 정의한 후, 뷰에 단계 애니메이터를 추가하세요.

열거형(enum)을 `case iterable`에 맞게 정의하고 모든 케이스를 단계 애니메이터에 전달하여, 애니메이터가 모든 단계를 순차적으로 반복하도록 만드세요. SwiftUI는 애니메이터의 첫 번째 클로저를 호출하며, 각 단계를 차례로 전달합니다. 즉, ‘drop’, ‘shrink’, ‘expand’, ‘rise’입니다. 다음으로, 여기에 애니메이션이 적용된 뷰를 그립니다. 이것이 원입니다. 그런 다음, 단계에서 인수를 읽어와 수정자를 적용합니다.

여기서는 단계의 y 오프셋 값만큼 오프셋을 적용하고,

단계의 스케일 값만큼 크기를 조정하고 있습니다.

마지막으로, 두 번째 클로저에서 각 단계 동안 사용될 애니메이션을 정의합니다. 여기서는 ‘drop’과 ‘expand’ 단계에 이즈(ease) 애니메이션을 사용하고 있습니다. 이 애니메이션들은 시작은 느리고 끝은 빠릅니다. 그리고 ‘squish’와 ‘rise’에는 ‘ease out’을 사용하고 있습니다.

이것이 SwiftUI에서 페이즈 애니메이션을 만드는 네 가지 단계입니다. 각 애니메이션 속성에 대한 페이즈를 정의합니다. 각 페이즈가 끝날 때의 값을 정의합니다. 애니메이션 효과를 적용하여 뷰를 그리고, 마지막으로 각 페이즈에 대한 애니메이션을 지정합니다.

페이즈 애니메이터에 대해 더 자세히 알아보려면 다음을 확인해 보세요. Dub Dub 23의 ‘SwiftUI 고급 애니메이션’ 강좌를 살펴보세요. 제가 소개할 두 번째 커스텀 효과는 위시리스트에서 사용자가 배지를 획득했을 때 표시되는 전환 효과입니다. 이 효과는 멋지지만 속도가 빠르니, 다시 한 번 재생해 보겠습니다.

SwiftUI에서는 뷰를 추가하거나 제거하거나, 한 뷰를 다른 뷰로 대체할 때 전환 효과를 적용할 수 있습니다.

이 배지 전환 효과는 두 가지 주요 단계로 이루어집니다. 먼저, 한 뷰를 다른 뷰로 교체하는 코드를 작성합니다. 여기서는 먼저 그레이스케일 버전의 배지를 표시한 다음, 컬러 버전으로 교체하겠습니다.

그룹을 생성하여 그룹 내부에 변경 전후의 이미지를 담습니다. if 문을 사용하여 컬러 이미지를 표시합니다. 배지를 획득한 경우 컬러 이미지를, 그렇지 않은 경우 그레이스케일 이미지를 표시합니다. 이제 ‘earned’를 true로 설정하면 회색 배지가 컬러 배지로 교체됩니다.

두 번째 단계는 이 교체 과정을 애니메이션으로 표현하는 것입니다. 이를 위해 그룹에 transition 수정자를 추가합니다. 이렇게 하면 그룹 내부의 뷰가 교체될 때 SwiftUI가 모션 효과를 적용하도록 지시합니다. 여기서는 opacity나 scale과 같이 내장된 전환 효과를 사용할 수 있습니다. 하지만 배지를 뒤집으려면 사용자 정의 전환 효과를 사용해야 합니다.

전환 프로토콜을 준수하는 구조체(struct)를 선언하여 사용자 정의 전환 효과를 만듭니다.

전환 프로토콜에는 앞서 공유한 스크롤 전환 수정자와 마찬가지로 body 메서드 하나만 요구됩니다. 사용자 정의 전환 효과의 body는 content 매개변수를 받습니다. 이는 추가되거나 제거되는 뷰를 나타내는 프록시입니다. 본문은 또한 뷰가 나타나고 있는지 사라지고 있는지를 알려주는 ‘phase’ 매개변수도 받습니다.

본문 내부에서는 ‘phase’를 조건으로 사용하여 콘텐츠 프록시에 효과를 적용합니다. ‘phase’에는 ‘is identity’라는 속성이 있습니다. 이 속성은 뷰가 표시되어 있을 때 true 값을 반환합니다. 따라서 배지를 뒤집으려면, ‘phase’가 ‘is identity’일 때는 회전 없는 3D 회전 효과를 적용하세요.

그렇지 않은 경우, 뷰가 나타나고 있는지 사라지고 있는지에 따라 180도 양방향으로 회전 효과를 적용합니다.

플립이 진행되는 동안 배지를 서서히 숨기거나 표시하기 위해 불투명도 수정자를 적용합니다.

사용자 정의 전환 효과가 정의되었습니다. 이 인스턴스를 transition 수정자에 전달합니다.

이제 'A with animation' 블록 내에서 'is earned'를 토글하면, 회색 배지가 사라지고 컬러 배지가 나타납니다. 사용자 정의 플립 전환 효과가 적용됩니다.

앱에서 사용자 정의 모션 효과를 만드는 방법에 대해 더 자세히 알아보려면 이 동영상을 추천합니다. W 24의 ‘SwiftUI로 사용자 정의 시각 효과 만들기’를 참고하세요. 디자인 지침은 developer.apple.com의 ‘휴먼 인터페이스 가이드라인’ 모션 섹션을 확인해 보세요. 앱에서 모션 효과를 사용할 위치를 고려할 때는 SwiftUI를 활용하세요. 내장된 뷰와 컨트롤을 통해 다양한 모션 효과를 얻을 수 있습니다. 모디파이어를 자동으로 추가하여 이러한 효과를 세밀하게 조정할 수 있습니다. 앱에서는 상태

기반 애니메이션을 사용하여 이벤트에 반응하고, 사용자의 주의를 중요한 요소로 유도하세요. 신중하게 선택한 맞춤형 애니메이션 세트로 앱의 차별성을 높이세요.

SwiftUI의 모션 효과에 대한 이번 투어에 함께해 주셔서 감사합니다. 이 내용이 SwiftUI를 통해 무엇을 할 수 있는지 이해하는 데 도움이 되었기를 바랍니다.