Skip to main content

첫번째 Vibe Coding 앱. drillquiz.com

 나는 vibe coding으로 코드 한 줄 쓰지 않고 한 달 반 만에 이 앱을 만들었다.

https://drillquiz.com

인터뷰 준비를 위해서 내가 평소에 하던 준비 과정을 앱에 담으려고 노력했다.
이 앱에서 내가 만들고자 했던 기능은 이런 것들이다.

🎯 첫째, 기억 관리 (Retention 기능, 이름을 Drain 으로 바꿀까 싶다 ^^)

나는 면접 준비를 하다 보면, 며칠 전에 본 문제도 금방 잊어버리는 경험을 자주 했다.
그래서 앱이 나 대신 내가 언제 무엇을 잊어버릴지 추적하고, 적절한 시점에 다시 문제를 보여주도록 설계했다. 시간이 지나면 맞췄던 문제의 통계를 지우도록 설계했다.
결국 "내가 잊어버리는 걸 앱이 기억한다"는 개념이 핵심이 됐다.
매일 많이 틀린 문제를 이메일로 보내준다.

🌍 둘째, 언어 장벽 없는 학습

나는 한국어로 정리하는 습관이 있지만, 글로벌 면접이나 해외 스터디에 참여할 땐 영어가 필요했다.
그래서 한국어로 입력하면 앱이 자동으로 영어로 변환해주는 기능을 넣었다.
내 의도는 단순했다. “언어는 학습의 장벽이 되면 안 된다.”

👥 셋째, 협업 학습과 동기부여

혼자 준비하는 것도 중요하지만, 스터디 그룹에서 서로 진도를 확인하고 피드백을 주는 게 큰 도움이 된다.
그래서 개인 성과뿐 아니라 스터디 팀 전체 성과를 추적할 수 있는 스터디 보드를 만들었다.
스터디 -> 과제 -> 문제

📊 넷째, 데이터로 보는 학습 과정

나는 늘 "내가 얼마나 준비됐을까?"라는 불안을 안고 있었다.
그래서 문제 정답률, 시도 횟수, 최근 성과를 데이터로 보여주는 학습 분석 기능을 추가했다.
숫자와 그래프가 말해주는 성과는 막연한 불안을 줄이고, 구체적인 목표를 세우게 해준다.

결국 이 앱은 내가 인터뷰를 준비하면서 필요하다고 느꼈던 것들을 시스템화한 결과물이다.

아래는 첫번째 vibe coding 프로젝트의 흔적이다.
아직은 프로그래머가 아니면 만들수 없다는 것이 내 결론이다. :)

참고로,

 
서버는 in-house K8S 구축하고 (https://inf.run/X5dw5)
CI/CD gitops 자동화 했고
번역은 openapi api 가 적절한 시점에 처리한다.


====================================================================


# DrillQuiz 프로젝트 개발 히스토리 분석 (통합)

## 📅 프로젝트 시작 및 개발 기간
- 메인 앱 시작일: 2025년 7월 5일 (첫 번째 커밋)
- Batch 앱 시작일: 2025년 7월 25일 (Initial commit)
- 현재까지: 2025년 8월 19일
- 총 개발 기간: 약 1.5개월
- 총 커밋 수: 766개 (메인 앱) + 70개 (Batch 앱) = 약 836개

## 🎯 주요 마일스톤 및 개발 단계

### 1단계: 프로젝트 기초 구축 (2025년 7월 5일 ~ 7월 13일)
- 기본 기능 구현
- 시험 버전 관리 시스템 (트리 UI, 재시험, 최신 점수)
- 스터디 및 Task 관리 기능
- 이어풀기 기능 완성
- 틀린문제만 재시험 기능
- 멤버십 기반 보안 강화

- 사용자 관리 시스템
- 로그인, 회원가입, 프로필 관리
- 권한 기반 접근 제어 (admin, study_admin, user_role)
- 사용자 생성 및 관리 기능

### 2단계: 파일 관리 및 데이터 처리 (2025년 7월 13일 ~ 7월 28일)
- 파일 업로드/다운로드 시스템
- Excel 파일 (XLS, XLSX) 지원
- 문제 데이터 일괄 업로드/수정
- 난이도 표기 정규화 (Med → Medium)
- CSV ID 중복 처리 및 자동 시험 추가

- UI/UX 개선
- 공개/비공개 기능 구현
- 스터디 진행 대시보드 (Chart.js 통합)
- 즐겨찾기 시험 기능
- 모바일 최적화

### 3단계: 인프라 및 배포 환경 (2025년 7월 28일 ~ 8월 10일)
- Docker 환경 구축
- Docker Compose를 통한 원클릭 실행
- PostgreSQL 데이터베이스 지원
- SQLite/PostgreSQL 이중 모드 지원
- 프론트엔드/백엔드 분리된 컨테이너 구조

- Jenkins CI/CD 파이프라인
- 자동 빌드 및 배포
- Kubernetes 배포 지원
- 브랜치별 환경 설정

### 4단계: 다국어 지원 및 성능 최적화 (2025년 8월 10일 ~ 8월 19일)
- 다국어 시스템 구축
- 한국어/영어 지원
- i18n 번역 시스템
- 언어 전환 기능
- 다국어 데이터 마이그레이션

- 성능 최적화
- API 성능 최적화 (시리얼라이저 분리)
- 캐시 시스템 개선
- 데이터베이스 인덱스 추가
- 프론트엔드 렌더링 최적화

## 🚀 Batch 앱 개발 단계 (2025년 7월 25일 ~ 8월 8일)

### Batch 앱 1단계: 프로젝트 초기 설정 (7월 25일)
- Initial commit: DrillQuiz 배치 시스템 기본 구조 설계
- 핵심 기능: 개별 사용자 맞춤형 시험 생성 및 이메일 발송
- 기술 스택: Go, Docker, Kubernetes

### Batch 앱 2단계: 핵심 기능 구현 (7월 25-26일)
- DrillQuiz API 연동: 구독 사용자 목록 조회, 시험 생성, 문제 조회
- 개인화된 HTML 이메일 템플릿: 한국어/영어 다국어 지원
- Docker 컨테이너화: multi-stage 빌드로 최적화
- Kubernetes 배포: CronJob 형태로 자동화

### Batch 앱 3단계: 이메일 시스템 완성 (7월 26일)
- 언어별 이메일 템플릿: ko/en 분리
- 사용자별 맞춤형 이메일: 개별 사용자별 이메일 발송
- 브랜딩 개선: 발신자 이름을 'DrillQuiz'로 표시
- 템플릿 디렉토리: Docker 이미지에 포함

### Batch 앱 4단계: 시험 제목 및 형식 통일 (7월 30일-8월 1일)
- 시험 제목 형식: "Today's Quizzes for [사용자명]" 형태로 통일
- 날짜 표시: 날짜 제거, 영어/한국어 번역 통일
- 제목 중복 문제: API 서버 자동 사용자명 추가로 해결

### Batch 앱 5단계: 통계 및 리포트 시스템 (8월 2일)
- 시험 통계 정보 조회 API
- 정확도 기반 정렬: 정답률 오름차순으로 문제 정렬
- 통계 매칭 로직: 시험 문제와 통계 정보를 ID로 매칭

### Batch 앱 6단계: Retention 기능 추가 (8월 8일)
- 개별 사용자 retention 설정: retention_cleanup_enabled, retention_cleanup_percentage
- BulkAdjustUserAccuracy API: 사용자 정확도 일괄 조정
- 이메일 발송 완성: retention 설정에 따른 이메일 발송

## 🚨 가장 많은 커밋이 발생한 문제들

### 1. Jenkins 및 배포 관련 문제 (약 50+ 커밋)
- 문제: Jenkins 파이프라인 설정 오류, Docker 빌드 실패
- 원인:
- Jenkinsfile 문법 오류
- Docker 컨테이너 내 스크립트 실행 문제
- 환경 변수 설정 오류
- 해결:
- Jenkinsfile 구조 개선
- Docker 빌드 로직을 k8s.sh로 분리
- 컨테이너별 역할 분담 (docker, kubectl)

### 2. CORS 및 CSRF 토큰 문제 (약 30+ 커밋)
- 문제: 브라우저 CORS 정책 위반, CSRF 토큰 인증 실패
- 원인:
- 환경별 CORS 설정 불일치
- 프론트엔드/백엔드 간 인증 상태 동기화 문제
- 개발/운영 환경 설정 차이
- 해결:
- 환경별 CORS 설정 분리
- CSRF 토큰 조건부 등록
- 인증 상태 동기화 로직 개선

### 3. 데이터베이스 마이그레이션 문제 (약 25+ 커밋)
- 문제: Django 마이그레이션 의존성 충돌, 데이터 손실
- 원인:
- 마이그레이션 순서 문제
- 기존 데이터베이스 스키마와 모델 불일치
- 다국어 필드 추가 시 데이터 마이그레이션 실패
- 해결:
- 마이그레이션 파일 순서 조정
- 데이터 백업 및 복구 스크립트 작성
- SQL 스크립트를 통한 데이터 마이그레이션

### 4. 프론트엔드 빌드 및 배포 문제 (약 20+ 커밋)
- 문제: Vue.js 애플리케이션 빌드 실패, JavaScript 파일 404 오류
- 원인:
- Dockerfile.frontend 설정 오류
- nginx 정적 파일 서빙 설정 문제
- 빌드 후 스크립트 파일 누락
- 해결:
- Dockerfile.frontend 구조 개선
- nginx.conf 설정 최적화
- 빌드 프로세스 검증 및 수정

### 5. MinIO 스토리지 연결 문제 (약 15+ 커밋)
- 문제: MinIO 엔드포인트 연결 실패, 파일 업로드/다운로드 오류
- 원인:
- Kubernetes 환경에서 MinIO 서비스 감지 실패
- 환경 변수 설정 불일치
- 폴백 로직 부족
- 해결:
- 다중 엔드포인트 폴백 메커니즘 구현
- 환경별 MinIO 설정 분리
- 연결 오류 처리 로직 강화

### 6. Batch 앱 관련 문제들 (약 20+ 커밋)

#### 6-1. 시험 제목 중복 및 형식 문제 (8개 커밋)
- 문제: 시험 제목에 날짜와 사용자명이 중복으로 표시
- 해결 과정:
- 시험 제목 형식을 "Today's Quizzes for [사용자명]" 형태로 통일
- API 서버가 자동으로 사용자명을 추가하도록 수정
- 날짜 제거 및 영어/한국어 번역 통일

#### 6-2. 통계 조회 API 응답 형식 문제 (6개 커밋)
- 문제: 시험 문제와 통계 정보 간의 매칭 오류
- 해결 과정:
- QuestionStatistics 구조체 추가로 배열 형태 응답 처리
- 시험 문제와 통계 정보를 ID로 매칭하는 로직 구현
- 디버깅 로그로 통계 매칭 과정 추적 가능

#### 6-3. Docker 및 Kubernetes 배포 문제 (5개 커밋)
- 문제: 템플릿 디렉토리 누락, 환경 변수 설정 오류
- 해결 과정:
- Dockerfile에 templates 디렉토리 복사 추가
- 환경 변수 이름 통일 (EMAIL_SMTP_HOST, EMAIL_USERNAME 등)
- API Base URL 포트 수정 (8000 → 80)

## 📊 커밋 패턴 분석

### 커밋 메시지 유형별 분포
1. 기능 추가 (feat:): 약 40% - 새로운 기능 구현
2. 버그 수정 (fix:): 약 30% - 문제 해결 및 오류 수정
3. 리팩토링 (refactor:): 약 15% - 코드 구조 개선
4. 문서화 (docs:): 약 10% - README 및 문서 업데이트
5. 기타: 약 5% - 로깅, 설정 변경 등

### 개발 집중도
- 가장 활발한 개발 기간: 7월 13일 ~ 7월 28일 (약 200+ 커밋)
- 안정화 기간: 8월 10일 이후 (일일 커밋 수 감소)
- Batch 앱 개발 집중기: 7월 25일 ~ 8월 8일 (약 70개 커밋)

### 주요 개발자
- Dewey Hong (doohee323@gmail.com): Batch 앱 주요 기능 구현 및 아키텍처 설계

## 🔍 주요 교훈 및 개선점

### 1. 개발 환경 표준화
- Docker 환경을 통한 일관된 개발 환경 제공
- 환경별 설정 분리로 배포 문제 최소화

### 2. 테스트 및 검증 강화
- 마이그레이션 전 데이터 백업 필수
- 프론트엔드 빌드 검증 프로세스 필요

### 3. CI/CD 파이프라인 안정화
- Jenkins 파이프라인 구조 단순화
- 컨테이너별 역할 명확화

### 4. 에러 처리 및 로깅
- 조건부 로깅 시스템으로 운영 환경 보안 강화
- 상세한 에러 로그로 디버깅 효율성 향상

### 5. Batch 앱 개발 경험
- Go 언어를 활용한 고성능 배치 처리 시스템 구축
- Kubernetes CronJob을 통한 자동화된 배치 실행
- 다국어 이메일 템플릿 시스템의 효율적 구현

## 📈 프로젝트 성과

### 완성된 주요 기능 (메인 앱)
- ✅ 사용자 인증 및 권한 관리 시스템
- ✅ 스터디 및 시험 관리 시스템
- ✅ 문제 풀기 및 결과 관리
- ✅ 다국어 지원 (한국어/영어)
- ✅ Docker 기반 배포 환경
- ✅ Kubernetes 배포 지원
- ✅ 성능 최적화 및 캐시 시스템

### 완성된 주요 기능 (Batch 앱)
- ✅ 개별 사용자 맞춤형 시험 생성
- ✅ 다국어 이메일 템플릿 및 발송
- ✅ DrillQuiz API 연동
- ✅ Docker 컨테이너화
- ✅ Kubernetes 자동 배포 (CronJob)
- ✅ 시험 통계 및 리포트
- ✅ Retention 기능
- ✅ 사용자별 정확도 관리

### 기술적 성과
- 메인 앱: Django + Vue.js 풀스택 애플리케이션
- Batch 앱: Go 언어 기반 고성능 배치 처리 시스템
- 공통: PostgreSQL/SQLite 이중 데이터베이스 지원
- 공통: Jenkins 기반 CI/CD 파이프라인
- 공통: Kubernetes 배포 지원
- 공통: 다국어 데이터 마이그레이션 시스템
- 공통: API 성능 최적화 및 시리얼라이저 분리

## 🌟 프로젝트 특징

### 아키텍처 특징
- 마이크로서비스 구조: 메인 웹 앱과 배치 앱의 분리
- 멀티 언어: Python (Django), JavaScript (Vue.js), Go (Batch)
- 컨테이너 기반: Docker를 통한 일관된 배포 환경
- 클라우드 네이티브: Kubernetes 기반 확장 가능한 아키텍처

### 비즈니스 특징
- 개인화된 학습: 사용자별 맞춤형 시험 생성
- 자동화된 이메일: 정기적인 학습 진도 리포트
- Retention 관리: 사용자 학습 지속성 향상
- 통계 분석: 학습 성과 및 정답률 추적



Comments

Post a Comment

Popular posts from this blog

Install CoreOs on linode without VM

Install CoreOs on linode without VM 1. Add a Linode 2. Create a new Disk   CoreOS 3. Rescue > Reboot into Rescue Mode 4. Remote Access   Launch Lish Console 5. make an install script cat <<'EOF1' > install.sh # add needed package sudo apt-get update sudo apt-get install -y curl wget whois sudo apt-get install -y ca-certificates #sudo apt-get install gawk -y # get discovery url discoveryUrl=`curl https://discovery.etcd.io/new` # write cloud-config.yml cat <<EOF2 > cloud-config.yml #cloud-config users:   - name: core     groups:       - sudo       - docker coreos:   etcd:     name: node01     discovery: $discoveryUrl hostname: node01 EOF2 # get the coreos installation script #wget https://raw.github.com/coreos/init/master/bin/coreos-install wget https://raw.githubusercontent.com/coreos/init/master/bin/coreos-install # run installation chmod 75...
31 comments
Read more

Amazon RDS Blue/Green Deployments

In order to avoid some errors I experienced when proceeding as described in the official documentation, I describe what I did in order. 1) Modify parameters of source_database * error: Blue Green Deployments requires cluster parameter group has binlog enabled. RDS Parameter groups: source-params-group binlog_format => MIXED mysql> show global variables like 'binlog_format'; 2) Insert a row after rebooting the source database, to avoid this error. * error: Correct the replication errors and then switch over. Read Replica Replication Error - IOError: 1236, reason: Got fatal error 1236 from master when reading data from binary log: 'Could not find first log file name in binary log index file' => To Fix: You need to change the data in the source database. INSERT INTO dummy_table ( `favorite_id` , `favorite_order` , `user_id` , `board_id` ) VALUES ('100001', '1', '11111', '11111'); 3) Modify the param...
Post a Comment
Read more

실리콘밸리 구직 체험기2_201505 - 3. 새로운 위기

실리콘밸리 구직 체험기2_201505 - 3. 새로운 위기 우리는 지난 1년간 lockscreen app과 messenger app을 만들었습니다. 나는 backend restful API를 만들고 cms를 node.js, angular.js로 만들었다. 또한 AWS 인스턴스를 관리했습니다. 마지막 몇달 동안 기존 lockscreen 앱과 CMS 관리 대신에 메신저 앱에 집중했습니다. 한국에서는 매출과 이익을 내지 않으면 투자를 받을 수 없는 환경이지만 매출 없이 유저수 증가에만 집중하는 모습이 참 생소했습니다. 우리는 사용자의 행태를 확인하기 위해서 BI툴을 이용해서 사용자 수와 retention rate 등을 추적하고 새로운 기능에 대해 사용자의 반응을 점검하면서 기획을 수시로 바꿨습니다. 많은 기능을 새로 만들고 ab test를 통해서 또 많이 폐기 했다. 실제 만든 기능 중에 절반 이상은 버려 졌습니다. locket앱은 2014년 google store의 베스트 앱으로 선정되기도 했다. 그러나 사실 이 시점에 이미 우리는 메신저 앱에 올인 하고 있었습니다. https://www.facebook.com/photo.php?fbid=10204452594066393&set=a.2225490048257.118046.1577949323&type=1 우리가 만든 메신저 앱은 초반의 반응이 워낙 좋아서 정체되었던 lockscreen 유저수를 단번에 따라 잡았습니다. 특히 Retention Rate 이 좋아서 사용자들의 제대로 사용하고 있다고 생각했습니다. 잠깐이지만 google play 에 featured 되고, 인도에 가입 지원을 했을 때 사용자 수가 급증하기도 했습니다. https://www.facebook.com/photo.php?fbid=10204901853057587&set=a.2225490048257.118046.1577949323&type=1 그 시...
Post a Comment
Read more