WWDC 2020 | SF Symbols 2

https://developer.apple.com/videos/play/wwdc2020/10207/


San Franscisco 폰트와 어울리도록 만든 로고가 바로 SFSymbols
– 물론 SFPro 등 SanFrancisco 계열의 다른 폰트와도 잘 어울린다.

SF Symbol Scale

알파벳 대・소문자 상관없이 잘 어울리도록 디자인되었다.

모든 Symbol이 동일한 기준으로 small, Medium, Large로 나뉘어지는 것이 아니다.
Symbol마다 선의 두께도 다르고 같은 small이라도 symbol에 따라 두께가 다르다.

같은 Symbol이라도 사이즈는 비율이 커지는 것이지 선의 굵기는 동일하다 ( 인간의 눈의 착시)

글씨 크기와 Symbol Scale의 상관관계
– California, Favorite, Songs의 글씨크기는 모두 동일하다. 다른건 배경색과 Symbol의 Scale.

다양한 곳에서 SFSymbols를 활용할 수 있다

@Sketch

SFSymbols App에서 필요한 Symbol을 cmd + C 로 복사해서 Text 로 붙여넣기 할 수 있다.
– Sketch에서는 Text로 인식된다.


@UIKit

UIImage(systemName: "play.fill")

– SFSymbol App에서 Symbol name 을 복사해서 사용
– Symbol을 그대로 복사해서 넣는건 안된다 ,,,,,,, ! (2년 뒤 쯤에는 될 것 같은 느낌적인 느낌)

– Scale과 함께 textStyle을 정의하면 사용자가 설정한 문자사이즈 스케일과 함께 Symbol Scale도 유동적으로 바뀐다.

– SFSymbol을 NSImage로 사용할 수 있게 되었다



@SwiftUI

– 2020 릴리즈된 SwiftUI부터 Label에서 systemImage로 SFSymbol을 바로 넣는게 가능하다


Additions and refinements

– 다양한 카테고리의 Symbol이 약 750개 이상 추가되었다.
– SFSymbol App에서 카테고리가 제공되고 나만의 폴더를 만드는 것도 가능하다.

Localization

Right -> Left

지역에 따라 글씨 방향이 Left->Right 가 기준인 곳이 있고, Right -> Left인 곳도 있다.


@Xcode

언어별 설정
글씨 방향

Localization 을 사용하기 위해서는 Asset catalog에서 assign을 해야만 사용할 수 있다


Deployment targets

SF Symbol 자체가 사용가능한 버전은 iOS 13 ~

– Symbol별 사용가능한 버전이 SFSymbol에 표시되어 있다 (사용하기전에 꼭 꼭 확인해보기)

Color

– multi-color symbol 이 2020년부터 사용할 수 있게 되었다 (iOS 14 ~)


@Xcode



Layout with SFSymbols

Symbol은 각각의 사이즈를 갖는다.
= 모든 Symbol을 동일한 Padding으로 Layout을 설정하는건 옳지 않다 ㅠㅠ


Symbol+Text의 경우, Base line에 집착하지 말자. 함께 Label으로 정의하면 알아서 해준다.
Symbol들끼리의 비율을 맞추자.
Symbol들이이 세로/가로 로 정렬되어있는 경우에는 중앙정렬만 설정하자

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중