1. 유진투자증권 AI OCR 검수 백오피스 구축

React JavaScript Vite Tailwind CSS Axios Spring Boot

AI OCR가 스캔한 금융 문서에서 추출한 정보를 담당자가 원본과 대조·확정하는 백오피스.
접근 권한을 관리하는 운영자용 서비스 + 3종 업무 유형·월 1,200건을 처리하는 현업 검수 서비스 개발

일부 백엔드까지 직접 설계·구현했습니다.

• 목록·상세·필드 조회·저장 API 10개 직접 설계·구현
• 3종 업무 유형의 저장 로직이 동일 → 컨트롤러만 유형별 엔드포인트로 분리, 처리는 단일 서비스 메서드로 통합. 저장 DTO에 유형 구분값 자체를 두지 않아 처리 단계의 유형 분기를 원천 차단
  • 개인정보는 DB 암호화 컬럼 저장되어 복호화 키 없는 프론트는 원본 대조 불가 → "수정값이 원본과 다시 같아지면 수정 표시 해제" 규칙을 복호화 가능한 서버로 일원화

하나의 상태값이 두 기준으로 쓰이던 구조를 분리했습니다.

• 스캔 1건 = 여러 문서, 문서 1건 = 여러 페이지 구조. 문서 원본 이미지 뷰어의 "표시 페이지" 상태값을 인식 필드 클릭(스캔 전체 기준 절대 인덱스)과 페이지 이동 버튼(문서 내부 기준 상대 인덱스)이 함께 사용 → 두 조작을 연속 실행하면 존재하지 않는 페이지로 이동하는 버그 발생
• 호출부마다 어느 기준인지 추측해 분기하던 방식 폐기 → 두 기준을 별도 상태값으로 분리하고 인덱스 변환을 단일 지점으로 집약, 이동 경로가 늘어도 변환 규칙만 지키면 되는 구조 확보

요구사항에 없던 사용자 불편을 먼저 찾아 개선했습니다.

• 목록에서 방금 검토한 항목을 다시 찾기 어려움 → localStorage로 최근 검토 항목 하이라이트
• 목록 ↔ 상세 화면 이동 시 목록 컴포넌트가 리마운트되며 선택한 업무 유형이 기본값으로 초기화됨 → 선택 유형을 저장해 목록 복귀 시 복원

3종 업무의 화면 차이를 하나의 공통 구조로 통합했습니다.

• 업무 유형마다 목록 테이블 컬럼·검색 조건·OCR 인식 필드 수·서버 응답 구조가 모두 상이 → 화면을 유형별로 복제하면 동일 로직이 세 곳으로 중복돼, 공통 부분 한 곳을 고칠 때마다 세 곳을 모두 수정해야 함
• 유형별로 달라지는 축을 레이아웃이 아닌 데이터로 정의 → 공통 관심사(상태·API·페이징·모달)는 단일 컴포넌트, 달라지는 편집 폼만 유형 코드를 키로 런타임 선택하는 매핑 구조로 설계
  • 유형별 응답 구조 차이는 상위 어댑터에서 공통 형태로 정규화 → 하위 컴포넌트는 유형을 모른 채 동일 형태만 수신
  • 업무 유형 추가 시 상위 구조 변경 없이 편집 폼과 매핑 한 줄만 추가

 

2. 공공기관 이미지 관리 시스템 고도화

HTML5 CSS3 JavaScript JSP

기존 Internet Explorer(ActiveX 기반) 환경의 이미지 관리 시스템을 크로미움 기반 네이버 웨일 브라우저 환경으로 전환한 프로젝트

IE/ActiveX 기반 화면을 표준 웹 기반으로 전환했습니다.

• 비반응형 + 레거시 기반 주요 화면 20~30종을 CSS로 현대적 UI로 개선, 반응형 레이아웃 제안 및 적용
• IE에 의존하던 iframe·DOM·이벤트·팝업 처리를 표준 API 기반으로 재작성

DB 조회에 따라 흐트러지던 렌더링을 단일 구조로 다잡았습니다.

• DB 조회 결과에 따라 발생하던 중복 렌더링·화면 재구성 문제를 StringBuilder 기반 HTML 누적 방식으로 개선 → 단일 렌더링 구조 확보

GET 방식을 통한 비정상 접근을 차단했습니다.

• JSP 팝업 페이지의 URL 직접 접근 문제 → POST 요청·세션 검증을 적용해 정상 호출 경로 외 비정상 접근 차단

1. B2B팀 기업교육 랜딩 페이지 개선 🔗 팀스파르타 B2B

Next.js React TypeScript styled-components Amplitude Storybook

기존 컴포넌트의 재사용 여부를 판단하며, 반응형 랜딩 페이지를 구현했습니다.

• 반응형 레이아웃 설계 및 구현
  • 카드 그리드를 화면 폭에 따라 재배치(모바일 1열 → 태블릿 3열 → 데스크톱 6열)해, 디자인 시안에 없는 중간 브레이크포인트의 레이아웃을 정의
  • 데스크톱/모바일 시안만 존재 → 디자이너에게 태블릿 사이즈 화면 구성 제안 및 반영
• Amplitude 이벤트 트래킹 구현 → 이터레이션 성과를 데이터로 측정 가능하게 함
  • 메인 페이지 → 문의 페이지 전환율 +57% (3.3%→5.2%, Amplitude 측정)
  • 도입 문의 제출 전환율 +60% (0.3%→0.5%, 상대 개선률)  

2. 스파르타 커리어(부트캠프 취업 지원 서비스) Storybook 구축

Storybook React TypeScript

• 디자이너·PM이 코드 확인 없이는 컴포넌트 상태를 직관적으로 알기 어려웠던 문제
  • 주요 공통 컴포넌트 약 20종을 Storybook으로 문서화
  • 디자이너·PM이 컴포넌트의 엣지케이스를 직접 확인 가능
  • 커뮤니케이션 비용 감소, 디자인 검수 사이클 단축