SF Symbols 및 소소한 변경사항들

안녕하세요 :) Zedd입니다.

음 제목을 지금 한 5분동안 고민중인데, 이걸 도대체 뭐라고 지어야 할지 모르겠네요.

Xcode 11 달라진 점인가..? 음.............

그냥 오브젝트 라이브러리 열면 여러 view와 control들이 나오잖아요?..달라진게 몇개있어서...

그냥 그걸 보고싶은건데..

제목..뭐지....걍 할게요?

음.........뭐라하지!?!?

아 그리구 여ㅛ러분 제가 Xcode 11 beta release note글을 업데이트 했어요. 봐주세요,,,

이 변화를 누군가는 알아차렸으면 좋겠어....

암튼 non-SwiftUI프로젝트를 만들겠습니다. 즉..main.storyboard가 있겠군요..

Xcode 11 beta 글에서도 말했듯이 

오브젝트, 미디어 라이브러리 같은게 합쳐졌습니다. 

1. Object library

그냥 늘 보던 그거 ㅇㅇ

2. image library

여기서 궁금증이 드실겁니다.

엥/??? 나 asset 아무것도 안넣었는디 얘네 뭔데

이건 디자이너분들에게 좋은 소식이라고 저는 생각이 드는데..?!?! 아 물론 저에게도 정말 반가운 기능이에요!

https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

요약하자면, 이번에 애플이 개발자와 디자니어를 위한 위한 새로운 도구로 Design Resource를 크게 업데아트 했습니다! 그 중 하나인게 SF Symbol인데요,  

SF Symbols은 앱에서 사용 할 수 있는 1500가지가 넘는 symbol set을 제공합니다. 

Apple은 샌프란시스코 시스템 폰트와 완벽하게 통합되도록 SF Symbols를 설계했고, symbol은 모든 weight와 size의 텍스트에 대해 광학 수직 정렬(?optical vertical alignment)을 자동으로 보장합니다.

 

iOS 13이상, watchOS 6이상 및 tvOS 13이상에서 실행되는 앱에서 SF Symbols을 사용 할 수 있구요. 전체 symbol set을 탐색하고 싶다면.....SF Symbol앱을 다운받아야 합니다!!!!!!

제가 파일을 올리면 너무 좀 그런것 같아서

https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

요기 중간에 앱 다운로드 링크가 있어요. 

+ ) 본인 macOS가 카탈리나가 아니면 다운 받아도 설치못하니까..참고하세요

SF Symbols은 ultralight부터 black까지 총 9가지의 weight가 있어요. 이 각각은 샌프란시스코 시스템 글꼴의 weight에 해당됩니다. 

위 그림의 가로 축을 보시면 될 것 같아요.

세로에는 s, m, l로 scale도 있는 것을 볼 수 있습니다. 이 스케일은 샌프란시스코 글꼴의 cap height를 기준으로 정의된다고 해요.

아~~~나 진짜 

나 카탈리나 아니어서 그런건가..? 집가서 다운받아 봐야겠어요.

+ ) 

집에 왔습니당. 카탈리나 맥북으로 다시 다운 받아볼까요?

오..이제 이런것도 물어보네요. 아까 모하비에서는 걍 다운받아졌는디

오 역시 다운받아 지는군..

!!!!

이거랑

이게 있네요.

일부 symbol은 Apple기술을 참조하는 데에만 사용 할 수 있으며 custom을 위한 템플릿으로 export될 수 없다고 해요. 약관도 적용되고 그렇다니까 

자세한 내용은 https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/ 하단을 참고하세요.

그럼 안써볼 수 없지

저걸 누르고 드래그하면 View에 올라가게 됩니다.

당연히 imageView구요.

즉 이말은 모다..?

그냥 ImageView추가하고

이렇게도 된다...

하./...진짜................저같은 디자인 1도 모르는 개발자를 위한....애플....애플 진짜 사랑해ㅠ

제 마음입니다만..

;;;

자 암튼 아까 위에서 이야기한 weight와 scale을 이야기해볼까요?

face id 저 이미지를 클릭해줍시다.

그럼 옆에 Symbol configuration이라는게 나옵니다.

이런게 있고

Point Size와 Font가 있네요..!!

미안.....무슨 차이지?.......

뭐 암튼 제가 하고싶은 말은,..,..

아마도 이 configuration을 사용해서

이걸 나타낼 수 있다는 말 같아요!?...

3. Color library

?!

제가......몰랐는데.,,이미 있었던 기능이었군요.,.

asset에 가서

New Color Set.

이름은..

Zedd

자 다시 가봅시다.

응 생겼어~~~

암튼 뭐 이런거고 ㄴ원래 있었던 기능...입니다! 전 한번도 안써서 몰랐지만요!ㅎ 암튼 이것도 합쳐졌나봐요

자..뭐 대충 봤고,..이제 봐야할건..달라진 view 및 control들...

- Segmented control

달라졌군요. 

근데 원래 이런거 놓고나서 constraint안주고 

그냥 놓기만 했을때는 warning이나 그런게 안떴던거 같은데

이런게 뜨네요?

ㅎ

ㅡ

ㅁ

stepper의 디자인도 바뀌었군요. 

아 참고로..?

원래 segmented control과 stepper입니다.

오?? 뭔가 작동하는 애니메이션? 같은것도 달라진 것 같아요zzz

뭔가 더 깔-끔 해졌군..

그리고 충격적인 사실..

modal의 뜨는 스타일(?) 이 바뀌었습니다. 전체를 덮지 않고, 뭔가......현재있는 view가 뒤로 가면서........아니.....

ㅎ

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

열려는 viewController가 NavigationController면

그러하다.

push는 정상이군요.......

갑자기....???라는 생각도 들 수 있겠지만

mail앱은..이미..그래....이미 이랬고, 이 UI를 이제 다 따르게 하게 만든게 아닌가..?싶어요!

HIG가 이때다 싶어서 업데이트 한 것 같지만...아닙니다. 원래 이랬어요. 

지금 HIG의 modality가보면 위 사진이 있고...

https://zeddios.tistory.com/11 

저의 2017년 글을 보면..zzzzzz와 11번째 글이었네...

암튼....무려 2017년 1월글인대ㅔ...

ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 

2017년(또는 그 이전)부터 계획하고 있었을지도...? 순전히 제 추측입니다!?!?!?

애플이 의도한 modal의 의도?..에는 지금 바뀐 UI가 더 적합한건 맞는 것 같아요.

하하

하지만 더 충격적이고 사랑스러운 사실이 남았습니다. 

사

랑

해

요

애

플

아니....진짜 애플답지 않나요

 저 statusBar fade애니메이션으로 바뀌는거 보세요..

아니...진짜...후...

암튼 중요한건..밑으로 끝까지 pan gesture를 하면 dismiss가 된다는거 ㅎㅎㅎ