티스토리 뷰

UI_UX Design/UI Design 개론

ch01_모바일 앱의 종류

jsBae 2022. 9. 13. 19:23
•모바일 앱의 종류는 대표적으로 네이티브 앱(Native App)과 하이브리드 앱(Hybrid App)으로 구분되지만, 최근에는 프로그레시브 웹 앱(Progressive web App)과 모바일 웹(Mobile web)도 앱의 종류에 포함된다.

 

 

  • 1> 네이티브 앱(Native App
    • 모바일 기기에 직접 설치되고 운영 되는 전용 애플리케이션.
  • 2/3> 모바일 웹 + 앱(Mobile WebApp)
    • OS와 상관 없이 웹을 통한 풀 브라우징(Full Browsing)을 지원하는 모바일상의 홈페이지로 HTML 기반.
    • 좀더 네이티브앱처럼 제작하는것을 모바일 웹앱
    • iOS, Android SDK 와 같은 네이티브툴에서 URL을 웹뷰(Web View) 형태로 보여주는 앱도 웹앱
  • 4/5> 반응형웹앱(RWA) / 적응형 웹앱(AWA)
    • 하나의 HTML 파일이 PC용 웹사이트, 태블릿용, 스마트폰용으로 자동리사이징이 되어지는 형태를 반응형 웹앱(Responsive Web App)
    • 반응형 웹앱은 동일한 HTML 구조를 사용하지만, CSS 미디어 쿼리를 활용해 화면 크기, 해상도, 디바이스 종류에 따라 레이아웃이 유동적으로 변화하는 웹앱이다. 이는 사용자가 사용하는 기기의 화면 크기에 맞춰 자동으로 레이아웃을 조정한다.
    • 장점:
      • 유연성: 다양한 화면 크기에 자동으로 반응하므로 모든 디바이스에서 일관된 사용자 경험을 제공할 수 있다.
      • 유지보수 용이: 하나의 코드로 다양한 기기에서 사용할 수 있기 때문에 유지보수가 간편하다.
      • SEO에 유리: 반응형 웹은 하나의 URL을 사용하므로, 검색 엔진에서 크롤링하기 쉽고 SEO에 유리하다.
      단점:
      • 복잡한 레이아웃에서 성능 문제**: 매우 복잡한 레이아웃의 경우, 모든 화면 크기에서 완벽하게 대응하기 어려울 수 있다.
      • 과도한 로딩: 작은 화면에서 불필요한 리소스가 로드될 수 있어, 성능에 영향을 미칠 수 있다.
    • 적응형 웹앱은 미리 정의된 몇 가지 화면 크기에 맞춰 여러 개의 레이아웃을 별도로 설계하는 방식이다. 디바이스나 화면 크기에 따라 미리 준비된 레이아웃 중 가장 적합한 레이아웃을 불러와 사용자에게 제공한다.
      • 고정된 레이아웃: 다양한 화면 크기에 맞춘 여러 고정 레이아웃을 준비해 두고, 사용자가 접속할 때 해당 기기에 맞는 레이아웃을 자동으로 선택하여 제공한다.
      • 미리 정의된 브레이크포인트: PC, 태블릿, 스마트폰 등 주요 디바이스별 브레이크포인트를 설정하고, 각각의 화면 크기에 맞춘 맞춤형 레이아웃을 적용한다.
      • 여러 코드베이스: 각 레이아웃을 따로 개발해야 할 수 있기 때문에, 반응형 웹에 비해 코드 관리가 복잡해질 수 있다.
      예시:
      • 대형 쇼핑몰 웹사이트는 적응형 디자인을 자주 사용한다. 데스크탑, 태블릿, 모바일 기기마다 다른 레이아웃과 최적화된 이미지를 제공하여 사용자 경험을 극대화한다.
      장점:
      • 디바이스 최적화: 특정 디바이스에 맞춘 레이아웃을 설계할 수 있어, 사용자가 해당 기기에서 최적화된 경험을 할 수 있다.
      • 성능 최적화: 각 디바이스에 맞춰 최적화된 리소스만 로드하기 때문에, 속도가 빠를 수 있다.
      단점:
      • 복잡한 유지보수: 여러 개의 레이아웃을 유지보수해야 하므로, 기기의 종류가 많아질수록 관리가 복잡해질 수 있다.
      • 제한된 유연성: 화면 크기가 브레이크포인트를 벗어날 경우, 레이아웃이 비효율적으로 보일 수 있다. 예를 들어, 화면 크기가 미리 정의된 범위 사이에 있으면 사용자 경험이 다소 떨어질 수 있다.
    • 반응형 웹앱(RWA)과 적응형 웹앱(AWA)의 비교
      구분 반응형 웹앱 (RWA) 적응형 웹앱 (AWA)
      레이아웃 유동적, 화면 크기에 따라 자동으로 변함 미리 정의된 몇 가지 고정 레이아웃을 사용
      개발 방식 하나의 레이아웃과 CSS 미디어 쿼리를 사용해 모든 화면 크기 지원 여러 레이아웃을 각각 개발해 브레이크포인트에 따라 다르게 제공
      코드 관리 하나의 코드베이스로 유지보수 용이 여러 레이아웃을 관리해야 하므로 복잡할 수 있음
      유연성 매우 유연함, 다양한 화면 크기와 해상도에 자동으로 적응 제한적, 미리 정의된 브레이크포인트 내에서만 최적화됨
      성능 작은 화면에서도 불필요한 리소스가 로드될 수 있어 성능 저하 가능 각 디바이스에 맞는 리소스만 로드하여 성능 최적화 가능
      적용 사례 블로그, 뉴스 사이트 등 모든 디바이스에서 일관된 사용자 경험이 중요한 경우 쇼핑몰, 대기업 사이트 등 기기별 최적화된 경험이 중요한 경우
  • 6> 하이브리드앱(Hybrid App)
    • 웹앱을 네이티브앱으로 감싼 것

§다양한 모바일 운영체제

2024년 현재, 모바일 운영체제 시장은 Android와 iOS가 거의 대부분을 차지하고 있다.

두 운영체제가 대부분의 스마트폰 시장을 양분하고 있지만, Harmony OS와 같은 새로운 운영체제도 일부 지역(특히 중국)에서 점유율을 늘리고 있다. 예를 들어, 중국에서는 Harmony OS가 **17%**의 점유율을 기록하기도 했다.

이처럼 Android가 글로벌 시장에서 주도적인 위치를 차지하고 있지만, iOS는 사용자 충성도와 고급 시장에서 강세를 보이고 있으며, 그 외의 운영체제들은 제한된 시장에서 점차 확대되고 있다.

**프로그레시브 웹 앱(PWA, Progressive Web App)**은
웹앱과 네이티브 앱의 장점을 결합한 형태의 애플리케이션이다. PWA는 웹 기술(HTML, CSS, JavaScript)을 사용하여 웹 브라우저에서 실행되지만, 네이티브 앱처럼 오프라인 기능, 푸시 알림, 홈 화면 아이콘 추가 등을 제공하여 앱과 유사한 사용자 경험을 제공한다.

주요 차이점 요약

구분 프로그레시브 웹 앱(PWA) 하이브리드 앱(Hybrid App)
개발 기술 HTML, CSS, JavaScript HTML, CSS, JavaScript, 네이티브 셸 사용
배포 방식 웹사이트에서 설치 가능, 앱스토어 없이 배포 앱스토어(구글 플레이, 애플 앱스토어)를 통해 배포
오프라인 기능 서비스 워커를 통해 오프라인 지원 네이티브 셸을 통해 오프라인 기능 가능
성능 웹 기반이므로 성능이 떨어질 수 있음 네이티브 기능 접근 가능하지만, 웹뷰로 인해 성능이 제한될 수 있음
기기 하드웨어 접근 제한적, 일부 네이티브 기능 접근 가능 네이티브 기능에 깊이 접근 가능
업데이트 방식 자동 업데이트 가능 앱스토어를 통한 업데이트 필요

 

모바일 앱의 종류에 따른 주요 특징 테이블

구분 네이티브 앱 (Native App) 하이브리드 앱 (Hybrid App) 웹 앱 (Web App) 프로그레시브 웹 앱 (PWA)
설치 방식 앱스토어에서 다운로드 및 설치 앱스토어에서 다운로드 및 설치 웹 브라우저에서 실행 웹 브라우저에서 실행 (앱 설치 없이 브라우저에서 바로 실행 가능)
개발 언어 운영체제(OS)별 전용 언어 사용 (iOS: Swift, Android: Java/Kotlin) 웹 기술(HTML, CSS, JavaScript)로 개발하되 네이티브 셸을 사용 HTML, CSS, JavaScript 등 웹 기술 사용 HTML, CSS, JavaScript로 개발, 웹과 네이티브 앱의 중간 형태
운영체제 의존성 특정 운영체제(iOS, Android 등)에서만 동작 여러 운영체제에서 실행 가능 (단, 성능이 네이티브보다 떨어질 수 있음) 모든 운영체제에서 웹 브라우저를 통해 실행 가능 모든 운영체제에서 웹 브라우저를 통해 실행 가능
성능 최고의 성능 제공 (운영체제의 모든 기능 활용 가능) 성능이 네이티브 앱보다 떨어질 수 있음 성능이 제한적 (운영체제 기능을 대부분 사용할 수 없음) 성능이 제한적 (하지만 오프라인 기능을 지원하고, 성능은 웹앱보다 나은 편)
운영체제 기능 활용 GPS, 카메라, 연락처 등 기기의 모든 기능 완전 활용 가능 네이티브 기능을 제한적으로 활용 가능 제한적 (웹 브라우저 내에서 동작하므로 기기 기능 활용이 거의 불가능) GPS, 카메라 등 제한적 기능 활용 가능 (오프라인 기능 지원)
개발 및 유지보수 운영체제마다 별도의 개발 필요 하나의 코드베이스로 여러 운영체제에서 실행 가능 개발이 용이하고 유지보수가 간단하나, 기능 제한이 큼 웹 앱처럼 유지보수 용이하며, 앱스토어에 배포하지 않아도 됨
인터넷 연결 필요성 오프라인에서도 동작 가능 오프라인에서도 일부 기능이 동작 가능 반드시 인터넷 연결 필요 인터넷 연결 없이도 일부 기능 제공 (오프라인 지원)
배포 방법 앱스토어(구글 플레이, 애플 앱스토어)를 통해 배포 앱스토어를 통해 배포 가능 웹 브라우저를 통해 접근 및 배포 앱스토어를 통한 배포 없이, 웹사이트처럼 URL을 통해 접근 및 배포 가능
사용자 경험(UX) 운영체제별로 최적화된 UI/UX 제공 네이티브 앱과 유사하지만 네이티브 앱보다는 UX가 떨어질 수 있음 제한적이며, 네이티브 앱만큼 매끄럽지 않음 네이티브 앱과 유사한 UX 제공, 오프라인 기능 지원

 

 
 

 

728x90
반응형
저작자표시 비영리 동일조건 (새창열림)
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
반응형