자알못 자마린: Xamarin.Forms 개요 및 Hello World! 앱 만들어 보기

2018-08-25
 |  댓글이 없습니다

한 번의 코딩으로 여러 플랫폼의 앱 개발이 가능하다기에 흥미가 생겨 취미로 배워보기 시작한 자마린. 자마린 관련 한글 서적과 강의가 많지 않아 배우기가 어렵다. 짧은 영어 실력을 토대로 배우고 있는 중이긴 한데 과연 제대로 배울 수 있을지 모르겠다…

 

Xamarin.Forms란?

Xamarin.Forms는 Android, iOS, Windows UWP 앱1) 등의 네이티브 앱을 만들 수 있는 라이브러리다.

1) UWP 애플리케이션: Universal Windows Platform Application. Windows 10에 기반한 모든 디바이스에서 실행 가능한 애플리케이션.

주요 특징: 단일화된 통합 API를 사용

한 번의 코딩으로 Android, iOS, Windows(UWP) 등의 네이티브 앱 제작이 가능하다. 물론 플랫폼 별로 특정 코드를 작성할 수도 있다.

사용 언어: XAML과 C#

UI를 구현하기 위해 XML에 기반한 XAML(eXtensible Application Markup Language)을 사용한다. 예를 들어, 페이지에 어떤 요소를 배치할 것인지를 XAML로 정의한다.

행동을 구현하기 위해 C#을 사용한다. 물론 C# 코드로도 UI를 정의할 수는 있지만 권장하지 않는다. 예를 들어, 버튼을 클릭했을 때 어떻게 행동할 것인지를 정의한다.

단점

플랫폼 별로 태생이 다르기 때문에 각 플랫폼에 완벽하게 똑같이 보이는 UI를 구현하기 힘들다.

  • iOS에서 뒤로가기 버튼은 좌측 상단에 있으나, 안드로이드에서는 화면 하단 바에 존재하거나 하드웨어 키로 존재한다.
  • 플랫폼 별로 기본 배경화면 색, 기본 폰트 설정 등이 각기 다르다.

Xamarin.Forms로 개발한 앱 용량은 플랫폼 별로 개발한 앱보다 용량이 큰 편이다.

 

Xamarin.Android? Xamarin.iOS? Xamarin.ETC???

플랫폼 별로 API를 사용하는 경우가 많다면 Xamarin.Android 또는 Xamarin.iOS 등을 사용하는 게 더 좋을 수 있다.

 

Xamarin.Forms 개발환경

Windows 단독 환경에서는 Android 및 Windows(UWP) 앱 개발이 가능하다. 단 iOS 앱 개발은 불가능하다.

Mac 단독 환경에서는 Android 및 iOS 앱 개발이 가능하다. 단 Windows(UWP) 앱 개발은 불가능하다.

모든 플랫폼 앱을 개발하려면 Windows 환경과 Mac 환경을 모두 갖춰야 한다. Windows 환경에서 Mac에 페어링하면 iOS 앱 개발도 가능하다.

Mac 환경에서 작업한 Xamarin.Forms 프로젝트를 부트캠프로 불러온 후 Xamarin.UWP 프로젝트를 추가하면 Android, iOS 및 Windows(UWP) 앱 개발이 가능하긴 하다. 다음 링크를 참고하면 된다.

 

Visual Studio 설치

https://visualstudio.microsoft.com/ko/xamarin에 접속하여 Windows 환경에서는 Visual Studio를, Mac 환경에서는 Visual Studio for Mac을 다운받아 설치한다.

Mac 환경에서 가상머신에 Visual Studio를 설치하여 사용하면 Windows(UWP) 앱 개발도 가능하지만 가상머신에서 돌리는 만큼 성능 문제가 생길 수 있다.

 

macOS에서 Xamarin.Forms 개발환경 구축

Xcode 설치

App Store에서 Xcode를 검색하여 설치한다. 용량이 꽤 큰 만큼 오래 걸린다….

설치가 완료되면 Xcode를 실행하여 라이선스 동의 버튼을 눌러준 후 종료한다.

Visual Studio For Mac 설치

https://visualstudio.microsoft.com/ko/xamarin에 접속하여 Visual Studio Mac용 Community 2017을 다운로드 후 실행하여 설치한다.

설치 완료!

 

Xamarin.Forms를 사용하여 Hello World! 앱 만들어 보기

개발환경 macOS 및 IDE Visual Studio for Mac 기준으로 설명한다. Windows 및 Visual Studio도 과정은 비슷하다.

새 프로젝트 생성

Visual Studio for Mac에서 파일 메뉴 -> 새 솔루션을 클릭한다.

다중 플랫폼 -> 앱 -> Xamarin.Forms의 ‘빈 Forms 앱’을 선택한 후 ‘다음’ 버튼을 클릭한다.

새 프로젝트 정보를 입력한다.

  • 앱 이름: 적절한 네이밍 센스로 설정 (예: MyFirstXamarinApp)
  • 조직 식별자: 앱의 고유 식별자
  • 대상 플랫폼: 취향에 맞게 선택
  • 공유 코드: ‘Use .NET Standard’ 선택

이 부분은 중요치 않으므로 기본 설정 그대로 ‘만들기’ 버튼을 클릭한다.

프로젝트 생성 완료!

프로젝트 명 마우스 우클릭 후 ‘NuGet 패키지 업데이트’를 클릭한다.

NuGet 패키지 업데이트가 완료되었는지 확인한다.

Hello World! 출력 코드 작성

생성한 프로젝트는 화면 가운데에 위치한 Label에 “Welcome to Xamarin Forms!” 라는 문자열을 출력하는 프로젝트다. 이 문구를 Hello World!나 바꾸고 싶은 문구로 바꿔본다.

여기선 개성있게(?) “안녕요?ㅎ” 라는 문구로 바꿔보았다. (……)

에뮬레이터(시뮬레이터) 설정

안드로이드나 iOS에서 프로젝트 결과물이 어떻게 작동하는지 에뮬레이터(시뮬레이터)를 통해 볼 수 있다.

화면 상단에서 타겟 프로젝트와 에뮬레이터를 지정한 다음 실행 메뉴 -> 디버깅하지 않고 시작(Option+Command+Enter)을 클릭하면 에뮬레이터 상에 프로젝트 결과가 나타난다.

안드로이드 에뮬레이터 설정

iOS 시뮬레이터 설정

안드로이드 에뮬레이터 실행 결과

iOS 시뮬레이터 실행 결과

타겟을 연결된 아이폰으로 설정한 후 실행하면 에러가 발생할 것이다. 이것은 나중에…

 

에뮬레이터 실행을 중지하려면 실행 메뉴 -> 중지(Shift+Command+Enter)를 클릭한다.