미리보기

젭은 현재 MAU 130만, 동시접속 최대 15만 명 수용이 가능한 모두를 위한 메타버스 서비스입니다.

• 프로젝트 초기에 합류하여 Angularjs와 Dotnet Razor pages를 활용하여 에셋스토어, 랜딩페이지 등 정적페이지 및 플레이화면(Phaser) 내의 기능을 개발하였습니다.
• Phaser 웹게임 엔진으로 만들어진 플레이화면 내 Socket 통신으로 실시간 웹개발을 경험하였습니다.
  서버와의 통신은 기본적으로 api를 통해 요청과 응답을 주고 받되 해당 api의 요청을 통해 플레이화면 내의 ui나 phaser게임쪽 로직의 영향을 줘야하는 경우에 서버에서 해당 패킷에 대한 이벤트를 emit합니다.
  클라이언트는 해당 서버에서 전달하는 소켓의 이벤트를 구독하고 있고 eventEmitter를 통해 전달받은 패킷을 통해 클라이언트단의 로직을 처리합니다.
• 기존 레거시 코드(Angularjs)로 이루어진 기존 서비스의 각종 정적페이지 및 주요 기능인 phaser엔진을 활용한 플레이화면을 Next.js 기반의 Nx모노레포 프로젝트로 마이그레이션하였습니다. 이를 통해 초기 프로젝트 구조 설계를 함께 고민하고 직접 참여해볼 수 있었습니다.
  유저가 방문한 스페이스 목록 페이지를 마이그레이션하여 기존에는 전체 목록을 한번에 불러와 보여주던 방식에서 intersectionObserver api와 reactQuery의 useInfiniteQuery를 활용하여 해당 페이지의 초기 로딩속도를 200% 이상 개선하였습니다.
  해당 기능을 구현했던 방식은 유저가 방문한 마지막 스페이스로 보여지는 스페이스카드 컴포넌트의 썸네일을 forwardRef로 전달하고 rootMargin을 적절하게 주어 root(viewport)에 해당 썸네일이 보여지기 조금 전에 미리 다음 스페이스목록을 불러오도록 처리했습니다.
  하지만 이렇게 처리하니 스페이스카드 컴포넌트에 상위로 전달하기 위한 ref로 의존성이 생기게되어 좋지 않은 방향이라고 생각했고 상위의 목록페이지에 px이 0인 가짜 div를 통해 root가 해당 div의 intersecting을 감지하면 스페이스목록을 추가로 불러오도록 리팩토링하였습니다.
• 디자이너, PM, QA, 컨텐츠팀 등 각팀 팀원들과 협업을 통해 스프린트를 진행하며 라이브서비스를 개발합니다.
• 매주 WIL(Weekly I learned)를 통해 신규 기술스택에 대한 스터디 내용이나 프로젝트 진행 중에 있었던 트러블슈팅 내용들을 정리 및 팀원들과 공유하고 있습니다.

• ISR(Incremental Static Regeneration)을 활용하여 1분마다 블로그 글을 최신화합니다.
• 블로그 글은 언제 어디서나 노션으로 수정 및 작성이 편리하도록 노션 api를 사용하였습니다.
• Next.js의 신규 기능을 적극적으로 사용해보기 위해 AppRouter로 마이그레이션을 준비하고 있습니다.
• 위 경험을 통해 Next.js Docs 한글화 작업(upgrading/app-router-migration)에 기여하였습니다.

Tech Stack.

• Next.js, TypeScript, Styled-components, Notion api, vercel

2018년도부터 2년간 VR 기술을 통해 건축 산업(모델하우스, 인테리어 등)의 문제점을 해결해보고자 하였습니다.

• 유니티 및 언리얼 엔진을 활용하여 VR 모델하우스를 구현하였습니다.

• VR 컨트롤러를 활용하여 실시간 가구 배치, 실제 층수에 따른 전망, 가벽 설치 등의 기능을 통하여 기존의 모델하우스가 가지고 있는 문제점을 해결해보고자 하였습니다.

• 건축 산업의 전반적인 문제를 기술을 통하여 해결해보고자 능동적으로 사고하고 행동하는 방법을 경험하였습니다.

• 시장에 제 서비스로 실질적인 매출까지 일으켜본 경험이 있습니다.

약 한 달간, 서현 합동 조합과 함께 상탑초등학교에서 진행한 교육과정의 VR명예교사로 어린아이들에게 VR과 AR를 이해 및 체험시켜 주며 전반적인 SW산업의 이해도를 높일 수 있도록 교육하였습니다.