졸업가능v2 프로젝트 회고록

배성규·2024년 4월 2일
0

회고록

목록 보기
7/10

프로젝트 사이트 바로가기

버전 2로 업그레이드한 이유

예전 졸업 프로젝트를 마이그레이션하여 새롭게 서비스를 제공하고자 했습니다.
기존 프로젝트에서 조금만 수정해서 서비스를 제공하는 방법도 있으나 마이그레이션을 선택한 이유는 아래와 같습니다.

더 나은 개발자 경험

기존 프로젝트자바스크립트를 이용하여 작성한 프로젝트입니다.
동적으로 할당하여 사용할 수 있는 유연함이라는 장점으로 자바스크립트를 택했었는데, 이러한 특성은 코드의 양이 많아질수록 함수 매개변수에 들어오는 값이 무엇인지 여러 파일을 살펴봐야하는 불편함이 되었습니다.

이를 보완하기 위해서는 타입스크립트를 활용하여 프로젝트를 개선할 수 있는 방안이 있었고, 컴파일 단계에서 오류를 방지하여 안정성과 가독성을 개선하는 장점은 타입스크립트를 선택하지 않을 이유가 없다고 생각들게 해줬습니다.

디자이너와 협업

기존 프로젝트에서는 어떤 구성으로 웹 사이트를 제작할 지 고민할 때 많은 어려움이 있었습니다. 프론트 2명과 서버 2명으로 팀 내에서 디자인 지식과 툴을 다룰 수 있는 사람이 없어 다른 사이트를 참고해가면서 감으로 요소를 배치했습니다.
이런 부분은 모바일뷰로 리팩토링하는 과정에서 어려움을 겪어 프로젝트를 개선한다면 디자이너와 함께 UI를 구성해야겠다는 생각을 갖게 해줬습니다.

CSS파일로 스타일링을 하다보니 프로젝트가 커질수록 모듈화 및 유지 보수하는 측면에서 어려움을 느꼈습니다. 가영님이 디자이너로 합류하시면서 Figma로 새롭게 디자인을 작성했고 UI를 개편하는 김에 Styled-components를 도입하여 코드 재사용성과 모듈화 편의성을 개선하고 동적 스타일링을 적용하여 반응형으로 서비스를 제공할 수 있었습니다.

기타

  • 하나의 레포지토리에 클라이언트와 서버 코드가 모두 있었습니다.
  • 불필요한 코드 이해하기 어려운 변수 네이밍이 많았습니다.
  • 사용자 행동 파악에 대해 어려움이 있었습니다.

그 외에도 처음으로 배포까지 진행했던 프로젝트였던 만큼 부족한 부분이 많았습니다.
따라서 마이그레이션하는 과정에서 새롭게 조직 레포지토리를 생성하여 처음부터 프로젝트를 개발했습니다.

개선

프로젝트를 개선하는 과정에서 코어 기능을 판단하고 필요 없는 기능을 제거하는 과정이 필요했습니다.

v1 기능

  • 공지사항 조회
  • 졸업요건 조회
  • 인기교양추천
  • 정보 게시판

버전 1에서는 사용자들이 이용할 수 있는 기능은 위와 같았습니다.
버전 2에서는 먼저 사용자에게 의미없는 기능을 제거하고 직접적으로 도움받을 수 있는 기능으로 사용할 수 있게하고자 아래와 같이 구현 방향을 잡았습니다.

v2 기능

  • 공지사항 조회
  • 졸업요건 조회
  • 인기교양추천
    - 리뷰
  • 마이페이지 (회원가입 + 로그인)

한신대학교 학생 대상으로 졸업요건조회를 지원하기 때문에 학교 이메일을 인증한 학생들만 서비스를 이용할 수 있도록 구현했습니다.

그리고 기존 정보 게시판은 활용되는 것이 어렵다는 판단 하에 교양 과목에 대해 리뷰를 추가할 수 있는 것으로 방향을 다시 잡았습니다.

졸업요건 조회 시 파일 핸들링을 더 쉽게 개선하여 사용자 편의성을 개선했습니다.

또한, lazy import, Debounce, useCallback등 최적화 기법을 도입하여 API호출에 대한 부담을 줄이고 번들링 크기를 작게 만들어 초기 로딩 속도를 개선했습니다.
해당 코드를 구현하면서 사용자 경험을 개선하기 위한 방법들을 고민하고 프로젝트에 적용하는 경험을 할 수 있었습니다.

v1의 아쉬운 부분 해결

기존 프로젝트의 아쉬운 점으로 깃 사용법의 미숙함과 유지보수의 아쉬움이 있었습니다.
새로운 프로젝트에서는 notionFigma를 통해 프론트-백 개발자, 디자이너-개발자소통이 크게 개선할 수 있었습니다.

  • 피그마 댓글 기능을 통해 궁금한 점과 의견을 나눌 수 있었습니다.

또한, 사용자들로부터 피드백받기 전에 미리 행동을 분석하여 개선할 수 있는 점과 더불어 서비스 트래픽을 체크하고 싶은 목표가 있었습니다. 이를 해결하고자 Google Analytics를 도입했습니다.

  • 이용자 접속 환경을 파악하여 v2에서 적용한 반응형 웹이 좋은 개선 방향성이었음을 확인할 수 있었습니다.
  • 해상도 별 사용자를 파악하여 개선이 필요한 UI를 쉽게 찾을 수 있었습니다.

마무리

아직 새롭게 배포한지 일주일밖에 되지않아 트래픽은 소소하게 나오는 수준입니다.
하지만 이번 개선 프로젝트를 통해 UI/UX를 고민하고 구현하는 경험을 해봤으며 프로젝트 최적화 경험을 할 수 있었습니다.

실제로 이용자가 가입하고 서비스를 이용하는 트래픽을 발견했습니다. 얼마 되지않는 트래픽이지만 발생한 데이터로부터 많은 성취감을 느낄 수 있었습니다.

학우들이 좀 더 유용하게 사용할 수 있는 기능을 추가하고 개선하며 서비스를 꾸준하게 이용할 수 있도록 해야겠다는 방향성을 잡아주는 경험이었습니다.

profile
FE 유망주🧑‍💻

0개의 댓글