의료·임상 분석 화면 개발

의료·임상 분석 제품의 화면 개발과 접근성·성능 개선, 개발 환경 개선과 백엔드 작업을 함께 맡고 있습니다.

• 긴 분석 과정에서 조건 설정부터 결과 확인까지 이어지도록 입력·실행·결과·리포트 화면과 ECharts·Plotly 기반 비교 차트를 개발했습니다.
• 화면 크기가 달라지거나 오류 후 재진입해도 사용자가 작업을 이어갈 수 있도록, 기획서에 없던 반응형·오류·재진입 동작을 제안하고 기획·디자인·백엔드 담당자와 정해 적용했습니다.
• 입력 항목이 많은 화면에서 반복 입력과 마우스 이동의 피로를 줄이기 위해 키보드 탭 이동과 import 기능을 추가했습니다.
• 이미지 요청과 UI 수정 범위를 줄이기 위해 이미지 기반 UI를 공통 컴포넌트로 바꾸고, 정적 이미지를 화면 크기별 WebP로 변환하는 빌드 작업을 추가했습니다. 빌드 기준 이미지 전송 용량은 계산상 약 95% 줄었고, 별도 Lighthouse 비교에서 LCP는 1.3초에서 1.0초, Speed Index는 3.4초에서 0.7초로 줄었습니다.
• 같은 질병 목록을 화면마다 다시 요청하지 않도록 직접 조회 코드를 공통 TanStack Query hook으로 바꾸고, 캐시와 재요청 기준을 한곳에서 관리했습니다.

AI 개발 도구 활용 경험

• AI가 의료·임상 용어와 화면 동작을 임의로 해석하지 않도록 프로젝트 지침, 작업별 Skill, 실행 Hook, PR 규칙을 저장소에 두고 Codex와 Claude가 참고하게 했습니다.
• 비개발 직군도 도메인 자료를 쉽게 이해할 수 있도록 기획·히스토리 문서를 Markdown으로 옮기고, Codex·Claude에서 검색할 수 있는 로컬 LLM Wiki 기반으로 MCP 서버를 만들어 배포했습니다.

개발 환경과 백엔드 운영

• Vite·Next.js Pages Router 기반으로 나뉘어 구조와 코드 작성 방식이 달랐던 프론트엔드 프로젝트 4개의 구조와 배포 흐름을 통일하고, 기존 코드를 공통 코딩 컨벤션에 맞춰 수정했습니다.
• 수동 Docker 배포를 GitHub Actions로 전환하는 작업을 주도했으며, 배포 후 백엔드 HTTP 응답과 컨테이너 상태에 이상이 있으면 Actions Summary와 로그를 남기게 했습니다.
• 타입·테스트·빌드 오류가 원격 브랜치에 올라가지 않도록 Husky pre-commit·pre-push에 typecheck·test·build를 연결했습니다.
• 서비스 오류를 제품·환경·요청 단위로 추적하기 위해 세 백엔드의 로그를 업무 DB와 분리해 환경·서비스·요청 ID별로 저장했습니다. Admin에는 로그 조회와 프론트엔드 오류 보고 API를 추가하고, 프론트엔드 오류 유형을 서버 로그와 연결할 수 있게 매핑했습니다.

WebView 제품과 웹게임

• 영상 플랫폼에 반복해서 방문할 콘텐츠가 필요했지만 이벤트·게임을 앱에 넣으면 변경할 때마다 앱 배포를 기다려야 했습니다. WebView Playground를 제안해 프로토타입으로 시연했고, 채택 후에는 전용 프론트엔드 프로젝트 구축을 주도했습니다. 이후 운세·이벤트를 옮기고 기프트 코드·럭키드로우·설문으로 확장했습니다.
• 사용자가 영상 시청 외에도 앱에서 가볍게 즐기고 다시 방문할 콘텐츠가 필요했습니다. Phaser 기반 플라잉팝과 보너스를 사용하는 열려라 참깨를 개발했습니다. 당시 DB 확인에 대한 본인 회고 기준 두 게임의 주간 고유 이용자는 약 2,000~3,000명이었습니다.
• 앱·백엔드 담당자와 Flutter bridge·게임 API를 연동하고, 광고 완료·딥링크·Safari 오디오·중복 진행·timeout 문제를 처리했습니다.

AI 활용과 콘텐츠 운영 도구

• 운영팀이 에피소드별 자막을 8개 언어로 반복 번역하는 부담을 줄이기 위해 CLI를 웹 도구로 옮기고 숏타임 백오피스에 편입했습니다. 본인 회고 기준 1명이 에피소드 1편에 약 3일 쓰던 작업을 하루 6~8편 처리하는 수준으로 바꿨습니다.
• 사용자 리텐션을 높일 콘텐츠를 확보하고 백링크를 활용한 SEO 유입 전략을 검증하기 위해, 셀렉터스 상품 블로그 초안을 AI로 생성하는 프로토타입을 제작했습니다.
• 운영팀이 세 영상 플랫폼을 반복 검색하는 시간을 줄이기 위해 후보 영상을 한 화면에 모았습니다. 비슷한 키워드 수에서 약 50분 걸리던 확인이 10분 이내가 됐다는 운영자 피드백을 받았습니다.

고객용 커머스

초기 멤버로 고객용 커머스와 판매자·운영자 화면, 모바일 WebView·웹게임, 콘텐츠 운영 도구를 프론트엔드 중심으로 개발했습니다.

• 국내외 사용자가 각자의 언어와 결제 환경에서 주문할 수 있도록 한국어·일본어·영어·번체 중국어를 제공하고, 해외 사용자 여부에 따라 국내 결제수단과 해외 카드·PayPal을 나눴습니다. 국가별 주소 입력과 해외 배송비도 주문 흐름에 연결했습니다.
• 결제 이후에도 선물 수령부터 구매 확정, 클레임, 리뷰까지 이어지는 전체 흐름이 필요했습니다. 선물 수령·취소와 구매 확정, 반품·교환·환불과 부분 반품 금액 처리, 리뷰 목록·작성·수정과 사진 리뷰를 개발하고, 구매 확정 여부·동일 상품 주문 항목·반품 상태에 따라 리뷰 작성 조건을 나눴습니다.
• 주 이용 환경이 모바일이었고 PC·모바일 화면을 각각 개발하는 공수가 다른 제품 작업에 영향을 주고 있었습니다. 고객 화면은 PC에서도 같은 App-like 모바일 UI를 사용하도록 구성했습니다.
• 라이브 판매 참여자가 판매 흐름을 놓치지 않고 새로운 참여를 빠르게 인지할 수 있도록 상품·참여 상태를 5초마다 갱신했습니다. 신규 참여에는 confetti와 직접 제안한 AWS Polly 음성 안내를 연결했습니다.
• 카테고리와 셀러샵의 무한 스크롤·목록 상태 복원을 함께 설계·구현했습니다.

판매자 화면과 운영자 백오피스

• 판매자가 상품과 여러 주문 정보를 넓은 화면에서 확인하고 직접 처리할 수 있도록 데스크톱 레이아웃의 상품·배송 설정과 주문·취소·교환·환불 화면을 개발했습니다.
• 기존 담당자의 앱 개발 이동과 운영 요청 대응을 위해 Flutter Web 백오피스를 Next.js로 한 번에 교체하고 프론트엔드 구현을 단독으로 맡았습니다.
• 운영팀이 상품·셀러 승인과 주문·클레임·정산·문의, 배너·검색 키워드를 직접 관리하도록 화면을 이관·개발하고 검색 초기화·Excel 내보내기·드래그 정렬을 추가했습니다.

공통 가입 진입과 성능 개선

• 여러 고객사 페이지에서 같은 보험 가입 모달을 재사용할 수 있도록 공통 CDN SDK를 만들었습니다. API key와 노출 옵션은 설정으로 받고, 상품별 화면 자산은 planId 경로로 분리했습니다.
• 가입 화면에서 흰 화면과 로더가 약 5초간 보여 초기 조회를 Promise.all로 묶고 고객 정보 조회를 앞당겼습니다. 추가 개선을 위해 담당 흐름을 Next.js로 옮겨 초기 데이터를 SSR에서 처리했으며, Lighthouse LCP 1.2초와 일본 현지 진입 시간 1.2~1.5초를 확인한 뒤 배포했습니다.

가입·운영 시스템

• 사용자가 보험료 확인부터 신청 완료까지 온라인에서 이어서 진행할 수 있도록 직업 기반 보험료 산정, 가입자 정보·고지, 카드 결제를 연결했습니다. 가입 단계가 긴 별도 암·입원보험에는 중도 저장·복원을 적용하고, 복원 시 카드 정보는 초기화했습니다.
• 운영자가 보험 고객·거래·가입 이력과 계약·대리점 정보를 조회하고 파일 업무를 처리할 수 있도록 관리자 시스템과 별도 백오피스를 개발했습니다. 검색·상세 화면과 Spring 백엔드, CSV 파일 S3 저장 모듈, 지점·모집인·계약·결제·보험료 청구서 조회와 파일 업로드를 맡았습니다.

외교부 영사콜센터 유지보수

• 영사콜센터의 운영 요구와 장애에 대응하기 위해 상담 애플리케이션의 기능 개선·버그 수정과 무료전화 앱 트러블슈팅을 맡았습니다. 설문 조사용 JSP 화면과 DB 배치 서버 연계 API도 개발했습니다.

Smart-DIS 데이터 마이그레이션과 실행 환경 전환

• Smart-DIS를 데이터베이스·운영체제·네트워크 환경이 다른 기관에도 배포할 수 있도록 데이터 마이그레이션 기능을 개발하고 Oracle 쿼리를 MariaDB에서도 동작하게 했습니다. Linux 전용 기능은 Windows로 옮기고, 폐쇄망에서는 온라인 라이브러리를 대체한 뒤 운영 매뉴얼을 작성했습니다.

공공기관 인프라 구축과 운영

• 공공기관 시스템의 장애와 감사에 대응할 수 있도록 국무조정실의 세종·서울 서버와 네트워크·보안·백업 장비를 운영하고, 장애 복구·보안 감사·국정감사 준비를 맡았습니다.

사회보장정보원 고도화 사업

• 신규 장비와 기관을 운영 일정에 맞춰 개통하기 위해 사회보장정보원 고도화 사업에서 장비 검수·마운팅·설치 테스트를 맡았습니다.

아동보호전문기관 구축 및 유지보수

• 아동보호전문기관의 콜센터 이전과 신규 기관 개소에서는 장비 이전과 인프라 구축을 진행했습니다.