앱이란 무엇일까?

Jane·2024년 10월 13일

FE_Study_Notes

목록 보기

4/5

React Native로 앱을 구현하고, 최근 프로젝트에 WebView 도입이 결정되면서 구현을 위해 이것저것 공부하게 되었다. 그러던 중 문득 앱이란 무엇이고, React Native로만 만들어진 앱과 WebView는 정확하게 어떤 부분에서 다른지, 일반 웹 페이지를 반응형으로 구현한 것과 WebView는 어떤 부분이 다른지에 대한 궁금증이 생겼다.

앱의 종류에 대해 자세하게 알아보기에 앞서, 간단하게 앱이 무엇이고 어떤 과정으로 발전해왔는지를 알아보자.

앱이란?

스마트폰, 태플릿, PC 같은 기기에서 설치해 사용하는 소프트웨어를 의미한다. 넓은 의미로는 응용 소프트웨어와 비슷한 의미로 쓰여 사용자가 원하는 기능을 수행하기 위해 제작된 소프트웨어를 통칭한다.

일반적으로는 스마트폰 앱, 모바일 앱처럼 모바일 기기용의 응용 소프트웨어를 의미하는데 iPhone에서 사용하는 애플리케이션을 App Store(모바일 애플리케이션 마켓)에서 사고 팔기 시작하면서 스마트폰용 애플리케이션을 앱이라고 부르기 시작했다고 한다.

간단한 앱의 역사

1994년

iPhone과 Android 이전에 최초의 스마트폰인 IBM의 Simon Phone이 등장한다. 이 핸드폰은 달력, 주소록, 메일, 노트, 그리고 그림판을 포함한 10개의 내장 앱을 제공했다.

1997년

스마트폰에 도입된 최초의 게임 앱인 snake가 등장했다. Nokia 6610에서 처음 출시했으며, 초록색 바탕에 검은색 사각형이 움직이는 단순한 형태의 게임 애플리케이션이다.

1999년

WAP(Wireless Application Protocol)이 소개되었다.
WAP이란 무선 기기, 특히 휴대전화나 라디오 송수신기에서 인터넷에 접속할 수 있도록 표준화된 통신 프로토콜을 정의한 기술을 의미한다. 더 쉽게 말하자면 초기 휴대폰에서 인터넷을 사용할 수 있게 해주는 일종의 통신 기술이었는데, 소개 당시에는 휴대폰에서 웹 브라우징, 이메일 등의 인터넷 기능을 쉽게 사용할 수 있게 도와주는 역할을 했다. 하지만 당시의 휴대폰은 성능이 낮고 데이터 속도도 느렸기 때문에 단순한 텍스트와 이미지로 구성된 웹 페이지를 보여주는 것에 그쳤으며, 현재의 앱처럼 복잡한 기능이나 매끄러운 사용자 경험을 제공하지 못했다. 초창기 휴대폰의 인터넷 연결 방식으로 사용되었던 WAP은 현재의 스마트폰은 컴퓨터처럼 빠른 인터넷(LTE, 5G)과 더 나은 성능의 웹 브라우저를 제공하게 되면서 더이상 필요하지 않은 구식 기술이 되었다.

첫 번째 앱 스토어인 Handango가 설립되었다.
스마트폰과 PDA와 같은 기기에서 사용할 수 있는 애플리케이션과 콘텐츠를 판매한 초기 플랫폼으로, 스마트폰이 대중화 되기 전 다양한 모바일 기기용 앱을 제공하는 마켓플레이스 역할을 했다. (이후 iOS 앱 스토어와 구글 플레이스토어로 스마트폰 시장이 재편되면서 2010년대 초반에 서비스를 종료했다.)

2002년

RIM의 Blackberry 5810이 스마트폰의 새로운 지평을 열었다. 이 핸드폰에는 벨소리 편집기, To-Do 리스트와 같은 내장 앱도 있었지만, 무엇보다도 무선 이메일 기능을 최초로 갖춘 핸드폰이었다는 점에서 특별하다. 또한 푸쉬 알림 기능을 구현한 최초의 핸드폰이기도 하다. (참고로, 디자인이 예쁜 핸드폰으로 소소하게 유명한 Blackberry 핸드폰의 이름은 제작자가 QWERTY 자판이 베리 씨앗처럼 생겼다고 생각하여 붙인 이름이라고 한다.🫐)

2007년

지도, 날씨, 사진 갤러리처럼 이전의 핸드폰에서는 볼 수 없었던 기능을 탑재한 최초의 iPhone이 출시된다. 이 직후 Apple은 앱 개발 회사를 위한 SDK를 제공함으로써 모바일 기기에서 최초로 타사 앱을 허용하는 혁신을 보여주었다.

2008년

Apple은 다양한 업종의 500개 앱으로 구성된 최초의 모바일 App Store를 선보였다. Developers can reach every single iPhone user through (one) store. 개발자가 하나의 스토어로 모든 iPhone 사용자에게 도달할 수 있도록 하는 것이 이 출시의 배경이자 목적이었다. 앱 스토어는 출시 3일 만에 1,000만 건이 넘는 다운로드 수를 기록했으며, 이 중 75%가 무료 앱이었다고 한다.

Google도 Android OS를 발표하고 Google Play Store를 출시하면서 본격적으로 앱 생태계의 발전이 시작되었다. 이때 다양한 네이티브 앱들이 등장하며 사용자들의 모바일 경험을 풍부하게 했다.

하이브리드 및 웹 앱의 부상 (2010 - 2015년)

2010년대에 들어서면서, HTML, CSS, JavaScript를 사용해 Native 앱처럼 작동하는 하이브리드 앱 개발이 인기를 끌게 된다. 이때 PhoneGap, Cordova와 같은 프레임워크가 등장하여 개발자들로 하여금 웹 기술을 사용한 네이티브 앱 개발이 가능하도록 지원하였다.

Google은 Android 마켓, Google Music, Google Books, 그리고 동영상 서비스를 하나의 마켓 플레이스인 Google Play Store 로 통합하였다. 이후 Apple과 Android 앱 스토어에 수백 개의 앱이 추가되고, 2013년에는 두 시장 모두에서 500억 건 이상의 앱 다운로드가 이루어졌다.

모바일 앱의 고도화 (2015년 - 현재)

2015년, 페이스북이 React Native를 출시하여 JavaScript를 사용한 네이티브 앱 개발이 가능해졌다. 단일 코드 베이스로 iOS와 Android에 모두 배포가 가능한 RN의 등장으로 웹 개발자들이 기존의 기술을 활용해 모바일 앱을 개발할 수 있게 되었다.

Android Instant Apps나 Apple의 App Clips와 같이 사용자가 별도로 앱을 설치하지 않고도 웹이나 검색 결과에서 앱의 일부 기능을 사용할 수 있게 해주는 인스턴트 앱이 등장했다. 이를 통해 사용자들은 특정 기능만을 사용하기 위해 앱의 일부만 즉시 실행하고 완전한 앱 설치를 하지 않고도 앱의 기본적인 기능을 경험할 수 있게 되었다.

👩‍🏫 앱에 대해 간단하게 알아보았으니, 이제 앱의 종류에 대해 톺아보는 시간을 가져봅시다!

Native App

가장 기본적인 앱의 형태. 모바일 기기에 최적화된 네이티브 언어로 개발되었으며 앱 스토어에서 다운로드 받을 수 있다.
각 운영체제에서 제공하는 SDK(해당 운영체제에 최적화되어 있는 개발 도구)로 앱을 개발한다.

SDK (Software Development Kit)

응용 프로그램의 개발을 간편하고 용이하게 하기 위해 제공되는 특정 환경 또는 플랫폼 기반의 종합 개발 도구. 원래는 Microsoft가 Window 응용 프로그램 개발자들을 위해 만든 고급 API(응용 프로그램 인터페이스)를 의미했으나, 현재는 개발 도구 및 라이브러리, 관련 document set 등을 의미하는 일반 용어로도 사용한다.
SDK는 API를 포함하는 개념으로, Android SDK가 있다고 하면 이는 Android 애플리케이션 개발을 위한 도구 모음으로써 다양한 API를 포함하고 있다. Android SDK에는 API 뿐만 아니라 개발 도구, 디버깅 도구, 에뮬레이터 등이 포함되어 있다. 개발자들은 API를 사용해 애플리케이션의 UI를 구성하고, 애플리케이션 개발 및 테스트, 디버깅을 수행할 수 있다.

특징

Google Play Store, iOS App Store에서 다운로드 받을 수 있으며, PC 접속은 불가능하다.
유튜브, 카카오톡, 인스타그램, 페이스북 등
장점
1. 동적 효과 구현에 용이하다.
2. 연락처 조회, 카메라, 지문인식 등 다양한 디바이스 접근 권한을 활용할 수 있다.
3. Android, iOS 기반의 API를 사용하므로 빠른 속도와 안정성 있는 서비스를 제공할 수 있다.
단점
1. 각 운영체제 별로 개발 및 유지보수가 필요하므로 높은 개발 및 운영 비용이 요구된다.
2. 하이브리드 앱에 비해 용량이 크다.
3. 각 스토어의 심사 과정을 거쳐야 앱이 등록되고, 업데이트 시에도 해당 심사를 다시 받아야 한다.

Android SDK

Java

웹 개발에 대중적으로 사용되는 동적 고급 언어이다.
Node.js와 같은 기술을 통해 대화형 웹 페이지와 서버를 구축할 때 용이하다.
안드로이드가 처음 출시되었을 때부터 안드로이드 앱 개발의 표준으로 자리 잡았으며, Java 프로그램을 다시 작성할 필요 없이 다양한 유형의 장치에서 실행할 수 있다.

Kotlin

JVM(Java Virtual Machine, Java를 실행하기 위한 가상 기계)에서 실행되고 Java와 호환 운용되는 최신 프로그래밍 언어이다.
2017년 Google이 안드로이드 앱 개발을 위한 공식 언어로 채택하였다.
반복적인 코드 섹션을 크게 줄일 수 있도록 설계되어 코드가 비교적 간결하며 확장된 프로그래밍 개념을 대입하여 확장 함수, 고차 함수, 데이터 클래스 등을 사용할 수 있다.
- Java에서 아래와 같이 데이터 클래스를 생성한다고 가정해보자.
```
// Java에서의 데이터 클래스
public class User {
    private String name;
    private int age;

    public User(String name, int age) {
        this.name = name;
        this.age = age;
    }

    // 하단 코드 생략 ...
}
```
- 만약 Kotlin으로 동일한 데이터 클래스를 정의하고자 한다면 아래처럼 간단하게 구현할 수 있다.
```
// Kotlin에서의 데이터 클래스
data class User(val name: String, val age: Int)
```
앱개발의 표준으로 불리는 Java와 완벽하게 호환되므로 동일한 프로젝트에서 Java와 Kotlin을 모두 사용하는 것도 가능하다.
보다 복잡한 컴퓨팅과 JVM의 장점을 사용할 때 채택하면 좋다.

iOS SDK

Objective-C

자유로운 문법을 사용할 수 있으며, 다양한 스타일로 코드를 작성하는 것이 가능하다. 하지만 C 언어를 기반으로 하기 때문에 구문이 복잡하고 장황할 수 있다.

// Objective-C로 간단한 Person 클래스를 정의한 뒤 해당 클래스의 인스턴스를 생성해 인사를 출력하도록 한 코드 예시이다.
#import <Foundation/Foundation.h>

@interface Person : NSObject
@property (nonatomic, strong) NSString *name;
- (void)greet;
@end

@implementation Person
- (void)greet {
    NSLog(@"Hello, %@", self.name);
}
@end

int main(int argc, const char * argv[]) {
  @autoreleasepool {
      Person *person = [[Person alloc] init];
      person.name = @"Alice";
      [person greet];
  }
  return 0;
}

1980년대에 만들어져 사용되었기 때문에 기존 Apple 앱의 코드와 라이브러리는 Objective-C로 작성되어 있으며 Cocoa 및 Cocoa Touch 프레임워크와 호환되어 iOS/macOS 애플리케이션에 많이 사용되었다.
- Cocoa
  - macOS용 프레임워크
  - 데스크탑 환경에 필요한 다양한 API를 제공한다.
  - 윈도우, 버튼, 메뉴 등 사용자 인터페이스 요소 생성에 필요한 클래스와 메소드를 제공하는 AppKit와 데이터 관리 및 기본 프로그래밍 기능을 제공하는 Foundation으로 구성되어 있다.
- Cocoa Touch
  - iOS용 프레임워크
  - 제스처 인식, 뷰 컨트롤러 등 모바일 앱을 위한 터치 기반의 사용자 인터페이스와 기능을 제공한다.
  - 버튼, 레이블, 네비게이션 컨트롤러 등의 UI 요소를 관리하는 UIKit와 Cocoa와 동일하게 Foundation으로 구성되어 있다.
C언어를 호환하지 않는 Swift와 달리 Briding Header 파일로 호환이 가능하다. 이는 Swift 프로젝트에서 Objective-C 클래스를 사용할 수 있게 해주는 파일로, C 언어와 직접 호환되지 않는 Swift를 Objective-C를 사용해 상호작용할 수 있게 해준다.

Swift

Objective-C에 비해 비교적 최근에 등장하여 코드가 조금 더 쉽고, 간결하고 직관적이다. 위에서 Objective-C로 구현한 기능을 Swift로 구현한다면 아래와 같이 코드를 작성할 수 있다.

// Swift 코드 예시
import Foundation

class Person {
    var name: String?

    func greet() {
        if let name = name {
            print("Hello, \(name)")
        }
    }
}

let person = Person()
person.name = "Alice"
person.greet()

변수와 상수 선언 시 변수 타입을 자동으로 추정해주는 타입 추론을 사용할 수 있다.
런타임 오류를 사전에 방지하는 optional이나 자동으로 메모리 관리를 처리하는 ARC(Automatic Reference Counting) 등을 지원하여 버그에 대한 고민을 줄여준다.

Mobile Web

이미지 출처

모바일 화면에 맞게 구성한 웹
실제로는 PC 브라우저에서 실행되는 기능을 모바일에 맞추어 글자 폰트, 이미지 등을 표현한 사이트
www.-으로 시작하는 PC Web과는 다르게 m.-으로 시작하는 URL을 가지며, 터치 스크린의 인터페이스를 통해 모바일에 특화된 기능을 제공한다.
- 하나의 URL로 PC, 태블릿, 모바일 환경을 제공하는 반응형 웹과 헷갈리지 않도록 주의하자.
구글링/브라우저 검색을 통해 홈페이지를 검색할 수 있고 홈페이지에서 서비스 이용이 가능하다.
- 모바일 웹이 없는 서비스의 경우 홈페이지에서 서비스 이용이 불가하고 모바일 앱 설치 화면으로 이동한다.

특징

웹 개발 방식과 동일하게 HTML, CSS, JavaScript를 사용한다.
웹 브라우저에서 실행된다. Full Browsing 방식으로 동작하는데, 아래에서 웹 앱과의 비교와 함께 더 자세히 설명할 예정이다.
모바일 웹이라고 해서 어렵게 들릴 수도 있지만 PC 웹 페이지를 모바일에 맞게 줄인 모습
장점
1. 운영체제별로 따로 개발할 필요가 없어 비용 및 개발 시간 절감이 가능하다.
2. 별도의 심사 과정이 필요하지 않아 유지보수에 용이하다.
단점
1. 디바이스 접근 권한에 제약이 있어 플랫폼 API(카메라, 지문인식 등)을 사용할 수 없고, 오직 브라우저 API만 사용할 수 있다.
- 위의 이미지 예시에서도 확인할 수 있듯, 네이버페이, 음성검색, QR 코드 검색 등의 기능들을 모바일 웹에서는 사용할 수 없다.
1. 웹 브라우저에서 검색하거나 URL을 통해 접근해야 하는 불편함이 있다.
2. 사용자 친화적인 터치 인터페이스 개발이 까다롭다.

Web App

모바일 웹과 비슷하나 구동 방식을 앱처럼 보이게 한 앱. 모바일 웹의 특징을 가지면서도 모바일 웹보다는 좀 더 앱에 가까운 형태로 모바일에 최적화 되어 있어 네이티브 앱의 장점도 가지고 있다.

특징

웹 개발 방식과 동일하게 HTML, CSS, JavaScript를 사용한다.
웹 브라우저에서 단일 페이지 방식으로 실행된다.
모바일 웹보다 모바일에 최적화 된 방식으로, 겉으로 보이는 모습과 구동 방식이 네이티브 앱과 유사하다.
장점
1. 운영체제별로 따로 개발할 필요가 없어 비용 및 개발 시간 절감이 가능하다.
2. 별도의 심사 과정이 필요하지 않아 유지보수에 용이하다.
단점
1. 디바이스 접근 권한에 제약이 있다.
2. 웹 브라우저에서 검색하거나 URL을 통해 접근해야 하는 불편함이 있다.

Mobile Web과 Web App

둘 다 웹 개발과 동일하게 만들어지므로 운영체제에 따라 별도로 개발할 필요가 없어 시간과 비용을 절감할 수 있다.

하지만 브라우저를 이용하여 접속해야 하기 때문에 직접 검색을 하거나 URL을 통해야 한다는 점에서 접근성이 떨어진다.

그렇다면 모바일 웹과 웹 앱은 어떤 차이가 있을까? 실제로 보기에는 큰 차이가 있어 보이지 않는 두 개발 방식은 실행 방식에 차이가 있다. 상단 이미지가 모바일 웹의 Full Browing 방식과 흡사하다면, 아래의 SPA Lifecycle은 웹 앱의 실행 방식을 설명한다.

이미지 출처

Mobile Web: Full Browsing 방식

화면 일부분이 변경되면 화면의 전체 내용을 서버에서 새로 받아온다. 이로 인해 page reload 발생 시 속도가 느리고, 이동 중 서버 접속 장애가 발생할 위험이 존재한다.

Web App: SPA 방식

브라우저에서 최초로 한 번 페이지 전체를 받아오고, 화면의 일부분이 변경되면 해당 부분만 Ajax를 사용해 데이터를 바인딩 하므로 실행 속도가 빠르다.

Ajax (Asynchronous JavaScript and XML)

웹 페이지가 서버와 비동기적으로 통신할 수 있게 해주는 기술으로, 이를 통해 전체 페이지를 새로 고치지 않고도 데이터를 가져오거나 보낼 수 있어 사용자 경험을 향상시킬 수 있다.

데이터 바인딩

UI 요소와 데이터 모델 간의 연결을 설정하여 데이터의 변경이 자동으로 UI에 반영되도록 하는 기술이다. 이를 통해 개발자는 복잡한 DOM 조작 없이 데이터의 상태를 쉽게 관리하고 업데이트할 수 있다.

Cross Platform Application

하나의 소스코드로 두 운영체제 모두에 배포할 수 있어 개발 측면에서 효율적이다.
한 가지 언어로 개발하고 컴파일하는 방식이다. 예를 들어, 네이티브 코드가 아닌 React로 코딩을 하고, JavaScript 코드로 컴파일(변환) 한 뒤 iOS, Android는 이 코드를 각각의 JavaScript 엔진(최적화된 코드)으로 실행한다.
Cross Platform Framework 예시: Flutter(Google), React Native(Meta), Xamarin
장점
1. OS별 개발이 필요한 네이티브 앱과 달리 한 가지 프로그래밍 언어로 안드로이드, iOS 앱 개발 및 배포가 가능하다.
2. 일반 네이티브 앱과 비교해 개발 속도는 빠르지만 성능 차이는 크지 않다.
단점
1. 기능 구현에 제약이 많아 외부 API를 이용하므로 확장성이 떨어진다.
2. 하이브리드 앱과 비교해 디자인의 세밀한 적용이 어려운 부분이 있다.
3. 네이티브 언어가 아니므로 퍼포먼스 문제가 발생할 수 있다.

Flutter

Google에서 개발한 오픈 소스 UI 프레임워크
단일 코드베이스를 사용하여 네이티브처럼 보이는 iOS 및 Android 애플리케이션을 만들 수 있다.
Dart 언어를 사용하여 작성되고, 이는 C, C++로 컴파일 되어 iOS, Android에서 모두 이해할 수 있게 변환된다.
Hot Reload: 개발 중 변경 사항을 즉시 확인할 수 있다.

// "Hello World"라는 메세지가 쓰여진 애플리케이션을 구현한다.
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World'),
        ),
        body: Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

React Native

Facebook에서 개발한 오픈 소스 프레임워크로
JavaScript와 React를 기반으로 하여 모바일 애플리케이션을 개발할 수 있게 해준다.
React의 컴포넌트 기반 아키텍처를 따른다.
개발자는 네이티브 UI 컴포넌트를 사용하여 iOS와 Android에서 모두 실행 가능한 앱을 만들 수 있다.

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
  },
});

export default App;

React Native의 Bridge 방식

이미지 출처

React Native는 브릿지 방식을 사용하여 네이티브 프레임워크와 자바스크립트 엔진 간의 통신을 가능하게 한다.
React Native 앱은 JavaScript로 작성되지만, 네이티브 UI 요소와 기능을 사용하기 위해 이 두 환경 간의 데이터와 명령을 브릿지를 사용하여 주고 받는다.

JavaScript에서 네이티브 모듈을 호출하면, 해당 호출이 Bridge를 통해 네이티브 스레드로 전달된다.
네이티브 스레드는 이 호출을 처리하고 결과를 다시 Bridge를 통해 JavaScript 쪽으로 반환한다.

개발자는 JavaScript 코드를 작성하면 브릿지는 이 코드로 네이티브 코드를 실행하고, 이는 Android 또는 iOS의 네이티브 뷰를 생성하고 조작한다.
React Native 애플리케이션은 세 개의 주요 스레드에서 작동하고, 브릿지를 통해 서로 필요한 정보를 직렬화하여 통신하는 방식을 사용한다.
- Main Thread
  - UI 그리기, 사용자 입력 처리, 네이티브 이벤트 처리
  - 앱의 성능과 직접적으로 연관된 스레드이다.
- Shadow Thread
  - 컴포넌트의 레이아웃을 계산하고 결과를 메인 스레드에 전달해 실제 네이티브 뷰를 그린다.
  - JavaScript Thread에서 생성된 가상 DOM의 레이아웃 정보에 기반하여 계산한다.
  - Yoga라는 오픈소스 레이아웃 엔진을 사용해 flexbox 레이아웃 시스템을 기반으로 레이아웃을 계산한다.
- JavaScript Thread
  - 앱의 로직 처리, API 호출, 애니메이션 계산 등을 담당한다.
  - React Native의 브릿지를 통해 메인 스레드와 통신하고, UI 변경 사항과 이벤트 처리 사항을 Main Thread로 전달한다.

Hybrid App

웹 앱과 네이티브 앱의 기능을 결합하여 개발된 앱
하나의 코드 베이스가 iOS, 안드로이드에서 모두 작동한다.
앱스토어에 올릴 수 있는 네이티브 형태로 만들되 그 안에 웹뷰를 띄울 수 있도록 개발하는 방식
최초에는 앱 스토어를 통해 다운로드 받고 실행시키지만 앱 구동 후에는 정해진 웹페이지를 불러오는 방식

웹뷰

내비게이션이 없는 윈도우 브라우저를 의미한다. HTML, CSS, JS를 사용하여 구현된 웹 사이트를 각각의 OS에 맞는 껍데기로 감싼 뒤 스토어에 올리면 앱으로 다운로드 받을 수 있게 된다.

특징

모바일 웹앱을 모바일 운영체제로 packaging하는 방식이다. 이 때문에 외부에서는 네이티브 앱의 형태이고, 내부는 모바일 웹 앱의 구조를 가진다.
- 앱의 기본 틀은 네이티브 앱으로 만들고 특정 영역은 브라우저를 띄워 화면을 보여준다.
- 자주 바뀌지 않는 영역은 주로 네이티브 단에서 변경하고, 자주 바꿔야 하는 페이지는 HTML 코드만 수정하면 모든 사용자에게 수정된 페이지를 보여줄 수 있는 웹 앱 영역으로 설정한다.
Google Play Store, iOS App Store에서 다운로드 받을 수 있으며, PC 접속은 불가능하다.
웹 브라우저로 접속한 것과 차이가 없지만 웹 브라우저와 달리 QR Code Reader와 음성 인식 등의 기능을 지원한다.
장점
1. 네이티브 API와 브라우저 API를 통해 다양한 개발이 가능하다.
2. 네이티브 앱 개발과 비교했을 때 비용과 시간을 줄일 수 있다.
3. 네이티브 앱과 비교했을 때 유지보수 측면에서 편리하다.
4. 모바일 웹보다 속도가 빠르다.
5. 디바이스의 고유 정보에 접근할 수 있다.
단점
1. 네이티브 앱과 비교했을 때 기능이 제한적이고 속도가 느리다.
2. 네이티브 기능에 접근하려면 결국에는 네이티브 앱 개발에 대한 지식이 필요하다.
3. 네이티브 앱과 마찬가지로 심사 과정이 필요하다.
4. 웹뷰에서 앱을 실행하므로 브라우저 성능이 앱 성능에도 영향을 미칠 수 있다.
5. 브라우저에서 지원하는 기능 중 일부가 웹뷰에서 제한될 수 있다.

🤔 그래서 어떻게 패키징하는데?

다음 아티클에서 웹뷰 구현 과정에 대해 자세히 서술하겠지만, 어떤 순서로 하이브리드 앱을 만들 수 있는지 간략하게 소개하여 이해를 돕고자 한다. Cordova, Ionic과 같은 네이티브 컨테이너에 웹 페이지를 패키징하여 iOS와 Android에서 실행하는 방법도 있지만 이번에는 React Native 환경에서 웹뷰를 로드하는 방법에 대해서만 소개하겠다.

1. 웹 애플리케이션 준비하기

HTML, CSS, JavaScript로 구성된 웹 애플리케이션 또는 웹 페이지가 필요하다.
이때 모바일 브라우저에서 잘 동작하도록 반응형 디자인이 적용되어 있으면 좋다.

2. React Native의 `WebView` 사용하기

이미지 출처

react-native-webview 라이브러리를 사용해 구현할 수 있다.
React Native를 기반으로 네이티브 컴포넌트를 사용하여 앱을 개발하면서, 필요에 따라 WebView 컴포넌트를 통해 웹 콘텐츠를 삽입한다.
대부분의 UI는 네이티브 컴포넌트로 구현되고, 특정 부분은 웹뷰로 구현된다.
네이티브 코드와 웹뷰 간의 상호작용을 위해 브릿지를 사용하며, 네이티브와 웹 기술을 필요에 따라 조합하여 사용할 수 있다.

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <WebView 
        source={{ uri: 'https://your-web-page.com' }} 
        style={{ flex: 1 }} 
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

source: 위의 예시처럼 uri로 웹 페이지를 로드할 수도 있고 ({ uri: 'https://your-web-page.com' }), 로컬 파일을 소스로 사용하여({ uri: 'file:///android_asset/local-file.html' }) 로컬 HTML 파일로 웹 페이지를 로드하는 것도 가능하다.

Progressive Web Applications (PWA)

이미지 출처

스토어가 아닌 Chrome, 사파리 같은 브라우저의 발전을 통해 더 많은 운영체제의 기능을 활용할 수 있게 하는 것
스토어에 등록되지 않아도 웹뷰 상에서 바로가기 버튼을 통해 핸드폰 배경화면에 아이콘을 생성할 수 있고, 네이티브 앱처럼 이를 사용할 수 있다.
사용자들은 스토어에서 별도의 다운로드 과정을 거치지 않고도 기기의 홈 화면에 웹 사이트의 아이콘을 추가할 수 있다.
또한 언제든지 푸쉬 알림을 통해 재참여가 가능하며 서비스 워커를 사용하여 오프라인에서도 웹 앱에 접근 가능하다.

🛠️ 서비스 워커

브라우저가 백그라운드에서 실행하는 스크립트
웹 페이지와는 별개로 작동하여 직접적으로 웹 페이지와 상호작용 하는 것은 불가능하다.
오프라인 상태에서 웹 브라우저에 URL로 접속하면 네트워크가 없어서 접속할 수 없는 것과 달리 PWA의 경우 서비스워커의 캐싱 덕분에 오프라인 환경에서 접속 가능하다.
오프라인 환경에서 새로운 컨텐츠는 불러오지 못하더라도 상단바, 메뉴와 같은 고정적인 컴포넌트인 '앱 셸'은 캐시된 데이터를 사용해 로드할 수 있다. 블로그 글과 같은 변화하는 컨텐츠도 원한다면 캐싱하여 오프라인 상태에서 불러오게 할 수 있다.

이미지 출처

인앱 결제 수수료로 인해 많은 기업들이 골머리를 앓고 있는 상황에서, 앱 스토어를 거치지않고 사용자에게 바로 브라우저를 통해 앱을 제공할 수 있는 PWA는 여러 기업들에게 새로운 대안이 될 수 있을 것으로 보인다.
다만 안드로이드 스토어에는 등록 및 설치가 가능하지만 iOS에서는 불가능하다. 또한 오래된 브라우저들은 PWA를 지원하지 않아 웹 푸쉬 알림 등의 기능을 활용하지 못하고, 바탕화면에 웹 앱을 추가할 수도 없다는 단점이 있다.

무엇을 선택할까?

각 예시에서도 볼 수 있듯, 최신 앱들도 다양한 방법을 차용하고 있는데 이는 곧 가장 좋은 방식은 무엇인가? 에 대한 정답이 없음을 의미한다.

네이티브 앱

높은 사양의 그래픽과 동적인 효과를 제공하고자 한다면
충분한 리소스와 OS별 개발이 가능한 앱 개발자가 있다면
게임, 지도, 카메라 앱처럼 기능, 디자인, 사용성이 중요하다면
멤버쉽 앱처럼 업데이트가 잦지 않은 앱이라면

모바일 웹, 웹 앱

제한적인 리소스로 잦은 업데이트를 진행해야 한다면

하이브리드 앱

디바이스 접근 권한에도 어느 정도 접근하면서 유지보수와 업데이트가 쉬워야 한다면
은행, 카드 앱처럼 보안이 중요하면서 콘텐츠는 지속적으로 업데이트 해야 한다면

다음 글에서는 실제로 웹 뷰를 사용하여 간단한 투두리스트를 만들어본 기록을 작성할 예정이다.

🔎 References

Jane

An investment in knowledge pays the best interest🙃

이전 포스트

리액트의 가상 DOM과 Fiber

다음 포스트

앱이란 무엇일까?

FE_Study_Notes

앱이란?

간단한 앱의 역사

Native App

특징

Android SDK

iOS SDK

Mobile Web

특징

Web App

특징

Mobile Web과 Web App

Mobile Web: Full Browsing 방식

Web App: SPA 방식

Cross Platform Application

Flutter

React Native

React Native의 Bridge 방식

Hybrid App

특징

🤔 그래서 어떻게 패키징하는데?

1. 웹 애플리케이션 준비하기

2. React Native의 `WebView` 사용하기

Progressive Web Applications (PWA)

🛠️ 서비스 워커

무엇을 선택할까?

🔎 References

리액트의 가상 DOM과 Fiber

Server Driven UI

0개의 댓글

앱이란 무엇일까?

FE_Study_Notes

앱이란?

간단한 앱의 역사

Native App

특징

Android SDK

iOS SDK

Mobile Web

특징

Web App

특징

Mobile Web과 Web App

Mobile Web: Full Browsing 방식

Web App: SPA 방식

Cross Platform Application

Flutter

React Native

React Native의 Bridge 방식

Hybrid App

특징

🤔 그래서 어떻게 패키징하는데?

1. 웹 애플리케이션 준비하기

2. React Native의 WebView 사용하기

Progressive Web Applications (PWA)

🛠️ 서비스 워커

무엇을 선택할까?

🔎 References

리액트의 가상 DOM과 Fiber

Server Driven UI

0개의 댓글

2. React Native의 `WebView` 사용하기