앱을 만드는 방법 Native / PWA / Hybrid

imnotdurnk App View

Intro

앱을 만드는 방식은 대표적으로 PWA, Hybrid, Native가 있다.

음주 습관 개선 프로젝트를 진행하며 처음의 기획에서는 PWA로 구현하려 했으나, 최종적으로 React Native를 사용해서 Hybrid App을 구현했다.

이 글에서는 앱 개발 방식 각각이 어떤 특징과 장단점이 있는지 알아보고, 내가 왜 Hybrid 방식으로 선택했는지 공유하고자 한다.

1. Native App

1.1 네이티브 앱이란?

네이티브 앱은 특정 모바일 플랫폼(iOS 또는 Android) 에 최적화되어 개발된 애플리케이션이다.

이러한 앱은 해당 플랫폼의 프로그래밍 언어와 개발 도구를 사용하여 만들어지는데, iOS의 경우 Swift나 Objective-C를, Android의 경우 Java나 Kotlin을 사용한다.

네이티브 앱의 가장 큰 장점은 디바이스 하드웨어와 운영체제에 대한 완전한 접근이 가능하다는 점이다.

1.2 네이티브 앱의 특징

성능: 디바이스의 하드웨어와 운영 체제에 직접 액세스할 수 있어 최고의 성능을 제공한다
사용자 경험: 플랫폼 특유의 UI/UX 가이드라인을 따르므로 사용자에게 익숙한 경험을 제공한다
기능 접근성: 카메라, GPS, 푸시 알림 등 디바이스의 모든 기능에 완전히 접근할 수 있다
오프라인 작동: 인터넷 연결 없이도 많은 기능을 사용할 수 있다
앱 스토어 배포: App Store와 Google Play 같은 공식 앱 스토어를 통해 배포되며, 신뢰성과 가시성이 높다
보안: 플랫폼 레벨의 보안 기능을 활용할 수 있어 높은 보안성을 제공한다
개발비용: 다른 방법에 비해 개발 비용과 시간이 많이 소요되며, 각 플랫폼 별로 별도의 개발이 필요하다

2. Progressive Wep App (PWA)

2.1 PWA란?

PWA는 웹 기술(HTML, CSS, JavaScript) 을 사용하여 개발되지만 네이티브 앱과 유사한 사용자 경험을 제공하는 웹 애플리케이션이다.

웹 브라우저를 통해 접근할 수 있으며, 필요에 따라 홈 화면에 추가하여 앱처럼 사용할 수 있다.

2.2 PWA의 특징

크로스 플랫폼: 하나의 코드베이스로 모든 플랫폼에서 작동한다
설치 용이성: 앱 스토어를 통하지 않고 웹에서 직접 설치 가능하다
오프라인 기능: Service Workers를 통해 일부 오프라인 기능을 제공한다
업데이트 용이성: 서버 측 업데이트로 즉시 모든 사용자에게 반영된다.
검색 엔진 최적화: 웹 기반이므로 검색 엔진 최적화(SEO) 에 유리하다
적은 저장 공간: 네이티브 앱에 비해 적은 저장 공간을 차지한다
기능 제한: 네이티브 앱에 비해 디바이스 기능 접근에 제한이 있고, 상대적으로 성능이 떨어진다

3. Hybrid App

3.1 하이브리드 앱이란?

하이브리드 앱은 웹 기술과 네이티브 앱 개발 방식을 결합한 형태다.

주로 HTML, CSS, JavaScript로 개발되며, 이를 네이티브 컨테이너(WebView) 에 래핑하여 배포한다.

React Native, Ionic, Flutter 등의 프레임워크를 사용하여 개발할 수 있다.

3.2 하이브리드 앱의 특징

크로스 플랫폼: 하나의 코드베이스로 여러 플랫폼에서 실행 가능하다
개발 효율성: 웹 기술을 활용하여 개발 속도가 빠르고 비용이 절감된다
부분적 네이티브 기능: 플러그인을 통해 일부 네이티브 기능에 접근할 수 있다
앱 스토어 배포: 네이티브 앱처럼 공식 앱 스토어를 통해 배포 가능하다
유지보수 용이성: 웹 부분의 업데이트가 용이하다
학습 곡선: 웹 개발자가 쉽게 접근할 수 있다
기능 제한: PWA 만큼은 아니지만, 여전히 네이티브 앱에 비해 성능이 떨어진다

4. 요약 및 비교

각 앱 개발 방식의 주요 특징을 표로 정리하면 다음과 같다

App Development Feature Compare Table

어떤 개발 방식을 선택할지 고려할 때는 성능, 개발 효율성, 기능 접근성과 같은 요소들을 판단 기준으로 삼는 것이 좋다.

성능 기준 요약

최고의 성능과 디바이스 기능 완전 활용이 필요하다면: Native
비용과 시간 절감, 다양한 플랫폼에서의 실행이 중요하다면: Hybrid
간단한 설치 및 배포, 웹 기반 크로스 플랫폼 경험을 원한다면: PWA

5. PWA 대신 Hybrid App을 선택한 이유

초기 기획: PWA

우리 팀은 GPS를 이용하여 귀가 시간을 기록하는 기능을 기획했었다.

GPS를 사용하기 위해선 모바일 디바이스를 사용해야했는데, 길다면 길고 짧다면 짧은 7주의 제한된 시간 안에서 개발 효율성을 고려했을 때 Native App을 개발하기에는 무리가 있었다.

따라서 프로젝트 초기에는 PWA를 선택했었는데, 그 이유는 다음과 같다.

웹 개발 기술만으로 앱처럼 동작하는 서비스를 구현할 수 있다
앱 스토어를 통해 배포하려면 금전적인 비용이 드는데, PWA는 배포가 필요하지 않다
모바일 디바이스를 활용한 기능의 비중이 크지 않아서, 개발 속도와 효율성이 더 중요했다

기획 변경: Hybrid App

그러나 개발을 진행하며 우리는 중요한 문제에 직면했는데, 음주 상태의 사용자가 귀가 시간을 수동으로 저장하는 방식의 사용성이 떨어진다는 피드백을 받았다.

그래서 백그라운드 GPS를 활용하여, 목적지 근방의 좌표로 도달 시에 자동으로 시간이 저장되도록 기능 명세가 수정되었다.

백그라운드 GPS를 사용하기 위해서는 모바일 디바이스의 권한에 접근할 수 있어야 했는데, PWA는 그럴 수 없었고, Native 기능이 필요한 상황으로 변했다.

따라서 React Native나 Flutter와 같은 크로스 플랫폼 도입이 필요해졌는데, React를 기반으로 웹을 이미 개발 중에 있었기 떄문에, React Native로 기술을 결정했다.

React Native를 선택한 주요 이유는 다음과 같다.

기존의 웹 코드와 기술 스택을 상당 부분 재사용할 수 있었다
개발 효율성을 극대화하면서도 필요한 네이티브 기능을 구현할 수 있었다

6. 결론

결과적으로, React Native를 사용한 Hybrid App 개발 방식은 우리 프로젝트의 요구사항 변화에 가장 적합한 선택이었다.

이 방식을 통해 개발 효율성의 극대화 및 기능성 확보가 가능했고, 제한된 시간 안에 목표했던 앱을 성공적으로 구현할 수 있었다.

이러한 경험을 통해 배운 점은, 개발 과정에서 발생하는 변화에 유연하게 대응할 수 있기 위해서는, 프로젝트의 요구사항, 팀의 기술 스택, 팀이 가진 자원을 종합적으로 고려할 수 있어야 한다는 점, 그리고 다양한 상황에 신속하게 대처할 수 있도록 지속적인 학습을 통해 준비가 되어있어야 한다는 점이었다.

앞으로 마주할 다양한 상황에서도 유연한 대처가 가능하도록 성장해야겠다.