APP 개발 온라인 강좌 제4강 [4-1~3] - GUI에 대한 이해와 NGUI 소개

(1) GUI의 정의

GUI란 Graphic User Interface의 약자로 사용자 편의를 위해 시각적인 그래픽 요소로 화면을 꾸미고 배치하여 상호작용할 수 있게 만든 것을 의미합니다. GUI이전에는 컴퓨터와의 상호작용을 Text로 했었으나 점차 기술이 발달되어 그래픽으로 표현된 인터페이스를 사용함으로써 지금과 같이 상호작용 요소를 인지(cognition)하기 쉽게 되었습니다.

   

보다 쉽게 얘기하자면, 게임이나 앱에서 화면을 구성하는 버튼, 스크롤 바 등과 같이 사용자가 행동을 통해서 컨트롤을 하여 컴퓨터가 자신이 원하는 행동을 하게끔 만들 수 있는 객체나, 시계, 배터리 게이지 등과 같이 필요한 정보를 시각적으로 쉽게 확인할 수 있는 객체라고 생각하시면 됩니다.

   

   

(2) NGUI란?

NGUI는 유니티3D 개발자가 편리하게 GUI를 원하는 대로 만들 수 있게 해주는 플러그인 툴 입니다. 유니티3D 자체에도 GUI를 만들 수 있게 도와주는 기능이 있지만 복잡한 UI 구성이 어렵거나 프로그램 성능이 저하되는 경우가 있어 별도의 툴을 소개합니다.

   

Playmaker가 프로그래밍을 담당하여 초보자가 쉽게 프로그램 할 수 있는 플러그인 툴이었다면, NGUI는 GUI를 담당하는 플러그인 툴 입니다.

   

NGUI를 UI 툴로 다룰 수 있게 되면, 프로그래밍을 Playmaker로 사용하여서 손쉽게 앱을 제작할 수 있게 됩니다.

  

[그림 4-1]

(3) NGUI 설치하기

Playmaker를 설치했을 때와 같이 유니티3D를 실행한 상태에서 Ctrl + 9로 Asset Store를 연 뒤, 검색 창에서 NGUI로 검색을 하면 쉽게 NGUI를 찾으실 수 있습니다.

[그림 4-2]

여기서 NGUI를 바로 구입하실 수 있고, 구입을 하시면 바로 정품 버전으로 아무런 제한 없이 사용하실 수 있습니다.

   

하지만, 정품을 구입하기 전에 먼저 한 번 테스트 버전을 사용해보고 싶다면, NGUI제조사의 홈페이지(http://www.tasharen.com)로 가서 무료 테스트 버전을 다운 받아서 사용하시면 됩니다.

[그림 4-3]

홈페이지에서 Products > NGUI: Next-Gen UI Kit 클릭

* NGUI: Next-Gen UI Kit 페이지에서 Evaluation Version 카테고리에 있는 'Free Edition of NGUI here' 링크를 클릭하시면 무료 테스트 버전을 다운받으실 수 있습니다.

   

다운을 받으셨으면, Playmaker unitypackage를 프로젝트에 Import 시켰던 것 같이 NGUI unitypackage 파일을 Import 시켜주시면 됩니다.

   

Import가 끝난 뒤에 Playmaker와 마찬가지로 NGUI도 유니티 상단에 있는 메인 메뉴바의 빈 곳을 한 번 클릭해주면 메뉴가 나타납니다.

[그림 4-4]

   

NGUI 설치가 끝났으면, 본격적으로 NGUI 예제를 해보기 전에 먼저 NGUI의 구성요소와 그 기능을 살펴 보도록 하겠습니다.

   

다음 강의에서는 NGUI의 구성에 대해 알아보겠습니다.

스마트아카데미-시설 소개

페이스북 왓츠앱 인수

스마트 아카데미 창의인재 교육 6개월 과정 등록안 -스마트 앱 전문 교육기관

정부 벤처창업지원 통해 경제 활성화 나선다

한국의 구글 핸드스튜디오 안준희 대표 - 스마트아카데미

한국의 구글 핸드스튜디오 - 스마트아카데미 (2)

ICT란 무엇인가 - 스마트 아카데미