[#01] 이 프로젝트를 통해 배운 점

[naro_Kim]

간단 소개

'눈 치우기' 주제의 3D 인터랙티브 웹 개발 프로젝트
팀스파르타 항해+ 코딩육상대회 2회 최우수상 수상

담당 역할

웹 개발, 배포, 기획 및 홍보, 디자인 총괄

성과

• 3D asset export option을 glb + .bin + img -> gltf 리텍스쳐 방식으로 바꾸어 에셋 사이즈를 81% 압축

• 에셋 사이즈 압축과 preload로 LCP를 0.8s로 개선

• dynamic import를 활용하여 초기 페이지 로드 속도 개선

• Lighthouse 각 부문 별 점수를 95점 이상으로 개선

• 일주일 간 300명의 유저 확보

• 디바이스 스크린 크기에 따른 반응형 컴포넌트 제작

• useMemo를 활용해 draw call과 리렌더링 최소화

배운 점

• 아티클로 공부한 최적화 기법을 적용하며 끊임없이 이슈에 부딪히고 해결하며 지식과 성과를 얻을 수 있었습니다.
• 사용자의 피드백을 토대로 기능을 추가하고 서비스를 개선하는 경험을 할 수 있었습니다.
• 회고록을 작성하고 공유하여 사람들의 3D 인터랙티브 웹 개발 경험에 기여할 수 있음을 알게 되었습니다.
• 디스코드 커뮤니티에 개발물을 공유하여 새로운 사람들과 네트워킹하고 문제를 서로 도울 수 있음을 알게 되었습니다.

기술 스택

• Next.js13, React, Supabase, React three-fiber, TailwindCSS, contextAPI, Figma, Blender3D