앱 유형 나누기
오늘의 글에서는 앱의 대표적인 유형 4가지를 소개하려고 한다. 비전공자로 개발 지식은 부족하지만 구글링을 통해 다양한 포스팅과 영상들을 학습하여 나름대로 정리했습니다 :)
(관련 포스팅 링크는 게시글 하단 <출처 및 참고자료> 확인해주세요 :)
네이티브 앱 : Native Application
스마트폰이라는 것이 탄생하면서부터 존재했던 가장 기본적인(원시적인) 형태의 앱을 의미한다. 네이티브 앱은 각각의 스마트폰 운영체제에 최적화되어 있으며 iOS , 안드로이드 등 각 OS에 대해 별도의 코드(다른 프로그래밍 언어 사용)를 작성해야 하는 앱 개발 유형이다. 모바일 운영체제는 iOS와 안드로이드가 시장을 양분하고 있으며 iOS는 Objective-C 혹은 Swift로 안드로이드는 JAVA 혹은 Kotlin으로 개발하고 있다. 고성능 그래픽 처리가 가능하여 2D/3D 게임이나 증강현실과 같은 고 퀄리티의 앱을 개발할 때 주로 사용된다.
장점
- 높은 사양의 그래픽과 빠른 속도, 안정성, 동적인 효과를 구현할 수 있다.
- OS가 허용하는 모든 자원 및 기능을 직접 활용할 수 있다. (ex 카메라, 센서, 블루투스 등)
- 스마트폰 홈 화면 내 원하는 위치에 아이콘을 추가하여 간편하게 사용할 수 있다.
단점
- 각 OS별로 만들어야 하기 때문에 개발 및 유지보수에 더 많은 인력, 시간, 비용이 소모된다.
- 유지 보수에 대한 업데이트가 있을 시, 각 운영체제의 심사를 거쳐야 한다.
- 사용자가 업데이트를 진행해야 업데이트 된 버전을 제공할 수 있다.
- 타 앱에 비해 상대적으로 용량이 크다.
모바일 웹 : Mobile Web
모바일 웹은 스마트폰 사용자들을 고려하여 개발한 웹사이트를 의미한다. 모바일 웹은 HTML 기반의 웹 브라우저로 작동하며, PC 웹과의 가장 큰 차이점은 예를 들어, m.naver.com 같이 m. 으로 시작하는 브라우저 URL로 접근해야하며, 화면 사이즈가 작고, 터치 스크린의 인터페이스를 가지며, ‘Click-to-Call’과 같은 모바일에 특화된 기능을 제공한다는 점이 있다. 대체로 새로운 정보를 지속적으로 제공하는 것이 목적인 제품 리뷰, 블로그, 소식, 뉴스 등과 같은 업데이트가 지속적으로 발생하는 경우에 모바일 웹을 사용하는 경우가 많다.
장점
- OS에 상관없이 웹 브라우저를 통해 접근이 가능하다.
- 네이티브, 하이브리드 앱에 비해 적은 리소스가 소요된다.
- 별도 설치 및 OS의 승인과정을 거치지 않아도 배포가 가능하기 때문에 유지보수에 용이하다.
단점
- 모바일 기기의 하드웨어에서 제공하는 센서, 카메라 등을 활용할 수 없다.
- 네이버, 크롬 등의 별도 검색 엔진이나 URL을 통해 접속해야 한다.
- OS 또는 브라우저가 제공하는 공통 기능만 활용할 수 있기 때문에 기능 및 성능의 한계가 있다.
웹 앱 : Web Application
모바일 웹처럼 브라우저를 통해 접근해야 하지만, UX/UI를 Application의 형태로 만들어 네이티브 앱과 유사한 동작 및 화면 전환 효과를 보여주는 방식을 웹 앱이라고 부른다. 모바일 웹처럼 HTML, CSS, Javascript, JSP, PHP, ASP, ASP NET 등 일반적인 웹 기술로 개발하며, 모바일 웹보다는 실행 속도가 빠르다는 장점을 지니고 있다.
장점
- OS에 상관없이 웹 브라우저를 통해 접근이 가능하다.
- 네이티브, 하이브리드 앱에 비해 적은 리소스가 소요된다.
- 별도 설치 및 OS의 승인 과정을 거치지 않아도 배포가 가능하기 때문에 유지보수에 용이하다.
- 모바일 웹 보다 실행 속도가 빠르다.
단점
- 모바일 기기의 하드웨어에서 제공하는 센서, 카메라 등을 활용할 수 없다.
- 네이버, 크롬 등의 별도 검색 엔진이나 URL을 통해 접속해야 한다.
- OS 또는 브라우저가 제공하는 공통 기능만 활용할 수 있기 때문에 기능 및 성능의 한계가 있다.
💡 반응형 VS 적응형
앞서 살펴본 모바일 웹과 웹 앱의 경우 브라우저를 통해 URL로 접근하기 때문에 반응형 디자인 or 적응형 디자인 기법을 채택한다.
반응형
이던 마코트(Ethan Marcotte)라는 웹 디자인 선구자가 이름 지은 '반응형 웹 디자인(Responsive Web Design)'이라는 기법은 브라우저 창의 폭에 따라 레이아웃을 바꿀 수 있도록 하는 기법이다. 간단히 말하면 하나의 반응형 웹으로 PC/모바일/태블릿 등 다양한 디스플레이 크기에 맞는 가장 읽기 쉬운 레이아웃 페이지를 만들어 낸다는 것이다. 요즘 반응형 웹 디자인이 대세로 떠오르게 된 이유에는 다음과 같은 특징이 있다.
- N-Screen 시대에 맞추어 다양한 디바이스에 최적화된 화면을 제공한다.
- 모바일과 PC의 홈페이지를 하나로 운영하여 제작/관리비가 저렴하다.
- 하나의 URL을 가져 검색엔진의 인덱싱과 노출에 유리하다.
- 로딩 속도 지연을 발생시키는 리디렉션이 발생하지 않아 로딩 시간이 줄어 사용자들이 더 쾌적한 경험을 제공한다.
적응형
PC / 모바일 등 각각의 디바이스 별로 독립적인 템플릿을 만들고 각각의 디바이스에 맞는 페이지를 별도로 제작하여 랜딩 하는 기법이다. 서버나 클라이언트에서 웹에 접근한 기기를 체크해 그 기기에 맞는 템플릿을 제공한다. 모바일의 경우 모바일용 템플릿을, 데스크톱의 경우 데스크톱용 템플릿을 제공하는 식이다. 따라서 기기별로 다른 템플릿을 제작해야 할 필요가 있다.
하이브리드 앱 : Hybrid Application
하이브리드 앱은 네이티브 앱 형태로 만들되 그 안에 웹사이트를 띄울 수 있는 브라우저 창을 두는 앱을 의미한다. 안드로이드나 iOS 전용으로 스토어에 올릴 수 있는 네이티브 앱을 만드는데 그 안에 크롬이나 사파리처럼 웹사이트를 보여줄 수 있는 창을 하나 삽입하는 것이다. 이 창을 보통 웹뷰(Webview)라고 부른다. 그래서 사용자는 이러한 앱을 실행하면 자동으로 그 웹뷰를 통해 해당 웹사이트에 접속하게 된다. 기본 기능은 HTML 등의 웹 문서로 구현하고, 패키징은 OS별로 구현한다. 일상에서 많이 사용하는 네이버, 구글과 같은 검색 플랫폼 개발에 활용된다.
장점
- 웹뷰 영역의 수정 및 업데이트가 있을 경우 웹 사이트만 수정하면 되기 때문에 유지보수가 용이하다.
- 모바일 기기의 하드웨어에서 제공하는 API와 브라우저 API를 모두 사용하여 다양한 개발이 가능하다.
- OS 모두 동일한 웹 페이지를 사용할 수 있어서 개발 비용 및 시간 소요가 네이티브 앱에 비해 적다.
- 스마트폰 홈 화면 내 원하는 위치에 아이콘을 추가하여 간편하게 사용할 수 있다.
- 네이티브 앱에 비해 앱 용량도 비교적으로 가볍다.
단점
- 네이티브 앱보다는 동적인 요소의 구현 및 디자인이 취약하다.
- 개발 시 원하는 UI를 하나부터 열까지 모두 구성해야 한다.
- 네트워크 환경과 웹사이트 용량에 따라 속도가 느려질 수 있다.
만약 내가 PM이라면,
만약 내가 프로덕트를 담당하고 있는 PM이라면 앱의 형태를 어떻게 설정할 것인지, 그리고 개발 단계에서 어떤 사항을 적용해야 좋을 것인지 생각해 보고자 한다.
앱을 개발하는 것은 개발자의 몫이지만, PM은 어떤 앱이 우리 프로덕트에 가장 효과적인지 고려해야 한다. 모든 옵션에 장단점이 있기 때문에 절대적으로 옳은 개발 방식은 없다. 따라서, 우리 프로덕트가 요구하는 기능 및 특성, 팀 자원 및 프로젝트 상황 등을 체크하여 달성하고자 하는 비즈니스 목표를 정의하고 최선의 옵션을 선택하기 위해 노력해야 한다.
> 체크 리스트 예시
Check List | 네이티브 앱 | 모바일 웹 | 웹 앱 | 하이브리드 앱 |
모바일 기기의 기능(카메라, GPS 등)이 필요한가? | ✓ | ✓ | ||
높은 사양의 그래픽과 동적인 효과가 필요한가? | ✓ | ✓ | ||
네트워크 연결이 필수인가? | ✓ | ✓ | ||
앱 마켓에서 다운로드 받을 것인가? | ✓ | ✓ | ||
유지보수 및 지속적인 업데이트가 필요한가? | ✓ | ✓ | ✓ | |
빠른 개발을 통해 시장성을 검증해야 하는 경우 | ✓ | ✓ | ✓ | |
앱 출시 전 충분한 여유기간이 있는 경우 | ✓ |
너무 어렵다. 옷 입고 플레이스토어 가실 분
- 자 그럼 일단 플레이스토어부터 가봅니다.
- 지금?
- 네? 왜 일어나?
- Play Store 가자며. 멀어? 뭐해 옷 입고 와.
<출처 및 참고자료>
https://it-eldorado.tistory.com/132
https://brunch.co.kr/@hyoi0303/48
'PMB 10기' 카테고리의 다른 글
[W7D4] 네이버 쇼핑 라이브의 클라이언트, 서버, DB 다시보기 (0) | 2022.03.15 |
---|---|
[W7D3] 개발자의 암호문 엿보기 (Feat. 네이버 Open API) (4) | 2022.03.10 |
[W7D1] 구글 어스 프론트엔드 맛보기 (4) | 2022.03.05 |
[W6D4] 대체 불가능 토큰 NFT 데이터 초간단 시각화 (1) | 2022.03.03 |
[W6D3] 일상 속 예술을 위하여, 핀즐 (0) | 2022.03.02 |