미니프로젝트 - 팀원소개 페이지 만들기

프로젝트 소개

1. 진행 기간: 2024.07.15 ~ 2024.07.18

2. 인원: 5명

3. 깃허브

https://github.com/escape-engineering/soysauce_completed

GitHub - escape-engineering/soysauce_completed

 

 

4. 라이브러리

• jQuery

5. 개발환경

• Firebase

 

팀원들과의 KPT 회고

Keep

• 소통이 잘 된다, 이슈가 발생하거나 변경점이 있을 때 서로 꺼리지 않고 바로바로 공유가 된다.
• 변경사항이 있거나 궁금한 점이 있을 때 마이크 켜고 이야기를 하면 다같이 마이크 켜고 이야기했던 점.
• 아이디어 많이 내준 것 (간계밥 팀이름, 간계밥 아이콘, 구현 아이디어, 기능에 대한 아이디어 등등)
• 다 완성된 부분들도 한번더 신경쓰고, 함께 검토한 것
• 깃허브 규칙, 코드컨벤션 등 규칙을 잘 준수함
• 이미 작성된 코드도 다른 방법들을 공유한 것 (ex. forEach로 구현했을 때 다른 방법도 이야기 나눈 것) → 코드리뷰!

 

Problem

• 깃, 깃허브 사용이 미숙했다
• 프로젝트 설계할 때 초기 셋팅 부족했음
  • 스크립트 모듈화
  • 사용할 라이브러리에 대한 이해가 부족했다 (ex. 부트스트랩)
• 업무배분을 어떻게 할지 몰랐다
• 코트컨벤션 부족했음
  • 카멜케이스, 축약어 사용하지 않기는 잘 지켰지만 더 많은 부분에 대한 규칙을 정할 필요가 있었다
• 기능 구현/예외에 대한 확인을 더 해봤으면 좋았을 것 같다
• 서로 생각하는 디자인이 일치하지 않았다.

 

Try

• 다함께 문제점 검토하는 분위기를 유지하려면 본인이 해야할 일에 대한 스케줄 관리도 잘 되어야겠다.
• 라이브러리에대해 처음부터 잘 알수는 없겠지만 대략적인 장단점이라도 알아보기!
• 문제가 생겼을 때 → 문제가 생긴 코드/상황(오류메세지 포함)/단계를 실시간으로 정리해두는게 필요 (질문, TIL 기록 등 활용)
• 초반 기획을 더 자세하게 하기
  • 기능에 대한 정의, 레이아웃 등
  • 모듈, 폴더구조 등을 어떻게 나눌 것인지
• 개인적으로 실습해볼 때도 깃허브 사용해보기 → 브랜치, 머지, 풀리퀘스트 등 해보지않은 기능들도!
• 기업에서 사용한다고 알려진 코드컨벤션, 깃 컨벤션 등을 통으로 차용하기 (ex. 에어비앤비 등)
• pull 받을 때 추가된 기능이나 스타일 등 확인해보기

 

 

어려웠던 점 + 개선할 점 (구현)

1. 자동스크롤 (원페이지 스크롤) 구현시 조건 설정의 어려움 → 스크롤 가능한 조건을 확인하는 변수 사용

[jQuery] 페이지 첫 화면에서 메인 콘텐츠 부분으로 자동 스크롤하기

 

 

스크롤 위치 이동에 속도 조절을 하고싶어 scrollTo()를 이용해 시간당 이동량을 구하여 프레임마다 이동시키는 방법을 사용했다. 버튼을 클릭하는 경우, 일정 지점까지 스크롤한 경우 두가지 순간에 같은 함수를 호출하다보니 조건 설정에 어려움이 있었다. 튜터님으로부터 어떤 조건을 상징하는 플래그를 생각해보라는 피드백을 받아 스크롤 가능한 상태를 표현할 새로운 변수를 설정해 성공했다.

 

개선하고 싶은 점

1) 시간 관리

사실 일정 위치까지 스크롤한 경우에도 자동스크롤 하는 기능은 기획단계에는 없었다가 내 욕심으로 추가했었는데, 생각보다 시간이 오래걸렸다. 이번에는 맡은 역할이 많지않아 오랜시간 헤맸음에도 충분히 구현할 수 있었지만, 시간 단축을 위해 하던대로 js로만 구현해내는 것이 아니라 조금 더 쉽게 구현할 수 있는 방법을 찾아보거나 조언을 구했어도 좋지 않았을까싶다. 이번은 미니프로젝트였다보니 js 연습도 되었다고 의미를 부여할 수 있겠지만.. 하나에 너무 시간을 오래 쏟으면서 다른 아이디어를 추가해보진 못한 것 같아 개인적으로 아쉬웠다.

 

2) 다른 기능, 쓰로틀링 적용해보기

발표 후 튜터님의 피드백과 다른 팀의 구현 사항들을 보며 css의 scroll-snap-type, animation을 이용한 방법을 알게되었고 같은 기능을 구현한 다른 팀에서는 scroll 이벤트의 최적화를 위해 쓰로틀링을 사용했다고 한다. 다음 프로젝트에 들어가기 전 알게된 내용들을 기반으로 다시 한번 기능을 구현해보고 싶다!

 

2. 반응형 레이아웃 구성

이번 프로젝트에서는 화면 크기에따라 조정한 부분이 폰트사이즈 뿐이었다. 그런데! 다른 팀의 시연 중 일렬로 배치되어있던 멤버 카드가 화면 사이즈가 줄어들었을 때 지그재그로 배치되는 것을 보고 너무.. 욕심이 났다 ㅋㅋㅋ 유튜브도 웹으로 보면서 브라우저를 작게 띄워뒀을 때  레이아웃이 바뀌는 걸 보고 너무 신기했었는데 전체적인 폰트 사이즈, 크기뿐만 아니라 배치 자체에 변화를 주는 것도 시도해보고 싶다!!

 

 

마무리

정말 오랜만의 팀프로젝트였다! 기획자로 참여했던 첫 팀프로젝트 때도 여럿이 하나의 서비스를 만들어나가는 그 과정이 재밌었는데, 오랜만에 그 기분을 느낀 것 같아 힘들긴해도 재밌게 할 수 있었던 것 같다. 뿌듯함도 있었고, 발표 후 피드백을 들으며 더 잘하고싶다는 의욕도 많이 얻었다. 시도하고 싶은 것들을 공개적으로 적어뒀으니 ㅎㅎㅎ 비교적 여유가 있을 다음주 초반까지 꼭 해보기!

 

 

---

이후 개선해본 것들!

jQuery, CSS로도 원페이지 스크롤 구현해보기

[JS / jQuery / CSS] 다양한 방법으로 자동스크롤 구현하기 (원페이지 스크롤)