졸업 프로젝트를 진행하면서, 주제가 카메라를 이용한 학습 서비스이다 보니 웹만 하기 보다는 태블릿 친화적인 웹앱을 하기로 했다. 웹 프론트인 나는 하이브리드 앱과 네이티브 앱의 개념은 알고 있었지만, 웹앱 개념이 너무 모호해서 헷갈렸다.
Nextjs에 PWA 적용하면서 알게되는 정보들을 한 번 기록해보려고 한다.
1. 웹앱(PWA, Progressive Web App)
웹 기술(HTML, CSS, JavaScript)을 사용하여 만든 애플리케이션으로, 브라우저를 통해 접속하지만 네이티브 앱과 유사한 사용자 경험을 제공한다. PWA는 오프라인 기능, 푸시 알림, 홈 화면에 아이콘 추가 등의 기능을 지원한다.
장점
1. 웹 표준을 사용하므로 다양한 플랫폼에서 동일한 코드로 동작한다.
2. 앱 스토어에 배포할 필요 없이 URL을 통해 접근 가능하다
3. 설치 없이 바로 사용할 수 있고, 자동 업데이트가 가능하다.
단점
1. 하드웨어 접근이 제한적이거나 성능이 네이티브 앱에 비해 낮을 수 있다.
2. iOS에서의 기능 지원이 상대적으로 제한적이다
2. 하이브리드 앱
웹앱과 네이티브 앱의 중간 형태로, 웹 기술로 개발된 후 네이티브 앱의 껍데기 안에서 실행된다. Cordova, Ionic, React Native 같은 프레임워크를 사용해 개발되며, 하나의 코드베이스로 여러 플랫폼에서 실행 가능하다.
장점
1. 웹 기술로 쉽게 개발할 수 있으며, 여러 플랫폼(Android, iOS 등)에서 동일한 코드를 사용해 배포 가능하다.
2. 네이티브 API 접근(카메라, 위치 정보) 가능하다.
단점
1. 네이티브 앱보다 성능이 떨어질 수 있으며, 복잡한 UI/UX에서는 제약이 있을 수 있다.
2.플랫폼 별로 추가적인 최적화 작업이 필요할 수 있다.
3. 네이티브 앱
특정 플랫폼(iOS, Android)을 위한 프로그래밍 언어(Swift, Kotlin 등)를 사용해 해당 플랫폼에서만 동작하도록 개발된 애플리케이션이다.
장점
1. 성능이 뛰어나고, 모든 하드웨어 및 네이티브 기능에 최적화된 접근 가능하다.
2. 복잡한 UI나 고성능이 요구되는 작업에 적합하다.
단점
1. 플랫폼별로 각각의 코드를 작성해야 하므로 개발 비용과 시간이 많이 소요된다.
2. 여러 플랫폼에서 사용할 경우 유지 보수가 어렵다.
잘못된 내용이 있으면 댓글로 알려주세요!
다음글로 Nextjs에 PWA를 적용하는 방법을 작성할 것이다.^^.
