프로젝트의 기반을 다지고, 본격적인 작업 전 구조와 운영 체계를 정비한 날

• ✅ PR 커밋 규칙 정의 및 GitHub 협업 환경 정리
• ✅ WIKI 홈 구조 설계 및 작성 시작
• ✅ 백로그 항목 구체화, 이슈 템플릿 작성 및 라벨 분류
• ✅ 작업 파트를 명확하게 분배하여 각자 맡을 페이지 정의
• ✅ 디스코드 & 깃허브 Webhook 연동으로 실시간 협업 알림 구축
• ✅ 공통 폴더 구조 및 초기 파일 세팅 완료

• 👨‍💻 박민성

  • 로그인 폼 UI 요소 마크업 및 스타일링
  • 반응형 고려한 구조 설계

• 👨‍🎨 조장원

  • 메인 페이지 레이아웃 설계
  • 마크업 및 스타일링 진행

• 👩‍💻 전지연

  • 랜딩 페이지 아이콘 및 이미지 추가
  • 전체 마크업과 스타일링 구성

• 👩‍🔧 장효정

  • 헤더 컴포넌트 시맨틱 마크업 및 스타일링
  • 반응형 적용 완료

• 👨‍💻 박민성

  • 로그인 컴포넌트 리팩토링 및 접근성 개선
  • 모달 컴포넌트 마크업 및 스타일링

• 👨‍🎨 조장원

  • 메인 페이지 구조 및 스타일 수정
  • Search 컴포넌트 추가 및 구성

• 👩‍💻 전지연

  • 랜딩 페이지 마무리 스타일링
  • 프로필 컴포넌트 마크업 및 편집 기능 UI 구성

• 👩‍🔧 장효정

  • 헤더 스타일 개선
  • 푸터 컴포넌트 기본 구조 및 스타일링

• 🤝 공통 작업

  • 전체 코드 PR 및 병합 (develop → main)
  • 전체 레이아웃 구조 설계 회의
  • 컴포넌트 통일 및 리팩토링

• 👨‍💻 박민성

  • 로그인 페이지 본격 제작 시작

• 👨‍🎨 조장원

  • 메인 페이지 콘텐츠 구성 및 제작 시작

• 👩‍💻 전지연

  • 랜딩 페이지 구조 개선 및 제작 시작

• 👩‍🔧 장효정

  • 프로필 페이지 레이아웃 설계 및 마크업 시작

중간 점검 피드백을 반영하여 전체 구조를 리팩토링하고
페이지별 구조 및 컴포넌트 완성도를 높이는 데 집중한 날

• 🤝 공통 작업

  • 인덱스 페이지 레이아웃 시각적 통일
  • 코드 develop 브랜치 병합
  • WIKI 문서 정리 및 수정
  • 페이지별 코드 리뷰 및 피드백 반영
  • 전체 레이아웃/컴포넌트 구조 리팩토링

• 👨‍💻 박민성

  • 로그인 & 모달 컴포넌트 리팩토링

• 👨‍🎨 조장원

  • 메인 & 검색 페이지 정리 및 UI 개선

• 👩‍💻 전지연

  • 프로필/랜딩 페이지 구조 정리 및 스타일링

• 👩‍🔧 장효정

  • 헤더/푸터 시맨틱 마크업 정비 및 반응형 대응

• 🤝 공통 작업

  • 인덱스 workflow 구성 회의

• 👨‍💻 박민성

  • workflow - convention 영역 제작

• 👨‍🎨 조장원

  • workflow - 레이아웃 세팅

• 👩‍💻 전지연

  • workflow - scrum 영역 제작

• 👩‍🔧 장효정

  • workflow - timeline 영역 제작

• 🤝 공통 작업

  • 각 페이지에 들어갈 시행착오 내용 총 정리
  • 발표 내용 검수 및 수정 작업
  • 전체 페이지 크로스브라우징 체크

• 👨‍💻 박민성

  • 이미지 파일 최적화를 위해 npm을 활용한 변환 작업

• 👨‍🎨 조장원

  • 인덱스 반응형 처리 및 푸터 추가

• 👩‍💻 전지연

  • 랜딩에 비상업적임 명시하는 모달 추가

• 👩‍🔧 장효정

  • 각 페이지 프로토타입 처리

✅ 기존 PR에 커밋을 추가해야 할 때, PR을 닫고 새로 만들어야 하는 줄 알았음
🔧 하지만 git add . → git push 만으로 기존 PR에 커밋이 반영됨
✍️ 커밋 수정은 git commit --amend -m "message"로 가능하지만, 기록이 덮이니 신중히

✅ 모든 요소에 aria 속성을 과도하게 사용
🔧 alt로 충분한 경우 aria-label 생략, 필요한 경우만 명확하게 사용
✍️ 접근성은 '적절하게', 과유불급!

✅ 시안에 레이블 없다고 <div>로 처리
🔧 <label class="sr-only">로 보이지 않게 넣음
✍️ 보조기기 사용자도 고려한 시맨틱 마크업 중요

✅ <img> 태그로만 구성해 스크린리더 대응 안됨
🔧 <button> 감싸고 aria-label 추가
✍️ 기능은 시멘틱하게 표현돼야 함!

✅ 단순 <div>로 구현
🔧 <dialog> 태그로 변경
✍️ 모달도 시멘틱하게!

✅ aria-label만 있고 현재 위치 표시는 없음
🔧 aria-current="true" 추가
✍️ 접근성은 '현재 상태'까지 고려해야 진짜!

✅ 텍스트가 길어지면 포인트 점이 가려짐
🔧 padding과 width 조정으로 유연하게 해결
✍️ 반응형은 공간 설계가 핵심!

✅ <dialog open>만 사용 → .showModal() 안 씀
🔧 .showModal()로 열어야 ::backdrop 활성화됨
✍️ HTML 요소와 JS의 연결 원리를 이해해야 함

✅ 텍스트도 있는데 aria-label까지 있음
🔧 aria-label 제거
✍️ 접근성 속성은 '대체 수단', 중복하면 안됨

✅ <button type="submit"> 사용했으나 단순 이동만 필요
🔧 type="button"으로 변경하고 JS 처리
✍️ 시맨틱성과 재사용성의 균형 중요

✅ 아이콘, 배경 이미지 분리했지만 재사용 안 됨
🔧 background-image로 통일, 불필요 컴포넌트 제거
✍️ 컴포넌트는 재사용 가능성이 핵심!

✅ margin/padding으로는 반응형에서 틀어짐
🔧 가상 요소로 밀어내기 방식 채택
✍️ 중앙 정렬엔 계산된 공간 배분이 필요

✅ 커밋 컨벤션 미준수, 브랜치 실수, CSS 구조 이해 부족 등
🔧 git reset 배우고, var 변수/스타일 구조 학습
✍️ 협업은 태도와 약속의 총합이라는 걸 느낌

✅ Edge에서 가로 스크롤 발생
🔧 wrap 처리, gap 조정
✍️ 크로스 브라우징은 디테일 싸움

✅ | 문자가 시안보다 커보임
🔧 ::after 가상 요소로 대체
✍️ 디자인은 "느낌까지" 고려해야 함

✅ width만 설정해서 간격 없음
🔧 padding 추가 → 팀원 제안으로 wrapper 재구성
✍️ 가독성 있는 코드와 구조화된 마크업이 중요함을 느낌

멋사 부트캠프를 하며 처음으로 하는 팀프로젝트였던 만큼 회고조가 아닌 또 새로운 사람들과 팀을 맺어 협업을 할 생각에 살짝 설레면서도 머리가 지끈지끈 거리는 모순?적인 기분이 들었다!

사실 난 전공자출신에다 협업경험이 있음에도 불구하고 html,css 기초가 약해서 js나 다른 프레임워크 없이 순수 html, css 로만 구현해야하는 UI프로젝트에서 팀원들에게 민폐를 끼치지 않을까 걱정이 제법 되었었다.

하지만 정말 다행히 운이좋게도 기초가 튼튼하고 화려한 스펙의 팀장님과 팀원분들을 만난덕에 서로가 서로에게 부족한 부분을 채워주며 이끌어 나갈 수 있어서 이 부분이 정말 좋았었다.

일주일이 살짝 넘는 시간동안 4명이서 함께 협업하여 UI프로젝트를 완성하는 그 일련의 모든 시간과 과정속에서 매우 많은 시행착오와 의견충돌 등이 있었지만 Ai나 구글링의 도움뿐만 아니라 자신의 경험을 토대로 서로가 서로를 보완하며 이끌어 나아갔기에 생각보다 프로젝트 일정이 빡빡하지도 않았고 스무스하게 완성까지 나아갈 수 있었다고 생각이 든다.

그리고 나 또한 이번 UI프로젝트를 하며 정말 느낀것이 많았는데 react나 next같은 프레임워크에 너무 익숙해진 나머지 html과 css 등 프론트엔드의 기초라 할 수 있는 부분을 게을리하여 부족했던 나의 기초가 너무 체감이 확 되었었다...

하지만 이번 프로젝트를하며 부족한 부분에선 강사님과 팀원분들에게 피드백도 받으면서 정말로 간만에 초심으로 돌아가 다시한번 html의 마크업 단계부터 시멘틱한 구조나 접근성 관련 부분부터 아주아주 고민하면서 또 다시 생각해보고 구현해보는 시간이 되어서 정말 좋았다!

내일 있을 최종발표도 잘 마무리 되었으면 좋겠고 짧지만서도 일주일간 함께 좌충우돌? 했었던 팀원분들과 헤어진다는 점은 좀 아쉽지만 그래도 프로젝트를 깔끔하게 완성하였기에 해산하는 것이니까.. 아무튼 다시한번 함께해준 모든 팀원분들께 너무 고마운것 같다.

이번 프로젝트 경험을 통해 Git과 GitHub를 활용한 협업 방식에 대해 익힐 수 있었던 것도 큰 수확이었지만, 그보다 더 크게 느껴졌던 점은 ‘완벽한 팀’을 만드는 데 있어 가장 중요한 것은 각자 맡은 역할에 최선을 다하는 것이라는 사실이었습니다.

부족한 리더를 믿고 잘 따라와 준 팀원들에게 다시 한 번 진심으로 감사의 말씀을 전합니다.

수업 시간 실습도 겨우 따라가던 저에게 이번 프로젝트는 사실 부담으로 다가왔습니다.

하지만 좋은 팀원들을 만나, 기능을 하나하나 구현해가며 차근차근 단계를 밟다 보니

어느새 팀의 일원으로서 맡은 바를 다하고, 발표까지 책임지는 제 모습을 발견할 수 있었습니다.

사실 저는 발표라는 걸 세상에서 제일 어려워하는 사람이었고,

특히 잘 알지 못하는 분야를 다른 사람들 앞에서 설명해야 한다는 건 큰 도전이었습니다.

하지만 언젠가는 꼭 넘어야 할 산이라고 생각했고,

무엇보다 팀원들의 응원과 믿음이 있었기에 이 과정을 무사히 헤쳐올 수 있었습니다. 물론 아직 많이 부족하지만, 이번 프로젝트를 통해 협업의 과정을 직접 경험하고 작은 시행착오 속에서 성장하는 즐거움을 배울 수 있었던 소중한 시간이었다고 생각합니다.

앞으로도 이런 경험들을 발판 삼아, 팀과 함께 성장할 수 있는 프론트엔드 개발자로 나아가고 싶습니다.