증산법종교
▼ 구글로 검색
수정 삭제
애플리케이션 이야기

애플리케이션 이야기 3

열린마당  해새 해새님의 글모음 쪽지 2016-02-29 13:28 5,349
오늘은 재미 삼아 IT 관련한 얘기 좀 하고자 합니다. 이게 사이트 개편 방향성과도 연관이 있고 해서 말이지요. 참고로 아주 기초적인 수준에서 풀어나가려고 하니 아시는 분은 그냥 그러려니 하고 넘어가주시면 고맙겠습니다. ^^

이전의 피쳐폰과 비교해서 스마트폰의 가장 두드러진 특징이 바로 '어플'이란 개념일 겁니다. 어플은 '애플리케이션(application)'의 약칭이고 이 또한 '애플리케이션 소프트웨어'의 줄임말로써 우리말로 하면 응용소프트웨어 혹은 응용프로그램이라고 할 수 있겠습니다.

영어권에서는 이를 app, 즉 앱이라는 약칭으로 쓰고 IT용어에서도 모바일앱, 웹앱 등으로 쓰고 있습니다. 사실 일상대화에서는 앱보다는 어플이 말하기도 그렇고 알아듣기에도 더 쉬운데 일단 여기서는 앱이라고 하겠습니다.

사실 애플리케이션 즉 앱은 스마트폰이 나오기 전부터 이미 우리가 쓰고 있던 것으로 아래한글, 포토샵 등도 다 응용소프트웨어 즉 앱입니다. PC용 앱이지요. 다시 말해서 기존 운영체제(OS)에 기반해서 다양한 목적으로 깔아 쓰는 소프트웨어를 앱이라고 하고 똑같은 방식으로 스마트폰 역시 안드로이드, iOS, 모바일윈도 등의 모바일운영체제에 다양한 목적의 앱을 깔아 쓰는 겁니다. 이 때문에 스마트폰의 정체성을 전화기가 아니라 컴퓨터로 보는 거고 통신기능도 그 중 하나의 응용프로그램 즉 앱인 거지요.

우리가 인터넷 다시 말해 웹에 접속하기 위해 사용하는 앱은 브라우저라고 하고 대표적인 제품들이 인터넷익스플로러(MS), 크롬(구글), 파이어폭스(모질라재단), 사파리(애플) 등입니다. 현 시점에 와서는 웹이 컴퓨팅 환경의 절대적 위치를 점하고 있고 아래한글, 포토샵 같이 운영체제에 직접 깔아서 쓰던 고전적인 응용프로그램의 영역까지도 웹서비스로 전환 중인데 구글문서도구가 이 방면에 독보적인 위치를 차지하고 있지요.

쉽게 말하자면 아래한글, 포토샵 등을 컴퓨터에 깔지 않고도 인터넷 환경만 되면 동일한 작업을 할 수 있다는 얘깁니다. 예제로 간단한 이미지작업을 할 때 제가 이용하곤 하는 웹포토샵을 소개합니다. https://pixlr.com/editor/ 링크로 접속하면 아무런 프로그램 다운받지 않고도 포토샵에 준하는 작업을 할 수 있습니다. 대략 60% 정도? (참고로 포토샵 제작사인 어도비도 자사 제품군을 클라우드 환경으로 전환하면서 월과금 방식의 정책을 추진 중입니다)

이러한 현상(웹의 영역 확대)은 모바일앱에서도 진행 중이며 이로 인해 웹앱이 요즘 부쩍 주목을 받고 있습니다. 참고로 카카오톡, 다음맵 같은 고전적인 앱을 전문용어로는 네이티브앱이라고 하고 웹앱은 그에 대비되는 용어입니다. 지금부터 하는 얘기는 사이트 개편 방향성과도 관련이 있습니다.

네이티브앱과 웹앱의 차이를 한마디로 정의하면 초기 다운로드 유무입니다. 즉 앱을 이용하기 위해 스마트폰에 특정 소프트웨어를 다운받으면 네이티브앱이고 웹(브라우저)에 접속해서 바로 이용할 수 있으면 웹앱인 거지요. 다시 말해서 네이티브앱을 쓸려면 반드시 구글플레이(안드로이드) 혹은 앱스토어(iOS)에서 다운받아야 하고 웹앱은 그냥 브라우저로 접속해 쓰면 됩니다.

그런 점에서 웹앱이 네이티브앱보다 훨씬 개발하기도 쉽고 사용자 입장에서도 편하다고 볼 수 있는데 그럼에도 불구하고 네이티브앱만이 가진 장점 역시 당연히 있습니다. 예를 들면 디바이스 자체에 내장되어 있는 카메라, 동작센서 등과 연동한 앱은 현 시점에선 네이티브앱만이 가능합니다. 그외에도 무시할 수 없는 장점이 데이터 사용량인데요. 스마트폰은 PC와 달리 데이터 사용량을 늘 의식해야 합니다. 이게 사용자 뿐만 아니라 앱개발업체 입장에서도 마찬가지입니다. 사용자가 앱을 이용할 때 자사 서버를 통해 뿌려지는 데이터양을 최소화하는 것 역시 개발팀의 영원한 숙제이지요. 그게 곧 서비스품질 향상이자 비용절감이고요.

네이티브앱과 웹앱의 구조적인(?) 차이를 예를 들어 설명해보겠습니다. 생활용품 중에 용기에 담아서 쓰는 용액 같은 것들이 있지요. 예를 들면 방향제, 분무기, 잉크카트리지 등등. 처음에는 용기에 담긴 채로 사서 쓰다가 다 쓰고 나면 용액만 따로 사서 용기에 담아 쓰곤 합니다. 그게 아니라 살 때마다 용기까지 일일이 새로 사야 한다면 구매비용, 운송비용, 폐기비용 등 추가비용부담이 상당할 겁니다.

네이티브앱도 같은 개념입니다. 맨 처음에 앱의 UI를 형성하는 틀(소스코드)을 다운받고 나면 그 다음부터는 오직 컨텐츠를 표현하는 데이터만 주고받는 거지요. 반면 웹은 접속할 때마다 사이트 혹은 웹앱의 UI를 형성하는 소스코드(HTML)를 일일이 새로 전송받게 됩니다. 같은 사이트 내에서 이동을 할 때도 중복되는 HTML코드를 일일이 전송받아야 하게 되기 때문에 이로 인한 데이터의 낭비가 적지 않은 거지요.

이 때문에 최근 사이트들은 ajax 등의 비동기 통신방식을 적극 활용하여 데이터 사용량도 줄이고 사용자 환경도 한결 쾌적하게 하고 있는 중입니다. 다시 말해서 페이지 이동(혹은 새로고침)없이 페이지 일부에 해당하는 데이터만을 서버와 송수신하여 반영함으로써 속도도 빨라지고 비용도 줄이는 거지요. (법종교 사이트도 원래 그 방식을 댓글기능에 적용했다가 어떤 기능상의 오류로 인해 보류한 상황)

웹앱이 이러한 추세의 궁극으로 간 것이 최근 대두되고 있는 SPA(Single Page Application)입니다. 우리말로 하면 '단일 페이지 앱'이라고 하겠는데 말 그대로 맨 처음에 접속한 페이지에서 사이트의 모든 서비스가 이루어진다는 개념입니다. 즉 SPA를 적용한 사이트에서는 아무리 페이지를 이동하더라도 사실상 서버로부터 UI에 해당하는 소스코드는 재전송받지 않고 오직 컨텐츠만 전송받게 됩니다.

이게 가능한 것이 사이트 전반의 UI를 형성하는 HTML소스코드를 처음에 모두 히든상태로 다운받아 놓은 다음 그때그때 디스플레이하거나 아니면 브라우저단에서 자바스크립트로 해당 HTML소스코드를 생성해서 보여주는 등의 방식을 쓰기 때문이지요.

아무튼 SPA 사이트의 핵심 목적은 맨 처음 사이트에 접속해서 UI 소스코드를 다운받은 뒤에는 서버와의 송수신은 오직 컨텐츠 데이터만 적용한다는 것입니다. (용기는 재활용, 용액만 리필) 현재 페이스북(웹)이 SPA를 적용한 대표적인 사이트지요. 물론 모바일에서는 네이티브앱도 있습니다.

결론을 말씀드리면 개편하는 법종교 사이트도 SPA를 적용하려고 하며 일전에 소개했던 MEAN 스택 중 Angular.js가 바로 SPA를 위한 프레임워크입니다. 이게 되면 모바일에서 사이트 이용시 훨씬 쾌적한 사용자 환경이 되리라 예상하며 무엇보다 데이터 비용도 대폭 절감되리라 예상합니다. PC로 접속했을 때도 같은 효과를 보게 되지요.

이밖에도 이번 개편에서 MEAN 스택 플랫폼을 무리스럽지만 과감하게 채택한 데에는 여러가지 이유들이 있습니다. 궁극적으로 법종교 네이티브앱을 개발하는데 있어서도 상당한 이점이 있으리란 것도 그 중 하나입니다. 이에 관한 상세한 얘기는 다음 기회로 미루도록 하겠습니다.

최대한 쉽게 쓴다고 했는데 아는 사람에게는 영 어설픈, 모르는 사람에게는 여전히 이해하기 힘든 글이 되지 않았나 싶군요. ^^;


*
사실 앱을 제대로 얘기하자면 하이브리드앱 등의 개념도 빼놓을 수 없습니다. 하지만 분량관계로...;;;
해새 쪽지 2016-03-02 20:37
지금 생각해보니 법종교 사이트에 ajax(Asynchronous JavaScript and XML, 에이잭스)를 적용한 실례가 있군요. 이 페이지 하단에 '글쓴이의 전체 글'과 '오리알터 전체 글' 목록 나오는 부분이 그것입니다. 이전 글목록을 보기위해 페이징넘버를 클릭하면 그 데이터만 서버에서 전송받아 해당 목록정보를 출력하지요. 속도도 속도지만 데이터 사용량이 확실히 줄어든다는 것이 이해가 갈 겁니다. 이걸 사이트 전체에 적용한 것이 SPA, 즉 단일 페이지 앱이고요.

근데 이 방식의 아킬레스건이 사이트 자체의 현재 페이지URL은 그대로 유지되기 때문에 뒤로가기나 새로고침을 하면 ajax로 받은 정보가 전혀 반영되지 않는다는 거죠. 이걸 해결하기 위한 기술이 이전에 소개한 바 있는 pjax이고요.

물론 이번에 채택하려고 하는 Angular.js에는 이미 이 문제를 위한 보완책이 적용되어 있습니다. ^^
화송 쪽지 2016-03-03 01:42
수고 많습니다
해새 쪽지 2016-03-03 17:26
화송 네 감사합니다^^ 어제 서울 올라와서 교보문고에서 책도 사고 다른 일도 보고 이제 강남터미널 가는 중입니다. 개편이 마무리 되어야 본격적으로 미디어 작업도 가능한데 마음이 참 급하네요.
댓글 쓰기
849 / 1,075 / 3,446 / 2,009,593 관리책임 : 증산법종교 미디어실 media@jsbeob.com
증산법종교.com / jsbeob.com
Copyright © 증산법종교 All rights reserved.