두잇 · 업무 프로젝트
D.A.X
AI 모델 학습·운영 플랫폼
데이터 수집·라벨링부터 모델 학습·추론까지 지원하는 사내 플랫폼입니다.
백엔드 개발자 1명과 협업해 프론트엔드 전 화면을 개발했습니다.
담당 업무
- 플랫폼 화면
- 프로젝트·대시보드·클래스·컬렉션·라벨링·모델 학습·추론 화면 구현
- 데이터 도구
- 캔버스 기반 바운딩 박스 라벨링, 이미지·폴더 업로드, 컬렉션 ZIP 다운로드 기능 개발
- 공통 구조
- 검색 조건·페이지네이션·로딩 상태 처리, 사내 표준 구조와 doit-uikit 적용
라벨링 이미지는 화면 크기에 맞춰 축소되지만 학습용 좌표는 원본 해상도로 저장해야 했습니다.
원본↔화면 좌표의 양방향 변환을 전용 훅으로 분리해 그리기·저장·재표시가 같은 규칙을 사용하도록 구현했습니다.
구현 구조와 설계
서비스 구성과 프론트엔드 담당 범위
React 프론트엔드는 웹 서버 API를 통해 프로젝트·라벨·모델 데이터를 조회하고 변경합니다.
백엔드와 AI 서버가 연결된 전체 구성에서 프론트엔드 화면과 API 연동을 담당했습니다.
사내 표준 디렉토리 구조를 적용하고 API 호출을 auth·project·class·datamanage·aiModel·operation 등 도메인별 서비스 모듈로 나눴습니다.
원본·렌더 좌표 변환은 useCoordinateTransform 훅으로 분리해 그리기·저장·재표시에 같은 규칙을 적용했습니다.
프로젝트 화면
사용 기술
TypeScript · React 18 · TanStack Query 5 · Zustand · React Router 6 · Axios · doit-uikit