03 TRACK 03 / TEAM COLLAB

팀 협업 · GitHub PR

팀원이 각자 다른 기능을 개발할 땐 브랜치를 나눠 작업하고 PR로 합칩니다. Claude Code에게 말로 시키면 브랜치 생성부터 PR까지 전부 대신 해줘요. 각 단계 프롬프트를 그대로 복사해서 쓰세요.

만세하는 기상이
먼저 확인하세요 — 최종 제출은 Google Drive

최종 소스 코드는 Google Drive에 업로드해 제출합니다. 아래 GitHub PR 협업 방법은 팀(2인 이상)이 서로 방해 없이 함께 개발할 때를 위한 안내예요.

1인 참가자라면 이 페이지는 참고만 하면 됩니다. 혼자 작업할 땐 브랜치·PR 없이 그냥 개발하고, 완성된 소스 코드를 Google Drive에 올리면 돼요.

PR이 뭔가요?

Pull Request — 내가 만든 브랜치의 변경 내용을 팀의 메인 코드에 합치자고 요청하는 것. 팀원이 검토하고 OK하면 합쳐집니다. 충돌 없이 협업하는 표준 방식이에요.

1

브랜치 만들기

기능 개발을 시작할 때 main과 분리된 브랜치를 먼저 만듭니다. 각자 다른 브랜치에서 작업하면 서로 방해받지 않아요.

Claude Code 프롬프트 예시
새 브랜치를 만들어줘. 브랜치 이름은 feature/wind-chart 로 해줘.
feature/wind-chart 브랜치를 만들고 이동했습니다. 이제 이 브랜치에서 작업하면 됩니다.
지금 어느 브랜치에서 작업 중인지 알려줘.
현재 feature/wind-chart 브랜치에서 작업 중입니다.
브랜치 이름 규칙 feature/기능명 형태가 일반적입니다. 예: feature/typhoon-map, feature/rainfall-slider, fix/api-error
2

기능 개발하기

브랜치 위에서 기능을 개발합니다. 평소처럼 Claude Code에게 말로 요청하면 돼요.

Claude Code 프롬프트 예시
바람 방향을 0~360도 슬라이더로 조절하면 화살표가 회전하는 인터랙티브 컴포넌트를 만들어줘. index.html에 추가해줘.
바람 방향 슬라이더와 회전 화살표를 index.html에 추가했습니다.
화살표 색깔을 풍속에 따라 파랑(약)→주황(보통)→빨강(강)으로 바꿔줘.
풍속에 따라 색상이 바뀌도록 수정했습니다. 5m/s 이하 파랑, 10m/s 이하 주황, 그 이상 빨강으로 적용했어요.
3

커밋하기

작업한 내용을 중간중간 저장(커밋)합니다. 커밋은 "이 시점까지의 스냅샷". 문제가 생기면 이 시점으로 되돌아올 수 있어요.

Claude Code 프롬프트 예시
지금까지 변경한 내용을 커밋해줘. 메시지는 "바람 방향 화살표 컴포넌트 추가"로 해줘.
변경 사항을 커밋했습니다. 메시지: "바람 방향 화살표 컴포넌트 추가"
지금까지 커밋 기록을 보여줘.
총 3개의 커밋이 있습니다: (1) 초기 세팅 (2) 체감온도 슬라이더 추가 (3) 바람 방향 화살표 컴포넌트 추가
팁 큰 작업이 끝날 때마다 커밋하세요. 메시지는 "무엇을 했는지" 한 줄로. 커밋 히스토리는 심사·표절 검증에 활용됩니다.
4

PR 올리기

기능 개발이 끝나면 검토를 요청하는 PR을 올립니다. Claude Code가 제목과 설명까지 자동 작성해줘요.

Claude Code 프롬프트 예시
feature/wind-chart 브랜치를 main에 합치는 PR을 올려줘. 제목은 "바람 방향 시각화 기능 추가"로 해줘.
PR을 생성했습니다. 제목: "바람 방향 시각화 기능 추가". GitHub에서 확인하실 수 있습니다.
PR 설명에 "기온/풍속 슬라이더에 더해 바람 방향 화살표를 추가했고, 풍속에 따라 색이 바뀝니다"라고 써줘.
PR 설명을 업데이트했습니다.
5

리뷰 요청하기

PR을 올린 뒤 팀원에게 리뷰를 요청합니다. Claude Code에게 팀원 GitHub 아이디를 알려주면 리뷰어로 지정해줘요.

Claude Code 프롬프트 예시
이 PR에 영욱님 리뷰를 요청해줘.
PR에 ywkim님을 리뷰어로 추가했습니다.

또는 GitHub 웹에서 직접 요청하기

  1. GitHub에서 PR 페이지를 엽니다
  2. 오른쪽 사이드바 Reviewers 옆 톱니바퀴(⚙️) 클릭
  3. 드롭다운에서 리뷰를 요청할 팀원 선택
  4. 선택 즉시 그 팀원에게 리뷰 요청 알림이 전송됩니다
팁 PR 올리면서 리뷰 요청까지 한 번에: "feature/wind-chart 브랜치를 main에 합치는 PR 올리고, 영욱님 리뷰도 요청해줘."
6

리뷰 반영하기

팀원이 수정 요청(리뷰)을 남기면, 그 내용을 Claude Code에게 전달해 반영합니다.

Claude Code 프롬프트 예시
PR 리뷰에서 "슬라이더 범위를 0~360도로 바꾸고, 현재 방향을 숫자로도 표시해달라"는 요청이 왔어. 반영해줘.
슬라이더 범위를 0~360도로 수정하고, 현재 각도를 숫자로 표시하는 텍스트를 추가했습니다. 커밋했어요.
리뷰어가 남긴 코멘트에 "반영했습니다"라고 답글 달아줘.
PR 코멘트에 답글을 달았습니다.
리뷰 내용은 GitHub PR 페이지에서 확인한 뒤, 그대로 복사해서 Claude Code에게 전달하면 됩니다.
7

머지(Merge)하기

리뷰가 완료되고 승인을 받으면 main 브랜치에 합칩니다. 머지 후 Vercel이 자동으로 최신 버전을 다시 배포해요.

Claude Code 프롬프트 예시
리뷰 다 반영했어. PR을 main에 머지해줘.
PR을 main에 머지했습니다. Vercel이 자동으로 최신 버전을 배포합니다.
머지된 feature/wind-chart 브랜치는 삭제해줘.
feature/wind-chart 브랜치를 삭제했습니다.
머지 후 Vercel 배포 주소를 다시 열어 기능이 정상 동작하는지 꼭 확인하세요.
Trouble Shooting
!

충돌(Conflict)이 생겼을 때

두 팀원이 같은 파일의 같은 부분을 동시에 수정하면 충돌이 생깁니다. 겁먹지 말고 Claude Code에게 그대로 알려주면 돼요.

Claude Code 프롬프트 예시
머지하려는데 충돌이 생겼어. 어떻게 해결해?
충돌 파일을 확인했습니다. index.html의 45~52번 줄에서 충돌이 발생했어요. 두 버전을 보여드릴게요. 어느 쪽을 유지할까요, 아니면 두 내용을 합칠까요?
두 내용 다 살려서 합쳐줘.
두 변경 사항을 합쳐서 충돌을 해결했습니다. 커밋했어요.
!

Push할 때 SSH 키 에러가 날 때

새 브랜치를 올릴 때 "Permission denied (publickey)" 에러가 날 수 있습니다. 웹 Claude Code는 개인 SSH 키를 전혀 쓰지 않고 GitHub App 연결로 인증하기 때문에, 이 에러는 거의 항상 App 설치·권한 문제입니다.

  1. App이 이 저장소에 설치되지 않은 경우 — 다른 저장소만 연결했거나, 새 저장소 후 App 연결을 갱신하지 않은 경우.
  2. App 권한이 읽기 전용인 경우 — 쓰기(write) 권한을 허용하지 않으면 push에서 거부됩니다.

GitHub App 설치·권한 다시 연결하기

  1. GitHub 프로필 → Settings → Applications → Installed GitHub Apps
  2. Claude(연결된 App) 옆 Configure 클릭
  3. Repository access에 작업 중인 저장소가 포함됐는지 확인 (없으면 Select repositories로 추가)
  4. 권한에서 Contents: Read and write, Pull requests: Read and write 허용 확인
  5. claude.ai/code로 돌아와 "+ 레포 선택..."으로 저장소를 다시 선택
핵심 웹 환경에서는 SSH 키를 직접 만들거나 바꿀 필요가 없습니다. "SSH"·"publickey"가 보여도, 해결은 항상 GitHub App 설치 화면에서 저장소·권한 다시 확인입니다.
팀 작업 권장 흐름

기능별로 브랜치를 나눈다 → 각자 개발 후 PR → 팀원 1명 이상 리뷰 → 머지 → Vercel 자동 배포. main 브랜치에는 항상 동작하는 코드만 유지하는 게 원칙입니다.