[혼공얄코] Chapter 02-4 스마트폰 앱인데 웹사이트라고요?

애플리케이션을 만드는 방법에는 무엇이 있는지, 어떤 특징과 차이점을 가지고 있는지 알아봅니다. 그리고 애플리케이션 개발에 관련된 용어와 개념을 학습합니다.

 

플랫폼별로 애플리케이션 맞춤 제작이 가능한 네이티브 앱

- 각 운영체제에 맞는 앱을 개발하는 방법

- 안드로이드 앱 : 자바와 이클립스, 코틀린, 안드로이드 스튜디오 도구

- 아이폰용 앱 : 스위프트, 엑스코드 도구

- 작동하는 기기에 최적화된 형태로 개발 (카메라, GPS, 블루투스, 영상 편집 앱 등)

안드로이드와 iOS, 두 마리 토끼 다 잡는 크로스 플랫폼

- 같은 소스 코드로 안드로이드 버전과 iOS에서 기능을 구현하는 방법도 통일

- 각각의 플랫폼에서 네이티브 앱으로 제작하는 것보다 쉽고 적은 자원으로 애플리케이션을 제작 할 수 있음

- 플러터, 리액트 네이티브, 닷넷, 마우이 등

- 네이티브 앱에 비해 성능을 100% 끌어 올릴 수 없고 기기의 활용도 떨어짐, 기능 업데이트 시에 앱 마켓의 심사 거쳐야 함

- 단순한 기능으로 이뤄진 앱을 제작하는데 사용  (스케줄 관리 앱, 쇼핑앱, 사진 보정 앱 등)

 

모바일 앱의 모습을 한 웹사이트 웹 앱

- 스마트폰의 기종이나 기기에 상관없이 모든 단말기에서 같은 콘텐츠를 볼 수 있는 웹사이트

- 반응형 혹은 적응형 방식을 사용해서 모바일 기기에서 사용하기 적합한 형태로 만든 웹사이트

- 브라우저에 접속해서 이용할 수 있는 웹사이트

- 모바일 앱과 비슷한 UI/UX를 지원하는 웹사이트

- 높은 사양이 요구되는 작업이나 스마트폰 내부의 파일들을 다루는 기능, 각종 하드웨어 장치를 다루는 기능은 구현이 불가능하거나 어렵다.

- 하이브리드 앱( 네이티브 앱과 웹 앱의 개발 방식을 모두 사용 )또는 PWA의 형태로 보완되어 제공

 

네이티브 앱과 웹 앱의 장점을 합친 하이브리드 앱

- 앱의 대다수 콘텐츠를 웹사이트로 제공하면서 추가로 네이티브 앱에서 사용 가능한 기능까지 제공하는 앱

- 네이티브 또는 크로스 플랫폼 방식으로 앱을 만들되 화면 안에 요소를 직접 만들지 않고, 브라우저 역할을 하는 웹뷰라는 요소를 만들어 대신 웹 화면을 띄웁니다.

 

 

참고 https://blog.hectodata.co.kr/app_kinds/

 

 

모바일 브라우저의 발전 PWA (Progressive Web Apps)

- 앱이 아닌 모바일 웹사이트

- 스마트폰과 PC의 바탕 화면에 아이콘 설치가 가능, 푸쉬 알람을 보낼 수 있는 등 기존의 웹 앱이 갖추지 못했던 접근성과 편의성을 제공

- 아이콘을터치하면 해당 웹사이트를 앱처럼 실행하고 웹 앱처럼 별도의 업데이트 과정을 거칠 필요가 없다.

- 아이폰에서 사파리를 제외한 다른 브라우저의 PWA 기능 차단

 

더욱 자세한 PWA 참고 사이트
https://yozm.wishket.com/magazine/detail/1969/

네이티브앱 vs 모바일웹앱 vs 하이브리드앱 의 장단점을 설명하는 참고 사이트
https://m.blog.naver.com/acornedu/221012420292

 

 

 

 

확인 문제

 

1. 다음 중 틀린 것을 고르시오.

1. 크로스 플랫폼으로 만든 앱은 앱 마켓의 심사 과정을 거치지 않습니다.

 

2. 다음 문장에 가장 적합한 앱 종류를 써 보세요.

- 카메라의 QR 코드 스캔 기능이 필요한 대학생용 학사 정보 앱      (하이브리드 앱)

- 고사양을 요구하는 전문가용 3D그래픽 제작 앱                               (네이티브 앱)

- 웹사이트로 제공 중인 상점 소개 페이지                                               (웹 앱)

- 소규모 개발 인력으로 단기간에 제작해야 하는 사진 공유 앱         (크로스 플랫폼)

 

3. 다음 중 하이브리드 앱에 대해 틀린 것을 고르세요 

   5 안드로이드 폰에서 iOS의 기능을 사용할 수 있습니다.

 

4. 다음 주 PWA 앱에 대해 틀린 것을 고르세요

    4 PWA는 브라우저 기능을 활용해서 다양한 기능을 제공할 수 있습니다

.