[서비스기획] 앱과 웹의 기본개념과 차이점에 대해 알아보자 (모바일웹, 웹 앱 vs 하이브리드 앱, 네이티브 앱)

현업에서 웹을 주로 다루다 보니, 모바일 서비스 기획에 필요한 앱의 기초지식을 쌓고자 해당 포스팅을 작성했다. 기초적인 내용이지만 헷갈리기 쉬운 개념이기에 잘 잡아두면 좋겠다. 

 

어떤 앱의 형태를 선택하느냐에 따라 구현에 필요한 시간, 비용, 인력을 예상할 수 있기 때문이다.

모바일 앱의 형태로는 크게 4가지로 모바일웹, 웹 앱, 하이브리드앱, 네이티브앱이 있다.

한눈에 정리해보는 웹/앱

 

웹앱, 모바일 웹은 Web에 해당하며, 네이티브 앱은 App, 하이브리드 앱은 Web+App에 해당한다.

각 형태의 정의와 예시, 장단점에 대해 알아보자.

 

 

1. 웹

기본적으로, 웹을 실행하는 환경은 '브라우저'이고 웹을 제공하는 곳은 '웹서버'이다. 

사용자가 브라우저에 URL을 호출하면 웹서버에서  브라우저 화면에 웹을 그리는 전체적인 과정('브라우저 렌더링') 방식이 진행된다. 

 

 

웹이 동작하는 방식

① 사용자가 브라우저에서 URL 입력

② 브라우저는 웹 서버를 실행하고 있는 컴퓨터에게 요청

③ 웹 서버에서는 프론트엔드 개발한 웹을 클라이언트(브라우저)에게 전달

 ( ■ 페이지 이동 시 마다 위의 동작이 반복된다.)

 

 

 

- 웹의 종류(적응형 vs 반응형)

 

적응형 웹(Adaptive web) 

: PC용, 모바일용 소스를 각각 개발하여 접속 기기에 맞추어 보여주는 기술 

 

• 서버, 클라이언트에서 접속한 기기가 PC인지 모바일인지 자동 판단하여 기기에 맞는 소스를 따로 보여준다.
• 반응형 웹보다 깔끔하고 이용 속도도 빠르지만 각각 버전의 화면을 개발해야 하기에 시간이 많이 들고, 유지보수를 위해  각각 반영해야 하는 번거로움이 있다. 

 

 

반응형 웹(Responsive web)

: 하나의 소스를 화면 크기 별로 유연하게 이미지와 그리드를 최적화해서 나타내는 기술

 

• 미디어 쿼리를 사용해 각각의 화면 크기를 확인하여 홈페이지를 최적화하여 나타내주는 기술이다. 
• 하나의 템플릿으로 제작되어 개발이 간편하고 소요되는 리소스가 적다. 유지보수 시 한번의 수정으로 반영이 가능하다.
• 모든 기기를 위한 CSS를 전부 다운로드해야 한다는 점에서 데이터를 낭비하고 로딩시간을 늘린다는 단점이 있다.

 

 

 

- 모바일 웹

 

모바일 웹= 웹 100 + 브라우저

모바일 화면에 맞게 구성한 웹. 브라우저(Safari, Chrome 등)에 URL을 입력하여 들어가는 웹

 

모바일웹

 

장점	① 앱을 설치하지 않아도 웹브라우저를 통해 서비스를 이용할 수 있다. ② 웹개발만 진행해도 되기에 비용 및 리소스 투입량이 적다. ③ 개발 소요 시간이 적게 든다. ④ 유지보수에 드는 수고와 시간이 적게 든다.
단점	① 모바일 웹으로 접속시 로딩 시간이 많이 소요된다. ② 앱에서 사용할 수 있는 모바일 기기의 기본 기능을 사용할 수 없다. (카메라, 음성녹음 등) ③ 푸시알람 및 마케팅 효과를 얻을 수 없어 서비스 체류시간이 낮다.  ④ 앱에 비해 제한적 기능으로 사용자 이탈율이 증가한다.

  

 

 

- 웹 앱

 

웹 앱= 웹 100 + 앱 껍데기 

모바일 웹과 근본적으로 같지만, 겉모습, 구동 방식을 앱처럼 보이게 한 앱. 앱 껍데기를 쓴 웹.

 

 

웹 앱

 

장점	① 웹기반의 앱으로 개발에 소요되는 시간, 비용, 인력의 부담이 적다. ② 앱스토어에서 다운로드 받은 웹앱은 웹 업데이트 시, 자동으로 반영된다. (url기반이므로) ③ 앱스토어에 업데이트 시 심사 승인을 매번 거치지 않아도 된다.
단점	① 앱에 최적화되어 있지 않아 화면이 고정되어있지 않고, 불안전하다. ② 반응속도, 터치민감도 등 앱에 비해 사용성이 떨어진다. ③ 웹과 앱에서 동일한 기능과 프로세스를 가지고 가기에 모든 프로세스는 화면을 기준으로 진행된다. (앱의 팝업, 푸시, 바텀시트 등을 사용하여 복합 구현이 어렵다.)

 

 

 

2. 모바일 앱

모바일 앱은 안드로이드/ IOS 두개의 OS 플랫폼을 사용하여 실행할 수 있다. 

앱은 웹과 다르게, 요청시 호출하는 방식이 아닌 이미 모든 페이지와 코드들이 앱 내부에 존재한다. 

 

 

앱이 동작하는 방식

① 화면이 로드되면서 API 서버에게 어떤 페이지 관련 정보를 달라고 요청한다.

② API 서버는 해당 페이지 정보 요청 확인 후 데이터 응답 값을 넘겨준다.

③ 해당 페이지를 받은 API 응답값을 바탕으로 실행 

 

 

- 하이브리드 앱

하이브리드 앱 = 일부는 웹 + 일부는 앱

 

웹을 기반으로 앱의 기능을 차용한 형태의 앱으로, 앱(패키징) 안에 웹 뷰를 불러오는 방식이다.

웹 앱, 네이티브 앱의 장점을 모두 얻기 위한 앱이다.

 

 

하이브리드 앱

 

장점	① 웹페이지와 앱에서 기능을 다르게 구현할 수 있다.  ② 네이티브 앱에 비해 구현 비용이 적게 들고 빠르게 구현이 가능하다.  ③ 웹 상의 업데이트가 자동으로 반영되므로, 사용자가 직접 업데이트 하지 않아도 된다.
단점	① 네이티브 앱에 비해 앱의 속도가 느리다.   ② 모바일 디바이스에 최적화 되어 있지 않기에, 화면을 줄이거나 늘리거나 하는 것이 가능하다. ③ 모바일 디바이스의 기본기능 (카메라, 음성, 푸시알람 등)을 사용할 수 없다.    (*단 일부 기능은 접근 가능하다.)

 

 

- 네이티브앱 

네이티브 앱 = 앱 100

 

모바일 기기에 최적화된 언어로 제작한 앱으로써, OS의 네이티브 언어(Android의 앱은 java, kotlin, IOS의 앱은 Objective-C, Swift로 개발)로 개발

 

 

네이티브 앱

 

장점	① 다양한 모바일 디바이스 환경에 최적화되어 구현된다. ② 터치 민감도, 반응속도 등이 웹기반 앱에 비해 현저히 빠르다.  ③ 디바이스 기본 기능(카메라 등)을 활용한 서비스를 제작 할 수 있다.  ④ 푸시알림 등을 송출할 수 있기에, 마케팅 및 사용자 유치에 효과적이다.
단점	① OS 환경에 따른 개발 시간,비용이 오랜기간 소요된다. ② 사용자가 앱스토어에서 업데이트를 진행해야 하므로, 배포 속도가 느리다.  ③ 지속적인 앱스토어의 심사과정을 거쳐야 한다. ④ 사용자의 스마트폰에서 용량을 많이 차지한다.

 

 

3. 웹 vs 앱 공통점과 차이점

	웹(Web)	앱(App)
공통점	동일한 API 서버를 사용한다.
차이점	① 페이지마다 URL을 요청하여 다운로드 받아야 하므로 속도가 느리다. ②  코드를 바꾼 후 웹서버에 업로드하면 바로 반영된다. ③ 컴퓨터 장치에 포함된 기능을 자유자재로 이용할 수 없다.	① 앱의 반응속도, 터치민감도 등이 좋다. ②  업데이트 시 마다 심사를 통과해야 반영될 수 있다. ③ 디바이스의 기본 기능을 자유롭게 사용할 수 있다.(알림설정, 마이크, 카메라 등)

 

 

 

 

 

---

함께보면 좋은 서비스 기획 포스팅

[서비스기획] 백오피스, 관리자 화면 기획시 '보안관리 (권한 목록, 롤목록, 접속가능 ip)' 메뉴가

 

[데이터분석] 서비스 기획자가 알아두면 좋은 SQL 기초 지식 (SELECT, INSERT, DELETE, UPDATE 등)

 

 

 

함께보면 좋은 PM 관련 포스팅

[서비스기획/PM] 홈페이지를 오픈하며 해결했던 문제들 (feat1. 클라우드 및 인프라 환경 설정 편 )

[서비스기획/PM] 홈페이지를 오픈하며 해결했던 문제들 (feat2. 개발이슈 편, API연동 개발 이슈, 알

 

 

 

 

 

---

참고

• https://brunch.co.kr/@wpgjs0717/11
• https://jnaa.tistory.com/entry/03-IT-%ED%9A%8C%EC%82%AC%EC%97%90%EC%84%9C-%EC%82%B4%EC%95%84%EB%82%A8%EA%B8%B0-%EC%9C%84%ED%95%9C-%EB%AA%A8%EB%93%A0-%EA%B8%B0%EC%B4%88%EC%A7%80%EC%8B%9D%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%9B%B9
• https://brunch.co.kr/@ea75351aef0f41e/3