03 TRACK 03 / TEAM COLLAB

팀 협업 · GitHub PR

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

만세하는 기상이
먼저 확인하세요 — 최종 제출은 구글 폼 업로드

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

1인 참가자라면 이 페이지는 참고만 하면 됩니다. 혼자 작업할 때는 브랜치·PR 없이 개발한 뒤 완성된 소스 코드를 구글 폼에 올리면 됩니다.

1

팀원 초대하기

팀으로 참가한다면 가장 먼저 저장소에 팀원을 초대합니다. GitHub 저장소 → Settings → Collaborators에서 팀원의 GitHub 계정을 추가하면, 각자 같은 저장소에 연결해 함께 작업할 수 있습니다.

왜 먼저? 팀원이 저장소에 접근할 수 있어야 이후 브랜치·PR로 함께 작업할 수 있습니다.
2

브랜치 만들기

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

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

기능 개발하기

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

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

커밋하기

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

Claude Code 프롬프트 예시
지금까지 변경한 내용을 커밋해줘. 메시지는 "바람 방향 화살표 컴포넌트 추가"로 해줘.
변경 사항을 커밋했습니다. 메시지: "바람 방향 화살표 컴포넌트 추가"
지금까지 커밋 기록을 보여줘.
총 3개의 커밋이 있습니다: (1) 초기 세팅 (2) 체감온도 슬라이더 추가 (3) 바람 방향 화살표 컴포넌트 추가
팁 큰 작업이 끝날 때마다 커밋하세요. 메시지는 무엇을 했는지 한 줄로 적습니다. 커밋은 되돌리기·기록용이며, 최종 소스 제출은 구글 폼 업로드이므로 커밋 히스토리 자체는 심사 대상이 아닙니다.
5

PR 올리기

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

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

리뷰 요청하기

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

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

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

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

리뷰 반영하기

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

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

머지(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번 줄에서 충돌이 발생했어요. 두 버전을 보여드릴게요. 어느 쪽을 유지할까요, 아니면 두 내용을 합칠까요?
두 내용 다 살려서 합쳐줘.
두 변경 사항을 합쳐서 충돌을 해결했습니다. 커밋했어요.
팀 작업 권장 흐름

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