모바일 웹(Mobile Web)과 모바일 앱(Mobile App) 개념 정의
여러분이 사용자라면 모바일 웹과 앱을 굳이 구분해서 인지해야 할 필요는 없어요! 하지만 UI/UX 디자이너 직무를 희망한다거나 웹 퍼블리셔를 지망하고자 하는 분들이라면 최소한의 구분은 할 수 있어야 실무에 있어 도움을 받을 수 있는데요.
반응형, 적응형, 모바일 웹, 네이티브 앱, 하이브리드 앱으로 구분되어지는 각각의 특징과 장,단점을 알아보도록 하겠습니다.
1. 반응형 웹 (Responsive Web)
| 구분 | 내용 |
| 특징 | 오직 하나의 html 소스 만으로 디바이스에 따라 레이아웃이 미디어쿼리 내의 CSS에 의해 변경됨 |
| 장점 | - 한 번의 작업으로 PC와 모바일을 커버함 - 도메인 구분 없는 동일한 URL을 가짐 (단일화된 도메인 주소는 더욱 확실한 아이덴티티 확립에 도움) - 간편한 유지보수와 모리터링이 가능 |
| 단점 | - PC와 모바일 특징을 모두 살려서 정교하게 만들기 어려움 - 많은 콘텐츠를 보여주기에 한계적인 레이아웃(카드 UI와 같이 정적인 디자인을 적용할 수밖에 없음) - 레아아웃 변경이 어려움 - 로딩 속도가 느려짐 |
* 카드 UI란, 콘텐츠가 있는 영역을 카드처럼 나열하여 보여주는 화면을 말함. 카드의 크기와 배치를 조정할 수 있기 때문에 반응형 웹을 제작할 때 자주 쓰임
[예시] CJ 문화재단
PC 풀스크린을 축소하자 해상도 분기점(Break Point)에 맞춰 메뉴 버튼(햄버거 버튼)이 보였다가 안보였다 하는 것을 볼수있습니다. 따라서, 반응형 웹은 주로 정적인 회사 소개 페이지나, 복잡하지 않고 비교적 적은 콘텐츠를 가지는 블로그 등을 포함할 때 제작됩니다.
*정적 페이지 : 이비 서버(데이터 공간)에 저장된 HTML, CSS, JavaScript 파일을 사용자의 요청에 따라 호출하는 페이지를 말함. 관리자가 서버에 있는 데이터 내용을 바꾸지 않는 한, 언제 접속해도 늘 똑같은 고정된 웹 페이지를 보게 됨.
2. 적응형 웹 (Adaptibve Web)
| 구분 | 내용 |
| 특징 | PC와 모바일에 개별적인 html로 제작되어 있는 형태 |
| 장점 | - 각 디바이스의 레이아웃 및 특성에 맞춰 최적화 제작 - 사용자 친화적 |
| 단점 | PC용, 모바일용(필요에 따라서 태블릿용까지도) 등 디바이스별 별도의 작업이 필요함 작업1 ) abc.com/index.html 작업2 ) abc.com/mobile/index.html |
[예시] 네이버
3. 모바일 웹 (Mobile Web)
| 구분 | 내용 |
| 특징 | - Mobile First, 하나의 html이 only 모바일에 맞춰 제작됨 - PC용 웹사이트를 모바일 스크린 크기에 맞춰 줄여 놓은 것 |
| 장점 | - 모바일에 최적화된 레이아웃 및 컨텐츠 구성을 제공 - 빠른 수정 및 업데이트 가능 |
| 단점 | - PC로 들어온 유저에 대해 최적화된 레이아웃 및 컨텐츠 구성을 제공하기 어려움 |
*Mobile First란, 웹 디자인을 할때, PC보다 모바일 기기를 먼저 생각해서 디자인하고 프로그래밍 하는 기법
[예시] 트립스토어
모바일과 PC 화면 구성이 모바일 최적화 레이아웃인 것을 확인할 수 있습니다.
4. 네이티브 앱(Native App)
| 구분 | 내용 |
| 특징 | 모바일 기기에 최적화된 네이티브 언어로 개발된 앱 구글 플레이 스토어나 앱 스토어에서 다운받으며 앱 개발자가 만듦 프로토타입 툴로 Sketch와 Adobe XD를 사용 (html, css 는 사용 x) |
| 장점 | - 앱 속도가 빠르고 보안에 최적화 - 모바일 디바이스에 최적화된 레이아웃을 제공 - 모바일뿐만 아니라 PC, 스마트 TV 등에서도 실행 가능 |
| 단점 | - 앱에 수정사항이 생기는 경우 앱 마켓의 심사를 거쳐야해서 업데이트가 번거로움 - 개발 난이도가 높고 특수한 개발 인력이 요구됨 - 모바일 OS별로 서비스를 만들어야 하며, 특정 플랫폼에 한정되어 실행 |
[예시] 안드로이드 구글 플레이 스토어 캡쳐
5. 모바일 웹 앱(Mobile Web App)
| 구분 | 내용 |
| 특징 | 네이티브 앱과 웹 앱의 요소를 결합한 형태(하이브리드 앱 이라고도 부름) |
| 장점 | - 안드로이드 및 iOS 앱 스토어에서 모두 실행가능 (사용자 층 넓히는데 도움) - 쉬운 확장성, 모든 플랫폼을 위한 새로운 기능을 동시에 출시 가능 - 네이티브 앱 보다 적은 개발 시간 - 빠른 수정 및 업데이트 |
| 단점 | - 네이티브 앱에 비해 상대적으로 느린 로딩 속도 - 디바이스 종류에 따른 레이아웃 최적화 필요 |
[예시] 인스타그램
인스타그램은 원래 모바일 사용자를 위한 네이티브 앱으로 구축되었지만 접근성과 확장성의 향상을 위해 하이브리드 앱으로 발전된 예시입니다.
Think,
모바일 앱과 웹이 구분된다는 사실을 알지 못했었는데 생각보다 많은 구분 기준으로 분류된다는 사실이 흥미로웠다. 더하여 각각의 장단점이 명확해서 무엇이 더 좋고 나쁘다를 말할 수 없다는 것을 알게되었다. 제공하고자 하는 서비스의 특징과 서비스 사용자의 편의를 고려해서 개발 방향을 결정해야 한다.
'Today I learned > 웹퍼블리셔' 카테고리의 다른 글
| html 블록요소 성질의 글자태그 (0) | 2024.07.21 |
|---|---|
| html 하이퍼링크 <a>태그와 href, target속성 (3) | 2024.07.20 |
| html 이미지(img) 태그와 속성 알아보기 (0) | 2024.07.19 |
| html 목록 태그 <ul>, <ol>, <dl> (2) | 2024.07.16 |
| 메모장으로 html 문서 만들기 (0) | 2024.07.11 |