GUI

1. 핵심 안내

• 에셋은 모바일 플랫폼에 최적화되어 있습니다.
• 각 GUI 에셋은 지원하는 UI 요소, 파일 구성, 데모 씬 수가 서로 다를 수 있습니다.
• GUI Pro Pack과 GUI Pack의 차이점

2. DemoScene

2-1. Canvas Scaler 해상도 확인

• 데모 씬의 해상도는 GUI 팩마다 다르게 설계되어 있습니다.
• Hierarchy 창에서 Canvas 오브젝트를 선택한 뒤, Inspector의 Canvas Scaler 컴포넌트에서 기준 해상도를 확인할 수 있습니다.

2-2. Game View 해상도 설정

1. 각 에셋의 데모 씬에 설정된 Canvas Scaler 기준 해상도를 확인합니다.

1. Unity Editor의 Game 뷰에서 데모 씬의 Canvas Scaler 해상도와 정확히 일치하도록 해상도를 설정합니다.

데모 씬은 특정 해상도를 기준으로 구성되어 있으므로, 동일한 Game View 해상도를 사용하면 의도된 레이아웃을 더 정확하게 미리볼 수 있습니다.

실제 프로젝트에 적용할 때는 프로젝트 요구 사항과 대상 기기에 맞춰 해상도 및 Canvas Scaler 설정을 다시 구성해야 합니다.

참고 영상

*[video omitted: %E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8_2024-10-31_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_8.24.57.mov]*

2-3. Panel Control

• 데모 씬의 Panel Control은 사용자 편의를 위해 켜고 끌 수 있습니다.
• Panel Control을 사용하면 Game 창의 플레이 모드에서 샘플 씬을 빠르게 전환하고 확인할 수 있습니다.

참고 영상

*[video omitted: %E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8_2024-10-31_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_8.07.57.mov]*

2-4. Unity 6.3 Input System 설정

Unity 6.3에서 Input System 충돌이 발생하는 경우, 씬의 기존 StandaloneInputModule을 InputSystemUIInputModule로 교체해야 합니다.

• Hierarchy에서 EventSystem을 선택한 뒤, Inspector에서 "Replace with InputSystemUIInputModule"을 클릭합니다.

3. Prefabs

3-1. Prefab 위치

• 데모 씬에 사용된 UI 요소는 개별 프리팹으로 제작되어 있으며, Prefabs 폴더에서 확인할 수 있습니다.

3-2. Prefab 미리보기

• 모든 UI 프리팹을 한 번에 확인하려면 "_PrefabsPanel_xx" 형식의 프리팹 카탈로그 파일을 더블클릭하세요.

• 개별 UI 프리팹을 확인하려면 해당 프리팹을 더블클릭하면 됩니다. 그러면 씬에서 해당 프리팹을 볼 수 있습니다.
• 더블클릭 후 오브젝트가 씬에 보이지 않는 경우, 단축키 'F'를 눌러 선택한 오브젝트에 포커스를 맞추세요.

참고 영상

*[video omitted: %E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8_2024-11-04_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_12.17.06.mov]*

3-3. Prefab 사용 방법

1. 사용할 프리팹을 Hierarchy 창의 Canvas 아래로 드래그 앤 드롭합니다.

UI 프리팹은 Canvas의 하위 오브젝트로 배치해야 정상적으로 사용할 수 있습니다.

1. 배치한 오브젝트를 우클릭하고 'Prefab -> Unpack'을 선택합니다.

1. 프로젝트에 맞게 UI를 수정합니다.

이 과정을 거치면 프로젝트에서 수정한 내용이 원본 프리팹 에셋에 영향을 주지 않습니다.

참고 영상

*[video omitted: %E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8_2024-11-04_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_4.41.20.mov]*

4. Sprites

4-1. 기본 정보

• 모든 PNG 이미지는 Sprites 폴더 안에 위치합니다.

4-2. Core Icons

• Core 아이콘 세트는 여러 크기로 제공됩니다.
• Core 아이콘의 종류, 수량, 크기는 에셋마다 다르며, 각 에셋의 개요 이미지에서 미리 확인할 수 있습니다.

• Core 아이콘은 'ResourcesData/Sprites/Components/' 경로에 위치합니다.

4-3. Demo Icons 및 기타 아이콘

• 데모 씬에서 샘플로 사용되는 아이콘은 미리 정해진 크기로 제공됩니다.
• 이 크기는 데모 씬 레이아웃에 맞춰 설계된 고정 크기입니다.
• 래스터 그래픽 특성상 이러한 아이콘을 크게 확대하면 품질이 저하될 수 있습니다.

• Core 아이콘 이외의 아이콘은 다음 경로에서 확인할 수 있습니다:

5. 커스터마이징

5-1. 크기 조정 가능한 9-Patch Sprites

개요

• LayerLab GUI 에셋의 많은 UI 이미지는 9-patch 사용을 고려하여 제작되었습니다.
• 9-patch 스프라이트는 이미지를 9개 영역으로 나누어, 모서리 형태를 유지하면서 특정 영역만 늘릴 수 있게 해줍니다. 이를 통해 품질 손실을 줄이면서 프로젝트에 맞게 UI 크기를 유연하게 조정할 수 있습니다.

• 팁: Rect Tool(단축키: T)을 사용해 Canvas에서 직접 크기를 조정하거나, Inspector에서 Width와 Height 값을 수정하세요.

가로 및 세로 제한 사항

• 9-patch 스프라이트는 각 영역의 border 값을 기준으로 크기를 확장합니다. 따라서 모서리 디자인이나 장식 형태에 따라 가로 방향 또는 세로 방향으로만 안정적인 크기 조정이 가능할 수 있습니다.

형태 제한 사항

• 원형 또는 육각형 형태는 9개의 영역으로 나누기 어렵기 때문에 9-slice 스케일링과 잘 맞지 않습니다.
• 이러한 형태의 이미지는 Image Type을 'Simple'로 설정한 뒤 크기를 수동으로 조정하세요.
• 모든 래스터 이미지와 마찬가지로 원본 크기의 2배 이상 확대하면 품질 손실이 발생할 수 있습니다. 원본 PNG 크기가 작은 경우에는 품질 저하가 더 눈에 띌 수 있습니다.

• 팁: 비율을 유지하려면 Scale 도구(단축키: R)를 사용해 Canvas에서 직접 크기를 조정하거나, Inspector에서 Scale 값을 수정하세요.

참고 영상

*[video omitted: %E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8_2024-11-05_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_6.09.39.mov]*

5-2. White Sprites를 이용한 색상 변경

• White 스프라이트는 프로젝트 스타일에 맞춰 색상을 커스터마이징할 수 있습니다. 이를 활용하면 UI 전체의 색상 팔레트를 손쉽게 조정하고, 프로젝트 분위기에 맞는 일관된 UI를 만들 수 있습니다.

💡

• 에셋 팩마다 White 스프라이트 지원 범위가 다릅니다.
• 2022년 이후 출시된 에셋은 대부분 White 스프라이트를 지원합니다. 그 이전에 출시된 일부 에셋은 지정된 고정 색상의 스프라이트만 포함할 수 있습니다.
• 커스터마이징이 어려운 고정 색상 스프라이트

이미 고유 색상이 지정된 스프라이트는 Unity 안에서 자유롭게 색을 바꾸기 어렵습니다. 이 경우 Photoshop을 사용해 PNG 색상을 직접 수정할 수 있습니다.

1. 색상 변경

Photoshop에서 PNG 파일을 열고 'Image → Adjustments > Hue/Saturation' 메뉴를 사용해 색상을 조정합니다.

이 방법은 초보자도 쉽게 사용할 수 있지만, 세밀한 색 보정이나 고품질 디자인 작업에는 한계가 있을 수 있습니다.

*[video omitted: %E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8_2024-11-04_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_6.38.34.mov]*

1. PNG로 내보내기

작업한 이미지를 PNG로 저장하려면 'File → Quick Export as PNG' 옵션을 사용하세요.

• White Sprites

• 색상 변경 방법

• 단일 스프라이트 UI Prefab

• 레이어드 스프라이트 UI Prefab

참고 영상

*[video omitted: 11.mov]*

6. Texts

6-1. 폰트 정보

• 에셋에 포함된 샘플 텍스트는 모든 언어를 지원하지 않으며, 기본적으로 영어 기준으로 제공됩니다.
• LayerLab GUI 에셋의 데모 씬과 레이아웃에는 샘플용 무료 폰트가 사용되었습니다. 실제 프로젝트에 샘플 폰트를 사용할 때는 반드시 라이선스를 확인해 주세요.

💡

폰트 사용에 대한 중요 안내
각 팩의 txt 가이드에는 TextMeshPro에 사용된 폰트의 출처와 라이선스 링크가 포함되어 있습니다. 프로젝트에 폰트를 적용하기 전, 사용자가 직접 폰트 저작권 조건을 확인하고 준수해야 합니다.

상업적으로 사용할 권리 또는 권한이 있는지 반드시 확인하세요.

적절한 폰트 라이선스 확인은 게임 개발에서 중요한 절차이며, 향후 발생할 수 있는 법적 문제를 예방하는 데 도움이 됩니다.

⚠️ LayerLab은 디자인 에셋을 제공하는 회사이며, GUI 에셋에 샘플로 포함된 폰트 사용으로 인해 발생하는 법적 문제에 대해 책임을 지지 않습니다.

6-2. Text Mesh Pro

• 텍스트 렌더링에는 TextMeshPro를 사용하여 UI의 시각적 품질과 성능을 높입니다.
• 텍스트 오브젝트를 선택하고 Inspector에서 외곽선, 그림자 등 세부 디자인 요소를 조정할 수 있습니다.
• 상품 미리보기 이미지는 Photoshop에서 제작되었습니다. Photoshop은 정교한 이미지 디자인에 특화된 도구입니다.

6-3. TMP 리소스 가져오기 방법

에셋 임포트 후 TextMeshPro가 정상적으로 설치되지 않은 경우:
1. Unity 메뉴에서 Window > TextMeshPro > Import TMP Essential Resources로 이동합니다.
2. 필요한 리소스를 선택하고 다시 임포트합니다.

6-4. 외곽선 비트맵 샘플 텍스트

• 일부 GUI 에셋의 데모 타일에는 비트맵 TextMeshPro를 사용하는 외곽선 스타일 텍스트가 포함되어 있습니다.
• 이 폰트는 비트맵으로 생성되기 때문에 텍스트 크기를 크게 키우면 품질이 저하될 수 있습니다. 이를 보완하기 위해 여러 크기의 폰트를 제공합니다.
• 폰트 이름 뒤의 숫자(32, 40, 50, 54, 64, 72, 120, 210)는 폰트 크기를 의미합니다. 같은 이름의 폰트는 동일한 알파벳과 기호를 포함하며 크기만 다릅니다.
• 작업할 텍스트 크기와 비슷한 폰트 크기를 선택하면 이미지 품질 저하를 줄일 수 있습니다.

• 일부 GUI 에셋의 데모 타일에는 비트맵 TextMeshPro를 사용하는 외곽선 스타일 텍스트가 포함되어 있습니다.
• 이 폰트는 비트맵으로 생성되기 때문에 텍스트 크기를 크게 키우면 품질이 저하될 수 있습니다. 이를 보완하기 위해 여러 크기의 폰트를 제공합니다.
• 폰트 이름 뒤의 숫자(32, 40, 50, 54, 64, 72, 120, 210)는 폰트 크기를 의미합니다. 같은 이름의 폰트는 동일한 알파벳과 기호를 포함하며 크기만 다릅니다.
• 작업할 텍스트 크기와 비슷한 폰트 크기를 선택하면 이미지 품질 저하를 줄일 수 있습니다.

7. UI Atlas의 텍스처 크기 처리 방식

실제 프로젝트에서는 개별 UI 이미지 리소스를 하나의 atlas 이미지로 묶어 사용하는 것을 권장합니다.


atlas 이미지 크기는 일반적으로 2의 거듭제곱 크기(1024x1024, 2048x2048, 4096x4096)로 구성됩니다.

이를 통해 빌드 크기를 줄이고 렌더링 성능을 향상시킬 수 있습니다.

Unity 공식 Sprite Atlas 가이드

Sprite Atlas 개요

Unity의 Sprite Atlas는 여러 개의 개별 텍스처 또는 스프라이트를 하나의 큰 텍스처로 묶는 에셋입니다. 이를 사용하면 여러 번 발생하는 드로우 콜을 줄여 빌드 크기와 렌더링 성능을 최적화할 수 있습니다.

✅ 공식 링크 : https://docs.unity3d.com/2021.3/Documentation/Manual/class-SpriteAtlas.html

● (+PSD) Pack 사용 가이드

• 식별 방법
• 속도를 위한 패키징
• 파일 가져오기

중요 안내:

PSD 파일 지원은 (+PSD) 팩을 구매한 고객에게만 제공됩니다. PSD가 포함되지 않은 일반 팩을 구매한 경우 이러한 파일은 포함되어 있지 않습니다. 올바른 리소스에 접근할 수 있는지 구매 내역을 확인하세요.

• 일부 GUI 에셋의 데모 타일에는 비트맵 TextMeshPro를 사용하는 외곽선 스타일 텍스트가 포함되어 있습니다.
• 이 폰트는 비트맵으로 생성되기 때문에 텍스트 크기를 크게 키우면 품질이 저하될 수 있습니다. 이를 보완하기 위해 여러 크기의 폰트를 제공합니다.
• 폰트 이름 뒤의 숫자(32, 40, 50, 54, 64, 72, 120, 210)는 폰트 크기를 의미합니다. 같은 이름의 폰트는 동일한 알파벳과 기호를 포함하며 크기만 다릅니다.
• 작업할 텍스트 크기와 비슷한 폰트 크기를 선택하면 이미지 품질 저하를 줄일 수 있습니다.

⬆️ 맨 위로 이동