옴더블로그

옴로하!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

저번 시간에 이어서 타이틀 페이지 구현을 끝내러 돌아온 옴.

오늘은 타이틀 페이지에 있는 두 개의 버튼에 대한 각각의 기능을 구현해보자.

먼저 첫 번째 버튼은 메인 메뉴 버튼이다.

이 버튼의 경우 클릭했을 때 메인 메뉴 씬으로 넘어가는 기능이 필요하다.

일단 지난 시간에 어지럽게 널려있던 이미지 파일들은 Create > Folder로 폴더를 생성하여 깔끔하게 정리해주었다.

프로젝트가 커지면 커질수록 손쉬운 파일 정리를 위해 폴더를 여러 개 생성하여

파일 타입별로 정리를 해주는 것이 중요하다.

대체적으로 많이 사용하는 타입에는

Sprites (이미지), Scripts (스크립트), Scenes (씬), Fonts (폰트), Music (음악) 등이 있다.

프로젝트 탭에서 빈 공간을
우클릭 > Create > Scene을 눌러

새로운 씬을 생성해주고, 우클릭 > Create > C# Script를 눌러 스크립트도 새롭게 하나 생성해주자.

이때 알아보기 쉽게 새로 생성된 씬 이름은 MainMenu, 스크립트의 이름은 ChangeScene으로 변경해주었다.

(항상 나중에 찾기 쉬운 이름으로
변경해주는 거 잊지 말기!!!)

유니티의 경우 새로운 씬을 추가할 때마다 File > Build Settings... 에 들어가서 씬 추가를 해주어야 한다.

씬 추가는 Build Settings 상단의 Scenes In Build 칸에 새로 생성한 씬을 드래그 앤 드롭하면 끝이다.

아주 간단-

그런 다음 생성한 ChangeScene 스크립트를
더블클릭해서 열어주도록 하자.

메인 메뉴 버튼 클릭 시 특정한 씬으로
넘어가는 함수를 만들건대,

우리는 우리만의 함수를 만들 거기 때문에 Start()와 Update() 함수는 필요가 없으므로 지워주도록 하자.

유니티에서 씬 변경을 사용할 경우
유니티 자체 라이브러리인
UnityEngine.SceneManagement가 필요하다.

스크립트 상단 라이브러리 섹션에
using UnityEngine.SceneManagement; 를 추가해주자.

다음으로 필요한 것은
씬 이름을 담을 string(문자) type의 변수이다.

클래스 안에 sceneName이라는 변수와 ChangeSceneTo()라는 함수를 만들어준다.

씬 변경에는 SceneManager.LoadScene(string, mode) 함수를 사용한다.

완성된 스크립트를 저장해주고 다시 유니티로 돌아가 보자.

Hierarchy에서 메인 메뉴 버튼을 선택해주고

Inspector에 만든 ChangeScene 스크립트를
드래그 앤 드롭으로 넣어준 뒤,

SceneName 변수에 변경할 씬 이름을 넣어준다.

이 경우는 아까 만든 MainMenu 씬 이름을 넣어주면 된다.

다음 버튼 컴포넌트 아래에 On Click() 함수 아래에 있는 +버튼을 클릭하고

Runtime Only 아래에 위치한 칸에 아까 스크립트를 추가했던 오브젝트인 메인 메뉴 버튼을 넣어준다.

오른쪽에 생성된 리스트에서 ChangeScence > ChangeSceneTo를 선택!

이렇게 하면 씬 변경 기능 구현 완료!!!!!!!!!!!!

플레이 버튼을 눌러 테스트를 해보면 메인 메뉴 버튼 클릭 시 선택한 씬으로 넘어가지는 걸 볼 수 있다.

벌써 반은 완성!!!!!!!!!

그럼 이제 타이틀 페이지 마지막, 개인정보 보호정책 페이지 열기 기능을 구현해보자.

프로젝트 탭에서 빈 공간 우클릭 > Create > C# Script를 클릭해 새로운 스크립트 생성.

이번에는 알기 쉽게 OpenURL이라고 이름을 지어주었다.

더블클릭! 역시나 이번에도 필요 없는 Start()와 Update()는 지워주도록 하자.

이번에 필요한 함수는 Application.OpenURL() 함수이다.

이 함수에 괄호 안에 "" (큰따옴표)를 열고
원하는 사이트의 주소를 입력하면 된다.

직접 사이트 주소를 입력하는 방법도 있고, 만약 여러 개의 각기 다른 사이트를 열어야 한다면

아까와 같이 string type 변수를 하나 만들어서
값을 따로 받아 넣을 수도 있다.

이 경우는 한 번밖에 필요가 없기 때문에
그냥 직접 입력으로 구현!

아까와 마찬가지로 이번엔
개인정보보호정책 버튼을 선택한 뒤

Inspector에 OpenURL 스크립트를 넣어주고

버튼 컴포넌트 On Click() 우측 하단에 +버튼을 클릭하여

이번엔 스크립트가 들어있는
개인정보보호정책 버튼을 넣고

OpenURL > OpenPrivacyPolicyPage 함수를 선택!

저장 후 플레이 버튼을 눌러 확인해보면!!!!!
명시된 사이트가 열린다!

이렇게 버튼 기능까지 모두 갖춘 완벽한 타이틀 페이지 완성!!!!!!!!!!!!!!!!!!

와아아아아아아아아

다음 시간에는 메인 메뉴페이지 만들기에 대해
알아보도록 하자.

슬라이더로 스와이프 모션을 이용해 여러 개의 메뉴를 왔다 갔다 하는 기능을 구현할 예정이다.

다음 포스팅까지 그럼 오늘도 해피 코딩!!!!!!!!!!!! :)

옴로하!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

오늘은 '흥미로운 사실 - 동물 편' 개발일지의 첫 시간으로

타이틀 페이지 구현에 대해 포스팅해볼까 한다.

준비물은 유니티로 생성한 새로운 프로젝트!

우리는 안드로이드 어플을 목표하고 있으므로 

먼저 File > Building Settings... 로 들어가 플랫폼 아래 안드로이드를 클릭해주고

Switch Platform 버튼을 눌러 설정을 저장해 주자.

처음 새로운 프로젝트를 생성하면 PC 플랫폼이 디폴트로 설정되어있다.

나중에 변경하게 될 경우 만들어놓은 화면 비율이나 이미지 위치가 엉망이 되는 관계로

항상 프로젝트 생성 후 바로 플랫폼을 변경하는 것을 습관화하도록하자.

다음으로 필요한 것은 가장 중요한 이미지 파일!

만들어놓은 이미지를 프로젝트 콘솔에 드래그엔드랍으로 끌어와주자.

해당 어플의 경우 타이틀 페이지에 필요한 이미지는

배경, 타이틀 이미지 (동물 로고), 타이틀 텍스트, 메인 메뉴 버튼, 개인정보 보호정책 버튼이다.

배경 이미지를 제외한 나머지는 한 장에 여러 개의 스프라이트가 함께 있는 게 보인다.

이럴 경우엔 해당 이미지 클릭 > Inspector > Sprite Mode > Multiple > Sprite Editor > Apply

를 통해 한 이미지에 스프라이트 개수가 여러 개라는 걸 알려주고

스프라이트 에디터로 가서 이미지를 개별로 잘라주고 어플라이를 눌러주면 된다.

스프라이트 준비가 완료되었다면 본격적으로 UI 디자인을 적용할 시간!

먼저 Hierarchy 탭에서 우클릭 > UI > Image를 눌러 빈 이미지를 생성해준다.

이때 Hierarchy에 캔버스가 없었다면 자동으로 새로운 캔버스가 형성되는 것을 볼 수 있는데,

여기서 아주 중요한 건 캔버스 안에서 작업을 시작하기 전

해상도 최적화 작업을 해줘야 한다는 것이다.

캔버스를 클릭하여 Inspector > Canvas Scaler > UI Scale Mode를

Scale With Screen Size로 변경해준 뒤 Reference Resolution을

현재 작업하는 모바일 뷰 크기로 맞춰주도록 하자.

이 작업을 완료했다면 본격적으로 이미지를 캔버스에 배치할 차례이다.

아까 생성했던 빈 이미지를 클릭한뒤 Inspector > Source Image에

배경이 될 이미지를 드래그 앤 드롭으로 끌어다 놓자.

그런 다음 Preserve Aspect를 눌러주면 원본 이미지의 비율을 깨뜨리지 않고

그대로 가져올 수 있게 된다.

이미지를 적용했다면 Scene 뷰에서 알맞은 사이즈를 맞추고

이미지 배치도 적절하게 해 주도록 하자.

그다음 위와 동일한 방법으로 캔버스에 빈 이미지를 생성해서

타이틀 이미지와 타이틀 텍스트도 적용, 배치해준다.

여기까지 끝나면

이렇게 이미지 3개로 타일 이미지 배치는 끝이 났다.

이번엔 타이틀 텍스트 하단에 메인 메뉴와 개인정보보호정책 버튼을 넣어줄 차례!

이번엔 Hierarchy 창에서 우클릭 > UI > Button을 눌러 버튼을 생성해준다.

필자가 준비한 버튼 이미지의 경우 이미 버튼 안에 용도별 텍스트가 들어가 있기 때문에

버튼 아래에 있는 Text는 지워준다.

하지만 보통 버튼 백그라운드 UI 이미지만 입혀서 텍스트만 바꿔 사용하기도 한다.

이건 개인 취향을 적용해 적절히 사용하면 된다.

그다음 똑같이 생성된 Button을 클릭한뒤 Inspector > Source Image에

원하는 버튼 이미지를 끌어다 놓은 뒤 Preserve Aspect로 원본 이미지 비율을 고정해주고

Scene 뷰에서 크기 조절과 버튼 배치를 해준다.

같은 방법으로 개인정보 보호정책 버튼도 만들어주도록 하자.

완성된 타이틀 페이지 UI !!!!!!!!!!!!!!!!!!!!!

너무 귀엽다.

여기서 잠깐! UI 배치에 중요한 포인트.

휴대폰은 기종에 따라 스크린 해상도 / 화면 비율이 제각각이기 때문에

해상도에 변화가 있을 경우 배치해놓은 이미지들이 중구난방으로 난리가 나게 된다.

이를 방지하기 위해서 anchor라는 것을 사용해야 되는데,

여기서 anchor는 바다 위에서 배를 고정하는 데에 쓰이는 닻을 의미한다.

말 그대로 닻을 내려 물체를 고정시킬 수 있는 기능이다.

이 anchor의 사용방법은 다음과 같다.

일단 고정하고 싶은 방향에 따라 오브젝트를 한데 모아줘야 한다.

이를 위해 Hierarchy에서 Canvas > 우클릭 > Create Empty를 눌러 빈 오브젝트를 만들고

그 속에 함께 움직여야 할 물체들을 싸그리 넣어준다.

(이때는 꼭 Canvas에 우클릭 후 빈 오브젝트를 생성해주어야 anchor사용이 가능해진다)

필자의 경우 모든 이미지를 화면 중앙에 고정시키기 위해

빈 게임 오브젝트를 하나만 생성하여 타이틀 이미지, 타이틀 텍스트,

메인 메뉴 버튼, 개인정보보호정책 버튼을 모두 넣어주었다.

이렇게 고정할 물체들을 빈 오브젝트에 넣고 난 뒤,

오브젝트를 클릭 > Inspector > Rect Transform 좌측 상단 이미지를 눌러

Anchor Presets 설정을 열어준다.

이때 경우에 따라 화면 상단 중앙을 고정 기준점으로 잡고 싶다면

가운데 9개의 옵션 중 상단 센터 옵션을,

하단으로 잡고 싶다면 하단 센터 옵션을 선택해주면 된다.

anchor 설정이 완료되었다면 Game 뷰에서 화면 비율을 변경해가면서

모든 화면 크기에서 이미지가 잘리는 일 없이 제대로 보이는지 확인해주자.

이렇게 하면 타이틀 화면 UI 완성!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

짝짝짝짝짝

이어지는 포스팅에서는 버튼 기능 구현을 다룰 예정!

메인 메뉴 버튼의 경우 클릭하면 메인 메뉴로 넘어가는 기능을 만들고,

개인정보 보호정책 버튼의 경우 클릭 시 정책 웹페이지를 여는 기능을 구현한다.

이를 위해서는 Scene 생성과 웹페이지를 열어주는 코드가 필요하다.

다음 시간에 자세히 알아보도록 하자!

그럼 다음 포스팅까지!!!!!!!!!!!!!!!!!!!!!!!!!

피쓰-!

옴로하!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

오늘은 정말 오랜만에 돌아온 어플 출시 포스팅!!!!!!!!

엄밀히 말하면 일곱 번째 어플이 되겠지만

구글 개인정보보호정책 업데이트 이후 주기적으로 계속해서

변경사항을 어플에 적용하라는 이메일을 받으면서도

'연습용 어플이라 상관없다'를 시전 하면서 버티다가

(스토어 키코드도 잃어버려, 프로젝트 파일도 잃어버려, 키코드 찾아도 비밀번호도 까먹음)

대부분의 어플이 강제로 끌어내려져 현재 생존 어플은 딱하나.

그렇게 뭘 또 만들까 고민 고민하다가 몇 개의 프로젝트를 시작하고

중도 포기하고, 다시 다른 걸 시작하고 또 뒤집어엎기를 반복하다가

결국 다시 또 단기 제작 가능한 어플을 만들기로 결심했다.

이건 탄생한 어플의 아이콘!!!!!!!

아직도 배우는 단계인 관계로 아직도 쉬운 어플 (먼산)

그렇게 떠오른 건 역시나 콘텐츠 기반의 간단한 버튼 몇 개가 끝인 자료 어플이었고

눈누난나 콘텐츠를 찾다가 '흥미로운 사실 - 동물 편'을 만들게 되었다!

• 악어는 뒤로 가지 못한다.
• 호랑이는 털뿐만이 아니라 털 속 피부에도 줄무늬 모양이 있다.
• 금붕어의 이름으로 가장 많이 사용되는 것은 '죠스'이다.

위와 같이 자잘 자잘한 동물 관련 팩트들을 담았다.

하지만 이번엔 미국을 타깃 했으므로 영어 온리. 읽을 수 있다면 읽어 보시지! (도발)

반응을 보고 한글 업데이트도 할 의향이 있다. (그러니까 받아줘요 굽신)

가장 중요한 건 본격적으로 자잘한 어플들을 열심히 개발하기 위해

그래픽 사이트 유료결제를 질러버렸고

이제 한층 이쁜 어플을 만들 수 있게 되었다!

그러므로 어플 디자인은 사이트에서 원하는 그래픽을 다운로드하여 일러스트레이터를 통해

레이아웃을 만들고 그래픽에서 원치 않는 부분이나 수정해야 할 부분을 직접 손봐가며 만든다.

(200개가 넘는 콘텐츠에 적합한 동물 그래픽을 일일이 하나하나 손수 찾은 건 안 비밀)

그렇게 이번 어플을 만드는데 소요된 시간은 총 3일로

그래픽과 자료 정리, 스토어 등록, 그리고 여러 가지 컴파일 에러 (발암)로

개발 대부분의 시간을 잡아먹었고

정작 프로그래밍은 하루정도 걸린 듯하다.

오랜만에 개발을 해보니 역시가 역시 별의별 에러가 여기저기서 난무하였다.

구글이 다시 타깃 api 레벨을 올리면서 유니티 버전에도 문제가 있어

버전 변경도 했어야 했고 SDK 다운도 새로 했어야 했다.

여기서 제일 발암이었던 건 다 만들고 보니 사용된 유니티 버전이 몇 년 전 꺼라

api레벨이 사용불가였고, 구글 정책을 맞추려면 유니티 새 버전으로 프로젝트를 옮겨야 했다.

'버전이 다릅니다. 옮기시겠습니까?'와 비슷한 메시지가 뜨길래

Yes를 눌렀더니 안드로이드 디펜던시 어쩌고 가 에러가 씨게 나면서 프로젝트가 다 망가졌고

결국 새 버전으로 새 프로젝트를 만들어서 손수 다 옮겨오는 방법으로 수정을 진행했다

분명 더 나은 방법이 있었겠지만... (컴퓨터치의 설움)

어쨌든 여차저차 인고의 시간을 넘어 드디어 스토어에 개시 성공!!!!!!!

스토어 어플 검토시간은 대략 하루 정도가 걸린 것 같다.

등록해놓고 자고 일어나니 오후쯔음 개시 완료 노티를 받았고,

개시 후에도 알고리즘이 어플 노출을 잡을 때까지 또 하루 내지 이틀 정도가 소요되었던 것 같다.

개시 첫날엔 어플 이름 그대로 검색을 해봐도 어디에도 나오지 않아서 살짝 쫄았었는데

오늘 확인을 해보니 나름 한 30번째 정도(...)는 뜨는 것 같다.

보이는 게 어디인가 안도는 하는 중.

어플 개발 초짜로서 개발을 할 때 항상 이전에 사용하지 않았던 기능을 하나씩 구현해보려고 하는 편인데,

이번엔 새 기능 연습 겸 보상형 광고를 넣었다!!!!!!!!!!

일전에 배너광고와 전면광고는 사용경험이 있었는데 보상형 광고는 처음이었다.

보상형 광고는 더 많은 콘텐츠를 잠금 해제하는 용도로 사용했다.

메인 메뉴에 보이는 카드 당 20개의 콘텐츠가 있고, 처음엔 2개의 카드를 오픈해놓았다.

3번째 카드부터는 광고를 한번 시청하면 카드가 열리는 방식이다.

이렇게 총 10개의 카드로 200개의 콘텐츠가 있다.

 이렇게 어플 출시를 마쳤으니 어플 개발 다음은 해당 어플 개발과정을 포스팅해볼까 한다.

마지막으로 혹시 어플이 궁금하다면

play.google.com/store/apps/details?id=com.TheOm.AnimalFunFacts&hl=en_US

(별점 5점 주시면 사........ 사랑합니다)

그럼 다음 포스팅까지 아디오스!!!!!!