미리보기

개요

AI 인프라 관리 및 데이터 라벨링 솔루션을 개발하는 프론트엔드를 맡아 B2B 기반 솔루션의 UI/UX 개선, 성능 최적화, 디자인 시스템 구축, 팀 내 협업 프로세스 정립 등 프론트엔드 전반을 주도함.
주요 프로젝트: GPU 관리 솔루션 Astrago, 데이터 라벨링 솔루션 X-Labeller, 한국 자동차 연구원 마켓플레이스

주요 성과

• 사용자 워크로드 생성 UI 전환으로 클릭 수 30% 감소, 사용성 향상

• 대시보드 및 GPU별 모니터링 시스템 개발로 자원 상태 실시간 가시화 구현

• 공통 컴포넌트 및 디자인 시스템 구축으로 UI 일관성과 생산성 향상

• X-Labeller 이미지 캔버스 렌더링 최적화로 FPS 안정화 및 UX 2배 개선

• 회고 문화와 개발 컨벤션 정립을 통해 팀 내 코드 품질 및 협업 효율 증대

상세 경력

Astrago (GPU 인프라 관리 솔루션)

• MVP부터 정식 운영, 기능 고도화, 유지보수까지 서비스 전반에 기여

• 워크로드 생성 UI 개선
  기존 Wizard 형식의 3단계 UI를 단일 페이지 UI로 전환, 워크로드 복제 템플릿 제공 및 필수 입력값에 대한 가이드 UX를 강화함으로써 입력 소요 시간과 이탈률 개선

• GPU 모니터링 시스템 개발
  시스템 자원 상태를 한눈에 확인할 수 있는 대시보드와, GPU별 온도, 전력, 점유율 등의 실시간 모니터링 UI를 개발해 사용자 경험을 개선

• xterm.js 기반 터미널 UI 개발
  GPU 워크로드와 연동되는 웹 기반 터미널 인터페이스를 xterm.js로 구현하였고, 다크/라이트 모드를 지원하는 커스터마이징 가능한 테마 시스템을 구축해 사용자 편의성을 강화

  • 렌더링 타이밍 이슈 해결(dynamic import, state에 넣는 형태로 처리 후 안정성 향상)

• RBAC 기반 권한 시스템 구축
  조직, 팀, 개인 단위로 리소스 접근 제어가 가능한 로그인 및 권한 관리 시스템을 도입하여 보안성과 관리 효율 향상

X-Labeller (데이터 라벨링 및 어노테이션 툴)

• OffscreenCanvas API 도입 및 렌더 최적화
  이미지 어노테이션 시 FPS 저하 문제를 OffscreenCanvas API와 useRef, useMemo를 활용해 개선하고, 줌 기능에서는 Debounce 처리를 통해 렌더링 비용을 최소화

• 기능 확장 및 UX 개선
  초기 3종의 라벨링 도구를 8종으로 확장했으며, 툴 조작 단계를 줄여 클릭 횟수를 10회 -> 4~5회로 단축, UX를 2배 이상 향상

한국자동차연구원 마켓플레이스

• 공통 레이아웃 및 UI 컴포넌트 모듈화
  복잡한 서비스 구조 내에서 재사용 가능한 UI 모듈을 정리하고 도입하여, 개발 생산성 30% 향상, 유지보수 효율 증가에 기여

• API 연동 및 데이터 가공 처리
  협력사 API 3종을 직접 연동하고, 데이터 포맷에 따라 전처리 로직을 구성하여 일관된 UI와 데이터 흐름을 확보

Svelte 기반 서비스 '투덥 클래스' 마이그레이션
- Typescript, Next.js, SWR, Recoil을 활용하여 기존 Svelte 기반 코드를 모던 프론트엔드 스택으로 전환

투덥 러닝 결과 보고서 기능 개발
- 학습 결과를 시각적으로 확인할 수 있도록 보고서 UI 및 데이터 표시 기능 구현
- OG 태그 적용으로 카카오톡 공유 기능 개선

역할

프론트엔드 개발

기여도

30% (기획, 설계, 개발, 리팩토링, 협업 문화 개선)

개요

Kubernetes 기반 GPU 클러스터 환경에서 머신러닝 워크로드를 효율적으로 관리할 수 있는 웹 기반 인프라 운영 솔루션입니다. 워크로드 생성, 모니터링, 대시보드, 터미널 기능을 포함하며, 사용자는 브라우저만으로 GPU 자원 상태를 파악하고 작업을 실행할 수 있습니다. (Website)

기술 스택

• Frontend: Next.js, TypeScript, react-query, jotai, Emotion, ApexCharts, MUI, next-auth

경험

• MVP(최소 기능 제품) 단계부터 참여하여, 초기 기획, 구조 설계, 개발, 성능 개선, 운영, 유지보수까지 프론트엔드 전반을 담당

• 프론트엔드 구조 설계 및 코드 품질 향상 주도

  • Git Flow 브랜치 전략 수립, 코드 컨벤션 정립, 공통 레이아웃 및 컴포넌트(Button, Modal 등) 모듈화

• 디자이너와 협업한 디자인 시스템 구축

  • 폰트, 버튼 등 각종 컴포넌트, 스켈레톤 UI와 404페이지 구성 등 사용자 경험 중심 설계 주도

• 워크로드 생성 기능 전면 리팩토링

  • 기존 Step 기반 UI를 일체형 구조로 변경하여 흐름을 간소화하고 유지보수성을 강화

  • 워크로드 복제 템플릿 기능으로 인한 추가 생성률 증가 및 React-hook-form을 활용해 필수 입력값 오류율 감소

• 실시간 GPU 상태 모니터링 대시보드 개발

  • ApexCharts를 활용하여 GPU 사용률, 온도 등 리소스 상태를 시각화하고 필터/정렬 기능까지 반영

• xterm.js 기반 터미널 기능 개발

  • WebSocket을 이용한 양방향 통신으로 실시간 명령 실행을 지원하고, 테마 설정 등 사용자 중심 기능을 강화

  • SSR 환경에서 발생하는 xterm.js 렌더링 문제를 dynamic import와 React 렌더링 주기 활용으로 해결

• Keycloak 연동 및 RBAC 기반 인증 시스템 구축

  • next-auth를 활용해 로그인, 세션 관리, 권한 기반 라우팅 등 인증 흐름을 설계 및 구현

• 협업 문화 정착 및 기술 공유 리드

  • 개발 아티클 작성 및 공유, 주기적인 회고 문화 도입,

  • 팀 역량과 일정에 맞춘 현실적인 기술 도입을 제안하고 리서치 진행

역할

프론트엔드 개발

기여도

40% (프론트엔드 구조 설계 및 라벨링 기능 개선 주도)

개요

프로젝트 관리, 팀원 권한 설정, 데이터 관리, 라벨링, 결과 추출 등 데이터 라벨링 업무 전반을 지원하는 올인원 솔루션입니다. 사용자 친화적인 웹 기반 인터페이스를 통해 대규모 데이터셋 관리와 고성능 라벨링 도구를 제공합니다.

기술 스택

• Frontend: Next.js, JavaScript, Redux Toolkit, Redux, CSS Module

• Canvas: Fabric.js -> Konva.js (성능 향상 목적 전환)

경험

• Mask brush 기능 개발

  • 이미지에 마스킹을 적용할 수 있는 브러시 기능을 신규로 구현하여 세밀한 라벨링 지원

• Konva.js 전환 및 OffscreenCanvas를 활용한 성능 최적화

  • 기존의 Fabric.js에서 발생한 렌더링 지연 문제를 해결하기 위해 Konva.js로 전환

  • OffscreenCanvas API를 활용해 캔버스 그리기 시 간헐적 멈춤 현상을 해소하고, FPS를 안정화하여 UX 향상

• 라벨링 도구 기능 고도화 및 개선 주도

  • 사용자의 라벨링 클릭 횟수를 10회 이상에서 평균 4~5회로 줄이도록 기능 개선

  • 기존의 수동 점 찍기 방식에서 자동 채움 방식으로 변경하여 사용성 100% 이상 향상

• 라벨링 서포트 기능 확장

  • 기존 3종이었던 라벨링 서포트 기능을 8종으로 확대하여 다양한 어노테이션 환경을 지원

• 툴 전반 유지보수 및 신규 기능 설계

  • 지속적인 기능 개선 및 사용성 테스트를 통해 툴 전반의 안정성 강화

• 공지사항 기능 및 페이지 구현

  • 긴급 공지, 일반 공지 작성 및 인증 사용자에 따른 권한 분기 기능을 포함한 공지사항 시스템 구축

• 단위 테스트 품질 개선

  • 300개 이상의 테스트 이슈를 직접 서치 및 수정하여 전체 테스트 안정성 확보

역할

프론트엔드 개발

기여도

35% (프론트엔드 컴포넌트 설계 및 개발 주도)

개요

자동차 관련 데이터를 판매하거나 구매할 수 있는 웹 기반 플랫폼으로, 다양한 API와 APP을 통합하여 사용자에게 제공하는 마켓플레이스 서비스입니다. 판매자와 구매자, 관리자 모두를 위한 다양한 기능이 구현된 서비스입니다. (Website)

기술 스택

Frontend: Next.js, TypeScript, Redux Toolkit, Redux, Emotion

경험

• 프론트엔드 운영 및 기획 참여

  • 프론트엔드 전체 화면 명세서 기획 및 설계 참여, 개발 업무 담당하면서 업무 파트 분배 및 일정 조율 주도

• 공통 컴포넌트 및 레이아웃 설계로 생산성 30% 향상

  • 반복 UI 요소(Button, Input 등) 및 페이지 레이아웃 모듈화로 개발 효율성 대폭 향상

• 페이지 전반 개발

  • 데이터 리스트, 데이터 상세, 판매자 데이터 등록 및 관리 페이지 문의사항 등 다수의 화면과 기능 개발

• 재귀 형태의 카테고리 컴포넌트 구현

  • 다단계 분류 구조를 지원하는 재귀적 카테고리 트리 UI 구현으로 다양한 데이터 분류 환경 대응

• 외부 및 내부 API 연동 및 통합 처리

  • 협력사 3곳의 이질적인 API 데이터를 하나의 일관된 형식으로 가공, 컴포넌트 재사용성과 유지보수성 향상

• Mock API 도입으로 개발 시간 단축

  • 실제 API 적용 전 Next.js의 API 핸들러 기능을 활용한 Mock API를 구성해 병렬 개발 진행

역할

프론트엔드/백엔드 개발

기여도

100%

프로젝트 소개

Nexus-Tag는 다수의 이미지 및 프로젝트를 효율적으로 관리하고, 다양한 어노테이션 유형을 직관적이고 빠르게 작업할 수 있도록 고안된 데이터 라벨링 툴입니다. 실무 경험에서 느꼈던 라벨링 도구의 불편함과 성능 문제를 개선하고자 설계부터 개발까지 전 과정을 직접 수행했습니다.

사용 기술

• Frontend: Next.js, TypeScript, TailwindCSS, React-Query, Zustand, Konva.js, Shadcn/ui

• Backend: NestJS, TypeScript, TypeORM, PostgreSQL

• Infra: AWS EC2, Route53, Docker, Docker-compose

주요 기능

• Konva.js 기반 어노테이션 기능 개발

  • Bounding Box, Polygon, Mask 등 다양한 라벨링 도구 제공

• 프로젝트 > 데이터셋 구조 설계

  • 워크스페이스 단위로 이미지 및 라벨링 데이터 효율적 관리

• 라벨 자동 저장 기능 구현

  • Zustand로 상태 동기화, 자동 저장 설계

• 프로젝트별 대시보드 제공

  • 진행률, 라벨 수, 작업 현황 등 한 눈에 파악 가능한 UI 구성

• 단축키 기반 빠른 작업 환경 구현

  • 라벨링 작업 속도 향상을 위한 UX 고도화

문제 해결 및 기술적 도전

• 라벨 선택 시 성능 저하 해결

  • 문제: 드래그 영역 선택 시 O(n) 복잡도로 심각한 렌더링 지연 발생

  • 해결: RBush 라이브러리 도입으로 공간 검색을 O(log n)으로 최적화, batchDraw + 이벤트 스로틀링으로 렌더링 비용 최소화

• Undo/Redo 기능 도입

  • 문제: 실수 시 복구 불가로 작업자 불편

  • 해결: Zustand에 Zundo 미들웨어 적용, 상태 변경 히스토리 저장 및 복원 기능 구현

링크

• GitHub 저장소

• 배포 URL

• C, Shell, Git을 활용한 자기주도 학습 및 팀 프로젝트 참여

• 첫 시험 32점에서 파이널 시험 84점으로 성과 향상

• 팀 협업 경험 및 동료 평가 제도를 통한 피드백 받음

• C의 로우 레벨 함수 구현 프로젝트 (예: strchar, strcmp 등)

- 과정
경남과학기술대학교 공학교육센터에서 주최했고, 경진대회를 하면서 아이디어 및 아이디어를 구현.
연말에 전시를 하고, 발표를 진행해 심사위원들의 평가를 받음.
- 결과
캡스톤 디자인 부문에서 최우수상을 받아, 여러 기회가 주어질 수 있었음.
개발자의 흥미를 느끼고, 다양한 프로젝트를 진행할 수 있는 원동력이 됨.

-과정
한국산업기술진흥원과 부산대학교가 합동 주죄한 BEEBOY로보컵에 참가하여 로봇을 제작하는 활동.

대회 주최 측에서 제작해야할 소형 로봇 설계 조건을 줬고 저희 팀은 학교에서 미리 제작 후 로보컵에 참가 진행
- 결과
타 팀과의 대결에서 기능과 작동여부 등의 차이로 거듭 승리를 하면서 결과적으로 로보컵 최고상인 "금상"을 얻음.