해당 포스트는 이 글을 참고하여 작성하였습니다.

개요

이미지 출처

오늘은 파이썬 스크립트를 사용해 figma에서 안드로이드 해상도별 이미지 추출을 반자동화해보겠습니다.

Android에서 png 파일을 관리하려면 해상도별 폴더를 생성하여 5개의 파일을 관리해야 합니다. 최근 사이드 프로젝트를 시작하면서, 이미지 에셋을 png 파일로 추출하는 일이 늘어났습니다. 반복작업을 별로 안 좋아하는 저는 쉘 스크립트로 이미지 추출 작업을 자동화한 글을 보고, 파이썬으로 자동화 코드를 만들어 보았습니다.

원래 Figma에서 png asset을 추출하는 순서는 다음과 같습니다.

1. Figma에서 png파일 크기별로 추출하기
2. res 폴더에 drawable-hdpi, drawable-xhdpi, drawable-xxhdpi, drawable-xxxhdpi 폴더 생성하기
3. 추출한 파일의 이름을 동일한 이름으로 바꾼 후 각 해상도 폴더에 넣기

이번 포스팅에서 소개하는 파이썬을 활용한 방법은 2, 3번 과정을 자동화합니다.

사용 방법

1. 프로젝트 루트에 새 폴더 하나를 생성하고 파이썬 파일을 함께 넣습니다. 폴더 이름과 파일 이름은 상관 없습니다. 저는 icon 폴더에 export.py를 생성했습니다.

from pathlib import Path
import os
import shutil
import re

def check(file):
    pattern = '[^a-z0-9_]'
    if re.findall(pattern, new_file):
        print("리소스 이름에는 소문자, 숫자, _만 들어갈 수 있습니다")
        exit(0)

new_file = input()
check(new_file)
new_file += '.png'

work_dir = Path(__file__).parent
src_dir = Path(__file__).parent.parent

mdpi_dir = os.path.join(src_dir, 'app/src/main/res/drawable')
hdpi_dir = os.path.join(src_dir, 'app/src/main/res/drawable-hdpi')
xhdpi_dir = os.path.join(src_dir, 'app/src/main/res/drawable-xhdpi')
xxhdpi_dir = os.path.join(src_dir, 'app/src/main/res/drawable-xxhdpi')
xxxhdpi_dir = os.path.join(src_dir, 'app/src/main/res/drawable-xxxhdpi')

def create_directory(dir_list):
    for dir in dir_list:
        try:
            if not os.path.exists(dir):
                os.makedirs(dir)
        except OSError:
            print("오류: 새 디렉토리를 만드는데 실패했습니다")


def work():
    for _, _, files in os.walk(work_dir):
        for file in files:
            file_name, file_extension = os.path.splitext(file)
            if file_extension == '.png':
                if '@1.5x' in file_name:
                    shutil.copy(os.path.join(work_dir, file), os.path.join(hdpi_dir, new_file))
                elif '@2x' in file_name:
                    shutil.copy(os.path.join(work_dir, file), os.path.join(xhdpi_dir, new_file))
                elif '@3x' in file_name:
                    shutil.copy(os.path.join(work_dir, file), os.path.join(xxhdpi_dir, new_file))
                elif '@4x' in file_name:
                    shutil.copy(os.path.join(work_dir, file), os.path.join(xxxhdpi_dir, new_file))
                else:
                    shutil.copy(os.path.join(work_dir, file), os.path.join(mdpi_dir, new_file))

def delete_all():
    for _, _, files in os.walk(work_dir):
        for file in files:
            _, file_extension = os.path.splitext(file)
            if file_extension == '.png':
                os.remove(os.path.join(work_dir, file))

create_directory([mdpi_dir, hdpi_dir, xhdpi_dir, xxhdpi_dir, xxxhdpi_dir])
work()
delete_all()

2. Figma에서 필요한 에셋을 크기별로 추출한 후 파이썬 파일이 있는 폴더에 넣습니다.
   
   +버튼을 누르면 자동으로 생성되는 x1, x2, x3 세 개의 파일만 추출해도 무방합니다.

3. 안드로이드 스튜디오로 들어가 터미널에서 파이선 파일이 있는 폴더로 이동 후 파이썬 파일을 실행시키고 이미지 파일의 이름을 짓습니다.
   

>>> cd [폴더명]
>>> python [파이썬 파일 이름]
>>> [이미지 에셋 이름]

4. drawable 폴더에 잘 들어간 것을 확인합니다.
   

효과 및 주의점

이 방법을 사용하였을 때 시간이 얼마나 줄어 들었는지 비교해 보았습니다. 수동으로 파일을 추출하면 1분이 조금 넘게 걸리는데 파이썬 스크립트를 사용하니 15초가 걸렸습니다. 즉, 시간이 약 70% 감소했다는 것입니다!!!👏👏👏

주의할 점은 저는 파이썬을 최고로 잘 다루는 천재가 아니기 때문에 오류가 발생할 수 있습니다. 그러니 VCS로 항상 파일이 잘 들어갔는지 체크하는 것을 당부드립니다.