미리보기

• OpenAI Assistant를 활용한 챗봇 신규 서비스 개발 (AI Talker, AI Survey)

• 스타트업 경영지원 및 원격근무를 위한 메타버스 신규 서비스 개발 (Swing)

• 개발 생산성을 늘리기 위한 CMS UI Kit 자체 개발

• 개발 효율 향상을 위한 Webpack(v5), Vite 기반 보일러 플레이트 설계 및 구현

신규 서비스 (굿테리어) 개발

• 그누보드(PHP) 기반 자사 인테리어 견적 사이트 퍼블리싱

• Slider, Fade 등 다양한 애니메이션 관련 기능 구현

• 기존 고객사 요청 기능 개발 및 유지 보수

OpenAI Assistant API를 활용한 개인용 AI 챗봇 플랫폼과 관리자 서비스를 개발했습니다.

관리자 서비스에서는 각 개인 챗봇의 Assistant 설정(프롬프트, 모델 선택, 응답 스타일, 지식 베이스 등)을 관리자가 직접 커스터마이즈할 수 있도록 구현하여, 사용자별 맞춤형 AI 경험을 제공하고자 했습니다.

기존 React 기반 챗봇 서비스의 페이지별 동적 SEO 처리 한계 및 수동적 업무를 해결하기 위해, Next.js 기반으로 전면 아키텍처 리뉴얼을 주도했습니다. 레거시 코드베이스 분석부터 개발 환경 구축, 동적 설정 시스템 개발까지 전 과정을 담당하며 새로운 플랫폼을 별도로 개발했습니다. [리뉴얼 전] [리뉴얼 후]

• 일관성 없던 Markdown 메시지를 HTML 기반으로 개선하여 통일된 UX 구현

• 역방향 무한 스크롤과 메시지 로딩 최적화를 통해 대화 히스토리 조회 성능 및 UX 개선 [관련글]

• 챗봇별 동적 메타 태그 적용을 통한 맞춤형 SEO 최적화 구현

• iOS Safari 가상 키보드 이슈 해결로 모바일 사용성 크게 향상 [관련글]

• 관리자의 AI Assistant 세밀한 제어와 개인화된 AI 챗봇 경험을 제공하는 플랫폼 구축

메타버스의 수요가 사라지고 새로운 도메인을 찾던 중, AI로 방향이 결정되었습니다. OpenAI API를 활용한 서비스 사업화 가능성을 검증하기 위해, 대화형 설문 생성 MVP 프로젝트를 기획부터 개발, 배포까지 혼자서 주도적으로 진행했습니다. [링크]

Nest.js로 OpenAI와의 API 통신 및 비즈니스 로직을 직접 구현하고, 프론트엔드에서는 SSE(Server-Sent Events) 기반의 실시간 스트리밍 채팅을 도입해 사용자가 AI와 자연스럽게 대화하며 설문을 빠르게 완성할 수 있도록 설계했습니다.

• SSE 기반 실시간 메시지 스트림 처리 및 사용자 입력에 따른 동적 UI 반영 구현

• 무한 스크롤, 온보딩, 모달 등 다양한 UX 요소를 체계적으로 설계하여 서비스 완성도 향상

• 백엔드부터 프론트엔드, 인프라 구축까지 풀스택 개발 경험 축적

• AI 기반 대화형 설문 생성 서비스 프로토타입을 성공적으로 구현하고 사업화 가능성 검증

스타트업을 위한 WebGL 기반 3D 가상 오피스와 정부 지원 과제 등 각종 업무 지원 기능을 제공하는 서비스에서, CMS와 서비스 페이지 등 프론트엔드 전 영역을 단독으로 담당하며 개발부터 배포까지 주도적으로 이끌었습니다.

성능과 유지 보수성을 고려해 CRA 대신 Webpack(v5) 기반의 커스텀 개발 환경을 직접 구축하고, Emotion, React Query, Jotai 등 최신 스택을 적극 도입해 효율적인 개발 환경을 조성했습니다.

• Webpack v5 기반 커스텀 개발 환경 구축으로 프로젝트 요구사항에 최적화된 빌드 시스템 구현

• Lazy Loading과 코드 스플리팅 적용으로 초기 번들 사이즈 감소 및 렌더링 속도 개선

• SplitChunks, Terser, CssMinimizer 등 최적화 플러그인을 활용한 번들 경량화

• bundle-analyzer를 통한 번들 구조 분석 및 불필요한 코드/의존성의 지속적인 제거

반복되는 React 프로젝트 셋업과 CMS 개발의 비효율성 문제를 동시에 겪고 있었습니다. 새 프로젝트를 시작할 때마다 Webpack 설정부터 해야 했고, CMS 개발 시에는 MUI, Antd의 과도한 커스터마이징으로 인해 개발 속도가 떨어졌습니다.

이를 해결하기 위해 두 가지 전략을 추진했습니다. 먼저, Webpack v5와 Vite 기반의 React 보일러 플레이트를 각각 제작하여 프로젝트 성격에 따라 선택할 수 있도록 했고, CMS 전용 UI 라이브러리를 별도로 개발하여 재사용성과 일관성을 확보했습니다.

• Webpack v5와 Vite 기반의 React 보일러 플레이트 제작

• CMS 전용 UI 라이브러리를 Rollup.js로 번들링하여 CJS/ESM 환경 모두 지원

• React, Emotion 등을 Peer Dependencies로 외부화해 번들 크기 최소화

• Yarn Berry 기반 모노레포 아키텍처와 Lerna 버전 관리 도입으로 확장성과 관리 효율성 향상

• Storybook, Chromatic을 통한 컴포넌트 단위 개발 및 배포 환경 구축

Unity 기반 WebGL 앱에서 사용할 아바타 템플릿 및 사용자 커스텀 아바타 파츠 심사 서비스가 외주 업체를 통해 개발되던 중, 갑작스럽게 저에게 인수인계되었습니다. 코드 분석 결과, 여러 성능 및 구조적 문제가 산재해 있었습니다.

3D 아바타 렌더링 컴포넌트의 리소스 로딩이 완료될 때까지 전체 UI가 렌더링되지 않아, 사용자가 3초 이상 빈 화면을 보게 되는 치명적인 UX 이슈가 있었습니다. 이를 React Suspense와 스켈레톤 UI를 도입해 해결했습니다.

또한 프로젝트 내부에 누적된 3D 및 JSON 파일들로 인해 발생한 번들 사이즈 증가 문제는 정적 자산을 AWS S3로 이전하고 CDN을 적용함으로써 개선했습니다.

외주 업체에서 작업한 800줄이 넘는 거대한 컴포넌트는 Atomic Design 원칙에 따라 재사용 가능한 컴포넌트 단위로 분리하고, 반복되는 로직과 상태 관리는 커스텀 훅으로 추출하여 유지보수성을 크게 향상시켰습니다.

• 사용자 체감 로딩 시간이 3초 이상 소요되던 문제를 즉시 렌더링이 가능하도록 개선

• 초기 렌더링 속도 평균 600~800ms 단축 달성

• 각 페이지별 300~500줄 이상 코드 리팩토링으로 유지보수성 향상

• 외주업체 레거시 코드의 구조적 문제 해결 및 개발 효율성 대폭 개선

코로나19 종식으로 메타버스 수요가 감소하던 시기, 300명 규모의 대학 OT 및 오디션 시스템을 메타버스 환경에서 개최해달라는 요청을 급히 받았습니다.

기존 서비스는 CRA로 구축된 지 2년이 지난 레거시 코드 기반이었고, 유지보수에 취약하며 곧 종료될 예정이었기에 전면 리팩토링보다는 필요한 부분만 빠르게 개발하는 전략을 선택했습니다.

기존 시스템에 영향을 주지 않기 위해 신규 컴포넌트와 데이터 흐름을 완전히 독립적으로 설계하고, 모듈화된 구조와 React Query 기반의 효율적인 상태 관리를 적용했습니다.

또한 단일 EC2 인스턴스 환경에서의 트래픽 과부하 가능성에 대한 팀의 우려를 해소하기 위해 JMeter를 주도적으로 학습하고, 동시 접속 테스트를 설계 및 실행했습니다.

• 레거시 코드 분석 시간을 최소화하여 개발 일정을 한 달 이상 단축

• 기존 시스템에 영향을 주지 않고 안정적인 신규 기능 추가

• 약 400명 규모의 동시 접속 테스트를 통한 예상 트래픽 대비 시스템 안정성 사전 검증

• 300명 규모 대학 OT 및 오디션 시스템 성공적 런칭

CNCF 졸업 프로젝트 Argo Workflows 컨트리뷰터 멘티 활동 (⭐️ 13.6k ++)

• 과학 기술 정보통신부 장관상 수상 (대상) 🏆

• UX 측면 UI 개선 제안 및 기능 구현(협업)

• React UI 부분 레거시 컴포넌트 리팩토링 및 버그 수정 기여

• 매주 오프라인 모임을 통해 흥미로운 issue와 작업 공유