brunch

라이킷 84 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김효진 Apr 21. 2021

네이티브 앱 / 웹앱 / 크로스플랫폼앱 / 하이브리 앱

디자이너가 개발자와 일 하다 보니 (5)

노마드 코더 Nomad Coders

개발과 디자인을 동시에 진행하고 있지 않은 디자이너라도 성공적인 앱 출시를 목표로 팀원 전체(디자이너, 개발자, 마케터, PM 등)가 참여하고 있기 때문에 네이티브 앱, 웹 앱, 크로스 플랫폼 앱, 하이브리드 앱이 어떤 것인지 정도는 알고 있으면 좋을 것 같아 정리하게 되었다. 개발자가 정리한 것처럼 심도 있는 정리가 아닐 수 있지만 초기 가벼운 개념을 잡기에 도움이 될 것 같다.

iOS / android 앱을 만들기 위해선 보통 3가지 옵션 중 선택할 것이다.

네이티브 앱 / 크로스 플랫폼 앱 / 하이브리드 앱

이 3가지 옵션 중에 무엇을 골라야 할지 개발자는 서비스의 특징, 기업 내부 환경에 따라 선택하게 된다.

어떤 옵션도 필요한 곳에서 적절하게 쓰면 베스트 설루션이 될 수 있다.

01. 네이티브 앱

(Native Application)

모바일 기기에 최적화되어있는 스마트폰 앱으로 android, iOS 코드를 별도로 사용한다. 즉, 안드로이드, iOS 각각의 플랫폼에서만 최적화되어있는 앱이다.

장점

높은 사양의 그래픽과 성능을 자랑하면서도 구동 속도가 빠르며, 인터넷이 연결되어 있지 않아도 사용이 가능하다. 만약 퍼포먼스에 집중하는 서비스라면 네이티브는 좋은 선택이 될 수 있다. 예를 들어 내 얼굴에 3D 마스크를 입히는 앱을 들 수 있다.

네이티브 앱은 핸드폰에서 사용하기 최적화된 언어(iOS는 swift언어 / android는 Java언어)를 사용하기 때문에 핸드폰의 기능을 핸들링(진동을 조정, 카메라 기능을 핸들링)할 수 있고, 여러 가지 api를 제약 없이 사용할 수 있다.

기기에 저장된 주소록, 파일 등의 고유 정보를 사용할 수 있으며 카메라 등의 하드웨어 또한 제어가 가능하다.

단점

만약 2개의 플랫폼(iOS, android)에 앱을 출시하고 싶다면, iOS는 swift / xcode 그리고 android는 java / kotlin / android studio 언어를 모두 배워야 한다. 그래서 시간과 에너지가 2배로 필요하다.

02. 웹 앱

(Web Application)

모바일 화면에 맞게 개발된 웹 페이지이다.

앱의 성질을 포함하고 있다. 애초에 개발 단계에서부터 모바일을 고려해서 홈페이지를 제작하였기 때문에 다양한 모바일 기기에서 주소를 입력하더라도 그에 맞는 화면에 알맞게 보이게 된다.

단점

스토어를 통해 다운로드한 앱은 스마트폰에서 돌아가는 것이기 때문에 스마트폰의 기능을 사용할 수 있지만 웹 앱은 웹 페이지 이기 때문에 휴대폰의 기능을 사용할 수 없다는 것이다. 대표적으로 카메라 기능이다.

스토어를 통한 앱 설치가 불가능하다. 우리는 어플 설치를 위해 각자의 iOS, Android에서 App Store, Google Play를 방문한다. 웹 앱이라고 명칭 하지만 정작 스토어에서는 설치할 수 없다. 웹 이기 때문이다. 웹을 접속하기 위해서는 핸드폰 윈도우 익스플로러, 사파리 등 브라우저 실행 후 주소를 입력해야 한다. 결국 웹 앱도 웹이기 때문에 주소를 입력하여 접속해야만 한다.

03. 크로스 플랫폼 앱

(Cross Platform Application)

네이티브 코드가 아닌 걸로 코딩하더라도 나중에 iOS, Android가 이해할 수 있는 코드로 변환된다.

예를 들어 처음에 리액트로 코딩을 하면 자바스크립트 코드로 컴파일(=변환)되고 이후 iOS, Android가 이를 각자의 자바스크립트 엔진(=최적화된 코드)으로 실행시켜준다.

flutter의 경우 Dart코드로 쓰고 이는 C.C++로 컴파일된다. 이렇게 되면 iOS, Android 모두에서 이해할 수 있는 언어가 된다.

xamrain의 경우 C#으로 작성하고 이는 iOS, Android 모두에서 이해할 수 있는 intermediate 언어(IL)로 컴파일이 된다. 네이티브 코드로 작성하진 않지만, 나중에 변환된다.

장점

코드를 한 번 작성하면 2개의 플랫폼(iOS, Android)에서 확인할 수 있어 시간 절약에 도움을 준다.

리액트 개발자라면 리액트 네이티브 앱을 금방 만들 수 있고, Dart 개발자라면 flutter web 덕분에 iOS, android앱 그리고 웹을 만들 수 있다.

다양한 배경의 개발자(백엔드 개발자, Java 개발자)를 끌어 모을 수 있다. 덕분에 다양한 형태의 라이브러리, 튜토리얼, 커뮤니티가 발전하고 있다.

단점

여전히 네이티브가 아니라는 점이다. 만약 퍼포먼스가 중요하다면 퍼포먼스에 대한 이슈가 생길 수 있다.

*컴파일

컴퓨터는 0과 1로만 모든 명령을 이해하고 실행한다. 우리가 ‘A’라는 문자를 입력하더라도 컴퓨터는 이것을 0과 1로 이루어진 이진 코드로 해석한다. 그런데 ‘A’라는 문자를 어떻게 해석해줄 것인가?

이러한 기능을 컴파일이라고 한다.

사람이 이해하는 언어를 컴퓨터가 이해할 수 있는 언어로 바꾸어 주는 과정.

원시코드에서 목적코드(목적파일)로 바꾸어 주는 것이 컴파일이고 목적 파일을 실행 파일로 바꾸는 것이 링크.

원시코드는 우리가 작성한 코드, 목적코드는 컴퓨터가 이해할 수 있도록 번역한 코드.

컴파일과 링크의 기능을 하는 것이 컴파일러이다.

*자바스크립트 엔진

개발자가 작성한 자바스크립트 코드를 해석하고 실행시켜주는 것이 자바스크립트 엔진으로, 가능한 짧은 시간 내에 가장 최적화된 코드를 생성하는 것이 목표이다. 즉, 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터를 말한다.

*인터프리터

프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말한다.

04. 하이브리드 앱

(Hybrid Application)

웹 뷰를 감싸고 있는 웹 사이트이다.

여기서 웹 뷰란 내비게이션이 없는 윈도우 브라우저를 말한다.

그렇기 때문에 하이브리드 앱을 만들 때는 HTML, CSS, JS를 사용하여 웹 뷰를 감싼 후 이를 스토어(App Store, Google Play)로 보내는 것이다. 즉, 웹 개발 기술을 사용한 앱 개발인셈이다.

= 웹을 각각의 OS(Windows, Mac OS), 안드로이드, iOS라는 껍데기로 한번 감싸주면 앱이 되고 이를 스토어(App Store, Google Play)에 올릴 수 있게 된다.

하이브리드 앱을 만들고 싶다면, apache cordova & phonegap을 이용하면 좋다. HTML 웹 뷰를 감싸는 기능을 제공하기 때문이다.

장점

네이티브 앱에 대한 지식이 필요 없다. HTML, CSS, JS만 알아도 충분하기 때문이다.

한 번의 개발로 모든 OS(웹, iOS, android)에서의 구동이 가능하다

단점

원하는 UI를 한 땀 한 땀 짜야한다는 것이다. 버튼, 타이틀, 내비게이션 등 모든 것을 말이다. 웹사이트를 0에서부터 만들어야 하기 때문이다.

스마트폰의 기능을 활용하지 못한다. 예를 들어 하드코어 한 비디오 프로세싱을 들 수 있다. 이걸 JS로 짜는 것은 어렵기 때문이다. → 하리브리드 앱으로 할 수 있는 건 기본 카메라 기능, 위치 확인, 네트워크 정보, 연락처, 기본적 파일 시스템 확인이기 때문에 고급진 기능들은 어려울 수도 있다.

왼 : 앱에서 접속 / 오 : 웹 브라우저에서 접속

하이브리드 앱이라고 하면 웹브라우저에서 접속했을 때와 앱에서 접속했을 때 보이는 뷰가 똑같아야 한다. '다음'이 대표적인 예시가 될 수 있다.

*번외

HTML과 HTML5

▪HTML (Hyper Text Markup Language)

- HT (HyperText) : 문서와 문서가 링크로 연결되어있다.

- M (Markup) : 태그로 이루어져 있다.

- L (Language)

웹 사이트 구축에 사용되는 표준 언어이다.

HTML 코드는 웹 브라우저에게 콘텐츠 렌더링 방법을 지시한다. 수십 년 동안 HTML은 Cascading Style Sheets 또는 CSS 밑 JavaScript와 함께 World Wide Web의 초석 기술로 간주되었다. HTML과 CSS에 대한 표준은 The World Wide Web Consortium에서 유지 관리한다.

이름에서 알 수 있듯이 HTML은 기술적으로 프로그래밍 언어가 아니다. 인터넷에서 데이터를 구성하는 데 사용되는 마크업 언어이다. HTML 문서는 콘텐츠를 분류하기 위해 꺾쇠괄호 </> 안에 작성되는 태그로 표시되는 HTML 요소로 구성된다.

간단한 "Hello World" 메시지를 표시하는 HTML 구조의 예는 다음과 같다.

웹 서버에서 전달된 HTML 문서를 통해 브라우저는 링크, 이미지 및 대화 형 양식을 포함하는 것 외에도 텍스트를 표시하는 방법을 알 수 있다.

▪HTML5

HTML5는 W3C와 WHATWG 간의 공동 작업의 결과물이다. 이 팀은 플러그인에 대한 의존도를 줄이고, 오류 처리를 개선하며, 스크립팅을 더 많은 마크업으로 대체하였다. 결과적으로 HTML5는 웹 애플리케이션을 만드는 과정을 크게 단순화시켰다. 모바일 웹에서의 핵심 기술이다.

▫ 주요 기능

• Device AccessDEVICE ACCESS : 카메라, 동작 센서 등의 H/W 기능을 웹에서 직접적으로 제어

• CONNECTIVITY (Web Socket) : 웹(클라이언트)에서 서버 측과 직접적인 양방향 통신 가능

• 3D, GRAPHICS & EFFECTS : 다양한 2차원 및 3차원 그래픽 기능을 지원

• Styling Effects (CSS3) : 글씨체, 색상, 배경 등 다양한 스타일 및 이펙트 기능 제공

• MULTIMEDIA : 비디오 및 오디오 기능을 자체적으로 지원

• OFFLINE & STORAGE : 네트워크 미지원 환경에서도 웹 이용을 가능하게 함

• Geo-Location : GPS 없이도 단말기의 지리적인 위치 정보를 제공

• SEMANTICS : 웹 자료에 의미를 부여하여 사용자 의도에 맞는 맞춤형 검색 제공