본문 바로가기
카테고리 없음

용어정리

jungmin.park 2023. 10. 18. 19:55

 

모바일웹 / 웹앱

  • 고객사에 들어가면 4가지 개발방식(모바일 웹/ 웹앱 / 하이브리드앱/ 네이티브 앱) 에 따라 스크립트를 설치하는 경우 or SDK를 설치하는 경우가 존재합니다.
  • 4가지 방식에 어떤 차이가 있는지 정리했습니다.

모바일 웹(Mobile Web)웹 앱(Web App)

요약 데스크 탑 브라우저에 실행되는 웹 어플리케이션을 모바일 스크린 크기로 줄여 놓은 것 모바일 웹과 네이티브 앱을 결합한 것으로 모바일 웹의 특징을 가지면서 네이티브 앱의 장점도 갖고 있음.
정의 모바일 화면에 맞게 구성한 웹 모바일 웹과 비슷하지만 구동방식이 앱처럼 보이게 한 앱
특징
  • 개발 : 웹 개발 방식과 동일(html, css, Javascript 등)
  • 실행 : 웹 브라우저 ( 풀 브라우저 방식 )
  • PC 웹 페이지를 모바일에 맞게 줄인 모습
  • 개발 : 웹 개발 방식과 동일(html, css, Javascript 등)
  • 실행 : 웹 브라우저 ( 단일 페이지 방식 )
  • 겉 모습과 구동방식이 마치 네이티브 같은 웹 페이지
  • (모바일 웹보다 모바일 최적화)
장점
  • 운영체제 별로 개발할 필요 없음
    • 비용 시간 절감 / 심사과정 X
  • 운영체제 별로 개발할 필요 없음
    • 비용 시간 절감 / 심사과정 X
단점
  • 디바이스 접근 권한 제한
  • 웹 브라우저에서 검색 URL로 접근(불편함)
  • 디바이스 접근 권한 제한
  • 웹 브라우저에서 검색, URL로 접근(불편함)
  • 브라우저 API 만 사용해야 한다.
  • 친화적인 터치 앱을 개발하기에 번거로움이 있다.
  • 두가지 모두 웹 개발과 동일하게 만들어지기 때문에 모바일 운영체제 별로 개발 할 필요가 없어 시간과 비용 측면에서 효율적이다.
  • 하지만 접속하기 위해 브라우저를 이용해야 하기 때문에 직접 검색 or URL을 통해야 한다.
  • 따라서 이와 같이 접근성이 떨어진다는 단점이 있다.

풀 브라우저 방식 / 단일 페이지 방식

위와 같이 모바일 웹과 웹 앱 간에는 차이가 존재한다.

  • 모바일 웹 → 풀 브라우저 방식(Full Browsing)
  • 웹 앱 → 단일 페이지 방식 (SPA, Sing Page Application)

<풀 브라우저 방식(Full Browsing)>

  • 화면 일부분이 변경될 때 화면 전체 내용을 서버에서 새로 받아오는 방식
  • 페이지 리로드(Page Reload) 할 경우 속도가 느린 단점이 있다. 또한 모바일 기기 특성상 이동 중에 서버 접속 장애가 발생할 위험이 있다.
  • ‘Traditional Page LigeCycle’ 에 가까운 방식
  • 모바일 웹은 풀 브라우저 방식으로 실행 속도가 느림

<단일 페이지 방식(SPA)>

  • 브라우저에 최초 한 번 페이지 전체를 받아오고, 화면 일부분이 변경, 요청될 때 해당 부분만 Ajax를 통해 데이터를 바인딩 하는 방식이다.
  • ‘SPA LifeCycle’ 방식
  • 웹 앱은 단일 페이지 방식으로 실행 속도가 빠름.
 

하이브리드앱/ 네이티브앱

  • 모바일 웹과 웹 앱보다 모바일 환경에 최적화된 개발 방법

하이브리드 앱(Hybrid App)네이티브 앱(Native App)

요약 앱의 기반이 되는 콘텐츠 영역은 HTML 기반의 웹 앱으로 제작, 최종 앱 배포에 필요한 패키징 처리만 아이폰, 안드로이드 플랫폼 안에서 처리한 어플리케이션 모바일 기기에 최적화된 언어로 개발된 앱으로 안드로이드 SDK를 이용해 java 언어로 만드는 안드로이드 앱과 iOS SDK를 이용해 Objective-C 언어로 개발된 아이폰 앱 등
정의 웹 앱과 네이티브 앱의 기능을 결합하여 개발된 앱
하나의 코드 베이스로 iOS, 안드로이드에서 둘다 작동		 모바일 기기에 최적화된 네이티브 언어
(개발언어)로 개발된 앱
특징
  • 개발 : 모바일 웹앱을 모바일 운영체제로 패키징 ( 외부는 네이티브 모습 / 내부는 모바일 웹앱)
  • 실행 : 플레이스토어, 앱스토어에서 다운 설치(PC접속 불가)
  • 웹브라우저로 접속한 것과 차이 없은 But QR코드리더, 음성인식 등 지원
  • 개발 : 해당 운영체제에 최적화되어 있는 개발 도구로 제작
  • 실행 : 구글 플레이스토어, 앱스토어에서 다운 설치(PC접속 불가)
  • 안드로이도 SDK : Kotlin / JAVA
  • iOS SDK : Swift / Objective - C
장점
  • 네이티브 API와 브라우저 API 이용해 다양한 개발 가능
  • 개발 비용, 시간 절감 ( 네이티브 앱 보다 )
  • 유지 보수 쉬움 ( 네이티브 앱 보다 )
  • 모바일 웹 보다 속도 빠름
  • 디바이스 고유 정보 접근 가능
  • 네이티브 웹에 웹뷰를 띄워 웹앱을 실행 시키는 것이 보편적이며 양쪽의 API를 모두 사용할 수 있다.
  • 높은 퍼포먼스
  • 더 많은 디바이스 접근 권한
  • 빠른 속도 안정성
단점
  • 제한적 기능, 느린 속도 ( 네이티브 앱보다 )
  • 네이티브 앱 개발 지식 필요
  • 심사과정 O
  • 브라우저 성능에 따라 앱 성능 영향 받음
  • 각 운영체제마다 개발 및 유지 보수 필요 → 운영체제별 개발인력 필요
  • 높은 개발, 운영 비용
  • 심사과정 O
  • 업데이트 할 때마다 플레이스토어 , 앱스토어를 통해야 함
  • 모바일 웹과 앱보다 모바일 환경에 최적화된 개발 방법 → 하이브리드와 네이티브
  • 하이브리드 개발
    • 웹 기반으로 운영체제에 따른 패키징을 달리하여 iOS 와 안드로이드에서 실행하는 방법
    • 하나의 코드로 개발하기 때문에 네이티브 앱에 비해 비용적, 시간적으로 효율적
    • 그러나 네이티브 앱보다 기능이 제한적, 속도가 느림.
  • 네이티브 개발
    • 각 운영체제(iOS, 안드로이드)에서 제공하는 SDK로 만드는 방법
    • 각 운영체제에 최적화된 개발이 가능하여 기능과 속도 측면에서도 하이브리드 앱보다 우수
    • 하지만 개발 범위가 넓고, 많기 때문에 비용이 높고, 시간이 오래 걸림.

크로스 플랫폼 프레임워크(Croos PlatForm Framework)

  • 대표적인 크로스 플랫폼 프레임워크 : 구글-Flutter , 페이스북 - React Native
  • 하나의 소스코드로 iOS, 안드로이드 운영체제 모두 배포할 수 있다는 특징을 가지고 있음.

AWS 관련사항

로그 데이터를 쌓아서 Amazon Athena 데이터 분석툴을 사용하여 데이터 분석을 하려고함.
로그데이터 저장시 압축하여 저장해야 하는지
or 압축되지 않은 로그파일을 저장해야하는지
저장은 Amazon S3에 저장하여 Athena로 데이터를 끌어와 사용하려함.		 Amazon Athena는 압축된 로그 데이터를 성공적으로 읽어올 수 있다.
그렇기 때문에 로그데이터 저장시 압축된 로그파일로 저장하여 스토리지 공간을 확보할 수 있는 장점이 있다.
자세한 사항은 해당 URL 참고
https://docs.aws.amazon.com/ko_kr/athena/latest/ug/compression-formats.html
  • On-premise 란
    • 기업의 서버를 클라우드 같은 원격 환경에서 운영하는 방식이 아닌, 자체적으로 보유한 전산실 서버에 직접 설치해 운영하는 방식을 의미

OPTIONS method 수집서버 오류 현상

<테스트 방법>

웹 → F12( 개발자 모드 ) → Console에 입력

client = new XMLHttpRequest();

client.open(“OPTIONS”, “http://10.41.101.132/static/64336/install.js?ver=166320000000”. true);

client.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

client.send()
  • 발생한 오류 : 405(Not Allowed), Access to ‘XMLHttpRequest at ~ has been blocked by CORS policy: ~ No Access-Control-Allow-Origin’ header is present on the requested resource

티스토리툴바