eXemble

온프레미스 환경에서 기업 데이터 기반 생성형 AI 운영을 통합 관리하는 사내 LLMOps 플랫폼. 워크플로우 빌더와 AI 채팅 프론트엔드를 담당.

🔗 eXemble LLMOps 서비스 소개 →

스택: React 18 TypeScript Zustand React Flow react-hook-form Zod SSE

---

AI 채팅 시스템

SSE 기반 실시간 채팅 아키텍처 설계

기존 채팅의 파일 중복 업로드/복제 등 반복 버그를 단발 이슈가 아닌 구조적 문제로 진단하고 기획 단계부터 설계 방향을 정리해 팀에 공유했습니다. SSE delta 단위 스트리밍과 Reducer 패턴 중앙 집중식 상태 관리를 도입해 streaming/error/interrupt 플로우를 안정화했습니다.

결과: 2주 예상이던 채팅 작업을 3일 내 완료해 출시 일정 준수. 운영 중 주요 버그 0건

📝 SSE 이벤트 프로토콜로 AI 채팅 스트리밍 설계하기 →

채팅 안정성 강화

하트비트 기반 연결 감시/자동 재연결/응답 지연 타임아웃 처리로 네트워크 예외 상황에서도 사용자 개입 없이 복구되도록 보완했습니다. 실시간 응답과 대화 기록의 데이터 형식이 달라 화면을 이중 관리하던 한계는 백엔드와 협의해 단일 형식과 단일 컴포넌트로 통합했습니다.

---

워크플로우 에디터

에디터 구조 리팩토링

인수받은 에디터는 노드 하나를 수정할 때 6~7곳에 흩어진 코드를 함께 손봐야 하는 구조여서 코드 파악 비용과 버그 발생 가능성이 모두 높은 상태였습니다.

• 노드 타입(LLM/Tool/Branch)별 컴포넌트를 분리하고 공통 로직을 NodeBase로 응집해 노드 수정 시 영향 범위를 한 곳으로 축소
• 노드 추가가 누락되면 빌드 타임 타입 에러로 검출되도록 구조화해 휴먼 에러 예방
• 노드 단위 selector + useShallow로 구독 범위를 좁혀 불필요한 리렌더링 감소

워크플로우 유형 확장과 인라인 편집

지원하는 워크플로우 유형이 제한적이어서 고객 시나리오 대응에 한계가 있었습니다. PO 및 백엔드와 협의해 의도 분류와 스케줄링 등 신규 노드를 정의/개발하고 편집 화면 안에서 노드와 Tool을 바로 생성/수정할 수 있는 인라인 편집과 환경 간 이식이 가능한 내보내기/가져오기를 함께 도입했습니다.

결과: AI 워크플로우 유형 2배 이상 확장. 1분기 동안 워크플로우 기능 개선 20건 이상 릴리즈

---

DX & 자동화

AI 에이전트 기반 테스트 자동화

별도 QA 팀 없이 짧은 개발 주기를 운영하다 보니 테스트 도입이 계속 미뤄지던 상황이었습니다. 단위/통합/E2E 비율을 정한 테스트 피라미드 구조를 잡고 Claude Code와 Playwright MCP 그리고 프로젝트 컨벤션을 정의한 CLAUDE.md를 활용해 AI 에이전트가 테스트 코드를 작성하고 유지하는 흐름을 팀에 정착시켰습니다. 테스트 실패 시 GitHub Issue가 자동 등록되도록 구성해 운영 안정성도 확보했습니다.

📝 QA도 시간도 없던 팀이 AI Agent로 테스트 자동화를 정착시킨 방법 →

GitHub PR 자동 생성 에이전트

PR 작성에 들어가던 반복 작업을 줄이기 위해 GitHub PR 자동 생성 에이전트를 개발하여 문서화 리소스를 절감했습니다.

---

팀 리딩과 협업 주도

프론트엔드 선행 API 설계 (출시 일정 압박 대응)

출시 일정이 매우 급박한 상황에서 담당 페이지들이 개발 플로우 후반부에 위치해 그대로 두면 일정 내 출시가 불가능한 구조였습니다. 각 화면에 필요한 정보를 정리해 API 인터페이스를 선행 설계하고 백엔드에 전달함으로써 프론트엔드와 백엔드의 병렬 개발을 실현했고 권한별 라우팅과 접근 제어 시스템을 함께 설계해 서비스 보안 구조의 기반을 마련했습니다.

프론트엔드 팀 리딩

3인 프론트엔드 팀에서 별도 리드 없이 운영해야 하는 상황에서 일정 관리와 태스크 할당 그리고 기술적 의사결정의 역할을 맡았습니다.

• 매 스프린트마다 PO와 우선순위/스코프 조율
• 주간 변경사항 공유 세션으로 각자 작업의 비즈니스 배경과 기술적 결정을 팀 전체에 전파
• 팀원의 독립 처리 범위를 점진적으로 확장

결과: 1분기 전체 스프린트 일정 지연 0건

Sticpay 서비스

상대방이 어디에 있든 실시간으로 송금/수취가 가능한 온라인 e-wallet 서비스.

Next.js, TypeScript, Emotion.js, Recoil

인증 정보 쿠키 기반으로 마이그레이션

서브도메인이 다른 두 서비스가 스토리지 기반 인증을 사용하면서 인증 정보 공유에 한계가 있었습니다. 인증 방식을 쿠키 기반으로 전환하고 데이터 암호화를 적용해 보안을 강화하면서, 서브도메인 간 인증 정보 공유 문제를 함께 해결했습니다.

SVG 스프라이트 도입으로 성능 개선

국가 선택 UI에서 260개의 국기 이미지를 개별 요청하느라 페이지 로딩 성능이 저하되는 문제를 발견했습니다. SVG 스프라이트 기법을 도입하고, 로컬과 S3 환경에서 모두 사용할 수 있는 스프라이트 이미지 생성 스크립트를 개발해 적용했습니다.

결과: 이미지 요청 횟수 260회 → 1회, 페이지 로딩 속도 큰 폭 개선

SSO 계정 연동 중 API 요청 취소 문제 해결

페이지 이탈 시 진행 중인 API 요청이 중단되어 SSO 계정 연동이 실패하는 문제가 있었습니다. fetch keepalive 옵션을 활용해 요청이 페이지 종료 후에도 완료되도록 처리했고, 이 방식을 polling 기반의 안정적인 통신 구조로 SSO 계정 연동에 적용했습니다.

React 18 마이그레이션

React 17 · Node 16 환경에서 기능 제약이 발생해 마이그레이션을 진행했습니다. Docker로 Node 20 환경을 먼저 구성한 뒤 React 18로 업그레이드했고, React Router · React Query 등 주요 라이브러리의 호환성 문제를 해결하며 안정적으로 마이그레이션을 완료했습니다.

Main 리뉴얼

이미지 최적화를 통한 성능 개선

메인 페이지 이미지들을 WebP 형식으로 변환하고 뷰포트 밖 이미지에 지연 로딩을 적용해 성능을 개선했습니다. WebP 미지원 브라우저를 위해 picture 태그로 PNG를 대체 제공해 호환성도 확보했습니다.

결과: 모바일 Lighthouse 점수 26 → 72

Money In&Out 리뉴얼

입출금 페이지 구조 개선

페이 메소드별로 개별 페이지를 만들어야 하는 입출금 시스템의 비효율적인 구조가 있었습니다. 페이 시스템을 카테고리화하고, 서버 데이터에 따라 동적으로 처리되는 구조로 재설계했습니다.

결과: 전체 페이지 수 70% 축소, 새 페이 추가 시 별도 페이지 생성 없이 즉시 대응 가능

많은 페이지를 관리하기 위한 퍼널 도입

각 카테고리·페이마다 사용자에게 받아야 하는 데이터가 많아 여러 스텝으로 이루어진 페이지가 많았습니다. 퍼널 간 상태를 관리하면서 단계를 명시적으로 이동시킬 수 있는 useFunnel 커스텀 훅을 만들어 사용했습니다.

다이어그램을 활용한 복잡한 기능 개선

히스토리와 문서 없이 코드만으로 파악해야 했던 계정 연동 기능을 리뉴얼하면서, 코드 분석을 통해 성공/실패 케이스를 포함한 상태 다이어그램을 작성해 API 응답별 상태 흐름을 시각화했습니다. 이를 팀에 공유하고 문서화하여 복잡한 기능을 안정적으로 구현했고, 향후 유지보수성과 팀 생산성 향상에 기여했습니다.

---

Sticpay API Docs

STICPAY에서 제공하는 API 문서를 페이지 형태로 제공하는 서비스.

TypeScript, Next.js, App Router, Node 20

PDF 문서를 MDX 기반 웹 문서로 전환

PDF 형태로 관리하던 API 문서를 MDX 기반 웹 페이지로 전환했습니다. MDX 파일을 로컬에서 관리하고 페이지에서 직접 렌더링하는 방식을 도입해, 문서 관리와 업데이트가 용이한 시스템을 구축했습니다.

퍼지 검색 알고리즘 기반 문서 검색

로컬 MDX 파일 기반의 문서 검색 시스템을 구현하면서 퍼지 검색 알고리즘을 도입해 유사 단어까지 검색 가능하도록 했습니다. 정확한 검색어를 모르는 사용자도 원하는 문서를 쉽게 찾을 수 있도록 개선했습니다.

검색 사용성 및 접근성 개선

검색 결과 내 키보드 네비게이션과 **전역 단축키(cmd+k)**로 검색창에 빠르게 접근할 수 있도록 했고, ARIA 속성을 활용해 웹 접근성을 준수하여 모든 사용자가 편리하게 검색할 수 있도록 개선했습니다.

---

Sticplay 신사업 개발

STICPAY에서 운영하는 iGaming 고객을 위한 캐시백 서비스.

Node 16, Zustand, next-i18next

다국어 i18n 세팅

빌드 시마다 발생하는 다국어 API 호출로 인한 서버 부하 문제를 발견했습니다. 번역 데이터 자동화 스크립트를 구현해 CI/CD 파이프라인에서만 실행되도록 개선했고, 이를 통해 불필요한 API 호출을 제거하고 서버 안정성을 확보했습니다.

로그인 · 2FA 연동 및 페이지 접근 제어

기존에는 페이지 이동마다 클라이언트에서 권한을 체크하느라 화면이 잠시 노출되었다가 리다이렉션되는 문제가 있었습니다. Next.js middleware를 도입해 페이지 진입 전 서버에서 권한을 검증하도록 개선했고, 이를 통해 화면 깜빡임 현상과 동시성 문제를 함께 해결했습니다.

---

이메일 템플릿 노코드 빌더

마케팅팀이 eDM 콘텐츠를 개발자 없이 직접 만들 수 있도록 한 사내 빌더.

Next.js, TypeScript

반복 요청을 구조적으로 해소

마케팅팀이 eDM HTML이 필요할 때마다 개발자가 직접 작성하던 구조였고, 요청 빈도가 높아 개발 일정에 영향을 주고 있었습니다. 단발 요청이 아닌 구조 자체에서 문제를 해결하기 위해 비개발자가 콘텐츠를 직접 만들 수 있는 빌더를 제안·개발했습니다.

드래그앤드롭 기반 편집 환경

다단 레이아웃과 이미지·텍스트 블록을 드래그앤드롭으로 배치할 수 있도록 했고, HTML 미리보기와 직접 편집을 동시에 지원했습니다. 자주 쓰는 형식은 템플릿화하여 재사용 가능하도록 구성했습니다.

결과: 마케팅팀이 eDM을 자체적으로 100% 제작 가능, 반복 요청에 사용되던 프론트엔드 리소스를 다른 작업에 투입