Figma / PSD 핸드오프 체크리스트: 게임 UI 디자인이 재작업을 피하는 방법

엔지니어링이 UI를 재작업할 때, 절반은 미적인 문제가 아니라 핸드오프가 엔진 요구사항을 충족하지 못하기 때문입니다. Figma나 Photoshop에서 프레임을 수정하면 엔지니어링은 다시 슬라이싱하고.

아래는 높은 의도의 시나리오를 아우르는 핸드오프 전 체크리스트입니다: Figma export Unity, PSD import Unity UI, game UI slicing, 이벤트 리스킨, 다국어 UI. 마지막 섹션에서는 “PNG만”과 구조적 내보내기의 차이를 설명합니다. 도구는 참고 지점일 뿐.

---

엔지니어링이 실제로 필요로 하는 것

필요한 것	아닌 것
이름이 지정된 계층 구조 (버튼, 패널, 리스트 아이템)	전체 화면 JPG 하나
버튼 normal / pressed / disabled	“클릭 가능해 보이는” 이미지 하나
교체 가능한 텍스트 레이어	모든 것이 디스플레이 서체로 래스터화됨
상대 위치와 앵커 의미론	레이아웃 참고 이미지 + 낱개 PNG 20개
재사용 가능한 프리팹 구조	이벤트마다 처음부터 재구축

한 줄 인수 테스트: Unity UGUI / Godot Control / Cocos UI에 임포트한 후, 문구를 바꾸거나 리스킨할 때 전체 트리를 재구축할 필요가 없어야 합니다.

---

핸드오프 전 12가지 점검

구조와 네이밍

#	점검	비고
1	의미 있는 Frame / 그룹 이름	Panel_Shop, Btn_Buy—Group 12가 아님
2	인터랙티브 레이어와 장식 레이어 분리	배경, 테두리, 아이콘, 텍스트
3	리스트 아이템을 재사용 가능한 그룹으로	List_Item은 복제 가능
4	초안과 폐기된 Frame 숨기기	내보내기 노이즈 감소

상태와 사양

#	점검	비고
5	전체 버튼 상태	normal / pressed / disabled (또는 팀 네이밍 규칙)
6	9-slice / 늘어나는 영역 표시	패널과 입력은 하드 스케일하면 안 됨
7	목표 해상도와 안전 영역	세로 모바일: 노치와 하단 바
8	폰트 전략	현지화용 텍스트 레이어; 디스플레이 서체는 별도 표기

라이브옵스와 현지화

#	점검	비고
9	문구 길이 여유	독일어 / 스페인어는 영어보다 30%+ 긴 경우가 많음
10	리스킨 = 시각만	이벤트 스킨: 동일 레이아웃, 새 아트와 색상
11	현지화: 문구 vs 레이아웃	이상적: 동일 구조, 여러 언어 파일
12	내보내기 형식 문서화	레이어드 PSD / Figma 링크, 또는 합의된 슬라이스 네이밍

Figma 준비: Figma → Unity 워크플로. PSD 준비: 5분 만에 PSD를 Unity UI로 임포트.

---

세 가지 핸드오프 경로 (객관적 비교)

경로	접근법	적합한 경우	문제점
A. 수동 슬라이싱	PNG + 레이아웃 스크린샷 내보내기; 엔지니어링이 수작업 구축	최소 UI, 일회성 데모	수정할 때마다 재슬라이싱과 재구축
B. 엔진 플러그인	Figma Converter, Psd-Exporter 등	사양이 고정된 팀	멀티 엔진은 종종 재작업 필요; 플러그인 품질 편차
C. 구조적 캔버스	레이어드 파일 → 게임 캔버스 → 제자리 분할 → Prefab 내보내기	다중 화면 UI, 잦은 리스킨 / 글로벌 출시	게임 지향 내보내기 흐름 도입 필요

경로 C는 VberAI Studio 같은 제품에서 흔합니다: PSD / Figma 파싱 → 레이아웃 보존 UI 분할 → Unity / Godot / Cocos로 내보내기 (게임 UI를 엔진으로 분할 참조). 디자이너는 여전히 Figma에서 작업할 수 있습니다; 승인 후에는 수정마다 PNG 20개를 수동으로 내보내는 대신 구조적 내보내기를 사용하세요.

---

디자이너의 흔한 시나리오

게임 UI 슬라이싱 / 제자리 분할

전체 화면 컨셉이 PNG만 있으면 엔지니어링은 버튼 경계를 추측합니다. 더 안전한 흐름: 화면을 캔버스에 놓기 → 컨트롤을 제자리에서 분할 (제자리 슬라이싱)하여 위치 데이터가 분할과 함께 이동하게 하세요—“슬라이스는 맞아 보이지만 엔진에서 전부 어긋나는” 상황을 피하세요.

Figma에서 Unity / Godot로 내보내기

플러그인이 평면 스프라이트 팩만 출력한다면 엔지니어링은 여전히 RectTransform / Control 트리를 재구축합니다. 평가할 때 물어보세요: 결과물이 Prefab / 계층 구조인가, 아니면 낱개 이미지 zip인가? Godot 비교: Figma → Godot 수동 vs AI 워크플로.

게임 UI 리스킨 (시즌 / 이벤트)

할로윈, 크리스마스 등: 동일 레이아웃, 새 테마 에셋. 리스킨마다 재슬라이싱과 재구축이 필요하다면 라이브옵스 주기가 느려집니다. 리스킨 도구는 노드 구조를 변경하지 않고 유지해야 합니다 (UI 리스킨과 테마 변형).

게임 UI 번역 / Figma 다국어

글로벌 출시 함정: 번역된 문구가 레이아웃을 넘칩니다. 이상적 흐름: 문자열만 교체하고 Frame은 재배치하지 않음 (원클릭 UI 번역). Figma에서는 Auto Layout에 최소/최대 너비를 사용해 여유를 확보하세요.

아이콘과 반투명 에셋

스킬 아이콘과 VFX UI는 임포트 전에 배경 제거가 필요한 경우가 많습니다 (머리카락, 투명도, 글로우). 일반 매팅은 가장자리를 흐리게 만듭니다; 게임 지향 도구는 알파를 강조합니다 (글로우 / VFX 매팅).

---

이것이 AI 이미지 도구와 어떻게 관련되는가

Midjourney, Jimeng, GPT Image 2 등은 시각적 방향에 좋습니다; 목적지가 엔진이라면 여전히 분할과 계층 구조가 필요합니다. 흔한 조합:

AI 전체 화면 UI 컨셉 → 디자이너가 Figma에서 레이어 정리 → 엔진으로 구조적 내보내기

“포스터급 단일 이미지”를 최종 핸드오프로 취급하지 마세요. 도구 비교: AI 게임 디자인 아트 생성기.

---

FAQ

PNG만 핸드오프해도 되나요? 데모에는 괜찮습니다; 프로덕션 UI는 반복적으로 재작업됩니다. 최소한 레이아웃 노트와 네이밍 규칙을 첨부하세요.

Figma Auto Layout이 완벽해야 하나요? 웹처럼 완벽할 필요는 없습니다—하지만 그룹화와 네이밍이 픽셀 미세 조정보다 더 중요합니다.

엔지니어링이 “슬라이스가 잘못됐다”고 할 때 무슨 뜻인가요? 보통: 상태 누락.

리스킨 vs UI 재작업? 리스킨: 동일 구조.

디자이너가 Unity를 배워야 하나요? 스크립팅은 아니지만—Canvas / Anchor / Prefab 기초는 커뮤니케이션 비용을 크게 줄여줍니다.

VberAI Studio는 Google AI Studio와 같은가요? 아니요. 전자는 게임 캔버스와 엔진 내보내기이고; 후자는 Google의 범용 AI 개발 환경입니다. 비교를 참조하세요.