회고1 / 피로그래밍22기 1차 팀과제

아르샤 사이트 (https://bootstrapmade.com/demo/Arsha/) 클론코딩하는 과제다. HTML, CSS만 사용 가능하며 외부 라이브러리 및 JS는 사용 불가하다.

내 첫 협업이고 첫 팀장이 되었다.

협업 경험이 없어서 뭘 어떻게 해야할 지 몰라서 느낌 가는 대로 하게 되었다.

 

팀이 정해지고 첫 회의에서는 다음 내용들을 정했다

• 각자 구현할 섹션 분배
  • 난이도 고려를 약간 해서, 제일 어려워 보이는 파트만 제비뽑기로 한명 골랐고, 나머지 인원은 나머지 파트를 사다리타기로 정했다.
  • 랜덤 좋은 점: 팀원간 파악이 덜 된 상황에서 모두가 납득할 만한(납득해야만 하는) 역할 배분 가능. + 빠름 + 재밌음!!
  • 랜덤 단점: 각자의 강점 발휘가 어려움
• Convention
  • branches: main, develop, feature: feaure/name에서 각자 개발, develop으로 1차 merge, main에 최종 merge
  • html class name: 자기이니셜--클래스이름
• 1차적 구현 대상 확실히 정함
  • 가장 큰 화면 pixel 기준으로 cloning
  • 전체 섹션 단위의 애니메이션은 구현 X
  • 섹션 내부에서의 여러 효과들(hover, 애니메이션 등)은 구현O
• 전체 타임라인 결정
  • 다음 회의 일정, 최종 merge 일정

 

2차 회의를 마친 시점에서, '이런 것들'을 맨 처음에 정해놨으면 좋았겠다는 생각을 했다.

• 전체 프로젝트 디렉토리 구조 (/src라든지 /img라든지)
• main이 되는 index.html 스켈레톤 코드.
  • 한 파일에서 모두가 작업해야 하므로 충돌이 나는 것을 막기 위해서는 미리 스켈레톤으로 각자 영역을 나눠놨으면 좋았을 것 같다.
• 여러 섹션에서 공통적으로 나타나는 컴포넌트를 뽑아서 담당자 배정
• 주요 변수 설정
  • 색상, 폰트, 섹션별 padding이나 margin값들 등
• class name, file name 등의 convention을 정한 건 좋은데 (일단 자기 이니셜 넣으므로 충돌 절대 안 남) prefix로 이니셜 넣는 건 여러모로(가독성, 실제프로젝트라면 진짜최악일듯) 안 좋았던 것 같다.
• commit message convention: 설명은 사진으로 갈음

 

=> 근데 이런 거 정하려면 애초에 첫 회의 때 대상 사이트를 더 확실히 분석 해놨어야 가능했을 것 같다.

 

2차 회의:

• 각자 진행상황 공유
• 1차 merge (협업이 모두 처음이다 보니 오류가 날지 안 날지 확인해보기 위함이었음)
• 각자 어려운 점 공유

3차 회의:

• merge
• CSS 충돌로 인한 이슈 해결 => 이건 좀 아쉬운 게 애초에 전체 태그에 대한 초기화(reset.css) 진행하고 했으면 충돌 훨씬 덜 났을 것 같음(각자 클래스명은 충돌 안 날 구조였어서..)
• 반응형 개발(각자 섹션에 반응형 추가)
• 발표자 선정: 룰렛돌림 (내가 걸림)
• 이후 디스코드 마이크 켜 놓고 같이 코딩함

팀플 이후

팀장의 책임에 대해 생각했다. 좋든 싫든 팀장을 맡은 이상 회의를 주도하고, 할 일을 분배하고, 팀의 방향성을 결정해야 하는 것 같다. 팀의 분위기는 팀장이 만드는 것 같다.

다음에 팀장을 맡게 된다면, 첫 회의를 많이 준비해야 할 것 같다. 이런 저런 (확실한) 규칙들을 정하고, scope와 requirement를 확실히 분석해서 팀이 잘 돌아가도록 해야겠다.