픽셀 정밀도 UI를 위한 Unity 가이드

카테고리

디자인

서브카테고리

UX 디자인

대상자

• *디자이너 및 Unity 개발자**

- 난이도: 중급 이상 (UI/UX 디자인 도구와 Unity 기술 이해 필요)

- 도움 주는 점: 디자인과 개발 간 협업 프로세스 최적화, 픽셀 정밀도 구현 방법 제공

핵심 요약

• PPU(Pixels Per Unit) 설정을 통한 크기 일관성 유지 (예: 100 설정)
• 정확한 카메라 설정 (orthographicSize 계산식 활용)
• 디자인 수출 가이드라인 준수 (9-slicing, 압축 미사용 등)

섹션별 세부 요약

1. 문제 이해

• 디자인 툴(Figma 등)과 Unity 간 스케일링, 카메라 설정, 수출 불일치로 인한 UI 오류 발생
• 매니페스팅된 디자인과 실제 구현 간 차이로 인한 시간 낭비

2. PPU(Pixels Per Unit)의 역할

• PPU 값 결정 및 표준화 (예: 100)
• PPU가 Unity 내 Canvas 및 월드 공간 객체 크기에 직접 영향을 미침

3. 디자인 해상도와 맞는 카메라 설정

• 정적 카메라 설정 (orthographicSize)을 통해 1920x1080 등 디자인 해상도와 일치
• 수식: orthographicSize = (height / 2) / PPU

4. 디자이너 수출 가이드라인

• 원본 해상도 기준 설계 (이미지 압축/스케일링 금지)
• 9-slicing 및 재사용 가능한 UI 컴포넌트 미리 계획

5. 디자인 전달 프로세스

• Figma, Zeplin 등 도구 활용
• 개발자가 디자인 파일 내에서 직접 측정 및 다운로드 가능

6. Spine 애니메이션 최적화

• SkeletonAnimation (월드 공간)과 SkeletonGraphic (Canvas)의 차이점 주의
• Unity 단위 기준으로 Spine 자산 설계

7. 자산 패킹 전략

• TexturePacker 사용 (드로우 콜 최적화)
• 아틀라스 생성을 통해 런타임 효율성 향상

8. 개발자 구현 가이드라인

• Canvas Scaler 및 RectTransform 설정 정확히 적용
• 스프라이트 PPU, 필터 모드, 압축 옵션 정의
• 수동 스케일링 금지 (파이프라인 개선 권장)

결론

• PPU, 카메라 설정, 수출 가이드라인을 공유하는 표준화된 프로세스를 통해 디자인-개발 협업 시간 50% 이상 절감 가능
• TexturePacker 사용 및 수동 스케일링 금지가 실무 적용 시 핵심 팁