brunch

매거진 코드스테이츠 PMB 7기

라이킷 26 댓글 3

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 박형준 Jul 15. 2021

네이티브 앱, 웹 앱, 하이브리드 앱?

IT 제품의 개발 형태 알아보기[코드스테이츠PMB 07]

들어가며

무언가 낯설고, 상상을 뛰어넘는 무언가를 접했을 때 우리가 흔히 붙이는 관용어구가 있습니다.

외계(外界)

본 적 없는 생명체는 "외계 생명체"

엄청난 기술력은 "외계의 기술력"

본 적 없는 단어는 "외계어"

심지어 지구인이 확실한 사람에게도 "외계인"이라는 단어를 붙이곤 하죠.

믿을 수 없이 화려한 축구 기술을 수 없이 보여줬던 "외계인" 호나우지뉴 / 출처 : https://brunch.co.kr/@artistchoi/53

이때 외계(外界)라는 단어는 '상식적으로 생각할 수 있는 범주(계, 界) 너머(외, 外)에 있다'는 의미로 활용됩니다.

역사가 짧고, 변화가 잦은 IT업계에도 '상식적으로 생각할 수 있는 범주를 넘어선 단어', 외계어가 많이 있습니다. 이전 글에서도 다양한 용어들을 다뤄왔지만, 특히 아래의 단어들은 의미를 알 것 같으면서도 헷갈리는, 외계어 같은 단어라고 생각합니다.

네이티브 앱, 모바일 웹, 웹앱, 하이브리드 앱

앱은 앱이고, 웹은 웹이지 네이티브는 뭐고, 웹앱은 또 무엇일까.

사실 위 단어는 IT 제품을 만들 때 고려해야 할 '제품의 개발 형태'를 나타내는 단어입니다. IT 제품 개발과 관련된 일을 하고 있다면 익숙할 수 있지만, 이를 잘 모르는 일반인 입장에서는 외계어 같은 단어인 것이죠.

이번 글에서는 앞서 나열한 각각의 외계어가 의미하는 바는 무엇인지, 각 개발 형태의 장단점은 무엇인지 간략하게 정리해 보려고 합니다.

알쏭달쏭 알 것 같으면서도 알 수 없는 IT 용어들...

기본 용어

우선 제품 개발 형태에 대해 본격적으로 알아보기 전에, 이를 설명하고 이해하는데 도움이 되는 IT 용어에 대해 간략하게 정리해 보려고 합니다.

IT 기기가 작동하는 모식도 / 자체 제작

1. 하드웨어(Hardware, H/W)

컴퓨터, 노트북, 스마트폰 등 손으로 만질 수 있는 실체화된 전자기기(디바이스)

예시 : HP 컴퓨터, LG 그램, 맥북에어, 아이폰 12, 갤럭시 S 21, 아이패드 등

2. 소프트웨어(Software, S/W)

하드웨어의 기능을 수행하게 만드는 프로그램

2.1. 운영체제(Operating System, OS)

하드웨어를 관리하고, 응용프로그램을 실행할 수 있게 해 주는 시스템 소프트웨어

예시 : Windows 10, Mac OS X, iOS, Android 등

2.2. 응용프로그램(Application, App)

OS 기반 위에서 실행되는 소프트웨어. PC에서는 '프로그램', 모바일에서는 '앱'으로 불립니다.

예시 : 엑셀(Excel), 크롬(Chrome) 카카오톡, 토스 등

3. 웹페이지

인터넷에 연결된 디바이스에서 '웹 브라우저' 애플리케이션을 통해 접속할 수 있는 페이지

웹 브라우저 : 크롬(chorme), 인터넷 익스플로러(Internet Explorer), 사파리(Safari) 등

웹 페이지 : 네이버(www.naver.com), 구글(www.google.com) 등

이번 글에서 언급되는 하드웨어(=디바이스), 운영체제(=OS), 응용프로그램(=애플리케이션, 앱)은 지금 정의된 내용을 기반으로 작성하였으니 참고 부탁드립니다!

제품의 개발 형태

0. 웹(Web)과 앱(App)

스마트폰으로 '쿠팡'에서 '티셔츠'를 구매한다고 생각해 봅시다.

① 아이폰에 설치된 사파리(Safari) 앱을 켜고, '쿠팡 웹사이트(www.coupang.com)'에 접속하여 구매

② 앱스토어(AppStore)에서 다운로드하고 설치한 '쿠팡 앱'에서 티셔츠를 검색하고 구매

티셔츠를 구매한다는 같은 과업(Task)을 수행하지만, 구매하는 방법이 "웹사이트"와, "앱"으로 다른 것이죠. 이를 이해하면 앞으로 나올 내용도 쉽게 소화할 수 있습니다.

- '웹 브라우저'로 접근하는가? 웹

- '애플리케이션'을 실행해 접근하는가? 앱

1. 네이티브 앱 (Native Application)

"각 운영체제에서 지원하는 개발 언어로 만들어진 애플리케이션"

운영체제별로 애플리케이션을 만들 때 사용하는 '개발 언어'에는 차이가 있습니다. 대표적인 모바일 스마트폰 운영체제인 애플(Apple)의 iOS는 스위프트(Swift)라는 언어를, 구글(Google)의 Android 운영체제는 자바(JAVA), 코틀린(Kotlin)이라는 언어를 사용합니다.

실제 '언어'가 국가, 문화에 따라 다르듯, '개발 언어'도 OS, 디바이스 제조사에 따라 다르다고 생각하면 쉽습니다.

미국에선 알파벳으로 영어를, 중국에선 한자로 중국어를, 한국에선 한글로 한국어를 쓰는 것과 같은 이치입니다. 애플과 구글이라는 회사는 비즈니스 세계에서는 미국과 한국처럼 '다른' 조직 이기 때문에 자사에서 만드는 운영체제와 디바이스에 따라 다른 개발 언어를 사용하는 것이죠.

이렇듯 각 운영체제의 '토박이 언어'를 사용해 개발한 응용프로그램을 '네이티브 애플리케이션(Native Application, 네이티브 앱)'이라고 부릅니다.

컴퓨터에서는 설치하는 프로그램들, 스마트폰에서는 앱스토어(App Store)에서 다운로드하는 앱들이 네이티브 앱의 범주에 들어간다고 보면 됩니다.

네이티브 앱의 가장 큰 장점은 하드웨어의 성능을 최대한으로 활용할 수 있다는 것입니다.

반면에 운영체제별로 각각 코딩을 해서 만들어야 한다는 단점이 있습니다. '쿠팡 앱'을 안드로이드 스마트폰과 iOS 스마트폰 사용자 모두가 쓰게 만들려면, 안드로이드 버전의 쿠팡 앱과, iOS 버전의 쿠팡 앱을 따로 개발해야 하는 거죠. 각 언어를 개발할 수 있는 개발자를 따로 뽑아야 하기에, 개발 언어의 개수만큼 개발/유지/보수하는데 비용이 추가로 들어갑니다.

2. 모바일 웹 (Mobile Web)

"웹 언어로 만들어진, 모바일 기기에서 이용하기에 최적화된 웹 페이지"

사파리(Safari), 크롬(Chrome), 인터넷 익스플로러(Internet Explorer) 등 '웹 브라우저'를 통해서만 사용할 수 있는 IT 제품을 말합니다. 설치가 필요한 '애플리케이션'과는 근본적으로 다르죠. 웹서비스는 운영체제와 무관하게 HTML, CSS, JS를 용해 개발됩니다.

웹 브라우저를 쓸 수 있는 PC와 같은 비 모바일 기기에서도 접속이 가능합니다. 모바일 디바이스에서 웹브라우저로 접속할 수 있는 모든 서비스가 넓은 의미에서 모바일 웹이라고 볼 수 있지만, 좁은 의미로는 모바일 전용으로 만들어진 반응형/적응형 웹 페이지들을 모바일 웹으로 이해하면 쉽습니다.

모바일 웹은 디바이스, 운영체제와 무관하게 웹브라우저만 있으면 앱 설치 없이 누구나 서비스를 이용할 수 있다는 점이 가장 큰 장점입니다. 또한 네이티브 앱과 달리 여러 언어로 개발할 필요 없이 HTML, CSS, JS로 개발하면, 모든 운영체제에서 접속이 가능하기 때문에 개발/유지/보수에 들어가는 비용 또한 줄일 수 있죠.

하지만 웹브라우저에 종속되어 있기 때문에 구현할 수 있는 기능에 제약이 있고, 네이티브 앱에 비해 상대적인 퍼포먼스가 떨어진다는 점이 단점이 있습니다.

3. 웹 앱 (Web App)

"앱의 기능을 모두 웹 언어로 구현한 웹 페이지"

웹앱(WebApp)은 말 그대로 Web + App, 웹과 앱을 합친 것을 말합니다. 웹 언어로 앱과 같은 UI/UX를 만들었다고 보는데요. 저는 네이티브 앱과 같은 자연스러운 사용자 경험에 좀 더 신경 쓴 모바일 웹이라고 이해하였습니다.

모바일 웹 보다 모바일에 더욱 최적화된 사용자 경험을 가질 수 있고, 네이티브 앱과 달리 새로운 기능 탑재를 위한 '패치' 혹은 '업데이트' 설치 필요 없이 새로고침 한 번으로 제품 개선을 빠르게 경험시킬 수 있다는 것이 장점입니다.

다만 앱과 같은 사용자 친화적인 터치 조작을 구현하는 것이 네이티브 앱에 비해 까다롭다는 단점이 있습니다.

4. 하이브리드 앱 (Hybrid Application)

"기능의 일부를 웹으로 구현한 애플리케이션"

기능을 기준으로 웹앱, 하이브리드 앱, 네이티브 앱을 아래와 같이 구분할 수 있다고 생각합니다.

앱 기능을 '모두' 웹으로 구현하였는가? - 웹앱
앱 기능을 '일부' 웹으로 구현하였는가? - 하이브리드 앱
앱 기능을 '모두' 앱으로 구현하였는가? - 네이티브 앱

하이브리드는 네이티브 앱과 같이 앱스토어에서 다운로드를 받고 설치해서 이용하는 애플리케이션입니다. 하지만 제품을 서비스하는 회사의 비즈니스적 상황과 판단에 따라, '웹뷰(웹 페이지를 네이티브 앱에서 보여줄 수 있는 기능)'와 같은 기능을 활용하여, 웹 언어로 만들어진 기능을 앱에서 제공하는 것도 가능합니다.

대표적인 하이브리드 앱은 카카오톡이 있습니다. 스마트폰에서 카카오톡을 실행해보면, 하단 내비게이션 메뉴 가운데 # 메뉴가 있는데요. 해당 메뉴에서는 다음 뉴스, 다음 카페 등에 등록된 콘텐츠를 볼 수 있는데, 카카오톡이라는 앱에서 구동되기는 하지만, 실제로는 www.daum.net 혹은 cafe.daum.net 웹에 등록된 콘텐츠를 '보여주는' 것에 불과합니다. 네이티브 언어로 만들어진 콘텐츠가 아닌, 웹 언어로 만들어진 웹 페이지를 보여주는 것이죠.

하이브리드 앱은 애플리케이션에 웹 언어를 활용해 웹과 앱 양쪽에서 필요한 기능을 효율적으로 차용 할 수 있다는 장점이 있습니다.

반면에 개발/유지/보수를 위해 네이티브 개발 언어와 웹 개발 언어를 모두 알아야 한다는 점, 순수 네이티브만큼의 강력한 퍼포먼스를 내기 어렵다는 단점도 존재합니다.

마치며

오늘은 네이티브 앱, 모바일 웹, 웹앱, 하이브리드 앱의 특징과 장단점을 알아보았습니다.

이를 통해 개발의 형태는 어떠한 정답이 있는 것이 아닌, 서비스의 특징, 개발팀의 상황, 자금 상황 등에 따라 각자에게 맞는 최적의 해답이 있을 뿐이라는 것을 알 수 있었습니다.

아직도 외계어 같은 IT 용어들이 많지만, 차근 차근 공부해서 외계어가 아닌 모국어처럼 느껴지는 순간이 오길 바라며...

<Wrap-up>

1. 네이티브 앱
    - 각 운영체제에서 지원하는 개발 언어로 만들어진 애플리케이션
    - 디바이스 성능을 최대한 활용할 수 있음
    - 언어에 따라 개별적으로 개발해야 하므로 개발 비용이 많이 들어감

2. 모바일 웹
    - 웹 언어(HTML, CSS, JS)로 만들어진, 모바일 기기에서 이용하기에 최적화된 웹 페이지
    - 한 언어로 다양한 OS/디바이스에 서비스를 제공할 수 있음
    - 구현 가능한 기능에 제약이 있고, 네이티브에 비해 퍼포먼스가 떨어짐

3. 웹앱
    - 앱의 기능을 모두 웹 언어로 구현한 웹 페이지
    - 웹 언어로 앱의 서비스를 구현할 수 있음
    - 앱과 같은 조작과 기능을 웹 언어만으로 구현하기 어려울 수 있음

4. 하이브리드 앱
    - 기능의 일부를 웹으로 구현한 애플리케이션
    - 앱과 웹 양쪽에서 필요한 기능을 효율적으로 개발할 수 있음
    - 개발/유지/보수를 위해 네이티브 언어와 웹 언어 모두를 알아야 함