1. 웹앱이 무엇일까요

안녕하세요, 회원 여러분.
드디어 첫번째 강좌를 시작할 수 있게 되었습니다.

이번 강좌는 웹앱이 무엇이며, 어떠한 방법으로 개발할 수 있는지 알아보겠습니다.
실제로 앱을 제작하는 강의는 아니지만, 이러한 정의는 알고 있는 것이 좋으리라 생각합니다.

 

 

 

1. 웹앱이란?

웹앱이란 모바일 브라우저에서만 실행되는 웹 기반 어플리케이션을 의미합니다.
여기서 말하는 모바일 브라우저는 이미 설치된 브라우저를 지칭하는 것이지, 새로운 브라우저를 제작하여 이에 웹 페이지를 띄우는 것은 해당되지 않습니다.

새로운 브라우저를 제작하여 해당 브라우저를 독점하는 형태의 앱은 웹 기반으로 제작되었음에도 불구하고, 웹앱이 아닌 하이브리드 앱이라는 새로운 용어를 사용합니다.

그러한 앱들이 하이브리드 앱이라고 불리는 이유는, 브라우저를 제작하는 데에 사용되는 기술은 웹 보다는 네이티브 기술에 가깝이 때문입니다. 결과적으로 브라우저를 제작하는 네이티브 기술과 브라우저 내에서 실질적인 기능을 제작하는 웹 기술이 서로 섞여 하이브리드가 된다고 생각하면 됩니다.

 

 

 

2. 웹앱과 하이브리드 앱의 차이점

아래에 두개의 앱이 있습니다. 모두 웹 기술을 기반으로 한 어플리케이션이며, 달력이라는 주제를 가지고 있습니다.
두개의 앱의 UI는 90% 이상이 같습니다만, 기술적으로도 외형적으로도 많은 차이가 있습니다.

 

 

 

*1 UI의 차이점

왼쪽 앱의 UI 특징은 전형적인 웹앱의 단점이라고 볼 수 있습니다.

왼쪽 앱은 오른쪽 앱과는 다르게 웹 브라우저 상에서 작동하므로 해당 앱의 URL이 필연적으로 표시됩니다. 이는 사용자에게 있어서 불편함이 될 가능성이 매우 높은 UI 중 하나입니다.

일반적인 앱 사용자는 해당 앱이 어떠한 URL을 가지고 있는지 알 필요도 없으며, 알고싶지도 않을 겁니다. 그런데도 사용자는 앱에서 URL.을 이동할 때 마다 앱의 최상단으로 이동하여 URL을 표시하는 주소창이 표시되는 경험을 해야만 합니다. 또한, 아래에서 위로 스크롤을 할 때도 주소창과 기능 탭이 표시되며, 이는 앱 사용에 있어 매우 불편함을 줍니다.

그에 비해 오른쪽 앱은 주소창과 관련된 단점은 거의 없다고 보아도 됩니다.

보안이나 개인정보에 매우 민감한 사용자라면 앱에서 어떠한 내용을 어떠한 URL로 전송하는지 확인하고 싶을 수도 있습니다. 그런 사용자에게는 앱의 작동원리를 설명하지 않는 앱들은 정말로 끔찍할 것입니다. 그러나, 그러한 문제는 오른쪽의 하이브리드 앱에서만 발생할 수 있는 문제가 아니라 네이티브 앱과 웹앱에서도 당연히 문제가 생길 것입니다.

 

*2 기능의 차이점

웹앱은 브라우저 상에서 작동하기 때문에, 브라우저가 접근할 수 없는 기능은 웹앱에서도 사용할 수 없습니다.

왼쪽 앱은 브라우저 상에서 실행되고 있기 때문에 기기에 알람을 추가할 수 없습니다. 달력 앱에서 저장해 둔 일정에 알람이 울리지 않는다면, 이는 아무런 쓸모도 없는 고물단지에 불과합니다.

그에 비해 오른쪽 앱은 자체적으로 제작한 브라우저에서 작동하므로, 자신이 원하는 기능을 브라우저에 넣을 수 있으니 OS에서 제공하는 기능은 대부분 사용할 수 있습니다. 알람을 추가하는 기능도 마찬가지로 사용할 수 있습니다.

 

*3 배포 및 관리의 차이점

배포와 관리에 한해서는 웹앱이 매우 좋은 위치를 차지하고 있다고 생각합니다.

웹앱은 이미 설치된 브라우저에 해당 앱의 URL만 입력하면 바로 실행할 수 있으므로, 배포할 때 매우 편리할 것입니다. 따로 플레이 스토어에서 무언가를 설치하지 않아도 되며, 인터넷에 접속이 가능하다면 OS의 종류와 관계없이 똑같이 동작할 것입니다. 또한, 앱의 구성파일이 사용자 기기에 저장되는 것이 아니라 서버에서 불러와 사용하는 것이기 때문에, 실시간으로 수정이 가능합니다. 심각한 오류가 생기거나, 취약점이 있다면 즉각적으로 해결하는 것이 가능하므로 관리에 있어서도 많은 도움이 될 것입니다.

이에 비해 하이브리드 앱은 웹 기반임에도 불구하고 URL을 통해 바로 실행이 불가능 합니다. 자체적인 브라우저가 필요하므로 어떻게든 앱을 설치해야 합니다. 또한, 앱의 구성파일이 기기에 저장되므로 사용자가 업데이트를 의도적으로 막았을 때 해당 앱의 취약점을 수정하기가 쉽지 않습니다.

 

 

 

3. 웹앱을 개발하는 단계

참고로, 본 강좌의 주제에 들어간 웹앱이란 단어는 웹앱이라 쓰고 하이브리드 앱이라고 읽습니다.
강좌를 등록할 때 웹앱이라고 등록한 탓에, 웹앱이라는 단어로 통일하고 있습니다만, 여기서 말하는 웹앱은 웹으로 만든 앱을 의미합니다.

웹앱을 개발하기 위해서는 JavaScript 같은 클라이언트단 언어를 사용합니다.

HTML/CSS/JS 를 사용하여 모바일 페이지를 제작한 후, 그 결과물을 WebView라는 안드로이드 컴포넌트에 넣습니다.
WebView는 안드로이드의 Iframe이라고 할 수 있으며, 웹뷰와 아이프레임의 특징은 거의 비슷하다고 보면 됩니다.

원래라면 해당 작업을 하기 위해서 직접 Java를 통해 앱을 개발하여야 했습니다.
그러나 요즘은 해당 작업을 반 자동화 해주는 Apache Cordova 같은 프레임워크가 생겨, 조금 더 편리하게 앱을 제작할 수 있습니다.

 

 

 

4. 이제부터 개발할 내용

먼저, Cordova에 익숙해지기 위해 이를 사용한 숫자야구 게임을 제작해 볼 예정입니다.
해당 강좌에서도 설명하겠지만, 시간 날 때 숫자야구에 관련된 자료를 찾아보시면 더욱 이해가 잘 될 겁니다.

숫자야구 게임을 완성하면, 그 후부터 XpressEngine(RX/XE)로 제작된 웹 사이트와 연동되는 앱을 제작할 예정입니다.

 

 

 

이번 강좌는 여기까지 입니다. 1±500시간 후 다시 돌아오겠습니다.