TIL. Web(4)

seul_velog·2022년 9월 10일

모바일 웹 & 웹 앱 & 네이티브 앱 & 하이브리드 앱

모바일웹은 반응형 혹은 적응형 작업이 된 웹페이지 이다. 웹앱은 모바일웹과 같으나 겉모습과 구동방식을 마치 앱인 것처럼 꾸며놓은 것이다. 즉 웹 기술로 네이티브앱을 흉내낸 형태이다.
모바일 웹과 웹앱보다 모바일 환경에 최적화된 개발 방법으로 하이브리드와 네이티브가 있다.
하이브리드 개발은 웹 기반으로 운영체제에 따른 패키징을 달리하여 iOS와 안드로이드에서 실행하는 방법이다. 네이티브 개발은 각 운영체제(iOS, 안드로이드)에서 제공하는 SDK로 만드는 방법이다.

모바일 웹(Mobile Web)

모바일 화면에 맞게 구성한 웹이다. 데스크 탑 브라우저에 실행되는 웹 어플리케이션을 모바일 스크린 크기로 줄여놓은 것이다.

웹 앱(Web App)

모바일웹과 같으나 겉모습과 구동박식을 마치 앱인 것처럼 꾸며놓은 것이 웹앱이다. 다시말해 모바일 웹과 네이티브 앱을 결합한 것으로 모바일웹의 특징을 가지면서 네이티브 앱의 장점도 갖는다. 모바일 웹보다는 조금 더 모바일에 최적화된 앱이다.

📌 모바일 웹과 웹앱

모바일웹과 웹앱은 웹 개발과 동일하게 만들어지므로 모바일 운영체제 별로 개발할 필요가 없기 때문에 시간과 비용 측면에서 효율적이다.
하지만 이 둘은 접속을 위해서는 브라우저를 이용해야 하기 때문에 직접 검색하거나 URL을 통해야 하므로 접근성이 떨어진다는 단점이 있다.

1) 모바일 웹 → 풀 브라우저(Full Browsing)방식

화면 일부분이 변경될 때 화면 전체 내용을 서버에서 새로 받아오는 방식이다. 따라서 페이지를 리로드할 경우 속도가 느리다는 단점이 있다.
모바일 기기 특성상 이동 중에 서버 접속 장애가 발생할 위험이 있다.

2) 웹앱 → 단일 페이지(SPA, Single Page Application)방식

브라우저에 최초 한 번 페이지를 받아오고, 화면 일부분이 변경, 요청될 때 해당 부분만 Ajax를 통해 데이터를 바인딩 하는 방식이다.

Ajax : 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나이다. 웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분을 갱신할 수 있다.

✍️ 모바일 웹은 풀 브라우저 방식으로 실행 속도가 느린 반면, 웹 앱은 단일 페이지 방식으로 실행 속도가 빠르다.

네이티브 앱(Native App)

Android 또는 iOS 같은 구체적인 플랫폼만을 위해 만들어진 응용 프로그램을 네이티브 앱(Native App)이라고 한다.
Android 모바일 앱 개발의 경우는 Kotlin 또는 Java, iOS의 경우 Swift 또는 Objective C로 네이티브 앱을 만들 수 있다.

장점

사용자에게 가장 빠르고 안정적이며 반응이 빠른 환경을 제공한다.
앱의 실행 속도가 빠르고 유용한 API의 지원을 받을 수 있다.

단점

다른 운영체제에서도 실행되기 위해서는 시간과 노력이 많이 든다.
더 많은 비용이 들고 빌드하는 데 시간이 더 오래 걸린다.

하이브리드 앱(Hybrid App)

하이브리드 앱은 네이티브 앱과 웹 앱의 기능을 결합한 것이다. 다양한 플랫폼에서 사용할 수 있는 앱을 빠르게 만들 수 있다.

장점

웹 기술만으로 개발해서 앱스토어에 배포 할 수 있다.
네이티브 API와 브라우저 API를 이용한 다양한 개발

단점

네이티브 앱 만큼 기능을 제공하진 않는다.
브라우저 성능에 따라 앱의 성능이 좌우된다.
앱스토어에서 배포를 해야되기 때문에 업데이트 반영이 느리다.

크로스 플랫폼 앱 (Cross-platform App)

둘 이상 플랫폼에서 돌아가는 앱을 만든다. 한 가지의 개발 언어와 프레임워크로 iOS나 Android 양쪽 앱스토어에 출시할 수 있는 개발 방식이다.

코드를 하나만 작성하면 2개 플랫폼에서 모두 사용할 수 있으므로 시간을 줄일 수 있고 유지보수도 쉽다. 리액트 개발자라면 리액트 네이티브로 빠르게 모바일 애플리케이션을 개발할 수 도 있다.

반면, 네이티브가 아닌 만큼 퍼포먼스를 100% 끌어올릴 수 없고 변환하는 작업이 필요하다고 한다. 🧐

PWA(Progressive Web App)

PWA는 하이브리드 앱과 비슷하지만 약간 다르다. 기본적으로 사용자들에게 네이티브 앱의 느낌을 주면서도 웹 브라우저에서 바탕화면에 바로가기를 추가하여 특별한 다운로드와 인스톨 과정 없이 기본 앱처럼 사용할 수 있다는 것이 특징이다.

✍️ 트위터도 PWA 이며 우리가 온라인에서 볼 수 있는 많은 사이트들도 실제로는 PWA라고한다.😀 스마트폰으로 트위터에 들어가면 홈 화면에 twitter.com을 추가할 수 있다. 이 후 스마트폰에 저장된 트위터 사이트를 열어보면 모양도 네이티브 앱처럼 보이고 기능도 모두 똑같다. 브라우저 창 같은건 없으며 아이폰이나 안드로이드 등 어떤 스마트폰이든 관계 없이 실행하는 데 있어서는 차이가 없다. 이것이 PWA로 웹 애플리케이션을 만들 때의 큰 장점이다.

네이티브 앱 vs PWA

네이티브 앱은 일반적으로 해당 플랫폼에 특화된 프로그래밍 언어로 만드는 경우가 많다. (ex. iOS → Swift , Android → Java)
따라서 원하는 플랫폼에서 실행되는 앱을 만들기 위해서는 이와 관련된 기술도 알아야 하며, 하나의 앱을 만들어서 모든 앱스토어에 출시한다는 것은 쉬운일이 아니게 된다.
두 개의 환경에서 모두 실행되는 앱을 개발하는 방법이 바로 대표적으로 프로그레시브웹앱(PWA)이다. PWA는 일단 홈 화면에 저장되면 브라우저에서 실행되며, 네이티브 앱처럼 동작한다. 따라서 PWA의 성능이 뛰어나다면, 사용자들은 자신둘이 웹 기반의 앱을 사용하고 있는 것인지, 네이티브 앱을 사용하고 있는 것인지 구분하지 못할 것이다.
PWA를 위한 기술들을 빠르게 채택하고는 있지만 주의할 점도 있다. iOS의 경우, PWA에 필요한 기술들을 사파리(Safari) 브라우저가 지원하지 않는 경우가 많다. 애플은 아직까지 관련 기술들을 완전히 지원하지 않기때문에 다른 플랫폼에서와 동일한 환경을 구성하는 것이 번거롭다는 점 등이 있다.

PWA 장점

다양한 앱스토어에 출시하기 위해 별도 프로세스를 거치지 않아도 된다.
일반적인 웹 기술을 활용해서 PWA를 만들 수 있다.
일반적으로 개발 비용이 더 저렴하다.
기존 웹사이트를 앱으로 만들 수 있으므로 추가로 유지관리해야 하는 코드베이스(codevase, 소스코드 일체)가 적다.
PWA는 기본적으로 반응형(responsive)이기 때문에 다양한 화면 크기에도 잘 동작한다.
PWA는 부드럽고 빠르며 가볍다.
일반적인 웹사이트와 달리, 오프라인에서도 작동한다.
PWA는 검색엔진을 통해서 찾을 수 있다. (앱스토어보다는 검색엔진을 이용하는 사용자가 더 많다. 앱스토어를 통해서도 배포 가능하다.)
푸시 알림을 통해서 사용자들의 관심을 끌 수 있다.

✍️ 이와같은 장점들이 있지만 한계점도 있으므로 이용 고객들에 대해서 고려하고 사용할지를 정하는 것이 좋다고 한다.🤔

CSRF & XSS

CSRF는 사이트 간 요청 위조(Cross Site Request Forgery)로, 웹 어플리케이션 취약점 중 하나이다. 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행동을 하여 특정 웹페이지를 보안에 취약하게 한다거나 수정, 삭제 등의 작업을 하게 만드는 공격방법을 의미한다.
XSS는 공격자가 상대방의 브라우저에 스크립트가 실행되도록 해 사용자의 세션을 가로채거나, 웹사이트를 변조하거나, 악의적 콘텐츠를 삽입하거나, 피싱 공격을 진행하는 것을 말한다. XSS 공격은 스크립트 언어와 취약한 코드를 공격 대상으로 한다. 해킹의 주요 목적은 사용자의 정보를 도용하는 것이다.

CSRF

CSRF(Cross Site Request Forgery) 는 웹 어플리케이션 취약점 중 하나로 인터넷 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)를 특정 웹사이트에 요청하게 만드는 공격이다.
CSRF를 통해 해커는 사용자(희생자)의 권한을 도용하여 중요 기능을 실행하는 것이 가능해진다. (ex. 페이스북에 희생자 계정으로 광고성 글을 올리는 등)
CSRF는 해커가 사용자의 컴퓨터를 감염시키거나 서버를 해킹해서 이뤄지는 공격은 아니다. 그래서 CSRF 공격이 이뤄지려면 다음 조건이 만족되어야 한다.
- 위조 요청을 전송하는 서비스에 사용자(희생자)가 로그인 한 상태
- 사용자(희생자)가 해커가 만든 피싱 사이트에 접속

XSS

XSS(Cross Site Script) 는 웹 어플리케이션에서 사용자 입력 값에 대한 필터링이 제대로 이루어지지 않을 경우 공격자가 입력이 가능한 폼에 악의적인 스크립트를 삽입하여 해당 스크립트가 희생자 측에서 동작하도록 하여 악의적인 행위를 수행하는 취약점이다.

1) Stored XSS (저장형 XSS)

공격자가 악성 스크립트를 서버에 저장시킨 다음 클라이언트의 요청/응답 과정을 통해 공격하는 방식이다.

2) Reflected XSS (반사형 XSS)

공격자가 악성 스크립트를 클라이언트에게 직접 전달하여 공격하는 방식이다.
특히 URL에 스크립트를 포함시켜 공격하는 경우가 대표적이며 URL이 길면 클라이언트가 의구심을 가질 수 있기 때문에 Shorten URL(URL 단축)을 이용해 짧은 URL로 만들어 공격하기도 한다.