brunch

매거진 UX UI 디자인

라이킷 24 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Grace Aug 10. 2020

네이티브? 웹앱? 그게 뭔데?

스타트업 iOS UX/UI 디자인기 1

스타트업이 처음 창업할 때 바닥에서 시작한 창업멤버들은 일손이 항상 부족하기 때문에 거의 필요한 걸 모두 해야 하는 존재입니다. 저도 그래서 영상도 하고 그래픽 작업도 하고 기획도 하고 일러스트도 그리고 회의 때 팀원들과 논쟁도 펼치며 평화로운 나날(?)을 보내고 있습니다.

저희가 만든 웹 중 하나인 모두의 방탈출은 방탈출 마니아를 타깃으로 하는 웹 서비스입니다. 저희 회사의 유능한 개발자 덕에 완벽한 반응형 웹이고 서버도 안전하게 잘 돌아가는 서비스입니다.

'모두의 방탈출'이라는 서비스는 수 많은 방탈출 후기를 확인할 수 있고 내 주변에 있는 평 좋은 방탈출을 추천해줍니다. 또한 내가 방탈출을 언제 다녀왔는지, 감상이 어떠한지 적는 방탈출 일기를 남길 수 있습니다.

모두의 방탈출이라는 서비스는 내 주변 방탈출을 추천하고, 후기를 확인할 수 있다는 점에서 확실히 웹보다는 앱이 취지에 맞습니다. 하지만 저희 팀의 개발 편의상 웹으로 서비스를 제공하고 있었습니다.

하지만 어느 날 저희 서비스를 이용해주시는 유저분께서 저희 팀에 따로 연락을 주셨습니다.

웹이 아니라 밖에서 필요할 때 바로바로 찾아보는
애플리케이션이 나왔으면 좋겠어요!

웹보다 앱 서비스가 더 취지에 맞겠다는 생각을 가졌던 차에 이 유저 보이스에 탄력을 받아 우리는 '모두의 방탈출'을 앱 서비스로 내기로 합니다.

저희 서비스가 앱이 되기 가장 빠른 방법은 기존의 웹을 앱으로 감싼 하이브리드 앱을 만드는 것입니다. 개발자 팀원님은 뚝딱뚝딱 만들어서 구글 플레이 스토어에 앱을 업로드 합니다. 같은 방식으로 애플 앱 스토어에도 올립니다.

뚝딱~! (어… 이 도깨비 아는사람 저랑 같은 세대)

그런데 잘 굴러가고 있다고 생각했던 서비스에 갑자기 앱 디자인이 필요하다고 저를 불렀습니다. 처음부터 만들어야 한대요. 왜냐면 우리 애플사께서 앱을 내줄 수 없다고 하셨기 때문이죠 .

안드로이드는 벌써 출시를 하고 500다운로드가 넘어가는데 왜 애플사에서 우리 앱을 내줄 수가 없다는 거죠?

애플에서 온 반려 사유 메일을 봅시다.

자세히 볼 필요는 없어요.

저희는 템플릿을 사용한 웹을 앱으로 만드는 방식으로 스토어에 업로드를 하려고 했지만 애플사에서는 그렇게 해서는 앱을 출시 해 줄 수 없다고 합니다. 상업적인 템플릿을 사용한 앱을 출시해 줄 수 없다고 하네요.

마침 회사에 스위프트라는 언어를 사용할 수 있는 개발자가 있으므로 그분과 함께 앱 디자인을 처음부터 하여, iOS 네이티브로 앱을 만들어보도록 했습니다. 그리고 제가 처음 iOS 앱 프로젝트를 진행하면서 공부한 내용을 여기에 공유해보고자 합니다.

그럼 이미 낸 안드로이드 앱과 새로 만드는 아이폰의 앱이 무슨 차이죠?...네이티브 앱은 뭔가요...? 하시는 분들을 위해 간단한 설명으로 반응형 웹과 하이브리드 앱, 네이티브 앱을 비교해보겠습니다.

1. 기본은 웹이지만 최대한 앱의 형식을 맞추려고 하는 반응형 웹

반응형 웹페이지인 네이버의 모바일 뷰

반응형 웹은 웹 기술로 네이티브 앱을 최대한 흉내냈다고 생각하면 됩니다. 모바일 브라우저에서 실행되기 때문에 웹처럼 실시간 업데이트가 가능하다는 장점과 자바스크립트로 역동적으로 구동시킬 수 있다는 장점이 있죠. 하지만 카메라 등 하드웨어 기능을 제어하기 힘듭니다. URL은 나중에 안보이게 하는 방법이 있지만 브라우저를 이용하니까 상단에 URL이 뜹니다.

2. 웹과 네이티브앱이 합쳐진 하이브리드 앱

네이티브 앱이 먼저 실행되어서 웹 기술로 만들어진 것을 불러오는 형식입니다. 앱을 구동시키면 정해진 웹 페이지를 불러오는 방식이죠. 껍데기만 앱이고 진짜 알맹이들은 웹으로 만들어졌기 때문에 실시간 업데이트도 가능하며 웹 기술로 비교적 쉽고 빠르게 만들 수 있습니다. 그에 더해 스토어 등록이나 몇몇 하드웨어 기능도 사용할 수 있습니다.

페이지 디자인, 레이아웃 등의 변경이 잦은 쇼핑몰에서 카테고리나 메인 페이지 등의 디자인 변화가 있을 때마다 앱이 업데이트가 필요하다고 하면 시간도 많이 들고 사용자도 불편하겠죠… 하지만 하이브리드앱을 사용할 경우, 안에서 보이는 페이지는 기존의 모바일 웹페이지와 동일합니다. 웹페이지의 변경이 바로바로 반영 가능합니다. 모바일 페이지와 앱을 이중으로 관리할 필요가 없어서 웹 서비스와 앱 서비스 모두 제공하는 업체에서 선호합니다.

저희가 낸 안드로이드 앱은 이 하이브리드 앱의 형식입니다. 웹앱을 앱으로 감싼 하이브리드 앱을 만들어 출시했죠.

3. 폰에 설치해서 쓰는 네이티브 앱

네이티브 앱은 성능과 기능 면으로 압도적입니다. 여러분이 일반적으로 생각하는 앱은 거의 네이티브 앱이라고 해도 과언이 아니죠. 앱 스토어를 통해서 다운로드를 하고 핸드폰 기기에 저장된 고유 정보를 이용할 수 있으며 카메라 등의 하드웨어도 제어 가능합니다. 심지어 인터넷이 연결이 안 되어 있어도 사용할 수 있다는 장점도 있습니다. 당연히 네이티브앱이 아닌 경우는 오프라인 상태에서는 아무 동작을 하지 못하겠죠

하지만 다른 2개의 방식과 비교해서 높은 수준의 기술력이 필요합니다. 안드로이드와 iOS 별로 따로 개발해야 하므로 인력도 많이들고 작업 시간과 기간이 오래 걸립니다. 개발비용도 같이 상승합니다.

무조건 네이티브 앱이 좋다고 말을 할 수는 없습니다. 실제로 잘 만든 하이브리드 앱은 네이티브 앱과 구별이 안가는 경우도 있습니다. 서비스에 따라 가장 적합한 개발 형식을 이용하는게 좋습니다.

keyword