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

React Vite Tailwind CSS Spring Boot

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

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

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

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

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

프론트를 넘어 일부 백엔드 API 설계·구현까지 스스로 학습하며 공수를 줄였습니다.

• API 10종을 직접 설계 및 구현해 별도 백엔드 인력 투입 없이 진행 → 프로젝트 인력 공수 4.5M/M → 3M/M 절감
• 업무별로 저장 엔드포인트는 각각 존재했지만 저장 단위가 모두 동일함 확인
  • 엔드포인트는 업무별 로그·모니터링 추적성을 위해 유지하고 실제 처리 로직만 하나로 통합해 로직 중복에 따른 변경 누락 위험 제거
• 수정된 값을 원본값으로 초기화해도 "수정됨" 표시가 그대로 남아있는 문제 발생
  • 원본값과 현재값을 비교해 수정 여부를 판단하는 구조였는데 값이 DB에 암호화되어 저장돼 프론트에 복호화 키가 없어 두 값을 직접 비교할 방법이 없는 구조 → 수정 여부 판단 로직을 복호화 가능한 서버로 일원화(Single Source of Truth)해 프론트는 서버 판정 결과만으로 초기화 버튼을 제어하도록 개선

 

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

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

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

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

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

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

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

• 권한이 있어야 접근 가능한 시스템이었지만, 팝업 페이지가 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

코드에만 존재하던 컴포넌트 상태 기준을 Storybook으로 문서화했습니다.

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