📱 [SwiftUI] SF Symbols: 아이콘 다루기

🏎️💨 안녕하세요, 이서입니다. 이번 시간에는 SF Symbols에 대해서 포스팅하려 해요.

개요

SF Symbols은 Apple에서 제공하는 벡터 기반 아이콘 라이브러리로, iOS, macOS, watchOS 및 tvOS 애플리케이션에서 사용할 수 있어요. 이 라이브러리는 다양한 아이콘과 기호를 포함하고 있어 개발자들은 앱 디자인을 향상시키고 일관된 UI를 구성하는 데 활용할 수 있어요.

SF Symbols은 시스템 글꼴과 함께 제공되어 확장성이 뛰어나며, 기기의 환경 설정에 따라 자동으로 다크 모드와 다른 주제에 맞게 아이콘을 조정해요. 또한 색상 및 크기를 쉽게 사용자 정의할 수 있으며, 다양한 레이어를 조합하여 새로운 커스텀 아이콘을 만들 수도 있어요. SF Symbols를 사용하면 일관된 UI/UX를 제공하고 앱 디자인을 빠르게 구축할 수 있답니다 😎!

사용 방법

1. SF Symbols 공식 홈페이지에서 다운로드해주세요.

   SF Symbols - Apple Developer

   🥸 2023.10.02 기준 SF Symbols 5는 Beta 버전으로 출시되어있어요. 5버전으로 진행해도 되지만, 이번 포스팅에서는 4버전을 기준으로 작성하도록 할게요!

2. 설치를 해주신 이후 SF Symbols.app 을 실행해요.

3. 원하는 아이콘을 선택하고 우클릭 이후 1개의 이름 복사를 클릭해요.

4. Image 뷰의 systemName을 이용하여 아이콘은 렌더링해요.

아이콘의 크기의 경우 resizable() 방법을 이용할 수도 있고, 폰트 사이즈를 조정하는 방법도 있어요.

Image(systemName: "checkmark.square.fill") // systemName 인자에 조금 전 복사한 이름을 붙여 넣기 해요.
    .resizable() // 이미지 크기를 사이즈 조정 가능하도록 변경
    .foregroundColor(.blue) // 색상 변경
    .frame(width: 100, height: 100) // 아이콘 크기 설정

Image(systemName: "checkmark.square.fill")
    .font(.system(size: 100))
    .foregroundColor(.red)

마무리

SF Symbols를 사용하면 쉽고 간편하고 빠르게 애플리케이션에 아이콘을 추가할 수 있어요. 개발할 떄 필요한 아이콘과 이미지 파일들을 찾는데 시간 소비를 줄일 수 있다는게 가장 큰 장점인 것 같아요. SF Symbols를 활용하여 개발 효율성을 높이고 일관된 UI를 제공하여 보다 사용자 친화적인 경험을 제공해보아요 😆.