나는 작년 6월부터 데이터 검색 용도의 웹사이트를 만드는 일에 착수하여 코파일럿과 클로드, 퍼플렉시티, 그록으로부터 도움을 받고 1년 만에 프로그레시브 웹 앱과 안드로이드 앱을 완성했다. 처음에는 Vue3, PWA에 관한 책을 몇 권 정도 읽었기 때문에 웹앱을 완성하는 것이 목표였는데 firebase 서비스를 사용해본 후 서버 측 기능을 추가한 안드로이드 앱을 구현하는 것으로 목표를 상향 조정했다.

컴퓨터 프로그래밍에 대해서는 모르지만 하이브리드 앱 서비스를 제공하고 싶은 사람이 있다면, Vue.js, Firebase를 활용하는 방법을 알려줄테니 도움이 되길 바란다.

작업 환경 구축

VSC, node 설치: 파일 다운로드 후 기본 옵션 그대로 설치 진행

새로운 앱 생성과 템플릿 다운로드: 명령 프롬프트> npm create vue@latest 명령어 입력: 프로젝트 설정(이름 입력, Typescript, JSX, Router, Pinia, Vitest, ESLint, Prettier에 Yes 선택) 후 실행할 명령 나타나면 그대로 순서대로 입력

모든 종속성의 설치 및 서버의 실행: 명령 프롬프트> 프로젝트 폴더로 이동(cd 프로젝트 폴더 명 입력) 후 npm install, npm run build, npm run preview 명령어 입력으로 프로젝트 서버 내 구현 확인

VSC에 깃허브 리포지토리 연결: 깃허브 홈페이지에 가입한 후 새 리포지토리를 생성. VSC 프로그램의 repository에서 git을 설치. 공란에 커밋 이름을 입력하고 commit을 누름. output> terminal에서 이메일, 닉네임 작성하고 깃허브의 origin 작성

Firebase 가입과 설정: Firebase 회원가입 후 프로젝트 생성하고 구글 로그인을 한 상태에서 명령 프롬프트> 프로젝트 폴더로 이동(cd 프로젝트 폴더 명 입력) 후 firebase login, npm install firebase, firebase init(Firestore, Authentication, Hosting, Storage, Functions, Emulator, Extensions 사용 선택. Public을 할 폴더의 이름을 정할 때 dist 입력), npm run build, firebase deploy 명령어 입력

클라이언트 측: Vue3, Pinia, Firestore, Authentication

UI는 AI(그록, 퍼플렉시티)에게 원하는 기능을 요청하면 작성을 도와준다. 구현하고자 하는 페이지마다 필요한 컴포넌트를 작성하고 라우터를 설정한다. Pinia를 상태 관리 저장소로 활용하여 서버와의 데이터 전송을 중앙집중적으로 처리하는 효율적인 구조를 구축한다. Authentication을 활용하면 회원가입과 로그인에 필요한 복잡한 인증 기능을 간편하게 구현할 수 있다. 플러그인이나 설정 파일에서 오류가 발생해 코드 전반을 검토해야 할 경우, Cursor의 AI를 활용하여 문제를 해결할 수 있다.

서버 측: Functions, Emulator

데이터의 검증과 복잡한 연산은 서버 측의 함수에 맡긴다. Functions 서버 측의 함수를 작성한 후에는 함수 별 test.js 파일을 준비해서 명령 프롬프트에서 Emulator를 실행하여 테스트를 진행하여 수정이 필요한 부분이 있는지 확인한다. 테스트까지 완료하면 함수를 서버에 배포한다.

Console: Extensions

Firebase Console에서 필요한 확장 프로그램을 설치하면 직접 기능을 구현하기 위하여 별도의 코드를 작성하지 않아도 된다. 필요한 확장 프로그램이 있다면 Console에서 설치한 후 설정을 입력하고 저장한다.

이후 PWA를 위한 플러그인을 설치하고 npm run build, firebase deploy하면 PWA는 완성된다.

안드로이드 앱의 경우, Capacitor 플러그인과 Android Studio를 설치한 뒤 명령 프롬프트에서 npx cap init, npm run build, npx cap add android, npx cap sync 등 명령어를 실행하고, Android Studio를 통해 안드로이드 기기를 구동하면 구현된 앱을 확인할 수 있다. Android Studio에서 서명한 aab 파일을 만들면 Firebase Test Lab에서 로봇이 자동으로 테스트하도록 할 수 있다. aab 파일은 구글 플레이 콘솔에 업로드해서 플레이 스토어에 공개한다.