Layer Store
가이드로 돌아가기

공통 가이드

GUI

LayerLab GUI 팩의 Canvas Scaler, 프리팹, 스프라이트, TextMeshPro, 커스터마이징 팁.

1. 주요 사항

  • 에셋은 모바일 플랫폼에 최적화되어 있습니다.
  • 각 에셋은 고유한 지원 요소와 파일 세트를 가지고 있습니다.
  • GUI Pro Pack과 GUI Pack의 차이점

2. DemoScene

2-1. Canvas Scaler 해상도

  • 데모 씬의 해상도는 각 GUI 팩마다 다르게 설계 및 구성되어 있습니다.
  • Hierarchy 창에서 Canvas 오브젝트를 선택한 후 Inspector의 Canvas Scaler 컴포넌트에서 해상도를 확인할 수 있습니다.
스크린샷 2024-11-05 오전 11.31.16.png

2-2. Game View 해상도 설정

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

스크린샷 2024-11-05 오전 10.01.51.png

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

데모 씬은 특정 해상도로 설정되어 있으므로, 이 설정을 사용하여 미리보기할 수 있습니다.

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

스크린샷 2024-11-01 오후 6.04.14.png

참고 영상

*[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 창의 플레이 모드에서 샘플 씬을 빠르게 탐색할 수 있습니다.
스크린샷 2024-11-05 오전 9.54.27.png

참고 영상

*[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 설정

씬에서 기존 StandaloneInputModule을 InputSystemUIInputModule로 교체하여 Unity 6.3의 Input System 충돌을 해결하는 방법입니다.

  • Hierarchy에서 EventSystem 클릭 > Inspector에서 "Replace with InputSystemUIInputModule" 클릭.
스크린샷 2026-02-13 오전 10.32.39.png 스크린샷 2026-02-13 오전 10.18.24.png 스크린샷 2026-02-13 오전 10.18.59.png

3. Prefabs

3-1. Prefab 위치

  • 데모 씬의 모든 UI 요소는 개별 프리팹으로 만들어져 있으며 Prefabs 폴더에 위치해 있습니다.
스크린샷 2024-11-05 오전 9.57.44.png

3-2. Prefab 미리보기

  • 모든 UI 프리팹을 한 번에 쉽게 확인하려면 "_PrefabsPanel_xx" 형식으로 명명된 프리팹 카탈로그 파일을 더블클릭하세요.
  • 개별 UI 프리팹을 보려면 각 UI 프리팹을 더블클릭하면 됩니다. 해당 프리팹이 씬에 표시됩니다.
  • 더블클릭 후 오브젝트가 씬에 나타나지 않으면 단축키 'F'를 눌러 포커스를 맞추세요.
스크린샷 2024-11-05 오전 11.45.41.png

참고 영상

*[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의 하위 오브젝트로 배치해야 합니다.

스크린샷 2024-11-05 오전 11.09.58.png

1. 드래그 앤 드롭으로 가져온 오브젝트를 우클릭하고 'Prefab -> Unpack'을 선택합니다.

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

이 과정을 따르면 프로젝트에서 변경한 내용이 원본 프리팹 에셋에 영향을 미치지 않습니다.

스크린샷 2024-11-05 오전 11.15.03.png

참고 영상

*[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 폴더 내에 위치해 있습니다.
스크린샷 2024-11-05 오후 12.31.23.png

4-2. Core Icons

  • Core 아이콘 세트는 여러 크기로 제공됩니다.
  • Core 아이콘의 종류, 수량 및 크기는 각 에셋마다 다르며, 에셋 개요에서 미리보기할 수 있습니다.
스크린샷 2024-11-04 오후 5.19.09.png 스크린샷 2024-11-04 오후 5.19.50.png
  • Core 아이콘은 'ResourcesData/Sprites/Components/'에 위치해 있습니다.
스크린샷 2024-11-04 오후 2.34.19.png

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

  • 데모 씬에서 샘플로 사용되는 아이콘은 미리 정해진 크기로 제공됩니다.
  • 이 크기는 데모 씬 레이아웃에 맞게 설계되었으며, 샘플에서 의도된 용도에 맞는 고정 치수를 가지고 있습니다.
  • 래스터 그래픽의 특성상, 이러한 아이콘을 크게 확대하면 품질이 저하될 수 있습니다.
  • Core 아이콘 이외의 아이콘은 다음 경로에 위치해 있습니다:
스크린샷 2024-11-04 오후 5.34.09.png

5. 커스터마이징

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

개요

  • LayerLab의 GUI 에셋은 대부분 9-patch를 고려하여 설계되었습니다.
  • 9-patch 스프라이트는 품질 손실 없이 프로젝트 요구에 맞게 유연하게 크기를 조정할 수 있습니다. 이미지를 9개의 영역으로 나누어 모서리의 무결성을 유지하면서 특정 영역만 늘릴 수 있어 다양한 UI 레이아웃에 적합합니다.
  • 팁: Rect Tool(단축키: T)을 사용하여 캔버스에서 크기를 조정하거나, Inspector에서 Width와 Height 값을 편집하세요.
스크린샷 2024-11-05 오후 5.11.31.png 스크린샷 2026-03-26 오후 3.55.21.png

가로 및 세로 제한 사항

  • 9-patch 스프라이트는 이미지를 9개로 분할하여 각 조각의 border 값을 기반으로 크기를 확장합니다. 따라서 각 모서리의 디자인에 따라 가로 또는 세로로만 크기 조정이 가능할 수 있습니다.
스크린샷 2024-11-05 오후 4.39.20.png 스크린샷 2024-11-05 오후 5.15.40.png

형태 제한 사항

  • 원형 또는 육각형 형태는 9개의 영역으로 분할할 수 없으며 9-slice 스케일링과 호환되지 않습니다.
  • 이러한 형태의 경우 Image Type을 'Simple'로 설정하고 크기를 수동으로 조정하세요.
  • 모든 래스터 이미지와 마찬가지로, 원본 크기의 2배 이상 확대하면 품질 손실이 발생할 수 있으며, 특히 원본 PNG가 작은 경우 더욱 그렇습니다.
  • 팁: 종횡비를 유지하려면 Scale 도구(단축키: R)를 사용하여 캔버스에서 직접 크기를 조정하거나, Inspector에서 Scale 값을 수정하세요.
스크린샷 2024-11-05 오후 5.23.47.png 스크린샷 2024-11-05 오후 6.01.10.png 스크린샷 2026-03-26 오후 3.39.17.png

참고 영상

*[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 스프라이트는 프로젝트의 스타일에 맞게 색상을 커스터마이징할 수 있습니다. 이러한 유연성을 통해 색상 팔레트를 조정하여 사용자 인터페이스 전체에 조화로운 분위기를 만들 수 있습니다.
스크린샷 2024-11-05 오후 9.47.51.png

> 💡

  • 각 에셋 팩의 White 스프라이트 지원 범위는 다릅니다.
  • 2022년 이후 출시된 에셋은 White 스프라이트를 지원하며, 그 이전에 출시된 에셋은 고정된 지정 색상의 스프라이트만 있습니다.
  • 커스터마이징이 불가능한 고정 색상 스프라이트

이미 고유한 색상이 지정된 스프라이트의 색상은 엔진 내에서 변경할 수 없으므로, Photoshop을 사용하여 색상을 수정할 수 있습니다.

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]*

2. PNG로 내보내기

작업물을 PNG로 간단하게 저장하려면 'File → Quick Export as PNG' 옵션을 사용하세요.

스크린샷 2024-11-04 오후 6.25.57.png
  • White Sprites
스크린샷 2024-11-05 오후 9.46.53.png
  • 색상 변경 방법
  • 단일 스프라이트 UI Prefab
스크린샷 2024-11-05 오후 10.35.01.png
  • 레이어드 스프라이트 UI Prefab
스크린샷 2024-11-05 오후 10.36.39.png

참고 영상

*[video omitted: 11.mov]*

6. Texts

6-1. 폰트 정보

  • 에셋에 사용된 샘플 텍스트는 모든 언어를 지원하지 않으며, 기본적으로 영어만 제공합니다.
  • 당사의 GUI 에셋에서 데모 씬과 레이아웃을 위한 샘플 에셋으로 무료 폰트를 사용했습니다. 그러나 이러한 샘플 폰트를 프로젝트에 사용할 때는 주의를 기울여 주세요.

> 💡

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

상업적으로 폰트를 사용할 때 필요한 권리 또는 권한이 있는지 항상 확인하세요.

기억하세요: 적절한 폰트 라이선스는 윤리적인 게임 개발의 필수적인 부분이며, 향후 잠재적인 법적 문제를 방지하는 데 도움이 됩니다.

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

6-2. Text Mesh Pro

  • 텍스트 렌더링에 TextMeshPro를 사용하여 UI의 전반적인 시각적 품질과 성능을 향상시킵니다.
  • 텍스트 오브젝트를 선택하고 Inspector에서 외곽선, 그림자 등 세부 디자인 요소를 조정할 수 있습니다.
  • 미리보기 이미지는 Photoshop에서 제작되었습니다. Photoshop은 정교한 디자인이 가능한 이미지 전문 엔진 도구입니다.
스크린샷 2024-11-06 오후 1.47.01.png

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

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

스크린샷 2024-12-04 오후 5.06.16.png 스크린샷 2024-12-04 오후 5.08.26.png

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

  • 일부 GUI 에셋 데모 타일에는 비트맵 TextMeshPro를 사용하는 외곽선 스타일이 있습니다.
  • 이 폰트는 비트맵으로 생성되었기 때문에 텍스트 크기가 커질수록 품질이 저하될 수 있습니다. 따라서 다양한 크기로 제공합니다.
  • 폰트 이름 뒤의 숫자(32, 40, 50, 54, 64, 72, 120, 210)는 폰트 크기를 나타냅니다. 같은 이름의 폰트는 동일한 알파벳과 기호를 포함하며, 크기만 다릅니다.
  • 작업 중인 텍스트와 비슷한 폰트 크기를 선택하면 이미지 품질 저하를 방지할 수 있습니다.
스크린샷 2024-11-06 오후 1.25.05.png
  • 일부 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가 포함되지 않은 일반 팩을 구매한 경우 이러한 파일은 포함되어 있지 않습니다. 올바른 리소스에 접근할 수 있는지 구매 내역을 확인하세요.

스크린샷 2024-11-05 오후 6.23.08.png
  • 일부 GUI 에셋 데모 타일에는 비트맵 TextMeshPro를 사용하는 외곽선 스타일이 있습니다.
  • 이 폰트는 비트맵으로 생성되었기 때문에 텍스트 크기가 커질수록 품질이 저하될 수 있습니다. 따라서 다양한 크기로 제공합니다.
  • 폰트 이름 뒤의 숫자(32, 40, 50, 54, 64, 72, 120, 210)는 폰트 크기를 나타냅니다. 같은 이름의 폰트는 동일한 알파벳과 기호를 포함하며, 크기만 다릅니다.
  • 작업 중인 텍스트와 비슷한 폰트 크기를 선택하면 이미지 품질 저하를 방지할 수 있습니다.

⬆️ 맨 위로 이동