미리보기

1,000만명 이상의 글로벌 K-pop아티스트와 팬을 위한 서비스를 제공하는 엔터테인먼트 Tech 스타트업

K-POP 팬덤을 위한 글로벌 플랫폼을 운영하는 STAYGE Labs에서 엠넷플러스(Mnet Plus)와 자체 앱 tin의 프론트엔드 개발을 담당했습니다. Mnet Plus는 방송 콘텐츠 중심의 웹/앱 서비스로, 웹/앱 전반적인 기능 유지보수, 신규기능 개발, SEO 최적화, 다국어 대응, 하이브리드 앱 연동 등 유저 경험 향상에 폭넓게 기여하였습니다. tin 앱에서는 포인트 시스템 및 광고 리워드 기능 개발을 통해 서비스 수익화와 리텐션 개선에 실질적 성과를 만들었습니다.
애자일 프로세스 도입 제안, 개발 문화 개선 활동(스프린트·회고 기반 협업 문화 확산 등)을 통해 지속 가능한 팀워크와 개발 환경 구축에도 힘썼습니다.

누적거래액 2,400억, 평균 150% 이상의 성장률의 동대문 도소매 유통을 디지털로 연결하는 커머스 서비스

도소매 유통을 디지털로 연결하는 커머스 플랫폼을 운영하는 쉐어그라운드에서 SELLUP 도매/소매 웹 프론트엔드 개발을 담당했습니다. 상품 등록부터 주문, 정산, 포인트까지 유통 전 과정을 효율화하는 기능들을 개발하고, 대시보드, 온보딩, 본인인증, SSE 기반 임시저장 등 사용자 경험 중심의 기능 개선에 기여했습니다. 정산팀 TF 참여, 크로스브라우징 대응, 빌드 최적화, 이벤트 트래킹 개선 등 운영 효율과 기술 안정성 확보를 위한 실질적인 개선 작업도 함께 수행했습니다.
또한, 사내 인턴 개발자 교육을 담당하며 온보딩을 돕고 기술적 멘토링을 제공한 경험도 있습니다.

프로젝트 소개 : 엠넷플러스 방송 프로그램 "아이랜드2" 소개, 투표, 이벤트, 커뮤니티, 영상 등을 구성할 수 있는 다이나믹 페이지 프로젝트

투표 인증서 기능 개발

• 커뮤니티 및 프로그램 홍보 활성화를 위한 참여 증빙 UI 제공

실시간 트래픽 대응 및 렌더링 성능 최적화

• 방송과 투표가 동시에 몰리는 실시간 트래픽 폭증 구간(생방송 중간·마지막 투표)에 대비한 구조적 대응 설계

  • 초기 렌더링 구간을 SSR + Lazy Load로 분리

  • 진입 시점에 따라 컴포넌트 렌더링 타이밍을 조정해 렌더링 병목 및 입력 지연 이슈 최소화

  • 실시간 사용량 급증 상황에서도 사용자 이탈 방지

• 단계별 UI를 직관적으로 재설계하고, 다양한 방송에 반복 적용할 수 있도록 컴포넌트 구조 모듈화

  • 재사용 가능한 투표 컴포넌트 구조 설계

  • 향후 POC 확장 시 유지보수성과 효율성 확보

• 오류 발생 빈도가 높은 투표 참여 구간에 ErrorBoundary 및 Fallback UI 적용

  • 예외 상황에서도 사용자 흐름이 끊기지 않도록 설계

포토부스 기능 개발

• 미공개 포토를 획득할 수 있는 이벤트형 포토부스 기능 구현

• 광고 일일 시청 수 10~15만 회 유도, 유저 반응에 따라 7차 이벤트까지 확장 운영

• IntersectionObserver 기반 Lazy Rendering

• Skeleton UI 및 video/canvas 대체 렌더링 전략 적용

• CSS keyframe animation을 활용한 몰입감 있는 포토 획득 효과 구현

모바일 웹뷰 인터페이스 경험

• 앱-웹 간 데이터 전달 및 사용자 이동 흐름 최적화

기술스택 : React, TypeScript, Emotion, SWR, Firebase, GTM, i18n

프로젝트 소개 : 엠넷플러스 서비스에 유저 리텐션 강화를 위한 포인트 시스템 구축 프로젝트

• 유저가 자연스럽게 서비스 내에서 머무를 수 있도록 포인트 적립-소진-활용이 연결되는 구조로 플로우 설계

  • ‘포인트 부족 -> 투표 불가 -> 서비스 이탈’이라는 주요 이탈 흐름을 도출

  • 투표 시 포인트 소진 -> 포인트 부족 시 출석체크, 광고시청 등 미션을 통해 유저 리텐션 강화

• 포인트 잔여 상태, 소진 경고, 적립 미션 가이드를 단계적으로 안내하는 UI 흐름 설계 및 컴포넌트 개발

• 포인트 적립/차감 시 SWR의 mutate 기능을 활용해 응답 전 UI를 선반영하여 체감 반응속도 개선

• Google Ad Manager / AppLovin / NBT 광고 연동을 통해 포인트와 광고 보상을 연결

• 기술스택 : ReactNative, React-Query, tailwind, i18n

프로젝트 소개 : 방송별로 소개, 투표, 이벤트, 영상 등을 구성할 수 있는 다이나믹 페이지 템플릿 시스템 구축 프로젝트

• 방송 POC 기능 템플릿화로 반복 개발 구조 통합, 개발 시간 40% 단축

• 운영팀이 직접 사용할 수 있는 템플릿 기반 구조 설계

• 재사용 가능한 UI 컴포넌트 분할 및 Slot 기반 컴포넌트 설계

• Hackle FeatureFlag를 통한 템플릿 단위 노출 제어

• Hackle 기반 UI 실험 설계 및 기능별 테스트 그룹 분기 처리

기술스택 : React, TypeScript, Emotion, SWR, Firebase, GTM, Hackle, i18n

프로젝트 소개 : 170개의 국가에서 이용하고 900k 다운로드 수를 기록한, 내 손으로 직접 만드는 디지털 포토카드 서비스

통합 포인트 시스템(Fan Point) 설계 및 구현

• 낮은 재방문율(5주 기준 평균 3.4%) 개선을 위해 신규 리텐션 구조 설계

• 광고 시청, 스캐너 선물하기 등 다양한 포인트 적립 수단 구현

• GoogleAdManager / AppLovin 으로 광고 기능 구현

• 유저 리텐션 구조 개선을 통해 향후 LINC 등 통합 및 연동 기반을 마련

React Native 0.73 -> 0.77 버전 업그레이드 및 안정화

• Android Studio 최신 AGP 버전에서 React Native 0.73 기반 프로젝트가 정상 빌드되지 않는 치명적 이슈 발생

• Gradle 충돌, Hermes 오류 등 주요 환경 설정 이슈를 해결하며 안정적인 빌드 환경 복구

• 코드 호환성 점검 및 상태 관리 구조 최신화로 유지보수성과 확장성 개선

• 이후 광고 SDK·카메라 기능 등 신규 기능 도입 기반 마련 및 배포 안정성 확보

RichText Component 제작

• 단순한 html이나 마크다운을 파싱해서 렌더링할 수 있는 컴포넌트 제작

• 다국어 입력시 마크다운 표기로 편리하게 사용

• 80줄 -> 1줄로 코드로 리팩토링

기술 스택: React Native, TypeScript, SWR, Recoil, Emotion, Firebase, GTM, i18n

프로젝트 소개 : 자사 서비스 LINC 를 관리하는 내부 어드민 서비스

Refine으로 마이그레이션

• LINC의 오픈채팅 기능을 관리하는 신규 기능 개발

• Retool 에서 Refine으로 프론트엔드 주도 서비스로 마이그레이션 참여

• Retool 탈출기 : Refine으로 직접 만든 어드민 개발기

프로젝트 소개 : 도매,소매,사입의 정보,정산,세금계산서까지 모든 것을 관리하는 내부 운영 업무 서비스

• 세금계산서 도메인 개발 전담

  • 회사 주요 비즈니스 기능 안정적으로 구축 및 운영

• MUI 및 디자인 시스템 도입

  재사용 가능한 컴포넌트 설계로 UI 일관성과 개발 효율 향상

• Micro-frontend 아키텍처 적용 및 Context API 제거

  • 독립적인 모듈 구조 전환으로 성능과 유지보수성 개선

• 이체결과 등록 기능 개발

  • 영업팀 업무시간 50%, CS 대응 시간 50% 단축

• useDebounce, 버튼 상태 관리 적용으로 불필요한 API 호출 제거 및 중복 요청 방지

• Datadog 기반 에러 모니터링 체계 구축

기술스택 : React, TypeScript, MUI, RxJS, Styled-Components

프로젝트 소개 : 쇼핑몰을 운영하는 소매들이 사용하고, 동대문 도매 상품을 보고,주문을 직접 수정할 수 있는 서비스

• 직접 정산 수정 업무를 해보며, 서비스로 구현화 할 수 있는 기능 기획 및 설계

• SSE 기반 임시 저장 기능 개발

  • 유저 체류 시간 300% 증가, 운영 효율 120% 개선

• useRef, useIsInViewport, useMemo를 활용한 렌더링 최적화

• 정산 수정 기능 개발

  • 업무 카톡방 제거, 정산 요청 자동화, 담당자당 하루 1.5시간 이상 업무 단축

기술스택 : React, TypeScript, MUI, RxJS, Styled-Components

프로젝트 소개 : 동대문 도매 셀러들이 온라인에서 상품을 쉽게 등록하고, 소매 유저에게 유통할 수 있도록 돕는 서비스

• Firebase 이벤트 연동 및 사용자 행동 추적 환경 구축

• 도매 앱 유입률 향상을 위한 네이티브 앱 딥링크 연결 기능 개발

  • 앱에서 주문 확인율 6% -> 56%로 상승

• 비로그인 상태에서도 주문 후 로그인 유도 흐름 설계
  -> 본인 인증 및 토큰 기반 로그인 전환으로 도매 인증율 45% 증가

기술스택 : React, TypeScript, MUI, RxJS, Styled-Components, Firebase

1000개 이상의 데이터, 전통주 평점 / 리뷰 커뮤니티 서비스

• 사이트 링크

• 깃헙 링크

주요 기능 개발 및 성과

• 메인 페이지, 댓글 상세 페이지, 평가 기능, 마이페이지 등 핵심 서비스 페이지 개발.

  • React와. Next.js를 활용하여 사용자 친화적인 페이지를 구현.

  • React-Query로 데이터 패칭 및 상태관리를 최적화하여 빠르고 쾌적한 사용자 경험 제공.

• 모바일 앱 출시 (iOS)

  • React Native를 이용한 WebView 방식으로 앱 구현 및 App Store 배포.

    • iOS 다운로드 수 286회 기록, 앱스토어 인기 차트 105위 달성.

• 프론트엔드 팀 리드 및 프로젝트 관리

  • 프론트엔드 팀 일정을 수립하고 관리하며, 팀원 간 업무 조율 및 일정 준수율을 향상시킴.

  • QA 과정에서 발생하던 소통 문제를 해결하기 위해 QA 보드를 직접 설계 및 구축하여 불필요한 커뮤니케이션을 최소화하고 이슈 처리 속도를 단축함

기술스택 : React, Next.js, React-Query, tailwind

커플과 부부를 위한 밸런스 게임 서비스로, 가치관 테스트를 통해 궁합 점수를 제공하고 상대방과의 답안 비교 기능을 지원

• 깃헙 링크

• 개발하면서 경험한 내용을 기록한 블로그

주요 기능 개발 및 성과

• 총괄 팀장으로서 프로젝트 기획, 아이디어 제안, 팀원 모집, 일정 수립 및 전체 관리 담당.

• 백엔드 개발자로서 전체 인프라 구성, 데이터베이스 설계, API 설계 및 개발 주도.

• 프론트엔드 개발자로서 매칭된 유저 리스트 및 유저 답안지 조회 페이지 개발.

• 회의 내용을 바탕으로 기획 문서 정리, 사용자 흐름(Flow) 정의 및 문서화.

기술스택 : AWS , Serverless, EC2 , MySQL , S3

코드스테이츠 39기 32팀 34팀 프론트엔드 멘토

• 멘토링 수료증

주요 역할

• 팀원 컨디션 체크

• 프론트엔드 관련 질의응답

• 프로젝트 리딩, 개발 방향성, 개발 범위 체크

프론트엔드 멘토로서 팀원들의 개발 진행 상황과 컨디션을 주기적으로 체크하며, 프론트엔드 기술 관련 질의응답, 코드 리뷰, 프로젝트 구조 피드백을 통해 실질적인 기술적 성장을 도울 수 있도록 지원하였습니다.

멘토링 종료 이후에도 멘티들과 커피챗을 통해 진로, 기술 선택, 실무에 대한 다양한 인사이트를 전달하며 교류를 이어갔고,
이러한 경험은 이후 회사에 새로 입사한 인턴분들을 교육할 때도 큰 도움이 되었습니다.