예제로 배우는 모바일 앱개발

안녕하세요. 험프리.김현수입니다.

RAD Studio와 앱메소드(AppMethod)는 파이어몽키 프레임워크(데브기어 소개자료, FireMonkeyX)를 이용해 모바일 앱을 쉽고 멋지게 만들 수 있습니다.

이미 다양한 기술을 설명하는 글과 샘플이 있어 그 것들을 잘 참고한다면 여러분들도 쉽게 앱을 만들 수 있습니다.

하지만, 

음식도 먹어본 사람이 맛을 알듯이, 새로운 영역의 모바일 개발의 경우 어떻게 시작할지, 무엇부터 해야 할지 막막할 수 있습니다. 그런경우 차근차근 책과 강좌를 통해 처음부터 익힐 수도 있지만, 뚝딱뚝딱 예제를 돌려보고 만저보며 우선 만들어 본 후 모르는 부분을 찾아서 익히는 방법도 있습니다.

이 글의 목적

이 글에서는 모바일 앱 개발을 시도해 보며 익히시려는 분들을 위해 실전앱에서 바로 사용할 수 있는 예제와 설명을 제공합니다.

모바일 앱 만들기를 처음 시도할 경우. 완성도 있는 예제와 소스가 있어 참고한다면 아주 큰 도움이 됩니다.

예제소스를 기반으로 화면을 바꿔보고 기능을 추가해 첫번째 앱을 빠르게 만들고,  앱을 만들며 궁금했던 내용을 찾아보거나 필요한 기능 추가를 위해 관련 기술과 예제을 찾아 추가하다 보면 어느덧 익숙해질 것 입니다.

이번 글은 완성도 있는(실용적인) 모바일 앱 예제 제공에 목적을 둡니다. 

예제의 소스코드를 제공하고 예제의 구조와 사용법을 설명해 여러분들의 모바일 앱 개발의 시작을 돕는 것이 목적입니다. 

예제에서 사용되는 참고할 만한 기술은 도움말과 팁을 제공해 추가 학습할 수 있도록 하겠습니다.

이글의 수준

• 이 글은 기본적인 툴과 컴포넌트에 대한 사용법과 Object Pascal 문법은 다루지 않습니다. 
  
• 모바일 개발이 처음이더라도 이전에 델파이 등의 프로그래밍 개발 경험이 있는 사용자를 대상을 작성합니다.

이 글은 여러분의 의견이 중요합니다. 글의 난이도가 어렵가나, 필요한 예제와 주제에 대한를 댓글과 메일로 피드백 주시면 최대한 참고해 글을 작성하도록 하겠습니다.

제공되는 소스코드

이글에서 사용되는 모든 예제소스는 아래의 GitHub에 있습니다.(수시로 추가, 수정됩니다.)

• https://github.com/hjfactory/FMX (IDE 상에서 Github 소스코드 사용하기)

대부분의 예제은 Object Pascal로 제공되지만 최대한 C++ 문법의 예제도 추가하도록 하겠습니다.

모바일 사용자 인터페이스(User Interface) 구성

모바일 UI의 경우 모바일의 화면(디스플레이) 특성상 좁은 화면에 데이터를 효율적으로 표시해야 하고, 터치 인터페이스를 통해 화면을 제어해야 합니다. 

이미 다양한 모바일 UI 기법들이 모바일에서 사용되고 있습니다. 모바일에서 자주 사용되는 UI를 파이어몽키를 통해 어떻게 구성하는지 예제을 통해 함께 알아보고 익히도록 합니다.

❑ 사이드바 형태 메뉴(Sidebar drawer menu) 만들기 - ☞자세히

모바일에서는 화면을 최대한 사용하기 위해서 좌측/우측의 사이드바를 통해 메뉴를 제공하는 UI가 많이 사용됩니다.

옆의 그림과 같이 사이드바 메뉴가 나왔다 들어가는 형태의 메뉴를 구성하는 예제에 대해 소개합니다.

이 예제는 다음 요소들로 구성됩니다.

• 사이드바 : 상단 정보영역(사진과 이름 등)과 메뉴(ListBox)로 구성, 그림자 효과(Effect)

• 툴바(상단) : 좌측의 메뉴 버튼을 누르면 메뉴가 나오고 다시 누르면 들어갑니다. 이때 애니메이션(TFloatAnimation)을 이용해 자연스럽게 표현됩니다.

• 사이드바 배경 : 사이드바가 나오면 사이드바 외의 영역에 회색배경으로 표시되고 배경을 누르면 사이드바가 닫힙니다.

난이도 : ★☆☆ 활용도 : ★★★

☞ 자세히보기

❑ 프레임을 활용해 화면을 분리해 구현하는 방법 - 준비중

모바일 앱에 기능과 화면을 추가하면 그에 비례하여 메인 폼과 소스코드가 많아져 복잡해 집니다. 이럴 경우 프레임(TFrame)을 이용해 화면과 기능을 분리할 수 있습니다.

같은기능을 폰과 태블릿으로 해상도별 분리해 개발할 경우에도 프레임을 이용해 화면과 기능을 제활용 할 수 있습니다.

그리고 프레임에서 필요한 메소드를 Interface를 이용해 추가하고 메인 폼에서 프레임의 Unit을 추가(uses)하지 않고 사용하는 기법을 설명합니다.

난이도 : ★★★ 활용도 : ★★☆

❑ Swipe menu - 사이드바 메뉴를 끌어서 표시/감추기 -☞자세히

Swipe menu는 유투브, 페이스북등의 모바일 앱에서 일반적으로 사용하는 메뉴 호출 방식입니다.

손가락으로 화면을 끌어서 메뉴를 표시하고 다시 손가락으로 밀어서 메뉴를 닫는 터치 인터페이스 입니다.

파이어몽키에서는 터치 인터페이스를 지원하는 방식으로 제스처(Gesture)와 마우스 이벤트(Down, Move, Up 등)를 제공합니다. 

이 예제에서는 그중 제스처를 이용해 Swipe 메뉴를 구현하고 왜 제스처를 이용하는지 설명하였습니다.

이번 예제는 다음의 항목을 학습하실 수 있습니다.

• 제스처 이벤트와 EventInfo란?
• 이동된 좌표를 계산하고 다른 컨트롤을 제어하는 방법
• 인터페이스(Interface)를 이용해 공통기능을 사용하는 방법

이 예제는 앞에서 설명한 사이드바 형태의 메뉴 만들기와 프레임을 활용해 UI를 분리해 구현하는 방법 선행학습이 필요 합니다.

난이도 : ★★★ 활용도 : ★★☆

☞ 자세히보기

모바일에서 데이터 사용하기

기업(Enterprise)용 모바일 앱의 경우 UI를 구성하고, 데이터를 연결하는 것 만으로 주요 기능이 완성되었다 할 수 있습니다.

이번에는 모바일에서 사용할 수 있는 다양한 데이터들과 연결하고 사용하는 방법을 소개합니다. 

데이터 연결하는 기능에 집중하기 위해 사원정보 관리 기능으로 총 4가지의 방식으로 데이터에 연결하는 방법을 알아보겠습니다.

• IBLite - 앱과 함께 배포해 사용할 수 있는 임베디드 데이터베이스 중 하나인 IBLite
• REST Client - 이미 구축된 WAS등의 웹서비스나 다양한 OpenAPI에 RESTful 방식으로 접속
• Data Snap - RAD Studio와 AppMethod로 가장 쉽게 구성할 수 있는 미들웨어에 접속
• BaaS Client - 클라우드 서비스 중 백엔드기능을 제공하는 BaaS에 연동

❑ 공통으로 사용할 UI 구성

IBLite, REST Client, DataSnap, BaaS Client를 통해 모바일에서 데이터 사용하는 방법을 알아볼 것입니다. 앞의 4가지 데이터는 공통적으로 사원정보 데이터를 이용할 것이고, 사원정보를 처리하는 UI는 이번에 만드는 UI를 공통적으로 사용할 것입니다.

❑ 모바일에서 IBLite 접속 - 준비중

 

모바일 앱 배포 시 함께 배포 해 사용하는 임베디드(포함) 데이터베이스 중 IBLite를 이용해 로컬 데이터베이스를 사용하는 방법에 대해 알아봅니다. 

다음 내용을 학습하실 수 있습니다.

• IBLite 데이터베이스 파일 생성

• IBLite 사용하는 모바일 앱 개발

• IBLite 라이선스 등록

• 모바일 앱 배포 시 파일 및 라이선스 함께 배포

❑ REST Client를 통해 웹서비스에 접속 - 준비중

웹서비스의 데이터를 모바일에서 사용합니다.

❑ DataSnap 미들웨어에 접속 - 준비중

3티어 환경을 DataSnap을 이용해 구성합니다.

❑ BaaS(Cloud Service)의 데이터 사용 - 준비중 

클라우드 서비스 중 모바일의 백엔드 기능을 모바일에서 사용합니다.

• 파일과 데이터 스토리지
• 사용자 가입과 정보조회
• 원격 푸시 메시지 전송 및 수신

❑ 데이터를 나눠서 가져오는 기법 - 준비중

교육용 샘플

처음 AppMethod 또는 RAD Studio를 접하는 사용자들에게 최소한의 코딩으로 결과물을 확인할 수 있는 샘플을 제공합니다.

❑ 계산기 만들기 

(준비 중)