통합검색

[uGUI로 시작하는 유니티 UI 디자인 교과서]는 매력적인 사용자 인터페이스를 만들기 위해 유니티 4.6부터 포함된 uGUI를 소개하는 책이다. 유니티 공식 UI 프레임 워크인 uGUI는 내장형 UI 프레임워크로 직관적으로 조작할 수 있으며 컴포넌트 기반이어서 확장성이 좋은 장점이 있다. 이 책에서는 새로운 UI 시스템에 대한 특징부터 공식 문서만으로는 이해하기 어려운 uGUI의 기능들에 대해 스크린샷과 함께 상세하게 설명한다. 또한 모바일 앱에서 자주 이용되는 UI 소개와 네이티브 플러그인을 제작하는 방법, UI를 제작할 때 편리하게 사용할 수 있는 에셋과 도구들도 알려준다.

유니티로 앱을 제작할 때에는 화면에 정보를 표시하는 텍스트 레이블, 사용자의 조작을 받아들이는 버튼과 슬라이더와 같은 사용자 인터페이스(UI)도 작성해야 하는데 유니티 4.5 이전에는 스크립트를 작성하는 방식으로 이들을 제작해야 했습니다. 그러나 Unity 4.6 이후에는 직관적인 조작을 통해 UI를 빠르게 작성할 수 있는 새로운 UI 시스템인 uGUI가 탑재되었습니다.

uGUI라고 불리는 새로운 UI 시스템은 직관적으로 조작할 수 있을 뿐 아니라 컴포넌트 기반으로 구성되어 확장하기 쉽다는 큰 장점을 가지고 있습니다. 이 uGUI가 탑재된 후에는 게임에서 사용되는 UI는 물론 툴과 유틸리티에 사용되는 UI도 훨씬 간편하게 구현할 수 있게 됐습니다.

이 책에서는 Unity 4.6부터 포함된 유니티 UI(uGUI)에 대해 설명하며, 다루는 내용은 다음과 같습니다.

◎ 1장에서는 유니티를 아직 경험하지 못한 독자도 익숙해질 수 있도록 유니티의 개요를 소개하며 간단한 튜토리얼을 게재했습니다.
◎ 2장-5장에서는 새로운 UI 시스템의 모든 것을 설명합니다.
◎ 6장-7장에서는 모바일 앱에 자주 이용되는 UI와 네이티브 플러그인에 대한 실제적인 제작 방법을 설명합니다.
◎ 8장에서는 UI 제작에 사용될 수 있는 편리한 에셋과 도구를 소개합니다.
◎ 부록에서는 UI 클래스 레퍼런스를 수록했습니다.

내용 설명에 사용된 예제 코드는 실전에서 그대로 사용할 수 있도록 실용성 있게 구성되어 있으며 아래 위키북스 홈페이지에서 내려받을 수 있습니다.

www.wikibook.co.kr

▣ CHAPTER 01: 유니티 개요

CHAPTER 1-1 유니티란
1-1-1 다양한 플랫폼 지원
1-1-2 유니티 제품 구성
CHAPTER 1-2 유니티 시작하기
CHAPTER 1-3 유니티 에디터
1-3-1 씬 뷰(Scene View)
1-3-2 게임 뷰(Game View)
1-3-3 하이어라키 뷰(Hierarchy View)
1-3-4 프로젝트 뷰(Project View)
1-3-5 인스펙터 뷰(Inspector View)
1-3-6 그 외의 뷰
1-3-7 유니티 에디터의 메뉴
CHAPTER 1-4 튜토리얼 1: 씬 작성하기
1-4-1 새 프로젝트 생성
1-4-2 지면 작성
1-4-3 머티리얼
1-4-4 물리 운동
1-4-5 프리팹
CHAPTER 1-5 튜토리얼 2: 스크립트
1-5-1 스크립트
1-5-2 스크립트 컴포넌트
1-5-3 스크립트 작성
1-5-4 필드와 인스펙터 뷰
1-5-5 인터랙션 구현
1-5-6 모바일 장치용 빌드
CHAPTER 1-6 UI 시스템
1-6-1 새로운 UI 시스템의 특징
1-6-2 레거시 GUI 시스템
CHAPTER 1-7 에셋 스토어
CHAPTER 1-8 그 밖의 서비스

▣ CHAPTER 02: UI 구성

CHAPTER 2-1 UI 요소의 생성과 캔버스
2-1-1 UI 요소 생성하기
2-1-2 캔버스란
2-1-3 UI 요소를 렌더링하는 순서
2-1-4 캔버스의 렌더링 모드와 속성
2-1-5 Canvas Scaler 컴포넌트
2-1-6 Graphic Raycaster 컴포넌트
2-1-7 Canvas Renderer 컴포넌트
2-1-8 캔버스 그룹
CHAPTER 2-2 Rect Transform 컴포넌트
2-2-1 렉트 툴
2-2-2 Rect Transform 컴포넌트의 속성
2-2-3 앵커
2-2-4 게임 오브젝트와 Rect Transform 컴포넌트
CHAPTER 2-3 이벤트 시스템
2-3-1 이벤트 시스템
2-3-2 Event System 컴포넌트의 동작
2-3-3 Event System 컴포넌트에 포함된 속성들
2-3-4 인풋 모듈
2-3-5 레이캐스터

▣ CHAPTER 03: 기본적인 UI 요소

CHAPTER 3-1 이미지
3-1-1 이미지 생성
3-1-2 2D 스프라이트와 다른 점
3-1-3 Image 컴포넌트의 속성
3-1-4 이미지의 종류
3-1-5 스프라이트 애니메이션
CHAPTER 3-2 스프라이트 에디터
3-2-1 Sprite Mode
3-2-2 스프라이트 편집
3-2-3 스프라이트 생성
3-2-4 스프라이트 에디터의 그 밖의 기능
CHAPTER 3-3 스프라이트 패커
3-3-1 텍스처 생성
3-3-2 스프라이트 패커 창
3-3-3 독자적인 패킹 정책
CHAPTER 3-4 로우 이미지
3-4-1 로우 이미지 생성
3-4-2 Raw Image 컴포넌트에 포함된 속성
CHAPTER 3-5 텍스트
3-5-1 텍스트 생성
3-5-2 Text 컴포넌트에 포함된 속성
3-5-3 리치 텍스트
3-5-4 폰트
CHAPTER 3-6 마스크
3-6-1 마스크 생성
CHAPTER 3-7 이펙트
3-7-1 Shadow 컴포넌트
3-7-2 Outline 컴포넌트
3-7-3 Position As UV1 컴포넌트
CHAPTER 3-8 UI 요소 렌더링과 성능
3-8-1 배치
3-8-2 렌더링 최적화
3-8-3 최적화를 위한 툴

▣ CHAPTER 04: 인터랙티브 UI 요소

CHAPTER 4-1 인터랙티브 UI 요소의 상태
CHAPTER 4-2 이벤트
4-2-1 이벤트 리스너 설정
4-2-2 사용자 지정 컴포넌트의 이벤트 리스너
4-2-3 이벤트 리스너 정의
4-2-4 스크립트로 이벤트 리스너 설정
4-2-5 Event Trigger 컴포넌트
CHAPTER 4-3 버튼
4-3-1 버튼
4-3-2 Button 컴포넌트의 이벤트
CHAPTER 4-4 토글
4-4-1 토글의 구조
4-4-2 Toggle 컴포넌트의 속성
4-4-3 Toggle 컴포넌트의 이벤트
4-4-4 토글 그룹
CHAPTER 4-5 슬라이더
4-5-1 슬라이더 구조
4-5-2 Slider 컴포넌트의 속성
4-5-3 Slider 컴포넌트의 이벤트
CHAPTER 4-6 스크롤 바
4-6-1 스크롤 바의 구조
4-6-2 Scrollbar 컴포넌트의 속성
4-6-3 Scrollbar 컴포넌트의 이벤트
CHAPTER 4-7 스크롤 뷰
4-7-1 스크롤 뷰 작성
4-7-2 스크롤 바 설정
4-7-3 Scroll Rect 컴포넌트의 속성
4-7-4 Scroll Rect 컴포넌트의 이벤트
CHAPTER 4-8 입력 필드
4-8-1 입력 필드의 구조
4-8-2 Input Field 컴포넌트의 속성
4-8-3 Input Field 컴포넌트 이벤트
CHAPTER 4-9 인터랙션 컴포넌트의 기본 클래스
4-9-1 Interactable 속성
4-9-2 트랜지션
4-9-3 내비게이션

▣ CHAPTER 05: 자동 레이아웃

CHAPTER 5-1 레이아웃 요소
5-1-1 레이아웃 요소란
5-1-2 Layout Element 컴포넌트
CHAPTER 5-2 레이아웃 컨트롤러
5-2-1 Content Size Fitter 컴포넌트
5-2-2 Aspect Ratio Fitter 컴포넌트
CHAPTER 5-3 레이아웃 그룹
5-3-1 Horizontal, Vertical Layout Group
5-3-2 Grid Layout Group
5-3-3 Grid Layout Group과 Content Size Fitter
CHAPTER 5-4 드리븐 속성
CHAPTER 5-5 사용자 지정 레이아웃
5-5-1 레이아웃 인터페이스
5-5-2 레이아웃 계산
5-5-3 레이아웃 재구축

▣ CHAPTER 06: 실전 UI 제작

CHAPTER 6-1 탭 바
6-1-1 탭 바 생성
6-1-2 탭 생성
6-1-3 토글 그룹 설정
6-1-4 각 탭에 대응하는 화면 생성
6-1-5 이벤트 리스너 설정
CHAPTER 6-2 애니메이션으로 표현하는 탭 바
6-2-1 탭과 탭에 대응하는 화면 생성
6-2-2 애니메이션 생성
6-2-3 Event Trigger 컴포넌트 설정
CHAPTER 6-3 페이징 스크롤 뷰
6-3-1 스크롤 뷰 추가
6-3-2 스크롤 할 내용 생성
6-3-3 페이징 처리 구현
6-3-4 페이지 컨트롤 생성
CHAPTER 6-4 드래그 앤드 드롭
6-4-1 드래그할 수 있는 아이콘 생성
6-4-2 드롭 영역 작성
6-4-3 드래그할 수 있는 아이콘을 위한 스크립트 구현
6-4-4 드롭 영역을 위한 스크립트 구현
CHAPTER 6-5 셀을 재활용하는 테이블 뷰
6-5-1 스크롤 뷰 생성
6-5-2 스크롤 할 내용 생성
6-5-3 셀 작성
6-5-4 셀을 위한 스크립트 구현
6-5-5 스크립트에서 이름을 지정해 스프라이트를 변경한다
6-5-6 테이블 뷰를 위한 스크립트 구현
CHAPTER 6-6 내비게이션 뷰
6-6-1 내비게이션 뷰와 내비게이션 바 생성
6-6-2 뷰 생성
6-6-3 Rect Transform의 트윈 애니메이션
6-6-4 내비게이션 뷰를 위한 스크립트 구현
6-6-5 각 뷰를 위한 스크립트 구현
CHAPTER 6-7 알림 뷰
6-7-1 캔버스와 오버레이 생성
6-7-2 창과 각 요소 생성
6-7-3 스크립트 구현

▣ CHAPTER 07: 네이티브 플러그인

CHAPTER 7-1 플러그인이란
7-1-1 매니지드 플러그인
7-1-2 네이티브 플러그인
CHAPTER 7-2 iOS를 위한 네이티브 플러그인
7-2-1 iOS를 위한 네이티브 플러그인 구현
7-2-2 유니티 쪽 인터페이스 구현(iOS)
7-2-3 네이티브 플러그인 이용하기(iOS)
CHAPTER 7-3 안드로이드를 위한 네이티브 플러그인
7-3-1 안드로이드를 위한 네이티브 플러그인 구현
7-3-2 유니티 쪽 인터페이스 구현(안드로이드)
7-3-3 네이티브 플러그인을 이용하기(안드로이드)

▣ CHAPTER 08: UI 제작에 사용할 수 있는 에셋, 툴

CHAPTER 8-1 NGUI: Next-Gen UI
8-1-1 NGUI vs. 새로운 UI 시스템
8-1-2 NGUI의 독자적인 기능
CHAPTER 8-2 iTween & iTween Native Extension
8-2-1 iTween이란
8-2-2 iTween에 포함된 애니메이션 메서드
8-2-3 이징
8-2-4 iTween Native Extension
CHAPTER 8-3 텍스처 패커와 스프라이트 일루미네이터
8-3-1 텍스처 패커(TexturePacker)란
8-3-2 스프라이트 일루미네이터(SpriteIlluminator)
CHAPTER 8-4 UniRx & LINQ to GameObject
8-4-1 리액티브 프로그래밍이란
8-4-2 Reactive Extensions란
8-4-3 UniRx의 기능
8-4-4 LINQ to GameObject

▣ APPENDIX 01: UI 클래스 레퍼런스

Canvas
CanvasScaler
CanvasRenderer
CanvasGroup
RectTransform
RectTransformUtility
EventSystem
StandaloneInputModule
TouchInputModule
GraphicRaycaster
PhysicsRaycaster
Physics2DRaycaster
Image
RawImage
Text
Selectable
Button
Toggle
ToggleGroup
Slider
Scrollbar
ScrollRect
InputField