AI Studio로 5분 만에 PSD를 Unity UI로 가져오는 방법

PSD에서 Unity UI로의 전환이 여전히 팀을 느리게 하는 이유

대부분의 게임 UI는 여전히 Photoshop에서 시작됩니다. 디자이너는 버튼, 패널, 아이콘, 텍스트 스타일이 포함된 레이어드 PSD를 전달하고, 엔지니어는 동일한 계층 구조를 Unity 내부에서 Canvas, RectTransform, Image, TextMeshPro, 중첩 프리팹으로 재구축하는 데 몇 시간을 소비합니다.

목표는 단순히 “픽셀을 엔진에 넣는 것”이 아닙니다. 다음이 필요합니다:

• 올바른 레이어 계층 구조와 이름 지정
• 다양한 해상도에서도 유지되는 앵커 및 안전 영역
• 일회성 씬 오브젝트가 아닌 재사용 가능한 프리팹
• PSD가 변경될 때 반복할 수 있는 경로

이 가이드는 VberAI Studio—디자인-엔진 파이프라인을 위한 VberAI의 AI Studio(왼쪽에 PSD/Figma, 오른쪽에 엔진 준비 완료 출력)를 사용한 5분 가져오기 워크플로우를 보여줍니다. 또한 가져오기가 깨끗하게 유지되도록 PSD에서 준비해야 할 사항도 다룹니다.

시작 전에 필요한 것

Unity를 열기 전에 다음을 준비하세요:

• Unity 2022.3 LTS 또는 Unity 6 (UI Toolkit은 선택 사항; 이 가이드는 uGUI에 중점을 둠)
• 레이어드 PSD (평면화된 PNG 내보내기가 아님)
• VberAI의 VberAI Studio (AI Studio)
• 씬에 Canvas가 있는 빈 프로젝트 또는 기존 Unity 프로젝트 (Scale With Screen Size 권장)

PSD 위생 체크리스트 (시간을 가장 많이 절약):

관행	중요한 이유
레이어 그룹당 논리적 위젯 하나	프리팹 루트에 깔끔하게 매핑
일관된 이름 (Btn_Start, Panel_HUD)	Unity Hierarchy에서 찾기 쉬움
Photoshop이 예측 불가능하게 병합하는 효과 피하기	Image 컴포넌트에서 수동 수정 감소
@1x로 내보내거나 배율 문서화	과도한 RectTransform 방지

AI Studio를 사용한 5분 워크플로우

1분 — 레이어 업로드 및 검사

1. AI Studio를 열고 PSD에서 새 가져오기를 생성합니다.
2. .psd 파일을 업로드합니다.
3. 레이어 패널에서 그룹이 UI 블록(헤더, 푸터, 버튼 행, 팝업)과 일치하는지 확인합니다.

AI Studio는 역공학해야 하는 단일 텍스처 아틀라스를 제공하는 대신 PSD 구조를 보존합니다.

2분 — 캔버스에서 미리 보기

1. 루트 아트보드 또는 메인 화면 그룹을 선택합니다.
2. 중앙 캔버스를 사용하여 간격, 글꼴 및 오버레이 순서를 확인합니다.
3. 인스펙터에서 명백한 문제를 수정합니다 (그룹 이름 변경, 디버그 레이어 숨기기).

레이어가 명확히 장식용인지 인터랙티브인지 지금 태그하거나 그룹화하면 Unity에서 정리 작업이 줄어듭니다.

3분 — Unity UI 의미론에 매핑

내보내기 설정에서:

• 대상 엔진: Unity
• 출력 유형: UI 프리팹 / 씬 준비 계층 구조 (원시 스프라이트만이 아님)
• 가능하면 텍스트 레이어에 TextMeshPro 선호
• 9-slice 후보(패널, 버튼)를 크기 조정 가능한 이미지로 유지

AI Studio는 디자인 레이어를 엔진 개념으로 변환합니다: RectTransform 레이아웃, Image 스프라이트, 텍스트 컴포넌트—단순히 Canvas에 놓인 평면화된 PNG가 아닙니다.

4분 — Unity로 내보내기

1. Export to Unity를 클릭합니다 (또는 Studio 워크플로우에 따라 Unity 패키지 / 프로젝트 패치를 다운로드).
2. Unity에서 패키지를 Assets/UI/ (또는 팀 폴더 규칙)로 가져옵니다.
3. 생성된 프리팹을 열어 Canvas 자식과 앵커를 확인합니다.

PSD 그룹을 미러링하는 프리팹 계층 구조가 표시되어 기존 Canvas 아래로 드래그할 준비가 됩니다.

5분 — 씬에 배치하고 스모크 테스트

1. 프리팹을 씬 Canvas로 드래그합니다.
2. Play Mode로 전환하고 16:9 및 긴 휴대폰 화면 비율에서 테스트합니다.
3. 앵커 또는 글꼴 대체 문제를 기록하고, 아직 PSD 왕복이 아닌 프리팹 모드에서 조정합니다.

또한 편집기 자동화를 위해 Unity MCP를 사용하는 경우, 가져온 후 AI 클라이언트에 노드 일괄 이름 변경 또는 버튼 참조 연결을 요청할 수 있습니다—PSD에 Group 47과 같은 일반적인 레이어 이름이 있을 때 유용합니다.

수동 대안 (AI Studio를 건너뛸 때)

자동화 없이 고전적인 경로는 다음과 같습니다:

1. Photoshop에서 슬라이스를 PNG로 내보내기
2. Unity에서 스프라이트 가져오기
3. Image / Text 오브젝트를 수동으로 생성
4. RectTransform 앵커로 레이아웃 재구축

단일 화면에 종종 30–90분이 소요되므로, 반복적인 UI 작업에 디자인-엔진 도구를 채택하는 이유입니다.

가져온 후 일반적인 수정 사항

텍스트가 잘못 보임 — 디자인 언어와 일치하는 TMP 폰트 에셋을 할당하세요; 대체 폰트는 종종 Photoshop과 다릅니다.

기기에서 UI가 흐릿함 — Canvas Reference Resolution 및 스프라이트 Pixels Per Unit을 확인하세요; 작은 아이콘을 100% 이상으로 확대하지 마세요.

버튼이 클릭되지 않음 — Canvas에 Graphic Raycaster가 있고 인터랙티브 Image에 Raycast Target이 활성화되어 있는지 확인하세요.

iPhone에서 안전 영역 잘림 — 프리팹 루트에 루트 Safe Area 레이아웃 그룹 또는 패딩을 추가하세요.

다시 가져올 때 vs Unity에서 패치할 때

상황	권장 사항
디자이너가 버튼 2개의 색상을 변경	Unity에서 프리팹 패치
레이아웃 재구성 (새 메뉴 탭)	AI Studio에서 PSD 다시 가져오기
새 화면 추가	새 PSD 아트보드 → 새 프리팹
현지화 추가	Unity에서 TMP + 문자열 테이블 선호

레이아웃의 소스로 PSD를 유지하고, Unity에서 연결 및 동작을 처리하면 병합 문제를 피할 수 있습니다.

VberAI 스택에 맞추는 방법

VberAI Studio는 디자인 → Unity UI 구조를 처리합니다. Unity MCP (선택 사항)는 가져온 후 반복적인 편집기 작업—버튼 연결, 스프라이트 교체, 프리팹 참조 검증—을 스크립팅하는 데 도움이 됩니다. AI Super Matting은 아이콘 레이어가 Image 컴포넌트가 되기 전에 깨끗한 알파가 필요할 때 유용합니다.

함께 사용하면 아티스트가 이미 사용하는 디자인 도구인 Photoshop을 버리지 않고도 목업에서 플레이 가능한 UI로의 루프를 단축할 수 있습니다.

결론

PSD를 단일 이미지가 아닌 구조화된 데이터로 취급하고 AI Studio를 사용하여 수동 RectTransform 작업 대신 Unity 준비 계층 구조를 생성하면 5분 안에 PSD를 Unity UI로 가져오는 것이 현실적입니다. 이름이 지정된 레이어 그룹을 준비하고, Unity UI 의미론으로 내보내고, 프리팹을 Canvas 아래에 놓고, 두 가지 화면 비율로 스모크 테스트하세요.

다음 화면에서 시도해 볼 준비가 되셨나요? VberAI Studio를 열고 레이어드 PSD를 업로드하고 한 번에 첫 Unity UI 프리팹을 내보내세요.