자마린으로 굿닥앱 만들기 – 2 – Main화면 (1)

개발환경 구축


먼저 자마린을 빌드하기 위한 환경을 구성해 보자.

우선 Visual Studio(이하 VS)를 설치하여야 한다.  Mac OS에서도 자마린 개발이 가능하지만 이 연재글에서는 윈도우즈 환경을 기준으로 한다. 이 글을 쓰는 시점에서 VS 최신 버전은 2015이다.

https://www.visualstudio.com/ko-kr/products/visual-studio-community-vs.aspx

왼쪽에 Community 2015 버전을 다운받자.

# VS가 체고의 IDE이시다VS_site

개인과 소규모 기업에 한해서는 Community버전을 무료로 사용 가능하니 공부 목적이면 부담없이 사용하면 된다.

Visual Studio 설치는 여타 윈도우즈 프로그램 처럼 특별할 것 없이 그냥 다음버튼만 눌러주면 설치가 끝난다. 다만 윈도우즈 폰앱도 같이 빌드하고자 하면 유니버셜 Windows 앱 개발 도구를 선택해 줘야 한다. 해당 옵션을 선택하지 않으면 자마린 폼즈 프로젝트를 생성할 때마다 귀찮게 확인창이 뜨니 어지간하면 그냥 선택해서 설치하자.

VS_install

비주얼 스튜디오가 설치되면 자마린도 사이트에서 다운받아 설치하여야 한다.

https://www.xamarin.com/download

자마린 설치도 하라는 대로 다음 버튼만 눌러주면 끝. 그리고 JDK가 설치되어 있지 않다면 JDK도 설치해야 한다. 안드로이드 최신 버전으로 빌드하려면 1.8이상의 버전이 필요하다.

프로젝트 생성


설치가 완료되었으면 프로젝트를 생성해서 빌드하여 보자. 새 프로젝트 -> 설치됨 -> 템플릿 -> Visual C# -> Cross Platform -> Blank Xaml App (Xamarin.Forms.Portable)을 선택하자.

VS_create_project

프로젝트가 생성되면 맥 원격 로그인 다이얼로그가 뜨는데 iOS도 함께 빌드하고자 하면 안내에 따라 설정하면 된다. iOS 앱 디버깅/실행을 위해서는 가상머신 혹은 실제 맥이 필요하며 맥에 엑스코드가 설치되어 있어야 한다. 우리는 전직원에게 맥을 제공하긴  하지만 본인은 아이맥에 윈도우(…)를 깔아버린 관계로 더 이상 자세한 설명은 생략한다.

# VS 상단 메뉴VS_topbar

빌드하기전 VS 상단을 보면 Android Emulator Manager와 Android SDK Manager가 보일 것이다. 이클립스나 안드로이드 스튜디오에 들어가는 것과 동일한 그것이다. 안드로이드 에뮬레이터는 기본으로 선택되어 있는 x86에뮬레이터를 추천한다.

# SDK ManagerSDK_Manager

SDK는 2.1 이클레어 부터 최신버전인 7.0 N 누룽지 까지 다양하게 설치가 가능하다. 이 연재글에선 6.0 마시멜로 기준으로 앱을 빌드하기로 한다.

첫번째 빌드 Hello World.


우측 솔루션 탐색기를 보면 안드로이드(.Droid) , iOS(.iOS), Windows(.UWP) 세개의 플랫폼 프로젝트가 생성되어 있는 것을 볼 수 있다. 우선 빌드 되면 실행될 타겟을 지정하자. 처음이니까 만만한 Android를 선택해보자.

# 시작 프로젝트 설정startup_project

실행 프로젝트를 설정했으면 빌드+디버깅 단축키인 F5키를 눌러서 앱을 디버그 모드로 실행해 보자. 처음 빌드할 경우 필요한 패키지들을 다운받기 때문에 시간이 좀 소요된다. 만약 해외망이 느린 지역 케이블 인터넷 가입자라면 약간 인내심을 가지고 기다릴 필요가 있다. 빌드가 완료되면 에뮬레이터가 실행되면서 자마린 폼즈 앱이 구동된다.

# 이 모든 것이 한방에. 멋지지 않은가? 아… MS♥First_Run

텍스트 수정을 위해 레이아웃을 수정해 보도록 하자. 우측 솔루션 탐색기를 보면 플랫폼 프로젝트 위에 공통 프로젝트가 하나 더 존재하고 있는데  이곳에 공용 라이브러리나 레이아웃 파일들이 존재하게 될 것이다. 여기에 있는 MainPage.xaml 파일을 열어 Label 컨트롤의 Text속성을 여러분의 짝사랑 이름이나 하고싶은 말을 적고 다시 빌드해 보도록 하자.

자마린으로 굿닥앱 만들기 – 1 – Xamarin 소개

XAMARIN 소개


자마린은 iOS, Android, Windows Phone 개발을 위한 크로스 플랫폼 도구이며 최근에 MS가 인수하여 주목을 받고 있다.

기존 유니티, 폰갭등의 크로스 플랫폼 도구와 다른 큰 특징 중 하나는 공통화된 자마린 프레임웍이 존재하면서도 플랫폼별 네이티브 계층에 접근이 가능한 점이다. 그래서 각 플랫폼의 고유 기능을 대부분 같게 구현할 수 있다.image_9beb523f-8a48-4812-a600-818fc9630e54

아직 여타 다른 크로스 플랫폼 도구보다는 인지도가 많이 적은 상황이지만 슬랙, 다우존스, ING같이 규모 있는 회사들이 자마린으로 앱을 개발해 서비스 중이다. 게다가 MS에 인수된 뒤 라이센스가 무료로 전환되어 크로스 플랫폼 도구를 검토 중이라면 좋은 선택이 될 수 있다.

해당 연재 글의 최종 목적은 자마린으로 Windows Phone 그리고 Android 앱을 만들어 각 마켓에 올리는 것 (굿닥 앱 개발팀 의문의 실업자행). 그리고 새로운 플랫폼을 적용해보며 겪는 갖은 삽질과 분노를 공유하고자 하며 아래 독자들에게 특히 더 유용할 듯하다.

  • 같은 일을 반복하는 것이 싫으신 분
  • 최소한의 자원으로 iOS, Android, Windows Phone 앱을 동시에 개발하시고 싶으신 분
  • 저는 서버 개발자인데 갑자기 사장님이 앱을 만들래요(…)
  • MS 기반 개발이나 C#에 익숙하신 분

그럼 자마린이 어떻게 동작하는지 간략히 살펴보도록 하자.

플랫폼 구조도 #1


공통 로직 부분이 존재하고 플랫폼별로 특성화된 UI 로직을 따로 작성할 수 있다. 안드로이드는 기존 JAVA 로직과 거의 같게 C#으로 앱을 작성할 수 있다. (약간의 제약이 있는 점을 제외하면 iOS도 같다.)

플랫폼 구조도 #2 – 자마린 폼즈


또 다른 특징으로 자마린을 하며 아마도 가장 많은 삽질과 분노를 겪을 자마린 폼즈(Xamarin Forms)라는 것이 존재한다. 위 그림에선 공통 로직 부분이 플랫폼별 UI와 완전히 분리되어 있었지만 아래 그림은 조금 다르다.

container2

플랫폼별 네이티브 계층이 얇아진 것을 볼 수 있는데 자마린 폼즈가 각 UI 로직을 일부 담당하게 되어 그렇다. 자마린 폼즈를 이용하면 UI 중복 작업 제거를 기대해 볼 수 있겠다. 잘 안돼서 분노도 증가하겠지만.

자마린 폼즈는 객체지향 프로그래밍 원칙 중 DIP(의존성 역전 원칙)를 염두에 두며 작업하면 좋을 듯하니 잠시 짚고 넘어가 보자.

#자마린 폼즈를 위한 DIP 설명

간략히 자마린을 살펴보았으니 다음 글에서는 굿닥 메인 화면을 컴파일해 보도록 하자. 메인 화면이 궁금하신 분은 스토어에서 내려받아 미리 앱을 실행해보면 된다. 별 다섯 개를 주는 것도 잊지 말자.