기본 정보
- 회사: 오프리메드
- 기간: 2026.02 - 재직 중
- 직무: 서비스 개발자
의료·임상 분석 화면 개발
- 긴 분석 과정에서 입력과 결과가 끊기지 않도록 조건 설정, 작업 실행, 결과·리포트 화면을 개발했습니다. 기획에 없던 화면 크기별 반응형 기준과 오류·재진입 동작은 기획·디자인·백엔드 담당자와 협의해 반영했습니다.
- 주요 화면을 키보드로도 사용할 수 있도록 기존 제품에 없던 접근성 기준을 추가하고, Playwright로 로그인·서비스 선택·세션 만료 화면을 점검했습니다.
- 이미지 요청과 UI 수정 비용을 줄이기 위해 이미지 기반 UI를 공통 컴포넌트로 바꿨습니다. 정적 이미지는 빌드 시 화면 크기별 WebP로 변환하고 변경분만 재생성·검증해, 변환 후보의 계산상 전송 용량을 약 95% 줄였습니다. 별도 Lighthouse 비교에서 LCP는 1.3초에서 1.0초, Speed Index는 3.4초에서 0.7초로 줄었습니다.
- 분석 결과를 차트로 보여주고 반복 조회를 줄이기 위해 ECharts·Plotly 차트를 개발하고, 질병 목록은 TanStack Query 캐시로 전환해 화면별 직접 호출을 제거했습니다.
AI 개발 도구 활용
- 의료·임상 맥락을 잘못 해석하지 않도록 프로젝트별 지침, 작업별 Skill, 실행 Hook, PR 규칙을 저장소에 두고 Codex와 Claude가 참고하게 AI workflow를 작성했습니다.
- AI가 만든 변경을 사람이 확인하고 팀이 같은 기준을 사용할 수 있도록 diff를 검토하고 typecheck·test·build 결과를 확인했습니다. 팀원도 같은 지침과 Hook을 수정해 사용할 수 있게 했습니다.
인프라와 백엔드
- 프로젝트마다 달랐던 실행 환경을 맞추기 위해 Vite·React Router 기반 Portal을 Next.js로 옮기고, 패키지 버전·Docker 런타임·배포 방식을 다른 프론트엔드 프로젝트와 맞췄습니다.
- 수동 배포와 변경 누락에서 생기는 실수를 줄이기 위해 Docker 배포를 GitHub Actions로 전환하고, Husky에서 typecheck·test·build를 실행했습니다. 주요 화면은 Playwright 시나리오로 별도 확인했습니다.
- 업무 데이터와 로그를 분리하고 오류 요청을 쉽게 찾기 위해 세 백엔드에 로그 DB를 추가해 환경·서비스·요청 ID 기준으로 적재했습니다. Admin에는 로그 조회 API와 프론트엔드 오류 보고 API를 추가했습니다.
- GitHub Actions에서 실제 서버 상태를 확인할 수 있도록 헬스 체크를 추가했습니다. 백엔드의 HTTP 응답과 컨테이너 상태를 확인하고, 이상 시 Actions Summary와 로그를 남기게 했습니다.