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

React Vite Tailwind CSS Spring Boot

월 1,500건 이상의 3개의 업무별 증권사 문서를 AI OCR로 인식한 후 담당자가 검토 및 수정할 수 있는 백오피스 프로젝트입니다.

상태 동기화 로직을 파생 상태(Derived State) 구조로 재설계했습니다.

• 필터 7종 · 정렬 3단 · 페이징이 반영된 목록 리스트와, 원본 데이터가 각각 별도의 상태로 관리되고 있어 조건이 바뀔 때마다 리스트를 재계산해 동기화를 해줘야 했음
  • 조건이 늘수록 동기화 누락 지점도 비례해 증가, 정렬만 바뀌고 리스트는 stale 상태로 남는 등 치명적인 문서 누락으로 이어질 수 있었던 휴먼 에러 발생율 존재
• 원본 데이터만 단일 상태로 유지하고, 필터 · 정렬 · 페이징 리스트는 원본과 현재 조건값으로부터 매번 재계산되는 파생 상태(useMemo)로 전환 → 동기화 필요성 자체가 사라져 갱신 누락 버그 발생율 0% 달성

3종 업무 화면을 공통 컴포넌트 구조로 재설계해 확장성을 확보했습니다.

• 업무마다 목록 컬럼 · 조회 조건 · 인식 필드 구조가 모두 달라, 화면을 업무별로 각각 구현할 시 동일한 로직이 세 곳에 중복되고 수정 시 세 곳을 전부 수정해야 하는 비효율 발생
• 공통 로직과 업무별 차이를 관심사 분리 원칙에 따라 나누고, 업무 코드를 키로 런타임에 분기하는 매핑 구조로 설계 → 업무 추가 시 상위 구조 변경 없이 폴더 단위로 확장 가능한 구조 확보

백엔드 영역까지 직접 맡아 공수를 줄이고 프로젝트를 완수했습니다.

• 조회 · 저장 등 API 10종 설계 · 구현까지 함께 맡아 별도 백엔드 인력 투입 없이 진행 → 프로젝트 소요 공수 4.5M/M → 3M/M 절감
• 3개 업무의 저장 로직이 동일함을 확인, 엔드포인트는 화면별로 유지하되 처리 로직은 단일 서비스 메서드로 통합 → 로직 중복에 따른 변경 누락 위험 제거
• 개인정보는 DB에 암호화 저장돼 프론트에 복호화 키가 없어 원본 대조 자체가 불가능한 문제 → 수정 여부 판단 로직을 복호화 가능한 서버로 일원화(Single Source of Truth)

 

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

Internet Explorer(ActiveX) 기반의 레거시 시스템을 크로미움 기반 네이버 웨일 브라우저 환경으로 전환한 프로젝트입니다.

레거시 기술을 표준 웹 기술로 전환해 고객사 내부 업무 효율을 높였습니다.

• IE 전용 ActiveX 기반으로 동작하던 iframe · DOM · 이벤트 처리 로직을 표준 Web API로 재구현해 크로스 브라우저 호환성 확보
• 비반응형 + 레거시 기반 주요 화면 20~30종의 UI를 반응형 레이아웃으로 재설계

중복 렌더링으로 발생하던 플리커링을 제거했습니다.

• DB 조회 결과를 화면에 그릴 때, 1차 조회 결과를 먼저 렌더링한 뒤 전체 조회가 끝나면 그 결과로 한 번 더 렌더링하는 구조라 하나의 요청에 렌더링이 두 번 발생하며 플리커링(화면 깜빡임) 발생
  • 두 조회를 하나로 합쳐 단일 조회 결과만으로 렌더링하는 구조로 변경해 플리커링 제거

인증 우회로 이어질 수 있던 비정상 접근 경로를 차단했습니다.

• 팝업 페이지가 GET 요청과 URL 직접 접근만으로 열려, 권한이 없는 사용자가 해당 자료에 접근 할 수 있는 보안 취약점 발생
  • GET은 요청 정보가 URL 자체에 담겨 주소창 직접 입력만으로도 동일 요청이 재현되는 구조라, 요청 방식을 POST로 전환해 URL 직접 접근 경로부터 차단
• 다만 POST 방식도 개발자도구 등으로 임의 재현이 가능해 "정상 호출 절차를 거쳤는지" 여부까지는 요청 방식만으로 검증 불가 → 팝업 호출 직전 세션에 인증값을 설정하고 진입 시점에 값을 검증 후 즉시 제거하는 방식으로 세션 기반 검증을 추가해, 정상 흐름 외 접근을 이중으로 차단하여 보완성 확보

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

국내 주요 기업을 대상으로 임직원 교육 프로그램을 소개하고, 도입 문의·신청을 할 수 있는 팀스파르타의 기업 교육 서비스입니다.

Next.js TypeScript styled-components Amplitude

랜딩 페이지 이터레이션 중, 시안에 없던 태블릿 브레이크포인트를 직접 제안했습니다.

• SSR 기반 랜딩 페이지 퍼블리싱 중, 카드 그리드가 데스크톱/모바일 두 브레이크포인트 외 태블릿에서 깨지는 지점을 발견 → 중간 브레이크포인트의 레이아웃을 직접 정의해 디자이너에게 제안 및 반영
  • 데스크톱/모바일 사이즈 외 태블릿 사이즈에도 반응형 레이아웃이 안정적으로 동작

데이터 로깅을 통해 실제 성과 개선을 확인했습니다.

• Amplitude 이벤트 트래킹을 통해 이터레이션 성과를 데이터로 측정할 수 있게 구현
  • 메인 페이지 → 문의 페이지 전환율 +57% (3.3% → 5.2%)
  • 기업교육 도입 문의 제출 전환율 +60% (0.3% → 0.5%, 상대 개선률)

 

2. 스파르타 커리어 서비스 컴포넌트 디자인 시스템 구축

팀스파르타에서 주관하는 부트캠프의 수료생들을 대상으로한 취업 지원 서비스입니다.

Storybook

• 공통 컴포넌트의 상태 · 스타일 기준이 코드에만 구현되어 있어, 재사용하거나 특정 상태(hover, disabled 등)를 확인하려면 매번 코드를 직접 읽거나 화면에서 재현해야 하는 비효율 발생
  • 주요 공통 컴포넌트 약 20종을 Storybook으로 문서화해 컴포넌트 단위 디자인 시스템 구축 → 모든 상태를 한 곳에서 확인 · 재사용할 수 있게 되어 개발 생산성과 UI 일관성 향상