Workly 기획의도 + 기술스택 선정

기획의도

교대 근무를 하고 계신 어머니께서 매번 달라지는 일정을 기억하기 어려워 일정 관리를 도와줄 어플리케이션이 있으면 좋겠다는 말씀을 하셨다. 만약에 이런 어플이 만들어진다면 주변 근로자 분들께서도 유용하게 사용하실 것 같다는 말도 해주셨다.

지금까지는 일일이 달력에 주간 - 주간 - 야간 - 야간 - 휴일 과 같은 식으로 표시를 하고 계신데 이런 수고를 할 필요 없이 근무 시작 일자와 교대 패턴 등의 정보만 입력해 주면 달력에 교대 스케줄을 표시해 주는 어플을 만들어드리고 싶었다. 

 

 

기술 스택

여태까지 나는 웹 기반의 어플리케이션만을 만들어 왔다. 

하지만 이번에는 어머니 나이대의 유저를 대상으로 하다보니, 특정 웹 사이트에 매번 방문하는 것보다는 간단하게 휴대폰에 설치해서 어플리케이션을 사용할 수 있도록 하는 것이 좋겠다는 생각이 들었다. 따라서 모바일 어플리케이션을 만들기로 결정!

거기에 더불어, 이전부터 React Native를 사용하고 싶다고 생각했었기에 이번 기회에 React Native를 이용해 어플을 만들어보기로 했다. 

따라서 내가 사용할 기술 스택은 다음과 같다.

 

React Native

• 교대근무 다이어리 앱의 핵심 프레임워크
• 한 번의 코드 작성으로 Android와 iOS 모두 지원할 수 있어, 별도의 플랫폼별 개발이 필요 없다.
• React 문법을 그대로 활용할 수 있다! → 러닝커브가 작다✨
• UI를 컴포넌트 단위로 관리할 수 있어 유지보수가 쉽고, 추후 기능 추가에도 유연하게 대응할 수 있다.

Expo

• React Native 환경 설정 과정을 단순화해주는 프레임워크
• 복잡한 네이티브 설정 없이 바로 앱을 실행할 수 있고, 빌드와 배포 또한 EAS (Expo Application Services)를 통해 빠르게 진행할 수 있다.
• OTA(Over The Air) 업데이트 기능을 제공해, 앱스토어 심사 과정 없이 코드 수정만으로도 즉시 업데이트할 수 있다는 점이 큰 장점이다. → 이전에 회사에 다닐 때, 앱 내부 오류로 빠른 에러 수정이 필요함에도 불구하고 어플 심사 과정이 오래 걸려 비상상황이 발생했던 적이 있다... OTA를 사용하면 그런 일이 발생할 가능성은 적을 것이다
• 초기 학습 부담이 적고, 빠른 MVP 개발에 최적화되어 있어 프로젝트 초기 단계에 유용하다.
• Expo 쓰지 마세요 ...(Expo의 단점) 이 블로그를 보고 Expo를 사용해야 하는지 고민을 했지만, 빠른 기능 구현이 우선이라고 생각했고 무엇보다 OTA라는 커다란 장점 탓에 우선 Expo로 개발을 해보고, 추후 basic으로 갈아타던가 해야겠다는 생각을 했다.

Expo Router

• Next.js와 유사한 파일 기반 라우팅을 제공해 페이지 구조를 직관적으로 관리할 수 있다.
• Stack, Tab, Drawer 네비게이션을 쉽게 구성할 수 있고, Deep Linking 기능을 활용하면 푸시 알림 클릭 시 특정 화면으로 바로 이동하는 UX를 구현할 수 있다.
• 라우팅과 네비게이션이 통합되어 있어 유지보수가 편하고, 프로젝트 규모가 커져도 구조적인 일관성을 유지할 수 있다.

Zustand + React Query : 전역 상태와 서버 상태를 각각 분리해 효율적으로 관리하기 위해 두 라이브러리를 함께 사용한다.

• Zustand는 가볍고 직관적인 상태관리 라이브러리로, Redux보다 코드량이 적고 사용법이 단순하다. 로그인 정보, 사용자 설정 등 클라이언트 전역 상태를 관리하기에 적합하다.
• React Query는 서버 데이터를 캐싱하고 자동으로 갱신해주기 때문에, 근무 일정이나 다이어리 로그처럼 서버와 연동되는 데이터를 효율적으로 관리할 수 있다.
• 두 라이브러리를 조합하면 앱의 성능과 유지보수성을 모두 확보할 수 있다.

Axios

• API 통신을 위한 HTTP 클라이언트
• 요청과 응답에 인터셉터를 설정해 JWT 토큰 인증을 중앙에서 관리할 수 있다.
• React, Next.js 등 다른 프로젝트에서도 폭넓게 사용되는 만큼 호환성이 좋고, 나중에 웹 버전으로 확장할 때도 같은 구조를 재활용할 수 있다.
• 에러 처리와 응답 타입 관리가 용이해 코드의 일관성을 유지하기 쉽다.

NativeWind

• React Native에서 Tailwind CSS 문법을 그대로 사용할 수 있게 해주는 라이브러리
• className 기반의 선언형 스타일링이 가능하며, 다크모드나 반응형 디자인도 간단히 적용할 수 있다.
• 기존 CSS 스타일시트보다 개발 속도가 빠르고, UI 변경 시 코드 가독성이 높아 유지보수가 편하다.
• 디자인 시스템을 빠르게 구축할 수 있다는 점에서 초기 개발에 큰 도움이 된다.

JWT + Secure Storage

• 로그인 세션을 안정적으로 유지하기 위해 JWT 기반 인증을 적용한다.
  • 참고: JWT vs Cookie에 관해서는 면접에서도 질문 받은 적이 있다.
• 이전 프로젝트에서처럼 Access Token과 Refresh Token을 함께 사용해 자동 로그인 및 토큰 재발급을 구현할 예정이다.
• 민감한 사용자 정보는 `expo-secure-store` 또는 `react-native-encrypted-storage`를 사용해 암호화된 형태로 안전하게 보관한다.
  • expo-secure-store: A library that provides a way to encrypt and securely store key-value pairs locally on the device. (expo에서 제공)
  • react-native-encrypted-storage: React Native wrapper around SharedPreferences and Keychain to provide a secure alternative to Async Storage. (npm 라이브러리)
• 이 방식을 통해 보안성과 사용자 경험(UX)을 모두 확보할 수 있다.

Expo Notifications

• 교대근무 앱에서 중요한 기능 중 하나는 알림이다.
• 출근 시간, 교대 시간, 휴식 알림 등을 사용자 맞춤형으로 제공하기 위해 `expo-notifications`를 사용한다.
• 로컬 알림뿐 아니라, 추후 Firebase Cloud Messaging과 연동하여 서버측에서 유저에 푸시 알림을 보내는 기능으로 확장해도 좋을 것 같다.

EAS (Expo Application Services)

• 앱 빌드와 배포를 자동화하기 위한 Expo의 공식 서비스
• `eas build` 명령어를 사용하여 Android용 APK를 즉시 생성해 Play Store에 배포할 수 있으며, `eas update`를 통해 코드만 수정해도 앱스토어 심사 없이 즉시 업데이트가 가능하다.
• CI/CD 파이프라인을 별도로 구성하지 않아도 되어 개인 개발자에게 특히 효율적이다!

 

위 기술 스택을 선택한 이유는 빠르게 완성도 있는 앱을 개발하기 위해서이다.
Expo를 기반으로 하면 Play Store 배포가 간단하고, React Native를 통해 iOS 확장도 가능하다. 또한 Zustand와 React Query로 상태를 명확히 분리함으로써 데이터 흐름이 단순해지고, NativeWind를 통해 일관된 디자인 시스템을 구축할 수 있다.
이를 기반으로 교대근무자들이 근무 일정을 효율적으로 관리하고 알림을 통해 루틴을 자동화할 수 있는 앱을 개발할 예정이다.