수동 테스트의 늪에서 벗어나, 완벽한 자동화의 세계로
안녕하세요! 내 계좌와 코드를 튼튼하게 다지는 [계좌 리팩토링] 시리즈 13편입니다. 지난 12편에서 우리는 Playwright와 Storybook을 활용하여 대시보드 UI의 픽셀 하나까지 방어하는 든든한 VRT(시각적 회귀 테스트) 환경을 구축했습니다.
하지만 "테스트 코드를 짜는 것"과 "테스트를 꾸준히 돌리는 것"은 전혀 다른 문제입니다. 바쁘게 기능을 개발하다 보면 깜빡하고 pnpm exec playwright test를 로컬에서 실행하지 않은 채 코드를 원격 저장소에 Push 해버리는 실수가 반드시 발생합니다.
그래서 이번 시간에는 우리가 봇의 매매를 자동화했듯이, 테스트와 배포 과정마저 자동화(CI/CD) 해보겠습니다. GitHub 저장소에 코드를 올리기만 하면 알아서 가상 서버가 열리고 VRT를 수행해 주는 GitHub Actions 파이프라인 구축 과정을 소개합니다.
GitHub Actions란?
GitHub Actions는 GitHub에서 제공하는 강력한 자동화 툴입니다. 특정 이벤트(예: main 브랜치에 push 되거나 Pull Request가 열릴 때)가 발생하면, 우리가 미리 정의해 둔 작업(Job)들을 가상 머신(Runner) 위에서 순차적으로 실행해 줍니다.
1단계: Workflow 파일 작성하기
프로젝트 최상단 경로에 .github/workflows 폴더를 만들고, 그 안에 vrt-pipeline.yml이라는 파일을 생성하여 아래와 같이 작성합니다.
# .github/workflows/vrt-pipeline.yml
name: UI VRT Pipeline
# 어떤 이벤트가 발생했을 때 이 워크플로우를 실행할지 정의합니다.
on:
push:
branches: [ "main" ]
pull_request:
branches: [ "main" ]
jobs:
test:
timeout-minutes: 15
runs-on: ubuntu-latest # GitHub이 제공하는 우분투 가상 환경 사용
steps:
# 1. 저장소의 코드를 가상 머신으로 가져옵니다.
- name: Checkout repository
uses: actions/checkout@v4
# 2. Node.js 환경을 세팅합니다.
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
# 3. pnpm 설치 및 레지스트리 설정 (사내망/폐쇄망 환경 고려)
- name: Install pnpm & configure registry
run: |
npm install -g pnpm
# 💡 Pro Tip: 외부망 접근이 차단된 사내 환경이나 특정 Nexus 저장소를 바라봐야 한다면,
# GitHub Secrets에 URL을 등록하고 아래처럼 .npmrc를 세팅하여 의존성을 다운로드할 수 있습니다.
# pnpm config set registry ${{ secrets.NEXUS_REGISTRY_URL }}
# 4. 프로젝트 의존성 패키지를 설치합니다.
- name: Install dependencies
run: pnpm install
# 5. Playwright가 사용할 브라우저(크롬, 사파리 등) 엔진을 설치합니다.
- name: Install Playwright Browsers
run: pnpm exec playwright install --with-deps
# 6. Storybook을 빌드하고 VRT 테스트를 실행합니다.
- name: Run Storybook and VRT
run: |
pnpm run build-storybook
pnpm exec playwright test
# 7. 테스트 실패 시, 비교 이미지(Diff)가 담긴 리포트를 다운로드할 수 있게 저장합니다.
- name: Upload Playwright Report
if: always() # 성공하든 실패하든 항상 리포트를 업로드
uses: actions/upload-artifact@v4
with:
name: playwright-report
path: playwright-report/
retention-days: 72단계: 파이프라인의 마법 확인하기
위 파일을 커밋하고 GitHub 저장소에 Push 해보세요. GitHub 페이지 상단의 [Actions] 탭에 들어가 보면 UI VRT Pipeline이라는 작업이 빙글빙글 돌며 실행되는 것을 볼 수 있습니다.
- 테스트 성공 시 (초록색 체크 ✅): 새로 작성한 코드가 기존 대시보드 UI를 망가뜨리지 않았음이 증명되었습니다. 안심하고 운영 서버에 배포해도 좋습니다.
- 테스트 실패 시 (빨간색 엑스 ❌): 누군가 의도치 않게 레이아웃을 깨뜨렸습니다! 하단의
Artifacts섹션에서playwright-report.zip파일을 다운로드하여 열어보면, 어느 컴포넌트의 픽셀이 어긋났는지 정확한 Diff 이미지를 눈으로 확인할 수 있습니다.
3단계: 더 나아가서 (CD 연동)
지금은 CI(지속적 통합/테스트)까지만 구축했지만, 이 파이프라인의 끝에 배포(Deployment) 스텝을 추가하면 완벽한 CD(지속적 배포)가 완성됩니다.
예를 들어, VRT 테스트가 성공적으로 통과하면 SSH 접속 액션을 통해 운영 서버(또는 라즈베리파이)에 접속하여 git pull을 받고 pm2 restart stock-bot을 실행하도록 스크립트를 추가할 수 있습니다. 이렇게 되면 코드를 Push 하는 행위 자체만으로 테스트부터 서버 업데이트까지 논스톱으로 진행되는 기적을 맛보게 됩니다.
마무리: 시스템 트레이더이자 DevOps 엔지니어
처음에는 단순히 주식을 자동으로 사주는 스크립트로 시작했던 우리 프로젝트가, 어느덧 모던 프론트엔드 대시보드를 갖추고 GitHub Actions를 통한 CI/CD 파이프라인까지 탑재한 거대한 '시스템'으로 성장했습니다.
자동화의 진짜 매력은 사람의 실수를 원천 차단하고, 개발자가 '더 나은 매매 전략'이라는 본질적인 고민에만 집중할 수 있게 해준다는 데 있습니다. 여러분의 계좌뿐만 아니라, 엔지니어링 역량까지 멋지게 리팩토링 된 것을 진심으로 축하드립니다!