미리보기

소스라이브 (B2B 자사몰 라이브커머스 솔루션)

• 플레이어와 어드민 유지보수

• 기능 조직에서 6인 프론트엔드 팀의 일원으로 제품 개발 중

모비두 디자인 시스템

• 디자인 토큰 기반의 디자인 시스템 구축

• 디자인 시스템 전파를 위해 사내 세미나 진행

소스애드 (라이브커머스 마케팅 솔루션)

• 어드민 구축 및 유지보수

• 목적 조직에서 1인 프론트엔드 개발자로 요구사항 수립부터 런칭까지 진행

• 스토리북을 시범 도입하여 스토리북 기반 전사 협업 문화 정착을 리드

쇼킷 (AI 숏폼 추출 및 영상, 자막 편집 솔루션)

• 영상 및 자막 편집 기능 구축 및 유지보수

• TF 조직에서 1인 프론트엔드 개발자로 POC부터 정식 런칭까지 참여

족보통

대학 선후배끼리 시험 족보를 공유할 수 있는 서비스

• 프론트엔드 개발 및 유지보수

LLM 기반의 AI 숏폼 추출 및 영상, 자막 편집 서비스

Typescript React Vite @Tanstack/React-Query Konva.js

• Konva.js를 활용한 HTML5 Canvas 기반의 영상 크롭 및 크기, 위치 조절 기능 개발

• ASS 포맷 자막 파싱 및 폰트, 내용, 색상 등 편집 기능 개발

• HTML5 Video와 ASS 자막의 동기화 및 렌더링 기능 구현

• 영상 구간 조정 트리머 개발

라이브 방송의 광고 신청 및 관리, 광고 집행 결과 리포트, 대시보드 등의 기능 제공 플랫폼

Typescript React Next.js (Page Router) @Tanstack/React-Query Zustand React-Hook-Form Yup Storybook MSW Framer-Motion ECharts SCSS Docker

• 회원가입, 로그인, 광고 신청, 리포트 입력 및 확인, 대시보드 등 주요 기능을 단독 개발 및 QA 대응

• Docker 이미지 크기 최적화 (약 4GB -> 약 300MB) -> 배포 시간 20% 단축 및 디스크 용량 효율 개선.

• 프로젝트를 Feature 단위로 구조화하여 코드 유지보수성과 응집도 향상.

• ECharts 커스터마이징으로 멀티 차트 지원 -> 대시보드에서 데이터 시각화 품질 향상.

• 스토리북 도입 및 전사 협업 문화 정착을 주도.

디자인 토큰 기반의 디자인 시스템 구축 및 사내 라이브러리 배포

Yarn Workspace Monorepo Typescript React Vite Storybook Vitest Rollup Changeset Gitlab Package Registry SCSS

• 36개의 Atoms 및 Molecules 단위 컴포넌트 개발 및 배포

• Global, Alias, Component 계층의 디자인 토큰 체계 도입 -> 신규 디자인 반영 속도 25% 단축.

• 스토리북 환경 구성 및 가이드 문서 제작으로 개발자와 디자이너 간 협업 효율 개선.

• Rollup 설정을 통해 CommonJS, ESM 환경 모두 지원.

• 단위 테스트 작성 (커버리지 약 85%)으로 컴포넌트 신뢰성 및 안정성 확보.

라이브커머스 스트리밍 플레이어

TypeScript React React-Redux (Toolkit, Saga) Scss Vite Storybook Socket.IO Hls.js React-I18next

• 실시간 채팅(신고, 관리자 답변 등), 인서트, 실시간 공지 등 전반적인 플레이어 기능 개발.

• 다양한 브라우저 및 iOS/AOS 기기에서의 크로스브라우징 이슈 해결로 사용자 경험 개선.

• Create-React-App 기반 프로젝트를 Vite로 마이그레이션

  • 빌드 속도 (약 3분 -> 약 1분) 단축.

  • 로컬 구동 속도 (12초 -> 0.3초) 단축.

  • 배포 속도 (10분 -> 8분) 단축.

• 코드 스플리팅, 텍스트 압축, 트리 쉐이킹 유도 등을 통해 LightHouse 점수 개선 (40점 -> 88점).

• 번들 크기 최적화 (약 3MB -> 약 1MB) 및 CloudFront 캐싱 적용으로 콘텐츠 다운로드 속도 개선 (60ms -> 9ms).

• 이미지 리사이징 및 Pre Loading을 통한 이미지 최적화로 LCP 0.3초 개선.

• React-Redux의 안티 패턴 제거 및 리렌더링 개선 (리렌더링 속도 40% 개선).

개인 블로그 구축 및 운영 중
(Website)

Typescript React Next.js (App Router) Mantine SCSS Vercel

디자이너와 개발자가 팀을 이뤄 프로젝트를 진행하는 동아리

인사이트 아웃 (Insight-Out)

(Website) 폐쇄
취준생들이 자기소개서 작성 시 참고할 수 있도록 본인의 경험을 정리할 수 있는 서비스

Typescript React Next.js (App Router) Chakra ui @Tanstack/React-Query Zustand TailwindCSS Storybook

• 회원가입 및 로그인, 마이 페이지, 메인 페이지 개발

• OAuth2.0 (Google) 기반의 Access Token, Refesh Token 인증 플로우 구현