- SF Symbol은 개발자와 디자이너가 모든 애플 플랫폼에서 조화롭고 일관적인 UI를 만들 수 있게하기 위해서 계속해서 발전해왔다.
- 첫 릴리즈: 단색(monochrome) 심볼
- 2021(3.0): 다양한 렌더링 모드 지원(Hierarchical, Palette, Multicolor)
- 2022(4.0): Variable Color 지원
- Animation
- 모든 심볼, 모든 스케일, 모든 렌더링모드에서 동작
- 설정 가능한 애니매이션 목록들 중에서 선택해서 적용하는 것
- layer와 animation사이의 관계
- SF Symbol은 모두 동일한 레이어 시스템을 기반으로 한다.
- 이를 기반으로 렌더링 할때 색을 어떻게 채울 것인지를 결정한다.
- 애니매이션도 이 레이어 기반으로 동작한다.
- 기본적으로는 레이어 별로 한번에 하나씩만 애니매이션을 돌린다. 이는 명확하고 정확하게 애니매이션을 만들 수 있게 해준다.
- 원하면 전체 레이어를 한꺼번에 애니매이션 할 수도 있다.
- 공간(space)
- 심볼이 움직일 때, 깊이를 주기 위해서 심볼이 사용하는 차원을 뜻한다.
- 사용자에게 보이지는 않지만, 심볼이 움직이고 상호작용하는 것을 이해하는데 도움을 준다.
- middle plane: 기준이 되는 평면
- front plane: 보는이에게 가장 가까운 평면. 이 평면에 있는 심볼은 크게 보인다.
- back plane: 보는이에게 가장 먼 평면. 심볼의 깊이 정도를 정해주며, 이 평면에 있는 심볼은 작게 보인다.
- 애니매이션 타입마다 지정된 방향에 따라서 이 공간을 활용한다.
- up → down, down → up, 특정 plane에서 사라지기 등
- 애니메이션 종류
- Appear: 심볼이 인터페이스에 나타나는 효과
- Disappear: 심볼이 인터페이스에서 사라지는 효과.
- Bounce
- 특정 심볼과의 interaction이 성공적으로 끝났음을 알려주기
- 액션이 발생했음을 알려주기
- 심볼이 전달하려는 바를 좀 더 강하게 전달해주는 효과
- 역동적으로 appear
- 인터렉션이 가능함을 좀 더 역동적으로 나타내줌
- Scale
- 액션이 발생했음을 나타내거나 중요성을 강조하기 위함
- 버튼의 경우 커서가 가있으면 scale up이 되고, 클릭하면 scale down이 된다.
- bounce와의 비교
- bounce는 액션이 발생했거나, 일어나야 함을 사용자에게 알려주는 일시적인 효과
- scale은 선택되었음을 나타낼 수 있고, 이 상태가 effect가 해제될 때 까지 유지된다.
- Pulse: 투명도를 조절하는 것
- 현재 진행중인 활동을 나타내기 위한 효과
- 전체 심볼에 대해서 적용할 수도 있지만 섬세하게 적용하기 위해서 일부 레이어에만 적용할 수도 있다.
- Variable Color
- 두가지 기능을 지원
- cumulative: 기존 상태를 유지하면서 레이어를 순차적으로 하이라이팅
- iterative: 한번에 하나의 레이어만 하이라이팅
- Replace: 다른 심볼로 교체
- 다른 심볼처럼 레이어 별로 혹은 전체로 애니매이션이 가능
- 방향 개념이 있다.
- down/up: 사용자 입력을 따라서 자연스럽게 전환
- up/up: 연속적으로 진행되는 이벤트를 나타내기 좋음
- 이러한 프리셋들은 인터페이스와 사람간의 커뮤니케이션을 위한 도구로써 사용자 경험을 강화시킨다.
- 하지만 인터페이스의 기능적인 면과의 밸런스를 잘 맞춰야한다. 언제나 기능이 먼저다.
- Drawing for animations
- 작년에 다뤘던 Layer System대로 그리기
- 자세한 건 Create animated symbols 세션 보기
- New Symbols
- 자동차, 게이밍, EV Plug, Weather 등의 700+ 심볼추가