본격적인 프로젝트 시작

10주차: 실전 팀 빌딩 & README 기반 Git 협업

오늘의 수업 일정

1 QuizN: Git 기초 복습
2 1분 피칭 & 팀 매칭
3 실무형 직무 분배
4 Branch & Git 실습
Step 1. Warm-up

QuizN 스피드 복습 퀴즈

Git의 기본 명령어(add, commit, push) 등 핵심 개념을 점검합니다. 스마트폰 브라우저를 열고 대기해 주세요!

PIN 번호: 화면의 스크린을 확인하세요
Step 2. Team Building

아이디어 피칭 & 팀 매칭

선정된 아이디어 제안자들의 1분 피칭을 듣습니다. 이후 제공되는 Figma Jam 링크에 접속하여, 참여하고 싶은 프로젝트 보드에 자신의 이름표(포스트잇)를 붙여주세요!
(팀당 6명 내외 구성)

Step 3. 우리는 원팀! 직무 분배 💼

팀을 구성한 후, 프로젝트에 필요한 실무형 필수 역할을 나누어 맡습니다.
이력서와 포트폴리오에 당당히 기재할 수 있는 실제 IT 기업의 직무 명칭입니다.
인원수에 따라 두 가지 이상의 역할을 겸직하며 책임감을 가져봅시다!

Product Manager

프로젝트의 리더입니다. 핵심 기능이 산으로 가지 않도록 기획의 방향성을 꽉 잡아주는 역할을 합니다.

🎯 핵심 업무: 프로젝트 요구사항 정의 및 전체 일정 관리

산출물 예시 보기

📄 Notion 주간 칸반보드 관리

  • To-do지도 API 발급받기
  • 진행중룰렛 로직 구현
  • 완료디자인 시스템 픽스
💡 추천: 꼼꼼한 일정 관리와 팀 소통 능력이 뛰어난 분

Tech Lead

Git 마스터! 레포지토리를 관리하고, 코드 충돌이 났을 때 해결사로 활약합니다.

🎯 핵심 업무: PR 최종 코드 리뷰 및 브랜치 병합(Merge)

산출물 예시 보기

📄 GitHub PR 승인 내역

Approve 리뷰 완료.
#4 Pull Request 룰렛 기능
Merge pull request
💡 추천: 터미널 에러에 당황하지 않고 원인을 찾는 분

UI/UX Designer

서비스의 첫인상을 책임집니다. 디자인 시스템을 정하고 UI 설계(와이어프레임)를 주도합니다.

🎯 핵심 업무: 웹 디자인 가이드라인 및 와이어프레임 제작

산출물 예시 보기

📄 Figma 디자인 시스템

Font: Pretendard

Radius: 12px

💡 추천: 예쁜 레퍼런스 사이트 찾기를 즐기는 분

QA Engineer

버그 탐색기! PR이 올라오면 코드를 직접 실행해보고 남들이 놓친 빈틈을 날카롭게 찾아냅니다.

🎯 핵심 업무: 기기별 반응형 테스트 및 기능 버그 리포팅

산출물 예시 보기

📄 GitHub Issue 리포트

[Bug] 모바일 UI 깨짐
- 현상: 아이폰13에서 룰렛 이탈
High Priority
💡 추천: "이렇게 누르면 고장 나지 않을까?" 비판적 시각을 가진 분

Scrum Master

회의 진행자이자 타임키퍼. 팀의 규칙이 잘 지켜지는지 체크하고 원활한 소통을 이끌어냅니다.

🎯 핵심 업무: 정기 회의 주도 및 팀원 간 블로커(장애물) 파악

산출물 예시 보기

📄 Discord 데일리 회의록

✅ 어제: 기획서 작성 완료

🚧 오늘: 각자 뼈대 코드 작성

🚨 이슈: A팀원 노트북 고장

💡 추천: 팀의 텐션을 끌어올리고 회의 시간을 잘 지키는 분

Tech Writer

기록의 달인! 노션/디스코드 등 협업 공간을 세팅하고 깃허브 README의 최종 문맥을 깔끔하게 다듬습니다.

🎯 핵심 업무: 프로젝트 문서 정리, README 레이아웃 고도화

산출물 예시 보기

📄 팀 코드 컨벤션 문서화

# 커밋 메시지 규칙
- feat: 새로운 기능
- fix: 버그 수정
- design: CSS 변경
💡 추천: 평소 블로그나 문서 정리를 깔끔하게 잘 하시는 분

DevRel / Presenter

우리 프로젝트의 가치를 100% 돋보이게 포장하는 스토리텔러입니다.

🎯 핵심 업무: 데모 시연 시나리오 기획, 프로젝트 최종 발표

💡 추천: PPT 제작에 능하며, 시선을 사로잡는 스토리텔링을 좋아하는 분
산출물 예시 보기

📄 최종 데모 시연 대본

"여러분, 오늘 점심 정하셨나요? 5분 넘게 고민만 하다가 결국 가던 곳을 또 가지는 않으셨나요? 저희 팀은 이를 해결하기 위해..."

New Concept

Step 4. Git Branch와 PR 완벽 이해하기 🌳

무작정 명령어를 치기 전에, 우리가 왜 이런 복잡한 과정을 거치는지 '조별과제'에 비유하여 알아봅시다.

아찔했던 조별과제 PPT, 기억하시나요?

Git이 없을 때 (과거)

  • 1 누군가 실수로 원본 파일을 덮어써서 날아감
  • 2 파일명이 기획서_최종_진짜최종_이게마지막.docx 로 증식함
  • 3 서로 다른 부분을 수정해서 하나로 합치느라 밤을 샘

Git Branch와 PR (현재)

  • Branch
    원본(main)을 손상시키지 않는 '안전한 내 복사본' 생성
  • Commit
    작업 중 여러 번에 걸쳐 중간 저장(버전 기록)
  • PR
    작업 완료 후 쌓인 Commit들을 모아 "합쳐도 될까요?" 묻는 결재 서류
  • Merge
    승인이 떨어지면, Git이 알아서 안전하고 깔끔하게 융합

👇 버튼을 순서대로 눌러 작업 흐름을 눈으로 확인하세요

main (원본)
위 버튼을 1번부터 차례대로 클릭해 보세요!
The Main Activity

Step 5. 코드 없는 Git 실습: 기획서 작성 🚀

코드(HTML/JS)를 짜다가 충돌이 나면 당황하기 쉽습니다.
따라서, 우리는 글(Markdown)로 된 기획서인 README.md를 함께 작성하며,
Pull Request -> Code Review -> Merge -> 충돌 해결의 전체 사이클을 안전하게 경험해 봅니다.

VS Code 터미널 & Git Bash 세팅

윈도우의 기본 터미널(PowerShell) 대신 Git Bash를 사용하면 운영체제에 상관없이 동일한 환경에서 Git 명령어를 사용할 수 있습니다.

🛠️ Git Bash 기본 설정법

  1. VS Code에서 Ctrl + ` (백틱)을 눌러 터미널 열기
  2. 터미널 창 우측 상단의 + 버튼 옆 ˅ 기호 클릭
  3. Select Default Profile (기본 프로필 선택) 클릭
  4. 목록 중 Git Bash 선택
  5. 터미널 패널 우측 휴지통 아이콘으로 기존 창을 끄고, 다시 Ctrl + ` 를 눌러 새 터미널 열기 (bash 라고 뜨면 성공!)

미리 만든 빈 폴더를 VS Code로 연 상태에서 진행하세요. (파일 > 폴더 열기)

저장소 복사하기 (주소는 깃허브에서 복사)
git clone [저장소주소]
내 브랜치 생성 및 이동 (ex: feature/hong)
git checkout -b feature/[내이름]

💣 [미션] 의도적 충돌 유발하기 (by All)

아래 [기획서 템플릿]을 복사하여 작성할 때, 팀원들이 각자 다른 파트를 맡습니다.

💥 충돌 해결 미션
팀원 중 2명은 약속을 하고 파트 1. 기획 배경의 첫 번째 항목을 일부러 서로 다른 문장으로 작성해 봅니다. 둘 다 반영을 요청하고 병합 할 때 발생하는 충돌을 직접 경험해 보세요!

👀 리뷰 및 병합 (Merge) (by QA & Tech Lead)

요청이 올라오면 지정된 QA 담당자는 파일 변경 탭에서 내용을 확인하고 'Approve(승인)'를 남깁니다. 이후 Tech Lead가 화면을 공유하며 병합 버튼을 누릅니다.

🚑 충돌(Conflict) 해결 가이드

당황하지 마세요! 실무에서도 매일 일어나는 일입니다.

병합 시 에러가 났다면, VS Code 터미널에서 git pull origin main을 입력하여 충돌난 코드를 내 컴퓨터로 가져옵니다.

Accept Current Change | Accept Incoming Change | Accept Both Changes
<<<<<<< HEAD (Current Change)
내가 쓴 기획서 내용
=======
다른 팀원이 쓴 기획서 내용
>>>>>>> origin/main (Incoming Change)

위와 같이 VS Code 상단에 뜨는 수락 버튼(Accept ~)을 눌러 내용을 정리한 뒤, 다시 터미널에 add -> commit -> push 를 순서대로 입력하면 해결 완료입니다!

📋 기획서 템플릿 (README.md)

아래 텍스트를 복사하여 팀의 README.md에 덮어쓰고, 각자 파트를 나누어 상세히 채워보세요.

README.md Template

🚀 [프로젝트 명] (서비스 이름)

"여기에 서비스를 매력적으로 표현하는 한 줄 소개를 적어주세요."

🎯 1. 기획 배경 및 해결 과제

  • 현재 상황 및 문제점: (우리가 일상에서 겪고 있는 불편함을 구체적으로 적어주세요)
  • 우리가 제공할 해결책: (그 불편함을 우리 웹사이트가 어떻게 해결해 줄 것인지 적어주세요)

👤 2. 타겟 유저 페르소나

  • 인구통계학적 특성: (누가 주로 사용할 것인가요?)
  • 불편함: (그 사용자는 지금 무엇을 귀찮아하거나 힘들어하나요?)
  • 기대하는 것: (우리 웹사이트에서 무엇을 얻어가고 싶어할까요?)

⭐ 3. 핵심 기능

프론트엔드 환경에서 3주 내에 구현할 수 있는 핵심적인 기능 딱 3가지를 정의합니다.

  1. [기능명 1]: (이 기능이 무엇인지 유저의 입장에서 설명해주세요)
  2. [기능명 2]: (이 기능이 무엇인지 유저의 입장에서 설명해주세요)
  3. [기능명 3]: (이 기능이 무엇인지 유저의 입장에서 설명해주세요)

- 화면 설계, 기술 스택, 팀 규칙 등 나머지 항목은 복사본에서 확인하세요! -

Markdown 1분 요약

README 작성 시 자주 쓰는 문법입니다. 그대로 따라 쳐보세요!

제목 (Heading)

# 큰 제목
## 중간 제목

강조 (Bold / Italic)

**굵게** 또는 *기울임*

목록 (List)

- 리스트 항목 1
- 리스트 항목 2
- 들여쓰기 시 스페이스바 2번

인용구 (Blockquote)

> 인용할 텍스트 작성

코드 블록 (Code)

`짧은 코드 강조`

VS Code 미리보기 꿀팁

VS Code에서 README.md를 열고 아래 단축키를 누르면 우측에 미리보기 창이 열립니다.

Ctrl + Shift + V

Step 6. 이번 주 과제 안내

기획을 마쳤으니, 이제 '눈'으로 볼 차례입니다.

🎨 벤치마킹: 우리의 목표 시각화하기

다음 주 Figma 와이어프레임 실습을 위해, 우리 프로젝트와 가장 유사하거나 UI/UX 디자인으로 참고하고 싶은 레퍼런스(벤치마킹) 웹사이트를 개인당 2개씩 찾아오세요.

제출 방법 및 양식

  • 팀 Notion(또는 제출 공간)에 참고 사이트 링크와 메인 화면 캡처 업로드
  • 분석 3줄 요약 필수: "어떤 점이 좋았는지, 우리 프로젝트의 어떤 부분(컬러, 버튼 배치, 애니메이션 등)에 적용하고 싶은지" 작성

* 많이 보고 분석할수록 다음 주 기획 시간이 훨씬 단축되고 결과물의 수준이 올라갑니다!