SF Symbols. 개발자와 디자이너를 위한 Custom Symbol 만드는 법
“SF Symbols”은 Apple이 개발자와 디자이너를 위한 새로운 디자인 리소스 도구로 WWDC 2019에서 처음 소개되었다.
위 링크에서 SF Symbols app을 다운로드 할 수 있다. macOS catalina이상만 설치가 가능하므로 참고하길 바란다.
설치가 끝나면
Applications에 위와 같은 앱이 추가가 되어있는 것을 볼 수 있을 것이다.
열면 앱에서 사용 할 수 있는 1500가지가 넘는 symbol set들을 볼 수 있다.
Apple은 SF Symbols을 San Francisco system font와 완벽하게 통합하도록 설계하였기 때문에 모든 weight와 size의 text와 광학 수직 정렬을 자동으로 보장한다.
위 그림에서 볼 수 있듯이 SF Symbols은 다양한 weight와 scale로 제공되기 때문에 adaptable design을 만들기 용이하다.
좀 더 자세히 살펴보자.
SF Symbols은 9개의 weight을 제공한다. (ultralight 부터 black까지.) 이는 San Francisco system font의 각 weight에 해당한다.
또한 small, medium, large의 3가지 scale로도 제공된다. scale은 San Francisco system font의 cap height를 기준으로 정의된다.
개발자가 이 SF Symbols에 있는 symbol을 사용하려면 iOS 13+, watchOS 6+, tvOS 13+ 이어야 한다. 모두 Xcode 11이상이 필요하다.
Xcode11이상 이라면, 디자이너는 symbol 이름만 말해주면 개발자는 해당 symbol을 사용 할 수 있다.
person.crop.circle을 사용해달라고 디자이너가 요청했다면, 개발자는
이렇게만 하면 해당 symbol을 사용 할 수 있다.
당연히 SF Symbols에 없는 커스텀 아이콘을 사용해야 할 때도 있을 것이다.
Apple의 Human Interface Guidelines에 따르면, iOS 13이상에서는 SF Symbols을 이용 할 것을 권장하고 있다.
즉, 나만의 Symbol을 만들 수 있다는 소리다.
커스텀 Symbol을 만들고 싶으면,
- 만들고자 하는 디자인과 유사한 SF Symbol을 export한다. (일부 symbol은 export할 수 없음. https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/ 참고)
2. Sketch 또는 Illustrator와 같은 벡터 편집 도구를 사용하여 해당 템플릿을 수정한다.
본격적으로 만들어보기 전에, custom symbol을 만들 때 주의해야 할 점이 있다.
- 단순한
- 인식 할 수 있는
- 불쾌하지 않은(공격적이지 않은)
- 그 symbol이 나타내는 행동이나 내용과 직접적인 관련이 있는
symbol을 만들어야 한다.
또한, 광범위한 text setting을 지원한다면, 앱에 필요한 만큼 많은 weight와 scale로 custom symbol을 만들어야 한다.
bold text setting을 활성화하고 Dynamic Type을 지원하려면 모든 scale에서 regular, medium, semibold 그리고 bold를 만들어야 한다.
당연한 이야기겠지만, Apple products를 복제해서는 안된다.
그리고 custom symbol에 대한 alternative text labels을 제공해야한다. alternative text labels은 보이지는 않지만, Voice Over를 통해 화면의 내용을 음성으로 설명할 수 있어 시각 장애가 있는 사용자가 쉽게 탐색할 수 있다.
그럼 본격적으로 custom symbol을 만들어보자.
여기에 다 나와있지만, 나는 잘 이해를 못하겠다. 그래서 차근차근 해볼 생각이다.
먼저 내가 원하는 디자인과 비슷한 symbol을 하나 골라 export해야한다.
딱히 원하는 디자인은 없지만, 제일 만만한..symbol을 하나 골라보자.
다행히도 suit.heart는 템플릿으로 export해도 되는 symbol이다.
export를 해보자. suit.heart를 클릭하고,
메뉴의 Export Custom Symbol Template을 클릭한다. (또는 command + E)
편한데다 export해주자.
export를 하고 나면
이렇게 생긴다. (템플릿은 SVG format으로 나온다.)
클릭해서 atom으로 열어보면
이런 xml 코드들을 볼 수 있다.
그렇다면 벡터 편집 도구인..Sketch로 열면 어떻게 될까
이렇게 된다.
이제 내가 원하는…….원…하는..
디자인을…그리면 된다.
ㅋㅋ
아무튼 디자인은 중요한게 아니다. 오늘 공부할 건 Custom Symbol을 만드는 방법이다.
대충 해주고
이름을 바꿔준다.
그리고
export를 SVG로 해준다.
성공적으로 export가 되었으면, 이제는 써볼 차례이다.
개발자는 디자이너에게 이 SVG파일을 받으면, Xcode의 assets폴더에 가서
New Symbol Image Set을 눌러준다.
그리고
여기에 우리가 방금 만든 zedd.heart SVG파일을 드래그 앤 드롭 해준다.
만들다 만 symbol이 잘 들어온 것을 확인 할 수 있다.
이름을 바꿔주고,
간단하게
이렇게 호출이 가능하다.
SwiftUI에서는
이렇게.
오른쪽 preview에 잘 나오는 것을 확인 할 수 있다.
추가로. 역시 내 예상이 맞았다. symbol의 기본 configuration은
scale: Medium, weight: Regular다. (실험을 통해 확인 함)
이 Image의 Configuration을 바꾸는 방법은 정말 많다.
바로 UIImage의 SymbolConfiguration의 생성자를 이용하는것이다.
이만큼이나..있다.
쉬운거 아무거나 해보자.
이렇게 configuration을 만들고, UIImage의 생성자에 넣어주기만 하면
이렇게 black weight에 맞게 나온다.
왜 가운데에 별이 없냐고?
내가 만들다 말았기 때문이다.
(절대 귀찮아서가 ㅏ아님을 밝힌다.)
UIImage의 생성자말고도 UIImage의 withConfiguration메소드를 이용해 configuration을 적용 할 수 있다.
이렇게.
자, 위에서 이 SF Symbol은 iOS 13+에서만 사용할 수 있다는 것을 알았다.
그럼 iOS 13이전 버전은?
이 부분에 대해서 자세히 알아보자.
실제로 같은 이름의 이미지를 가질 수 있다. 그리고 여기엔 3가지 버전이 있을 수 있다.
“zedd.heart”라는 이름으로 예를 들어보자.
- “zedd.heart”라는 system symbol이 있을 수 있다.
- “zedd.heart”라는 custom symbol이 있을 수 있다.
- “zedd.heart”라는 symbol이 아닌 일반 이미지가 있을 수 있다.
1번의 경우, 접근하는 API가 2, 3번과 다르다.
1번의 경우
UIImage(systemName: ) API를 통해 접근한다.
2, 3번의 경우,
UIImage(named:)로 가져올 수 있다.
UIImage(systemName: )을 통해 system symbol이 아닌 symbol과 image를 얻어올 수 없으며,
반대로 UIImage(named:) API를 통해 system symbol을 얻어올 수 없다.
그러니 1번과 2, 3번은 충돌할 일이 없다.
완전히 분리되어있기 때문이다.
하지만, UIImage(named:)의 경우 좀 다르다.
먼저 priority가 존재한다. 그래서 Xcode는 symbol image를 먼저 찾게 된다.
만약 symbol image에서 “zedd.heart”라는 symbol을 못찾으면, 다음으로
symbol이 아닌 image를 찾게 되는 것이다.
자. 만약 2번과 3번이 동시에 있으면 어떻게 할까?
이런 상황이다.
“zedd.heart”라는 symbol이 아닌 일반 이미지가 있고,
“zedd.heart”라는 symbol image가 있다.
좋은 소식은
이 코드는 iOS 13+에서는 symbol image를 불러오고,
iOS 13이전에서는 일반 이미지를 불러온다는 것이다.
왼쪽의 12.2에서는 symbol이 아닌 일반 이미지가, 13.3에서는 symbol 이미지가 나온 것을 확인 할 수 있다. 지금은 이미지가 너무 달라서..좋은 예가 아니지만 일반적으로는 보기에는 똑같은 이미지 일 것이다.
iOS 13+에서 왼쪽 이미지. 그러니까 symbol이 아닌 이미지를 굳이 사용하고 싶다면 이미지를 복제하거나 이름을 바꿔야 한다.
자. 오늘은 이렇게 SF Symbols에 대한 간단한 소개와 custom symbol을 만드는 방법에 대해서 알아보았다. 그리고 다시 한 번..디자이너 분들을 존경하게 되었다.
결론 : SF Symbol을 쓰지 않을 이유가 없다.
참고
