PSD to Unity: AI로 Photoshop PSD 슬라이스 후 UGUI 프리팹 조립

VberAI Studio(줄여서 AI Studio, ≠ Google AI Studio)는 Unity UI 프로그래머가 PSD에서 실제로 필요로 하는 두 가지 작업을 수행합니다. 슬라이스(레이어가 사용 가능한 스프라이트가 됨)와 UI 프리팹 조립(Canvas 아래에 바로 놓을 수 있는 Unity UGUI 프리팹 내보내기)입니다. 여기서 시작하세요: AI Studio. 용어집: PSD.

“AI로 PSD를 슬라이스하고 UI 프리팹을 조립한다”는 것은 필터 요청이 아닙니다. 이는 곧: 디자이너가 레이어가 살아 있는 .psd를 넘겼을 때, 엔지니어링이 “PNG 내보내기 → Image 드래그 → 간격 맞추기 → 앵커 설정”을 건너뛸 수 있는가 하는 문제입니다.

즉 PSD to Unity UI prefab 인수인계입니다. Photoshop 그룹이 Canvas 아래 노드 트리가 되어야 합니다.

슬라이스와 프리팹 조립은 같은 단계가 아닙니다

작업	얻는 것	여전히 수동인 것
슬라이스만	PNG / 스프라이트 더미	Hierarchy에서 위치, 중첩, 앵커를 다시 구성
평면화 내보내기	배경 이미지 하나	버튼이 클릭되지 않음, 문구 편집 불가
슬라이스 + 프리팹 조립	스프라이트 그리고 Canvas 계층 / 프리팹	클릭, 데이터, 추가 safe-area 로직 연결

기존 파이프라인은 이 작업들을 분리합니다. Photoshop은 슬라이스하고, Unity는 조립합니다. 에디터 내 PSD2UGUI 스타일 플러그인은 Unity 안에서 파싱하며 보통 레이어 이름 규칙을 요구합니다. AI Studio는 게임 캔버스에서 파싱합니다. 계층을 확인한 뒤 프리팹을 내보냅니다. 낱개 파일을 쏟아내는 것이 아닙니다.

분 단위 임포트 목록은 PSD to Unity UI에 있습니다. 이 글은 합격 기준입니다. “조립됨”이 무엇을 의미하는지, 그리고 어떤 PSD가 깔끔하게 조립되지 않는지 다룹니다.

결과물은 UGUI에 바로 쓸 수 있어야 합니다

쓸 만한 변환은 다음을 모두 포함합니다.

1. 슬라이스된 아트 — 버튼 배경, 아이콘, 9-slice 패널이 각각 별도 Image로.
2. 텍스트 — 텍스처에 글리프를 구워 넣지 말고 TextMeshPro를 선호하세요(문구 변경과 로컬라이즈에 필요합니다).
3. 계층 — PSD 그룹과 대응하는 그룹 → 자식 구조. 모든 것을 Canvas 루트에 몰아넣지 않습니다.
4. 프리팹 — 기존 Canvas 위에 드래그. RectTransform이 대략 디자인 좌표와 일치합니다.

이것은 OnClick 핸들러, 빨간 점 로직, safe-area 스크립트, TMP 폰트 에셋, 아틀라스 규칙을 대체하지 않습니다. 이런 것들은 프리팹이 프로젝트에 들어온 뒤에 붙습니다. Unity MCP가 설치되어 있으면 Cursor / Claude Code가 노드 이름을 일괄 변경하고 참조를 연결할 수 있습니다.

PSD가 슬라이스되고 조립되려면 필요한 것

모델이 포스터를 보고 위젯을 추측하는 것이 아닙니다. 파일이 UI 구조에 가까울수록 프리팹이 더 깔끔해집니다.

이렇게 하세요	이유
그룹당 위젯 하나, 읽기 쉬운 이름(Btn_Start, Panel_HUD)	프리팹 루트 / 버튼 노드로 매핑됨
판, 아이콘, 텍스트를 별도 레이어로 유지	하나로 굽지 않고 Image / TMP가 됨
예측 불가능한 레이어 스타일과 이상한 블렌드 모드 피하기	그렇지 않으면 래스터 하나만 나오고 상호작용을 잃음
병합된 PNG가 아니라 레이어가 있는 .psd 전달	평면 합성은 인플레이스 슬라이스를 쓰며 PSD 그룹이 없음

Group 47, 완전히 래스터화된 파일, 그림자를 한 레이어에 찍어 넣은 경우는 여전히 캔버스나 Unity에서 정리가 필요합니다. 이는 구조가 빠진 것이지, 변환기가 실패한 것이 아닙니다.

AI Studio에서 하는 방법

버튼 라벨은 현재 패널을 따릅니다.

1. 레이어가 있는 PSD 임포트

AI Studio를 열고 .psd를 임포트하세요. 레이어 목록에서 상단 바, 하단 바, 다이얼로그, 버튼 그룹이 여전히 그룹인지—이미 평면화되지 않았는지 확인하세요.

2. 포스터가 아니라 UI로 읽기

그리기 순서, 간격, 숨겨진 마크업 레이어를 확인하세요. 내보내기 전에 클릭 가능한 컨트롤과 장식을 분리하세요. 깔끔한 알파를 위해 매팅을 연계하세요.

3. 스프라이트 덤프가 아니라 UGUI 프리팹 내보내기

엔진을 Unity로 설정하세요. UI 계층 / 프리팹을 선호하세요. 텍스트에는 TMP를 선호하고, 늘어나는 패널에는 9-slice를 유지하세요(패널별).

4. Canvas에 놓고 스모크 테스트

팀 폴더(예: Assets/UI/)로 임포트하고, 프리팹을 씬 Canvas 아래에 부모로 두세요. 16:9와 목표 세로 비율에서 한 번 플레이하고, 주요 경로를 클릭하세요.

같은 화면이 Figma에 있다면 Figma → Unity를 사용하세요. Godot / Cocos도 같은 캔버스를 공유합니다. 내보내기 대상만 바꾸면 됩니다. 컴포넌트 이름은 다릅니다(Control / Widget). 합격 검사는 동일합니다.

Unity에서 먼저 확인할 것

• 클릭이 빗나감 — Canvas에 Graphic Raycaster가 있고, 탭 가능한 Image에 Raycast Target이 켜져 있는지.
• 잘못된 타입 — Photoshop 서체가 아닐 때 TMP Font Asset을 지정하세요.
• 흐림 — 스프라이트 필터, Canvas Scaler, Pixels Per Unit. 작은 아이콘을 100% 넘게 확대하지 마세요.
• 앵커 드리프트 — 전체 채움과 가장자리 바를 각각 고정하세요. 노치를 PSD에 그리지 말고 엔진에서 safe area를 추가하세요.
• 새 PSD 리비전 — 레이아웃 재구성 → 프리팹 재내보내기. 버튼 색상 두 개 변경 → Unity에서 편집.

에디터 내 PSD-to-UGUI 플러그인과 비교

	에디터 내 PSD2UGUI / 이름 규칙 플러그인	VberAI Studio
실행 위치	Unity 에디터 창	브라우저 게임 캔버스
입력	대부분 해당 플러그인용으로 이름 붙인 PSD	PSD; 평면 합성은 인플레이스 슬라이스; Figma도 가능
내보낸 후	Unity 안에서 계속 제작	캔버스에서 편집, 분할, 매팅 후 프리팹 생성
로직	직접 작성하거나 자체 제작한 도구	프리팹이 프로젝트에 들어온 뒤 Unity MCP

플러그인은 이미 플러그인의 레이어 사양을 따르는 팀에 맞습니다. 캔버스는 여전히 시각적 검토와 Unity / Godot / Cocos 선택이 필요한 핸드오프에 맞습니다. 둘 다 평면화된 목업에 불과한 PSD를 고치지는 못합니다. 레이어를 만들거나 인플레이스 슬라이스를 사용하세요.

이런 팀에 맞습니다

레이어가 살아 있는 Photoshop 시안을 받는 인디·UI 프로그래머—「PNG만 자르고 RectTransform 맞추기」가 느리지만, 에디터 내 PSD2UGUI 네이밍 규칙에 아직 묶이고 싶지 않을 때.

경계

• 첫 내보내기가 출시 가능한 최종본인 경우는 드뭅니다. 폰트, 로케일, 모션, safe area는 여전히 프로젝트에서 마무리됩니다.
• 과한 레이어 스타일은 평면화될 수 있으며, 상호작용 컨트롤을 잃습니다.
• VberAI Studio ≠ Google AI Studio. 비교를 참고하세요.

마무리

“슬라이스 한 번 더”가 필요한 게 아닙니다. PSD 구조가 UGUI 프리팹 구조가 되는 것이 필요합니다. 슬라이스는 중간 단계입니다. Canvas에 놓고, 클릭하고, 문구를 편집할 수 있을 때 비로소 의미가 있습니다. AI Studio에서 레이어가 있는 PSD를 임포트하고, 프리팹을 내보낸 뒤, Unity에서 로직을 연결하세요.

자주 묻는 질문

“AI로 PSD를 슬라이스하고 UI 프리팹을 조립한다”는 무슨 뜻인가요?
두 작업을 동시에 합니다. 레이어는 스프라이트가 되고, PSD 그룹은 Unity UGUI 계층 / 프리팹이 됩니다. 스프라이트 덤프가 아닙니다.

VberAI가 PSD에서 UGUI 프리팹을 만들 수 있나요?
네. AI Studio에서 레이어가 있는 PSD를 임포트하고, Unity UI 계층 또는 프리팹을 내보내고(패널별), Canvas 아래에 부모로 둔 뒤 스모크 테스트하세요.

PNG 슬라이스와 어떻게 다른가요?
PNG 슬라이스는 좌표와 그룹을 잃습니다. 프리팹은 상대 레이아웃과 노드 트리를 유지하므로 엔지니어링 정렬이 줄어듭니다.

PSD에 레이어가 없으면요?
인플레이스 슬라이스로 컨트롤을 감지하세요. 이미 Figma나 레이어가 있는 PSD가 있다면 그 경로를 쓰지 마세요.

버튼 코드도 작성하나요?
아니요. 프리팹은 비주얼과 히트 영역을 담당합니다. 이벤트와 데이터는 스크립트 또는 Unity MCP를 통해 처리합니다.