techlist.io
KREN
github

GitHub Copilot 앱에서 세션과 풀 리퀘스트 쌓기 (새 탭에서 열림)

reactaccessibilitytypescriptgithub-copilotpull-requeststailwind-cssreact-bootstrapless

10년 넘은 React 15·Less·구버전 react-bootstrap 기반 프로젝트를 GitHub Copilot 앱으로 현대화한 경험을 소개합니다. 한 번에 전체를 바꾸려 하지 않고, 기존 작업을 세션과 브랜치별로 나누어 순차적으로 진행하는 “스택 세션” 방식이 핵심입니다. AI가 계획 수립, 코드 변경, PR 생성, 브랜치 전환까지 지원하면서 오래된 프로젝트의 대규모 유지보수를 현실적으로 수행할 수 있었다는 결론입니다.

오래된 프런트엔드 현대화의 어려움

  • 개인용 대시보드 애플리케이션을 2014년경부터 운영해 왔습니다.
  • React 15, Less, 구버전 react-bootstrap 등 의존성이 수년간 업데이트되지 않았습니다.
  • 애플리케이션 규모가 아주 크지는 않지만, 구조가 충분히 복잡해 수작업으로 정리하려면 수주가 걸릴 상황이었습니다.
  • 과거에도 현대화를 시도했지만 호환성 문제 때문에 중단한 경험이 있었습니다.

첫 시도: 전체 현대화를 한 번에 진행하기

  • Copilot의 Plan 모드에서 다음 작업을 요청했습니다.
    • Tailwind와 vanilla CSS 중 적절한 방식 검토
    • Less 제거
    • 접근성 및 반응형 개선
    • 의존성 현대화
    • React 기능의 점진적 정리와 통합
    • 링크의 hover/focus 스타일 개선
    • 입력 필드의 테두리 반경 축소와 라벨 정리
    • 컨테이너 최대 너비와 적절한 줄바꿈 적용
  • Claude Opus 4.8과 GPT-5.5의 검토를 거쳐 계획을 다듬은 뒤 실제 변경을 시작했습니다.
  • 그러나 처음부터 main 브랜치를 기준으로 작업한 것이 문제였습니다. AI가 충분히 좋은 계획을 세웠더라도, 현재 운영 중인 코드의 실제 기준 브랜치를 잘못 선택하면 결과가 실행되지 않을 수 있었습니다.

기존 dev 브랜치와의 충돌 발견

  • 과거에 중단한 줄 알았던 현대화 작업이 실제로는 dev 브랜치에 일부 남아 있었습니다.
  • 현재 배포 환경은 main이 아니라 부분적으로 업데이트된 dev 브랜치를 사용하고 있었습니다.
  • 따라서 새 작업을 main에서 시작하면 기존 기능과 설정이 누락될 수 있었습니다.
  • 변경 규모가 커서 dev의 내용을 main으로 병합하기보다, 기존 PR을 닫고 dev에서 새 작업을 시작하는 편이 안전했습니다.
  • Copilot은 사용자의 지시에 따라:
    • 기존 세션의 PR을 닫고
    • dev에서 새 브랜치를 만들고
    • 기존 스타일·접근성 개선안을 새 기준에 맞게 다시 적용했습니다.

테스트 중 발견한 오래된 의존성 문제

  • 스타일 변경 후 테스트하는 과정에서 findDOMNode, componentWillReceiveProps 관련 경고가 나타났습니다.
  • 문제의 상당 부분은 애플리케이션 코드가 아니라 오래된 react-bootstrap에 있었습니다.
  • Copilot의 Plan 모드에 다음 두 가지 선택지를 검토하게 했습니다.
    • react-bootstrap을 업그레이드해 기존 컴포넌트를 마이그레이션하기
    • 라이브러리를 완전히 제거하고 현대적인 대체 구현으로 교체하기
  • 분석 결과, 기존 라이브러리를 유지하기보다 전체 교체하는 방향이 권장되었습니다.

스택 세션과 분리된 pull request

  • react-bootstrap 교체는 기존 스타일·접근성 작업과 관련이 있지만, 범위가 크게 늘어나는 별도 작업이었습니다.
  • AI를 활용하면 구현 비용이 낮아 보여 여러 문제를 한 번에 해결하고 싶어지지만, 결과적으로 1만 줄 규모의 거대한 PR이 될 수 있습니다.
  • 이를 방지하기 위해 작업을 다음처럼 나눴습니다.
    • 먼저 현재 스타일·접근성 작업을 하나의 PR로 제출
    • 해당 작업을 기반으로 새 세션과 브랜치를 생성
    • 새 세션에서 react-bootstrap 교체를 별도 PR로 진행
    • 첫 번째 PR을 dev에 병합한 뒤 두 번째 PR을 병합
  • 이렇게 각 세션이 이전 세션의 결과 위에 쌓이도록 구성하면 작업 간 의존성은 유지하면서도 변경 범위와 검토 단위를 작게 만들 수 있습니다.

실용적인 결론

  • AI에게 전체 프로젝트를 한 번에 현대화하게 하기보다, 기준 브랜치와 작업 범위를 먼저 확인하는 것이 중요합니다.
  • 스타일 개선, 의존성 교체, 기능 리팩터링을 각각 독립적인 세션과 PR로 나누면 테스트와 롤백이 쉬워집니다.
  • 특히 오래된 저장소에서는 현재 배포 브랜치가 무엇인지 확인한 뒤, 그 브랜치에서 새 세션을 시작하는 방식을 추천합니다.