BinaryZero
BinaryZero
BinaryZero
전체 방문자
오늘
어제
  • 분류 전체보기 (36)
    • AI 도구 리뷰 (8)
    • AI 개발 활용 (27)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 개인정보처리방침
  • 소개

공지사항

인기 글

태그

  • 개발생산성
  • ai 자동화
  • n8n설치
  • mcp서버
  • LLM
  • 노코드
  • n8n
  • 멀티에이전트
  • cursor ai
  • ai코딩
  • AI자동화
  • AI 코딩
  • Ollama
  • ai에이전트
  • 코딩에디터
  • claude
  • Playwright MCP
  • 바이브코딩
  • mcp 서버
  • ai개발도구

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
BinaryZero

BinaryZero

AI 개발 활용

GitHub Copilot Workspace로 이슈에서 PR까지 자동화하기 — 설정부터 실전 워크플로우까지

2026. 3. 27. 16:35

GitHub Copilot Workspace란 — 기존 Copilot을 뛰어넘다

GitHub Copilot Workspace는 단순한 코드 완성 도구가 아닙니다. 이슈 분석부터 코드 구현, 테스트, PR 생성까지 전체 개발 워크플로우를 AI가 자동화해주는 통합 개발 환경입니다. 기존의 GitHub Copilot Chat이 IDE 내에서 텍스트 기반 어시스턴트였다면, Copilot Workspace는 브라우저 기반의 전체 개발 사이클을 담당합니다.

전통적인 워크플로우를 보면:

GitHub 이슈 발견
  ↓
로컬에서 리포 클론
  ↓
브랜치 생성
  ↓
코드 편집 (IDE 실행)
  ↓
테스트 실행
  ↓
커밋 및 푸시
  ↓
PR 생성
  ↓
코드 리뷰

이제 Copilot Workspace로는:

GitHub 이슈 링크 클릭
  ↓
Workspace에서 구현 계획 자동 생성
  ↓
AI가 코드 구현
  ↓
테스트 자동 실행
  ↓
PR 자동 생성 및 AI 리뷰

이 글에서는 실제 프로젝트에 Copilot Workspace를 적용하는 방법을 깊이 있게 다룹니다. 설정부터 실전 워크플로우, 트러블슈팅까지 모든 것을 다룹니다.

Copilot Workspace 활성화 및 초기 설정

Copilot Workspace를 사용하려면 먼저 GitHub에서 활성화해야 합니다.

1단계: GitHub에서 Workspace 베타 접근 신청

GitHub Settings에 들어가서 Copilot 설정을 확인합니다:

1. https://github.com/settings/copilot 접속
2. "Copilot Workspace" 섹션 찾기
3. "Enable Copilot Workspace" 버튼 클릭
4. 베타 신청 완료될 때까지 대기 (보통 24-48시간)

활성화되면 이슈 페이지에 "Open in Copilot Workspace" 버튼이 나타납니다.

2단계: 리포지토리 설정

Copilot Workspace가 제대로 작동하려면 리포에 기본 설정이 필요합니다. .github/workflows 디렉토리 구조를 확인하세요:

.github/
├── workflows/
│   ├── test.yml
│   ├── lint.yml
│   └── ci.yml
└── CODEOWNERS

CI/CD 파이프라인이 잘 정의되어 있을수록 Copilot이 더 정확하게 동작합니다.

3단계: Personal Access Token 설정

Copilot Workspace가 자동으로 PR을 생성하려면 적절한 권한이 필요합니다:

1. https://github.com/settings/tokens?type=beta 접속
2. "Generate new token (beta)" 클릭
3. 다음 권한 체크:
   - repo (전체)
   - workflow
   - read:org
4. Expiration: 90 days 설정
5. "Generate token" 클릭
6. 토큰 복사 및 안전하게 저장

이슈에서 구현 계획 자동 생성

Copilot Workspace의 강점은 이슈를 분석해서 자동으로 구현 계획을 세운다는 것입니다.

실제 예시: 사용자 인증 버그 수정

다음과 같은 이슈가 있다고 가정합니다:

제목: JWT 토큰 만료 후 자동 갱신 안 됨
설명:
1. 사용자가 로그인 후 토큰 받음
2. 토큰 만료 직전에 요청을 하면
3. 새 토큰으로 자동 갱신되어야 함
4. 현재는 401 Unauthorized 반환

### 예상 동작
GET /api/profile → 자동으로 토큰 갱신 후 프로필 반환

### 실제 동작
GET /api/profile → 401 반환, 갱신 안 됨

이 이슈를 Copilot Workspace에서 열면:

[Copilot의 분석 결과]

## Identified Problem
- Token refresh middleware가 401 요청에 대해 자동으로 동작하지 않음
- refresh_token 저장 로직 누락

## Implementation Plan
1. auth.middleware.js 수정: 401 응답 처리
2. tokenRefresh() 함수 추가
3. store에 refresh_token 저장
4. 기존 인증 플로우 통합
5. 테스트 케이스 작성

## Files to Modify
- src/middleware/auth.middleware.js
- src/services/auth.service.js
- src/store/index.js
- tests/auth.test.js

이 계획은 Copilot이 리포의 구조를 분석해서 자동으로 생성합니다.

Workspace에서 코드 수정 및 테스트

자동 생성된 코드 예시

Copilot Workspace가 생성할 수 있는 코드는 다음과 같습니다:

// src/middleware/auth.middleware.js
import { tokenService } from '../services/token.service.js';

export const authMiddleware = (req, res, next) => {
  const token = req.headers.authorization?.split(' ')[1];

  if (!token) {
    return res.status(401).json({ error: 'No token' });
  }

  try {
    const decoded = tokenService.verify(token);
    req.user = decoded;
    next();
  } catch (error) {
    if (error.name === 'TokenExpiredError') {
      // 토큰 갱신 시도
      const refreshToken = req.cookies.refreshToken;

      if (!refreshToken) {
        return res.status(401).json({ error: 'No refresh token' });
      }

      try {
        const newToken = tokenService.refresh(refreshToken);
        res.cookie('token', newToken, { httpOnly: true });
        req.headers.authorization = `Bearer ${newToken}`;
        req.user = tokenService.verify(newToken);
        next();
      } catch (refreshError) {
        return res.status(401).json({ error: 'Token refresh failed' });
      }
    } else {
      return res.status(401).json({ error: 'Invalid token' });
    }
  }
};

Workspace 내에서 이 코드를 검토하고 필요하면 수정할 수 있습니다. "Run Tests" 버튼을 클릭하면 자동으로 테스트가 실행됩니다:

$ npm test -- src/middleware/auth.middleware.test.js

  ✓ should verify valid token
  ✓ should throw on expired token
  ✓ should auto-refresh token
  ✓ should fail if refresh token missing
  ✓ should handle refresh token expiry

5 passing (234ms)

테스트 코드 자동 생성

Copilot Workspace는 테스트 코드도 자동으로 생성합니다:

// src/middleware/auth.middleware.test.js
import { describe, it, expect, beforeEach, afterEach } from 'vitest';
import { authMiddleware } from './auth.middleware.js';
import { tokenService } from '../services/token.service.js';

describe('authMiddleware', () => {
  let req, res, next;

  beforeEach(() => {
    req = {
      headers: {},
      cookies: {},
    };
    res = {
      status: (code) => {
        res.statusCode = code;
        return res;
      },
      json: (data) => {
        res.body = data;
        return res;
      },
      cookie: (name, value) => res,
    };
    next = vi.fn();
  });

  it('should verify valid token', () => {
    const token = tokenService.sign({ userId: 1 });
    req.headers.authorization = `Bearer ${token}`;

    authMiddleware(req, res, next);

    expect(next).toHaveBeenCalled();
    expect(req.user.userId).toBe(1);
  });

  it('should auto-refresh token on expiry', () => {
    const expiredToken = tokenService.sign(
      { userId: 1 },
      { expiresIn: '1ms' }
    );
    const refreshToken = tokenService.sign(
      { userId: 1, type: 'refresh' },
      { expiresIn: '30d' }
    );

    req.headers.authorization = `Bearer ${expiredToken}`;
    req.cookies.refreshToken = refreshToken;

    authMiddleware(req, res, next);

    expect(next).toHaveBeenCalled();
  });
});

PR 자동 생성 및 AI 코드 리뷰 연동

Copilot Workspace에서 코드 수정을 완료하면, "Create Pull Request" 버튼이 활성화됩니다.

PR 생성 프로세스

버튼을 클릭하면 다음과 같이 진행됩니다:

1. 브랜치 자동 생성
   브랜치명: copilot-workspace/fix-token-refresh-{timestamp}

2. 변경사항 자동 커밋
   커밋 메시지: "fix: auto-refresh JWT token on expiry"

3. PR 자동 생성
   제목: "Fix: auto-refresh JWT token on expiry"
   본문: 변경사항 요약 및 테스트 결과 포함

4. CI/CD 자동 트리거
   - 린트 체크
   - 단위 테스트
   - 통합 테스트
   - 빌드 검증

생성된 PR의 본문 예시:

## Fix: auto-refresh JWT token on expiry

### Changes
- Modified `auth.middleware.js` to handle token expiration
- Added `tokenRefresh()` function in `auth.service.js`
- Updated cookie handling for refresh token persistence
- Added comprehensive test coverage

### Related Issue
Fixes #1234

### Testing
- All existing tests pass
- New test cases added for token refresh flow
- Manual testing completed

### Checklist
- [x] Tests pass
- [x] No linting errors
- [x] Documentation updated

GitHub Actions와 CI/CD 연동

Copilot Workspace가 생성한 PR에 자동으로 CI/CD 파이프라인이 실행됩니다. 최적의 자동화를 위해 GitHub Actions 워크플로우를 구성해야 합니다:

name: Copilot Workspace CI

on:
  pull_request:
    branches: [main, develop]

jobs:
  test:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.x, 20.x]

    steps:
      - uses: actions/checkout@v3

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Run linter
        run: npm run lint

      - name: Run tests
        run: npm test

      - name: Build
        run: npm run build

      - name: Upload coverage
        uses: codecov/codecov-action@v3
        with:
          files: ./coverage/coverage-final.json

  copilot-review:
    runs-on: ubuntu-latest
    if: github.event.pull_request.author == 'copilot'

    steps:
      - uses: actions/checkout@v3

      - name: AI Code Review
        run: |
          echo "Copilot-generated PR detected"
          echo "Performing additional security checks..."

이 워크플로우를 .github/workflows/copilot-ci.yml에 저장하세요.

실전 워크플로우: 버그 리포트 → 핫픽스 PR 자동화

실제 시나리오를 단계별로 따라해봅시다.

단계 1: 버그 이슈 생성

GitHub 리포의 Issues 탭에서 새 이슈를 생성합니다:

제목: 프로필 페이지 로딩 시간이 10초 이상 걸림

본문:
## 문제
프로필 페이지(/profile)를 열면 10초 이상 로딩 시간이 소요됨

## 재현 방법
1. 메인 페이지에서 "프로필" 클릭
2. 페이지가 로드될 때까지 기다림
3. 네트워크 탭에서 요청 시간 확인

## 환경
- 브라우저: Chrome 최신
- 네트워크: 4G
- 예상 로딩 시간: 2초 이내

## 스크린샷
[Network waterfall 스크린샷]

라벨: bug, performance, high-priority

단계 2: Workspace에서 열기

이슈 페이지에서 "Open in Copilot Workspace" 버튼을 클릭하면:

[Copilot 분석]

## Problem Analysis
GET /api/profile이 8초 소요 - DB 쿼리 N+1 문제 발생

## Root Cause
- 사용자 정보 조회: 1쿼리
- 사용자의 팔로워 조회: 팔로워당 1쿼리 (N개)
- 사용자의 팔로잉 조회: 팔로잉당 1쿼리 (N개)

총 쿼리: 1 + N + M = 심각한 성능 저하

## Solution
- JOIN을 사용해서 단일 쿼리로 통합
- 데이터베이스 인덱스 추가
- 캐싱 레이어 추가

단계 3: 자동 수정 적용

Workspace에서 "Apply Fix" 버튼을 클릭하면 다음 코드가 자동으로 생성됩니다:

// routes/profile.js - BEFORE
app.get('/api/profile/:userId', async (req, res) => {
  const user = await User.findById(req.params.userId);
  const followers = await Follower.find({ followingId: user._id });
  const followings = await Following.find({ followerId: user._id });

  res.json({
    ...user,
    followers: followers.map(f => f.followerId),
    followings: followings.map(f => f.followingId),
  });
});

// routes/profile.js - AFTER
app.get('/api/profile/:userId', async (req, res) => {
  const user = await User.findById(req.params.userId)
    .populate('followers', 'name email')
    .populate('followings', 'name email')
    .lean();

  // Redis 캐시 추가
  const cacheKey = `profile:${req.params.userId}`;
  await redis.setex(cacheKey, 3600, JSON.stringify(user));

  res.json(user);
});

데이터베이스 인덱스 마이그레이션 스크립트도 자동으로 생성됩니다:

// migrations/add-profile-indexes.js
export async function up(db) {
  await db.collection('users').createIndex({ '_id': 1 });
  await db.collection('followers')
    .createIndex({ 'followingId': 1, 'followerId': 1 });
  await db.collection('followings')
    .createIndex({ 'followerId': 1, 'followingId': 1 });
}

export async function down(db) {
  await db.collection('followers').dropIndex('followingId_1_followerId_1');
  await db.collection('followings').dropIndex('followerId_1_followingId_1');
}

단계 4: 성능 테스트 자동 실행

Workspace의 "Run Tests" 버튼으로 성능 테스트가 자동 실행됩니다:

$ npm run test:performance

  Profile API Performance Tests
    ✓ GET /api/profile 응답시간 < 500ms (실제: 120ms)
    ✓ 1000명의 팔로워가 있을 때 < 500ms (실제: 145ms)
    ✓ 동시 요청 100개 처리 < 2초 (실제: 890ms)
    ✓ 캐시 히트율 > 80% (실제: 89%)

4 passing (2.3s)

성능 개선: 8000ms → 120ms (98.5% 개선)

단계 5: PR 자동 생성 및 병합

"Create Pull Request" 버튼을 클릭하면:

✓ Branch created: copilot-workspace/fix-profile-performance-2026-03-27
✓ Code committed
✓ PR #1567 created
✓ CI/CD pipeline started

PR Details:
- Title: Fix: optimize profile API performance (N+1 query issue)
- Status: Ready for review
- Files changed: 3
- Tests: All passing

트러블슈팅 — 자주 발생하는 문제와 해결법

문제 1: "Workspace에서 생성한 코드가 기존 코드와 충돌"

원인: Copilot Workspace가 최신 코드베이스를 제대로 인식하지 못함

해결법:

1. Workspace를 닫고 다시 열기
2. 이슈 페이지를 새로고침 (Ctrl+Shift+R)
3. Workspace 설정에서 "Sync with latest main" 클릭
4. 필요하면 main 브랜치를 명시적으로 지정:
// .github/copilot-workspace.json
{
  "baseBranch": "main",
  "autoSync": true,
  "syncInterval": 30
}

문제 2: "테스트가 실패했는데 원인을 모를 때"

원인: Copilot Workspace의 테스트 실행 환경과 로컬 환경이 다름

해결법:

// 로컬에서 동일한 환경으로 테스트
$ npm test -- --reporter=verbose

// 환경 변수 확인
$ cat .env.test
NODE_ENV=test
DATABASE_URL=mongodb://localhost/test
REDIS_URL=redis://localhost:6379/1

// Docker로 동일 환경 구성
$ docker-compose -f docker-compose.test.yml up
$ npm test

문제 3: "PR이 생성되지 않음"

원인: GitHub Personal Access Token 권한 부족

해결법:

// 토큰 권한 재확인
curl -H "Authorization: token YOUR_TOKEN" \
  https://api.github.com/user \
  -v

// 응답에서 X-OAuth-Scopes 헤더 확인
X-OAuth-Scopes: repo, workflow, read:org

// 부족한 권한이 있으면 새 토큰 생성
1. https://github.com/settings/tokens 접속
2. 기존 토큰 삭제
3. 새 토큰 생성할 때 모든 권한 확인
4. Workspace 설정에서 토큰 업데이트

문제 4: "Copilot이 생성한 코드가 프로젝트 스타일을 따르지 않음"

원인: ESLint/Prettier 설정이 Workspace에 제대로 로드되지 않음

해결법:

// .eslintrc.json이 리포 루트에 있는지 확인
{
  "env": {
    "node": true,
    "es2021": true
  },
  "extends": ["eslint:recommended"],
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

// .prettierrc도 설정
{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true
}

// Workspace에서 "Lint and Format" 버튼 클릭
// 자동으로 설정 파일을 읽고 코드 정렬

문제 5: "자동 생성된 PR이 CI 실패"

원인: Copilot Workspace의 테스트 환경과 GitHub Actions의 환경 불일치

해결법:

// GitHub Actions 워크플로우에 로깅 추가
- name: Debug Information
  run: |
    echo "Node version: $(node -v)"
    echo "NPM version: $(npm -v)"
    echo "Environment: $NODE_ENV"
    npm list --depth=0

// 실패한 PR에서 "View logs" 클릭
// 로그에서 정확한 오류 메시지 확인

// 로컬에서 동일한 Node 버전으로 테스트
$ nvm use 20.10.0
$ npm ci
$ npm test

팁과 최적화 — Workspace 활용 극대화

팁 1: 이슈 작성 시 명확한 설명이 중요

Copilot Workspace의 분석 품질은 이슈 설명에 따라 결정됩니다:

// 나쁜 예
제목: 버그 있음

// 좋은 예
제목: 사용자 프로필 업데이트 시 이메일 필드가 저장되지 않음

본문:
## 문제
- 프로필 수정 페이지에서 이메일을 변경해도 저장되지 않음
- 다른 필드(이름, 생년월일)는 정상적으로 저장됨

## 재현 방법
1. 프로필 수정 페이지 이동
2. 이메일 필드 수정
3. 저장 클릭
4. 페이지 새로고침 → 원래 이메일로 돌아옴

## 환경
- 브라우저: Chrome
- OS: macOS

## 스택 추적
[콘솔 에러 메시지]

팁 2: 여러 파일 수정이 필요하면 명시적으로 지정

제목: 사용자 인증 토큰 만료 시간 조정

본문:
## 현재 동작
- 토큰 만료: 1시간
- 갱신 토큰 만료: 7일

## 요청 사항
만료 시간을 다음과 같이 변경:
- 토큰 만료: 30분
- 갱신 토큰 만료: 30일

## 수정 필요 파일
1. src/config/auth.config.js - 상수 변경
2. src/services/auth.service.js - JWT 서명 부분
3. tests/auth.test.js - 타임아웃 관련 테스트 업데이트
4. docs/API.md - API 문서 업데이트

팁 3: "Review Changes" 기능으로 세밀한 조정

Workspace에서 자동 생성된 코드를 "Review" 탭에서 확인하고:

- 각 파일 변경사항 확인
- "Modify" 버튼으로 특정 부분 수정
- "Explain" 버튼으로 수정 이유 확인
- "Reject" 버튼으로 특정 파일 제외

// 예: 마이그레이션 스크립트가 필요 없으면
[마이그레이션 파일] → "Reject" 클릭

팁 4: 반복적인 수정에는 Workspace 템플릿 생성

// .github/copilot-templates/bug-fix.md
# Bug Fix Template

## Problem Analysis
[Copilot이 문제를 분석합니다]

## Solution Steps
1. Identify root cause
2. Write failing test
3. Implement fix
4. Verify with existing tests
5. Add edge case tests

## Files to Check
- src/
- tests/
- docs/

이 템플릿을 사용하면 Copilot이 일관된 접근 방식을 따릅니다.

팁 5: 성능 모니터링 CI 추가

// .github/workflows/performance-check.yml
name: Performance Check

on:
  pull_request:

jobs:
  benchmark:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm ci

      - name: Run benchmarks
        run: npm run benchmark

      - name: Compare with main
        run: |
          npm run benchmark > current.json
          git fetch origin main
          git checkout origin/main
          npm ci
          npm run benchmark > baseline.json
          node scripts/compare-benchmarks.js baseline.json current.json

팁 6: 보안 스캔 자동화

// .github/workflows/security.yml
name: Security Scan

on:
  pull_request:

jobs:
  security:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Run security audit
        run: npm audit --audit-level=moderate

      - name: SAST with Semgrep
        uses: returntocorp/semgrep-action@v1

      - name: Dependency check
        run: |
          npx snyk test --severity-threshold=high

팁 7: Copilot Workspace 후크 활용

// .github/copilot-workspace-hooks.js
module.exports = {
  // PR 생성 전 실행
  beforeCreatePR: async (context) => {
    console.log('PR 생성 전 검증...');

    // 커밋 메시지 형식 확인
    if (!context.commits[0].message.match(/^(feat|fix|docs|style|refactor|perf|test):/)) {
      throw new Error('Conventional commit 형식을 따라주세요');
    }

    return true;
  },

  // PR 생성 후 실행
  afterCreatePR: async (context) => {
    console.log(`PR #${context.pr.number} 생성됨`);

    // Slack 알림 전송
    await notifySlack({
      message: `Copilot Workspace PR 생성: ${context.pr.title}`,
      channel: '#dev-notifications'
    });
  }
};

마치며

GitHub Copilot Workspace는 개발 생산성을 크게 향상시킬 수 있는 강력한 도구입니다. 하지만 단순히 버튼을 클릭하는 것만으로는 부족합니다. 명확한 이슈 작성, 적절한 CI/CD 설정, 그리고 생성된 코드의 검토 과정이 중요합니다.

실제 프로젝트에서는:

1. 작은 버그 수정부터 시작
2. 생성된 코드의 품질 평가
3. 팀 내 가이드라인 수립
4. 점진적으로 더 복잡한 작업 자동화

이렇게 단계적으로 접근하면 Copilot Workspace를 최대한 효과적으로 활용할 수 있습니다.


이 글에 소개된 서비스와 도구는 작성 시점 기준이며, 업데이트에 따라 변경될 수 있습니다.

'AI 개발 활용' 카테고리의 다른 글

n8n + Claude API 연동해서 AI 자동화 워크플로우 만들기 — 설치부터 실전 노드 구성까지  (0) 2026.04.01
Claude Desktop에 Playwright MCP 서버 연결해서 웹 자동화하기 — 설치부터 실전 스크립트까지  (0) 2026.03.31
Windsurf에서 Cascade 기능으로 멀티파일 리팩토링하기 — 설치부터 실전 활용까지  (0) 2026.03.27
Continue.dev 설치해서 VS Code에서 로컬 AI 코딩 어시스턴트 쓰기 — Ollama 연동부터 커스텀 프롬프트까지  (0) 2026.03.26
Supabase MCP 서버로 Claude에서 직접 DB 쿼리하기 — 설치부터 실전 활용까지  (0) 2026.03.26
    'AI 개발 활용' 카테고리의 다른 글
    • n8n + Claude API 연동해서 AI 자동화 워크플로우 만들기 — 설치부터 실전 노드 구성까지
    • Claude Desktop에 Playwright MCP 서버 연결해서 웹 자동화하기 — 설치부터 실전 스크립트까지
    • Windsurf에서 Cascade 기능으로 멀티파일 리팩토링하기 — 설치부터 실전 활용까지
    • Continue.dev 설치해서 VS Code에서 로컬 AI 코딩 어시스턴트 쓰기 — Ollama 연동부터 커스텀 프롬프트까지
    BinaryZero
    BinaryZero
    에이전틱 AI 시대, 개발 생산성을 10배 높이는 노하우를 공유합니다. Cursor AI, Claude Code, MCP 서버 구축부터 로컬 LLM 활용법까지 최신 AI 개발 도구와 실전 코딩 자동화 기술을 다루는 테크 블로그입니다.

    티스토리툴바