코파일럿으로 2년 된 방치된 LMS 프로젝트 되살리기
출처: Dev.to
이 글은 GitHub Finish‑Up‑A‑Thon 챌린지에 제출한 작품입니다.
저는 Academia라는 현대적인, 배포‑전용 학습 관리 시스템(LMS)을 만들었습니다. 이 서비스는 프리미엄하고 방해받지 않는 환경을 학생들에게 제공하고 싶은 크리에이터들을 위해 설계되었습니다.
Academia를 사용하면 교육자는 자신만의 맞춤 아카데미를 손쉽게 만들고, 영상·텍스트 강의가 포함된 풍부한 커리큘럼을 구축한 뒤, 이메일 매직링크를 통해 학생들을 안전하게 초대할 수 있습니다. 학생이 초대를 수락하면, 실시간으로 강의 진행 상황을 추적하는 깔끔한 전용 포털에 들어가게 됩니다.
이 프로젝트는 2년 전 해커톤에서 시작되었습니다. 아이디어는 정말 좋았지만 저는 아직 초보자였고, 촉박한 일정, 수면 부족, 느린 코딩 속도 때문에 제때 완성하지 못하고 레포지토리에 방치된 채 먼지를 쌓아두었습니다. 이제 이 프로젝트를 마무리한다는 것은 2년 전 머릿속에 그렸던 비전을 오늘날의 실력과 아키텍처로 구현한다는 의미입니다.
Live Site
Repository
저는 항상 “먼지가 가라앉은 뒤” 이 프로젝트를 마무리하겠다고 다짐했지만, 실천에 옮기지는 못했습니다. 이번 챌린지를 보자마자 바로 도전해야겠다고 결심했습니다. 2년 된 레포지토리를 열어보니 바로 두통이 찾아왔습니다.
- 모든 패키지가 오래돼 있었고, Vercel에서는 대규모 빌드 오류가 발생했으며,
npm run dev는 끔찍하게 느렸습니다. 즉, 모든 것이 지연되고 있었습니다.
처음엔 새 레포지토리를 처음부터 만들 생각도 했습니다. 2년 전 만든 형편없는 디자인을 보고 “중요한 코드만 수작업으로 복사‑붙여넣기”하면 될 거라 생각했죠. 기존 코드를 정리하는 건 악몽이 될 테니까요.
하지만 저는 GitHub Copilot Auto에 크게 의존하기로 했습니다(작업에 가장 적합한 모델을 자동으로 제공받기 위해). 이렇게 해서 원본 코드베이스를 살리고 현대화할 수 있을지 시험해 보았습니다.
아래는 제가 겪은 전·후 과정과 Copilot이 어떻게 제가 시작한 일을 마무리하도록 도와줬는지에 대한 이야기입니다.
시작하기 전에 해야 할 일
작업 흐름을 원활하게 만들기 위해 먼저 기반 작업을 진행했습니다. Copilot에 React Best Practices와 Web Design Guidelines라는 에이전트 스킬을 설치했습니다.
한 가지 더: 명확한 지시문은 절대 틀리지 않는다. 저는 프로젝트에 일반적인 가이드라인과 지시문을 추가해 AI가 제 코딩 스타일에 맞게 행동하도록 했습니다. (보고 싶다면 여기서 확인: GitHub Copilot Instructions.)
새로운 기능을 만들기 전에, 먼저 출혈을 멈춰야 했습니다. 코드베이스는 폐기된 패키지와 빌드 실패로 가득 차 있었거든요.
첫 번째 이슈: 빌드 오류 해결
Copilot과 함께 빌드 오류를 해결해 실제로 코드를 실행하고 현재 모습을 확인할 수 있게 했습니다. 핵심 의존성을 체계적으로 업데이트하고, 필요한 새 패키지를 설치했으며, 오래된 불필요한 패키지는 안전하게 제거했습니다.
대규모 아키텍처 정리를 위해 Copilot에 아주 구체적인 프롬프트를 주어 수정 및 기능 추가 사항을 한눈에 파악할 수 있게 했습니다.
이 과정은 이후 작업의 톤을 잡아 주었으며, 무엇을 고쳐야 하고 이미 무엇이 완료됐는지를 추적하는 방식이 되었습니다.
가짜 데이터 제거
2년 된 대시보드에는 가짜 하드코딩 데이터와 구식 레거시 컴포넌트가 가득했습니다.
전략적인 프롬프트 덕분에 Copilot은 깊이 있는 스윕을 수행했습니다. 죽은 코드를 모두 삭제하고, 사용되지 않는 목업 이미지도 제거했으며, 레포지토리를 완전히 정리했습니다. 파일 트리를 탐색해 고아된 import를 찾아 삭제하도록 Copilot에게 맡긴 덕분에 수시간에 달하던 수작업 hunting을 절감했습니다.
UI 전면 개편
구 UI는 일관성이 부족하고 미관상 좋지 않았습니다. 우리는 핵심 색상은 유지하면서 디자인 시스템을 완전히 교체했습니다. 잡동사니를 없애고, 깔끔하고 플랫하며 프리미엄 느낌의 디자인을 구현했습니다.
새로운 기능 추가
원 프로젝트에는 작동하는 학생용 화면조차 없었습니다! 우리는 학생 포털을 처음부터 구축했습니다. 안전한 Firebase 인증을 연동하고, 이메일 초대를 위한 Resend API를 통합했으며, 실시간 강의 진행 상황을 추적하는 백엔드 로직을 작성했습니다.
또 하나, 제가 절대 지치지 않는 Copilot 활용법은 커밋 메시지 생성입니다. 몇 시간에 걸친 집중적인 리팩터링과 기능 구현 후, 변경 사항을 요약하는 데 신경 쓸 필요가 없다는 것이 최고의 사치였습니다.
두뇌를 괴롭히던 레거시 코드베이스는 이제 세련되고 현대적인, 프로덕션 수준의 MVP가 되었습니다. Copilot은 단순히 코드를 써 준 것이 아니라, 주요 엔지니어 역할을 하며 정리 작업을 설계하고, 앱을 깨뜨리지 않으면서 의존성을 업데이트하며, 2년 전에는 상상도 못했던 속도로 새로운 기능을 구현하도록 도와주었습니다.
드디어 제가 시작했던 일을 마무리했습니다!