Skip to main content

Command Palette

Search for a command to run...

새 프로젝트, PWA와 React Native 중 어떤 것을 선택해야 할까?

Published
3 min readView as Markdown
새 프로젝트, PWA와 React Native 중 어떤 것을 선택해야 할까?

🌈 새 프로젝트의 시작

여러 이유로 작심삼칩 프로젝트는 마무리 짓기로 하고 새 프로젝트를 시작하게 되었다. PM이 디자이너와 새 프로젝트에 관심 있는 개발 팀원들을 모아 기획에 대한 이야기를 들려주었다.

요약하면 새 프로젝트는 ‘정제성 기반 습관 설정 서비스’인데 사용자의 정체성을 기반으로 습관을 설정하고 점진적인 성장을 돕는것이라 한다. 아직 아이디어와 약간의 기획만 있는 정말 초기단계다. 이 단계에서 프론트와 상의할 부분이 생겨 짧은 회의를 하게 되었다.

🤔 PWA vs RN

프론트와 함께 논의 할 부분은 새 프로젝트의 시작을 PWA로 할 것인지 RN으로 할 것인지 정하는것이다.

기획을 보면 ‘알림’이 서비스의 핵심 중 하나다. 그래서 사용자에게 알림을 보낼 수 있는 앱 형태를 원하는데, 문제는 우리 팀 중에서 앱 개발을 할 수 있는 사람이 아무도 없다. 그래서 대안으로 PWA를 떠올렸는데 그럴거면 RN으로 시작하는게 낫지 않냐는 의견이 나와서 다함께 의논하기로 했다.

기획을 보면 나중에 앱 기반으로 다양한 기능을 추가하고 싶다고 해서 어차피 앱으로 만들긴 해야하긴 한다. 다만, 우리 팀에서는 RN을 해본 사람이 아무도 없기 때문에 당장 처음부터 RN으로 개발하기는 조금 무리가 있는 상황이다.

이 안건을 두고 여러가지 이야기가 오고갔는데 요약하면 다음과 같다.

RN으로 시작하자!

  • 어차피 나중에 앱으로 전환할거면 처음부터 RN으로 하는게 번거롭지 않다.
  • RN 배우는데 시간이 걸리겠지만 나중에 전환을 하지 않아도 된다.

PWA로 시작하자!

  • RN이 리액트 문법과 비슷하긴 하지만 그래도 다른 부분이 꽤 있다. 처음부터 익숙하지 않은 RN으로 개발을 하면 출시가 점점 늦어질 수도 있다.
  • PWA로 개발을 해서 빠르게 시장에 출시한 다음 유저의 반응을 보고 RN으로 전환해도 괜찮을 것이다.

💡 개인적인 생각

결론을 말하기에 앞서 이 안건에 대한 개인적인 생각을 (정리도 할 겸)풀어보겠다.

현재 상황

어떤 기술이나 방식을 도입할때는 현재 상황을 충분히 고려해야 한다. 정말 좋은 기술이나 방식이라도 현재 팀의 상황에는 적합하지 않을 수 있고, 무리하게 도입했다가 다들 지치면 팀 분위기에도 좋지 않기 때문이다.

아무튼 현재 프론트 팀원 중에서는 RN을 경험해 본 사람이 없고, 공부중인 사람도 없다.

RN 도입 시 기대하는 점

  • 안드로이드 및 iOS 앱 스토어에 올릴 수 있다.
  • 네이티브 앱 기능을 사용할 수 있다.
  • 다운로드 접근성이 PWA보다 좋다(’앱’을 떠올렸을때 익숙한 다운로드 방식이기 때문).
  • 앱 스토어에서의 광고 효과를 노릴 수 있다(구경/검색하다가 서비스를 마주칠 수 있음).

RN 도입 시 우려되는 점

  • 팀원 중 RN 경험이 있는 사람이 아무도 없다.
  • RN에 대한 지식이 없는 상황에서 바로 도입을 한다면 개발 기간이 많이 길어질 수 있다.

    • 개발 기간이 길어지면 의욕이 저하될 수 있고 방향성도 흐릿해질 수 있다.

    • 개발 기간이 얼마나 걸릴 지 예측하기 어렵다.

  • RN에 다들 익숙하지 않기 때문에 변경사항에 바로 대응하기 힘들다.

PWA 도입 시 기대하는 점

  • 네이티브 앱과 비슷한 경험을 줄 수 있다.
  • RN보다는 빠르게 개발할 수 있다.
  • 우리 팀이 생각하는 서비스의 형태를 빠르게 개발해 시장에 보여줄 수 있다.
  • 피드백도 초기 단계에서 받을 수 있을것이다.

PWA 도입 시 우려되는 점

  • 어차피 나중에 RN으로 개발할건데 번거로울 수 있다.
  • iOS 앱 스토어 업로드가 힘들다.
  • 사파리에서는 푸시 알림이 불안정하다.
  • 앱 다운로드 UX가 익숙하지 않다(특히 사파리).
  • 네이티브 기능을 100% 활용하지 못한다.

현 상황에서 서비스/프로젝트에 대한 생각

  • 현재는 아직 아이디어 & 약간의 기획만 있는 극 초기 단계이고, 시장(유저)의 반응을 확인하지 못했다. 앱 개발 다 해놨는데 아무도 안쓸 수 있다.
  • 유저가 서비스의 핵심 가치 자체에는 공감해도 유저와 우리 팀이 생각하는 서비스의 형태가 다를 수 있다.

정리

이러한 생각을 정리해보면, 아직 화면도 없고 기획만 있는 극극극 초기니까 우리가 생각하는 형태의 서비스를 PWA로 먼저 보여준 다음 유저의 피드백을 받고 발전시키는 방향이 좋을 것 같다. 어느정도 안정적인 서비스의 형태가 나오면 그때 앱 개발을 해도 될 것 같다는게 지금의 생각이다.

👍 결론

이런저런 이야기를 나누다보니 프론트 팀의 의견이 한 방향으로 모였다. 그리고 PWA 개발을 경험하고 싶다는 어떤 팀원의 의견에도 다들 동의해서 결국 PWA로 결정되었다.

이전 프로젝트에서 PWA를 도입했으나 다양한 기능을 구현하지 못해서 조금 아쉬움이 남았는데 새 프로젝트에서는 푸시 알림, 다운로드 버튼 등등 다양한 기능을 성공적으로 추가했으면 좋겠다.

More from this blog

공통 Header 컴포넌트를 만드는 여정

여러 곳에서 사용하고 있는 Header 디자인 디자인 시안을 보다가 비슷하게 생긴 Header 디자인이 여러 곳에서 등장하는 것을 발견했다. 레이아웃은 비슷하고 내부 요소만 조금씩 다른 컴포넌트다. 내 담당 페이지에도 있어서 만들어야 하는데, 어차피 만드는 거 공통 컴포넌트로 제작하면 좋을 것 같다. 만약 Header 컴포넌트를 따로 만들게 되면 아래와 같은 문제가 있다. 매번 번거로운 작업을 해야 한다. Header 디자인은 약 20곳에서...

Apr 19, 202411 min read
공통 Header 컴포넌트를 만드는 여정

프로젝트 초기 세팅하기

지난 번에 프로젝트 초기 세팅을 했는데 vite + yarn berry를 사용해서 하는건 처음 해봤다. 정리도 할 겸 다시 처음부터 차근차근 세팅을 해보자. 01. Vite로 프로젝트 만들기 Vite 공식문서를 보면 템플릿으로 프로젝트를 만들 수 있다고 한다. TypeSciprt, React를 기반으로 만들거라 react-ts 템플릿을 사용했다. yarn create vite . --template react-ts 터미널에 yarn -v 명령...

Jan 14, 20242 min read
프로젝트 초기 세팅하기
H

heeee

11 posts