iOS 이미지 리소스 자동화

iOS 개발자라면 누구나 겪는 이미지 리소스 관리의 번거로움을, 자동화 스크립트 하나로 해결한 사례다.

해상도와 테마(라이트/다크 모드)에 따라 수십 개씩 생성되는 PNG 파일을 .imageset 폴더와 Contents.json으로 자동 변환하여, Xcode의 .xcassets 구조에 맞게 일괄 처리할 수 있도록 한 것이 핵심이다.

1. 기존 문제점

• 하나의 버튼 이미지도 4개(2x, 3x, 다크/라이트 각 2개)씩 파일이 필요
• 디자이너가 보낸 수십 개 이미지 → 수백 개 파일 수작업 정리
• 실수 유발, 반복 작업, 생산성 저하

2. Xcode의 이미지 리소스 구조 이

Xcode는 .xcassets라는 리소스 카탈로그 시스템을 사용한다.

예를 들어, some_button이라는 이미지를 등록하면:

Image.xcassets/
└── some_button.imageset/
    ├── some_button@2x.png
    ├── some_button_dark@3x.png
    └── Contents.json

여기서 Contents.json이 각 PNG가 어떤 해상도, 어떤 테마에 해당하는지를 지정한다.

예시 구조:

{
  "images": [
    {
      "filename": "some_button@2x.png",
      "scale": "2x",
      "idiom": "universal"
    },
    {
      "filename": "some_button_dark@3x.png",
      "scale": "3x",
      "idiom": "universal",
      "appearances": [
        { "appearance": "luminosity", "value": "dark" }
      ]
    }
  ],
  "info": {
    "author": "xcode",
    "version": 1
  }
}

3. 자동화 전략

✔️ 파일명 규칙 활용

파일명을 기반으로 메타 정보를 추출:

• btn_call@2x.png → btn_call, 2x, light
• btn_call_dark@3x.png → btn_call, 3x, dark

✔️ 자동화 프로세스

1. 파일 이름에서 base_name, scale, 테마 추출
2. 같은 base_name끼리 그룹화
3. 이미지와 JSON 메타 생성
4. .imageset 폴더 + Contents.json 자동 생성
5. .xcassets에 복사 → Xcode에서 즉시 사용 가능

💡 주요 함수 설명

def extract_details(filename):
    # 파일명에서 base_name, scale, 테마 추출

def group_png_files(source_folder):
    # 모든 PNG를 base_name 기준으로 그룹화

def create_image_info(filename, scale, appearance):
    # Contents.json에 들어갈 메타 정보 생성

def convert_image_groups_to_imageset(image_groups, destination_folder):
    # 자동 복사 및 JSON 생성

4. 실제 사용 흐름

image_groups = group_png_files(source_folder)
convert_image_groups_to_imageset(image_groups, destination_folder)

결과 및 효과

✅ 실수 없이 수백 개 이미지 일괄 처리

✅ 테마/해상도 별 .imageset 생성 자동화

✅ 디자이너와의 협업 효율성 대폭 향상

✅ 개발자는 반복 작업 대신 로직 개발에 집중 가능

이미지 리소스를 사람이 직접 정리하던 시대는 끝났습니다. 이제는 스크립트로 ‘딸깍’ 한 번이면 끝입니다.

이 사례는 단순한 코드 스니펫을 넘어, UX 품질과 개발 생산성을 동시에 높일 수 있는 자동화 실천 예시로 매우 우수하다.

특히 .xcassets 구조를 명확히 이해하고, 이를 기반으로 자동화한 점은 모든 iOS 개발팀이 벤치마킹할 만한 실무 노하우다.

국내 모바일 개발 현장에서도 디자이너-개발자 간 협업을 구조화하기 위한 도구로 적극 활용될 수 있으며, 향후 디자인-개발 통합 빌드 파이프라인 구성의 초석으로 삼을 수 있다.

TI Tech Lab 김준수 연구원

Source

• https://devotee.kr/articles/226
• https://developer.apple.com/library/archive/documentation/Xcode/Reference/xcode_ref-Asset_Catalog_Format/