안녕하세요, 컨시언스 파트너스의 풀스택 엔지니어 Xeno입니다.👋

이번 글에서는 헬스장 사용/관리 앱인 ‘본투짐’을 NextJS Fullstack으로 개발하고 Capacitor로 모바일 패키징하면서, 간단한 사용법과 제가 느낀 편했던 점, 아쉬웠던 점을 공유하려고 해요!

Capacitor란?

Capacitor는 Ionic 팀에서 개발한 크로스플랫폼 네이티브 런타임이에요. HTML, CSS, JavaScript를 활용해 iOS, Android, PWA를 만들 수 있게 해주는 도구죠. 쉽게 말해 “모바일용 Electron”이라고 생각하면 이해하기 쉬워요.

기존의 Cordova와 비슷한 철학을 가지고 있지만, Capacitor는 더 현대적인 개발 경험을 제공합니다. 어떤 웹 프레임워크든 사용할 수 있고 React, Vue, Angular, NextJS까지 모두 지원하는 게 특징이에요.

왜 Capacitor였을까?

본투짐 프로젝트에서 Capacitor를 선택한 이유는 단순했어요. 이미 NextJS로 풀스택 웹앱을 만들어둔 상태였는데, 별도의 모바일 앱을 처음부터 새로 만들 시간과 리소스가 부족했거든요. Capacitor는 기존 웹앱을 거의 그대로 네이티브 앱으로 변환할 수 있다는 게 가장 큰 장점이었어요.

React Native를 따로 배울 필요도 없고, 기존 코드를 재활용할 수 있다는 점에서 선택하게 되었어요!

NextJS와 Capacitor 통합

기본 설정

NextJS 프로젝트에 Capacitor를 통합하는 과정은 생각보다 간단했어요.

Next.js에서는 output: 'export'를 설정해야 해요. Capacitor로 패키징하려면 정적 파일로 빌드돼야 하거든요.

빌드 및 동기화

웹 앱을 모바일로 패키징하는 과정도 간단해요!

좋았던 점

1. 생산성 극대화

한 번 작성한 코드가 웹, iOS, Android에서 모두 동작한다는 점이 정말 편리했어요. 특히 UI/UX 컴포넌트를 재사용할 수 있어서 개발 속도가 크게 빨라졌어요.

2. 네이티브 기능 접근

카메라, 지오로케이션, 로컬 알림 같은 네이티브 기능을 자바스크립트로 바로 쓸 수 있었어요. 본투짐에서는 카메라 플러그인으로 프로필·리뷰 업로드 기능을 구현했는데 정말 간단했어요.

3. 라이브 리로드

개발 중에는 로컬 서버를 시뮬레이터에서 바로 접근할 수 있도록 설정해, 코드 수정 후 곧바로 확인할 수 있었어요. 웹 개발하듯이 앱을 만들 수 있다는 점이 정말 좋았어요.

아쉬웠던 점과 한계

1. 정적 빌드 vs 호스티드 앱

Capacitor는 두 가지 방식이 있어요.

• 정적 빌드 방식: 오프라인 동작 가능, 빠른 로딩 / SSR·API Routes 사용 불가

• 호스티드 앱 방식: 서버 기능 그대로 활용 가능 / 네트워크 의존성 있음

본투짐은 서버 기능이 중요했기 때문에 호스티드 앱을 선택했어요. API Routes를 그대로 쓸 수 있다는 장점은 있었지만, 네트워크 연결이 필수라는 점은 아쉬웠어요.

2. 이미지 최적화 문제

NextJS의 Image 컴포넌트 최적화를 못 써서 images: { unoptimized: true } 설정을 해야 했어요. 덕분에 웹 대비 성능은 조금 떨어졌어요.

3. 앱 크기와 성능

WebView 기반이다 보니 순수 네이티브 앱보다 앱 크기가 크고, 복잡한 애니메이션이나 대용량 데이터 처리 시 성능 차이가 났어요.

4. 플랫폼 특화 기능의 한계

iOS, Android 고유 UX 패턴이나 최신 기능들을 바로 쓰기 어려운 경우가 있어요. 플러그인이 없다면 직접 만들어야 한다는 점도 한계예요.

개선 방안과 팁

1. 서버 설계 고민

• 단순 정보 제공, 오프라인이 중요 → 정적 빌드

• 복잡한 비즈니스 로직, 실시간 데이터 중요 → 호스티드 앱

• 장기 확장성 고려 → 정적 빌드 + 별도 API 서버

본투짐처럼 서버 기능이 중요한 경우는 호스티드 앱 방식이 현실적이었어요.

2. 플랫폼별 조건부 렌더링

ios와 android를 구분해서 기능이나 UI를 다르게 적용할 수 있었어요.

3. 개발 워크플로우

개발할 때는 로컬 IP를 설정해 라이브 리로드로 확인하고, 배포할 때는 해당 설정을 제거하는 식으로 워크플로우를 가져갔어요. 개발 효율을 크게 높여줬어요.

마치며

Capacitor와 NextJS 조합은 빠르게 모바일 앱을 출시해야 하는 웹 개발팀에게는 충분히 매력적인 선택지예요. 하지만 성능, 이미지 최적화, 네트워크 의존성 같은 단점도 분명 존재해요.

본투짐 프로젝트에서는 빠른 개발과 배포가 우선순위였기 때문에 Capacitor 선택을 후회하지 않아요. 다만 다음에는 처음부터 모바일을 고려한 아키텍처를 더 신중하게 설계하려고 해요.🙂

여러분도 Capacitor 도입을 고민하고 계신다면, 프로젝트 요구사항·팀 역량·장기 확장 계획을 꼭 함께 검토해보시길 추천드려요!