Smart Academy

미래창조과학부(미래부)와 산업통상자원부(산업부)가 ‘3D 프린팅 산업 발전전략’을 공동으로 수립했습니다. 미래부와 산업부는 4월23일 국가기술심의위원회를 열고, 국내 3D 프린터 산업을 지원 정책을 의결했다. 2020년까지 전세계 3D 프린터 산업의 선두로 올라선다는 것이 이번 정책의 목표입니다.

3D 프린팅의 핵심은 다음 네가지입니다.

미래부와 산업부는 총 4개 분야에서 11가지 과제를 수행할 계획입니다. 성장 기반 조성 분야에서는 3D 프린터 수요 창출을 위한 중소기업을 선정하는 등 기존 산업현장에서 3D 프린터 기술을 시범적으로 활용할 계획입니다. 

정부는 부처간 칸막이를 허물어 산업부 1차관과 미래부 2차관이 공동위원장을 맡는 ‘3D프린팅 산업 발전 협의회’를 구성하고 교육부, 중소기업청, 특허청 등 유관기관의 적극적인 협업을 통해 확산해나갈 계획입니다.

이를 위해 수요 연계형 성장기반을 조성하고 비즈니스 활성화를 지원하는 한편 기술 경쟁력 확보와 법 제도 개선 등 4대 전략 11대 추진과제를 시행합니다. 여기에는 미래부가 최근 확대를 밝힌 무한상상실 확충과 3D프린팅 디자인 스토어 구축, 기술개발 로드맵 마련, 인증 체계 마련 등이 포함됩니다.

정부의 발전전략은 3D프린팅이 오는 2021년 108억달러에 이르는 시장을 형성하며 기존 산업의 패러다임을 변화시켜 제조공정 고도화 등 제조업 혁신을 유도하고 창조경제 신시장과 일자리를 창출할 새로운 성장동력이 될 가능성이 크다는 점에 주목한 데 따른 것입니다.

국내 산업 환경은 발전된 정보통신기술 융합, 3D프린팅 적용 분야인 자동차, 전자, 의료 분야가 이미 활성화 돼있음에도 고가 산업용 장비와 소재 90%를 수입에 의존하는 등 아직 시장 규모가 미미한 초기 단계에 머무르고 있습니다.

 

 APP 개발 온라인 강좌 제4강 [4-5.2.1] - NGUI 구성

 APP 개발 온라인 강좌 제4강 [4-5.2.2] - NGUI 구성

APP 개발 온라인 강좌 제4강 [4-5.3~4] - NGUI 구성\

APP 개발 온라인 강좌 제5강 [5-1~3] - NGUI로 화면 꾸미기

 APP 개발 온라인 강좌 제5강 [5-4~5] - NGUI로 화면 꾸미기

 APP 개발 온라인 강좌 제5강 [5-6] - NGUI로 화면 꾸미기

(6) 다양한 색을 가진 글자 추가하기

Widget Tool에서 Template을 Label로 지정하고, 'Anchor(Center)'의 하위에 있는 Panel에 생성시킵니다.

생성된 'Label'의 이름을 'Label (Content)'로 변경하고, 기존에 'Anchor(Center)' > Panel 하위에 있던 'Label'의 이름은 'Label (Title)'로 변경합니다.

[그림 5-14]

그리고 'Label (Title)'의 y 포지션 좌표를 140으로 변경하고, x, y 사이즈를 30으로 변경시킵니다.

[그림 5-15]

'Label (Content)'의 x, y 포지션 좌표를 -195, 100으로 변경합니다.

[그림 5-16]

그리고, 아래로 내려가서 Pivot을 'Top Left'로 변경해줍니다.

[그림 5-17]

'Label (Content)'의 UITiled Sprite (Script) 컴포넌트에서 내용을 자유롭게 작성합니다.

<결과화면>

[그림 5-18]

<색상 별 16진수 값>

[그림 5-19]

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

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

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

모바일게임 플랫폼 시장 춘추전국시대 - 스마트아카데미

스타트업 얼라이언스 출범 - 스마트 아카데미

SK텔레콤 서비스 장애 보상안내발표 - 스마트아카데미

Cre8tive ux 훈련 강좌 2014년 4월12일 개강[토요반]

(4) 글씨 넣기 – Label

화면 내에 글씨를 넣기 위해서는 Label이 필요합니다.

Widget Tool에서 Template을 Label로 지정하고, 두 개의 Anchor 오브젝트의 하위에 있는 Panel에 Label을 하나씩 생성해줍니다.

[그림 5-10]

상단 바에 들어간 Label의 y 포지션을 -15로 변경하고, UILabel (Script)에서 적고 싶은 말을 적어봅시다.

[그림 5-11]

그리고, 화면 중앙에 들어간 Label도 UILabel (Script)에서 적고 싶은 말을 적어봅시다.

단, 여기서 주의해야 할 점은 현재 사용되고 있는 Font가 한글은 지원하지 않기 때문에 한글을 적어서는 안됩니다.

[그림 5-12]

(5) 배경화면 꾸미기

Widget Tool에서 Template을 Tiled Sprite로 지정하고, Sprite는 Honeycomb를 선택하여 'Anchor(Center)'의 하위에 있는 Panel에 생성시킵니다.

생성된 'Tiled Sprite (Honeycomb)'의 Inspector창에 있는 Transform에서 x, y, z 사이즈를 500, 500, 1로 변경합니다.

그리고, UITiled Sprite (Script) 컴포넌트에서 Depth 값을 0으로 바꿔서 'Sprite (Dark)'와 동일한 Depth 수준으로 만들어 준 뒤에, 'Sprite (Dark)'의 Depth를 -1로 만들어줍니다.

[그림 5-13]

(그리고 'Tiled Sprite (Honeycomb)'의 UITiled Sprite (Script) 컴포넌트에서 Color Tint를 조절해서 색을 너무 밝지 않게 적당히 조정해보자.)

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

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

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

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

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

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

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

5. NGUI로 간단한 화면 꾸미기

이제 본격적으로 NGUI를 이용한 UI화면 구성을 해보겠습니다.

아래 그림은 이번 예제에서 완성하려고 하는 화면구성입니다.

[그림 5-1]

'NGUI Control Sample'이라는 이름으로 새로운 프로젝트를 만들고, Project창에 Scenes 폴더를 만든 뒤에 'Main'이라는 이름으로 Scene을 저장합니다.

그리고 Main Camera를 삭제하고, NGUI 패키지를 Import 시켜줍니다.

< 제작 준비물 >

Sprite(Dark) * 4, Label *3, Button * 2 Sprite(Light) * 1, Tiled Sprite * 1

※ Sprite : GUI의 기본인 사각형. Dark, Light 등 사각형의 형태를 변경 가능.

※ Label : 화면에 보일 Text, 원하는 대로 Text 변경 가능.

(1) 뒷 배경 만들기 – Sprite(Dark)

앞서 만들어둔 'Main' Scene에 먼저 UI Widget을 생성할 수 있도록 셋팅 환경인 UI Root, Camera, Anchor, Panel이 Hierarchy에 존재할 수 있도록, 상단의 메뉴 NGUI > Create a New UI 메뉴를 통해 네 개의 객체를 생성합니다.

그리고 상단의 NGUI > Create a Widget 메뉴를 클릭해서 Widget Tool 창을 오픈한 뒤, Atlas에 SciFi Atlas를 Font에 SciFi Font – Normal을 설정해 주고, Template을 Sprite형식으로 하고, Sprite에 Dark이미지를 설정하여 Panel에 Add To 버튼을 통해 Sprite (Dark) 객체를 생성합니다. (4강의 (5)NGUI 기초 실습 참조.)

[그림 5-2]

[그림 5-3]

그리고 방금 생성한 Sprite (Dark) 객체의 Inspector창에서 Scale값을 조정합니다. (X = 500, Y = 500)

[그림 5-4]

이로써 Background가 세팅되었습니다.

그 위에 다른 이미지들을 올려보도록 하겠습니다.

(2) 색깔 있는 사각형 만들기 – Sprite(Dark)

앞서서 Sprite (Dark)를 생성했던 것과 마찬가지로 Template을 Sprite형식으로 하고, Sprite에 Dark이미지를 설정하여 Panel에 Add To 버튼을 통해 Sprite (Dark) 객체를 3개 생성합니다.

생성한 3개의 Sprite의 크기와 위치를 Transform을 통해서 자유롭게 원하는 대로 조정해주고, Inspector에 있는 UISprite (Script) 컴포넌트에서 Color Tint 변경을 통해 원하는 색으로 변경시켜 준 뒤, 색상에 맞춰서 오브젝트의 이름을 바꿔줍니다.

[그림 5-5]

(3) 상단 바 만들기 – Sprite(Light)

상단 메뉴에서 Game Object > Create Empty를 클릭해서 빈 오브젝트를 생성합니다.

생성한 빈 오브젝트의 이름을 'Anchor(Top)'으로 변경하고, Inspector창에 있는 Transform 정보에서 포지션 x, y, z 값을 모두 0으로 설정하고, 사이즈 x, y, z, 값은 모두 1로 설정합니다. (기존에 있던 'Anchor'오브젝트의 이름은 'Anchor (Center)'로 변경합니다.

[그림 5-6]

'Anchor(Top)' 오브젝트의 Inspector창에서 Add Component 버튼을 클릭해서 NGUI > UI > Anchor를 선택하여 UIAnchor (Script) 컴포넌트를 추가합니다.

그리고 UIAnchor (Script) 컴포넌트의 Side 기능에서 Top을 선택합니다.

[그림 5-7]

Hierarchy창에서 생성한 'Anchor(Top)' 오브젝트를 'Camera' 오브젝트에 드래그인 하여 'Camera'의 하위 객체로 만들어 줍니다.

그리고, 상단 메뉴의 NGUI > Create a Panel를 클릭해서 Panel을 하나 생성합니다.

생성한 Panel의 Inspector창에 있는 Transform 정보에서 포지션 x, y, z 값을 모두 0으로 설정하고, 사이즈 x, y, z, 값은 모두 1로 설정한 뒤, 생성한 Panel을 'Anchor(Top)' 오브젝트에 드래그인하여 'Anchor(Top)' 오브젝트의 하위객체로 만들어줍니다.

[그림 5-8]

Widget Tool창에서 Template을 Sprite로, Sprite을 Light로 지정하여 Anchor(Top) 오브젝트의 하위에 있는 Panel에 'Sprite(Light)'를 추가합니다.

생성된 'Sprite(Light)'의 Inspector에 있는 Transform에서 포지션 x, y, z 값을 0, -20, 0으로 설정하고, 사이즈 x, y, z, 값은 500, 40, 1로 설정해줍니다.

그리고, Inspector창에 있는 UISprite (Script) 컴포넌트에서 Color Tint 변경을 통해 Sprite색상을 원하는 색으로 변경시켜 준 뒤, 색상에 맞춰서 오브젝트의 이름을 바꿔줍니다.

[그림 5-9]

스마트 시장에서 성공하기 위한 당신의 첫 걸음스마트 아카데미

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

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

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

창의인재과정 안내

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

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

3) Anchor

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

이 역할을 'Anchor'오브젝트가 수행할 수 있도록 해주는 것이 UIAnchor (Script) 컴포넌트 입니다.

[그림 4-29]

Side

하위에 배치될 오브젝트들의 제로 좌표를 어디에 위치 시킬지 정할 수 있으며, 이러한 점을 잘 이용하면, 화면 사이즈나 비율이 다른 여러 플랫폼에서 효과적인 UI배치를 할 수 있습니다.

(Side 기능을 변경시켜 보면서 Game창에서 하위 객체의 위치가 어떻게 변하는지 한 번 살펴보시기 바랍니다.)

Side 기능을 활용할 경우 Half-pixel 항목 체크를 사용하는 것이 좋습니다.

항목을 체크함으로써 윈도우 시스템에서 Direct x 9.0 버그로 나타나는 반 픽셀 화소가 깨지는 것을 완화할 수 있습니다.

Depth Offset

깊이가 계산 된 점에 추가 조정하는 데 사용됩니다. 그것은 원근법 기반의 카메라에 주로 유용합니다. 이 값은 Camera 컴포넌트의 clipping planes의 Near과 Far에서 사용되는 것과 같은 좌표계입니다.

Relative Offset

화면의 가로 또는 높이를 기준으로 객체를 배치 할 수 있습니다. X * Screen.width, Y * Screen.height, 이 두 값이 앵커의 마지막 위치에 더해집니다.

4) Panel

Panel 오브젝트는 UIPanel을 가지고 있습니다. UIPanel은 모든 UI 위젯(버튼, 창, 스크롤바 등)들을 자식으로 가지는 컨테이너 입니다.

판넬은 이후에 예제를 다루면서 역할에 대해서 더 자세하게 알아보겠습니다.

다음 5 장에서는 NGUI로 간단한 화면 꾸미기에 대해서 알아보겠습니다.

스마트 시장에서 성공하기 위한 당신의 첫 걸음스마트 아카데미

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

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

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

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

창의인재과정 안내

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

2) Camera

Projection

카메라가 화면을 보는 원근 요소를 결정할 수 있는 기능을 가지고 있습니다.

NGUI에서는 대부분의 UI에서 그렇듯 원근이 필요 없기 때문에, Orthographic을 기본으로 지정하고 있지만, 일반적인 카메라들은 원근감이 필요하기 때문에 생성시 기본으로 Perspective를 기본으로 지정합니다.

Clips Planes

"근접(Near)"과 "원거리 클립 평면(Far Clip Plane)" 속성은 카메라의 뷰가 시작되고 끝나는 지점을 결정합니다. 평면들은 카메라의 방향에 수직으로 놓여있고 그것의 위치에서 측정이 됩니다. 근접(Near) 평면은 렌더될 가장 가까운 곳이며 원거리(Far) 평면은 가장 먼 곳입니다. 클립핑 평면은 또한 어떻게 깊이 버퍼 정확도가 화면에 분배되는지를 결정합니다. 일반적으로 높은 정확도를 위해서는 근접 평면을 가능한 멀게 설정합니다.

[그림 4-22]

Normalized Viewport Rect

현재 카메라 뷰가 전체 화면의 특정 부분에서만 보이도록 하고 싶을 때, 사용됩니다.

현재 열려있는 'Practice NGUI' 씬에서 간단한 예를 통해서 그 기능을 한번 알아보겠습니다.

Hierarchy 창에서 'UI Root (2D)' 하위에 있는 'Camera' 오브젝트의 Camera 컴포넌트에서 Clear Flags를 Solid Color로 변경시켜주고, Culling Mask도 UI, Player를 체크해줍니다.

[그림 4-23]

'Camera' 오브젝트의 이름을 'Camera1'로 변경한 후, Ctrl + d 를 눌러서 카메라를 하나 더 생성한 뒤, 새로 생성된 카메라의 이름을 'Camera2'로 변경시켜줍니다.

[그림 4-24]

'Camera2'의 Transform 정보에서 x, y, z position을 -75.5, 0, 75.5로 변경시켜주고, y축 rotate를 90으로 변경시켜줍니다.

[그림 4-25]

'Camera2'의 Camera 컴포넌트에서 Solid Color의 Background 칼라를 좀 더 밝은 색으로 설정해줍니다.

[그림 4-26]

그리고 'Camera2' 오브젝트의 하위에 있는 'Background' 오브젝트(Camera2 > Anchor > Panel > Button >)를 선택하고, Inspector창에서 UISliced Sprite (Script) 컴포넌트의 Color Tint를 찾아서 색을 녹색으로 바꿔줍니다.

[그림 4-27]

그리고 'Camera1' 오브젝트를 선택하고 Camera 컴포넌트의 Normalized View Port Rect에서 Y와 H의 값를 0.5로 입력합니다.

마지막으로 'Camera2' 오브젝트를 선택하고 Camera 컴포넌트의 Normalized View Port Rect에서 Y값을 0, H의 값를 0.5로 입력합니다.

[그림 4-28]

그 결과 큐브의 다른 면을 비추는 2개의 카메라가 하나의 화면에서 상하로 나뉘어서 보이는 것을 확인할 수 있을 것입니다.

Rendering Path

유니티는 다른 렌더링 경로를 지원합니다. 사용자는 게임의 컨텐츠, 타겟 플랫폼/하드웨어에 따라 어떤 것을 사용할지 정해야 합니다. 다른 렌더링 경로는 다른 기능과 빛과 그림자에 주로 영향을 주는 성능의 특징을 가집니다.

사용자 프로젝트에 의해 사용되는 렌더링 경로는 플레이어 세팅(Player Settings)에서 선택됩니다. 추가로, 사용자는 각 카메라에 그것을 오버라이드(override) 할 수 있습니다.

Target Texture

이 기능은 유니티 고급 라이센스에만 있습니다. 이것은 카메라의 뷰를 텍스쳐에 위치시켜서 다른 객체에 적용할 수 있게 합니다. 이것은 스포츠 공간의 비디오 모니터, 감시 카메라, 반사 등을 생성하기 쉽게 합니다.

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

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

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

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

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

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

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

페이스북 왓츠앱 인수

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

2) Camera

카메라는 우리가 일반적으로 생각하는 카메라의 역할보다 조금 더 다양한 일을 하고 있습니다.

단순히 화면을 어떻게 보이게 할 것인가의 역할 뿐 만이 아니라, 카메라가 소리를 캡쳐해낼 수 있는지, 또는 소리를 내는 역할을 할 수 있는 지(BGM), 카메라가 잡아내는 화면의 안에 있는 사용자가 어떤 방식으로 Input하여 조작할 수 있는지 등 컴포넌트의 구성에 따라 많은 역할들을 수행할 수 있습니다.

오브젝트를 클릭해보면, Camera, Audio Listener, UICamera (Script) 이렇게 3가지 컴포넌트를 볼 수 있는데, 이 중에서 가장 중요한 Camera 컴포넌트에 대해서 알아보겠습니다.

[그림 4-15]

Camera 컴포넌트는 카메라가 화면을 비추는 영역과 그 영역의 백그라운드 처리 효과 등, 전반적인 View 컨트롤을 하고 있습니다.

Clear Flags

화면의 어떤 부분이 제거될지 정합니다. 이것은 다른 게임 요소를 끌어오기 위하여 카메라를 사용할 때 편리합니다.

NGUI에서 Simple 2D UI를 만들게 되면 기본적으로 이 부분이 Depth only로 맞추어져 있습니다.

Depth only는 카메라가 볼 수 있는 영역(Scene에서 보이는 상자형태의 영역)에 있는 오브젝트만 Depth 수준에 따라서 순서를 정하여 렌더링하는 기능을 가지고 있습니다. 즉, 하나의 카메라만 있고 그 카메라 영역 안에 1개의 오브젝트만 있다면, 그 UI만 렌더링해서 보여주지만, 서로 다른 곳을 비추는 두 개 이상의 카메라가 있고 그 카메라들 안에 다양한 오브젝트들이 있다면, 컴포넌트에 있는 Depth 값에 따라서 화면에 순서대로 렌더링 하는 기능입니다.

즉, Depth only로 설정된 카메라는 볼 수 있는 영역에 있는 오브젝트 이외의 렌더링은 일어나지 않기 때문에, Depth 수치를 높게 줘서 다른 카메라에서 보이는 영역 위에 이 카메라를 통해서 버튼 UI만 보이게 얹을 수 있습니다. 그래서 Simple 2D UI를 만들게 되면 기본적으로 이 부분이 Depth only로 맞추어져 있는 것입니다.

이외에도 UI용 카메라가 아닌 일반 카메라에서 자주 쓰이는 기능에는 Skybox와 Solid Color가 있습니다.

Skybox 기능을 선택하면, 화면의 빈 공간은 현재 카메라의 스카이박스를 보여줄 것입니다. 만약 카메라가 스카이박스 설정을 가지고 있지 않으면 Render Settings (Edit->Render Settings)에서 선택된 Skybox를 기본으로 사용합니다. 그런 후에 배경색(Background Color)으로 가게 됩니다. (대안으로 Skybox component가 카메라에 추가될 수 있습니다.)

Solid Color는 말 그대로 화면의 빈 공간을 카메라의 배경색(Background Color)으로 표현하는 기능입니다.

즉, Skybox나 Solid Color의 경우에는 현재 카메라가 볼 수 있는 영역에 있는 오브젝트를 렌더링 한 후에, 남는 공간, 즉, Background 배경에 무엇을 그릴 것인지 정해줄 수 있는 기능을 가지고 있는 것입니다.

마지막으로 Don't Clear라는 기능이 있는데, 이 기능은 색상이나 깊이 버퍼, 등 아무것도 제거하지 않습니다. 결과적으로 각 프레임마다 화면에 렌더링이 덮여 씌워지는 형식으로 행해지고, 이것은 그림이 번진 것 같은(smear-looking)효과를 냅니다. 보통은 잘 사용되지 않으며, 사용자의 정의된 커스텀 셰이더와 함께 사용하는 것이 좋습니다.

Culling Mask

레이어를 사용하여 선택적으로 화면에 그려낼 오브젝트들을 정할 수 있는 기능을 가지고 있습니다. 예를 들어 설명하자면, 게임에서 UI를 배치할 때, 게임 오브젝트의 범위와 UI 범위가 겹쳐지는 불상사가 발생할 경우에도 예외처리가 가능하도록 UI전용 레이어를 따로 지정하고 UI 카메라에서 Culling Mask를 통해 해당 레이어만 렌더링 하도록 지정하는 것이 좋습니다.

현재 열려있는 'Practice NGUI' 씬에서 간단한 예를 통해 기능을 한 번 살펴보겠습니다.

UI Root (2D) 오브젝트의 하위 객체로 큐브를 하나 생성한 뒤, Inspector창에서 x, y, z 좌표를 0, 0, 75.5 로 만들어주고, Layer 콤보 박스에 있는 Default를 클릭해서 add Layer를 선택합니다.

[그림 4-17]

Inspector 창에 나타난 Tagmanager에서 User Layer 8번과 9번에 'UI'와 'Player'라는 이름으로 레이어를 2개 생성합니다.

[그림 4-18]

그리고 다시 Hierarchy에서 큐브를 클릭하여 Inspector창의 내용이 큐브의 내용으로 나타나게 만든 후, Layer 콤보 박스에 있는 Default를 클릭해서 Layer를 'Player'로 바꿔줍니다.

[그림 4-19]

다음으로 'Camera'를 선택해서 Layer를 'UI'로 바꿔줍니다.

[그림 4-20]

설정이 끝났다면, 'Camera' 오브젝트의 Camera 컴포넌트에서 Culling Mask를 UI만 체크했을 때, Player만 체크했을 때, 두 개 다 체크했을 때, 각각 어떻게 게임 플레이 화면이 변하는지 확인해봅시다.

다음 장에서는 Projection 부터 알아보겠습니다.

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

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

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

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

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

페이스북 왓츠앱 인수

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

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

어느 직장인 K씨의 하루 입니다. K씨의 손목에 찬 시계가 하루 종일 맥박과 체온을 체크하고, 신고 있는 신발은 K씨의 의 운동량을 분석해 줍니다. K씨가 착용한 안경은 우리가 볼 수 있는 것 이상의 시각적 정보를 실시간으로 제공해줍니다.

우리가 출퇴근 시 이용하는 자동차는 이제 가정과 사무실을 연결해주는 또 하나의 업무 공간이자 휴식공간입니다. 도로와 공원은 사람이 있는 것을 자동으로 인식하여, 스스로 에너지를 공급하거나 차단합니다. 기업들은 자동으로 이산화탄소 배출량을 저감해 환경오염을 최소화 합니다.

여기서 말한 일상은 모두 정보통신기술변화에 따른 것을 예로 든 것 입니다. 불과 몇년전까지만 해도 영화속 혹은 공상과학 소설속에만 가능하다고 믿었던 현실이 이제는 우리의 일상속에서 이루어지고 있습니다. 이 모든 것이 가능하게 된 것은 정보통신 기술의 발달 때문입니다. 이처럼 ICT는 매우 빠르게 변하고 있습니다.

생활의 변화를 이끄는 사물 인터넷

우리가 살아가면서 인지하던, 인지하지 못하던 ICT 기술은 매일 매일 변화하고 있습니다.이러한 변화 속의 가장 큰 핵심은 사물인터넷 (Internet of things) 입니다. 사물인터넷기술은 생활 속에 존재하는 사물들이 유•무선 네트워크로 연결해 서로 정보를 공유하는 환경을 의미합니다.

이미 사물인터넷기술은 과거 단순히 홈 네트워크를 구성했던 것을 넘어서 , 가전제품과 전자기기뿐 아니라 헬스케어, 스마트카 등다양한 분야에서 활용되고 있습니다.  대표적으로 구글의 구글글라스, 나이키의 퓨얼밴드, 코벤디스의 심장박동 모니터링 등이 사물인테넛 기반으로 만들어졌습니다. 코벤디스의 심장박동 모니터링은 부정맥을 앓고 있는 환자가 디바이스를 활용, 심전도 검사결과를 자동으로 기록해 중앙관제센터로 보내게 됩니다.

빅데이터 기술

중앙관제센터는 검사 결과를 전문가에게 전송해 임상보고서를 작성해서, 보고서를 환자와 적합한 의료진에게 연결합니다. 빅데이터 분석도 사회를 변화시키며 새로운 가치를 창출합니다

빅데이터는 그동안 분석 대상으로 여기지 않았던 다양한 비정형•방대한 데이터를 의미합니다. 빅데이터 분석으로 기업의 경쟁력 제고는 물론, 공공 서비스를 개선하고 있습니다. 빅데이터를 기술을 활용한 사례로, 최근 도입된 심야버스 노선을 들 수 있습니다.  밤늦은 시간의 유동인구와 사람들 이동 경로를 분석해 심야버스 노선 정책을 수립했습니다. 

전자태그(RFID) 기술

전자태그기술을 활용한 음식물 쓰레기 종량제에 적용한 것도 좋은사례가 될 수 있습니다. 지난2013년 1월부터 서울시내 25개 자치구에서 음식물쓰레기 '종량제'가 전면 시행되었습니다. 서울시는 최근 음식물쓰레기 봉투 등을 통해 부피나 무게를 재는 방식으로 비용을 부과하는 음식물쓰레기 '종량제' 실시범위를 현재 일부 자치구 에서 2013년 전 자치구의 모든 공동·단독주택으로 확대했습니다 .

단독주택의 경우 25개 자치구 중 18개 자치구만이 음식물쓰레기 종량제를 실시하고, 나머지는 배출량에 관계없이 가정마다 매달 일정액을 부과하는 정액제를 시행하고 있다. 또, 공동주택의 경우 25개 전 자치구가 정액제를 실시중입니다.

또 RFID는 전파를 이용해 먼 거리에서 정보를 인식하는 기술로, 음식물쓰레기의 발생과 처리 등 단계별 정보를 무선으로 관리하는 무게단위 종량제시스템을 시행하고 있습니다. 칩 방식은 전용용기에 음식물 쓰레기를 배출할 경우 칩을 구입해 용기에 부착하면 그 용기에 대해서 칩과 음식물쓰레기를 수거하는 방식입니다.

APP 개발 온라인 강좌 제4강 [4-5.1] - NGUI 구성

APP 개발 온라인 강좌 제4강 [4-4] - NGUI 구성

스마트러닝을 말하다 - 스마트아카데미 (2)

스마트러닝을 말하다 - 스마트아카데미 (1)

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

APP 개발 온라인 강좌 제3강 [3-6-3] - 비주얼 프로그래밍이란? - Prefab 만들기

Cre8tive ux 훈련 강좌 2014년 4월12일 개강[토요반]

APP 개발 온라인 강좌 제3강 [3-6-2] - 비주얼 프로그래밍이란? - State 구성하기

(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란 무엇인가 - 스마트 아카데미

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

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