SF Symbol이란?

SF Symbols는 Apple에서 제공하는 기호 글꼴입니다. iOS등에서의 사용을 염두에 있어서 디자인되고 있어 개발의 장면에서 사용하는 일도 많을까 생각합니다.

SwiftUI이라면 다음과 같이 사용할 수 있습니다.

SymbolSample.swift

import SwiftUI

struct SymbolTest: View {
    var body: some View {
      Image(systemName: "face.smiling")
    }
}

각종 Modifier를 사용해 색이나 크기를 바꿀 수 있고, 그대로 다크 모드에도 대응할 수 있는 것이 강점입니다. 한층 더 숫자를 포함한 심볼은 현지화에 대응하고 있으므로, 해외 전개를 생각한다면 적극적으로 채용해도 좋을지도 모릅니다.

기본적으로 공식 사이트에서 목록의 앱을 얻고 원하는 것을 찾게 될 것입니다. iOS의 버전에 따라서는 사용할 수 없는 것도 있다고 해도, 잇달아 심볼이 추가되고 있습니다.

다만, UI로서 사용하는 경우에는 많은 사람이 익숙한 것을 사용하는 것이 조작하기 쉬운 것은 분명합니다.
그래서 독단적이지만 자주 보는 심볼의 이름을 정리해 보았습니다.

공유 버튼

square.and.arrow.up

주로 무언가를 공유할 때 사용되는 기호입니다. 대부분의 SF Symbols는 이에 국한되지 않으며 이름 끝에 .fill를 추가하여 채워진 것으로 변경할 수 있습니다. 왼쪽의 채우기 없음이 많이 사용되고 있다고 생각하네요.

제출 버튼

paperplane

TextField 옆에 배치되거나 전송 버튼에 사용되는 경우가 많습니다. 이쪽은 채우기 있는 것이 메이저일지도 모릅니다.

다운로드

arrow.down.to.line

이쪽도 잘 보이네요. 실은 2 종류 있어, 알기 어렵습니다만 오른쪽의 .alt 쪽이 약간 화살표가 길어지고 있습니다.

설정

기어

이곳은 설정 화면을 나타낼 때 자주 사용되는 기어의 디자인입니다. 다만, 보다 단순한 디자인의 gearshape 는 iOS14 이상에서 밖에 사용할 수 없는 모양.

검색

magnifyingglass

검색을 나타낼 때 돋보기와 같은 디자인. 이미지 이외에도 많은 변형이 있으므로, 검색하는 콘텐츠마다 구분해도 좋을지도 모르겠네요.

기록, 최근 항목

시계

자주 있는 기능입니다만, 주로 시계의 디자인으로 표현되는 것이 많습니다. 예를 들어 Mac의 Finder의 "최근 항목"에는 이것이 사용됩니다. 가장 오른쪽의 clock.arrow.circlepath는 iOS14 이상 대응이지만 비슷한 것이 Spotify에서 사용되고있었습니다.

마지막으로

아이콘 이미지를 프로젝트에 추가하거나 하지 않아도 되는 것이 편리하네요. 또, 디폴트의 앱과 같은 의미로 사용하면 조작의 용이함으로 이어질까 생각합니다.
SF Symbols는 앞으로도 추가될 것 같아서 기대됩니다!