brunch

매거진 어바웃 어플리케이션

라이킷 77 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 한상훈 Feb 20. 2017

어플리케이션의 미래: 프로그래시브 앱

자바스크립트 기반의 모든 플렛폼 어플리케이션 설계

1. 모든 플렛폼, 모든 디바이스

어플리케이션의 미래는 어떤 모습일까? 그 모습은 모든 디바이스와 OS를 호환하는 모습일 것이다. 안드로이드, iOS 뿐 아니라 어떤 환경에서도 사용할 수 있는 어플리케이션이야 말로 궁극적으로 지향하는 바일 것이다. 아직까지 이러한 모든 플렛폼에서 쓸 수 있는 어플을 만드는 노력이 없었던 것이 아니다. 소위 하이브리드 앱이라고 불리는 어플리케이션 제작형태는 안드로이드와 iOS에 동시에 사용할 수 있는 어플을 제작하는데 사용되었다.

그 중 대표적인 Cordova나 Phonegap, Xamarin은 HTML을 이용하거나 C#을 기반으로 코드 재사용 요소를 구성하며, 각각의 OS의 세밀한 부분은 네이티브 언어인 자바와 Object-C를 이용하여 개발했다. 그러나 이러한 구성은 기본적으로 네이티브 언어만을 사용하는 어플리케이션보다 낮은 퍼포먼스와 제한된 기능을 보여주었고, 그 결과 많은 개발자들이 선호하지 않게 되었다.

2. 자바스크립트의 세계

2017.2.20 깃허브 저장소 언어 점유량, 자바스크립트가 압도적이다.

잠깐 밖의 이야기를 해보자. 자바스크립트는 오랫동안 천덕꾸러기 취급을 받던 언어였다. 초창기 자바스크립트는 모카스크립트라는 이름으로 시작했었고, 자바스크립트라는 이름 역시 당시 성장하던 자바의 인기에 동승하려는 노력 때문이었다. 초기에 그저 웹사이트의 몇가지 기능을 추가하던 언어는 깃허브에서 가장 지배적인 코드 베이스가 되었고, 이제는 어플리케이션의 영역까지 들어서고 있다.

노드는 비동기식 웹 서버 구축에 사용된다.

이러한 이유는 첫째로 Node.js(이하 노드)를 들 수 있다. 아직까지 자바스크립트 개발자들은 웹, 그 중에서도 프론트 엔드에 집중해있었다. 그런데 노드를 통해서 웹서버까지 그들의 영역이 확대된 것이다. 노드는 단순히 자바스크립트를 서버 사이드까지 확대시킨 것 뿐 아니라 기존의 서버사이드 프레임워크를 밀어내는 퍼포먼스를 보여주었다. 기존까지 서버사이드를 차지하던 PHP, Python, Ruby 그리고 그 전으로 가면 C, Perl 모두 노드에게 자리를 내주고 있다. 그 중에서도 루비는 급속도로 점유율이 낮아지고 있다.

https://assets.ec.quoracdn.net/main-qimg-b641db2d20e018b23e2335caa2ca5e91

대표적인 기업들 그 중에서도 페이팔이 2013년 그들의 엔지니어링 사이트에 올린 자료에 따르면 그들의 서버 소스코드를 노드로 변경하면서 개발시간과 운영 비용은 절반으로 단축했고, 성능은 33% 향상했다고 한다. 이러한 노드와 기존의 자바스크립트가 가지고 있던 프론트 사이드의 강점이 여러 가능성을 제시하게 되었는데, 바로 웹앱을 통한 모든 플렛폼 호환이다.

3. 프로그래시브 앱

프로그래시브 앱 혹은 프로그래시브 웹 앱이라 불리는 개념은 최근 개발자 사이에서 여러 논의가 진행되는 주제이다. 어떤 플렛폼, OS도 인터넷을 사용하는 방식은 유사하다. 모두 브라우저를 활용하고, 최종적으로 HTML 파일과 관련된 여러 데이터를 받는다.

Flipboard 케이스

Flipboard라는 어플리케이션은 웹사이트로 이용하거나 어플리케이션을 다운 받아 사용할 수 있다. 그러나 웹사이트를 모바일로 한참 이용하다보면 다음의 버튼을 만날 수 있다.

홈 화면에 추가를 요청하는 버튼이 생성된다.

ADD TO HOME SCREEN 버튼을 누르게 되면 어플리케이션과 동일한 느낌의 아이콘이 생성된다. 이 아이콘을 통해 Flipboard를 사용하게 되면 브라우저와는 다르게 상단의 주소창과 탭 부분이 사라지고 전체 화면으로 나타나 마치 설치한 어플리케이션 같은 느낌을 주게 된다. 그 뿐 아니라 실제로 동작도 웹사이트가 아닌 어플리케이션 처럼 하게 된다.

4. 퍼포먼스

서두에 제시했던 하이브리드 어플리케이션의 퍼포먼스를 생각해보자. 아무리 프로그래시브 앱이 여러 디바이스에 호환할 수 있고, 설치도 버튼 한번으로 가능하다 할지라도 낮은 퍼포먼스라면 사용하기 어렵다. 이 점은 자바스크립트 기반의 여러 오픈소스 프로젝트, 그 중에서도 앵귤러를 통해 설명하고자 한다.

구글에서 진행 후원하는 앵귤러.js

앵귤러는 SPA(single page application)의 대표적인 프레임워크이다. 직관적으로 생각해보자. 만약 첫번째 페이지에 웹 사이트의 모든 기능을 담당하는 자바스크립트 코드가 한번에 로딩된다면 어떨까? 분명 속도 상에서 큰 문제가 될 것이다. 그러나 SPA의 골격이 되는 파일을 사용자의 디바이스에 이미 저장해둔다면 동적으로 데이터를 불러오면 되기 때문에 SPA는 도리어 뛰어난 퍼포먼스를 보여주는데 유리함이 생긴다. 결국 SPA 프레임워크인 앵귤러를 프로그래시브 웹앱과 연결될 때 크게 발휘될 수 있다.