미리보기

개발팀, 빅데이터팀, AI 연구팀으로 이루어진 본부에서 협력하며 인공지능 기반의 데이터를 시각화하는 다양한 프로덕트를 만들고 있습니다. 기존 레거시 시스템을 개선, 디자인 시스템 구축, 프로젝트의 자동화 배포 등을 도입하여 프로젝트의 기능 추가, 유지보수에 들어가는 시간을 단축하였고. 또한 회사에 필요한 백오피스 환경을 구축하여 효율적인 데이터 관리 시스템을 만드는 데 기여하였습니다.

• 인공지능 기반의 X-ray 위해물품 자동판독 솔루션 개발 및 유지보수

• X-ray 영상 데이터 수집·정제·관리 백오피스 개발

• 컴포넌트 디자인 시스템 도입

• 의료 인공지능 Dicom Web Viewer 개발

• X-ray 기반 위해물품 탐색보안요원에 대한 교육 솔루션 개발

• 인공지능 불법복제 판독 어플리케이션 리팩토링

• ROTC 근무

• 기존 Js, React로 개발 되어있던 프로젝트의 코드 가속성 및 코드 재사용성을 높이기 위해 Typescript 도입 및 공통 모듈화를 위한 리팩토링 진행

• 납품처 별로 6개의 커스텀 버전이 존재하던 레거시 코드를 모듈화,공통화하여, 유지보수와 신규 기능 개선 개발 효율 상승

주요 역할 및 기여

• 기존 Path 및 SVG 로 처리하던 복잡한 좌표 데이터 시각화를 Canvas API 도입 후, 드로잉/이벤트 등 복잡 로직을 재구현하고, Background-image를 활용하던 영상데이터 requestAnimationFrame 활용하여 프레임 최적화

• 기존 코드 베이스를 분석 후, 공통 모듈과 개별 확장 영역(납품처 맞춤 기능)을 분리하여 단일 프로젝트에서 환경 설정만 변경해 다수의 납품처 요구사항을 대응

• 테스트 코드와 GItlab CI/CD 파이프라인을 구축해, 코드 변경시 자동 배포 및 테스트 진행

문제 상황 & 해결 과정

• 납품사 마다 요구사항이 달라 프로젝트 버전관리가 복잡하게 분리됨 -> 납품 실수가 빈번하고 현장에서 수정 불가, 납품처가 늘어날수록 코어 기능 수정시 모든 버전에 반영하기 시간이 소요 증가

• 약 1초에 15회, 최대 80개의 좌표 데이터에 대해 SVG, Path의 재렌더링이 발생하니 영상데이터에 대해 60fps 보장이 안됨 -> Canvas API 저수준 그래픽으로 좌표 및 영상을 그려 재렌더링 최적화 후 60fps 보장

성과/결과

• 기존에 6개 버전을 따로 운영하던 시간을 약 50% 이상 단축, 에러 발생 시에도 빠른 원인 추적 가능

• 납품사별 커스텀 기능 요청이 들어와도, 공통 코드에 영향을 최소화하며 빠르게 대응 가능 및 배포 주기가 단축되어, 고객사 피드백을 더욱 빠르게 반영

• CPU 사용량 최대 45% 감소

• X-ray 영상에 대한 유사한 기능을 필요로하는 다른 프로젝트에도 코드/노하우를 적용하여 퍼포먼스 향상

기술스택

React, Typescript, swr, cypress, jest, Gitlab CI/CD

X-ray 영상을 활용해 보안요원이 위해물품(총기, 폭발물 등)을 빠르고 정확하게 식별할 수 있도록, 실무 환경과 유사한 교육/훈련 솔루션을 개발

주요 역활 및 기여

• 프로젝트 설계, 기획, 개발에 주도적으로 참여

  • 기존 팀장의 갑작스러운 퇴사로, 초기 기획부터 직접 맡아 기능 구조와 개발 우선순위를 확정

• Admin 페이지(시험 관리, 유저 관리) 및 학습·시험 로직 개발

• 사내 X-ray 이미지 데이터 관리 시스템의 API를 연동하여, 시험 출제, 학습 출제를 할 수 있는 보조 서비스 개발

문제 상황 & 해결 과정

• 시험 환경에 따른 네트워크 차이로 2000개의 이미지 데이터를 초기 로딩할 때, 1분~30분까지 지연 발생 -> 직열로 순차적으로 호출하던 이미지 요청을 데이터 크기에 맞게 http2로 6개씩 병렬로 요청

• 기획 담당자의 긴급 퇴사로 프로젝트 방향이 불투명 -> 기존 요구사항을 빠르게 정리 후, 주요 기능(시험, 학습, 이미지 관리)을 MVP 형태로 우선 구현

• 주 1회 내부 검토 미팅을 통해 보안요원·교육 담당자의 피드백을 바로 반영, 애자일 방식으로 빠른 의사결정 가능하게 함

성과/결과

• 한개씩 모든 이미지를 불러오던 기존 방식 대비, 최대 70~80% 이상의 초기 로딩 단축

• 기획 공백이 발생한 상황에서 직접 기획·우선순위 설정을 맡아, 프로젝트 일정을 지연 없이 진행

기술스택

React, Typescript, Next.js, swr, Docker, NestJS

Excel로 관리되던 X-ray 영상에 대한 이미지 데이터를 웹 기반 시스템으로 전환해 업무 효율화 및 자동화

주요 역할 및 기여

• 프로토 타입을 빠르게 설계 및 구현하여, 빅데이터팀과 같이 실제 데이터 선취 및 정제 작업에 참여하고 작업 후 피드백 즉시 반영

• 빅데이터 팀과 논의하여 데이터 선취 프로세스를 개선하여 데이터 선취 효율 상승 (하루 500장 -> 2700장)

• Meta의 Segment anything model을 활용하여 이미지 segment 기능 반영

문제 상황 & 해결 과정

• 기존에는 엑셀로 이미지 경로와 메타 정보를 관리하고 있어, 파일 누락이나 중복이 빈번

• 협업 초기부터 각 팀의 업무 플로우와 가장 불편한 부분을 면밀히 파악

• 기존 프로그램은 이미지 후 처리에 대한 Segment 신규 기능 추가 불가능

성과/결과

• 엑셀 기반 시스템 대비, 데이터 선취 속도 크게 향상 (하루 최대 500장 -> 2700장)

• 직접 참여 후 작업해보니, 도메인 이해도가 늘어 빅데이터 팀에서 요청한 기능을 즉각 반영할 수 있어 커뮤니케이션 비용 감소

• Excel로 관리하던 데이터에 대해 DB에 적재하여 관리되니 사용자 데이터 누락/중복을 쉽고 빠르게 확인 할 수 있어 에러율 감소

학습 & 성장 포인트

• 타 부서와의 협업에서 이해관계자의 목표 및 용어를 빠르게 파악하는 능력 습득

• 사용자 피드백 기반의 애자일 개발 프로세스를 체계화

기술스택

React, Typescript, Next.js, swr, python

회사 내 여러 프로젝트마다 UI 일관성을 확보하고, 디자이너-개발자 간 협업 효율 및 생산성을 높이기 위한 디자인 시스템 도입

주요 역할 및 기여

• Tailwindcss 기반의 UI 컴포넌트 라이브러리 초기 설계 주도

• 디자이너와 함께 코드 네이밍 규칙, 디자인 토큰화, 컴포넌트 구조를 정의하고 Storybook으로 UI 문서화 도구 도입

• 기존에 개별적으로 관리되던 스타일/컴포넌트를 라이브러리 형태로 묶어 백오피스 툴에 프로젝트에 선

  도입 후 수정하며 점진적으로 납품되는 프로젝트에 도입

문제 상황 & 해결 과정

• 각 프로젝트가 저마다 UI를 별도로 개발하고 있어 재사용성과 유지보수성이 떨어졌음

• 핵심 컴포넌트(버튼, 모달, 테이블 등)를 공통화하고, 리팩토링이 필요한 코드에 대해서는 점진적으로 이관

• 디자이너와 협업 프로세스(피그마, Storybook)을 표준화해, 빠른 피드백 사이클 확보

성과/결과

• 유지 보수 비용 절감 및 UI의 일관성이 높아져 사용자 경험 향상

• UI 로직 개발에 드는 개발자 리소스가 줄어 개발 생산성 약 30% 상승(새로운 페이지/기능 추가 시 개발 시간 단축)

• 프로젝트 전체 일정 단축에 큰 기여

기술스택

React, tailwindcss, turborepo, storybook, figma, jest

• 기존 Window 버전으로 존재하던 Dicom Viewer 를 Web으로 리뉴얼하는 프로젝트 설계 및 개발 담당

• DICOM 개발 환경 구현을 위한 orthanc 서버 구현

• DICOM upload 로직 구현

기술스택

React, cornerstonejs

• 기존 코틀린으로 개발된 코드 React-Native 로 리펙토링

기술스택

React-Native, Typescript

• 부스 운영