SF Symbols 6의 새로운 기능

안녕하세요, Apple Design 팀의 디자이너 Thalia입니다 이 세션에서는 SF Symbols에 대해 알아보겠습니다 SF Symbols는 익숙하고 쉽게 접근 가능한 기호를 제공하기 위해 마련된 Apple의 아이콘 라이브러리입니다 SF Symbols는 강력한 도구이며 현지화부터 표현력이 풍부한 애니메이션까지 다양하게 포함합니다 다룰 내용이 많으니 이제 시작해 보겠습니다 오늘, 새로운 프리셋과 향상된 기능을 소개하게 되어 기쁩니다 이 내용은 애니메이션 프리셋에서 다루겠습니다 SF Symbols 앱 섹션에서는 몇 가지 업데이트 사항을 살펴보고 기호를 주석 처리하는 방법을 알아봅니다 따라서 새로운 애니메이션을 최대한 활용하게 될 것입니다 마지막으로 새로운 기호에서는 라이브러리에 새로 추가된 기호를 살펴봅니다 SF Symbols 애니메이션은 전년도에 도입한 기능입니다 익숙하지 않다면 ’SF Symbols 5의 새로운 기능’을 참고하세요 이제 개념들과 애니메이션의 강력한 전체 성능을 더 자세히 살펴보겠습니다

또한 SF Symbols 앱에도 익숙해지셔야 합니다 복습이 필요한 경우 ’애니메이션을 적용한 기호 만들기’를 확인하는 것이 좋습니다 이제 시작하겠습니다

올해, 새로운 범용 애니메이션 프리셋인 ‘흔들흔들’, ‘회전’ ‘심호흡’을 도입하게 되어 정말 기쁩니다 대치와 가변 색상에 대한 멋진 업데이트도 포함됩니다 이 모든 프리셋으로 더욱 표현력이 풍부한 애니메이션을 만들어 앱의 인터페이스를 향상할 수 있습니다

첫 번째는 ‘흔들흔들’입니다

변경 사항이나 콜투액션을 강조하려는 경우 ‘흔들흔들’ 프리셋을 사용할 수 있습니다 ‘흔들흔들’은 상호작용에 동적인 강조 효과를 더해 주거나 기호가 나타내는 바를 강화할 수도 있습니다 예를 들면, 특정 방향을 가리키는 화살표가 있는 경우입니다 방향에 대해 이야기하자면 이것은 ‘흔들흔들’에 매우 중요한 개념입니다 종이 비행기를 예로 들어 보죠 기호는 오른쪽 또는 왼쪽으로 흔들릴 수 있습니다 또한 읽는 방향에 따라 앞으로 또는 뒤로 흔들릴 수도 있습니다 이러한 움직임은 기호가 가로로 이동했다가 원래 위치로 돌아가게 만듭니다

기호는 세로로, 즉 위로 또는 아래로 흔들린 다음 다시 시작점으로 돌아갈 수 있습니다

기호는 시계 방향 또는 시계 반대 방향으로 흔들릴 수 있습니다

이제, 이 특정 기호의 경우 이러한 방향 중 어떤 것도 종이 비행기와 동일한 방향을 가리키지 않습니다 이와 같은 경우에는 기호의 방향과 일치하는 맞춤형 각도를 지정해야 합니다 315도 각도를 사용하면 종이 비행기를 곧 이륙하려는 것처럼 보이게 만들 수 있습니다!

우리는 ‘흔들흔들’을 쉽게 사용할 수 있게 만들고자 했습니다 종이 비행기와 같은 많은 기호에는 선호 방향이 내장되어 있습니다 하지만 언제든 다른 애니메이션을 사용하도록 애니메이션을 맞춤화할 수 있습니다 앱에서 필요하다면요

다음으로, ‘회전’을 살펴보겠습니다

‘회전’을 사용하면 기호에 동적 움직임을 추가할 수 있습니다 사물이 실제 환경에서 움직이는 방식을 모방하거나 시각적 지표로 작동하는 방법을 사용해서요 예를 들어, 어떤 작업이 진행 중일 때 회전을 사용해 예상대로 작동하고 있음을 확인해 줍니다

일부 기호는 완전히 회전할 수 있지만 다른 경우에는 기호의 특정 부분만 회전하기를 원할 수 있습니다 이 탁상용 선풍기와 같은 기호의 경우 By Layer 회전 옵션을 사용해 선풍기 날개만 회전시킬 수 있죠 나중에 나만의 기호로 이렇게 하는 방법을 알아보겠습니다

이제, ‘심호흡‘을 살펴보죠

‘심호흡‘은 기호의 존재감을 매끄럽게 증가시키고 감소시켜 살아 있는 듯한 느낌을 주는 애니메이션입니다 상태 변화를 전달하는 데 도움이 되거나 활동이 발생하고 있음을 알려 줄 수 있습니다 예를 들어, 진행 중인 녹화 세션이 있는 경우입니다

‘심호흡‘은 SF Symbols 5에서 도입한 프리셋인 ’진동’과 조금 비슷해 보입니다 ’진동’은 불투명도를 변경하여 지속적인 활동을 전달하고 ‘심호흡‘은 불투명도와 크기를 사용해 움직이는 동안 기호가 어떻게 보이는지에 영향을 미칩니다 어떤 프리셋을 선택해야 할지 모르겠다면 이렇게 자문해 보세요 무엇을 전달하려고 하는 것인가? 우리는 하트의 존재감을 더 높이고 더 살아 있는 것처럼 느껴지게 만들고 싶습니다 이 경우에는 ‘심호흡‘이 더 적합합니다

다음으로, ’대치’에 대해 살펴보겠습니다

’대치’ 애니메이션은 한 기호가 다른 기호로 바뀌는 프리셋입니다

올해에는 ’매직 대치’라는 멋진 새 옵션이 추가되었습니다

’매직 대치’는 관련 도형이 있는 두 기호 간의 스마트한 전환입니다 슬래시가 그려지고 지워지거나 배지가 나타나고 사라지거나 기본 기호와는 독립적으로 대체될 수 있습니다

’매직 대치’가 새 기본 동작이나 한 가지 고려할 사항이 있습니다 ’매직 대치’가 더 선호되지만 기호들이 관련되지 않기 때문에 이를 수행할 수 없는 경우가 있을 수 있습니다 두 기호 간에 ’매직 대치’를 사용할 수 없는 경우에는 표준 ’대치’ 애니메이션을 사용합니다

또한 이 대체 애니메이션에 어떤 방향을 사용해야 할지도 제어할 수 있습니다

이제 이 두 관련 기호 간에 ’매직 대치’가 어떻게 수행되는지 알 수 있지만 사람 기호로 변경될 때에는 Off-Up이 사용됩니다

이것은 탭할 수 있는 요소에 이상적입니다 예를 들어, UI에서 즉각적인 피드백을 제공할 수 있지만 새로운 기호가 화면에 나타날 때 움직임을 계속 유지할 수 있습니다

여러분 고유의 기호에 대한 기호 구성요소를 사용해 온 경우 ’매직 대치’는 해당 기호에서도 정상 작동합니다! 해당 기호를 SF Symbols 6 앱에서 다시 내보내고 Xcode 16으로 가져오기만 하면 사용할 수 있습니다

가변 색상에 대한 업데이트 사항도 있습니다 가변 색상은 다양한 수준의 강도를 보여 주고 색상에 의존하여 시간 경과에 따라 변경되는 기호의 상태를 전달하는 프리셋입니다 기호의 디자인은 가변 색상이 반복되는 경우 애니메이션이 어떻게 표시되는지에 영향을 미칩니다 일부 기호의 경우 색상 불투명도가 한 지점에서 다른 지점으로 진행하는 것이 적절합니다 두 끝점이 만나지 않는 경우 이를 열린 루프라고 합니다 하지만 두 끝점이 만나는 경우에는 애니메이션이 닫힌 루프가 되죠 반복되는 가변 색상의 경우 각 기호의 진정한 특성을 존중하여 이 애니메이션을 향상했습니다 닫힌 루프 디자인이 적용된 기호는 매끄럽게 반복될 수 있습니다 가변 색상을 지원하는 기호를 사용하는 경우 이제 해당 기호를 주석 처리하여 닫힌 루프 디자인을 최적화하고 매끄러운 연속 재생을 구현할 수 있습니다

이 모든 새로운 프리셋이 앱에서 어떻게 구현될 수 있는지의 예시를 보여 드리기 위해 식물을 사랑하는 사용자를 위한 샘플 앱을 디자인해 봤습니다 식물을 카탈로그를 만들고 필수적인 돌봄 활동을 추적하며 식물의 상태를 모니터링합니다 바로 이렇게요 UI에서 사용할 새로운 기호 세트를 SF Symbols 라이브러리의 기호와 결합하여 디자인했습니다 ’매직 대치’를 사용해 식물의 건강에 영향을 줄 수 있는 날씨 이벤트에 대해 경고할 수 있습니다 기호 간의 매끄러운 전환 덕분에 ’매직 대치’는 현재까지 최고의 대치 유형입니다 따라서 가능한 한 이 방법을 사용하시기 바랍니다

이 예제에서는 사용자가 주변 환경을 스캔하고 집에서 키울 수 있는 식물 유형을 감지할 수 있습니다 감지되면 앱에서 해당 식물의 이름과 그에 대한 정보를 보여 줍니다

선호되는 화면상의 작업을 명확하게 나타내기 위해 버튼 내부의 V자형 기호가 흔들리기 시작합니다 이렇게 하면 그 자체에 대한 관심을 유도하고 이 몬스테라를 식물 컬렉션에 추가할 수 있음을 알릴 수 있죠 시각적으로 복잡한 UI가 있는 경우 이와 같은 애니메이션을 시도하여 사용자가 앱 사용 방법을 찾도록 도와줄 수 있습니다

실시간 현황을 좀 더 생생하게 구현하고 싶으신가요? ‘회전’을 사용하는 것이 좋은 방법일 수 있습니다! 이 예제에서는 화살표가 회전하여 진행 중인 작업이 있음을 표시하죠

또 다른 예제를 살펴보겠습니다 이 뷰에서는 식물의 건강과 물 흡수량을 확인할 수 있습니다

난초에 물을 주는 좋은 방법은 약 15분간 뿌리를 담그는 것입니다 타이머를 시작하면 ‘심호흡‘ 프리셋으로 물방울에 애니메이션 효과를 적용하여 시각적 피드백을 제공하고 활동이 진행 중임을 보여 줍니다

한 가지 고려해야 할 사항이 있습니다 애니메이션은 UI에서 유용하지만 너무 많이 사용하거나 잘못된 맥락에서 사용하면 대응하기 어렵고 산만하게 느껴져 중요한 콘텐츠와 작업에 관심을 갖지 못하게 할 수 있습니다

애니메이션은 의도적으로 목적을 가지고 사용하여 경험을 방해하는 게 아니라 강화하는 것이 가장 좋습니다 이제 모든 새로운 프리셋과 향상된 기능을 알아봤으니 SF Symbols 앱의 최신 업데이트 사항을 안내하겠습니다

모든 멋진 새 프리셋은 나머지 프리셋 옆에 있는 애니메이션 인스펙터에서 사용할 수 있습니다 여기에서 새로운 ‘흔들흔들’ 애니메이션을 찾을 수 있습니다

기본 설정에서 각 기호에 선호되는 ‘흔들흔들’ 방향을 선택합니다 이 경우에는 이 기호에 위를 가리키는 화살표가 있으므로 위 방향으로 흔들리는 것을 선호하는 것입니다 하지만 우리가 직접 지정할 수도 있습니다 이 경우처럼 오른쪽으로 흔듭니다

‘흔들흔들’과 마찬가지로, 기본 방향은 선호되는 회전을 적용하죠 또는 다른 방향 선택이 가능한데 시계 방향/시계 반대 방향입니다

다음은 ‘심호흡‘ 프리셋입니다 ‘진동‘이 활성화되면 ‘진동‘ 애니메이션 프리셋에 선택된 레이어의 불투명도가 변경되면서 기호에 심도와 동적인 움직임을 한층 더 더해 줍니다

애니메이션을 반복하는 방법을 더 세밀하게 제어할 수 있습니다 한 번만 볼 수 있는 Once 재생이 있습니다 Repeat with Delay에서는 애니메이션이 계속 반복 재생되며 반복 사이에 얼마나 오래 일시 정지할지 결정할 수 있습니다 Continuous에서는 재생이 시작되고 명시적으로 중지될 때까지 계속됩니다

새로운 애니메이션 프리셋의 간략한 개요를 살펴봤습니다 지금까지 우리는 시스템 제공 기호를 사용해 검토했지만 앱에서 여러분만의 맞춤형 기호를 사용하는 경우 SF Symbols 앱은 여러분이 새로운 애니메이션 기능을 준비하기 위해 언제든 활용할 수 있는 도구입니다

제가 앱을 위해 디자인한 기호를 기억하시나요? 해당 기호로 돌아가서 얼마나 쉽게 주석 처리할 수 있는지 알아보죠 화분 안에 심긴 이 식물로 시작하겠습니다

하트 모양의 나뭇잎을 한 레이어에 배치하고 화분은 두 번째 레이어에 배치하겠습니다

애니메이션을 미리 보면 마치 ’아니요’라고 고개를 젓는 것처럼 움직이네요 마치 춤을 추는 것처럼 행복해 보이게 만들고 싶습니다! 선호하는 ‘흔들흔들’ 방향을 위로 변경해 보겠습니다

이제 완벽하네요! 다음은 ‘심호흡‘으로 물방울에 애니메이션 효과를 적용해 보죠 움직이고 싶은 순서대로 레이어당 한 방울씩 추가하거나 프리셋이 전체 기호에 애니메이션 효과를 적용하도록 하려면 모두 한 레이어에 둘 수 있습니다 여기에 두 번째 레이어와 세 번째 레이어가 있습니다

이제 미리보기를 확인해 보죠

근사하네요!

여기서 잠깐 말씀드리고 싶은 한 가지가 있습니다 이전에 ‘진동‘을 선택한 레이어를 사용해 주석 처리한 기호가 있는 경우 Pulses가 선택되면 ‘심호흡‘이 해당 주석을 활용하므로 추가 단계에 대해 걱정하지 않아도 됩니다

이제 ‘회전’에 대해 이 기호를 확인해 보겠습니다 우리는 이미 레이어를 정의했습니다

나뭇잎을 한 레이어에, 화살표들을 두 번째 레이어에 배치했죠

어떻게 표시되는지 검토해 보죠

정확히 우리가 원하는 바는 아니네요 화살표들은 이 기호에서 가장 눈에 띄는 부분이기 때문에 해당 레이어를 작동 중에 움직이는 유일한 레이어로 만들고 싶습니다 따라서 Can Rotate를 선택하겠습니다 이것이 바로 우리가 원하는 동작입니다 Can Rotate를 사용하는 레이어가 중심점에 의존하여 해당 특정 지점을 중심으로 회전합니다

이 버튼을 클릭하면 새로운 제어기가 캔버스에 표시됩니다

중심점과 기호의 여백을 보여 주는 가이드가 있습니다 앱에서 중심점을 이러한 가이드의 중앙에 자동으로 배치합니다

하지만 때때로 이 탁상용 선풍기와 같은 기호가 있는 경우 Can Rotate를 선택한 레이어의 중앙으로 중심점을 이동해야 합니다 이 경우에는 이 레이어가 선풍기 날개입니다 이 작업을 돕기 위해 이 Snap to Points 버튼이 있죠

이 버튼을 클릭하면 경로상의 벡터가 표시되고 중심점이 이러한 지점에 맞춰집니다

이는 중심점을 중앙에 배치할 때 매우 유용합니다

선호하는 경우, 이러한 두 지점을 검사하고 둘 사이 중간의

좌표를 수동으로 입력할 수도 있습니다

중심점을 배치할 때에는 정밀해야 하므로 미리 보면서 애니메이션이 제대로 표시되는지 확인해야 합니다

캔버스에도 이러한 제어기가 있습니다 기호 구성요소의 경우와 마찬가지로 회전 중심점을 이러한 3개 가중치로 정의해야 합니다 정의된 후에는 시스템이 값을 보간하고 모든 가중치 및 모든 크기에서 중심점을 배치할 위치를 파악합니다

여러분만의 기호를 주석 처리하는 프로세스를 살펴봤습니다 이제 SF Symbols 라이브러리에 새로 추가된 사항을 확인해 보죠

배터리, 오픈카, 온도 표시기 등의 기호로 Automotive 카테고리를 확장했습니다 다양한 활동 세트를 나타내는 그림이 있습니다

새로운 현지화된 기호가 있으며 여기에는 그리스어, 키릴어 여러 인도 숫자 체계 등의 스크립트가 포함됩니다 진행 과정 표시기, 햅틱 홈 및 위젯 관련 기호 그리고 수많은 객체 중에서 선택할 수 있습니다!

800개 이상의 새로운 기호가 포함된 SF Symbols 6는 6,000개 이상의 고유한 기호를 선보이는 동적 라이브러리입니다 여기에는 포괄적인 범위의 크기 가중치, 렌더링 모드뿐만 아니라 앱을 향상하도록 디자인된 멋진 애니메이션 프리셋이 포함되죠!

모든 새로운 추가 사항과 환상적인 애니메이션 프리셋을 살펴보려면 developer.apple.com/kr/sf-symbols 웹사이트에서 SF Symbols 앱의 새로운 베타 버전을 확인하세요

이제, 이러한 업데이트 덕분에 기호로 훨씬 더 다양하게 표현력을 발휘할 수 있습니다 오늘 함께해 주셔서 감사합니다 SF Symbols의 새로운 기능을 즐겁게 알아보셨기를 바랍니다