프로젝트 배경
1) 문제점
- 단순 텍스트만 추출하는 기존 OCR 기술의 시각적 스타일(제목, 본문 등) 정보 손실로 인한 문서 구조 이해의 한계 존재
- 고품질 스타일 OCR 데이터셋 제작을 위한 전문 도구 부재 및 수작업의 낮은 생산성과 비일관적 결과물 초래
- 대량의 문서 이미지 처리 시 발생하는 렌더링 성능 저하와 복잡한 UI로 인한 작업자 피로도 가중 및 효율 저하
2) 프로젝트 목표
- 직관적인 UI/UX: 최소한의 동작으로 빠르고 정확하게 텍스트 스타일을 그룹화할 수 있는 사용자 중심 인터페이스 개발
- 작업 효율 극대화: 드래그 선택, 단축키 기반 조작, 대용량 데이터 안정적 처리 등 생산성 향상을 위한 핵심 기능 구현
- 데이터 확장성 확보: 다양한 OCR 데이터 형식(JSON)을 입력받고, 그룹화된 결과물을 표준화된 형식(JSON, ZIP)으로 출력하는 유연한 데이터 파이프라인 구축
3) 주안점
- Canvas 렌더링 최적화: 수천 개 텍스트 박스 동시 렌더링 시에도 지연 없는 프론트엔드 성능 최적화
- 사용자 경험(UX) 중심 설계: 단축키 및 직관적 워크플로우를 통해 라벨링에 필요한 클릭과 마우스 이동을 최소화하여 작업 속도 향상에 집중
- 대규모 데이터 처리: 폴더 단위 일괄 업로드 및 전체 결과 ZIP 다운로드가 가능한 배치 처리 기능 구현으로 확장성 확보
- 단순 텍스트만 추출하는 기존 OCR 기술의 시각적 스타일(제목, 본문 등) 정보 손실로 인한 문서 구조 이해의 한계 존재
- 고품질 스타일 OCR 데이터셋 제작을 위한 전문 도구 부재 및 수작업의 낮은 생산성과 비일관적 결과물 초래
- 대량의 문서 이미지 처리 시 발생하는 렌더링 성능 저하와 복잡한 UI로 인한 작업자 피로도 가중 및 효율 저하
2) 프로젝트 목표
- 직관적인 UI/UX: 최소한의 동작으로 빠르고 정확하게 텍스트 스타일을 그룹화할 수 있는 사용자 중심 인터페이스 개발
- 작업 효율 극대화: 드래그 선택, 단축키 기반 조작, 대용량 데이터 안정적 처리 등 생산성 향상을 위한 핵심 기능 구현
- 데이터 확장성 확보: 다양한 OCR 데이터 형식(JSON)을 입력받고, 그룹화된 결과물을 표준화된 형식(JSON, ZIP)으로 출력하는 유연한 데이터 파이프라인 구축
3) 주안점
- Canvas 렌더링 최적화: 수천 개 텍스트 박스 동시 렌더링 시에도 지연 없는 프론트엔드 성능 최적화
- 사용자 경험(UX) 중심 설계: 단축키 및 직관적 워크플로우를 통해 라벨링에 필요한 클릭과 마우스 이동을 최소화하여 작업 속도 향상에 집중
- 대규모 데이터 처리: 폴더 단위 일괄 업로드 및 전체 결과 ZIP 다운로드가 가능한 배치 처리 기능 구현으로 확장성 확보
프로젝트 성과
라벨링 작업 속도 향상
단축키 시스템과 드래그 기반 다중 선택 기능을 통해 기존 클릭 방식 대비 작업 시간을 획기적으로 단축, 데이터 생산성 향상
핵심 기능

Canvas 기반 인터랙티브 라벨링 UI
HTML5 Canvas 위에 OCR 결과를 렌더링하고, 마우스 드래그, 클릭, 확대/축소를 통한 직관적 텍스트 박스 선택 및 조작 기능 구현
진행 단계
기획 및 프로토타이핑
2025.08.
- OCR 라벨링 요구사항 분석 및 핵심 기능 정의
- Figma 활용 UI/UX 와이어프레임 및 프로토타입 제작
- Figma 활용 UI/UX 와이어프레임 및 프로토타입 제작
프론트엔드 개발 (React, Canvas)
2025.08.
- React 기반 컴포넌트 구조 설계 및 개발
- HTML5 Canvas 이용 OCR 데이터 인터랙션 로직 구현
- Redux 활용 상태 관리 시스템 구축
- HTML5 Canvas 이용 OCR 데이터 인터랙션 로직 구현
- Redux 활용 상태 관리 시스템 구축
데이터 처리 및 연동 기능 개발
2025.08.
- 클라이언트 사이드 파일(JSON, 이미지) 파싱 및 매칭 로직 개발
- 라벨링 결과 데이터의 JSON 패키징 및 ZIP 패키징 기능 구현
- 라벨링 결과 데이터의 JSON 패키징 및 ZIP 패키징 기능 구현
프로젝트 상세
1) 포트폴리오 소개 : 서비스 카테고리(ex. 커머스, AI 등)와 메인 타깃(ex. 주부, 청소년) 등을 포함한 간략한 소개
- 예시 : 주부들을 위한 생활용품 커머스 개발
2) 작업 범위 : 개발에 참여한 범위 및 지원환경
- 예시) 화면 설계, UI/UX 디자인, 서버 구축, Front-end 개발, 관리자 페이지 개발 등
- 예시) 반응형 웹, Android, iOS 등
3) 주요 업무 : 해당 서비스의 주요 기능 및 주요 페이지
- 예시) 회원등급제 기능, 숙소 추천 로직 구성, GPS 기반 숙소 리스트, 실시간 예약 및 결제 페이지 등
4) 주안점 : 서비스 구축 시 중점이 되었던 사항
- 예시) 개인 정보에 대한 보안, 트렌디한 디자인 등
- 예시 : 주부들을 위한 생활용품 커머스 개발
2) 작업 범위 : 개발에 참여한 범위 및 지원환경
- 예시) 화면 설계, UI/UX 디자인, 서버 구축, Front-end 개발, 관리자 페이지 개발 등
- 예시) 반응형 웹, Android, iOS 등
3) 주요 업무 : 해당 서비스의 주요 기능 및 주요 페이지
- 예시) 회원등급제 기능, 숙소 추천 로직 구성, GPS 기반 숙소 리스트, 실시간 예약 및 결제 페이지 등
4) 주안점 : 서비스 구축 시 중점이 되었던 사항
- 예시) 개인 정보에 대한 보안, 트렌디한 디자인 등



