BLOG main image
분류 전체보기 (192)
Network Pr. (88)
Multimedia Pr. (0)
Game Pr. (83)
Windows GUI Pr. (0)
Windows Shell Pr. (0)
Design Pattern (0)
Tiny Clinet (Engine) (0)
Scrap (6)
1'st Life (5)
2'nd Life (8)
Secrete Zone (1)
Free Zone (1)
John Travolta
icoder's storage - WSANtohl
tips cara agar blog tampil pad..
tips cara agar blog tampil pad..
1,128,533 Visitors up to today!
Today 44 hit, Yesterday 82 hit
daisy rss
tistory 티스토리 가입하기!
2016.06.30 18:26

translated by icoder

Hello World 프로젝트는 컴퓨터 프로그래밍 분야에서 전통적인 방법론입니다. 이것은 새로 무언가를 배우려고 시작할 때 간단히 시도해 볼 수 있는 예제입니다. 자 GitHub를 가지고 시작해 봅시다!

The Hello World project is a time-honored tradition in computer programming. It is a simple exercise that gets you started when learning something new. Let’s get started with GitHub!

아래 내용을 배울거에요:

  • 리파저토리 만들고 사용하기
  • 새로운 브랜치를 만들고 관리하기
  • 파일을 수정하고 커밋하여 GitHub에 저장하기
  • 풀 리퀘스트를 만들고 머지하기

You’ll learn how to:

  • Create and use a repository
  • Start and manage a new branch
  • Make changes to a file and push them to GitHub as commits
  • Open and merge a pull request

What is GitHub?

GitHub는 버전 컨트롤과 협동작업을 위한 코드 호스팅 플랫폼입니다. 이것은 어느 곳에서나 모두 함께 프로젝트를 같이 작업할 수 있도록 해 줍니다.

이 튜토리얼은 GitHub의 핵심 요소를 소개합니다. 리파저토리, 브랜치, 커밋, 풀 리퀘스트 같은 것들이죠. 님은 Hello World 리파저토리를 만들고 GitHub의 풀 리퀘스트 워크플로우를 배울 겁니다. 코드를 만들고 리뷰하는 아주 대중적인 방법론이죠.

GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.

This tutorial teaches you GitHub essentials like repositoriesbranchescommits, and Pull Requests. You’ll create your own Hello World repository and learn GitHub’s Pull Request workflow, a popular way to create and review code.

코드가 필요하지 않습니다.

이 튜토리얼을 진행하기 위해 계정과 인터넷 연결만 되어 있으면 됩니다. 어떻게 코드를 작성하는지, 커맨드라인을 어떻게 사용해야 하는지, Git(버전 컨트롤 소프트웨어) 설치를 어떻게 해야 하는지에 대한 지식은 필요없습니다. 

팁: 이 가이드 페이지를 별도의 브라우저 윈도우(또는 탭)에 열어 두세요. 그러면 튜토리얼 스텝을 진행하는 동안에도 튜토리얼을 살펴볼 수 있습니다.

No coding necessary

To complete this tutorial, you need a account and Internet access. You don’t need to know how to code, use the command line, or install Git (the version control software GitHub is built on).

Tip: Open this guide in a separate browser window (or tab) so you can see it while you complete the steps in the tutorial.

Step 1. Create a Repository

리파저토리는 보통 단일 프로젝트를 구성하기 위해 사용합니다. 리파저토리는 폴더, 파일, 이미지, 비디오, 스프레드시트, 데이터셋 등등 프로젝트에 필요한 모든 파일을 담을 수 있습니다.  다만, README 파일이나 프로젝트를 설명하는 파일은 꼭 포함하기를 권장드립니다. GitHub는 리파저토리를 새로 생성할 때 이러한 것들을 추가하는 것을 쉽게 할 수 있습니다. 또한, 라이센스 파일을 추가 하는 등의 일반 옵션 기능을 제공합니다.

당신의 hello-world 리파저토리는 아이디어나 각종 리소스를 저장하는 장소로 활용될 수 있습니다. 물론, 다른 사람과 토론하는 것들을 공유하는 데에도 사용될 수 있습니다.

repository is usually used to organize a single project. Repositories can contain folders and files, images, videos, spreadsheets, and data sets – anything your project needs. We recommend including a README, or a file with information about your project. GitHub makes it easy to add one at the same time you create your new repository. It also offers other common options such as a license file.

Your hello-world repository can be a place where you store ideas, resources, or even share and discuss things with others.

새 리파저토리 만들기

  1. 상단 오른쪽 구석에 위치한 당신 아바타 또는 아이덴티콘 옆에있는 버튼을 클릭하세요. 그리고 New repository 항목을 선택하세요.
  2. 리파저토리 이름을 hello-world로 합시다.
  3. 간단히 프로젝트 설명을 쓰세요.
  4. Initialize this repository with a README. 항목을 체크하세요.

마지막으로, Create repository버튼을 클릭하세요.

To create a new repository

  1. In the upper right corner, next to your avatar or identicon, click  and then select New repository.
  2. Name your repository hello-world.
  3. Write a short description.
  4. Select Initialize this repository with a README.

Click Create repository.

Step 2. Create a Branch

브랜칭은 리파저토리에 동시에 서로 다른 버전에 대해서 작업하는 방법론 입니다.

기본적으로 리파저토리는 master 라는 이름의 브랜치 한개를 가지고 있습니다. 최종 작업 브랜치로 여겨지는 놈이죠. 우리는 각종 실험을 위해 브랜치들을 사용하고 master 에 커밋하기 전에 수정 작업을 합니다.

master 브랜치에서 새로운 브랜치를 따서 만들때, 그 시점은  master 의 복사본이나 스냅샷을 만드는 것입니다. 만약 당신이 님 브랜치에서 작업하고 있는데, 다른 누군가가 master 브랜치를 수정 했다면, 이 수정한 내용을 가져와서 업데이트 해야 합니다.

아래 다이어 그램은 이러한 과정을 보여줍니다.

  • master 브랜치가 있고요
  • feature 라고 불리는 새로운 브랜치를 만들었습니다. (이 브랜치에서는 'feature work' 작업을 할 꺼니까요)
  • 이 일련의 과정은 master 로 머지되기 전에 feature 가 코드를 가져오는 모습입니다.

서로 다른 버전 파일을 저장해본 경험이 있나요? 아래 같은 거요:

  • story.txt
  • story-joe-edit.txt
  • story-joe-edit-reviewed.txt

브랜치들은 이와 비슷한 목적으로 GitHub 리파저토리들에서도 사용됩니다.

이 GitHub 서비스도, 우리 개발자들, 기획자들, 디자이너들은 버그를 수정하고나 새로운 피쳐들 작업하기 위해 master 브랜치에서 작업용 브랜치를 새로 따서 작업합니다. 수정작업이 완료되면 master 에 해당 내용을 머지합니다.

Branching is the way to work on different versions of a repository at one time.

By default your repository has one branch named master which is considered to be the definitive branch. We use branches to experiment and make edits before committing them to master.

When you create a branch off the master branch, you’re making a copy, or snapshot, of master as it was at that point in time. If someone else made changes to the master branch while you were working on your branch, you could pull in those updates.

This diagram shows:

  • The master branch
  • A new branch called feature (because we’re doing ‘feature work’ on this branch)
  • The journey that feature takes before it’s merged into master

Have you ever saved different versions of a file? Something like:

  • story.txt
  • story-joe-edit.txt
  • story-joe-edit-reviewed.txt

Branches accomplish similar goals in GitHub repositories.

Here at GitHub, our developers, writers, and designers use branches for keeping bug fixes and feature work separate from our master (production) branch. When a change is ready, they merge their branch into master.

새 브랜치 만들기

  1. 당신의 새 리파저토리 hello-world 로 가세요.
  2. branch: master 라고 적혀있는 파일리스트 상단의 드랍다운 버튼을 클릭하세요.
  3. 텍스트 박스에 브랜치 이름을 readme-edits 라고 입력합니다.
  4. 파란색 Create branch 버튼을 클릭하거나 엔터키를 누르세요.

자 이제 당신은 master 와 readme-edits 라는 두개 브랜치를 가지게 되었습니다. 이들은 거의 똑같습니다. 하지만 곧 이 새로운 브랜치에 이것저것 수정 작업을 해 보겠습니다.

To create a new branch

  1. Go to your new repository hello-world.
  2. Click the drop down at the top of the file list that says branch: master.
  3. Type a branch name, readme-edits, into the new branch text box.
  4. Select the blue Create branch box or hit “Enter” on your keyboard.

Now you have two branches, master and readme-edits. They look exactly the same, but not for long! Next we’ll add our changes to the new branch.

Step 3. Make and commit changes

아싸라비야! 이제 당신은 readme-edits 브랜치를 위한 코드뷰를 가졌습니다. 이것은 master 의 복사본이죠. 자, 몇 가지 수정 작업을 해 볼까요?

변경된 내용을 저장하는 것을 커밋이라고 부릅니다. 각각의 커밋은 이에 해당하는 커밋 메시지를 가집니다. 이 메시지는 왜 수정작업이 있었는지를 설명합니다. 커밋 메시지는 당신의 수정 작업 히스토리를 캡쳐하므로 다른 작업자가 당신이 한 작업 내용을 이해할 수 있습니다.

변경 사항을 만들고 커밋하기

  1. 파일을 클릭합니다.
  2. 편집 파일 뷰 상단 우측에 있는 연필 아이콘을 클릭합니다.
  3. 편집기에서 몇 가지 내용을 고쳐보세요.
  4. 님의 변경 작업을 설명하는 커밋 메시지를 작성하세요.
  5. Commit changes 버튼을 클릭합니다.

이 변경은 readme-edits 브랜치에 README 파일을 만드는 것입니다. 그러므로 이제부터 이 브랜치는 master 와 다른 내용을 포함하게 되었습니다.

On GitHub, saved changes are called commits. Each commit has an associatedcommit message, which is a description explaining why a particular change was made. Commit messages capture the history of your changes, so other contributors can understand what you’ve done and why.

Make and commit changes

  1. Click the file.
  2. Click the  pencil icon in the upper right corner of the file view to edit.
  3. In the editor, write a bit about yourself.
  4. Write a commit message that describes your changes.
  5. Click Commit changes button.

These changes will be made to just the README file on your readme-editsbranch, so now this branch contains content that’s different from master.

Step 4. Open a Pull Request

잘 하셨습니다. 이제 당신은 master 에서 떼어낸 브랜치에 변경 사항을 가지게 되었습니다. 이제 풀리퀘스트를 오픈할 수 있어요.

풀리퀘스트 GitHub 협동작업의 핵심입니다. 당신이 풀리퀘스트를 오픈한다는 것은 변경 사항을 반영해 달라고 제안하는 것이고 누군가의 리뷰를 요청하는 것입니다. 또한, 프로젝트에 대해 기여를 하고 브랜치에 변경 사항을 머지하는 것입니다. 풀리퀘스트는 두 브랜치 사이의 컨텐츠 차이를 보여줍니다. 변경, 추가 그리고 제거는 초록색 그리고 빨간색으로 보여집니다.

당신이 커밋 하자마자, 풀리퀘스트를 오픈할 수 있고 토론을 시작할 수 있습니다. 코드가 완료되기 전이라도 말이죠.

또한 당신은 풀리퀘스트 메시지에 GitHub의 @mention system 를 사용하는 것으로 특정 사람이나 팀에게 피드백 할 수 있습니다. 그들이 복도에 있든 10시간 시차있는 지역에 떨어져 있든 말이죠.

또한, 당신은 당신만의 리파저토리에 풀리퀘스트를 오픈할수도 있고 님 스스로 머지해 볼 수도 있습니다. 큰 프로젝트에 참여하기 전에 이렇게 연습 해 보는것은 아주 좋은 방법입니다.

README 파일 변경 사항을 위해 풀리퀘스트 오픈하기

아래 이미지를 클릭하시면 크게 보실 수 있습니다.


Pull Request 탭을 클릭한 후 등장하는 페이지에서 초록색의 New pull request 버튼을 클릭해 주세요.

master (원본) 과 비교하기위해 당신이 만든 브랜치 

readme-edits 를 선택하세요.

컴페어 페이지에서 서로 다른 부분을 살펴보고 제출하고자 하는게 무었인지 확인하세요.

이것들이 제출하고자 하는 내용이 맞고 만족 하신다면 큰 초록색 Create Pull Request 버튼을 클릭하세요.

당신의 풀리퀘스트에 대한 타이틀과 변경 사항에 대한 간단한 설명을 적으세요.

다 했으면, Create pull request버튼을 클릭하세요.

: 코멘트에 에모지(emoji, 일본그림문자)를 사용할 수 있습니다. 또한, 이미지와 GIF를 드래그 드랍하여 넣을 수 있습니다.

Nice edits! Now that you have changes in a branch off of master, you can open a pull request.

Pull Requests are the heart of collaboration on GitHub. When you open a pull request, you’re proposing your changes and requesting that someone review and pull in your contribution and merge them into their branch. Pull requests showdiffs, or differences, of the content from both branches. The changes, additions, and subtractions are shown in green and red.

As soon as you make a commit, you can open a pull request and start a discussion, even before the code is finished.

By using GitHub’s @mention system in your pull request message, you can ask for feedback from specific people or teams, whether they’re down the hall or 10 time zones away.

You can even open pull requests in your own repository and merge them yourself. It’s a great way to learn the GitHub Flow before working on larger projects.

Open a Pull Request for changes to the README

Click on the image for a larger versionWhen you’re done with your message, click Create pull request!

Tip: You can use emoji and drag and drop images and gifs onto comments and Pull Requests.

Step 5. Merge your Pull Request

마지막 단계입니다. 당신의 변경 사항을 함께 가져올 시간이죠. - 당신의 readme-edits 브랜치를 master 브랜치에 머징하는 것 입니다.

  1. master 에 변경 사항을 머지하기위해, 초록색 Merge pull request 버튼을 클릭하세요.
  2. Confirm merge. 버튼을 클릭하세요.
  3. 쭉 진행하시고 브랜치를 제거합니다. 왜냐하면 이 변경사항이 이제 포함되었기 때문이지요. 보라색 박스 영역에 있는 Delete branch 버튼입니다.

In this final step, it’s time to bring your changes together – merging yourreadme-edits branch into the master branch.

  1. Click the green Merge pull request button to merge the changes intomaster.
  2. Click Confirm merge.
  3. Go ahead and delete the branch, since its changes have been incorporated, with the Delete branch button in the purple box.


튜토리얼을 모두 완료하셨습니다. 이제 당신은 GitHub에서 프로젝트를 만들고 풀리퀘스트 하는 방법을 배웠습니다.

아래는 당신이 이 튜토리얼에서 배운 것들 입니다.

  • 오픈 소스 리파저토리를 생성했습니다.
  • 새로운 브랜치를 따고 이것저것 만져 봤습니다.
  • 파일을 수정하고 GitHub에 변경사항을 커밋 해 봤습니다.
  • 풀리퀘스트를 오픈하고 이것저것 만져 봤습니다.

당신의 GitHub profile을 살펴보세요 새로운 contribution squares를 보실 수 있습니다. 

풀리퀘스트의 더 많은 기능을 배우고 싶으시면 GitHub Flow Guide 를 읽으시길 권해드립니다. 또한 GitHub Explore 를 방문하실 수도 있고 오픈소스 프로젝트에도 참여 해 보세요.

팁: 저희가 준비한 다른 가이드 와 유튜브 채널도 확인 해 보세요.


By completing this tutorial, you’ve learned to create a project and make a pull request on GitHub! 

Here’s what you accomplished in this tutorial:

  • Created an open source repository
  • Started and managed a new branch
  • Changed a file and committed those changes to GitHub
  • Opened and merged a Pull Request

Take a look at your GitHub profile and you’ll see your new contribution squares!

If you want to learn more about the power of Pull Requests, we recommend reading the GitHub Flow Guide. You might also visit GitHub Explore and get involved in an Open Source project

Tip: Check out our other Guides and YouTube Channel for more GitHub how-tos.

Last updated April 7, 2016

2013.07.05 15:01

[Unity3D 강좌] NGUI Example 10 - Localization


written by icoder(

Localization 예제는 NGUI의 Localization, UILocalize 컴포넌트를 이용하여 다국어를 지원하는 손쉬운 방법을 보여줍니다. 현실적으로 실무에서 사용할 수 있을지 없을지는 좀 더 확인이 필요 하겠지만, 적어도 NGUI 개발 영역 내에서는 적은 비용으로 완벽한 다국어 지원 UI를 구성할 수 있습니다.

필요한 부분만 만들면서 설명 하겠습니다. 또한 원본 예제와는 달리, 버튼등의 간단한 UI는 Widget Tool을 사용해서 만들겠습니다. Widget Tool을 사용하는 기본적인 방법은 [NGUI 튜토리얼]을 참고하세요.


1. 새로운 씬을 만들고 기본 카메라를 제거합니다. 메뉴>NGUI>Open the UI Wizard 항목을 선택해서 UI Tool 화면을 띄우고 Create Your UI 버튼을 클릭해서 NGUI 기본 뼈대를 만듭니다. 특별히 변경 할 다른 속성은 없습니다. 기본 배경을 위해 Panel의 하위 오브젝트로 Tiled Sprite 위젯을 한장 추가합니다. Wooden Atlas의 Wooden Background sprite를 사용했습니다. 가로 세로 크기는 500으로 맞춰주세요.


2. 다국어 문자열 리소스 정보가 필요합니다. NGUI에서는 Localization 컴포넌트를 사용하여 UI에서 사용할 문자열 리소스 파일을 임포트합니다. 우선, 빈 오브젝트를 만들고 이름을 "Localization"으로 변경합니다. 이어서 메뉴>Component>NGUI>Internal>Localization 항목을 선택해서 Localization 컴포넌트를 추가합니다. 여기에 실제 문자열 리소스를 추가해야 하는데, NGUI가 미리 준비한 English, French 파일을 지정하겠습니다.


3. 문자열 리소스 파일은 윈도우즈의 INI 파일처럼 "키 = 값" 형태로 구성되어 있습니다. Localization 컴포넌트 스크립트는 이들 리소스 파일을 Text Asset으로 가지고 있는 싱글톤 객체입니다. 언어 선택 Popup List 위젯에 Language Select 컴포넌트가 연결되되고 특정 언어가 선택되면 Localization 객체의 currentLanguage를 변경합니다. 이 때 Localization 객체는 UIRoot의 모든 위젯에게 OnLocalize 핸들러 함수를 호출합니다. UILocalize 컴포넌트를 추가한 위젯은 이 핸들러 함수가 호출되고 Localization 객체에서 문자열 정보를 가져와 디스플레이 하는 방식입니다. 복잡해 보이지만, 간단하고 당연한 플로우입니다. 아래에 중요 코드를 첨부합니다. 참고하세요.

 public class LanguageSelection : MonoBehaviour
     void OnLanguageSelection (string language)
         if (Localization.instance != null)
             // Localization 객체에게 언어를 바꾸라고 합니다.
             Localization.instance.currentLanguage = language;

 public class Localization : MonoBehaviour
     public string currentLanguage
             return mLanguage;
             if (mLanguage != value)
                startingLanguage = value;

                if (!string.IsNullOrEmpty(value))
                    if (languages != null)
                        for (int i = 0, imax = languages.Length; i < imax; ++i)
                            TextAsset asset = languages[i];

                            if (asset != null && == value)

                 // 바뀐 언어에 해당하는 텍스트 애셋 리소스를 로드합니다.
                 TextAsset txt = Resources.Load(value, typeof(TextAsset)) as TextAsset;

                 if (txt != null)


     void Load (TextAsset asset)
         mLanguage =;
         PlayerPrefs.SetString("Language", mLanguage);
         ByteReader reader = new ByteReader(asset);
         mDictionary = reader.ReadDictionary();

         // 위젯들에게 언어를 바꾸라고 브로드캐스팅 합니다.
         UIRoot.Broadcast("OnLocalize", this);

 public class UILocalize : MonoBehaviour
     void OnLocalize (Localization loc) { if (mLanguage != loc.currentLanguage) Localize(); }

     public void Localize ()
         Localization loc = Localization.instance;
         UIWidget w = GetComponent<UIWidget>();
         UILabel lbl = w as UILabel;
         UISprite sp = w as UISprite;

         if (string.IsNullOrEmpty(mLanguage) && string.IsNullOrEmpty(key) && lbl != null)
             key = lbl.text;

         string val = string.IsNullOrEmpty(key) ? "" : loc.Get(key);

         if (lbl != null)
                // 라벨 텍스트를 변경합니다.
             UIInput input = NGUITools.FindInParents<UIInput>(lbl.gameObject);
             if (input != null && input.label == lbl)
                 input.defaultText = val;
                 lbl.text = val;

         else if (sp != null)
                // 텍스쳐 스프라이트를 변경합니다.
             sp.spriteName = val;
         mLanguage = loc.currentLanguage;


4. Localization 객체에게 언어를 바꾸라고 지시할 Popup List를 만들어 보겠습니다. Panel 오브젝트를 선택하고 Widget Tool을 이용하여 Popup List 위젯을 만듭니다. Wooden Atlas를 사용하고 Background에 Button, Highlight에 Button, Foreground에 Highlight - Shadowed를 사용합니다. 나머지 속성은 아래 그림처럼 지정합니다.


5. Popup List에 Language Selection 컴포넌트를 추가해 보겠습니다. 따로 설정할 속성은 없지만, 중요한 부분이기에 따로 섹션을 나누었습니다. 메뉴>Component>NGUI>Interaction>Language Selection 항목을 선택합니다.


6. 이 상태로 게임을 실행해도 팝업 리스트에 언어 목록이 디스플레이 됩니다. 언어를 변경했을 때 어떻게 텍스트나 스프라이트가 바뀌게 되는지 확인 해 보겠습니다. 먼저, Panel의 자식으로 Label 위젯을 하나 추가합니다. 이어서 UILocalize 컴포넌트를 추가합니다. 메뉴>Component>NGUI>UI>Localize 항목을 선택하면 됩니다. Key 값은 문자열 텍스트 파일 중 해당 위젯에 사용할 문자열 키를 입력합니다. 단계 3에서 설명했듯이 문자열 리소스 파일은 "키=값" 형태로 구성됩니다. 여기서는 "Info"를 지정 해 봅시다. 이렇게 Key를 지정한 경우 Label 위젯의 텍스트 입력란은 의미가 없으니 해당 위젯을 설명하는 내용으로 채워주세요.Key 필드가 공백이면 입력된 텍스트를 키로 문자열을 찾게됩니다.


7. 언어 선택에 따라 스프라이트를 교체 할 수도 있습니다. Flag-US를 사용하는 Simple Sprite 위젯을 하나 생성하고, 단계 6과 마찬가지로 UILocalize 컴포넌트를 추가 해 주세요. Key 필드 속성은 Flag로 지정합니다. 게임을 실행 하고 언어를 바꿔 보세요. 어떻게 나오나요?


<< Example-9 Quest Log | Example-11 Drag & Drop (계획없음) >>

멀티라이터 | 2013.07.05 17:18 신고 | PERMALINK | EDIT/DEL | REPLY
강의 잘보고 있습니다. ^^;; 그런데 예제 11은 강의 계획이 없으시다는 말씀인가요? ^^;;
이뿡찌닝 | 2013.07.05 17:32 신고 | PERMALINK | EDIT/DEL | REPLY
잘 보아주셔서 감사합니다. ^^ 11, 12, X 는 당장은 계획이 없습니다. 대신 좀 더 진보된 주제를 가지고 진행 해 볼까 합니다.
멀티라이터 | 2013.07.05 17:33 신고 | PERMALINK | EDIT/DEL
그런가요 아쉽네요. Drag & Drop 그 자체는 꽤 매력적인 주제 같은데 말이에요. ^^;; 지금까지 강의 감사드리고.. 빨리 새로운 강의가 시작되기를 기원하겠습니다.
| 2013.08.09 17:25 | PERMALINK | EDIT/DEL | REPLY
데니스님 | 2013.08.20 16:03 신고 | PERMALINK | EDIT/DEL | REPLY
부탁드립니다. 11, 12, X 도 설명 해 주시면 감사합니다. 기다릴게요. ㅎㅎ
2013.07.05 10:03

[Unity3D 강좌] NGUI Example 9 - Quest Log


written by icoder(

Quest Log 예제는 버튼을 클릭하여 UI를 보이거나 감추는 토글 기능을 설명하고 있습니다. 토글 핸들링을 위해서 Example 2 - Interaction에서 설명했던 UIButton Tween 컴포넌트를 사용하고 보이기 감추기 효과를 위해 Tween Scale과 Tween Color 컴포넌트를 사용하고 있습니다. 또한, Example 7 - Scroll View (Panel)에서 설명했던 UIDraggable Panel을 사용해 스크롤링을 구현하고, Example 8 - Scroll View (Camera)에서 설명했던 UITable을 사용해서 리스트 아이템을 구현하고 있습니다. 이전에 다루었던 내용을 응용하는 예제이므로 딱히 새로운 내용은 없습니다. 좋게 말하면 응용이고 아니게 말하면 짜집기니, 준비된 NGUI Example도 이제 막바지에 왔나봅니다. 복습한다는 기분으로 보시면 되겠습니다.

필요한 부분만 만들면서 설명 하겠습니다. 또한 원본 예제와는 달리, 버튼등의 간단한 UI는 Widget Tool을 사용해서 만들겠습니다. Widget Tool을 사용하는 기본적인 방법은 [NGUI 튜토리얼]을 참고하세요.


1. 새로운 씬을 만들고 기본 카메라를 제거합니다. 메뉴>NGUI>Open the UI Wizard 항목을 선택해서 UI Tool 화면을 띄우고 Create Your UI 버튼을 클릭해서 NGUI 기본 뼈대를 만듭니다. 특별히 변경 할 다른 속성은 없습니다. 기본 배경을 위해 Panel의 하위 오브젝트로 Tiled Sprite 위젯을 한장 추가합니다. Wooden Atlas의 Wooden Background sprite를 사용했습니다. 가로 세로 크기는 500으로 맞춰주세요.


2. 뷰 UI가 들어가 그룹을 위해 Panel의 하위로 빈 오브젝트를 하나 만듭니다. 이렇게 UI 그룹을 묶어 놓으면 나중에 좌표가 바뀌었을 때 그룹 빈 오브젝트의 옵셋만 바꾸어도 전체 UI가 이동하므로 유지보수하기 좋습니다. 또한 프리팹으로 만들어 둘 수 있으므로 유용하겠죠. 이름을 "QuestLog"로 바꾸고 Y축을 20픽셀만큼 올립니다.


3. 퀘스트 로그 뷰의 내용이 많아지면 스크롤바가 생기도록 합니다. Panel의 하위로 세로 스클롤바 위젯을 하나 추가합니다. Background로 Wooden Atlas의 Highlight - Shadowed sprite를 사용하고 Foreground로 Wooden Atlas의 Button sprite를 사용합니다. 다음으로 뷰가 위치할 드래그 가능한 판넬을 생성해야 합니다. QuestLog의 하위로 Panel 위젯을 생성합니다. 메뉴>NGUI>Create a Panel 항목을 선택하시면 됩니다. 이어서, 뷰의 테두리를 부드럽게 클리핑하기 위해 아래 그림과 같이 Clipping 속성을 입력 해 주세요.


4. 생성한 Panel은 보기좋게 "View" 라는 이름으로 변경합니다. View 오브젝트는 유저의 드래깅 입력을 받아 스크롤 될 패널이므로 UIDraggable Panel 컴포넌트를 추가한 후 아래 그림처럼 속성을 설정합니다. 세로 방향으로 스크롤 될 예정이므로 Scale 값은 (0, 1, 0)으로 설정하고, 스크롤바와 연동되도록 Vertical Scroll Bar 필드에 이전 단계에서 만든 스크롤바를 지정합니다.


5. 스크롤되는 패널을 만들었습니다. 이제 유저의 드래깅 입력을 받을 수 있는 영역을 만들어 보겠습니다. QuestLog 오브젝트의 하위로 Sliced Sprite 위젯을 하나 만듭니다. Wooden Atlas의 Glow - Inner sprite를 사용했습니다. 사용자 입력을 받아야 하므로 Box Collider 컴포넌트도 추가합니다. 지난 포스트를 잘 기억하신다면 유저의 드래깅 입력을 받기 위해 어떤 컴포넌트를 추가해야 하는지 아실테죠? UIDrag Panel Contents 컴포넌트도 추가합니다. Draggable Panel 속성은 View 오브젝트를 지정합니다. 그 외 속성은 아래 그림처럼 맞춰 주세요.


6. 이런 화면이 만들어 졌나요? 이제 뷰 영역에 테이블을 올려놓고 아이템들을 추가 해 보겠습니다. 먼저, UITable 컴포넌트를 추가하기 위해 View 오브젝트의 하위로 빈 오브젝트를 하나 만듭니다.


7. 만든 빈 오브젝트는 이름을 "Table"로 변경합니다. 이어서 메뉴>Component>NGUI>Interaction>Table 항목을 선택해서 UITable 컴포넌트를 추가합니다. 컴포넌트 속성과 Transform 속성은 아래 그림처럼 입력합니다.


8. 아이템을 만들기 위해서 Table 오브젝트의 하위로 빈오브젝트를 만듭니다. 이름은 "Quest"로 변경합니다. 이어서 Quest 의 하위로 Label 위젯을 하나 생성하고 적당한 문자열을 입력합니다. Label 위젯의 Pivot은 왼쪽 상단으로 지정합니다. 이어서 아이템 영역이자 Drag Panel Contents로의 역할을 할 Sliced Sprite를 한장 추가합니다. Wooden Atlas의 Row Outline sprite를 사용했습니다. 크기는 400x30으로 지정합니다. Pivot은 역시 왼쪽 상단으로 지정합니다. 그 외 속성은 아래 그림과 같이 입력 해 주세요.


9. 전 단계에서 만든 아이템 스프라이트는 유저의 드래깅 입력을 받아 화면을 스크롤 할 대상입니다. 마찬가지로, Box Collider를 추가하고 UIDrag Panel Contents 컴포넌트를 추가합니다. Draggable Panel 속성으로 View 오브젝트를 지정합니다. 마우스나 터치로 아이템을 토글 할 때의 동작성을 위해 UIButton Tween 컴포넌트도 추가해야 하지만, 아직 준비가 안 되었습니다. 잠시 후에 만들어 보겠습니다.


10. 스프라이트 아이템 클릭 시 토글 될 화면을 만들어 보겠습니다. 토글 애니메이션은 Tween 기능으로 부드럽게 애니메이션 시키겠습니다. 먼저, Quest 오브젝트의 하위로 빈 오브젝트를 하나 만들고 이름을 "Tween"으로 변경합니다. 이어서 Tween Scale, Tween Color 컴포넌트를 추가한 후 아래 그림처럼 속성을 입력합니다. 화면에 보였다 안보였다 하는 동작을 Scale과 Color를 이용해 만들었습니다. 아래 그림에는 컬러의 변환이 없는것 처럼 보이지만, 자세히 보면 알파가 빠져 있는 모습을 확인 할 수 있습니다. 아차! Tween 오브젝트는 게임 실행시 최초 화면에는 안 보일 예정이므로 오브젝트 비져블을 언 체크 합니다. (아래 스샷에는 안 나왔어요 ㅠㅠ)


11. 토글 애니메이션이 준비되었습니다. 근데 뭘 보였다 안보였다 할 꺼지? 내용을 추가하겠습니다. Tween 오브젝트 하위로 Label 위젯을 하나 추가해서 텍스트의 비져블을 토글 해 봅시다. Pivot은 왼쪽 상단으로 지정합니다. 그 외 속성은 아래 그림처럼 입력합니다.


12. 단계 9에서 약속했던 토글 인터랙션을 준비하겠습니다. Sprite (Row Outline) 오브젝트를 선택하고 UIButton Tween 컴포넌트를 추가합니다. 메뉴>Component>NGUI>Interaction>Button Tween 항목을 선택합니다. Tween Target 속성에는 Tween 오브젝트를 할당하고 Play Direction은 Toggle을 지정합니다. 트위닝을 시작하면 화면에 보여야 하므로 EnableThenPlay를 지정합니다. 트위닝을 되 감고 난 후는 안 보여야 하므로 DisableAfterReverse를 지정합니다.


13. 테스트를 위해 Quest 오브젝트를 5개정도 복사합니다. Ctrl+D 키를 누르면 됩니다. 이어서 아이템의 위치를 정렬하기 위해 Table 오브젝트의 Reposition Now 버튼을 클릭합니다.


14. 완성 했습니다.


<< Example-8 Scroll View (Camera) | Example-10 Localization >>

arsenio | 2013.09.12 11:26 신고 | PERMALINK | EDIT/DEL | REPLY
먼저 친절한 튜토리얼 포스팅들에 대해 감사드립니다.
Quest Log포스팅에서 궁금한 점이 있어 질문드립니다. 이 포스트를 따라서 진행 하였는데 퀘스트 여러개를 마지막 결과화면과 같이 펼치면 퀘스트 목록들이 사라집니다. 다시 펼친 퀘스트들을 닫으면 다시 보이구요,,, view 트랜스폼의 z값이 제가 해봤을땐 -1로 되있었는데 이것이 -1.5이하로 내려가면 이 포스팅의 결과화면처럼 제대로 실행이 되더군요.
혹시 빈 오브젝트인 view나 Tabel오브젝트의 z트랜스폼 값이 궁금하고 이것이 왜 -1.5이하일때만 제대로 동작하는지 궁금하네요,
이뿡찌닝 | 2013.09.16 19:40 신고 | PERMALINK | EDIT/DEL
자세한 원인은 코드를 봐야 알겠지만, 문의 주신 내용으로 추측컨테 Z 깊이와 NGUI 뎁스 시스템에 대한 문의로 보입니다. 위 예제의 View는 Panel 컴포넌트를 가지고 있습니다. Panel은 다른 Panel과의 앞 뒤 레이어링을 위해 Z 값을 사용합니다. 이 예제는 스크롤링을 위해 Panel을 사용했고, 앞으로 빼내기 위해 Z값을 -1로 주었습니다. -1.5로 주어야 제대로 동작한다는 말의 의미는... 다른 패널에서 이미 -1보다 작은 값으로 무언가가 나와 있다는 말입니다. 아틀라스가 되었건 폰트가 되었건 퀘스트뷰와 같은 아틀라스를 사용하는 위젯을 한번 살펴보는게 어떨까 생각됩니다.
수달 | 2013.10.27 02:24 신고 | PERMALINK | EDIT/DEL | REPLY
View - UIPanel - clipping 부분이 뷰 밑으로 잘리는거 아닌가요??ㅠㅠ

저는 똑같이 설정해줬는데도 불구하고
Quest를 한 8개 복사해서 넣어두어서 해봤드니 글씨가 짤리지않고
뷰 밑으로도 글씨가 뻗어나가네요ㅠㅠ

이뿡찌닝 | 2013.11.05 01:28 신고 | PERMALINK | EDIT/DEL
클리핑 영역이 화면의 어디에 위치 해 있는지 먼저 확인하고, 정상이라면 view 하위 오브젝트중 혹시 panel 이 들어가 있는 놈은 없는지 확인하는게 좋을듯 싶습니다
Curious | 2013.11.21 18:36 신고 | PERMALINK | EDIT/DEL | REPLY
먼저 감사합니다. 연재하신 글 잘 보고 있습니다. 한가지 여쭤보고 싶습니다.…
2D Tool kit 스프라이트 애니메이션을 써서 유니티로 게임을 만들고 있습니다.
그런데… 씬 화면에서만 보이고, 게임화면에서는 도무지 Z값을 바꾸고 열심히 찾아봐도 찾아지지가 않네요.
제가 모르는 문제가 있는 것일까요? …
이뿡찌닝 | 2013.11.28 13:12 신고 | PERMALINK | EDIT/DEL
카메라가 잡고 있는지 확인 해 보세요 클리핑 평면과 거리도 체크 해 보시구요.
샬럿 | 2014.09.16 19:58 신고 | PERMALINK | EDIT/DEL | REPLY
안녕하세요. 좋은 강좌 잘 보고 있습니다. 한가지 궁금한게 본 화면을 두고 특정 정보를 계속 셋팅하며 재사용 하고 싶은데요. 다른 정보가 왔을때 처음 접혀 있는 상태로 만들고 싶은데요. 혹시 팁을 얻을 수 있을까요..