유니티 강좌2014. 4. 16. 06:30

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팝 홀로그램 상설공연장 개소

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

창의인재과정 안내

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


Posted by 알 수 없는 사용자
유니티 강좌2014. 4. 15. 07:00

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개월 과정 등록안 -스마트 앱 전문 교육기관

   

Posted by 알 수 없는 사용자
유니티 강좌2014. 4. 14. 11:25

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)효과를 냅니다. 보통은 잘 사용되지 않으며, 사용자의 정의된 커스텀 셰이더와 함께 사용하는 것이 좋습니다.

   

※ 현재 진행 중인 'Practice NGUI' 씬과 같이 UI용 Camera 한 개만 씬에 존재할 경우, Camera 컴포넌트의 Clear Flags 설정을 Depth Only로 해둔다면, 배경을 따로 그리고 있지 않기 때문에 이 그림과 같이 이전에 오브젝트가 위치했던 곳의 렌더링까지 모두 그려주게 되어 화면이 지저분하게 되는 경우가 있습니다.

이럴 경우에는 Clear Flags 설정을 Sky Box나 Solid Color로 해주시면 됩니다.


 


[그림 4-16]



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]


   

[그림 4-21]


※        이와 같은 메시지 창이 나타나면, Yes를 클릭하시면 됩니다. 이 메시지 창은 레이어가 바뀌는 오브젝트 안에 하위 오브젝트가 있을 경우, 하위 오브젝트의 레이어도 함께 바꿀 것인지 물어보는 창입니다.

   

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


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


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

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

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

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

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

페이스북 왓츠앱 인수

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

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


Posted by 알 수 없는 사용자
ICT Trend2014. 4. 10. 14:29

어느 직장인 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 구성하기

Posted by 알 수 없는 사용자
유니티 강좌2014. 4. 9. 06:00

(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에 생성합니다.

   

[그림 4-6]


그러면 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]


※ Widget을 생성할 때, Add To 버튼 옆에 있는 객체를 주목하시길 바랍니다.

위의 과정에서는 결과적으로 Add To [Panel]. 즉, Panel 오브젝트의 하위 객체로 생성이 되었지만, 그 이후로 Widget을 생성할 때, Add To 버튼 옆에 있는 객체를 확인하지 않으면, 버튼 안에 버튼을 또 넣는 등의 실수를 하게 됩니다.

   

다음으로는 본격적으로 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)


   

Posted by 알 수 없는 사용자
유니티 강좌2014. 4. 8. 06:00

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

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

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

   

Posted by 알 수 없는 사용자
창업2014. 4. 7. 16:38

 

창업 희망자에게 자금은 물론 창업교육과 멘토링 등 맞춤형 지원을 제공하는 창업지원 프로그램이 추진됩니다. 중소기업청은 창업자 특성별 맞춤형 방식으로 5000만원 범위 내에서 창업준비자금과 전문 창업교육 및 멘토링 등을 제공하는 '2014년 창업 맞춤형사업'을 본격 추진하기로 하고 7일부터 '창업넷'을 통해 지원자 모집에 들어간다고 밝혔습니다.

   

이번 사업은 창업자가 자신의 특성을 고려해 지원기관 및 프로그램을 직접 선택할 수 있는 수요자 맞춤형 방식으로 운영됩니다. 이에 따라 39개 전문기관(대학, 연구기관, 투자기관 등)이 제공하는 차별화된 프로그램을 창업자가 선택·활용하는 '창업기관 맞춤형 프로그램' , 공공·민간 연구기관의 연구원 대상 '연구원창업 프로그램' , 창업자의 발굴 창구를 다양화하기 위한 '관련 부처(미래부 창조경제타운, 특허청 국민행복기술 등) 연계 프로그램' , 다른 창업지원사업에 참여해 매출액, 고용, 성장성 등이 높은 것으로 평가된 창업자를 선별, 추가 지원하는 '우수 창업자 후속지원 프로그램' 등 6개 프로그램으로 구성됩니다.

   

 

 

 

특히 올해부터는 자금지원 외에, 교육·멘토링 등의 활용 효율성을 높이기 위해 창업자 본인이 창업아이템의 특성에 맞게 지원프로그램도 다양하게 직접 선택·활용할 수 있도록 운영방식이 개선됐습니다. 기존에는 창업자가 선택한 지원기관에서 제공하는 프로그램만 참여할 수 있었으나 이제는 창업자가 특성에 따라 타 지원기관의 프로그램도 선택해 참여할 수 있게 됐습니다.

   

교육·멘토링 프로그램도 운영기관별 특성에 따라 기술·경영 등 17개 분야 150종류로 다양화하되, 창업자가 프로그램을 자율 선택해 40시간 이상 교육·멘토링을 받을 수 있도록 했습니다.

   

 

창업지원기관별 지원 프로그램(예시)

 

 

① 의무교육 프로그램

 창업준비, 회계·법률, 경영, 자금 등 창업 기본교육

 

② 멘토링 프로그램

내·외부 전문가를 활용한 예비창업자 멘토링

 

③ 특화 프로그램

 기관의 고유기능(강점)과 연계한 창업지원 프로그램

   

특히 올해부터는 지원대상자 선발 방식도 대폭 개선됐습니다.  종전 창업아이템만을 평가하던 방식에서 벗어나 신청자 대상으로 일정기간 사전 교육과정(4주)을 운영해 창업 아이템과 창업자(CEO) 역량을 동시에 평가하는 '관찰식 멘토링 평가'로 전환됐습니다.

   

창업진흥원 내에'멘토링 평가센터'에서 전문 멘토단이 창업의지 및 역량 등을 심사하는 '관찰식 창업자 평가'와 함께 창업교육, 창업아이템 소비자 반응조사 등이 최대 4주간에 걸쳐 캠프방식으로 실시됩니다. 교육기간(4주) 중 창업자 스스로 창업교육·멘토링, 소비자 반응조사 결과 등을 반영한 수정 사업계획서를 작성하고 캠프 종료 시 이를 재평가해 지원대상자를 최종 선정하게 되는 등 치밀한 준비과정을 통해 창업성공 가능성이 한층 높아질 것으로 기대됩니다.

   

 

 

예비창업자 또는 2013년 1월 1일 이후 창업기업으로 사업참여를 희망하는 기업은 7~22일 창업넷(http://www.changupnet.go.kr)을 통해 온라인으로 신청하면 되고, 보다 자세한 사항은 중소기업청 홈페이지(http://www.smba.go.kr) 또는 창업넷 등을 통해 확인할 수 있습니다.

   

문의:  중소기업청 창업진흥과 042-481-4386

   

자료 및 기사출처 :정책브리핑뉴스

http://www.korea.kr/policy/economyView.do?newsId=148776640&call_from=naver_news

 

 

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

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

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

 클라우드 문서저작도구 대세로 - 스마트아카데미

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

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

APP 개발 온라인 강좌 제3강 [3-6-1] - 비주얼 프로그래밍이란? - PlayMaker 사용해보기

 

Posted by 알 수 없는 사용자
ICT Trend2014. 4. 5. 09:56

PC로 시작한 스마트 교육도 모바일로 환경이 바뀌는 것 같습니다. 모바일과 스마트기기는 과연 교육 효과를 높여줄까? 분명 그렇게 판단했으니 그 복잡한 프로그램이 스마트폰과 태블릿으로 넘어오는 것일게입니다.

 

 

태블릿 UX에 대한 리서치가 아직 더 많이 필요하다고 입을 모읍니다.  아직 태블릿은 나온 지 그리 오래된 플랫폼이 아니라고 합니다. 처음부터 태블릿을 받아들여 온 아이들과, PC를 쓰던 경험에서 태블릿으로 옮긴 성인이 접근하는 방식은 분명 다를 겁니다. 특히 그게 교육 영역이라면 콘텐츠 개발에 연구가 더 많이 필요할 겁니다.”

 

정작 궁금한 것은 태블릿과 PC가 과연 어린이들의 공부에 도움이 될 것이냐는 점입니다. 아직도 학교와 교육 공간에서 스마트 기기를 쓰는 것에 대해 학부모들의 거부감이 남아 있습니다. ‘중독’을 염려하는 시선도 여전합니다. 공부를 핑계로 게임이나 인터넷을 써본 경험들이 다 있을 것이다. 이를 어디까지 받아들여야 할까요?

 

 

 

 

“중독 문제는 중요한 사회적 이슈입니다. 문제가 있다는 것은 알겠지만 왜 이런 상황인지 판단하는 건 중요한 일입니다. 돌아보면 라디오가 생겼을 때도 마찬가지였고, TV와 인터넷도 똑같은 논란을 불러 일으켰습니다. 하지만 되돌아보면 이런 것들이 우리 세상을 바꿔놓았습니다. 분명히 단점이나 부작용이 따르겠지만 장점이 있기 때문에 변화가 시작된 것입니다.

 

어떤 것이든 새로운 시스템이 등장하면 부작용이 뒤따르지만 많은 사람들이 받아들이는 흐름을 거스를 수는 없다는 것입니다. 중독이 걱정이라면 적절한 대처에 대해 고민해야 할 것입니다. 아이패드를 통해 더 많은 사람들이 영어를 편하게 공부하고 있는데 중독이 걱정된다고 해서 막을 게 아니라 더 잘 쓸 수 있도록 긍정적인 부분을 유도하는 게 필요합니다. 인터넷만 봐도 중독성도 있고, 보면 안되는 정보도 많습니다. 하지만 이를 안전하게 잘 쓸 수 있도록 사회적으로 고민하면서 훌륭한 매체가 됐습니다.

 

 

 

스티븐 조 대표는 중독 같은 자극적인 단어보다는 잘 이용할 수 있는 방법에 대한 고민이 필요하다고 강조했다. 이야기 말미에 나온 이야기가 이 긴 이야기를 단숨에 정리해 줬습니다. 흐름을 막기는 어려울 겁니다. 분명 무시할 수 없는 부정적 이유도 있겠지만 그 누구도 한번 오기 시작한 미래와 싸울 수는 없습니다.

 

 

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

비주얼 프로그래밍이란? - 프로그래밍의 구조

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

비주얼 프로그래밍이란? - 플레이메이커의 설치

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

비주얼 프로그래밍이란? - Finite State Machine(FSM)

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

 

 

 

 

 

Posted by 알 수 없는 사용자
ICT Trend2014. 4. 2. 09:41

영어 공부는 한국 사람이라면 대부분이 겪는 공통된 숙제이자 고민거리입니다. 연초만 되면 가장 많이 올라오는 ‘신년계획’ 주제이기도 합니다. 하지만 여전히 PC나 태블릿으로 공부하는 것에 대해서는 반신반의하는 것이 사실입니다.

사회 일각에서는  스마트폰과 태블릿에는 ‘중독’이라는 꼬리표가 늘 따라다니지만 다른 한쪽에서는 터치스크린을 이용한 교육용 앱 시장이 급성장하고 있습니다.  로제타스톤코리아의 스티븐 조 대표를 만나 태블릿을 이용한 온·오프라인 학습 현장의 이야기를 들어봤습니다.

 

 

 

 

스티븐 조 대표는 아직까지 국내에선 컴퓨터나 태블릿 앞에 앉아서 공부한다는 것에 대해 보수적이라는 것이  느끼는 현실이라고 합니다. 종이책을 봐야 하고, 직접 선생님이 과정을 지도하는 등 실제 오프라인에서 교육이 일어나길 바라는 수요가 아직 많다는 것입니다. 그래서 전세계에서 유일하게 한국에서만 오프라인 학습 환경을 만들었다고 합니다.

 

“그럼 오프라인에서는 뭔가 다른 교육 과정이 따를까? 교재가 다른가? 그렇지는 않다고 합니다. 공부방에는 보통 PC나 아이패드가 깔린다고 합니다. 아이들은 와서 각자 자리에 앉아 태블릿을 이용해 각자 공부합니다.  가장 기본적인 ‘토탈리’를 비롯해 영상채팅으로 원어민 교사와 직접 이야기할 수 있는 프로그램 등을 지도해주는 관리자 역할의 교사가 하나 있을 뿐,  여전히 태블릿은 자율학습이 중심이라고 합니다.

 

 

 

 PC로 시작한 스마트 교육도 모바일로 환경이 바뀌는 것 같습니다. 모바일과 스마트기기는 과연 교육 효과를 높여줄까? 분명 그렇게 판단했으니 그 복잡한 프로그램이 스마트폰과 태블릿으로 넘어오는 것일게입니다.

 

 

 

태블릿 UX에 대한 리서치가 아직 더 많이 필요하다고 입을 모읍니다.  아직 태블릿은 나온 지 그리 오래된 플랫폼이 아니라고 합니다. 처음부터 태블릿을 받아들여 온 아이들과, PC를 쓰던 경험에서 태블릿으로 옮긴 성인이 접근하는 방식은 분명 다를 겁니다. 특히 그게 교육 영역이라면 콘텐츠 개발에 연구가 더 많이 필요할 겁니다.

 

 

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

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

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

비주얼 프로그래밍이란? - PlayMaker 사용해보기

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

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

 

Posted by 알 수 없는 사용자
유니티 강좌2014. 3. 31. 06:00

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


Posted by 알 수 없는 사용자