기획을 위한 최소한의 개발 지식 (6)

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

by Innobanker

Nov 18. 2022

✅ 컴퓨터의 구성 요소와 운영체제

✅ 프로그래밍 언어

✅ 네트워크, 클라이언트, 서버

✅ 스크래핑, API, JSON

✅ App 과 Web

✅ 네이티브, 리액티브, 웹앱, 하이브리드 ⬅︎

✅ 데이터베이스

✅ 프레임워크, 라이브러리

✅ 개발팀 협업 방법

✅ 클라우드

간혹 PC Web 브라우저에서 실행하면 화면에 꽉 차지 않고 조그맣게 일부만 표시되는 경우가 있다. 반대로 스마트폰으로 웹사이트를 실행할 경우 화면이 잘려 보이는 경우가 있다. 디바이스의 변화에 맞춰서 개발을 하지 않은 경우 이렇게 되는데 네이버나 다음과 같은 회사에서는 아예 URL을 다르게 해서 m.naver.com 과 같은 별도의 모바일 전용 페이지를 만들었다. 내가 일했던 은행 역시 모바일 웹사이트가 별도로 있고 메뉴도 PC 웹과 달라서 별도로 기획을 했었다. 모바일 웹은 주로 스마트폰 검색을 통해 인입이 되기 때문에 처음 사용해 보는 유저를 위해 손쉽게 가입 등이 가능하도록 구현해 놓았다.

☑️ React Web : 디바이스 별로 페이지를 제작하면 사용감이 떨어지므로, 브라우저의 가로 넓이에 반응해서 알아서 구성 요소가 변하는 반응형 웹 기술을 사용한다. 이 경우 디바이스 별로 넓이에 따라 다른 CSS 를 추가로 코딩해야 하므로 리소스가 더 많이 든다.

☑️ Native App : 모바일 앱에 최적화된 네이티브 언어로 개발해야 하는 앱으로, 앱 마켓에서 설치해서 사용하므로 속도가 빠르고 안정적이다. iOS와 aOS 버전을 따로 개발해야 하며, 카메라/블루투스/GPS 등의 하드웨어 기능을 사용하는 데에 최적화 되어 있다. PC로는 접속이 불가능하며 개발에 리소스가 많이 든다.

☑️ WebApp : 모바일 웹과 네이티브 앱을 결합한 것으로, 모바일웹 보다는 조금 더 모바일에 최적화된 앱이다. 네이티브 앱처럼 설치형이 아니기 때문에 웹앱을 실행하기 위해서 사용자가 브라우저를 열고 URL로 접근해야 한다. 웹앱을 실행하면 브라우저 형태로 보여지고 상단 주소창에 URL 이 표시된다. 웹 개발 기술을 사용하되 모든 UI와 UX를 앱과 유사하게 제작하며 PC 화면과 동일하게 보여주는 풀 브라우징 방식이 아닌 모바일에 맞춘 단일페이지 형식으로 화면을 전환해 모바일 웹보다 실행 속도가 빠르다. 웹앱에서는 모바일의 고유정보를 사용하거나 하드웨어를 제어할 수 없다.

☑️ Hybrid App : 네이티브 앱처럼 앱 마켓을 통해 설치해야 사용할 수 있으며, 앱을 실행하면 웹 브라우저 형태로 보여진다. 하이브리드 앱에서는 디바이스의 하드웨어를 제어할 수 있다. 제작을 하기 위해 별도의 하이브리드 앱 프레임워크가 필요하지만, 하나의 소스로 iOS와 aOS에 맞게 포장이 가능해서 개발 비용이 적게 들며, 배포 후에도 웹만 연결되어 있다면 수정 및 보완이 쉽다.

최근에 사용한 앱에 대해 떠올려 보면 '커피챗'이라는 앱이 초기에 하이브리드로 제작 되었다가 유저가 많아지면서 네이티브 앱으로 개편했던 걸로 기억한다. 물론 CTO와 함께 결정해야 할 문제이지만 기획자는 서비스 출시 단계별로 리소스와 사용성 중에 어느 쪽에 무게를 둘 것인지 적절히 판단하는 능력이 필요하다. 개인적으로 갤럭시 폴더블 폰을 사용하고 있다 보니 아무래도 최적화가 되어 있는지를 중요하게 보게 된다. 특히 ebook과 뉴스를 가장 많이 보는데 디바이스를 활용할 수 없게 화면이 일반 스마트폰 크기로 보여진다면 그 앱을 사용할 이유 자체가 없어져 버린다.