메타버스 운동 앱 FIVA 이야기
구스랩스에서 만든 FIVA를 소개합니다.
👋 About me
- Next, Unity 등 다양한 개발 환경에서 웹/앱 서비스 개발 경험을 쌓아온 1년차 프론트엔드 개발자입니다.
- 의미 없는 개선보단, 성능 병목을 느낄 때 측정을 통해 시스템을 개선하려 노력합니다.
- 더 나은 개발자가 되기 위해 CS를 꾸준히 공부하고 있습니다.
- 성격이 밝고 함께 하는 일을 좋아합니다. 클라이밍과 재즈 피아노를 취미로 갖고 있습니다.
💼 Work Experiences
트리플오스
스퀘어노트- 신규 B2C 서비스 '깊카' 프론트엔드 설계부터 배포까지 담당
- 컴포넌트 라이브러리/Storybook 구축 및 UI 상태만 책임지도록 재설계
- TanStack Query · 쿼리 키 팩토리 패턴으로 캐싱 전략 수립
- RSC 활용과 번들 크기 측정 문화 확립
모바일 쿠폰 중계 회사의 신규 B2C 서비스 '깊카'(기프티콘 선물하기 앱)의 프론트엔드를 설계부터 배포까지 담당했습니다. 더 많은 사용자와 도전적인 도메인에서 성장하고자 이직을 결심했습니다.
UI 라이브러리
반복적인 UI 작업을 줄이기 위해 컴포넌트 라이브러리와 Storybook을 배포했습니다. 처음에는 의욕이 앞서 여러 필터가 포함된 Searchbar처럼 도메인에서 관리해야 할 상태까지 다루도록 만들었지만 재사용이 어려워 UI 상태만 책임지도록 재설계했습니다. 섣부른 추상화는 오히려 관리 포인트를 늘릴 수 있다는 점을 배웠습니다.
서버 상태 관리
URL을 기준으로 서버 데이터를 페칭하는 구조에서, 같은 데이터를 반복 요청하는 비효율을 줄이기 위해 캐싱 전략이 필요했습니다. TanStack Query를 도입해 서버 상태를 일원화했고, 페이지 특성에 맞춰 갱신 주기를 설정해 불필요한 네트워크 요청을 최소화했습니다. 쿼리 키를 찾아다니는 불편함을 없애기 위해 팩토리 패턴으로 관리의 응집도를 높여 계층적 관리와 무효화를 편하게 할 수 있도록 했습니다.
성능 개선 문화
리소스는 디자인보단 성능 자산으로 관리했습니다. RSC를 최대한 활용해 하이드레이션 비용을 줄이고, Bundlephobia와 next-bundle-analyzer를 통해 번들 크기를 체크하는 문화를 만들 수 있었습니다.
구스랩스- 삼성전자 C-lab 메타버스 AI 운동 앱 FIVA 개발
- 3D 아바타 회전·확대/축소 인터렉션 및 운동 탭 전체 개편
- 동작 인식 AI 미니게임 개발, 공통 로직 추상화로 1개월+ 단축
SSAFY 채용 박람회를 통해 삼성전자 사내벤처 스타트업(C-lab)에 합류해, 메타버스 AI 운동 앱 FIVA를 개발했습니다. 2025년 3월 서비스가 종료되면서 팀원들과 함께 퇴사했습니다.
3D 아바타 회전, 확대 및 UI 구현
사용자 피드백을 반영해 아바타 회전·확대/축소 기능을 구현했습니다. 다양한 아바타 서비스 레퍼런스를 사용해보며 디테일한 인터렉션을 구현해 좋은 피드백을 들을 수 있었습니다. 주로 UI 개발을 담당하며 인앱 챌린지 캘린더, 2D 위에 3D 모션 아바타를 함께 보여주는 운동 탭 전체 개편 등 다양한 화면을 구현했습니다.
AI 운동 게임 개발
동작 인식 AI를 활용해 스쿼트를 멈추면 괴물이 쫓아오는 스키 게임, 팔 운동을 멈추면 날갯짓이 멈추는 비행 게임을 개발했습니다. 새로운 게임을 빠르게 추가할 수 있도록 게임 상태 기반의 공통 로직을 추상화해 개발 기간을 1개월 이상 단축했고, 속도와 동작 인식 임계값 같은 파라미터를 Realtime DB로 관리해 배포 없이 실시간 튜닝이 가능하도록 했습니다. 매주 200명이 넘는 유저가 플레이했습니다.
🌱 Activities
입력된 열정이 영향력으로 출력되는 FE 개발 동아리에서 Vite 오픈소스 생태계에 기여하고 있습니다.
26가지 웹 성능 개선 원리를 다루는 「Web Performance Deep Dive」의 베타 리더로 참여했습니다. 책에서 배운 내용을 실무와 블로그에 적용하며 웹을 바라보는 시야를 넓힐 수 있었습니다.
- 코드 실행 흐름을 시각화하는 알고리즘 학습 도구 기획·개발
- Shiki Modular import으로 번들 12MB → 3MB 감소, LCP 개선
- PR 번들 크기 비교 GitHub Action 봇 도입
- 가상 메모리 스택 프레임 구조 참고해 변수 생명주기·클로저 시각화
만들게 된 계기
알고리즘 학습의 장벽을 낮추기 위해 코드 실행 흐름을 단계별로 시각화하는 서비스를 기획하고 개발했습니다. 다국어 및 가이드 문서를 제공해 방문자 수가 200% 증가한 반면 이탈율은 40% 대에서 절반으로 감소했으며, Github Star 24K+를 받은 awesome-algorithms에 소개되는 성과를 얻을 수 있었습니다.
번들 및 성능 개선
앱 번들 측정 중, 언어별 하이라이트 기능을 제공하는 Shiki 라이브러리 전체가 포함되어 12MB가 나오는 문제를 발견했습니다. Modular import을 적용해 9MB가 감소한 3MB로 줄일 수 있었고, 자연스럽게 LCP도 개선되었습니다. 이러한 문제의 재발을 막기 위해 PR이 업로드되면 github action 봇이 main 브랜치와의 번들 크기를 비교해 댓글을 달아 변화를 측정할 수 있도록 ci를 개선했습니다.
UX 개선
함수 실행이 끝나도 지역 변수 값이 남아있는 문제가 있었습니다. 이 문제를 해결하기 위해 가상 메모리의 스택 프레임 구조를 참고해 변수의 생명주기를 정확하게 파악할 수 있도록 했습니다. 자연스럽게 상위 스코프를 참조하는 클로저도 UI로 시각화할 수 있었습니다.
📦 Open Source Contribution
🎓 Education
한국방송통신대학교
26. 03 - 28. 02CS 기본기를 다지기 위해 컴퓨터과학과 3학년으로 편입해 전공 과목을 수강하고 있습니다.
- 알고리즘, 운영체제, 디지털 논리회로, 데이터베이스 시스템
삼성 청년 SW 아카데미
23. 07 - 24. 06전공 Java 트랙에서 웹 개발 교육을 수료했습니다.
- 삼성 SW 역량 테스트 모의 A형 취득
- 팀 프로젝트 3회 수상 (1학기 최우수상 / 2학기 우수상 2회)
- SSAFY 공식 기자단 SSAFYcial 활동
성결대학교
14. 03 - 20. 02신학과를 졸업했지만 무교입니다. 졸업 후 수학강사, 재즈 피아노, IT 국비학원, SSAFY 등 다양한 경험을 해보면서 생각하는 과정에 재미를 느껴 개발자의 진로를 선택했습니다.
- 학점: 3.93 / 4.5
🪪 Certifications
정보처리기사
2025. 12한국산업인력공단
SQLD
2025. 12한국데이터산업진흥원
한국사능력검정 1급
2021. 09국사편찬위원회
📬 Contact
010-2717-6906·oilater@naver.com