예전 졸업 프로젝트를 마이그레이션하여 새롭게 서비스를 제공하고자 했습니다.
기존 프로젝트에서 조금만 수정해서 서비스를 제공하는 방법도 있으나 마이그레이션을 선택한 이유는 아래와 같습니다.
기존 프로젝트는 자바스크립트를 이용하여 작성한 프로젝트입니다.
동적으로 할당하여 사용할 수 있는 유연함이라는 장점으로 자바스크립트를 택했었는데, 이러한 특성은 코드의 양이 많아질수록 함수 매개변수에 들어오는 값이 무엇인지 여러 파일을 살펴봐야하는 불편함이 되었습니다.
이를 보완하기 위해서는 타입스크립트를 활용하여 프로젝트를 개선할 수 있는 방안이 있었고, 컴파일 단계에서 오류를 방지하여 안정성과 가독성을 개선하는 장점은 타입스크립트를 선택하지 않을 이유가 없다고 생각들게 해줬습니다.
기존 프로젝트에서는 어떤 구성으로 웹 사이트를 제작할 지 고민할 때 많은 어려움이 있었습니다. 프론트 2명과 서버 2명으로 팀 내에서 디자인 지식과 툴을 다룰 수 있는 사람이 없어 다른 사이트를 참고해가면서 감으로 요소를 배치했습니다.
이런 부분은 모바일뷰로 리팩토링하는 과정에서 어려움을 겪어 프로젝트를 개선한다면 디자이너와 함께 UI를 구성해야겠다는 생각을 갖게 해줬습니다.
CSS
파일로 스타일링을 하다보니 프로젝트가 커질수록 모듈화 및 유지 보수하는 측면에서 어려움을 느꼈습니다. 가영
님이 디자이너로 합류하시면서 Figma
로 새롭게 디자인을 작성했고 UI를 개편하는 김에 Styled-components
를 도입하여 코드 재사용성과 모듈화 편의성을 개선하고 동적 스타일링을 적용하여 반응형으로 서비스를 제공할 수 있었습니다.
그 외에도 처음으로 배포까지 진행했던 프로젝트였던 만큼 부족한 부분이 많았습니다.
따라서 마이그레이션하는 과정에서 새롭게 조직 레포지토리를 생성하여 처음부터 프로젝트를 개발했습니다.
프로젝트를 개선하는 과정에서 코어 기능을 판단하고 필요 없는 기능을 제거하는 과정이 필요했습니다.
버전 1에서는 사용자들이 이용할 수 있는 기능은 위와 같았습니다.
버전 2에서는 먼저 사용자에게 의미없는 기능을 제거하고 직접적으로 도움받을 수 있는 기능으로 사용할 수 있게하고자 아래와 같이 구현 방향을 잡았습니다.
한신대학교 학생 대상으로 졸업요건조회를 지원하기 때문에 학교 이메일을 인증한 학생들만 서비스를 이용할 수 있도록 구현했습니다.
그리고 기존 정보 게시판은 활용되는 것이 어렵다는 판단 하에 교양 과목에 대해 리뷰를 추가할 수 있는 것으로 방향을 다시 잡았습니다.
졸업요건 조회 시 파일 핸들링을 더 쉽게 개선하여 사용자 편의성을 개선했습니다.
또한, lazy import
, Debounce
, useCallback
등 최적화 기법을 도입하여 API호출에 대한 부담을 줄이고 번들링 크기를 작게 만들어 초기 로딩 속도를 개선했습니다.
해당 코드를 구현하면서 사용자 경험을 개선하기 위한 방법들을 고민하고 프로젝트에 적용하는 경험을 할 수 있었습니다.
기존 프로젝트의 아쉬운 점으로 깃 사용법의 미숙함과 유지보수의 아쉬움이 있었습니다.
새로운 프로젝트에서는 notion
과 Figma
를 통해 프론트-백 개발자, 디자이너-개발자 간 소통이 크게 개선할 수 있었습니다.
또한, 사용자들로부터 피드백받기 전에 미리 행동을 분석하여 개선할 수 있는 점과 더불어 서비스 트래픽을 체크하고 싶은 목표가 있었습니다. 이를 해결하고자 Google Analytics를 도입했습니다.
아직 새롭게 배포한지 일주일밖에 되지않아 트래픽은 소소하게 나오는 수준입니다.
하지만 이번 개선 프로젝트를 통해 UI/UX를 고민하고 구현하는 경험을 해봤으며 프로젝트 최적화 경험을 할 수 있었습니다.
실제로 이용자가 가입하고 서비스를 이용하는 트래픽을 발견했습니다. 얼마 되지않는 트래픽이지만 발생한 데이터로부터 많은 성취감을 느낄 수 있었습니다.
학우들이 좀 더 유용하게 사용할 수 있는 기능을 추가하고 개선하며 서비스를 꾸준하게 이용할 수 있도록 해야겠다는 방향성을 잡아주는 경험이었습니다.