프로토타입에서 약국 대시보드까지: Google Gemini로 AI 생성 앱 확장
I’m happy to translate the article for you, but I’ll need the text you’d like translated. Could you please paste the content (or the portion you want translated) here? I’ll keep the source line unchanged and preserve all formatting, markdown, and technical terms as requested.
Project Overview
작년, 친구가 그의 약국을 위한 맞춤형 대시보드 개발을 의뢰했습니다. 당시 저는 Vue.js와 TypeScript를 매일 사용하고 있었지만, 초기 구현을 가속화할 수 있는 플랫폼을 원했습니다. 그때 React용 AI‑기반 디자인 및 개발 도구인 Tempo를 발견했습니다.
- 무료 티어 덕분에 시작할 수 있을 만큼 충분한 일일 크레딧을 받았고, 코드는 GitHub 저장소와 직접 동기화되었습니다.
- 저는 크레딧 대부분을 버그 수정과 기능 구현에 사용했습니다.
- 결국 Tempo가 크레딧 제한을 강화하여 24시간마다 재설정했습니다.
이러한 제약에도 불구하고 테스트 준비가 된 초기 구현을 제공했으며, 여기에는 다음과 같은 기능이 포함되었습니다:
Core Features
- User Management
- Branch Management
- Inventory Management
- Monthly Sales Reporting
- Multi‑language Support (Spanish & English)
- IndexedDB for local data storage
크레딧 제한과 아직 구현되지 않은 여러 기능 때문에, 저는 프로젝트를 Google Gemini로 이전하여 프로덕션 단계로 진행했습니다.
Gemini‑구동 향상 기능
Gemini는 버그 수정, 기능 개발, 데이터베이스를 로컬 스토리지에서 Cloud Firestore로 마이그레이션하는 데 핵심 역할을 했습니다. 또한 GitLab Pages와 Vercel을 사용하여 프로젝트를 프로덕션‑준비 상태로 만들기 위한 배포 전략을 안내했습니다.
Gemini로 구현된 추가 기능
- 이중 레이어 재고 – 약국과 창고 재고를 구분
- 일일 및 주간 판매 보고
- 재고 검색 및 편집
- 주문 모듈
- 일일, 주간 및 월간 주문 보고
- 일일 판매 및 주문 편집
- 바코드 스캐너 지원 POS 모듈
- Firestore 사용자 관리
- 재고 알림
- PDF 보고서 다운로드
데모
공개 데모 인스턴스는 제공되지 않습니다(유일한 실시간 버전은 고객이 사용 중이며 로그인 필요). 대신, 대시보드가 어떻게 보이는지 보여주기 위해 스크린샷을 모아두었습니다.
| 섹션 | 설명 |
|---|---|
| Access & Security (Sign In) | 앱의 진입점으로, Firebase Authentication과 통합되어 안전한 접근을 제공합니다. |
| Command Center (Dashboard) | 재고 알림부터 빠른 매출 통계까지 약국의 전반적인 상태를 한눈에 볼 수 있는 고수준 개요입니다. |
| Dual‑Layer Inventory | 약국과 창고 간 재고를 관리합니다. |
| Point of Sale (Sales Module) | 약사들을 위한 실시간 인터페이스로, 바코드 스캐너 지원을 통해 빠른 결제를 할 수 있습니다. |
| Data‑Driven Decisions (Sales Report) | 일간, 주간, 월간 분석을 제공하여 소유자가 매출 추세를 이해하도록 돕습니다. |
| Supply Chain Management (Orders) | 재입고 및 새로운 의약품 공급 추적을 처리합니다. |
Source: …
Gemini와 함께 달성한 기술적 마일스톤
1. AI‑지원 개발 마스터하기
- 더 나은, 상황에 맞는 프롬프트 작성 방법을 배웠음.
- 초기 UI는 Tempo로 만들고, 자동 생성된 코드를 Gemini가 리팩터링하여 프로토타입을 프로덕션 수준 시스템으로 전환함.
2. IndexedDB에서 Cloud Firestore로 전환
- IndexedDB와 SQLite를 처음 사용해 보면서 연결 설정 및 CRUD 메서드를 학습함.
- 로컬 스토리지는 기기 간 동기화가 되지 않음을 깨닫고, 확장 가능한 클라우드‑네이티브 솔루션이 필요했음.
- Gemini가 Cloud Firestore를 제안했고, 무료 티어가 모든 요구사항을 충족함.
- Firestore 데이터 모델링과 Firebase Authentication을 통한 안전한 사용자 관리에 직접 손을 대며 경험을 쌓음.
3. 확장 가능한 솔루션 (두 개의 레포지토리)
| Repository | Purpose | Deployment |
|---|---|---|
| Backend API | 현재 관리자 세션을 종료하지 않고 사용자 생성, 업데이트, 인증을 처리 | Vercel에 배포 (첫 시도) 및 GitLab CI/CD 파이프라인 사용 |
| Frontend Application | React 대시보드 | 자체 CI 파이프라인을 가진 GitLab Pages에 배포 |
4. GitLab Pages에서 SPA 라우팅 문제 해결
- SPA에서 라우트를 새로 고침할 때 404 오류가 발생함.
- GitLab 문서를 참고하고 Gemini와 함께 적절한 fallback 라우팅을 설정하여 프로덕션 환경에서도 SPA 라우터가 정상 작동하도록 함.
5. gcloud 에뮬레이터를 활용한 로컬 개발
- 배포 전 로컬에서 Firestore 보안 규칙과 데이터 구조를 테스트함.
- 매우 유용했기 때문에 전용 글에 워크플로우를 문서화함.
Google Gemini Feedback
Gemini와 함께 작업하는 것은 이 프로젝트에 큰 변화를 가져왔지만, 모든 강력한 도구와 마찬가지로 학습 곡선이 있습니다.
What Worked Well
| Aspect | Why It Was Effective |
|---|---|
| Guidance | 구체적인 기술 스택(예: IndexedDB에서 Firestore로 전환)에 대해 물었을 때 명확한 답변을 제공했습니다. |
| Refactoring | 코드 스니펫을 공유하고 필요한 비즈니스 로직을 설명하면 정확한 리팩터링 제안을 받았습니다. |
| Problem‑Solving | GitLab Pages에서 SPA 라우팅 문제를 디버깅하고 Vercel용 CI/CD 파이프라인을 설정하는 데 도움을 주었습니다. |
Areas for Improvement
| Issue | Suggested Improvement |
|---|---|
| Repository Integration | Gemini는 현재 전체 리포지토리를 한 번에 분석하는 데 어려움을 겪고 있습니다. GitHub 또는 GitLab 리포지토리와 직접 연동하면 생산성이 크게 향상될 것입니다. |
| Context Persistence | 장기 세션(예: 다단계 마이그레이션) 동안 컨텍스트를 유지하는 것이 더 원활해질 수 있습니다. |
| Code Execution Feedback | 시뮬레이션 실행 결과나 린팅 피드백을 제공하면 제안된 변경 사항을 더 빠르게 검증할 수 있습니다. |
제 제출물을 검토해 주셔서 감사합니다. 이 깔끔하고 구조화된 개요가 Gemini이 프로젝트에 추가한 가치를 보여주고, 향후 도구 개선 기회를 강조하길 바랍니다.
- **Understand the full codebase context.**
- **IDE Extension:** While the web interface is great, having a more integrated experience directly within the code editor (beyond simple autocomplete) would reduce the friction of switching back and forth.
- **Accuracy & Verification:** AI responses are not always 100% accurate. I quickly learned that you must always review and test suggested changes before merging them, as some suggestions can inadvertently break existing module logic.