애니메이션을 적용한 기호 만들기

♪ ♪

안녕하세요 저는 Paul이고 SF Symbols 앱을 작업해요 SF Symbols는 도입 이후부터 Apple 플랫폼의 모습과 느낌을 정의하는 역할을 해 왔죠

기호는 일관적이에요 Apple의 플랫폼에 내장된 수천 개의 기호를 통해 같은 시각적 디자인과 행동을 공유하죠 앱과 인터페이스가 바로 익숙하게 느껴지도록 해요 기호는 맞춤 제작이 가능하죠 만약 여러분의 요구를 충족하는 내장 기호가 없다면 SF Symbols 앱을 이용하여 여러분만의 기호를 제작할 수 있고 시스템에서 제공하는 강력한 기능도 갖출 수 있죠

당연한 말이지만 기호는 표현력이 좋아요 기호를 통해 화면 공간을 적게 쓰면서 복잡한 개념을 소통할 수 있죠 언어를 초월하는 개념을 전달할 수 있어요 앱이 더 활기 있고 명랑해 보이게 할 수도 있죠

이제 SF Symbols 5의 출시로 기호에 애니메이션을 추가하여 새로운 차원의 표현성을 활용할 수 있어요 SF Symbols 앱을 통해 새로운 표현성을 탐구할 수 있죠 오늘은 SF Symbols 앱을 사용하는 방법을 다뤄 새로운 애니메이션 효과를 시험해 보고 새로운 맞춤형 기호를 만들고 기존 맞춤형 기호를 수정하여 새로운 애니메이션 기능과 잘 어우러지도록 하며 여러분의 맞춤형 기호를 바탕으로 익숙하고 알아볼 수 있는 기호를 새롭게 만들어 볼 거예요 끝으로 이전 플랫폼에서도 여러분 앱에서 사용하는 기호가 멋져 보이는 방법을 알아보도록 하죠 그럼 SF Symbols 앱을 시작하여 예시를 살펴볼게요

먼저 사이드바의 새로운 탭부터 보죠 이것은 애니메이션 탐색기로 여러분이 예상한 것처럼 새로운 애니메이션 효과를 미리 볼 수 있어요 갤러리 뷰로 전환하여 자세히 살펴보죠 내장된 스피커 기호를 이용하여 실험해 볼게요

새로운 애니메이션 효과를 팝업 버튼으로 선택할 수 있죠 Bounce 애니메이션으로 시작하면 좋겠군요 미리보기 버튼을 클릭하면 애니메이션이 갤러리 뷰에서 재생되고 아래 기호가 있는 줄에서도 볼 수 있고 사이드바의 미리보기를 통해 다양한 렌더링 모드로 볼 수도 있어요 미리보기 버튼 주변에는 애니메이션 설정 컨트롤이 있죠 선택지를 통해 기호가 위로 튕길지 아래로 튕길지 정하거나 기호의 레이어가 따로 튕기게 할지 전체 기호가 동시에 튕기게 할지 선택할 수 있어요

이런 설정을 바꿨더니 미리보기 아래 레이블이 '자동'에서 '수정'으로 바뀌었죠 앱을 위한 코드를 작성할 때 모든 애니메이션 타입에는 기본 설정이 있어요 SF Symbols 앱을 실행할 때 기본 설정이 미리 선택돼 있죠 그러면 여기에 '자동'이라는 단어가 나타나요 만약 기본값 이외의 설정으로 전환할 경우 여기 '수정'이라고 나타나서 설정을 바꿨다는 걸 알려 주죠 여기 나타나는 초기화 버튼을 클릭하여 기본값으로 돌아갈 수 있어요

마음에 드는 설정을 찾아서 코드에 직접 지정하고 싶다면 이 버튼을 클릭하여 Swift 또는 Objective-C API에 필요한 효과의 이름을 복사하세요 이제 다시 새로운 애니메이션을 확인해 보죠

이 스피커 기호는 가변 색상도 지원해요

그럼 가변 색상 애니메이션을 시도해 보죠

Cumulative 옵션을 선택하면 가변 색상 레이어가 점진적으로 활성화하다가 동시에 페이드 아웃 돼요 Iterative를 선택하면 레이어 하나씩 활성화하죠 Reversing 옵션을 켜면 이 설정을 통해 색다른 느낌을 줄 수 있어요

새로운 애니메이션 효과를 빠르게 살펴봤죠 시스템에서 제공한 SF Symbol로 미리 봤는데 내장된 기호는 전체 기능의 절반에 불과해요 만약 여러분 앱에 맞춤형 기호가 있다면 SF Symbols 앱을 통해 애니메이션의 기능을 적용할 수 있죠 이건 작년에 작업했던 맞춤형 기호인데 제 딸과 루빅큐브 맞추는 걸 도와줄 수 있는 앱을 작업할 때 사용했죠 이제 루빅큐브를 빠르게 맞출 수 있어서 앱을 업데이트하여 루빅큐브 맞추는 시간을 기록하는 기능을 추가할 거예요 작년의 맞춤형 기호를 가져와서 애니메이션을 위해 준비해 보죠

작년에 만들었던 루빅큐브 기호예요 Hierarchical과 Multicolor 렌더링으로 주석을 달아 놓았는데 앞면을 서로 다른 레이어로 구분하여 가변 색상을 적용할 수 있게 했죠

제 기호는 가변 색상이 있어서 바로 가변 색상 애니메이션을 지원해요

이걸 로딩 표시기로 쓸 수 있죠

다른 애니메이션을 살펴볼게요

Pulse는 시간을 멈췄을 때 사용하면 좋겠군요 근데 미리보기 버튼을 클릭하면 By Layer 설정을 선택했음에도 전체 기호의 투명도가 바뀌어요 여기 주석 목록에 새로운 컨트롤이 있어 By Layer 설정을 이용할 때 어떤 레이어의 투명도를 바꿀지 지정할 수 있죠 만약 제 기호의 어느 레이어도 선택하지 않으면 전체 기호의 투명도가 바뀌어요 그럼 앞면 레이어들을 선택하여 앞면의 투명도가 바뀌게 하고 미리보기를 다시 보죠 우리가 원했던 형태예요 타이머를 멈췄을 때 잘 어울리겠군요 다른 애니메이션도 동작을 사용하므로 그걸 확인해 보죠 SF Symbols 앱 버전 4 이전에 엑스포트한 기호를 가지고 있거나 Xcode 14와 호환되도록 엑스포트 한 기호여서 동작 정보를 포함하지 않는다면 여러분의 앱에서 전체 기호가 움직일 거예요 SF Symbols 5 버전에서 엑스포트 하여 Xcode 15에서 사용할 기호는 어떻게 되는지 보죠

다시 Bounce 애니메이션으로 가서 루빅큐브 기호를 설정해 보죠

동작이 많아요 기본값으로 By Layer를 선택하면 기호의 모든 레이어가 독립적으로 움직이죠 기호 애니메이션이 정말 기대되긴 하지만 이건 좀 과한 것 같군요 주석의 새로운 기능으로 이 현상을 고칠 수 있죠 이제 레이어 그룹을 만들어 그룹에 속한 레이어들을 함께 움직이게 할 수 있어요 앞면을 구성하는 모든 레이어를 선택하여 새로운 레이어 그룹에 추가할게요

레이어 그룹 안에는 모든 레이어가 고유의 주석과 설정을 유지하지만 이제는 모두 함께 움직여요

이제 움직임이 적지만 루빅큐브의 서로 다른 부분이 따로 움직여서 이상한 느낌을 주죠

일단 되돌리고 기호의 모든 레이어를 선택하여 같은 그룹에 추가할게요

이제 기호의 느낌과 맞아떨어지는군요 큐브의 서로 다른 면이 따로 움직이지 않고 그림의 레이어 단계가 서로 다르지 않죠 모든 레이어를 하나의 그룹으로 묶어서 코드에서 레이어 별로 움직이도록 요청했음에도 루빅큐브가 하나의 단위로 움직이게 했어요 결국 맞춤형 기호를 개별적으로 살펴보면서 각각 어떤 동작 그룹이 어울리는지 알아내야 하죠

앞에서 기호의 장점으로 언급했던 것이 일관성과 익숙함이었는데요 이 개념을 잘 염두에 두면서 맞춤형 기호를 작업해야 해요 작년에 작업했던 다른 맞춤형 기호를 보여 드리죠 루빅큐브인데 색칠된 원 위에 놓여 있어요 원형의 배경은 SF Symbols의 통상적인 디자인 요소죠 내장된 라이브러리의 수많은 기호가 비슷한 원형 기호를 사용합니다 이 비디오 기호처럼요 이런 식으로 재사용할 수 있는 디자인 패턴을 SF Symbols에서 반복적으로 볼 수 있는데 원형의 테두리나 슬래시나 배지도 있죠 이러한 요소를 일관적으로 사용해야 SF Symbols를 쉽게 알아보고 익숙하게 만들 수 있죠 맞춤형 기호는 이런 요소들을 통일시켜 익숙함을 통한 장점을 누려야 해요 맞춤형 기호가 시스템과 일관성을 유지하려면 어떻게 할까요? 시스템 기호의 라이브러리를 살펴보면서 비슷한 기호의 예시를 찾아 새로운 그림의 바탕으로 쓸 수 있죠 이 기호가 각 렌더링 모드에서 어떻게 주석이 달렸는지 보고 레이어 별 애니메이션에서 어떻게 움직이는지 어떻게 투명도가 바뀌는지 배경 속에서 가변 색상 설정이 어떻게 달라지는지 볼 수 있어요

다른 통상적인 디자인 패턴도 똑같이 작업할 수 있죠 테두리나 슬래시, 배지처럼요 근데 기억할 게 너무 많아요 그런 데 쓸 머리가 있으면 루빅큐브의 윗면을 빠르게 해결하는 방법을 기억하겠어요 SF Symbols의 목표 중 하나는 맞춤형 기호가 시스템 제공 기호와 같은 분위기를 유지하는 것을 최대한 쉽게 할 수 있도록 도와서 일관적이고 익숙한 경험을 제공하는 거죠 그래서 올해 기호 요소를 도입하게 되어 정말 기쁘게 생각해요 기호 요소는 시스템에서 제공한 SF Symbol의 모습과 느낌을 연출할 수 있는 아트워크와 동작을 제공하죠 여러분의 맞춤형 기호를 기호 요소와 조합하면 내장된 기호의 모습과 느낌을 주는 새로운 기호로 만들 수 있어요 제 루빅큐브 기호의 몇 가지 요소를 조합하여 어떻게 작동하는지 보죠 먼저 맞춤형 기호의 컨텍스트 메뉴를 열어서 Combine Symbol with Component를 선택할게요 나타난 시트에 있는 여러 가지 요소들을 보고 사용하고 싶은 걸 고를 수 있죠 테두리도 있고 배지와 슬래시 요소도 있어요 slash와 badge.plus circle과 circle.fill로 시작하죠

그럼 끝이에요 맞춤형 기호 라이브러리에 새로운 기호들이 나타났는데 벌써 괜찮아 보이는군요 더하기 배지는 다색 디자인에 맞는 색깔이죠 슬래시는 뒤에 있는 루빅큐브와 따로 움직이는군요

.circle.fill 버전도 이미 설정돼 있어서 Hierarchical 모드에서 주 레이어로 사용하면서도 Monochrome에서는 흰색으로 바뀌죠 가변 색상 설정까지 유지했어요

바탕이 되는 기호의 모습과 디자인에 따라 추가로 수정할 수 있으며 여기 사이드바에 있는 주석 컨트롤을 이용하면 되죠

예를 들어 배지의 위치를 살짝 옮겨서 시각적 아티팩트를 피하거나 기호의 다른 쪽으로 이동할 수도 있어요

아니면 슬래시의 길이를 수정하여 기호 전체가 덮이게 할 수도 있죠

이제 여러분의 새로운 기호가 모든 스케일과 지원 가중치에서도 멋진 모습인지 확인해야 해요 3개의 스케일과 9개의 가중치면 총 27개의 변종이죠 좋은 소식은 기호 요소가 가변 템플릿을 통해 작업 대부분을 대신 해 준다는 거예요

가변 템플릿은 SF Symbols 3에 도입한 기능으로 Small 스케일에서 3개의 그림만 제공하면 되죠 Ultralight, Regular 그리고 Black 가중치예요 그리고 각 그림에서 사용한 베지어 경로가 호환된다면 시스템이 여러분의 그림을 혼합하여 남아 있는 24개의 변종을 만들 수 있죠 3개만 작업하여 27개의 기호를 만들 수 있다면 좋은 조건이에요 기호 요소도 같은 방식으로 작용하죠 Small + Ultralight Small + Regular Small + Black 조합만 있으면 돼요 갤러리 뷰의 맨 위에 미리보기가 있어서 3개 가중치의 기호를 보고 빠르게 전환할 수 있죠 대개는 이 슬래시를 길게 한 것처럼 Regular 가중치만 수정하면 변경 사항이 Ultralight와 Black에도 적용되죠 만약 테두리가 겹치는 문제가 발생하거나 기호의 모양을 다르게 정렬해야 한다면 Ultralight 또는 Black 가중치의 Override 체크박스를 클릭하여 추가로 수정하면 돼요 테두리 안에 있는 큐브를 줄여서 여유 공간을 주도록 하죠 시스템에서 새로운 변경 사항을 적용하여 Semibold와 같은 중간 가중치를 자동으로 생성해요 사실은 시스템에서 이런 테두리를 위해 더 많은 작업을 하죠 테두리에 맞도록 기존 기호의 크기를 줄였는데 시스템이 기반이 되는 기호의 가변 템플릿을 사용하여 가중치 보정을 적용하여 기호의 크기가 줄어들 때마다 기호의 가중치와 굵기를 늘려요 이를 통해 테두리가 없는 큰 변종과 테두리가 있는 변종의 일관성을 유지하는 거죠 기호 요소의 다른 부분과 마찬가지로 테두리 안에 있는 기호의 가중치를 미세 조정하여 여러분이 원하는 최종 결과를 얻을 수 있어요 기호 요소의 기능이 이렇게 강력하죠 여러분의 맞춤형 기호를 바탕으로 빠르고 쉽게 새로운 기호를 만들고 움직임과 아트워크를 통해 시스템에서 제공한 SF Symbols와 같은 느낌을 제공해요 기호 요소를 사용할 때 가변 템플릿으로 만든 맞춤형 기호를 사용해야 가중치 보정을 적용할 수 있죠 이 말은 여러분이 가변 템플릿에서 개별 변종에 적용한 수정 사항은 요소와 조합했을 때 무시된다는 의미예요 끝으로 요소를 사용하여 제작한 기호는 편집 가능한 템플릿으로 엑스포트 할 수 없죠 기호 요소는 여러분이 수정 작업을 마친 기호를 대신 작업하도록 설계하여 여러분이 수동으로 편집하지 않아도 돼요

올해 SF Symbols 앱에 40개 이상의 요소가 추가됐죠

마치기 전에 고려해야 할 중요한 영역이 하나 있어요 새 기능을 채택할 때 꼭 기억해야 할 것은 여러분 앱의 사용자가 이전 플랫폼을 사용하더라도 놀라운 인앱 경험을 지원해야 한다는 사실이죠 SF Symbols의 앱 경험을 재설계하여 여러분의 기호가 앱이 지원하는 모든 플랫폼에서 같은 모습으로 동작하게 했고 이전 플랫폼도 마찬가지예요 기호의 모양과 구조를 바꾸기 위해 편집용 템플릿을 엑스포트 할 때 와이어프레임 뷰가 나타나며 템플릿에서 보여 줬던 색칠된 모양을 대체해요 동작에 최적화된 기호는 렌더링 중에 다른 모양의 일부를 지우기 위해 사용되는데 여기 있는 느낌표 배지 주변의 여분의 테두리가 그 예죠 기호를 그릴 때 기호의 모양에 집중하는 게 더 낫다는 사실을 알게 되어 앱에서 여러분의 기호를 주석 처리할 때까지 기다렸다가 어떤 모양에 색깔을 넣고 어떤 걸 지울지 결정해요 템플릿의 와이어프레임 스타일이 그 작업을 도와줘요

템플릿을 엑스포트할 때 쓰는 Compatibility 피커도 추가했죠 기본적으로 최신의 멋진 기호를 받을 수 있으며 대부분 동작을 위해 다시 그려졌어요 만약 이전 플랫폼을 목표로 한다면 SF Symbols 앱이 그 플랫폼에 더 적합한 템플릿을 제공하죠 예를 들어 SF Symbols 3을 목표로 한다면 iOS 15와 macOS Monterey에 해당하며 이 경우 동작에 최적화되지 않은 간단한 그림을 받게 되는데 동작에 사용하는 레이어 구조를 SF Symbols 3에서 완벽히 지원하지 않기 때문이에요 만약 SF Symbols 2를 목표로 한다면 iOS 14와 macOS Big Sur에 해당하며 자동으로 정적인 템플릿을 받게 될 텐데 가변 템플릿이 SF Symbols 3에 도입됐기 때문이죠 맞춤형 기호에 주석을 달 때도 같은 개념이 적용돼요 기본적으로 앱이 제공하는 모든 주석 기능에 접근할 수 있죠 대신 특정 기호가 특정 플랫폼을 목표로 하도록 하면 앱이 여러분의 기호를 만들도록 도와줄 거예요 예를 들어 SF Symbols 3 또는 이전 버전을 선택하면 제 기호의 단색 주석을 편집할 수 없는데 단색 주석을 맞춤화할 수 있는 기능이 SF Symbols 4에 도입됐기 때문이죠 마지막으로 기호를 Xcode로 엑스포트할 준비가 됐다면 앱이 어떤 버전의 Xcode를 사용하는지만 알려 주면 돼요 그럼 앱이 가장 잘 맞는 파일 형식으로 엑스포트 하여 이전 플랫폼을 목표로 하는 앱으로 컴파일링 했을 때 파일이 제대로 작동하도록 도와주죠 SF Symbols 앱을 사용하면 애니메이션을 적용한 기호를 이렇게 쉽고 빠르게 만들 수 있어요 애니메이션 탐색기와 새로운 주석 기능 기호 요소와 호환성 확인 기능이 있어 클릭 몇 번이면 작업이 끝나죠 제가 빠른 속도로 루빅큐브를 맞추는 것과 비슷해요 고려해야 할 각도가 많고 움직이는 요소도 많고 많은 정보를 처리해야 할 것 같지만 적절한 도구가 있으면 모든 것을 정말 빠르게 완성할 수 있죠 시청해 주셔서 감사해요 ♪ ♪