미리보기

프론트엔드 개발자로서 연 매출 200억, 누적 학생 수 170만 명 규모의 온라인 교육 플랫폼에서 실시간 화상 강의 서비스 개발을 담당했습니다. Agora Video SDK를 활용한 화상 통화 시스템을 TypeScript와 React, Next.js 기반으로 구축했으며, 수백 명의 강사와 학생들이 동시에 사용하는 환경에서의 안정성과 성능 최적화에 중점을 두었습니다.

실시간 화상 강의, 소그룹 라이브, 화면 공유, 실시간 채팅 등의 핵심 기능을 개발했으며, Recoil과 Context API를 활용한 전역 상태 관리로 복잡한 UI 상태를 효율적으로 관리했습니다. 또한 TypeScript 기반의 체계적인 타입 시스템 구축과 재사용 가능한 UI 컴포넌트 설계로 코드 품질과 개발 생산성을 향상시켰습니다. 이러한 노력의 결과로 서비스의 월간 활성 사용자와 체류 시간이 크게 증가했으며, 반응형 UI/UX 개선을 통해 모바일 사용자의 접근성도 크게 향상되었습니다.

프론트엔드 개발자로서 프로젝트 관리 솔루션(PPM) 기업에서 1년 6개월간 근무하며, 프로젝트 관리의 핵심 기능인 간트차트와 프로젝트 생성/관리 시스템 개발을 담당했습니다. DHTMLX 라이브러리를 기반으로 한 간트차트를 커스터마이징하여 태스크, 마일스톤, 일정 관리 등의 기능을 구현했으며, JavaScript와 Node.js, Express, MongoDB 기술 스택을 활용했습니다.

프로젝트 생성, 작업 등록/관리, 팀원 할당, 진척도 추적 등 PPM의 핵심 기능을 개발했으며, 특히 엔터프라이즈 고객을 위한 트리 뷰 조직도, 워크스페이스 간트차트 등 맞춤형 기능을 구현했습니다. 또한 데이터베이스 테이블 정의서와 함수 기능 명세서를 작성하여 유지보수성을 향상시키고, 팀 내 지식 공유를 촉진했습니다. 이러한 노력의 결과로 100억 원 규모의 투자 유치 및 140개 이상의 고객사 확보에 기여했으며, 창업진흥원 소속 다수 기업의 실사용률을 확보하는 등 실질적인 비즈니스 성과를 달성했습니다.

• 예비 반려인들을 위한 체험형 가이드 앱 'PawWise'를 기획/개발 예정. OpenAI API를 활용한 맞춤형 추천 시스템과 실제 반려 생활을 시뮬레이션하는 가상 케어 시스템을 통해 입양 전 체계적인 준비를 지원하는 서비스
  
  주요 역할 및 설계 계획
  - 프론트엔드 개발 담당 (팀 구성: 프론트엔드 1명, 디자이너 1명, 마케터 1명)
  - AI 기반 추천 시스템 설계
  - 실시간 시뮬레이션 시스템 구현
  
  기술 최적화 계획
  - Zustand와 React Query를 활용한 상태 관리
  - Vercel Analytics 기반 성능 모니터링
  - Sentry를 통한 실시간 에러 추적
  - Google Analytics로 사용자 행동 분석
  - Jest와 React Testing Library로 테스트 자동화
  
  실제적인 반려 생활 체험
  - 단순한 정보 제공을 넘어, 실시간 알림과 시뮬레이션을 통해 실제 반려 생활의 리듬을 체험하며 사용자들이 자신의 생활 패턴과 반려동물 돌봄이 실생활에서 얼마나 조화를 이룰 수 있는지 실질적으로 파악

• 보유기술: TypeScript · React.js · Next.js · React Query · Zustand · Supabase · GraphQL · Jest · React Testing Libr · vercel · pnpm · Storybook · Git

• 링크: https://gichan-portfolio.vercel.app/projects?projectName=pawwise

• 연 매출 200억 규모의 온라인 교육 플랫폼에서 수백 명의 강사와 170만 명의 학생을 지원하는 실시간 화상 강의 서비스를 개발. Agora SDK를 활용하여 안정적인 실시간 스트리밍과 다양한 상호작용 기능을 구현함
  
  주요 역할
  - 화상 강의 서비스의 프론트엔드 개발 담당 
(팀 구성: 프론트엔드 2명, 백엔드 2명, IOS 1명, Android 1명, 디자이너 2명)
  - Agora Video SDK와 SD-RTN을 활용한 실시간 스트리밍 기능 구현
  - TypeScript와 Next.js 기반의 프로젝트 구조 설계 및 상태 관리 아키텍처 구축
  
  핵심 기능 개발
  - 실시간 화상 통화, 화면 공유, 강의 영상 재생, 실시간 채팅 기능
  - 수십 명의 동시 접속자를 지원하는 대규모 실시간 강의 시스템
  - 소그룹 라이브 세션 및 브레이크아웃(소그룹) 룸 기능
  
  성능 최적
  - Webpack 빌드 최적화 및 코드 스플리팅으로 초기 로딩 시간 단축
  - React Query와 상태 관리 최적화로 실시간 데이터 처리 성능 개선
  - 지연 로딩 및 컴포넌트 최적화로 대규모 접속 시 안정성 확보

• 보유기술: React.js · TypeScript · Next.js · github · Tailwind CSS · Zustand · Recoil · Git

• 링크: https://gichan-portfolio.vercel.app/projects?projectName=live_service

• 사회 취약계층 아동들의 급식 복지 서비스 접근성 향상을 위해, 아동급식드림카드 가맹점 정보를 종합적으로 제공하는 웹 서비스를 기획하고 개발하고 있습니다. 전반적인 개발 프로세스를 주도하며, 특히 프론트엔드 아키텍처 설계에 중점을 두고 있습니다.
  
  주요 역할
  - 프로젝트 매니저 및 프론트엔드 개발 담당 
(팀 구성: 프론트엔드 1명, 백엔드 2명, 디자이너 2명)
  - 애자일 방법론 기반 스프린트 계획 수립
  - 기술 스택 선정 및 아키텍처 설계
  - Git 브랜치 전략 및 코드 리뷰 프로세스 구축
  
  핵심 기능 개발
  - Kakao Maps API 기반 가맹점 위치 시각화
  - 대구시 공공 API 연동 실시간 정보 업데이트
  - 사용자 위치 기반 최적 경로 안내
  - 재사용 가능한 UI 컴포넌트 라이브러리 구축
  
  성과 및 최적화
  - React Query를 활용한 서버 상태 관리
  - TypeScript 기반 타입 안정성 확보
  - SPA/MPA 하이브리드 라우팅 구현
  - 컴포넌트 모듈화로 재사용성 향상

• 보유기술: TypeScript · React.js · React Query · Redux · Node.js · Express · SCSS · Spring · MariaDB · Git

• 링크: https://gichan-portfolio.vercel.app/projects?projectName=deats

• IT 취업 준비생을 위한 면접 준비 플랫폼 'Qdrop'을 기획/개발. 실제 면접 경험자들의 질문과 전문가 답변을 제공하는 웹/앱 서비스를 구축하며, 프론트엔드 개발을 담당함
  
  주요 역할
  - 프론트엔드 개발 담당 (팀 구성: 프론트엔드 1명, 백엔드 1명, 디자이너 1명)
  - 전체 개발 일정 수립 및 리소스 분배
  - 기술 스택 선정 및 아키텍처 설계
  - 웹/앱 통합 개발 프로세스 구축
  
  핵심 기능 개발
  - 카테고리별 CRUD 기능을 갖춘 게시판 시스템
  - OAuth 기반 회원가입/로그인 시스템
  - 스켈레톤 로딩을 활용한 UX 최적화
  
  크로스 플랫폼 개발
  - React Native를 활용한 모바일 앱 개발
  - 웹/앱 간 일관된 UI/UX 제공
  - 모바일 최적화 터치 인터랙션 구현
  - PlayStore 앱 등록 및 배포 완료

• 보유기술: React.js · Redux · React Native · Node.js · Express · MySQL · Spring · CSS Module · Git

• 링크: https://gichan-portfolio.vercel.app/projects?projectName=qdrop

• 창업진흥원 산하 100여 개 기업을 위한 PPM 솔루션의 엔터프라이즈 모델을 개발. 워크스페이스 레벨의 프로젝트 관리 시스템을 구축하고, 다양한 데이터 시각화 기능을 통해 기업별 맞춤형 프로젝트 관리 환경을 제공함
  
  주요 역할
  - 프로젝트 매니저 및 프론트엔드 개발 담당 
(팀 구성: 프론트엔드/백엔드 3명, 디자이너 3명, 마케터 2명)
  - 워크스페이스 레벨 프로젝트 관리 시스템 설계 및 개발
  - 프로젝트 일정, 리소스, 인력 관리 총괄
  
  핵심 기능 개발
  - 조직도 기반 트리뷰 및 워크스페이스 간트차트
  - 필터링 리스트뷰, 탭형 카드뷰, 워크스페이스 그래프 뷰
  - 기업별 맞춤형 프로젝트 관리 대시보드
  - 반응형 레이아웃으로 다양한 디바이스 환경 지원
  
  시스템 설계
  - 확장 가능한 워크스페이스 구조 설계
  - DB 테이블 정의서 및 함수 기능 명세서 작성
  - 클래스 네이밍 및 파일 구조 표준화
  - 기업별 커스터마이징 가능한 확장성 있는 시스템 구축

• 보유기술: Javascript · Jquery · Node.js · Express · MongoDB · Mongoose · SCSS · Git

• 링크: https://gichan-portfolio.vercel.app/projects?projectName=enterprise_model

• 100억 원 규모의 투자를 유치한 PPM(Project Portfolio Management) 솔루션의 핵심 기능인 간트차트 서비스를 개발. DHTMLX 라이브러리를 기반으로 프로젝트의 태스크와 마일스톤을 효과적으로 관리할 수 있는 시스템을 구축함
  
  주요 역할
  - 간트차트 서비스의 프론트엔드/백엔드 개발 담당 
(팀 구성: 프론트엔드 1명, 디자이너 1명)
  - DHTMLX Gantt 라이브러리 커스터마이징 및 코어 기능 구현
  - RESTful API 설계 및 MongoDB 스키마 최적화
  
  핵심 기능 개발
  - 실시간 일정 조정 및 다중 태스크 처리 시스템
  - 태스크 간 종속성 관리 및 크리티컬 패스 자동 계산
  - 일간/월간/연간 단위의 맞춤형 인터페이스
  - 사용자 정의 필터 및 테마 설정 기능
  
  성능 최적
  - DocumentFragment 활용으로 DOM 조작 최소화, 렌더링 시간 50% 단축
  - 다중 태스크 일괄 처리로 API 호출 75% 감소 (수정당 평균 0.3초)
  - 데이터 페이지네이션 및 메모리 캐싱으로 대규모 데이터 처리 개선
  

• 보유기술: Javascript · Jquary · Node.js · Express · MongoDB · Mongoose · SCSS · Git

• 링크: https://gichan-portfolio.vercel.app/projects?projectName=gantt_chart

[유데미 x 스나이퍼팩토리] Next.js 프로젝트 캠프 2기에서 리드 멘토로 활동하며 3개 팀, 총 12명의 교육생을 지도했습니다. 주요 프로젝트는 깃허브 레포지토리의 코드를 분석하여 보안 취약점을 검사하는 웹 서비스 개발이었습니다.

프로젝트의 기획 단계부터 배포까지 전 과정을 멘토링하면서, 특히 Next.js 13의 App Router 구조와 TypeScript를 활용한 타입 안정성 확보에 중점을 두었습니다. 실제 현업에서 자주 마주치는 문제들을 예시로 들며, 코드 품질과 유지보수성을 고려한 설계 방법을 지도했습니다.

기술적인 측면에서는 Puppeteer를 활용한 웹 크롤링 구현 시 발생하는 이슈들을 해결하는 방법을 지도했고, LLaMA 모델을 활용한 코드 분석 시 효과적인 프롬프트 작성법을 교육했습니다. 또한 Next.js의 폴더 구조 설계나 상태관리 전략 수립 등 아키텍처 관련 의사결정에도 적극적으로 조언했습니다.

특히 강조했던 부분은 "왜 이렇게 해야 하는가"에 대한 이해였습니다. 단순히 코드 작성법을 알려주는 것이 아니라, 특정 기술이나 패턴을 선택한 이유와 그 장단점을 설명하며 실무에서의 의사결정 과정을 경험할 수 있도록 했습니다.

결과적으로 12명의 교육생 중 1명의 우수 수료생을 배출했으며, 모든 팀이 성공적으로 프로젝트를 완료하고 배포까지 진행했습니다. 이 과정에서 제가 실무에서 얻은 경험과 지식을 후배 개발자들과 나누며, 교육자로서도 많은 성장을 할 수 있었습니다.