SF Symbols 5의 새로운 기능

♪ ♪

안녕하세요 저는 Thalia입니다 Apple Design 팀의 디자이너입니다 바로 새로운 기능과 업데이트 내용을 알아볼 건데요 그 전에 먼저 아직 준비되지 않으셨다면 작년 WWDC 영상을 봐주시기 바랍니다 이해 속도를 높일 수 있고 올해 내용을 이해할 수 있는 아주 좋은 자료입니다 오늘 애니메이션 기능을 설명드리게 되어 신이 나는데요 저희가 올해 도입한 아주 놀라운 기능입니다 애니메이션 효과 심벌 드로잉에 대해서도 다뤄볼게요 마지막으로 새로운 심벌들에 추가된 최신 내용을 모두 살펴보도록 하겠습니다 그럼 애니메이션부터 시작해 보도록 하죠 SF Symbols는 첫 도입부터 개발자와 디자이너들이 모든 Apple 플랫폼에서 조화롭고 일관성 있는 사용자 인터페이스를 만들기 좋게 바꿔놨습니다 이러한 발전은 몇 차례 중요한 업데이트로 두드러졌죠 처음에 SF Symbols는 흑백 심벌을 특징으로 했는데요 일관성을 주고 친근함을 느끼게 했죠

2021년 SF Symbols는 계층, 팔레트, 다색이라는 추가 렌더링 모드를 제공함으로써 그 용도가 굉장히 다양해졌습니다

지난 해 2022년에는 가변 색상이 도입되어 심벌에 다양한 강도를 표현하거나 시간이 지나면서 시퀀스를 알릴 수 있게 됐죠 SF Symbols는 항상 더 표현력 있는 심벌을 원했고 이는 기능적이고, 시각적으로도 매력적이며 호감가는 사용자 인터페이스를 만들려는 필요에 의한 것이었습니다 그래서 오늘 이 애니메이션 기능을 소개하게 되어 기쁜데요 인터페이스에 활력, 움직임 역동성을 주는 새로운 방법이죠

설정 가능한 다양한 애니메이션 프리셋에서 선택이 가능하고 각각은 특수한 특성을 가지고 있습니다 규모, 렌더링 모드 관계 없이 모든 심벌에서 적용되기 때문에 그 어느 때보다 사용자에게 맞춤화된 심벌을 만들 수 있죠 라이브러리에 있는 프리셋들을 살펴보기 전에 먼저 알고 계셔야 할 개념이 몇 가지 있습니다 심벌 레이어와 애니메이션의 관계라는 개념이 바로 첫 번째인데요

잠시 떠올려보면 라이브러리의 각 심벌들에는 그걸 규정하는 통합 레이어 구조가 있습니다 이 레이어들이 올바른 순서로 배열되는 게 중요한데요 색깔 적용 방식 결정에 도움이 되기 때문입니다 상상하시는 것처럼 레이어는 심벌이 움직이게 만드는 데에 아주 중요한 역할도 합니다

기본적으로 하나의 심벌은 레이어별로 움직이게 될 겁니다 각 레이어가 한 번에 하나씩 움직이면서 심벌의 연출을 깔끔하고 정확한 움직임으로 만든다는 거죠 반면 여러 개의 레이어를 한 번에 움직이는 게 좋겠다는 시나리오가 있는 걸 발견하면 심벌 전체를 움직이도록 선택할 수도 있습니다 다음은 애니메이션에서의 공간의 개념인데요 이는 움직임이 적용될 때 깊이감을 만들기 위해 심벌이 사용하는 차원수를 가리킵니다 이 면들은 눈에 보이지 않지만 심벌이 어떻게 움직이고 상호작용하여 애니메이션을 매력적으로 만드는지 알려줍니다 이 면들을 한번 시각화 해보도록 하죠 중간 면은 3차원 공간의 중심에 위치하는 면입니다 이 면은 심벌의 배치와 움직임의 기준이 되죠 앞면은 뷰어에게 가장 가까운 면이고요 이 면에 배치된 심벌은 더 크게 보일 겁니다 뒷면은 뷰어에게서 가장 멀리 떨어져 있습니다 이 면은 심벌이 상호작용하는 면의 범위를 규정하죠 이 면에 있는 심벌들은 더 작은 것처럼 보일 겁니다

심벌들은 방향성을 기반으로 이 면들을 사용합니다 애니메이션 유형에 따라 심벌은 다양한 방식으로 이 면들을 통할 수 있는데요 올라왔다 내려가거나 내려갔다 올라올 수 있고 뷰어의 시야에서 사라질 수도 있습니다

이걸 고려하여 새로운 애니메이션 라이브러리를 살펴봅시다 독특한 프리셋으로 구성되며 각각 설정이 가능한데요 나타나기, 사라지기 튕기기, 확대/축소하기 고동치기, 가변 색상 교체가 있습니다 더 자세히 알아보도록 하죠

'나타나기'와 '사라지기'부터 시작할게요 '나타나기' 애니메이션은 심벌이 인터페이스에 소개될 때 사용됩니다 이건 시각 효과인데요 요소들이 점점 시야에 나타나 심볼을 드러내고 주의를 집중할 때 사용되죠 '사라지기' 애니메이션은 이와는 정반대로 심벌이 인터페이스에서 제거될 때 사용됩니다 사용자가 삭제 또는 제거된 요소에 대해 알림을 받아야 할 때 시각적 피드백 제공에 도움을 줍니다 다음은 '튕기기' 애니메이션입니다 이 유형은 개체의 튕기기를 시뮬레이션하는 빠르고 탄력적인 움직임을 특징으로 하며 다양한 방식으로 적용될 수 있습니다 사용자에게 심벌과의 상호작용이 성공적임을 알려주거나 동작이 일어났다는 것을 사용자에게 알려줌으로써 피드백 제공에 도움이 될 수 있죠 심벌이 전하려는 콘셉트를 강화하는 데에도 도움을 줘 더 재밌어 보이게 만들어 줍니다 에너지도 느끼게 해줘서 심벌이 더 상호작용적이고 매력적인 느낌이 들게 해주죠 예시를 한번 볼까요? 이 슬라이더는 일관성 있는 밝기 정도의 범위를 보여줍니다 왼쪽은 최소 밝기 오른쪽은 최대 밝기죠 각 슬라이더에 위치한 최소, 최대 태양 심벌은 시각적으로 이 기능을 전하는 데에 도움이 됩니다 슬라이더가 오른쪽 끝까지 드래그되면 튕기기 애니메이션이 발생하죠 스크린이 최대 밝기 정도에 도달했음을 알려주는 시각적 피드백을 제공하기에 가장 좋은 방법이죠 다음은 '확대/축소하기'입니다 이 애니메이션은 심벌의 크기를 바꿈으로써 시각적 피드백을 제공하는데요 이렇게 크기를 확대하거나 크기를 축소할 수 있습니다 이 효과는 동작이 일어나고 있다는 걸 확인하고 중요성을 강조함으로써 심벌에 주의를 집중시키죠 예를 들어 심벌이 잠시 크기를 키웠다가 다시 본래 크기로 돌아오면 이 심벌과의 상호작용을 인정받을 수 있는 시각적 피드백을 제공합니다 반면 심벌의 크기가 줄어들었다가 다시 원래 크기로 돌아온다면 이게 눌렸다는 인상을 주게 되죠 이건 물리적 버튼의 행동을 흉내낸 것으로 동작이 인식되는 때를 이해할 수 있게 해줍니다 인터페이스에서 사용자의 동작에 대해 촉각적인 느낌을 주고 싶을 때 가장 좋은 방법이죠 '확대/축소하기' 애니메이션을 사용한 예시를 살펴봅시다 사용자가 폴더 위를 호버하면 애니메이션 효과로 심벌의 크기가 커집니다 이 동작은 확대 상태로 지속되기 때문에 심벌에 집중할 수 있게 도와줍니다 다음 심벌로 이동할 때 동일한 애니메이션이 일어나 초점이 폴더에서 목록으로 맞춰지는 걸 볼 수 있죠

'튕기기'와 '확대/축소' 중 뭘 선택해야 할지 고민이라면 '튕기기'는 동작이 일어났거나 일어나야 한다는 걸 알려준다는 점 반면 '확대/축소하기'는 항목이 선택됐을 때 집중되게 하거나 피드백을 준다는 걸 기억하세요 그 외에도 이 효과는 상태를 유지하기도 합니다 효과가 제거될 때까지 확대/축소 상태가 유지되죠

이제 '고동치기'인데 이건 불투명도를 바꿈으로써 진행 중인 활동을 나타내는 애니메이션 효과입니다

심벌 디자인에 따라 이 애니메이션은 심벌의 레이어 사용을 이용해 뭔가를 나타내려 한다는 아이디어를 강화합니다 이 예시를 함께 살펴보죠 이 심벌은 스크린을 공유하는 사용자를 나타냅니다 세션 동안 활동이 진행 중임을 미묘하게 알려주기 위해 심벌 전체를 고동하도록 할 수가 있습니다 이 기능을 최대한 이용해 본다면 스크린을 나타내는 모양만 고동하도록 해서 동작이 진행되는 동안 더 명료하고 깔끔한 정보를 제공할 수도 있습니다 다음은 문맥상 예시입니다 고동치기로 스크린 공유라는 아이디어를 강화하죠 조건이 충족될 때까지 재생을 계속하면서도 진행 중인 활동에 대해 알려주는 겁니다 FaceTime 통화 종료 시 확인할 수 있습니다 다음은 '가변 색상'인데요 아까 보셨지만 가변 색상은 다양한 강도를 전달하고 시간이 지나며 변하는 심벌 상태를 색으로 알려줍니다 올해에는 기능을 나타내는 두 가지 방식으로 애니메이션 라이브러리의 일부가 되었습니다 하나는 '축적'이고 다른 하나는 '반복'인데요 '축적'은 이전 상태를 유지하면서도 레이어를 하나씩 강조하는데요 무선 연결을 가능하다는 Wi-Fi 심벌을 나타낼 때 가장 좋은 방법입니다 반면 '반복'은 레이어를 순서대로 강조하지만 한 번에 하나씩 강조하기에 이용 가능한 네트워크를 검색 중이라는 Wi-Fi 심벌을 나타낼 때 효과적입니다 메뉴 바에 있는 예시를 함께 살펴보시죠 Wi-Fi 심벌에 반복 효과가 적용됐고 그 외에도 역전 옵션이 적용됐는데요 가변 색상 사용 시 선택할 수 있는 또 다른 환경 설정인데요 시퀀스를 즉시 다시 한번 시작하지만 강조 레이어가 본래 지점으로 거꾸로 돌아가는데 이는 동작이 중단될 때까지 계속됩니다

마지막으로 '교체'입니다 이건 한 심벌이 다른 심벌로 바뀌는 애니메이션 유형인데요 심벌 상태의 변화를 보여주어 기능의 변화를 알려주기 위해 사용됩니다 어떤 심벌이 교체될지 어떤 심벌로 교체될지를 직접 결정할 수가 있죠 다른 모든 프리셋과 마찬가지로 레이어별로 움직일 수 있는데요 이게 기본이긴 하나 심벌 전체 움직임도 가능합니다 또한 '방향성' 개념도 있는데요

'아래/위' 애니메이션입니다 분석할 수 있도록 속도를 좀 늦춰볼게요 심벌이 아래쪽으로 움직이면서 뷰에서 사라지고 새로운 심벌이 위로 올라오며 나타나게 됩니다 이로써 두 심벌이 부드럽게 전환되죠 역동적인 방식으로 한 심벌이 다른 심벌로 교체됩니다 보통 사용자의 입력에 따라서요 방향성 사용의 또 다른 예는 '위/위' 애니메이션입니다 속도를 늦춰볼게요 심벌이 위로 올라오면서 뷰에서 사라지게 되고 새로운 심벌이 똑같이 위로 올라오면서 나타납니다 이건 전방 전지의 느낌을 만들어내서 이벤트들을 매끄러운 방식으로 보여줄 수 있게 해주죠 동작을 시작하자마자 재생 심벌과 상호작용하는 게 또 다른 예시인데요 이건 즉시 정지 심벌로 전환돼 정지가 다음 이용 가능한 동작임을 알려줍니다 이 인터페이스의 세 가지 주요 심벌을 더 자세히 살펴보죠 이건 '실행 취소'와 '다시 실행' 화살표 '복사' 동작을 나타내는 클립보드 문서 심벌입니다 이 심벌들에 주목해 주세요 'Hello'라는 말을 선택해 보면 심벌 중 일부가 즉시 다른 심벌로 교체됩니다 '잘라내기'를 나타내는 가위와 '복사'를 나타내는 문서로요

이로써 단어가 선택됐을 때 우리가 취할 수 있는 다음 동작에는 어떤 게 있는지 이해할 수 있죠 새로운 프리셋 모두 사용자와 인터페이스 간 새로운 커뮤니케이션 툴 역할을 할 수 있고 사용자 경험 향상에 중요한 역할을 하지만 주의 집중 애니메이션과 기능적 인터페이스 간 균형을 올바로 유지하는 작업이 아주 중요합니다 이 경험이 너무 과도하게 다가오지 않도록 말이죠 항상 기능성을 우선시하고 의도한 목적을 유념하세요 애니메이션 소개와 함께 자체 심벌 디자인 시 친숙해져야 하는 드로잉 관련 내용도 있는데요 지난 해 우리는 심벌 모양 전체를 그릴 수 있는 혁신적인 방법을 소개했습니다 심벌이 추가 레이어 정보를 가질 수 있게 되어 커스텀 심벌을 그 어느 때보다 빠르고 쉽게 디자인하고 그릴 수 있다는 뜻입니다 예시를 함께 살펴보죠 저는 아이들의 미술 스킬 개발 앱을 만들고 있는데요 이 캔디베어로 아이들은 색상에 대해 배울 수 있습니다 과업이 달성될 때마다 저는 이 심벌에 '튕기기' 효과를 주고 싶고요 아이들의 시선을 사로잡으면서도 지속적인 학습을 장려하는 최고의 방법이 될 겁니다 이 심벌 디자인 단계로 함께 가보시죠 심벌은 기본적으로 벡터 그림입니다 따라서 심벌 디자인 시 패스를 그림으로써 곰의 몸, 얼굴, 귀를 완전히 에워싸인 모양으로 그리죠

다음으로 곰의 발과 오프셋 패스를 그립니다 여기서 지우개 레이어를 사용할 거고요 심벌이 움직였으면 하는 방식을 시각화해야 하는데요 이 경우 발과 지우개 레이어가 개별 레이어로서 전경에 있게 될 겁니다 이렇게 애니메이션에 깊이감을 줌으로써 심벌을 더 역동적으로 만들 수 있죠 디자인 준비가 완료되었습니다 이걸 SF Symbols 앱으로 가져와 볼게요 여기서 '그리기'나 '지우기' 주석을 레이어에 달 겁니다 '그리기' 주석에서는 선택 레이어가 패스를 그리는데 '지우기' 주석에서는 선택 레이어 내 패스가 제거돼 심벌 렌더링 방식에 영향을 주게 됩니다 이렇게 심벌에 주석을 달아 원하는 결과를 얻을 수 있죠

다음은 '다색' 주석으로 유쾌한 색을 선택해 보죠 장난기를 느끼게 해줄 겁니다 만약 SF Symbols 앱과 자체 애니메이션 효과 심벌을 만드는 것과 관련해 더 알아보고 싶으시다면 Paul의 '애니메이션 효과 심벌 만들기'를 확인해 보세요 그가 아주 놀라운 인사이트를 전할 겁니다 우리의 심벌로 돌아와 보죠 심벌의 동작 중인 모습을 한번 보세요 다양한 애니메이션 프리셋이 적용되어 있습니다 자세히 살펴보기 위해 속도를 좀 늦춰볼게요 심벌의 추가 패스 정보를 보여줌으로써 심벌이 움직일 때 매끄러운 전환이 가능해지면서 이전에 부분적으로 숨겨져 있던 모양의 일부를 볼 수가 있죠 지우개 레이어 없이 애니메이션 효과를 넣을 때에는 알게 되시겠지만 큰 차이가 나타납니다 지우개 레이어로 심벌을 그렸을 땐 심벌의 연출이 개선돼 정확한 움직임이 가능하죠 반면 지우개 레이어가 없는 심벌은 정적인 상태에서 효과를 발휘하기 때문에 움직일 때 깊이감과 생동감이 사라집니다 모양의 흐름이 부드럽지 않기 때문이죠 지속성과 응집력이 부족해서 별로인 시각적 경험을 만들어내는 겁니다 지우개 레이어로 그리는 방법은 빠르기도 하지만 그리거나 뭔가를 써넣을 때 덜 복잡한 단계를 처리하며 애니메이션의 잠재적 효과를 최대한으로 드러낼 수 있다는 가장 강력한 장점을 가지고 있습니다 커스텀 심벌에 애니메이션을 사용하려면 그걸 꼭 검토해 주세요 심벌이 움직일 때 원하는 대로 작동하지 않아 패스를 조정해야 할 겁니다 다음으로 SF Symbols 라이브러리에 추가된 걸 보죠 조종 장치, 카시트 앉아 있는 인물과 같이 다양한 심벌들을 추가하여 '자동차' 카테고리를 확장했는데요 '게이밍' 카테고리에도 새 심벌을 추가했습니다 아케이드 콘솔 아케이드 스틱 다양한 버튼 유형도 추가됐죠 다양한 'EV 플러그'를 나타내는 심벌들도 있습니다

월출, 월몰, 무지개와 같은 새로운 '날씨' 심벌들도 디자인했고요 새로운 선택 개체가 많아졌습니다 700개 이상이 추가되었으니 SF Symbls에는 이제 5천 개 이상의 심벌이 있죠 새로 추가된 심벌과 멋진 애니메이션 프리셋에 대해 더 알아보고 싶으시다면 developer.apple.com/sf-symbols 에서 SF Symbols 앱의 새 베타 버전을 이용해 보세요 SF Symbols 5로 심볼의 표현력은 새로운 차원에 달성했습니다

오늘 함께해 주셔서 감사합니다 새로워진 SF Symbols를 즐겁게 배우는 시간이었길 바랍니다