토이 프로젝트 1 시작

어느새 팀 프로젝트가 시작되었다. 24.09.23 패스트캠퍼스 김민태의 데브캠프가 시작되고 한달도 채 안됐을 시기였지만 너무 두근거렸다!
사실 프로젝트 시작 전 주부터 내가 어떤 팀에 배정되고 팀원들은 누가 될까? 기대 반 걱정 반 하루하루를 보냈다.
당일 팀이 발표되었고 나까지 포함해서 총 4인으로 구성된 1팀으로 배정되었다.

프로젝트 개요

이번 토이 프로젝트 1의 주제는 인트라넷 서비스 개발이다.
각각의 팀 별로 인트라넷 서비스를 설계하고 개발한다. 또한 해당 서비스는 관리자용, 사용자용으로 구분된 페이지로 구성되어있어야 한다.
기간은 서비스 개발: 24.10.16 ~ 24.11.01, 발표: 24.11.01, 리팩토링: 24.11.02 ~ 24.11.07 로 세분화 되어있다.
사용해야 하는 스택은 HTML, CSS, JavaScript로 한정되어있었다. UI 프레임워크, CSS 전처리기는 사용 금지이지만 Firebase와 같은 서버리스 함수를 제공하는 DB는 사용 가능하다고 실강에서 안내해주셨다.

프로젝트 요구사항 분석

• [사용자용 페이지]
  • 필수
    • 공통 사항
      • 현 시각을 표시하는 시계 구현
      • 동작 완료되기 전 로딩 애니메이션 구현
    • 메인 페이지
      • 페이지 네비게이션 사이드바 노출
      • 개인 서브 프로필 노출
      • 근무 시작,종료 토글 스위치 => 클릭 시 모달창(근무 시작, 종료 확인 / 현재 시간 표시) 노출
      • 서브 기업 공지 모음 갤러리 노출 (슬라이드 / 2개씩만 노출 / 이미지, 제목, 내용 …, 작성일, 작성자??)
    • 마이 프로필 페이지
      • 프로필 이미지(기본 이미지), 직무, 이름 표시
      • 근무 시작, 종료 기능 추가
      • 본인이 신청한 부재 신청 내역 리스트 노출
    • 기업 공지 모음 갤러리
      • 읽기 전용
    • 부재 신청 페이지
      • 부재 신청 내역(부재 항목(연차,반차 등) / 신청자 이름, 이미지 / 처리 여부) 리스트 노출
      • 부재 신청 내역 리스트 필터링 ⇒ 부재 항목 기준
      • 부재 신청 버튼 클릭 => 부재 내용 페이지로 이동 팝업 노출 => 부재 내용 작성 후 제출
  • 선택
    • 회원가입/로그인 페이지
      • 회원가입 기능
      • 로그인 기능
      • 비밀번호 재설정 기능
      • 아이디 찾기 기능
    • 마이 프로필 페이지
      • • 전화번호 / 이메일 / 금일 근무 시작, 종료일 표시
      • 프로필 이미지 업로드 기능
    • 부재 신청 페이지
      • • 부재 신청 내역에 부재 사유 추가
• [관리자용 페이지]
  • 필수
    • 직원 리스트 페이지(페이지 네이션)
      • 직원 리스트 노출
  • 선택
    • 직원 리스트 페이지(페이지 네이션)
      • 검색 기능(직원 정보로 검색 가능)
      • 필터 기능
    • 기업 공지 모음 갤러리 페이지 (관리자 전용)
      • 기업 공지 리스트 노출
      • 특정 공지 수정 삭제 가능
      • 기업 공지(이미지, 제목, 내용) 업로드 기능

김민태 개발자님께서 전달해주신 요구사항 중 필수 구현 사항과 선택 구현 사항을 구분하고 어떤 페이지가 필요하며 해당 페이지에는 어떤 기능이 필요할 지 분석해서 작성했고 팀원분들께 공유드렸다.
이 외 요구사항으로는 ESLint 설정, Commit Convention, 문서화 등 팀 프로젝트 시 필요한 추가 작업이 있었다.
또한 시간이 한정적이니 예쁜 UI에 집중하지 말고 기능 구현에 리소스를 많이 투자해보라는 조언도 해주셨다.

우리는 어떻게 했는가?

우선 컨벤션부터 정하기로 했다. 나는 개인적으로 팀 프로젝트를 진행해본 경험이 없었기에 컨벤션에 대해서 잘 알지 못했다.
하지만 10월 15일 부터 진행중이던 우아한테크코스 프리코스에서 제공받은 과제 수행 및 제출 가이드에서 commit 컨벤션과 JS 코드 작성 컨벤션이 있다는 것을 알게 되었고 우아한테크코스 프리코스에서 사용중인 커밋 컨벤션인 Angular JS commit convention과 JS 코드 작성 컨벤션을 제안했고 내가 제안한 의견이 다른 분들이 제안한 의견과 합쳐져 조금 더 디벨롭 될 수 있었다. 이때 내가 예상했던 협업의 장점이 드러남을 느꼈다. 내가 생각하는 협업의 장점은 내가 생각하지 못한 것을 다른 사람은 생각했을 수 있고 반대의 경우도 있을 수 있다. 따라서 다양한 의견이 모여 점점 더 구체화되고 디벨롭될 수 있다는 점이다.

이후 우선적으로 와이어프레임, 마크업을 진행했고 각자 페이지 별로 나눠갖고 각자 개발을 진행하기로 했다.
이때 프로젝트 요구사항 중 필수 사항만 진행하자는 의견을 가지신 분이 계셨는데 2주라는 시간 동안 선택 사항까지 개발을 진행하기에는 시간이 부족하다고 판단하셔서 그런 의견을 주셨다.
하지만 나는 개인적으로 욕심도 났고 솔직히 시간이 부족하지는 않을 거 같았다. 따라서 "개인적으로 이번 프로젝트가 욕심이 난다. 그러면 제가 관리자용 페이지 전체와 회원가입/로그인을 진행하고 Firebase를 사용해본 경험이 있어서 DB 연결하겠다." 라는 의견을 전했다.
그렇게 앞서 내가 관리자용 페이지 전체와 회원가입/로그인 페이지 그리고 DB 연결 및 데이터 바인딩을 담당하게 되었다.

팀 프로젝트를 진행하며 배운 것

깃과 깃허브를 이용해서 다른 사람들과 함께 사용하는 원격 저장소를 공유하다보니 조심스러운 점이 많았다. 그래서 상황 별로 깃 사용 방법을 찾아가며 익히게 되었고 단순히 add, commit, push만 하기 보다는 상황 별로 다른 옵션을 추가해서 사용할 필요가 있음을 느꼈다.
또한 의사소통과 관련된 소프트 스킬의 중요성을 깨달았다. 지금까지 혼자 개발을 진행해왔고 나의 생각을 내가 알아듣고 알아볼 수 있도록 메모해두는 것 만으로도 전혀 문제가 없었다. 다만 다른 사람들에게 나의 생각을 전달하고 그들을 이해시키는 것은 꽤나 차이가 있는 일이었다. 물론 연인, 가족, 친구들 혹은 일상 속에서 만나는 사람들과 소통하기에는 전혀 문제가 없다. 그들과는 일상적인 대화를 나누니까. 다만 개발 프로젝트를 진행하는 팀원들과 소통하기 위해서는 조금 더 프로세스를 정리해서 말하고 정확한 용어를 사용해야했음을 느꼈다. 이 부분은 앞으로 팀 프로젝트를 진행해보며 다른 팀원분들은 어떻게 소통을 하는 지 지켜보며 많이 배워보고 그들과 소통해보며 지금 내가 전달하는 의견이 명확히 전달되었는지 파악해보며 소프트 스킬 능력을 기르고 싶다. 다만 듣는 사람이 누구인가도 중요한 포인트인 거 같다. 물론 나부터 다른 팀원분들께 의견을 명확히 전달하기 위해 노력하는 것을 목표로 삼고 있다.

팀 프로젝트가 이제 1주일 남았다. 남은 기간 동안 내가 담당하는 파트 열심히 준비해서 우리 팀에게 기여하고 싶다!