기본 정보

• 회사: 주식회사오프리메드
• 기간: 2026.02 - 재직 중
• 직무: 풀스택 개발자

의료·임상 분석 제품의 프론트엔드와 개발 환경을 맡고, 백엔드 로그 저장·조회 API까지 담당 범위를 넓혔습니다. 약 6주간 본인을 포함한 3인 팀의 팀장으로 일정 조율, 코드 리뷰, 1:1과 막힌 업무 지원을 맡았습니다.

프로젝트마다 달랐던 실행·배포 기준 통일

프론트엔드 프로젝트 4개가 Vite·Next.js Pages Router 등 서로 다른 구조를 사용해 프로젝트를 옮길 때마다 실행 방법과 코드 작성 기준을 다시 확인해야 했습니다. 구조와 코딩 컨벤션, 프레임워크·패키지·런타임 버전과 배포 흐름을 맞췄습니다. Portal은 Vite·React Router에서 Next.js App Router로 새 코드를 작성해 일괄 전환했습니다.

수동으로 Docker 이미지를 전달하던 배포는 GitHub Actions로 전환하는 작업을 주도했습니다. Git SHA와 환경을 식별할 수 있는 이미지로 main·demo 배포를 나누고, 배포 후 백엔드 HTTP 응답과 컨테이너 상태를 검사해 이상을 Actions Summary와 로그에 남겼습니다. 이전 이미지로 되돌리는 절차의 범위는 애플리케이션이며 DB와 환경 설정 전체 복구를 보장하는 방식은 아닙니다.

타입·테스트·빌드 실패를 원격 반영 전에 발견하도록 Husky pre-commit·pre-push 검사를 연결했습니다. Playwright 브라우저 시나리오는 별도로 검증했습니다. 로컬 Hook은 우회할 수 있으므로 모든 PR에 강제되는 중앙 CI 검사로 설명하지 않습니다.

AI의 작업 맥락을 저장소 규칙과 검증으로 연결

AI가 의료·임상 용어와 화면 동작을 임의로 해석하지 않도록 프로젝트 지침, 작업별 Skill, 실행 Hook과 PR 규칙을 저장소에 두고 Codex·Claude가 참고하게 했습니다. 반복해서 설명하던 프로젝트 맥락을 작업 시 읽을 수 있는 문서로 남기고 일부 동료도 재사용했습니다.

파일명 변경 과정에서 AI가 문자열을 경로로 잘못 해석하고 대소문자 차이가 로컬 환경에 가려진 경험도 있었습니다. 리뷰·푸시 책임을 맡은 개발자로서 경로와 파서 처리를 수정했습니다. 규칙의 존재만으로 오류를 막았다고 보지 않고 실제 diff와 실행 결과를 확인하는 계기로 삼았습니다.

코드 저장소에 접근하기 어려운 디자이너도 도메인 자료를 찾을 수 있도록 기획·히스토리 문서를 Markdown으로 옮기고 로컬 LLM Wiki를 MCP 서버로 연결해 배포했습니다. Codex·Claude에서 자료를 검색하는 도구를 마련한 경험이며, 디자이너 이용률이나 온보딩 시간 단축은 측정하지 않았습니다.

제품·환경·요청 단위로 오류를 추적하는 백엔드 기반

여러 서비스에서 발생한 오류를 같은 기준으로 조회하기 위해 Nexus·Admin·OPTIVIS_BE의 로그 저장소를 업무 DB와 분리하고 환경·서비스·요청 ID를 기록하게 했습니다. 요청 ID는 기존 값을 재사용하거나 생성해 응답에도 전달하고, 로그 저장 실패가 원래 요청을 실패시키지 않도록 방어했습니다.

Admin에는 접근·애플리케이션·감사·서버 로그 조회와 프론트엔드 오류 보고 API를 추가했습니다. 오류 보고는 서비스·이벤트 ID 중복 처리, fingerprint, 요청 제한과 관리자 권한 경계를 다뤘습니다. 서버 코드와 테스트 코드의 반영까지 확인한 범위이며, 프론트엔드 전송 연동과 운영 DB 적용·보존 정책·알림 효과까지 검증한 것은 아닙니다.

긴 분석 과정의 취소·오류·재진입 동작

조건 설정부터 결과 비교·리포트까지 긴 분석 과정을 이어갈 수 있도록 화면과 ECharts·Plotly 차트를 개발했습니다. 기획서에 빠진 반응형·오류·재진입 기준을 제안하고 기획·디자인·백엔드 담당자와 결정했습니다. 입력이 많은 화면에는 키보드 탭 이동과 import를 추가했습니다.

분석 취소는 브라우저 요청 중단만으로 끝내지 않고 서버 취소 API 호출, 늦게 도착한 응답 무시, 화면 상태 해제를 함께 처리했습니다. 프론트엔드의 취소 흐름을 맡았으며 실제 분석 프로세스 종료는 백엔드 담당 영역입니다. 반복되는 질병 목록 조회는 공통 TanStack Query hook으로 옮겨 캐시와 재요청 기준을 공유했습니다.

화면 외형을 유지한 접근성·전송량 개선

Portal의 오류 안내, 제목·목록 의미 구조와 중복 marquee의 접근성 트리를 수정하고, 모달의 배경 비활성화·Tab 이동 제한·닫은 뒤 포커스 복귀를 다뤘습니다. 당시 검증 기록은 Vitest 39개, E2E 21개, axe 검사 4개와 화면 8개 상태의 픽셀 비교입니다. dev 병합까지 확인했으며 운영 반영이나 WCAG 전체 준수, 실제 보조기기 사용자 검증을 뜻하지 않습니다.

이미지 요청과 UI 수정 범위를 줄이기 위해 이미지 기반 UI를 공통 컴포넌트로 바꾸고 화면 크기별 WebP를 생성하는 빌드 작업을 추가했습니다. 선택한 이미지의 빌드 산출물 기준 용량은 계산상 약 95% 감소했습니다. 별도 Lighthouse 비교에서는 LCP 1.3초→1.0초, Speed Index 3.4초→0.7초를 확인했으며 운영 사용자 전체의 성능 통계는 아닙니다.

기술

Next.js, React, TypeScript, Tailwind CSS, Radix UI, TanStack Query, Zustand, React Hook Form, ECharts, Plotly, Vitest, Playwright, axe-core, GitHub Actions, Husky, Docker, Python, Django, Django REST Framework, PostgreSQL, Codex, Claude, MCP