미리보기

크리에이터들이 웹 상에서 쉽고 빠르게 메타버스를 구축할 수 있는 Web 3.0 기반 메타버스 창작 플랫폼을 제공합니다.
약 10명 가량의 개발 조직에서 레드브릭 사이트와 백 오피스의 반응형 디자인과 개발 및 유지보수, 메타버스 생성/진입 로직 구현, Three.js를 사용한 아바타 시스템 개발 등의 다양한 프론트엔드 개발 업무를 담당했습니다.
React Intl을 사용하여 한국어, 영어, 중국어, 일본어, 말레이시아어를 포함하는 소프트웨어 국제화 시스템을 지원했습니다.
TypeScript, Monorepo, CRA에서 Vite로 마이그레이션, Storybook, Test Code 등을 도입하여 개발자 편의성을 향상시키기 위한 주간 프론트엔드 기술개선 미팅을 주도하여 진행했습니다.

Redbrick 2.0 -> 3.0 웹 사이트 개편 및 UX/DX 개선 (Link)

React JavaScript React Query Redux Toolkit React Hook Form SASS PostCSS CSS Module React Three Fiber Cypress Jest

• 멀티레포 구조에서 개발자 경험 향상을 위한 Nx 모노레포 전환 경험
• Google Sheets API를 활용한 변동이 잦은 mock data 관리 개선
• Three.js를 사용한 아바타 선택, 마우스 조작 및 애니메이션 재생 기능을 포함하는 아바타 시스템 개발
• UX 개선을 위한 스켈레톤 UI, 404 페이지 제안 및 개발

Redbrick 1.0 -> 2.0 웹 사이트 개편 (Link)

React JavaScript React Query Redux Toolkit React Hook Form SASS PostCSS CSS Module

• 효율적인 비동기 데이터 처리와 클라이언트와 서버 상태 분리를 위한 React Query 도입
• 효과적인 작업 프로세스를 위한 git flow 브랜치 전략 도입

내부 운영과 관리를 효율적으로 지원하기 위한 Redbrick 백 오피스 개발

React TypeScript React Query Redux Toolkit React Hook Form SASS CSS Module Ant Design

• 기존 JavaScript 코드 베이스에 추가된 백 오피스에 타입 안정성과 코드 품질 향상을 위한 TypeScript 도입

크리에이터 챌린지 페이지 개발 및 유지보수

React JavaScript React Hook Form SASS CSS Module

• 기존 state만을 이용한 방식에서 효과적인 폼 관리와 유효성 검사를 위한 React Hook Form 도입으로 개발자 경험 개선
• Module CSS 방식을 도입하여 클래스 전역적 충돌 문제 해결

네이버 부스트캠프 내 모임 모집/관리 플랫폼 (Link)

React TypeScript Vite Vanilla Extract React Query React Hook Form TurboRepo Figma

• TMap SDK를 활용한 지도 페이지 구현 (TMap 지도 성능 분석기, 장소 선택 기능 개발기)
• 모노레포를 사용한 공통 인터페이스, 공통 컴포넌트 등 공통 패키지 관리
• 리팩토링 전후 동일 결과를 보장하기 위해 cypress 사용한 e2e 테스트 코드 작성
• FE/BE 개발을 병렬적으로 진행해 개발 생산성을 향상시키기 위한 MSW 사용
• 예기치 않은 UI 변경을 예방하기 위한 시각적 회귀 테스트 도입
• 프로젝트 팀장으로써 프로젝트 기획, 디자인 총괄 및 일정 관리
  • 개발 일지 작성 문화 도입으로 팀 내 6주간 약 70개의 개발 일지 작성

2021 캡스톤 디자인으로 진행한 인공지능 회의록 요약 서비스 (Link)

React JavaScript HTML/CSS Django Naver Cloud Platform

• 프로젝트 팀장: 프로젝트 개발 계획 수립과 주기적인 미팅 주도
• FrontEnd: 회의록 정보 작성, 회의 스크립트·요약·키워드 기능, 라이브러리를 사용한 pdf 변환 기능 개발
• BackEnd: STT(Speech-to-Text) API와 요약 API 연동