모바일 웹(Mobile Web) & 모바일 앱(App) 개념 이해하기

안녕하세요. 코딩웍스입니다.

반응형, 적응형, 모바일 웹, 네이티브 앱, 하이브리드 앱.. 구분을 일반인들이 할 필요는 없습니다. 하지만 퍼블리셔는 최소한의 구분은 할 수 있어야 면접과 실무에서 도움이 됩니다. 특히 제작자 곧, 퍼블리셔라면 모바일 웹(Mobile Web) & 모바일 앱(App)에 대한 개념 이해하는 것이 중요합니다.

네이티브 앱(Native App)

• 특징 : 스토어에서 다운, 앱 개발자가 만듦, 프로토타입 툴 Sketch & Adobe XD (html, css X)

• 장점 : 빠르다, 보안이 좋다, 모바일 디바이스에 최적화된 레이아웃을 제공

• 단점 : 업데이트가 번거롭다, 특수한 개발 인력이 요구된다.

모바일 웹(Mobile Web) ← 퍼블리셔 포트폴리오

• 특징 : Mobile First, 하나의 html이 Only 모바일에 맞춰 제작됨.

• 장점 : 모바일에 최적화된 레이아웃 및 켄텐츠 구성을 제공, 빠른 수정 및 업데이트

• 단점 : PC로 들어온 유저에 대해 최적화된 레이아웃 및 켄텐츠 구성을 제공하기 어렵다.

모바일 웹 앱(Mobile Web App)

• 특징 : Web과 App의 중간적인 특징을 가짐(하이브리드 앱.. 이라고도 부름)

• 장점 : 모바일에 최적화된 레이아웃 및 켄텐츠 구성을 제공, 빠른 수정 및 업데이트

• 단점 : 네이티브 앱에 비해 상대적으로 느린 로딩 속도, 디바이스 종류에 따른 레이아웃 최적화

• 하이브리드 앱(hybrid App) 이라고 부름.

반응형 웹(Responsive Web) ← 퍼블리셔 포트폴리오

• 특징 : 하나의 html이 디바이스에 따라 레이아웃이 미디어쿼리 내의 CSS에 의해 변경됨.

• 장점 : 한번의 작업으로 PC와 모바일을 커버함.

• 단점 : PC와 모바일의 특징을 모두 살려서 정교하게 만들기 어려움.

적응형 웹(Adaptive Web)

• 특징 : PC와 모바일에 개별적인 html로 제작되어 있음.

• 장점 : 각 디바이스의 레이아웃 및 특성에 맞춰 최적화해서 제작됨.

• 단점 : 항상 2번 작업해야 함.

• 예시1 : www.abc.com/index.html 와 www.abc.com/mobile/index.html

• 예시2 : www.abc.com 과 m.abc.com

모바일 웹 앱(하이브리드 앱)을 만들기 위해서 퍼블리셔가 일단 모바일 웹이 제작되어야 하고, 제작된 모바일 웹을 앱 스토어, 플레이스토어에 등록하기 위해 겉을 감싸는 앱(App) 작업을 앱 개발자가 하게 됩니다. 곧, 유지보수 업데이트도 퍼블리셔가 하게 됩니다. 반면에 네이티브 앱은 완전히 앱 개발자가 모두 만들게 되고 유지보수 업데이트도 앱 개발자가 하게 됩니다.

퍼블리셔 취업과 이직을 위해서는 모바일 웹(Mobile Web)과 반응형 웹(Responsive Web) 작업물을 잘 만들어야 경쟁력이 있습니다.