[자마린] 다중플랫폼 앱개발을 위한 자마린 : 1. 헬로우 자마린

감히 이 글이 당신의 달란트가 되기를 바랍니다.

자마린이란?

우리나라 뿐만아니라 세계적으로 스마트폰은 애플과 안드로이드로 나뉜다.  

애플 iOS는 앱이라하고  구글 Android는 어플이라고 통상 부른다.  흔히 PC에서 사용하는 엑셀, 아래한글처럼  스마트폰에서 돌아가는 조그만 프로그램이다.( 이하 앱으로 통일하기로 하자.)

개인 개발자가 앱을 만들기 위해서 여러가지 지식이 필요하다.  어떤 앱을 만드는지에 따라 다르겠지만 그 중에서도 빼놓을 수 없는 것이 프로그래밍 언어이다.  보통 아이폰용 앱을 만들려면 엑스코드XCode라는 툴에서 오브젝트-C Objet-C 나 스위프트Swifft라는 프로그래밍 언어를 사용하고, 안드로이드용 앱을 만들려면  안드로이드스튜디오Android studio 라는 툴에서 자바java 또는 코틀린kotlin 등의 프로그래밍 언어 사용한다.  이외에도 다양한 방법이 있지만 가장 일반적인 경우라 할 수 있겠다.

우리나라에서는 안드로이드가 우세이지만 일본과 같이 아이폰이 우세인곳도 많다.  우리나도 아이폰을 무시할 수 있을 정도는 아니다.  문제는 개발자(개발사) 입장에서 전혀 다른 두가지 환경에서 돌아가는 앱을 만들고 유지하는 것이 여간 부담스러운 일이 아니다.  뭘하든 두배 이상의 비용이 발생한다.  그래서 당연히 생겨난 니즈가 바로 "하나의 개발로 아이폰, 안드로이드 - 윈도우폰 까지도- 모두 사용할 수는 없을까?"이다.  

이러한 배경으로 탄생하고 소멸해가고 있는 것들이 여럿 있지만 그 중 요즘 가장 '핫' 한것이 바로 자마린Xamarin이다.

자마린은 현존하는 최고의 개발툴이라고하는 비쥬얼스튜디오 환경에서 C#이라는 언어로 iOS, Android, Window 폰용 앱을 개발 할 수있다.  또한 기존 이런류에 툴들이 배포등의 과정에서 여러 툴들의 도움을 받아야 했던것과는 다르게 자마린의 경우 비쥬얼스튜디오 하나로 앱 개발에서부터 빌드, 배포까지 전과정을 처리할 수 있다. 

자마린 설치.

자마린 설치는 공식 문서를 참고하자. 사이트를 방문해 자신의 환경에 맞는 문서를 참고해 설치를 진행하자.  

https://docs.microsoft.com/ko-kr/xamarin/cross-platform/get-started/installation/index

헬로월드 찍기

헬로월드 찍기란 프로그래밍 언어를 배울때 가장 처음하는 가장 기본적인것으로 화면상에 "Hello World"라는 텍스트가 나타나도록 하는 것입니다.

기본적으로 프로그래밍을 하기위한 환경설정등이 정상적으로 설정되었는지  확인하는 것과 동시에  어쩌면 가장 짜릿한 성취를 맛보는 과정이기도 하다. 예전엔 헬로월드 찍기위해 몇 날을 지새우는 경우도 있었지만 세상이 좋아졌다. 요즘은 '넥스트' 몇 번이면 되는 경우도 많다.

자마린 설치 공식 문서데로 잘 따라했다면 헬로월드는 그냥 찍을 수 있으니 계속 가보자.

참고로  본인의 개발 환경은  맥에 비쥬얼스튜디오 커뮤니티  7.5를 사용하니 윈도우사용자분들과는 조금 다를 수 있지만 큰 차이는 없을 듯 하다.

1. 새 프로젝트 생성 

비쥬얼스튜디어(이하 vs) 실행 후 File -> New Solution 을 선택후 나타나는 대화상자에서 아래와 같이 Forms App을 선택후 "Next" 선택.   

  

 아래와 같이 입력후 "Next"

아래와 같이 입력후 화면 하단 오른 쪽 "Create" 버튼 클릭

이젠 프로젝트의 기본 골격이 생성되었다. 

이상한 문자들로 보인다해도 당황하지말자 그냥 지나간다.  세상은 몰라도 되는 것들이 너무나 많다. 우리는 지금 헬로월드만 찍으면 된다.

화면상 왼쪽 솔루션Solution 패널을 보면 HelloXamrin (공통), HelloXamrin.Android (안드로이드용), HelloXamrin.iOS(아이폰용) 이 있는 것을 확인할 수 있다. 너무 깊이 생각하지마~~   확인 했으면 다음으로 가보자.

아래 화면 화살표가 가르킨 곳을 클릭하여 화면과 같이 값을 바꿔보자.  우리는 일단 아이폰에서 테스트 할 것이다.

화면과 같이 값을 바꿨다면 삼각형모양  실행버튼을 눌러보자. 조금 기다리면 iOS에뮬레이터가 실행되고 아래와 같은 화면을 볼수 있다.

그냥 이렇다.  코딩 한줄 없이 군더더기 하나없은 심플한 앱이 하나 말들어졌다.  그런데 우리에 목표는 이게아니다. 이건 너무 복잡하다.  그냥 헬로월드만 찍고싶다.

2.헬로월드 페이지 만들기

이제 우리만에 페이지를 하나 만들고 그 페이지에 Label이라는 것을 올려 헬로월드를 찍어보자

HelloXamarin(공통) --> Views --> Add --> New File

* 우리는 지금 자마린중에서도 Forms를 이용해 android, ios용 앱을 동시에 개발할 것이다.  거의 대부분의 작업이 공통부분에서 이루어 질 것이다.

아래 화면과 같이 선택 후 Name에 HelloXamarinPage라 입력 후 하단 오른쪽에 "New" 클릭

 아래 화면 솔루션 패널과 같이 Views폴더에 두개의 파일이 생성되어야 한다.

솔루션 패널에서 HelloXamamrinPage.xaml 파일을 더블 클릭하여 열어보자. 아래와 같은 xml파일이다.  너무 깊이 생각하지마~~

HelloXamamrinPage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="HelloXamarin.Views.HelloXamarinPage">
    <ContentPage.Content>
    </ContentPage.Content>
</ContentPage>

우리가 그리고 싶은 것을 <ContentPage.Content> 과 </ContentPage.Content> 사이에 넣어 주면 된다.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="HelloXamarin.Views.HelloXamarinPage">
    <ContentPage.Content>
        <Label Text="Hello Xamarin"  FontSize="60"/>

    </ContentPage.Content>
</ContentPage>

무엇이 달라졌는가?  라벨이다. 두말할 것 없이 너무나 명확하다.  "Hello Xamarin"을 폰트크기는 60으로 찍겠다는거다.

이제 우리가 만든 페이지를 메인페이지에 붙여보자. 자동으로 생성된 페이지를 우리가 만든 페이지로 바꿀것이다.

공통부분의 Views --> MainPage.xaml을 열어 아래 붉은 색으로 강조된 코드와 같이 바꾸어보자

<?xml version="1.0" encoding="utf-8"?>
<TabbedPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:HelloXamarin.Views"
    x:Class="HelloXamarin.Views.MainPage">
    <TabbedPage.Children>
        <NavigationPage
            Title="Browse">
            <NavigationPage.Icon>
                <OnPlatform
                    x:TypeArguments="FileImageSource">
                    <On
                        Platform="iOS"
                        Value="tab_feed.png" />
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments> 

                                      <views:ItemsPage />  
                <views:HelloXamarinPage />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage
            Title="About">
            <NavigationPage.Icon>
                <OnPlatform
                    x:TypeArguments="FileImageSource">
                    <On
                        Platform="iOS"
                        Value="tab_about.png" />
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:AboutPage />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>
</TabbedPage>

실행 버튼을 눌러 실행해보자. 아래와 같은 화면을 볼수 있을 것이다. 

 다음에는 오늘 처음 등장한  Label 과같이 사용자들과 소통하는데 빼놓을 수 없는  유저인터페이스UI 요소들을 몇가지만 살펴보도록 하자.