버그 잡이

Tuist 삽질기 (3) - Asset추가 그리고 ResourceSynthesizer 본문

IOS

Tuist 삽질기 (3) - Asset추가 그리고 ResourceSynthesizer

버그잡이 2023. 5. 5. 19:45

 

오늘은 Tuist에서 Asset을 한번 추가해보고
Tuist에서 자동으로 에셋 카탈로그를 만들어주는 기능이 있는데 이에 대해서 알아보겠습니다.

 

Asset 추가하기

Asset을 추가하는 것은 간단합니다.

Xcode에서 하던 것처럼 Asset.xcasset 파일을 추가하고 이 안에 image, color 등의 리소스를 추가하면 됩니다.

그런데 Tuist는 여기서 한발 더 나아가 ResourceSynthesizer 라는 유용한 기능을 제공해줍니다.

 

ResourceSynthesizer

Tuist는 프로젝트를 생성할때 Resources/ 폴더 안에 image, color 등 리소스에 대한 에셋 카탈로그 즉, enum 클래스를 제공해줍니다.
Asset에 아래와 같이 이미지 리소스가 있다면

아래와 같은 enum 클래스를 자동으로 만들어 줍니다.

 

이를 활용하면 UIImage(named: "ic_pause") 로 접근하지 않고 아래 코드로 해당 리소스에 접근할 수 있습니다.

Asset.icPause.image

 

 

 

Target별로 다른 이름의 enum 클래스가 생긴다.

 

에셋 카탈로그는 각 target별로 다르게 생성되는데요.

그래서 에셋 카탈로그 생성 네이밍 규칙은 아래와 같습니다.

enum {TargetName}+Asset

 

그래서 Target이 "MyApp", "MyAppDev" 이렇게 두 개 있는 앱의 경우, 아래와 같이 두개의 enum class가 생깁니다.

enum MYAPPAsset {}
enum MYAPPDEVAsset {}

그래서 만약 코드단에서 MYAPPAsset.icPause.image로 접근한다면 MyApp 타켓에서는 잘 접근되겠지만 MyAppDev 타켓에서는 접근하지 못 하는 문제가 있습니다.


저는 MyAppDev에서도 같은 enum의 네임으로 이미지 리소스에 접근하고 싶은데
어떻게 해야할까요?

 

 

 

ResourceSynthesizers 커스텀 하기

에셋 칼탈로그는 결국 tuist에서 정한 규칙에 따라서 생성되는 것인데요. 그 규칙이 target 별로 다른 이름의 객체를 만들기 때문에 그렇습니다.

https://github.com/tuist/tuist/tree/main/Sources/TuistGenerator/Templates


tuist에서 제공하는 규칙을 그대로 사용하는 것이 아니라 커스텀 해서 에셋 카탈로그를 생성할 수 있습니다.

 

 

이를 위해서 필요한 것은 커스텀하게 작성한 Assets.stencil 파일입니다.
stencil은 "템플릿 엔진으로, 동적으로 생성되는 텍스트를 생성하기 위해 사용됩니다." 라고 나오네요.

동적으로 swift 객체를 만들 수 있게 도와주는 파일인 것 같습니다.

 

구체적인 문법은 잘 모르지만 위 링크에서 AssetsTemplate.swift를 보면 enum을 정의할때 Asset 앞에 뭔가를 붙이는 것을 알 수 있습니다.

'param.name' 이게 target 네임인 것 같습니다.

 

{% set enumName %}{{param.name}}Asset{% endset %}

 

{{param.name}}을 제거해주면 제가 원하는대로 Asset 이름으로 enum 클래스가 생성될 것 같네요.

{% set enumName %}Asset{% endset %}

 

그런데 이 파일을 어떻게 적용시킬 수 있을까요?

1. 프로젝트 Tuist 폴더에서 ResourceSynthesizers 폴더를 추가하고 수정한 Assets.stencil 을 추가합니다.



2. Project.swift 설정으로 돌아와서 아래 코드를 추가해줍니다.

 

default 설정이 아닌 제가 만든 Assets.stencil 파일의 규칙에 따라 에셋 카탈로그를 만들게 하는 것입니다.

resourceSynthesizers: [
	.custom(name: "Assets", parser: .assets, extensions: ["xcassets"]),
]

 

이렇게 설정해주면 결과 두 target에서 모두 아래와 같이 객체가 생성됩니다.

enum Asset {}

 

 

 

 

*참고

https://green1229.tistory.com/264

https://docs.tuist.io/guides/resources

반응형
Comments