Smart Academy

(5) NGUI 기초 실습

먼저 'Chapter 2' 프로젝트에서 'Practice NGUI' Scene을 하나 생성합니다.

그리고 Hierarchy창에서 Main Camera를 지웁니다. (NGUI에서 2D UI Root을 생성했을 때 자동으로 생성되는 2D화면 용 카메라를 사용할 예정.)

그리고 NGUI > Create a New UI 메뉴를 클릭해서 UI Tool 창을 엽니다.

[그림 4-5]

UI Tool 창이 열렸으면 거기에서 기본으로 설정되어 있는 값( Layer = Default, Camera = Simple 2D) 그대로 Create Your UI 버튼을 눌러서 기본적인 UI Root를 Hierarchy에 생성합니다.

그러면 Hierarchy창에 다음과 같이 4개의 오브젝트가 생성되어 있는 것을 볼 수 있습니다.

[그림 4-7]

다음으로 메뉴 NGUI > Create a Widget 메뉴를 클릭해서 Widget Tool창을 엽니다.

[그림 4-8]

[그림 4-9]

Widget 을 만들기 위해서는 먼저 Image Map. 즉, Atlas와 Font가 필요합니다.

이번 순서에서는 NGUI에서 기본으로 제공하는 Atlas와 Font를 사용해보도록 하겠습니다.

[그림 4-10]

[그림 4-10]에서와 같이 Project창에서 NGUI > Examples > Atlases > SciFi 폴더를 열어서 그 안에 있는 SciFi Atlas Prefab을 클릭 & 드래깅하여 Widget Tool창의 Atlas에 집어 넣습니다.

그리고 마찬가지로 Font 또한 SciFi Font –Normal을 클릭 & 드래깅하여 Widget Tool창의 Font에 집어 넣습니다.

Atlas와 Font가 지정되면, Widget이 생성 가능하다는 의미로 Add 버튼에 녹색 불이 들어옵니다.

우선 Template을 Button으로 지정한 뒤에 Add To 버튼을 눌러서 Panel의 하위 객체로 버튼을 하나 만들겠습니다.

[그림 4-11]

버튼 생성에 성공했다면, 아래의 그림과 같이 Scene창과 Game창에 버튼이 생성된 것을 확인할 수 있습니다.

[그림 4-12]

다음으로는 본격적으로 UI를 더 만들어 보기에 앞서, UI Root (2D), Camera, Anchor, Panel, 이 4가지 오브젝트들의 중요한 기능을 짚어보도록 하겠습니다.

1) UI Root (2D)

오브젝트를 클릭해보면 UIRoot (Script)라는 컴포넌트가 들어가 있는 것을 확인할 수 있습니다.

[그림 4-13]

컴포넌트의 내용을 살펴보면 UIRoot이라는 Script 파일이 연결되어 있고 그 아래로 Automatic 선택 여부 항목과 Manual Height라는 수치가 보입니다.

Manual Height는 실제로 Out Put이 이루어질 Game 화면의 높이 해상도가 현재 얼마의 값인지 표시해주는 곳입니다.

Automatic은 실제로 Out Put이 이루어질 Game 화면의 높이 해상도에 따라서 변화될 수 있는 내부에 있는 UI 사이즈를 개발자가 셋팅한 사이즈가 시각적으로 항상 같은 사이즈 일 수 있도록 만들어준다는 의미입니다.

반대의 뜻으로 해석하자면, Automatic이 선택되어 있지 않으면, 화면의 높이 해상도가 바뀌면 안에 들어있는 UI들의 사이즈들도 변경된다는 의미입니다.

간단히 테스트를 한 번 해보겠습니다.

Manual Height 수치를 보면서 Game창의 높이 해상도를 낮게 맞춘 뒤에AutoMatic 체크를 풀고 화면 해상도를 높게 맞춰보면, 버튼의 크기가 커지는 것을 볼 수 있습니다.

반면에 AutoMatic을 체크 한 상태에서 화면의 높이를 변경시켜도 버튼의 크기는 변하지 않고 일정한 것을 볼 수 있습니다.

[그림 4-14]

(Height값에 따른 버튼 크기 변화)

이러한 화면의 높이 해상도에 따른 UI 사이즈 조절이 UIRoot (Script)오브젝트에서 대표적으로 하는 기능입니다.

다음 장에서는 Camera에 대해서 알아보겠습니다.

스마트 앱 전문 교육기관 스마트아카데미가 추천하는 안드로이드앱(1)

스마트 폰 삶 속으로 들어오다

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

3D프린팅과 스마트네트워크는 우리생활에 어떤 영향을 미칠까?

스마트안경 웨어러블 대세되나 - 스마트아카데미

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

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

(4) NGUI 구성

1) Anchor

화면에 구성되는 GUI 포지션의 제로 좌표(x=0, y=0, z=0) 값의 위치를 카메라를 기준으로 어디로 할 것인지 지정해줄 수 있는 역할을 합니다.

예를 들어, 일반적으로 2D UI구성을 할 때는 카메라를 기준으로 좌측 상단 모서리에 제로 좌표가 있어야 작업을 하기 편할 것이기 때문에, Anchor에서 카메라상 보이는 좌측 상단 모서리를 제로 좌표로 사용하도록 지정할 수 있습니다.

게임이나 어플을 개발하다 보면, 메인 메뉴 버튼이나 게이지바 같은 것들이 화면의 크기와 관계없이 화면비율상 특정 위치(ex. 메인 메뉴 버튼은 화면 크기 상관없이 항상 우측아래)에 있어야 하는 경우가 많이 있는데, Anchor를 잘 사용하면 이러한 문제를 쉽게 해결할 수 있습니다.

2) Panel

화면을 구성하는 하나의 판입니다.

Panel에는 Sprite(이미지), Label(텍스트), Button 등 다양한 Widget들을 배치할 수 있고, 그렇게 배치됨으로써 Widget들은 Panel의 좌표를 제로 좌표로 하여 하나의 그룹으로 형성될 수 있습니다.

3) Widget

화면에 실질적으로 보이는 Contents들입니다.

그림, 문장, 버튼 등 다양하게 화면에 출력되는 내용들 모두를 일컫는 말입니다.

4) Atlas

사용할 그림들의 집합.

개발된 게임이나 앱의 이미지 리소스들을 보면, 리소스 최적화를 하기 위해서 버튼의 이미지, 스크롤 바, 팝업창의 줄무늬 등 다양한 이미지들을 모아서 하나의 그림 파일에 오밀조밀하게 배치하여 둔 것을 볼 수 있습니다.

이것이 바로 Atlas 입니다.

원래 Atlas를 일반적으로 제작하기 위해서는 전문 UI디자이너가 필요합니다.

포토샵과 같은 그래픽 툴을 이용하여, Atlas의 크기를 정하고 그 안에 다양한 UI이미지들을 배치한 뒤에 이미지들의 하나, 하나의 Rect값(좌표 값과 크기 값)을 모두 list화 시켜서 프로그래머와 공유하는 작업을 해야 하기 때문입니다.

그리고 원하는 UI 이미지를 화면에 배치하기 위해서는 프로그래머가 Rect List를 전달 받아서 해당 이미지를 Atlas에서 불러와, 화면에서 조립하여 보여주는 작업을 해야 합니다.

NGUI에서는 Atlas를 구성하고 싶은 이미지들을 선택하여 클릭 몇 번을 통해 간단히 Atlas를 구성할 수 있으며, 화면에 배치하는 것 또한 자동으로 구성되는 Rect List를 클릭만 하여 쉽게 불러다 사용할 수 있습니다.

5) Font

사용할 글씨체입니다.

유니티 자체에서 GUI Font 기능을 제공하고 있긴 하지만, NGUI에서는 그래픽적, 기능적으로 그보다 더 많은 퍼포먼스를 지원하고 있으며, Font Maker를 통해서 자신이 원하는 폰트를 다채롭게 사용할 수 있습니다.

다음 장에서는 NGUI 기초 실습에 대해서 알아보겠습니다.

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

스마트 앱 전문 교육기관 스마트아카데미가 추천하는 안드로이드앱(1)

스마트 폰 삶 속으로 들어오다

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

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

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

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

차량에서 아이폰을 쓴다면 - 스마트 아카데미

국내기업 개인정보유출 정리 - 스마트 아카데미

3) Prefab 만들기

이제 이렇게 만들어진 큐브를 Prefab 구성을 통해서 하나 더 만들어보겠습니다.

그럼 우선 Prefab을 만들어보겠습니다.

먼저 Project 창에서 Create > folder 메뉴로 새 폴더를 하나 생성해준 뒤에 폴더의 이름을 Prefab이라고 지어줍니다.

그리고 Hierarchy창에서 'Cube' 오브젝트를 앞서 생성한 Prefab폴더로 드래그합니다.

그러면, 파란 상자모양의 아이콘이 달려있는 'Cube' Asset이 생성되어 있는 것을 보실 수 있는데, 이 Asset이 바로 Prefab입니다.

[그림 3-34]

이렇게 생성한 Prefab은 현재까지 설정한 오브젝트가 가진 모든 컴포넌트 설정을 동일하게 저장하고 있습니다. 따라서 비슷한 오브젝트를 대량으로 복제를 해야 하거나, 앱이나 게임을 제작할 때 특정 오브젝트를 어떠한 이벤트를 통해 생성할 때, 유용하게 사용됩니다.

'Cube' Prefab을 클릭 & 드래그 해서 Hierarchy창 안으로 넣어봅시다.

그러면 [그림 3-35]와 같이 짙은 파란색 글씨로 Prefab을 통해서 생성된 'Cube' 오브젝트를 확인할 수 있습니다.

[그림 3-35]

이 오브젝트를 기존의 'Cube' 오브젝트와 차별성을 두기 위해서 이름을 'Cube2'로 변경해줍니다.

[그림 3-36]

지금까지 프로그래밍에 대한 전반적인 이해와 Playmaker를 통한 비주얼 프로그래밍 방법에 대해서 알아보았고, FSM코드를 포함한 다양한 정보를 가지고 있는 오브젝트를 Prefab으로 구성하는 방법에 대해서도 알아보았습니다.

다음 장에서는 GUI에 대해서 알아보겠습니다.

스마트아카데미 책 소개 - 개발자, 나를 말하다

창의융합형 교육이 대세다.

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

페이스북 왓츠앱 인수

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

스마트 앱 전문 교육기관 스마트아카데미가 추천하는 안드로이드앱(1)

스마트 폰 삶 속으로 들어오다

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

2) State 구성하기

Playmaker의 Editor창에 있는 State탭에서 'State 1'이라고 되어 있는 이름을 'Wait' 이라고 변경해줍니다.

[그림 3-20]

이 State가 하게 될 역할은 큐브가 바닥에 떨어지는 시간 동안 기다릴 역할을 하게 될 것입니다.

그러면 이제 기다리라는 내용의 Action을 State에 넣어서, State 구성을 완성해보겠습니다.

Playmaker Editor 창에서 State를 선택한 상태에서 State 탭을 보면 우측 하단에 Action Browser라는 버튼을 볼 수 있습니다.

[그림 3-21]

이 버튼을 클릭하면, State에 넣을 수 있는 액션들이 나열된 창을 보실 수 있습니다.

Action Browser에서 Time > Wait 메뉴를 더블 클릭해서, 'Wait' State에 추가해줍니다.

[그림 3-22]

'Cube'가 'Plane' 위에 떨어지는 속도는 1초 정도 걸리므로, Time의 수치는 기본으로 설정되는 1 값을 그대로 사용합니다.

그 다음, Playmaker Editor창에서 'Wait' State를 우 클릭 했을 때 나타나는 메뉴에서 Add Transition > FINISHED 메뉴를 클릭해서 FINISHED Event를 생성해줍니다.

[그림 3-23]

그리고 다시 State에 설정된 Wait 액션으로 돌아와서 Finish Event를 앞서 설정한 FINISHED Event 이벤트로 연결해줍니다.

[그림 3-24]

이로써, Wait 액션의 기능이 [1초 동안 기다린 다음, FINISHED 이벤트를 발동시켜라.] 라는 행동을 할 수 있게 되었습니다.

이제 다음 State를 하나 더 만들어 준 후에 State 이름을 'Reset Cube Position'이라고 이름을 지어줍니다.

그리고 'Wait' State의 FINISHED 이벤트를 클릭 & 드래그를 해서 화살표를 꺼낸 뒤, 'Reset Cube Position' State에 연결시켜줍니다.

[그림 3-27]

[그림 3-28]

그 다음 'Reset Cube Position' State를 선택하고 Action Browser 창을 Open 한 뒤, Transform 카테고리에서 Set position 액션을 찾아서 더블 클릭하여 'Reset Cube Position' State에 삽입합니다.

[그림 3-29]

그리고 삽입한 Set Position 액션에서 Y축 입력 칸의 우측에 있는 변수 사용(Use Variable) 버튼을 눌러서 해제 상태로 만들어준 뒤, 절대값 2를 입력합니다. (2를 입력하는 이유는 Cube를 선택하고 Inspector창에서 Transform을 확인해보면 큐브가 떨어지기 전에 셋팅되어 있는 Y축 좌표 값이 2이기 때문입니다.)

[그림 3-30]

이렇게 설정된 Set Position 액션의 내용을 설명하자면 다음과 같습니다.

① 움직여야 할 Game Object는 Use owner (FSM이 존재하는 오브젝트. 즉, 'Cube' 자기 자신)

② 움직여야 할 위치는 Y축으로 변수 값이 아닌 절대값 2만큼

③ 움직일 때 참고할 방향 좌표는 World를 기준으로

[그림 3-31]

이제 플레이 버튼을 눌러서 어떤 결과가 나타나는지 확인해봅시다.

Game창에 보이는 화면에서 'Cube'가 'Plane' 위에 떨어졌다가, 다시 원래의 위치로 되돌아가서 떨어지는 것을 보실 수 있습니다.

Playmaker Editor창을 보면 초기에 Start > 'Wait' State에 녹색빛이 머물렀다가, 1초 뒤에 'Reset Cube Position' State로 이동하는 것을 볼 수 있습니다.

다음으로 큐브가 한 번만 포지션이 리셋되는 것이 아니라, 떨어질 때마다 매번 포지션이 리셋이 되도록 한 번 만들어 보겠습니다.

먼저 Playmaker Editor 창에서 'Reset Cube Position' State를 우 클릭 했을 때 나타나는 메뉴에서 Add Transition > FINISHED 메뉴를 클릭해서 FINISHED Event를 생성해줍니다.

그리고, FINISHED Event를 클릭 & 드래그하여 'Wait' State를 타겟으로 하도록 연결시켜 줍니다.

   [그림 3-33]

   그리고 다시 플레이 버튼을 눌러서 매 1초마다 큐브의 위치가 잘 Reset 되는 지를 확인해봅시다.

※'Reset Cube Position' State는 내부에 있는 액션이 Finished Event를 설정할 수 없는 액션이 없는데도 불구하고, FINISHED 이벤트가 타겟으로 설정하고 있는 'Wait' State로 상태 변환이 잘 일어나는 것을 볼 수 있습니다.

그 이유는 시스템에서 기본으로 제공하는 FINISHED 이벤트는 State 내에 Every Frame 과 같이 지속적으로 체크를 해줘야 하는 액션설정이 존재하지 않는 이상 자동으로 다음 State로 처리과정을 넘겨주는 기능을 가지고 있기 때문입니다.

만약, State내에 지속적으로 체크를 하는 속성의 액션이 있다면, Wait이나 Send Event 액션으로 Finished Event를 설정해줘야 처리과정을 다음 State로 넘길 수 있습니다.

다음 강좌에서는 Prefab 만들기에 대해 알아보겠습니다.

스마트 아카데미 '스마트 앱 개발' 교육과정 안내

스마트 앱 개발 학원 국비지원 안내

K팝 홀로그램 상설공연장 개소

구글의 네스트 인수 의미

스카이 아카데미 취업 정보 - 선데이토즈 이야기

창의인재과정 안내

미래창조과학부 창조경제 실현

크리에이티브 UX교육 훈련과정 안내

(6) PlayMaker 사용해보기

1) FSM 만들기.

1강에서 연습했던 프로젝트 파일을 열고, 그 안에 설치된 Playmaker를 활용해서 간단하게 어떤 구조로 비주얼 프로그래밍이 이루어지는지 살펴보도록 하겠습니다.

PlayMaker > PlayMaker Editor 메뉴를 사용해서 Playmaker Editor 창을 엽니다.

[그림 3-13]

[그림 3-14]

위의 그림과 같이 창이 열리면 해당 창을 유니티 인터페이스 안에 적절하게 공간을 할당하여 배치합니다.

에디터 창의 안을 보면 'Select a GameObject'라는 글씨를 볼 수 있는데, 현재 Hierarchy창에서 아무 오브젝트도 선택한 상태가 아니라면 이와 같은 메시지가 나타나게 됩니다. Hierarchy창에서 'Cube' 오브젝트를 선택하면 다음과 같이 내용이 변경됩니다.

[그림 3-15]

'Right-Click to Add FSM' 이 말은 즉, 현재의 창에서 마우스 우측 버튼을 클릭해서 FSM을 생성하라는 뜻입니다.

이 말이 설명하는 대로 창에서 마우스 우측 버튼을 클릭해서 FSM을 생성해보겠습니다.

[그림 3-16]

마우스 우측 버튼을 클릭했을 때, 나오는 메뉴에서 Add FSM을 클릭하면 FSM이 생성됩니다.

[그림 3-17]

FSM을 생성했다면 위의 그림과 같이 Start 라는 이름의 State와 State 1 이라는 이름의 State가 생성된 것을 볼 수 있습니다.

그리고 큰 회색 글씨로 쓰여있던 'Right-Click to Add FSM'이라는 메시지도 'Cube: FSM'이라는 내용으로 바뀐 것을 볼 수 있습니다. (즉, 'Cube' 오브젝트에 'FSM'이라는 이름의 FSM이 생성된 것입니다.)

이제 본격적으로 FSM 프로그래밍을 할 준비가 되었습니다..

이제 'Cube: FSM' Edit창에 있는 FSM 탭을 클릭한 뒤, 'FSM'만 적혀있는 이름 칸의 내용을 'FSM CUBE POSITION RESET'으로 바꿔봅시다.

[그림 3-18]

이렇게 이름을 바꿔주면, 큰 회색 글씨로 쓰여있던 'Cube: FSM'이라는 메시지도 바뀐 것이 보일 것입니다.

이렇게 생성된 'FSM CUBE POSITION RESET' FSM이 컴포넌트로 큐브에 잘 들어가 있는지 확인해봅시다.

[그림 3-19]

다음 강좌에서는 첫 번째 State의 구성에 대해 알아보겠습니다.

우아한 형제들 김봉진 대표 - 앱 개발 전문 학원 스마트 아카데미

창의융합형 교육이 대세다.

창조경제시대 왜 코딩교육인가 - 스마트 아카데미

페이스북 왓츠앱 인수

스마트 앱 전문 교육기관 스마트아카데미가 추천하는 안드로이드앱(1)

스마트 폰 삶 속으로 들어오다

3D프린팅과 스마트네트워크는 우리생활에 어떤 영향을 미칠까?

스타트업 얼라이언스 공식 출범

미래창조과학부와 국내 인터넷 기업들이 합작, 스타트업을 발굴하고 육성하기 위한 네트워크 '스타트업얼라이언스'가 공식 출범했습니다. 스타트업얼라이언스는 18일 강남 테헤란로에 위치한 커뮤니티 센터 '&스페이스'에서 개소식을 갖고 본격적인 출범을 선언했습니다.

이 날 행사에서는 최문기 미래창조과학부 장관과 윤종록 차관, 이석우 카카오 대표, 한국엔젤투자협회 고영하 회장, 카이스트 이민화 교수, 우아한 형제들 김봉진 대표, 요즈마그룹 이원재 지사장을 비롯한 50여개 참여기관 관계자 등 150여명이 참석했습니다.

얼라이언스는 국내 스타트업 생태계의 활성화와 성공적인 해외진출을 효과적으로 지원하는 것을 목표로 우수 인재들의 교류·협력의 장 마련을 통한 창업 활성화 , 네이버, 다음, SK, 카카오 등 인터넷 선도기업들의 효율적인 스타트업 지원 ,유망 초기 스타트업과 국내외 투자자 연결 ,해외시장 정보제공 및 해외 스타트업 커뮤니티와의 네트워킹,정부, 선도기업, 엔젤·벤처투자자, 학교, 창업보육기관, 엑셀러레이터 등 스타트업 생태계 구성원간의 정보공유의 장 마련 등을 중점 추진할 계획입니다.

얼라이언스는 이를 실현하기 위한 이날 출범식에서 올해 사업계획을 발표하고 다양한 네트워크 행사와 프로그램을 진행하기로 했습니다. 우선 오는 25일 실리콘밸리 한인 네트워크인 '베이 에어리어 케이그룹(Bay Area K-Group)' 멤버들을 초청해 '실리콘밸리의 한국인' 콘퍼런스를 개최하고, 4월부터는 네이버, 다음, 카카오, SK플래닛 등 선도기업의 실무경험이 풍부한 핵심인력들이 직접 스타트업을 만나 멘토링하는 '오피스아워 for 스타트업(가칭)' 세션을 개최할 예정입니다.

또한, 선도기업의 해외 지사와 네트워크 등을 활용한 해외 동반진출 프로그램 '스타트업 글로벌 부트캠프'를 실시하고, 첫 시범사업으로 네이버 일본법인인 라인과 연계한 '스타트업 재팬부트캠프(가칭)'를 추진할 계획이다. 하반기에는 국내 유망 스타트업의 글로벌 등용문으로 해외 현지 투자상담회 및 콘퍼런스인 '비글로벌(beGLOBAL)'을 실리콘밸리 등지에서 가질 예정입니다.

지난해 9월 얼라이언스 주관으로 실리콘밸리에서 개최한 제1회 beGLOBAL을 통해서는 온라인 가상화폐 비트코인의 한국 거래소인 '코빗(Korbit)'이 팀 드라퍼 등 현지 유명 투자자로부터 40만 달러의 투자를 유치하기도 했습니다.

한편, 얼라이언스는 국내 벤처투자자, 창업보육기관 관계자 등을 초청해 정보공유를 위한 워크숍을 가질 예정이며, 다목적 이벤트 공간인 &스페이스를 활용해 테마별 미니 워크숍과 커피 브레이크를 수시로 갖고 다양한 스타트업 커뮤니티 행사를 지원할 계획입니다.

임정욱 센터장은 "향후 미래부 등 정부·공공기관, 얼라이언스에 참여 중인 다양한 투자기관·창업보육기관 등과 상호 스킨십을 강화하면서 민·관 협력사업 등 효과적인 스타트업 지원 방안을 지속 발굴해 나가겠다"고 밝혔습니다. 이 날 개소식에 참여한 윤종록 차관은 "우리 인터넷 선도기업들이 돈 잘 벌고 좋은 서비스를 하는 굿 컴퍼니를 넘어 상생하는 산업 생태계 구축에 일조하는 그레이트 컴퍼니로 거듭나는 계기가 될 것"이라고 말했습니다.

사진출처 : Platum.kr

APP 개발 온라인 강좌 제3강 [3-4] - 비주얼 프로그래밍이란? - 플레이메이커의 설치

APP 개발 온라인 강좌 제3강 [3-6] - 비주얼 프로그래밍이란? - Finite State Machine(FSM)

 APP 개발 온라인 강좌 제3강 [3-3] - 비주얼 프로그래밍이란? - 프로그래밍의 구조

 APP 개발 온라인 강좌 제3강 [3-1~2] - 비주얼 프로그래밍이란?

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

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

스마트안경 웨어러블 대세되나 - 스마트아카데미

플레이메이커(PlayMaker) 설치하기

유니티3D는 통합 툴로써 비교적 저렴하고 좋은 툴이지만 여전히 프로그래밍을 C나 Java를 배우거나 할 줄 알아야만 사용할 수 있습니다. 즉 C#이나 Java script 를 잘 하지 못하면 유니티3D의 다양한 기능을 사용하여 앱이나 게임을 만들 수 없습니다. 이러한 프로그래밍은 한 두 달 또는 몇 주 만에 아주 잘하게 되어 자신이 생각하는 앱이나 게임을 구현하는 수준이 되기 어렵습니다. 

또한 그러한 프로그램을 배우는 것이 쉽지 않기에 거의 불가능하다고 하겠습니다. 따라서 프로그램을 전혀 할 줄 모르는 아주 초보자가 자신이 생각하는 앱이나 게임을 만들기 위해서는 유니티3D 메뉴사용법만 알아서는 안됩니다.

이 책에서는 어려운 C#이나 Java Script와 같은 텍스트(Text) 프로그래밍이 아니라 누구나 따라하고 쉽게 이해하여 자신의 논리를 컴퓨터에 구현할 수 있는 비주얼(Visual) 프로그래밍을 하려고 합니다.

이 비주얼 프로그래밍은 여러 가지 툴들이 나와 있습니다. 유니티3D와 같이 사용할 수 있는 플러그 인에서도 Playmaker, UScript, Antares Visio등 몇 개의 툴이 있습니다. 이들 중 초보자가 사용하기에 편리하다고 생각되고 또 재사용성 측면에서 훌륭하다고 생각하는 툴은 플레이메이커입니다.

이제 플레이메이커를 다운받아 설치하겠습니다.

유니티3D를 실행한 상태에서 Ctrl+9 단축키를 사용해서 Asset Store를 오픈 합니다.

그리고 우측 상단에 있는 Search 칸에서 "Playmaker" 로 검색을 합니다.

[그림 3-3]

검색 결과 [그림 3-4]와 같이 PlayMaker가 나오면, 클릭해서 구입을 하시면 됩니다.

[그림 3-4]

PlayMaker를 다운받으면 아래의 그림과 같이 패키지 파일을 볼 수 있습니다.

이 패키지 파일은 플러그인 형식을 띄고 있으며, 유니티에 Import해서 사용할 수 있습니다.

그럼, 이런 패키지 파일을 유니티에 Import 하는 방법을 알아보겠습니다.

[그림 3-5]

위의 [그림 3-5]와 같이 유니티 창 상단 메뉴에서 Asset > Import Package > Custom Package 메뉴를 클릭해서 패키지 로드 창을 오픈 합니다.

[그림 3-6]

그리고 컴퓨터에 저장되어 있던 PlayMaker 패키지 파일을 선택하여 열기 버튼을 누릅니다.

그리고 한 번의 로딩이 끝난 후, 다음 그림과 같이 Importing package 창이 나타나면, Import 버튼을 눌러서 PlayMaker 플러그인 설치를 마칩니다.

[그림 3-7]

Import가 끝나면 Project 창에 우측 그림과 같이 플레이 메이커 Asset들이 생성된 것을 확인할 수 있습니다.

[그림 3-8]

[그림 3-9]

그리고 상단 메뉴 바의 비어 있는 부분을 한 번 클릭하면, 위의 그림과 같이 PlayMaker 메뉴가 생성되는 것을 볼 수 있습니다.

다음강좌에서는 Finite State Machine(FSM)에 대해 알아보겠습니다.

구글의 네스트 인수 의미

스카이 아카데미 취업 정보 - 선데이토즈 이야기

미래창조과학부 창조경제 실현

우아한 형제들 김봉진 대표 - 앱 개발 전문 학원 스마트 아카데미

창의융합형 교육이 대세다.

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

페이스북 왓츠앱 인수

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

프로그래밍의 구조

(3) Data Type

비주얼 프로그래밍이 어떤 것인지 배우기 이전에, 프로그래밍이라는 것이 어떤 구조로 이루어져 있는지 그림과 함께 컴퓨터의 부품으로써 역할 분류로 간략히 알아보았습니다.

컴퓨터는 정보(Information)의 저장과 가공을 편리하게 하기 위하여 약속된 저장방법, 즉 데이터(Data)를 사용합니다. 컴퓨터는 이진법 즉 0,1의 기호(bit)를 사용하여 정보를 최종적으로 저장 및 처리하지만 지금은 이러한 비트나 바이트가 아닌 정보의 측면에서 데이터를 표현하고자 합니다.

정보의 처리를 위하여 프로그래밍을 하다 보면, 필수적으로 사용하게 되는 변수(Variables)라는 것이 있습니다. 변수는 말 그대로 변할 수 있는 수를 뜻하며, 프로그램에서 변수는 단순한 숫자가 아니라 문자, 진실과 거짓, 위치 등 다양한 형태가 변하므로 이것들을 변수로 사용할 수 있습니다.

이러한 변수들은 어떻게 사용되며, 어떻게 프로그램에서 데이터로 활용되는지 간단하게 알아 보겠습니다.

자판기를 예를 들어보겠습니다.

자판기에서 음료수를 꺼내는 우리들의 행동을 먼저 생각해봅시다. 자판기에서 음료수를 꺼내기 위해서는 돈을 넣어야 하고, 내가 넣은 돈의 액수에 맞는 음료수를 선택해서 버튼을 누르면 음료수가 나오게 됩니다.

그럼 이제 자판기의 입장에서 어떻게 행동을 하는지 생각해보겠습니다.

먼저 돈이 들어오는 것에 대한 이벤트를 체크해야 합니다. 그렇게 해서 돈이 들어왔을 때, 현재 내가 받은 돈이 얼마인지 확인해서 내가 가진 제품들 중 어떤 것들이 판매가 가능한지 확인을 해야 합니다.

그리고 판매가 가능한 제품들을 소비자가 선택할 수 있게 버튼에 불을 켜주고, 소비자가 버튼을 클릭했을 때, 해당 제품을 소비자에게 제공한 뒤, 다시 한 번 남은 돈을 체크해서 어떤 제품들이 판매가 가능한지 체크해서 버튼의 불을 켜줍니다.

마지막으로 소비자가 거스름 돈을 받기 위한 레버를 돌렸다면, 남아있던 돈들을 체크해서 500원, 100원, 50원, 10원 단위로 빼기 계산을 하여 가장 큰 동전 단위부터 거스름 돈을 거슬러주는 것으로 자판기의 역할이 종료됩니다

이런 자판기의 행동에서 변수는, 돈이 들어 왔는지, 들어오지 않았는지에 대한 사실을 실시간으로 체크하여 판별하여 True or False로 값을 저장하고 있는 것도 변수이고, 들어온 돈의 액수를 체크하여, 어느 가격대의 제품까지 불을 켤 것인지 결정할 수 있게 해주는 돈의 액수를 저장하는 부분도 변수입니다.

이처럼 데이터의 역할은 프로그램이 다음 행동을 하기 위해 상황을 판별하기 위한 조건 값의 역할을 하며, 대표적으로 아래와 같은 타입들이 존재합니다.

1) Int

Integer(정수) 값으로 이루어진 수로 구성되는 변수 타입입니다.

소수점 변수는 CPU와 램에 주는 연산의 부담이 크기 때문에, 단순한 카운트의 역할 등 정수만으로도 충분히 사용이 가능한 변수 부분은 Int 타입의 변수를 사용합니다.

Ex) 1, 2, 3, 199, -1, -12 ……

2) float

floating point (부동 소수점, 소수). 즉, 정수가 아닌 소수점이 있는 실수들이 바로 float 입니다.

물체가 위치한 좌표, 회전값, 등 세세하게 표현이 이루어져야 하는 부분들의 수치를 비교나 계산할 때 float 변수 타입을 사용합니다.

Ex) 0.02, 300, 1.1, 5.223, -1000.1124……

3) bool

ture or false. 즉, 어떠한 상황에 대해서 참과 거짓을 판별하여 그 결과에 따라 어떤 행동을 해야 할지 결정할 때 사용되는 변수 타입이 bool 타입입니다.

4) String

단어나 문장과 같은 문자열을 조건으로 비교하거나, 화면에 출력하기 위해서 그 텍스트 값을 담을 수 있도록 해주는 것이 String 변수 타입 입니다.

Ex) This is a string, Hello world……

5) Vector3

Vector3는 3차원 좌표계를 표현하는 단위이며, X, Y, Z의 축에 대한 좌표를 3개의 float number 값으로 표현한 형태를 말합니다. 오브젝트의 좌표, 목표가 되는 특정 지점 설정 등을 표현하거나 계산할 때 Vector3 변수 타입을 사용합니다.

Ex) (1.0 , 2.5 , 3.5)

6) Object

Object는 씬에서 역할을 수행하는 하나의 객체를 뜻합니다. Unity에서는 Hierarchy에 나타나는 모든 Game Object가 Object입니다.

다음 강좌에서는 플레이메이커(Play Maker)의 설치에 대해 알아보겠습니다.

 APP 개발 온라인 강좌 - 제1강 모바일 개발 환경과 Tool 소개 [1-1]

스마트 앱 개발 학원 국비지원 안내

스마트 아카데미 '스마트 앱 개발' 교육과정 안내

K팝 홀로그램 상설공연장 개소

창의인재과정 안내

미래창조과학부 창조경제 실현

크리에이티브 UX교육 훈련과정 안내

우아한 형제들 김봉진 대표 - 앱 개발 전문 학원 스마트 아카데미

창의융합형 교육이 대세다.

비주얼 프로그래밍이란?

비주얼 프로그래밍을 이해하기 위하여서는 다 알겠지만 컴퓨터가 어떻게 구성되어 있는지 또 어떤 과정을 통해서 구동되는지 먼저 알아보겠습니다.

(1) 컴퓨터가 하는 일

1) 입력(Input)

키보드, 마우스, 조이스틱 등의

입력기기를 통해서 처리.

  2) 연산(Calculation)

CPU, GPU 등에서 처리.

  3) 제어(Control)

연산 순서 등을 제어.

  4) 기억(Memory)

램, 하드 디스크, USB 등에서 처리.

 5) 출력(Output)

모니터, 프린터 등에서 처리.

컴퓨터는 이러한 부품들로 구성되어 역할이 나누어져 있습니다. 이들을 자신이 원하는 데로 동작시키기 위해서는 컴퓨터가 이해할 수 있는 말로 명령을 입력해야 합니다. 이 때 명령을 컴퓨터가 수행할 수 있도록 잘 관리해 놓는 과정이 프로그래밍입니다.

(2) 프로그래밍의 과정

 - 입력(Input)

키보드 및 마우스 등을 통한 입력처리

또는 이 과정을 통해 미리 입력된 파일

 - 연산(CPU)

사용자가 요구하는 각종 계산 작업

조건에 따른 처리

반복 처리

 - 기억장치(Memory)

메모리 사용: 변수 사용

하드 디스크 사용: 파일 읽기/저장

- 출력(Output)

렌더링

텍스트 출력

기기 진동 효과 등

다음번 강좌에서는 Data Type에 대해 알아보도록 하겠습니다.

APP 개발 온라인 강좌 - 제1강 모바일 개발 환경과 Tool 소개 [1-1]

APP 개발 온라인 강좌 - 제1강 모바일 개발 환경과 Tool 소개 [1-2]

APP 개발 온라인 강좌 제1강 - 모바일 개발 환경과 Tool 소개 [1-3]

APP 개발 온라인 강좌 제2강 - 유니티의 기본 구성 및 조작법 [2-1]

APP 개발 온라인 강좌 제2강 - 유니티의 기본 구성 및 조작법 [2-2-1]

APP 개발 온라인 강좌 제2강 - 유니티의 기본 구성 및 조작법 [2-3,4] -씬 만들기와 오프젝트 만들기

APP 개발 온라인 강좌 제2강 - 유니티의 기본 구성 및 조작법 [2-5] -큐브(상자)씬 만들기

APP 개발 온라인 강좌 제2강 - 유니티의 기본 구성 및 조작법 [2-6~7] - 물리 컴퍼넌트 구성하기

요즘 들어 ICT라는 용어가 언론상에서 많이 거론되며 많은 이슈들을 만들어 내고 있습니다. 정부차원에서도 ICT의 육성에 대하여 다양한 내용을 담은 정부개편안을 보여주고 있으며, 또한 다양한 매체에서 ICT에 대한 언급을 하고 있습니다. 

그러나 ICT는 무엇을 의미하며, 우리생활에 어떠한 영향을 미치게 될지에 대해서는 모르는 부분이 많습니다.

정보 융합을 통한 새로운 시장의 창출

ICT란 정보 통신 기술(Information & Communication Technology)의 약자로써 흔히 알고 있는 정보 기술(Information Technology, IT)로 더 친숙하게 접하고 있습니다.

IT는 흔히 접하는 인터넷, 휴대전화 등의 기술 및 이를 운영하는 프로그램 등을 IT로 총칭하는 경우가 많습니다. ICT도 이러한 면을 지니고는 있으나, ICT는 기존의 정보기술인 IT와 통신산업간의 컨버젼스를 통해 새롭게 발전해 나가는 산업을 뜻합니다. 

즉, IT+Communication 이라고 볼 수 있는 것입니다.

더욱 중요성이 커진 ICT

최근 제조업 및 기술을 바탕으로 성장해 온 많은 기업들이 경영위기를 맞고 있는 이때에 ICT를 선도하는 기업과 국가가 전 세계적으로 두각을 나타내며 성장을 하고 있습니다. 그러므로 ICT를 미래 성장 동력으로 육성해야 함은 부정할 수 없는 사실입니다.

애플이 `2007년 아이폰을 출시하면서 세계 최고 회사로써 자리잡고 있으며, 구글 또한 같은 해에 안드로이드를 사용하는 스마트폰을 출시하며 전세계 모바일 운영체제 중 1위를 달리고 있으나 그 동안 세계 전자산업을 이끌어온 소니, 이동통신기술을 상용화한 모토로라, 디지털 이동통신 기술로 10년 동안 단말기 시장을 지배해 오던 노키아 등 많은 기업들은 현재 극심한 경영위기를 겪고 있습니다.

ICT를 통하여 발전하고 새로운 도약을 시도하기 위해서는 콘텐츠ㆍ플랫폼ㆍ네트워크ㆍ기기 의 ICT 생태계를 총괄 및 육성하여 ICT 생태계를 만드는 것이 ICT를 통하여 우리가 한 단계 더 도약할 신성장 동력이 되는 것이라 보여 집니다.

ICT를 통해 변화 될 생활

앞에서 살펴보았듯이 ICT는 전세계 산업전반 뿐 아니라, 우리 생활에서도 큰 영향을 미치고 있습니다. 

지금 시도되고 있는 원격 수업 E러닝등과 같은 온라인 콘텐츠, 그리고 스마트폰과 태블릿PC가 보급화 되면서 새롭게 나타난 직업인 앱 개발자, 스마트폰을 이용해 맛집을 찾거나, 집안의 상황을 스마트폰을 통해 살피는 등 이 모든 것들이 바로 ICT를 통하여 우리 생활이 급속도로 바뀌어 가고 있는 좋은 예입니다.

개인의 감성에 맞춘 서비스의 제공

감성 ICT란 컴퓨터나 텔레비전 같은 기기가 사람의 감성을 인지하고, 인지한 감성 정보를 처리해 필요한 제품과 서비스를 제공하는 기술입니다. 

이렇게 인간의 감성을 체크하여 데이터화하고, 다양한 IT기기에서 활용하여 소비자의 욕구 및 기호를 충족시켜 줄 감성 ICT는 바로 미래를 선도해 갈 핵심 선도분야로 손꼽히고 있으며, 소비자들의 다양한 감성에 맞춘 제품과 서비스가 가능하고 적용할 수 있는 분야도 다양해 성장 가능성이 무한 분야로써 주목 받고 있습니다.

지금까지 ICT에 대해 전반적으로 알아보았습니다. ICT 자체가 워낙 광범위하며 다양하고 복합적인 부분들이 모여 있지만, 앞으로 기술이 발전하고, 사회 자체가 더욱 삭막해져 갈수록 이러한 ICT산업에 대한 소비자들의 기대와 수요는 계속될 것입니다. 

이러한 ICT는 융 복합 산업이므로 한쪽을 억제하고 다른 쪽을 육성하면 생태계 자체가 굴러가지 않는다는 특성을 지니고 있기 때문에 선순환의 ICT 고리를 찾아 장기적인 IT정책을 통하여 역동적인 IT생태계를 구축하기를 바랍니다.

스마트안경 웨어러블 대세되나 - 스마트아카데미

3D프린팅과 스마트네트워크는 우리생활에 어떤 영향을 미칠까?

스마트 폰 삶 속으로 들어오다

스마트 앱 전문 교육기관 스마트아카데미가 추천하는 안드로이드앱(1)

페이스북 왓츠앱 인수

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