codeit fs12 - mini project 'KOREA' 회고록 - 1

🇰🇷 KOREA 웹 프로젝트 회고

• 기간: 2026.02.23 ~ 2026.02.25
• GitHub: https://github.com/Obebe-creator/codeit-fs12-part1-team-korea
• 사용 기술 스택 : html, CSS

github를 사용한 협업을 실습해보는 미니 프로젝트이자 첫 팀 협업 프로젝트였다.

예시 주제는 '아티스트를 대상으로 한 팬 페이지'였고, html과 CSS에 필수적으로 사용해야하는 요소가 있는 미션있었다.

느낀 점들은 기울게 나타내겠다.

---

Convention

프로젝트 시작에 앞서 여러 규칙을 정하고 시작하였다.
대학 시절, 몇 번의 프로젝트를 통해 얻은 경험 중 하나는 팀에 규칙이 있어야한다는 것이었다.
그렇지 않았을 때, 발생하는 이슈들과 소통에 있어서 해결이 너무 어려웠기 때문이다.
모든 경험이 소중하다는 것을 느끼고 프로젝트를 시작하게 되어 상쾌한 출발이었다.

---

Commit Message Convention

첫 번째로, 커밋 메세지 컨벤션을 정했다.
중구난방식의 커밋 메세지는 오류가 발생했을 때 이전 내용으로 돌아가기 어려울 뿐더러 작성자도 내용을 잊을 가능성이 있었다.

이를 대비해 내 velog에도 커밋 메세지 컨벤션 글을 올렸었고, 대체적으로 널리 퍼져있는 컨벤션이었기에 이를 적용하기로 하였다.

• 커밋 메세지 컨벤션 양식

<type>(<scope>): <short description>

주로 기능 개발이 대부분이었기에 feat: 이 많았을지라도, 이외에 chore:나 refector:
등 최대한 내용에 맞게 사용하려고 팀원 모두가 노력했다.

또 하나 중요하게 생각한 것은 최대한 작은 커밋 단위였다.
이것을 습관화한다면 향후 커밋들을 돌아봐야할 일이 있을 때 정말 유용할 것이라고 생각했다.

사용 예시

---

Directory Structure Convention

디렉토리 구조 컨벤션 즉, 폴더 구조 규칙이다.

많은 파일들이 생성 될 것이고 html을 사용하면서 느낀 불편함 중 하나로 리펙토링 시 경로가 자동으로 수정되지 않는 점, 상대경로와 절대경로 등등 고려할 점들이었다.

이 점을 이전 html을 공부하며 느꼈었기에 해당 규칙을 정할 수 있다고 느꼈다.

디렉토리 구조는 아래와 같다
TEAM-KOREA
├─ assets
│ ├─ audio
│ ├─ fonts
│ └─ images
├─ css
│ ├─ 팀원1.css
│ ├─ 팀원2.css
│ ├─ 팀원3.css
│ ├─ 팀원4.css
│ ├─ 팀원5.css
│ ├─ main.css
│ └─ reset.css
├─ pages
│ ├─ 팀원1.html
│ ├─ 팀원2.html
│ ├─ 팀원3.html
│ ├─ 팀원4.html
│ └─ 팀원5.html
└─ main.html

마무리 리펙토링까지 끝났을 때의 우리 팀 폴더 구조다.

JS를 도입하지 않았기에, 하드코딩이 대부분이었다.
경로 설정에서 이 폴더 구조를 확립해놓았기에 시간을 뺏기지 않았던 점이 협업에 있어 상당히 고무적이었다고 생각한다.

---

PR 양식

commit message convention까지 했는데, PR 양식까지 짜서 진행하는 것이 git을 다루기에 익숙하지 않은 상태에서 적합할까에 대한 의문이 제기될 수 있다.
조금 꼰대가 되었을지도 모르지만 처음부터 모든 문제들을 박치기해서 풀어내는 것은 머슬 메모리는 확실하겠지만 상당한 비효율이라고 생각한다.
PR에도 규칙을 두어서 이를 습관들인다면 향후 팀원 모두가 가치있는 경험으로 남길 수 있을 것이라고 생각해서 정하였다.

어려운 규칙은 아니었다.

• 제목 사용 : # 을 통한 제목 사용
• 상세한 모든 내용은 아니더라도 커밋 메세지를 기반으로 팀원이 놓치는 부분 없이 이해할 수 있도록
• 예시 코드
• 가능하다면 test 사진

이정도였다.
git 사용도 익숙하지 않은 팀원들이 PR에 시간을 뺏기지 않았으면 하는 마음, 그리고 컨벤션을 지켰으면 하는 마음에 커밋 메세지와 내용을 기반으로 AI를 통해 PR을 적어도 된다고 했다.

몇 가지 예시를 소개하겠다.

모두가 완벽하게 지켜야한다기보다 PR 컨벤션에 익숙해지고 도입했었는데 잘 지켜진 것 같아서 뿌듯했다.

---

주제 선정

서두에 '아티스트의 팬 페이지'가 예시였다고 소개했었다.
이 프로젝트의 목적에 대해서 생각해보았다.
github를 통한 협업 - git branch 사용, github PR 사용 등
html과 CSS에서의 필수 기술 사용

그래서 관점을 조금 바꿔보았다. '아티스트'에서 '무엇인가를 소개 또는 응원하는' 페이지로.

여러 주제들이 나왔고 우리 모두 대한민국의 국민이니 대한민국을 소개해보는 것이 어떻냐고 의견을 냈고, 담을 내용들도 많을 것 같아서 주제를 대한민국으로 선정하게 되었다.

튀고싶어서는 아니었지만, 주도적으로 무엇인가를 계속 진행하고 싶었다.
예시 자료에 사로잡혀있고 싶지 않았기도 했다. 계속 생각하는 것이 발전에 도움이 된다고 생각해서.
(물론 강사님께 이렇게 주제를 선정해도 괜찮은지 여쭤보고 허가를 받았다.)

펄럭

역할 분담

필수 기술들을 인당 하나씩 맡아서 작업하는 것도 확실한 공부가 되겠지만, 개개인이 모두 한 번식 사용해보는 것이 좋다고 생각했다.
이번이 CSS를 메인으로 다루는 마지막 프로젝트일 것 같아서.

그래서 팀원 수에 맞춰 5개로 대한민국을 나누었다
📃 총 5개의 ‘권’으로 분담

경기권 + 제주권
충청권
호남권(전라권)
강원권
영남권(경상권)

📃 이후 남은 역할은 개인 페이지 끝난 팀원들끼리 배분

메인 페이지
문의 페이지
리펙토링 + α

이렇게 나누어 각 권에 대한 소개 페이지를 한 번 더 작성하면서 모두가 필수 사용 기능을 한 번씩 사용하게 되었다.