Adam reactive apps engaging mobile header

리액티브 앱: 모바일 경험을 극대화하는 방법

세계 최정상급 모바일 앱은 사용자가 모바일 경험에서 전체적으로 기대하는 모든 기능을 통합합니다. 하지만, 모바일 환경은 웹과는 다른 어려움이 있습니다. 즉, 불안정한 네트워크 연결로 인해 여러 사용자 기기와 서버가 가진 데이터 중 올바른 데이터를 선택해야 합니다. 게다가 REST 모델은 데이터 푸시에 적합하지 않습니다. 이런 한계를 극복하는 것이 사용자 경험을 극대화하는 핵심입니다. 리액티브 앱에도 필수적인 조건이죠. 이 강연은 리액티브 앱 트렌드를 살펴보고 실제로 구축하는 방안을 알려드립니다. 다음과 같은 사항에 대해 말씀드리겠습니다.

  • 기술 선도 기업이 리액티브 앱을 기발하는 최신 방법
  • 리액티브 기능이 비즈니스 목표에 어떻게 기여하는지에 대한 업계 사례
  • API 브리지를 사용해서 모바일 앱을 레거시 엔터프라이즈 데이터에 연결하는 법

소개 (0:00)

저는 iOS 개발자이며, 세일즈 생산성 관리 도구를 구축하고 직접 모바일 앱 회사를 설립했습니다. 그 덕분에 개발자를 위한 여러 모바일 도구를 개발하는 Realm에 합류하게 됐습니다. Realm에서는 프로덕트 담당 이사로 일하고 있습니다.

Realm이 지금과 같은 일을 하는 이유는 모바일 앱의 미래를 보기 때문입니다. 인터넷이 아닌 모바일 자체의 미래죠. 실제로 인터넷은 현재 시점에서 모바일이라고 해도 과언이 아닙니다. 바로 모바일이 사용자가 선호하는 채널이므로 우리의 핵심 사명은 모바일이 미래임을 알리고 모바일 앱 개발자의 삶을 편하게 만드는 것입니다. 하지만 웹이나 데스크탑과 달리 모바일 생태계는 매우 경쟁적입니다.

모바일 앱의 경쟁 / 리액티브 앱이란? (1:37)

이런 개발 뉴스를 더 만나보세요

많은 수의 사용자가 설치한 모바일 앱이 얼마나 있는지 보여주는 그래프입니다. 다른 채널과 비교하면 적은 수로 사용자가 상당히 까다롭다는 것을 파악할 수 있습니다. 모바일 앱은 매우 개인적인 기기로 사용자는 자신의 기기와 홈 화면에 실제로 두길 원하는 앱을 직접 선별합니다. 따라서 이런 경쟁적인 시장이라면 두각을 나타내는 최고 수준의 모바일 앱이 필요할 것입니다.

사용자의 참여를 유도하거나 지속하려면 어떻게 해야 할까요? 사용자가 편안함을 느끼는 앱 틈바구니로 어떻게 뛰어들 수 있을까요? 사용자가 앱을 설치한 후 삭제하지 않고, 또 매일매일 들여다보는 홈 화면에 놓게 해야겠죠. 그 방법은 바로 리액티브 앱을 만드는 것입니다. 리액티브 앱은 기본적으로 세 가지의 중요한 특징이 있습니다.

  • 즉각적인 UI

자주 사용하는 이메일 애플리케이션이 있는 이유는 편지함 기능이 있기 때문입니다. 이 기능으로 네트워크 연결과 관계없이 이메일을 삭제하거나 생성할 수 있죠. 사용자나 UI가 업데이트되는 것을 방해하는 요소가 없기 때문에 훌륭한 사용자 경험을 만들고 이메일 앱을 지속적으로 사용하게 합니다.

  • 여러 기기에서 자동으로 동기화하는 기능

많은 사용자가 둘 이상의 기기를 사용합니다. 여러 대의 휴대폰을 사용하거나 태블릿과 폰을 함께 사용하죠. 게다가 데스크탑과 웹 애플리케이션도 같이 사용합니다. 좋은 사용자 경험은 이런 행동 양식을 이해하고 사용자가 작업하는 데이터를 어디에서나 사용할 수 있도록 하는 데서 나옵니다.

Facebook의 예를 들면, 한 기기에서 글자를 입력하기 시작하면, 그 글을 보고 있는 다른 기기들이 “누군가 댓글을 입력하고 있습니다…“라는 알림을 띄웁니다. 그 이유는 이 기능으로 더 많은 사용자 참여가 유도될 수 있기 때문입니다.

이런 사용자 경험을 뒷받침하는 것은 다른 기기의 모든 데이터를 동기화하고 위와 같은 경험을 가능하게 하는 기술입니다. Facebook은 이런 기술과 함께 모든 다른 채널에 이를 제공할 능력이 있습니다. 따라서 사용자 경험과 참여도를 향상할 수 있죠. 이것이 리액티브 앱이 가져야 할 두 번째 속성입니다.

  • 푸시 알림

푸시 알림을 사용하는 것이 리액티브 경험 전달의 핵심입니다. 사용자가 앱을 열면 보통 1~2분가량 사용하고 꺼버리는데, 이것으로 사용자 참여가 끝나버리면 안 되겠죠? 푸시 알림은 반복적인 패턴을 만들어 주는데 Uber와 Lyft가 좋은 사례입니다.

Uber에서 차를 예약하는 경우 앱을 끝낸다고 사용자 경험이 끝나지는 않습니다. 앱을 끄더라도 차를 계속 기다리고 있다가 바깥으로 나가서 차를 탈 수 있는 정확한 시간에 푸시 알림이 와야 합니다. 이것이 바로 리액티브 경험의 핵심입니다.

리액티브 모바일 앱 구축의 어려움 (8:00)

인터넷 연결 이슈

가장 풀기 어려운 숙제는 모바일 네트워크가 보편적이지 않고 신뢰할 수도 없다는 점입니다. 저는 LTE를 사용하는데도 샌프란시스코에서 회사로 운전해가는 도중에 자주 네트워크가 죽는 장소가 있습니다. 도심 안의 Van Ness 라는 곳이죠. 연결이 빠르더라도 네트워크가 죽을 수 있으며, 특히 데이터를 기기 사이에서 동기화하거나 즉각적인 UI를 제공하고 싶은 경우 이런 상황을 극복하기 쉽지 않습니다.

사용자는 앱의 동작 방식이나 운영체제를 완벽하게 제어할 수 있고, 앱은 언제든지 종료되거나 재시작될 수 있습니다. 게다가 iOS와 안드로이드는 배터리를 절약하기 위해 앱을 종료하는 시점이 서로 다릅니다. 앱 개발자로서 앱을 개발할 때 고려해야 할 또 다른 핵심 요소인 셈입니다.

REST

백엔드 인프라스트럭처나 서버, 그리고 앱 간의 통신 측면에서 웹에서 통신 제공을 위해 일반적으로 사용되는 방법은 REST API입니다. 하지만 모바일 상황으로 오면 몇 가지 문제에 봉착하게 됩니다.

사실 REST를 모바일에 적용하면 실패하기 쉽고 성가신 일이 많으므로 많은 오류 시나리오가 생겨납니다. REST 호출을 만들려고 할 때 연결이 끊기면 어떻게 될까요? 앱은 이 상황에서 어떻게 응답해야 할까요? 앱에서 실제로 요청을 보낸 것을 확인했지만 서버에서 응답이 돌아오기 전에 갑자기 연결이 끊어진다면 어떨까요?

마지막으로 REST는 데이터 푸시용으로 고안되지 않았으므로 REST 호출을 푸시할 수 있는 기능이 없습니다. 앱에서 어떤 풀링 작업을 해야 하거나 Apple의 푸시 시스템을 사용한 후 그 응답으로 REST 요청을 만들어야 한다면 어떻게 해야 할까요? 리액티브 앱의 주요 특성 일부를 제공하기 위해 훨씬 더 복잡한 구성을 창조해내야만 하겠죠.

솔루션 (12:09)

우리의 솔루션은 공유 상태가 지속되면 이 모든 복잡한 문제를 훨씬 쉽게 풀 수 있다는 점에서 출발합니다. 기기와 서버상에 모두 데이터가 있다면 서로 동기화를 유지하기가 더욱 쉬워집니다.

그래서 이 두 가지가 결합된 Realm 모바일 플랫폼을 출시했습니다. 사용자나 UI에 의해 보여질 데이터를 유지하는 기기상에서 로컬로 실행되는 데이터베이스와, 같은 데이터의 복제본을 가진 서버 애플리케이션이 있어서 이 둘이 서로 실시간 데이터 동기화 채널로 통신합니다. 기기 로컬에서 변경 사항이 발생하면 데이터베이스에 반영되고, 네트워크 연결이 가능한 때 서버로 보내집니다. 마찬가지로 서버에서 변경 사항을 만들어서 푸시할 수도 있습니다.

An app which uses a results controller, which uses an ORM, which uses SQLite

구체적인 적용 사례를 생각하자면 사용자가 구매할 수 있는 전자 상거래를 만들 수 있습니다. Realm으로 구매 객체를 만들고 모바일 앱에 로컬로 저장하는 작업은 기기상에서 실행되는 데이터베이스가 있으므로 항상 완료될 수 있습니다. 네트워크 연결이 된 상태라면 구매를 완료한 즉시 구매 객체를 서버로 보내서 똑같은 구매 객체가 서버상에 반영됩니다. 서버는 이에 반응해서 필요한 작업을 할 수 있습니다. 여기서는 전자 상거래를 위한 Stripe API를 호출한다고 가정하겠습니다.

다음으로 서버 시스템은 해당 객체에 현재 처리 중이라는 내용을 업데이트해서 동기화를 통해 클라이언트로 되돌려 보낼 수 있습니다. 모바일 앱은 이 변경 사항에 반응해서 UI를 업데이트하고 사용자에게 처리 중임을 알립니다. 핵심은 이 상황의 어느 시점에서라도 네트워크가 끊길 수 있다는 것입니다. 동시에 동기화 역시 중단될 수 있겠지만, 아무 문제도 발생하지 않습니다. UI는 모바일 클라이언트의 최신 데이터를 보여주며, 서버도 상태를 알고 있기 때문입니다.

Stripe 호출이 실제로 반환되면 주문이 끝났음을 구매 객체에 업데이트합니다. 그 후 네트워크가 다시 연결되면 모바일 기기로 다시 이 객체가 동기화되어 돌아가고 UI를 업데이트해서 사용자에게 구매가 끝났다는 상황을 알려줄 수 있습니다. 이 방식으로 앞서 말한 모바일 앱을 개발하면서 발생할 수 있는 수많은 오류 시나리오에 대한 걱정을 잊어버릴 수 있습니다.

Realm 모바일 플랫폼은 클라우드 서비스가 아닌, 기존 인프라에 통합할 수 있는 서버 애플리케이션이므로 실제로 모바일 게이트웨이나 브리지와 같은 개념인가 하는 생각이 들 수도 있을 겁니다. Realm 모바일 플랫폼은 더욱 모바일에 맞게 만들려는 백엔드 시스템이나 API와 클라이언트 사이에 데이터를 전송하는 통로가 될 수 있습니다. 이해를 돕기 위해 Realm에 대해서 살짝 설명하겠습니다.

우리는 6년 전 시작한 회사로 현재 수많은 앱이 사용하는 모바일 데이터베이스를 구축하기 시작했습니다.

최근 우리는 동기화를 가능하게 하는 Realm 오브젝트 서버를 개발했고, 현재 무료 시험 버전으로 테스트를 해 볼 수 있습니다. GitHub에서 Realm의 모든 오픈 소스 코드를 볼 수 있습니다.

어떻게 서버 시스템을 스케일링할 수 있나요? (18:24)

로드 밸런서가 있는 수평 스케일링 시스템과 같은 여러 기능을 갖추고 있고 계속해서 Realm 오브젝트 서버를 더 추가할 수 있으므로 Realm 모바일 데이터베이스를 가진 사용자를 대상으로 매우 쉽게 사용할 수 있습니다. 사용자가 증가하면 이를 모든 서버에 확장해서 공유하면 됩니다. 백업을 지속할 수 있도록 레플리카에 백업할 수 있는 시스템도 갖추고 있으므로 본 서버가 실패하면 레플리카를 본 서버로 교체할 수도 있습니다.

백엔드에서 요청을 보낼 수 있으니 앱에 많은 수의 서드 파티 SDK를 넣을 필요가 없다는 뜻인가요? (18:24)

그렇습니다. Realm 모바일 플랫폼을 앱의 데이터 레이어로 사용할 수 있도록 만들었으며, 기존에 데이터 전송을 위해 많은 SDK를 사용했다면 이를 간소화할 수 있습니다.

연결이 안 될 경우의 예로 들 수 있는 앱은 무엇인가요? (20:17)

저는 여행 경비를 위한 앱인 Expensify를 많이 사용하는데, 여기에도 Realm이 사용됩니다. 영수증을 스캔하는 작업을 여행 중이나 비행기에서 할 수 있기 때문에 오프라인에서도 가능해야 하는데, Expensify는 이런 오프라인 상황을 잘 이해해야 하고 실제로 적용하고 있는 사용자 경험 사례라고 생각합니다. Realm을 사용해서 영수증을 스캔하면 기기 로컬로 저장한 다음 네트워크가 연결된 다음에 전송하고 있습니다.

다음: Realm 이해하기 #3: 골치아픈 REST API에서 벗어나 효율적인 모바일 네트워크를 구성하는 방법

General link arrow white

컨텐츠에 대하여

2016년 11월에 진행한 Open Mobile Summit 행사의 강연입니다. 영상 녹화와 제작, 정리 글은 Realm에서 제공하며, 주최 측의 허가 하에 이곳에서 공유합니다.

Adam Fish

Adam is the Director of Product at Realm, where he manages the product development for currently supported mobile platforms and upcoming new products. He has a strong background in entrepreneurship and software development, having previously co-founded Roobiq, a mobile-first sales productivity app used by sales teams worldwide.

4 design patterns for a RESTless mobile integration »

close