프론트엔드(앱)

모바일 앱 기본 지식

• 거의 모든 스마트폰의 OS는 android와 ios로 나뉘고, OS가 다르기 때문에 기본적으로 앱을 개발하는 방식이 다름
  • android는 java 혹은 kotlin 이라는 프로그래밍 언어로 개발
  • ios는 swift 혹은 objective c 프로그래밍 언어로 개발

• 웹은 HTML, CSS 코드로 화면을 그리는 반면, 모바일 앱을 개발할 때는 GUI 환경에서 화면을 짤 수 있음(프로그래밍 언어로도 화면을 구성할 수 있음)

• 스토어에 올라가기 전에 정상적인 앱인지 심사를 거치게 됨
• 심사는 사람이 직접 하게 되며 심사를 통과하고 나면 정상적으로 플레이스토어에 올릴 수 있게 됨

• 보통 앱 서비스를 내기 위해선 안드로이드는 구글 플레이스토어 , ios는 앱 스토어에 심사를 맡기게 됨
  • 구글 플레이스토어는 심사 시간이 빠르고 엄격하지 않음
  • ios 앱스토어는 심사 규격도 엄격하고 한 번 리뷰를 해주는데도 2~3일이 걸림
• 만들어진 앱은 공식적인 스토어(구글 플레이스토어, 애플 앱스토어 등)에서만 다운받을 수 있음
  • 애플은 ios 앱을 오로지 앱 스토어에서만 다운받을 수 있게 독점
  • 안드로이드는 오픈소스 OS로서 다른 스토어들에서도 앱을 다운받을 수 있음

 

IT 서비스에서 앱이 동작하는 과정

• 앱은 웹과 다르게 이미 모든 페이지와 코드들이 앱 내부에 들어가있으므로 웹처럼 웹서버에서 페이지와 코드들을 계속해서 다운받을 필요 x
• 앱에서 페이지가 로드된 이후 로그인, 찜하기, 프로필 정보 요청 등은 웹과 마찬가지로 API 서버가 필요
  • 앱과 API 서버의 통신과정을 자세하게 알고 싶을때, 스마트폰의 네트워크를 끄면 데이터를 받지 못한 상태의 앱을 볼 수 있음

• 위 상황은 API 서버에서 데이터를 받기 전 화면

1. 화면이 로드되면서 API 서버에게 마이페이지 관련 정보를 달라고 요청, 이 때 앱에 미리 저장되어 있는 로그인 관련된 데이터를 같이 담아서 요청
2. API 서버는 마이페이지 정보 요청을 확인하고, 요청에 해당하는 데이터를 응답으로 넘겨줌
3. 마이페이지 데이터를 받은 앱은 이를 바탕으로 코드가 실행되고, 결과적으로 완성된 화면을 보게 됨

• 보통 웹과 앱이 같은 서비스를 목적으로 만들어졌다면 하나의 API 서버와 통신해도 됨
  • 예를 들면 웹에서 찜하기 요청을 할 때 API와 앱에서 찜하기 요청을 할 때 API는 동일하다는 의미
  • '찜을 한다', '로그인을 한다' 는 동작은 동일하기 때문
  • 클라이언트(웹, 앱)은 API 서버가 무슨 일을 하는지 모르고 단순히 요청을 통해 결과를 받아오는 작업을 할 뿐임

 

웹 뷰

• 웹뷰는 앱에서 웹을 보여줄 수 있는 기능 (안드로이드, ios 모두 가능)

• 웹뷰를 사용하면 앱에서 웹을 띄울 수 있고, 웹뷰를 사용해 웹 서버와 계속 통신하여 계속 페이지를 변경할 수 있음
  • 웹은 기본적으로 웹서버에서 계속 다운을 받아서 사용할 수 있는 반면, 앱은 앱스토어에서 따로 업데이트 하지 않는 이상 내부 앱의 코드는 변경되지 않음
  • 특정 페이지에 웹뷰를 이용하게 되면 그 페이지는 웹 서버와 계속 통신 함
  • 웹 서버에서 웹을 업데이트한다면 변경된 웹을 앱에서도 사용할 수 있게 됨
  • 앱에서 웹뷰를 잘 활용한다면 정보를 더 효율적으로 보여줄 수 있게 됨
• 같은 서비스의 웹을 앱에서 웹뷰로 보여주는 경우 뿐만 아니라 앱에서 특정 웹을 참고해야할 때도 웹뷰를 많이 사용함(ex. 네이버 지도 기능, 구글 지도 기능 등)
• 스타트업에서는 앱에서 웹뷰를 많이 이용함
  • 웹 하나를 개발해두면 브라우저에서도 이용이 가능하고, 앱에서도 웹뷰를 통해 보여줄 수 있기 때문
  • 다만 웹이 앱에 비해 렌더링(화면을 보여주는) 속도가 느리기 때문에 유저가 불편함을 겪을 수 있다는 문제 존재

 

네이티브 & 하이브리드 & 크로스 플랫폼 앱 & 웹 앱 용어 정리

네이티브

• 네이티브 앱은 순수하게 Android, ios로 개발된 앱으로 개발자가 각각 프로그래밍 언어로 개발을 진행해야 함
  • 장점: 네이티브는 아래에 나오는 방식들(하이브리드, 크로스 플랫폼) 중 가장 성능이 좋음
  • 단점: 각각 다른 플랫폼이므로 따로 개발을 해야해 안드로이드, ios 개발자를 각각 구해야해서 리소스가 많이 듬,빠른 실행을 추구하는 스타트업에서는 선호하진 않음

 

웹 앱

• 웹앱은 실제로 모바일 앱이 아닌 웹으로, 앱 스토어에 올라가는 게 아니라 브라우저에서 접근할 수 있음
  • 즉, 그냥 웹인데 마치 앱처럼 꾸며놓은 웹
  • android, ios 관련 코드가 들어가는 게 아니라 HTML, CSS, Javascript(웹 개발 언어)가 사용됨

 

하이브리드 앱

• 하이브리드 앱은 네이티브 앱에 웹이 적용된 앱으로 쉽게 이야기하면 네이티브앱에 웹뷰 기술을 적용한 것
• 개발자들이 정의한 하이브리드 앱은 크게 2가지로 나뉨
• 1. 네이티브 앱을 개발하면서 웹뷰를 직점 심어놓은 형태
  • 네이티브 앱에 웹뷰를 사용해서 네이티브 + 웹의 장점을 골고루 살려서 만들어놓은 앱

• 2. 웹 기술(HTML, CSS, Javascript)를 기반으로 코딩을 하면 앱으로 만들어주는 기술
  • 웹을 개발할 줄 알면 앱을 만들어주는 기술로 아이오닉 프레임워크가 대표적
  • 아이오닉은 HTML, CSS, Javascript로 코드를 작성하면 네이티브 앱을 기반으로 웹뷰까지 자동으로 만듬

• ionic 프레임워크는 HTML,CSS,Javascript를 코딩하면 웹, 모바일 앱, 데스크탑 앱까지 한번에 만들어줌
  • 많은 앱을 만들어주는게 좋은 성능의 앱을 만들어주는 것과는 별개임
  • IT 기업은 웹, 모바일 앱을 한번에 만들 수 있기 때문에 초창기에 하이브리드 앱을 선호하지만 어느정도 규모가 커지면 하이브리드 앱에서 네이티브 앱으로 새롭게 넘어가는 추세
• 하이브리드 앱은 부르는 사람 마음
  • 네이티브 앱에다가 웹뷰를 조금 적용해도 하이브리드 앱이라고 할 수 있음
  • 앱의 대부분이 웹뷰로 구성되어 있어도 하이브리드 앱이라고 할 수 있음

 

크로스 플랫폼

• 크로스 플랫폼은 하나의 코드를 android, ios 네이티브 코드로 변환시켜주는 기술
  • 하이브리드 앱은 기본적으로 HTML, CSS, Javascript로 만들어진 웹을 웹뷰를 통해 사용하지만 크로스 플랫폼은 사용되는 언어가 네이티브 코드(android, ios 코드)로 변환되므로 웹과는 아예 무관한 기술
• 대표적인 크로스 플랫폼 프레임워크로 React Native, Flutter가 있음
  • React Native는 하이브리드 앱과 유사하게 HTML, CSS, Javascript로 코딩함(React 프레임워크 기반), 하지만 이 코드는 네이티브 코드로 바뀌게 되므로 하이브리드와는 다름
  • Flutter는 Dart라는 언어로 개발됨
• 크로스 플랫폼 앱은 결과적으로 네이티브 앱과 동일하게 만들어지므로 성능이 네이티브 앱과 큰 차이가 없음
  • 다만 크로스 플랫폼의 경우 Android, Ios에 대해 어느정도 기본적인 지식을 가지고 있어야 함

• 대표적인 크로스플랫폼 앱으로 인스타그램, 페이스북, 테슬라 등이 있음
• 크로스 플랫폼 시장에서는 React Native가 독보적
  • 웹 프레임워크인 React를 기반으로 개발이 가능하기 때문에 모바일 개발에 진입장벽이 상대적으로 낮은 편

 

웹과 앱의 차이

변경사항이 바로 반영되는가

• 웹: 브라우저에서 웹을 이용할 때는 계속해서 웹서버와 통신하면서 소스코드를 다운받으므로 프론트엔드 개발자가 웹을 업데이트한 후 웹서버에 적용시킨다면 웹을 이용하는 사람은 바로 업데이트 된 웹을 받아볼 수 있음
• 앱: 모바일 개발자가 앱을 업데이트한 후 앱 스토어에 올리기 위해서는 심사를 거치며, 심사가 통과하기 까지는 어느정도 시간이 소요됨

• 심사가 통과됐다고 하더라도 앱을 업데이트 하는건 사용자의 몫이므로 사용자가 반드시 최신 버전으로 업데이트해주지는 않음, 따라서 버전별로 사용자를 대응해줘야 함

• 앱 안에서 앱 업데이트를 유도하거나 강제할 수도 있음
• 하이브리드 앱에서는 웹뷰이기 때문에 빠르게 반영사항을 적용할 수 있지만 네이티브 앱, 크로스 플랫폼 앱에서는 변경을 적용하는데 시간이 걸림
  • 크로스 플랫폼 프레임워크인 React native에는 실시간으로 코드를 업데이트할 수 있는 Code Push 라는 기술이 있으므로 모든 코드를 다 업데이트할 수 있는 건 아니지만 좋은 기능임

 

스마트폰의 기능들을 얼마나 사용할 수 있는가

• 웹: 웹은 기본적으로 브라우저에서 동작하므로 브라우저의 환경에 종속적이여서 브라우저에서 제공해주는 기술만 사용할 수 있음
  • 파일 시스템 접근(스마트폰의 앨범, 음악 파일), GPS 같은 필수적인 기능들은 사용할 수 있지만 푸시 알림, 접근 권한 설정, 스마트폰의 센서 등 제한이 생김
• 앱: 앱은 기본적으로 모바일 OS 환경에서 동작되므로 스마트폰의 기능들을 전부 이용할 수 있음
  • 푸시 알림, 스마트폰 센서 등 전부 이용이 가능

• 앱과 앱끼리 서로 상호작용이 가능, 대표적으로 공유하기 기능
• 웹에서도 푸시 알림을 가능하게 하는 방법이 존재
  • PWA(Progressive Web App): 웹을 앱처럼 사용할 수 있게 도와주는 기술

• 앱은 웹과 다르게 스마트폰의 많은 기능들을 이용할 수 있어 앱에서 사용자의 정보를 몰래 접근해서 가져가는 보안 문제가 많이 발생하므로 안드로이드, ios에 대해서는 중요한 기능들(사진 앨범, GPS, 카메라 등)에 대해서는 사용자가 권한을 설정할 수 있게 강제하고 있는 추세
• 실제로 앱을 개발할 때 사용자가 어떤 권한(항상 허용, 한 번 허용, 거부)을 가지고 있냐에 따라 다르게 대응해줘야 함

 

딥링크

• 딥링크: 특정 페이지로 도달할 수 있는 링크를 뜻합니다.
  • 웹 혹은 앱을 사용하다가 링크를 클릭하면 앱이 실행되는 경험
•  모바일 딥링크: 앱의 특정 페이지로 도달하는 링크
  • 실제로 앱은 웹처럼 페이지의 주소가 따로 존재하지 않지만 딥링크를 이용하면 사용자가 보유하고 있는 앱으로 연결할 수 있음(앱이 없다면 앱 스토어로 연결시킬 수 있음)

 

Reference

https://www.inflearn.com/course/it-%EA%B0%9C%EB%B0%9C%EC%A7%80%EC%8B%9D#

IT 회사에서 비개발자가 살아남기 위한 모든 개발 지식 A to Z - 인프런 | 강의

https://www.grabbing.me/IT-A-to-Z-By-1e1fbc981b7c4c03ac44943085ac8304

[IT 개발자와 일할 때 필요한 모든 개발지식] A to Z 자료 모음집 By 그랩