🚀 AI 코딩 실습 - To-Do List 웹앱

📌 개요

개발을 배우는 학생으로서, GitHub Copilot Chat을 활용하여 To-Do List 웹앱을 개발한 경험을 공유합니다. 단순히 AI에게 코드를 통째로 맡기는 것이 아니라, 직접 설계를 주도하고 단계별로 구현하며 AI를 파트너로 활용하는 방식에 초점을 맞췄습니다.

---

🛠️ 사전 설계 (Pre-Design): 로드맵 그리기

코딩을 시작하기 전, Copilot과 대화하며 프로젝트를 단계별로 구현하기 위한 로드맵을 그렸습니다.

📝 4단계 개발 로드맵

1. Phase 1 (기술 스택 & 프로토타입): Django 환경 구축 및 메모리 기반 CRUD 구현
2. Phase 2 (DB 연동): SQLite/MySQL 연동 및 ORM 적용
3. Phase 3 (UI/UX): Bootstrap 5 적용 및 사용자 경험 개선
4. Phase 4 (기능 확장): 검색, 필터링, 카테고리 등 고급 기능 구현

---

🏗️ Phase 1: 기술 스택 선정 및 프로토타입

가장 먼저 기술 스택을 정해야 했습니다. 저는 처음에 Flask(백엔드) + Django(프론트엔드)라는 조합을 생각했습니다.

User: "백엔드는 Flask, DB는 MySQL, 프론트엔드는 Django를 쓰고 싶은데..."
Copilot: "Flask와 Django를 함께 사용하는 것은 일반적이지 않습니다. 학생 입장에서는 Django 풀스택(옵션 1)을 추천합니다."

Copilot의 조언을 받아들여 Django 풀스택으로 방향을 잡고, 1단계 개발을 시작했습니다.

📊 Copilot의 역할 (Phase 1)

구분	나의 요청 / 상황	Copilot의 수행 내용
스택 컨설팅	Flask+Django 혼합 스택 문의	비효율성을 지적하고 Django 단일 풀스택 추천
환경 설정	Conda 가상환경(py313) 사용 요청	터미널 명령어를 통해 Django 설치 및 프로젝트(todo_config), 앱(tasks) 생성
구조 잡기	프로젝트 트리 구조 요청	settings.py, urls.py, templates 등 표준 디렉토리 구조 생성
초기 구현	DB 없이 작동하는 CRUD 요청	tasks 리스트(List) 변수를 전역으로 선언하여 메모리 기반 저장소 구현
뷰(View)	클래스 기반 뷰(CBV) 요청	ListView, CreateView 등을 상속받아 기본 로직 작성

---

💾 Phase 2: 데이터베이스 연동 (Memory → SQLite → MySQL)

메모리 기반은 서버를 끄면 데이터가 날아가기 때문에, DB를 연동해야 했습니다. 초기에는 설정이 쉬운 SQLite로 구현하고, 이후 MySQL로 마이그레이션을 시도했습니다. 이 과정에서 로컬 환경 이슈로 꽤 고생했으나 Copilot의 도움으로 해결했습니다.

📊 Copilot의 역할 (Phase 2)

구분	나의 요청 / 상황	Copilot의 수행 내용
ORM 전환	메모리 코드를 DB 코드로 변경	models.py에 Task 모델 정의 후, views.py를 리팩토링하여 QuerySet 사용
관리자	데이터 관리 필요	admin.py에 모델을 등록하여 Django Admin 페이지 활성화
DB 설치	로컬에 MySQL이 없었음	winget을 사용하여 MySQL Community Server 자동 다운로드 및 설치 스크립트 실행
트러블 슈팅	mysqlclient 드라이버 호환성 에러	기존 드라이버 대신 순수 파이썬 드라이버인 PyMySQL 설치 및 Django 설정 패치 제안
마이그레이션	DB 변경 후 테이블 생성	makemigrations 및 migrate 명령어를 통해 스키마 동기화 완료

💡 로컬에 MySQL 서버가 깔려있지 않은 상황에서도 Copilot이 터미널 명령어로 설치부터 서비스 실행, DB 생성(CREATE DATABASE)까지 전부 수행해 주는 모습이 인상적이었습니다.

---

🎨 Phase 3: UI/UX 개선 (Bootstrap)

기능은 동작하지만 디자인이 너무 투박했습니다. Bootstrap 5를 적용하여 "시장성 있는 수준"의 디자인을 요청했습니다.

📊 Copilot의 역할 (Phase 3)

구분	나의 요청 / 상황	Copilot의 수행 내용
디자인	Bootstrap 5 적용 요청	base.html에 CDN 링크 추가 및 네비게이션 바, 푸터가 포함된 레이아웃 구성
UX 개선	삭제 시 바로 지워지는 문제	JavaScript 기반의 삭제 확인 모달(Modal) 코드 작성
피드백	작업 완료 여부 확인 어려움	Django Messages 프레임워크를 활용해 우측 상단에 뜨는 토스트(Toast) 알림 구현
스타일링	밋밋한 테이블	상태(완료/진행)에 따라 색상이 변하는 배지(Badge)와 카드형 UI 적용

---

🚀 Phase 4: 기능 확장 (Advanced Features)

마지막으로 실무 앱처럼 기능을 고도화 시키고자 했습니다. 데이터 모델을 수정하고 복잡한 쿼리를 작성해야 하는 과정이었습니다.

📊 Copilot의 역할 (Phase 4)

구분	나의 요청 / 상황	Copilot의 수행 내용
모델 확장	우선순위, 카테고리 기능 추가	Priority 필드와 Category 모델(외래키) 추가 및 마이그레이션 가이드
검색 기능	제목+내용 검색 요청	Django의 Q 객체를 활용하여 OR 조건 검색 쿼리 작성
필터/정렬	다양한 조회 조건 필요	URL 파라미터를 받아 쿼리셋을 필터링(filter)하고 정렬(order_by)하는 로직 구현
대시보드	통계 정보 표시	전체 할 일 개수, 완료율 등을 계산하여 템플릿에 전달

---

💡 트러블 슈팅: 데이터 이전

MySQL로 DB를 완전히 교체한 후, 웹앱에 접속하니 기존에 SQLite에서 작성한 데이터가 하나도 보이지 않았습니다.

🚨 문제 상황

• SQLite → MySQL로 settings.py의 DB 연결 정보만 변경함.
• 당연히 MySQL은 비어있는 상태라 게시글 목록이 0개로 뜸.

🛠️ Copilot의 해결책

1. 원인 분석: "기존 SQLite 데이터가 MySQL로 이전되지 않았습니다."라고 정확히 진단.
2. 스크립트 작성: migrate_data_to_mysql.py라는 파이썬 스크립트를 즉석에서 작성해 줌.
   • SQLite에서 데이터를 읽어서 MySQL에 bulk_create로 밀어 넣는 로직.
3. 결과: 스크립트 실행 후 데이터 복구 완료.

---

📝 회고 및 총평

이번 프로젝트를 통해 AI 코딩 도구를 사용하는 태도가 바뀌었습니다.

1. 설계는 사람이, 구현은 AI가: 내가 로드맵(설계도)을 명확히 가지고 있을수록 Copilot의 퍼포먼스가 기하급수적으로 올라갔습니다.
2. 모드(Mode)의 활용:
   • Ask Mode: "어떤 스택이 좋아?" (조언)
   • Plan Mode: "이 기능을 구현할 계획을 짜줘" (설계)
   • Agent Mode: "터미널에서 설치하고 파일 수정해" (행동)
     이 세 가지 모드를 적절히 섞어 쓰는 것이 핵심이었습니다.
3. 트러블 슈팅 파트너: MySQL 설치나 드라이버 충돌 같은 환경 설정 문제는 혼자였다면 몇 시간 걸렸을 일을 몇 분 만에 해결해 주었습니다.

결론: Copilot은 단순한 자동완성 도구가 아니라, 내 옆에 앉은 든든한 시니어 개발자로 생각하고 활용해야 한다는 걸 체감했습니다. 다음에는 같은 프로젝트를 여러 모델 별로 시켜 본 다음에 목적별 적절한 모델을 찾아보겠습니다. 그리고 다른 프로젝트를 진행할 때는 직접 설계를 주도하고 단계별로 발전 시키는 연습을 해보겠습니다. 👋