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

실리콘밸리 구직 체험기_201404(1) - 1. 이민 결정 과정

1. 이민 결정 과정 작년 만우절 거짓말로 "나 미국으로 이민간다"라고 페북에 올린 글이 실현되었습니다. 물론 비자 lottery 결과가 나와야 겠지만 결과가 나오기 전에 그간의 여정을 정리해야 할 사명이 있어 정리를 하고자 합니다. 비자 결과가 나온 후에 올리는 것이 제 개인적으로도 훨씬 좋겠으나 제가 큰 약속을 지켜야 하기에 이렇게 글을 올립니다. 15년 이상 IT 서비스 회사에 있으면서 당연히 개발을 해왔고 지금도 하고 있지만 설계도 하고, pre-sales도 수년간 했고 10억 정도 규모의 몇개의 프로젝트에서 PM도 해봤습니다. 설계, 영업, PM을 하면서도 40이 넘어서도 여전히 개발이 재미있고 앞으로도 계속 하고 싶다는 마음이 켰습니다. 몇년전 LGCNS 차장 승진 발표 때에도 이제는 관리를 해야 하는 것 아니냐는 팀장님들의 질문에 저같은 사람도 조직에서 계속 기여할 수 있지 않겠냐고 고집했었죠. 좀더 지나서 굳어지는 개인적인 비전은 70세가 넘어서도 개발을 하고 싶다는 것. 전 어렸을 떄 부터 비전은 보이는 그림 같은 것이라고 생각해 왔는데, 제 지금의 비전은 호수를 앞마당으로 하는 집에서 밖을 보면서 작가가 글을 쓰듯 코딩을 하고 그 보수를 받으면서 70세가 될 떄까지 일을 하는 것입니다. 이런 제 비전이 실현되기 위해서는 엔지니어가 대접 받는 곳에서의 경험이 제일 중요하다는 판단을 했죠. 그곳이 실리콘밸리 든, 호주 든, 싱가포르 든 상관 없이, 그런데 그렇게 대접받는 곳에서 일을 하려면 영어로 일을 해야 하고 가능한 한 기술 트랜드를 리드하는 실리콘밸리에서 시작하는 것이 맞다고 생각했습니다. 저는 2014/01/02에 실리콘밸리로 와서 오늘 2014/04/01까지 딱 무비자 3개월 미국에 있고 내일 한국으로 돌아 갑니다. 그간 어떤 준비를 통해서 어떻게 비자 스폰서를 받았는지 다음의 글 순서로 정리하고자 합니다. 실리콘밸리 구직 체험기_201404(1) - 1. 이민 결정 과정 실리콘밸리...
1 comment
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