Mr. Egg Sushi
Kimpuro Docs

KTWiz 웹페이지 개선 프로젝트

2024.12 ~ 2025.01

KTWiz 웹페이지 개선 프로젝트 역시 고용노동부에서 주관하는 미래내일 일경험 사업의 일환으로 진행된 프로젝트였습니다.
실제 KT에서 재직 중이신 멘토님과 함께 KT의 야구팀인 KTWiz 웹페이지 개선 작업을 진행했습니다.

프로젝트 소개

GitHub Figma Creatie

메인 페이지
(이미지는 백엔드에서 받아오기 때문에 백엔드 서버의 문제로 이미지가 보이지 않을 수 있습니다.)
3D 구장 페이지

이 프로젝트의 목표를 한 문장으로 표현하면, "야구를 더 재밌게!"입니다. 이 목표에 맞추어, 정보 제공에만 그친 기존의 콘텐츠를 단순 나열한 형식의 UI를 Figma와 Creatie를 활용하여 개선하고, 유저들이 흥미를 가질 수 있는 다양한 기능을 추가했습니다.

목적

'야구를 더 재밌게!'라는 목표에 맞춰, 사용자들이 더욱 인터랙티브한 웹사이트를 경험할 수 있도록 KTWiz의 웹사이트를 개선했습니다.

팀 구성

프론트엔드 5명

기술 스택

React, Next.js, TypeScript, Supabase, Tailwind CSS, Three.js, Zustand

기여

  • Tailwind CSS 기반 공통 컴포넌트 설계 및 구현

  • Three.js를 활용해 야구장의 인터랙티브한 3D 모델링 구현

  • Husky를 활용한 Git 훅 관리로 코드 품질 개선 및 배포 효율성 향상

    • 팀원들의 매우 긍정적인 반응으로 보일러플레이트로 생성 (이는 다음 개인 프로젝트가 되었습니다 -> 링크)

  • Vercel을 통한 배포

    • 보일러플레이트의 사용으로 상당히 수월하게 배포가 가능했습니다.

  • JSDoc과 코드 리뷰 문화 정착으로 팀 생산성 개선 및 팀워크 증진

성과

  • 최종 우수팀 선정
  • 보일러플레이트로 인한 팀원들의 프로젝트 사전 설정에 대한 관심 증대로 이후 관련 스터디 진행

해결한 문제

  • 이전 프로젝트에서 커밋을 생성하는 과정에서 약간의 실수들이 생기는 경우가 있었음
    • comitizen과 commitlint를 사용하여 pnpm commit 명령어로 미리 설정해둔 커밋 메시지로 쉽게 커밋이 가능하도록 설정
  • 이전 프로젝트의 개발 단계에서 팀원들이 대부분 dev 모드에서만 개발을 진행하다 보니 프로덕션 환경에서 발생되는 오류들이 감지되지 않고 있다가 배포 단계에서야 나타나는 문제를 경험
    • Husky를 사용해 pre-commit 단계에서 아래의 항목을 전부 통과해야 커밋이 생성되도록 설정
      • Prettier를 사용한 코드 포맷팅
      • ESLint를 사용한 코드 규칙 확인
      • Jest를 사용한 테스트 코드 실행
      • commitlint를 사용한 커밋 메시지 검사
  • 이전 프로젝트에서 팀원들이 함께 공통 컴포넌트를 개발하였지만 개발한 팀원 외에는 공통 컴포넌트의 사용법에 대해 미숙했던 경험
    • 공통 컴포넌트를 개발에 JSDoc을 도입하고 모든 공통 컴포넌트는 전부 코드 리뷰를 진행하는 문화를 정착 위와 같이 원활한 팀 프로젝트를 진행할 수 있는 환경을 조성하고 이를 GihHub 보일러플레이트로 제작하여 팀 프로젝트에 사용하였고, 다른 팀원들에게 긍정적인 평가를 받음
  • Three.js로 야구장의 3D 모델을 인터랙티브한 요소로 구현하는 중에 야구장 3D 모델링의 용량 때문에 발생한 문제
    • 문제 1 : 100MB를 초과하는 야구장 모델링을 GitHub에 업로드 하려면 Git LFS를 사용해야 하고 Vercel에서 배포 시 여러번의 빌드가 실행되면 Git LFS의 트래픽 사용량이 초과되어 더이상 빌드를 할 수 없는 문제 발생
    • 해결 방안 : 배포 환경을 AWS로 변경하고 CI/CD 툴인 TeamCity에서 배포 과정 중에 모델링만 S3에서 다운로드 받아 배포를 진행
    • 문제 2 : 배포는 성공적으로 진행되었지만 100MB가 넘는 3D 모델링의 용량 때문에 LCP가 약 15초가 소요되는 현상이 발생
    • 해결 방안 : 모델링을 5.91MB 용량의 모델링으로 교체하고 상호작용이 필요한 부분에는 Three.js로 코드 내부에서 메쉬를 추가하여 개발
    • 결과 : 약 15초의 LCP를 2초 이내로 개선

회고

이번 프로젝트에서는 팀의 개발 문화와 협업에 많은 집중을 했던 것 같습니다.
팀원분들이 모두 UI 관련 코드를 잘 작성하시는 분들이었기 때문에, 팀원들끼리 어떻게 하면 더 좋은 코드가 될지, 그리고 공통 컴포넌트를 다른 팀원이 사용하는 상황에서 어떻게 하면 더 쉽게 사용할 수 있을지를 고민했습니다. 세세한 부분까지 규칙을 정하고 프로젝트를 진행하면서, 지금까지의 팀 프로젝트에서 발생했던 많은 문제들이 개발 문화로 해결될 수 있다는 것을 깨달았습니다. 특히, 팀 내에서의 협업 방식이나 규칙들이 프로젝트를 원활하게 진행하게끔 도와주었고, 앞으로도 이러한 분야에 대해 지속적으로 관심을 가지게 될 것 같습니다.

배운 점

  • Three.js의 활용
  • 반응형 UI 제작
  • 프로젝트 사전 설정
  • 약간의 블랜더 활용법

개선할 점

효율적인 해결 방법을 찾을 방법에 대해 고민해 보게 되었습니다.
Three.js라는 새로운 기술을 학습하면서 프로젝트를 진행했기 때문에 문제에 맞닥뜨리면 작업이 완료될 때까지 시간이 얼마나 걸릴지 명확하게 예측하기 어려웠습니다. 해결 방법을 찾는 과정에서 여러 시도를 해보는 것도 좋은 경험이었지만, 항상 이런 방식을 사용할 수는 없다는 생각이 들었습니다. 앞으로는 효율적인 해결 방법을 찾을 수 있는 방법에 대해 고민할 필요성을 느꼈습니다.

이 페이지가 도움이 되었나요?