미리보기

B2B SaaS IT 통합 모니터링 플랫폼 WhaTap을 개발하고 있습니다. WhaTap 제품의 공통 화면(로그, 빌링, 계정)과 모듈을 유지보수하며, 높은 부하의 시계열 데이터를 사용자 친화적으로 시각화하는 업무를 맡아왔습니다.

• 메트릭스 차트(모니터링 대시보드), 로그 모니터링 화면 개발

• 빌링 및 계정 화면 개발(제품별 가격 정책 변경 및 글로벌 비즈니스 요구사항 지원, 결제 수단 퍼널 개편, 백오피스 개발)

• 글로벌 서비스 운영을 위한 다국어 처리 대응 방안 수립

• 레거시 제거(8년간 없던 Doctype 추가 및 사이드 이펙트 대응, antd 2.x 버전 제거)

• Tanstack Query 도입

• 기술스택: TypeScript, React, Tanstack Query, Styled-Component, Jest, Storybook

사내 전 제품에서 활용되며, 시간대별 모니터링 대상(약 300개)을 다양한 지표로 분석할 수 있는 대시보드를 개발했습니다. 이해관계자와 소통하며 요구사항을 수집하고, UI/UX 설계 및 사용성 테스트 등 적극적으로 제품 성장에 기여했습니다. ‘사용자가 원하는대로 위젯을 추가’할 수 있고, ‘요청 1건당 최대 약 129만 개의 데이터’ 시각화를 위한 복잡한 상태 관리와 성능 최적화 문제를 다루었습니다.
(사내 블로그 링크)

사용자 커스텀 대시보드 설계 및 구현

1. 위젯 CRUD, 위젯 정렬•배치 변경을 위한 레이아웃 설계 및 대시보드 템플릿 저장을 위한 상태 관리

2. 독립적이면서 사용자가 원할 때, 모든 위젯이 일괄적으로 움직일 수 있는 위젯 설계

트리 데이터 시각화를 위한 컴포넌트 개발

1. 트리 데이터 검색, 선택, 펼치기/접기 상태 관리

2. shift 키를 활용한 다중 선택 UX 구현

3. 리스트 가상화 기법과 Concurrent UI Pattern을 활용한 성능 개선

대시보드의 모든 데이터를 합친 차트 렌더링 최적화

1. 480KB(약 20만개) 데이터 렌더링(90ms), 사용자 인터랙션(550ms) 시간을 1.8ms로 개선

2. 메모이제이션, 리스트 가상화, Concurrent UI Pattern 활용

서버 부하 감소를 위한 API 요청 최적화

1. 불필요한 API 요청 판단을 위한 상태 관리

2. 세마포어 개념을 적용해 동시 요청 개수를 1개로 제한

3. N개의 데이터를 1~N개로 요청하여 컴포넌트에 전달하는 구조 구현(N개 → 1~N개로 개선)

로그 모니터링의 검색 문법, 사용법을 쉽게 익힐 수 있도록 검색 필터 UI를 개편했습니다. 마우스, 키보드로 쉽게 입력/수정할 수 있는 UI/UX를 설계하고, 사내 여러 제품의 일관성 없는 필터 UI 문제를 해결하고자 공통 컨벤션을 수립했습니다. 확장성을 고려한 React 디자인 패턴(compound, render props 등)을 활용해 5개 제품에서 사용하는 공통 컴포넌트를 설계했습니다. 또한, 기존 요구사항을 충족하며 확장성 있는 테이블 컴포넌트로 마이그레이션했습니다.
(로그 모니터링 가이드 문서)

검색 필터 컴포넌트 UI/UX 설계 및 구현

1. 마우스 및 키보드(Enter, Backspace, Esc, 방향키 등)를 통한 필터 조건 CRUD 및 팝오버 열기/닫기 구현

2. 다국어 입력 후 Enter 시 입력 내용과 표시된 내용이 어긋나는 문제 해결

3. 필터 조건을 N줄로 접어 표시하는 UI/UX 설계(IntersectionObserver, ResizeObserver를 활용하여 성능 개선)

리스트 → 테이블 컴포넌트로 마이그레이션

1. 기존 요구사항(무한 스크롤, 리스트 가상화 등)을 충족하며 테이블 요구사항(컬럼 크기 조절) 반영

2. 총 10곳의 사용처에서 공통화 및 공통 인터페이스 정립

글로벌 서비스 운영에 따른 문자열 동등 처리, RTL(Right-to-Left) 지원, 포매팅, 문자열 줄바꿈 스타일 등 다국어 처리 이슈를 해결하기 위해 문제를 정의하고, 이해관계자와 소통하며 해결 방안을 모색했습니다. 국내 자료가 부족해 해외 자료를 중심으로 리서치했으며, 이해관계자들이 각자의 입장에서 이해할 수 있도록 문서화하여 공유했습니다.

1. JavaScript prototype 함수를 모방한 문자열 동등 처리 함수를 개발하여 라이브러리 제작

2. 유닛 테스트 코드 작성 및 pre-commit, CI를 통한 검증

3. Storybook을 활용한 테스트 GUI 제공

Data Fetching 상태 관리의 편의성과 세밀한 캐시 관리를 통한 최적화를 위해 문서를 작성해 도입을 제안하고 추진했습니다.

1. 서비스 특성에 맞는 디폴트 옵션 정리(gcTime, staleTime)

2. query key 중복 방지를 위한 query key 관리 함수 설계

3. query 관리 컨벤션 정립 및 레거시 전환 지원

1. AI 기반 중고 의류 플랫폼 개발

2. 웹 표준 및 접근성 책 출판 활동

프론트엔드 기술 멘토링 및 상담 활동

대학생들을 위한 그룹 미팅 서비스 “미띵” 프론트엔드 및 채팅 서버 개발, 프로젝트 기획, 팀 빌딩 & 리딩

충북대학교 공지사항 알림이 어플 개발(교내 관련 110개 사이트 공지사항 조회 및 실시간 push 알림), MAU 약 4,500명

• 동아리 활동을 기록하기 위한 인터랙션 웹사이트 개발

• 수익형 글귀 공유 서비스 모바일 웹, 백오피스 개발