미리보기

웹 메타버스 스튜디오 엔진팀 프론트엔드 인턴

3개월 동안 프론트엔드 인턴으로 근무하며, 개발 작업을 수행하기 위해 다양한 직군의 팀원들과 적극적으로 협업했습니다. Figma 디자인 요구사항이 명확하지 않을 때, 디자이너에게 구체화를 요청했고, 더 나은 게임 개발을 위해 PM 및 에셋 디자이너와 정기적인 회의를 진행했습니다.

신입 인턴으로서 배우고 성장하려는 마음가짐을 가지고, 팀원들에게 적극적으로 질문하며 주어진 업무에 신속하게 적응하고자 노력했습니다. 또한, 서비스 개선점과 불편사항을 파악한 즉시 팀에 공유하고, 이를 해결하기 위한 방법을 학습 및 적용하여 프로젝트에 기여했습니다.

주요 업무

웹 메타버스 제작 스튜디오 유지 보수 및 개발

사용기술 : React, JavaScript, Three.js, React-Query, Redux

• 스튜디오 기반 웹 게임 개발

• 사용자 스튜디오 문의 응대 및 개발 지원

• 스튜디오 UI 개편 작업

게임 로직 관련 문의 대응 효율화

• Problem

  • 사용자 문의 응대 중 유사한 게임 로직 관 질문이 반복해서 발생

  • 중복되는 질문과 답변으로 효율성과 생산성 감소

• Solution

  • 문의 내용 정리 후 빈도 높은 게임로직 예시코드를 스튜디오 WIKI에 추가

  • 스튜디오 버전 이전 예시코드를 새로운 버전에 맞게 업데이트

사이드바 로딩 성능 및 사용자 경험 개선

• Problem

  • 스튜디오 화면에 진입하여 사이드바를 열면 에셋 리스트 API가 호출되는데, API 응답 후 이미지 파일을 렌더링하기 전까지 빈 컴포넌트가 렌더링되어 사용자에겐 멈춘것과 같은 사용자 경험 제공

  • 스튜디오 기본 에셋을 용하지 않고, 커스텀 에셋을 업로드하여 사용하는 유저에게 전체 에셋 리스트를 가져오는 통신은 불필요

• Solution

  • Suspense 컴포넌트를 도입하여 로딩 UI를 제공하여 API 응답이 완료될 때까지 로딩 중임을 명확히 표시하여 사용자 경험을 향상

  • React-Query의 useInfiniteQuery를 사용해 에셋을 30개씩 무한 스크롤로 제공하여 사이드바 오픈 시 API 응답 시간을 단축시키고 불필요한 API 호출을 감소

포트폴리오 사이트

그동안의 개발 이력과 프로젝트 내용을 정리한 포트폴리오 사이트입니다. 개발부터 배포까지 직접 진행했으며, My World 페이지에선 멀티 접속이 되는 메타버스를 즐길 수 있습니다.

사용 기술 : JavaScript, React, Tailwind CSS, Three.js, AWS, React-Three-Fiber, React-Three-Rapier, PlayRoom-Kit

주요 기능

• DeskTop 접속 시 Windows11 UI 환경에서 인터랙티브하게 포트폴리오 확인 가능

• Custom Carousel을 직접 개발에 npm에 배포

• 물리엔진이 적용된 멀티 메타버스

코드 분할로 페이지 첫 렌더링 시간 단축

• Problem

  • 메타버스에 물리엔진 적용 후 JavaScript 전체 번들파일이 4.4MB로 증가해 첫 페이지 진입 시 로딩 및 렌더링 시간이 크게 소요됨

  • 첫 렌더링 시간이 증가하면 사이트 타겟인 인사담당자에게 주의를 끌지 못할 것

• Solution

  • React lazy import를 활용해 메타버스 페이지를 코드 분할하였고 그 결과 첫 페이지 진입 시 번들 파일 크기는 4.4MB에서 340kB로 감소하여 로딩시간 감소

  • Suspense를 도입하여 메타버스 진입 시 로딩중임을 명시하여 사용자 경험 향상

이미지 형식 및 압축으로 성능 개선

• Problem

  • 고화질 배경 이미지로 인해 부자연스러운 배경 렌더링 발생

  • 배경 이미지가 끊겨서 렌더링 되어 사용자 경험에 악영향을 끼침

• Solution

  • 배경 이미지 webp 형식으로 교체 및 압축/ Largest Contentful Paint element 이미지 preload하여 Lighthouse Performance Score 65점에서 95점으로 개선

OMZ

3D 아바타와 미니룸을 꾸미며 개성을 표출하는 웹 앱 SNS로 사용자는 회원가입 시 본인 사진을 업로드하여 동물관상을 분석받고 이에 맞는 동물 아바타를 갖게 됩니다. 이 아바타와 미니룸을 꾸미며 Y2K 시절 유행했던 "싸이월드"를 최신 3D 버전으로 즐길 수 있습니다.

사용 기술 : React, TypeScript, Three.js, React-Query, Recoil, Tailwind CSS, Tensorflow.js, React-Three-Fiber

주요 기능

• 사용자 관상을 분석해 동물상 판단 후 강아지, 고양이, 여우, 곰, 토끼, 공룡 3D 아바타 제공

• 3D 미니룸과 3D 아바타를 커스텀

• MBTI 궁합과 좋아하는 동물상을 통해 친구 추천

• 채팅과 커뮤니티, 방명록 시스템

React에 Three.js 통합

• Problem

  • 선언적 환경을 제공하는 React에서 명령형 프로그래밍을 수행해야하는 Three.js 사용에 어려움이 있었음

• Solution

  • React-Three-Fiber 라이브러리를 활용해 Three.js를 선언적으로 사용

  • 3D 오브젝트를 하나의 컴포넌트 단위로 정의하고 해당 어트리뷰트를 변경하는 방식으로 개발함으로써, Three.js에 익숙하지 않은 상황에서 3D 관련 로직 개발을 수월하게 진행

Jejuinn

제주도 게스트하우스 스태프 구인 구직을 위한 플랫폼 사이트입니다. 스태프 지원자는 가능한 조건을 입력해 공고를 추천받고, 지원할 수 있으며, 게스트하우스 사장은 공고에 맞는 지원자를 추천받고 연락을 할 수 있습니다. 기존의 방식인 공고(카페, SNS) -> 지원(문자, e-mail) -> 면접(전화) 프로세스를 하나의 플랫폼에서 수행하고 자체 화상면접을 제공해 서로간의 신원파악을 가능하게 합니다.

사용 기술 : React, JavaScript, Redux-toolkit, Material-UI

주요 기능

• 제주도 게스트 하우스 스태프 지원, 공고 작성

• 조건에 맞는 지원자 추천, 화상 면접

• 제주도 여행 커뮤니티

주요 업무

• 지도, 이미지 업로더 등 핵심 공통 컴포넌트 개발

• 놀고먹기(커뮤니티) 페이지 전체 개발

• CRUD API 연결

협업을 위한 공통컴포넌트 개발

• Problem

  • 지도컴포넌트 개발 시 핀 생성, 보여주기 등 다양한 기능을 필요에 따라 사용해야 했음

  • props로 구분했지만 타 인원의 사용이 불편하고 가시성이 떨어질 것으로 판단

• Solution

  • Props 명을 직관적으로 수정하고 JS DOC을 사용해 컴포넌트 사용법 추가

  • 그 결과 다른 인원들은 질문 없이 해당 컴포넌트를 자신들의 개발 구역에 적용

개발 여건에 맞는 기술스택 선정

• Problem

  • 프론트엔드 모든 인원이 React와 Redux-toolkit을 처음 사용했기 때문에 해당 기술스택에 대한 학습이 필요한 상황에서 CSS 관련 기술스택이 선정되지 않음

• Solution

  • Material-UI 제안 : MUI를 활용하면 제공하는 기능이 많기 때문에 고급 UI 컴포넌트를 손쉽게 프로젝트에 적용 가능

  • 이를 활용함으로써 React와 Redux-toolkit 학습에 집중하여 프로젝트 기능개발에 전념할 수 있었음