[swift] SwiftGen을 이용한 디자인 시스템 구축

이번 글에서는 SwiftGen이라는 도구를 사용하여 디자인 시스템을 구축하는 방법에 대해 알아보겠습니다. SwiftGen은 코드 생성 도구로, 리소스 파일을 읽어와서 해당 파일들에 대한 타입 안전한 코드를 생성해줍니다.

1. SwiftGen 설치

SwiftGen을 사용하기 위해서는 우선 프로젝트에 SwiftGen을 설치해야 합니다. SwiftGen은 CocoaPods, Carthage 또는 SPM을 통해 설치할 수 있습니다. 각각의 설치 방법은 다음과 같습니다.

CocoaPods를 사용하여 SwiftGen 설치

# Podfile
platform :ios, '11.0'

target 'MyApp' do
  use_frameworks!
  
  pod 'SwiftGen', '~> 6.0'
end

Carthage를 사용하여 SwiftGen 설치

$ brew install carthage

그리고, Cartfile에 다음과 같이 추가합니다.

github "SwiftGen/SwiftGen" ~> 6.0

위의 명령을 실행한 뒤에는 carthage update 명령을 실행하여 SwiftGen을 설치합니다.

SPM을 사용하여 SwiftGen 설치

SwiftGen을 설치하기 위해서는 Xcode 12 이상이 필요합니다. 다음 명령을 통해 SwiftGen을 설치할 수 있습니다.

$ swift package init --type executable

2. SwiftGen 사용법

SwiftGen을 설치한 후에는 스크립트를 통해 리소스 파일로부터 코드를 생성할 수 있습니다. 가장 기본적인 사용법은 다음과 같습니다.

$ swiftgen

스크립트를 실행하면 swiftgen.yml 파일을 찾고, 해당 파일에 정의된 설정에 따라 코드를 생성합니다.

3. 디자인 시스템 구축 예제

디자인 시스템을 구축하기 위해서는 스타일 가이드, 컬러 팔레트, 아이콘 등 다양한 리소스 파일이 필요합니다. 이 예제에서는 아이콘 리소스 파일로부터 코드를 생성하는 방법을 알아보겠습니다.

3.1 아이콘 리소스 파일 생성

먼저, icons라는 디렉토리를 프로젝트에 생성하고, 해당 디렉토리에 아이콘 리소스 파일들을 추가합니다. 예를 들어, heart.png, star.png, check.png 각각의 아이콘 파일을 icons 디렉토리에 추가합니다.

3.2 SwiftGen 설정 파일 생성

다음으로, SwiftGen 설정 파일인 swiftgen.yml을 프로젝트 루트 디렉토리에 생성합니다. 아래는 예시입니다.

# swiftgen.yml
assets:
  inputs:
    - icons
  outputs:
    templateName: swift5
    params:
      outletName: R.image

위의 설정 파일은 icons 디렉토리로부터 코드를 생성하고, 생성된 코드를 R.image에 저장하도록 설정한 것입니다.

3.3 코드 생성

터미널에서 SwiftGen 스크립트를 실행하여 코드를 생성합니다.

$ swiftgen

위 명령을 실행하면 아이콘 리소스 파일로부터 타입 안전한 코드가 생성되어 R.image에 저장됩니다.

4. 결론

이번 글에서는 SwiftGen을 이용하여 디자인 시스템을 구축하는 방법에 대해 알아보았습니다. SwiftGen을 활용하면 리소스 파일들로부터 타입 안전한 코드를 생성할 수 있어 개발 과정에서의 실수를 미연에 방지할 수 있습니다. SwiftGen은 다양한 기능을 지원하므로 프로젝트에 맞게 적절한 설정을 만들어 활용해보시기 바랍니다.

참고 자료