PDF 미리보기
개발자 이상민입니다.
비즈니스 가치를 만들고, 팀의 고통을 줄이는 개발자
red9runge@gmail.com
+821020809652
간단 소개
안녕하세요. 프론트엔드를 중심으로 제품과 운영에 필요한 기능을 개발해 온 이상민입니다.
커머스·모바일 WebView·보험·의료·임상 분석 제품을 만들며, 앱 배포에 묶인 이벤트 영역을 독립 WebView 제품으로 제안하고 개발자가 실행하던 콘텐츠 업무를 운영자용 도구로 전환했습니다.
최근에는 의료·임상 분석 제품을 개발하며 화면의 반응형·접근성·성능뿐 아니라 배포와 로그 저장·요청 추적까지 제품에 필요한 작업을 직접 맡고 있습니다.
AI 개발 보조 도구는 코드 생성에만 사용하지 않습니다. 프로젝트별 지침·Skill·Hook·PR 검증 기준을 두었습니다. 기술 자체보다 그 선택이 사용자와 팀의 다음 작업을 어떻게 바꾸는지를 중요하게 생각합니다.
오프리메드
2026.02 - 재직 중 · 서비스 개발자
의료·임상 분석 제품
의료·임상 분석 화면 개발의료·임상 분석 제품의 화면 개발과 접근성·성능 개선, AI 개발 환경, CI/CD와 백엔드 로그 작업을 맡고 있습니다.
  • 긴 분석 과정에서 입력과 결과가 끊기지 않도록 조건 설정, 작업 실행, 결과·리포트 화면을 개발했습니다. 기획에 없던 화면 크기별 반응형 기준과 오류·재진입 동작은 기획·디자인·백엔드 담당자와 협의해 반영했습니다.
  • 주요 화면을 키보드로도 사용할 수 있도록 기존 제품에 없던 접근성 기준을 추가하고, 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을 수정해 사용할 수 있게 했습니다.
인프라와 백엔드
기술 스택
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
  • 프로젝트마다 달랐던 실행 환경을 맞추기 위해 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와 로그를 남기게 했습니다.
주식회사 코드크레용
2023.05 - 2025.07 (2년 3개월) · 프론트엔드 개발
커머스·백오피스
커머스·백오피스초기 멤버로 커머스·백오피스, 모바일 WebView·웹게임, 콘텐츠 운영 도구를 개발했습니다.
  • 국내·외 사용자가 각자 맞는 언어와 결제 수단을 사용할 수 있도록 상품 탐색부터 주문·결제·마이페이지까지 개발하고, 한국어·일본어·영어·중국어 화면을 지원했습니다.
  • 모바일 고객과 데스크톱 판매자의 사용 방식에 맞춰 고객 화면은 모바일 중심 UI로 바꿔 작업속도를 올리고, 판매자 대시보드는 데스크톱 레이아웃을 유지했습니다.
  • 기존 담당자가 앱 개발로 이동한 뒤에도 운영 기능을 계속 개발할 수 있도록 Flutter Web 백오피스를 Next.js로 마이그레이션하고 상품·주문·정산·이벤트·문의 관리 기능을 옮겼습니다.
WebView·웹게임
WebView·웹게임
  • 앱 배포를 기다리지 않고 이벤트와 게임을 추가할 수 있도록 WebView 영역을 제안하고 프로토타입으로 시연했습니다. 채택된 뒤 프론트엔드 프로젝트를 개발·운영했습니다.
  • 반복 방문할 콘텐츠로 Phaser 기반 플라잉팝을 개발했습니다. 이후 적립한 보너스를 사용할 후속 게임이 필요해 열려라 참깨의 프론트엔드까지 맡고, 랭킹·결과 제출과 두 게임의 보너스 적립·사용을 연결했습니다. 중복 플레이를 제외한 DB 기준 주간 고유 이용자 약 2,000~3,000명을 확인했습니다.
  • 웹게임을 앱 기능과 서버에 연결하기 위해 Flutter bridge와 게임 API를 앱·백엔드 담당자와 협업해 연동했습니다. 앱의 공유·화면 이동과 게임 결과 제출을 연결했습니다.
  • 광고 완료 뒤 추가 플레이를 제공하고 공유 링크로 게임에 진입할 수 있도록 Branch 공유 링크·Airbridge 딥링크를 적용했습니다. WebView에서 드러난 결과 제출 중 중복 진행과 Safari 오디오 재생·화면 이탈 문제도 처리했습니다.
AI 활용과 운영 도구
AI 활용과 운영 도구
기술 스택
Next.js
React
TypeScript
MUI
Tailwind CSS
Jotai
SWR
React Hook Form
Toss Payments
PayPal
Phaser
Flutter InAppWebView
Branch.io
Airbridge
Node.js
Express
AWS Bedrock
OpenAI API
Google Cloud Translation
Axios
Cheerio
  • 운영자가 개발자 없이 자막을 번역할 수 있도록 AI 자막 번역 CLI를 다중 파일·다국어 도구로 바꿔 백오피스에 추가했습니다. 재직 중 약 3개월 동안 운영자 3~4명이 사용했습니다.
  • 상품 블로그 초안을 AI로 만들 수 있는지 확인하기 위해 셀렉터스 상품 블로그 초안 생성 프로토타입을 제작했습니다.
  • 여러 영상 플랫폼의 반복 검색 시간을 줄이기 위해 세 플랫폼의 검색 결과를 한 화면에 모으는 도구를 만들었습니다. 운영팀의 확인 시간을 약 50분에서 10분 이내로 줄였고, 불법 여부는 운영자가 최종 판단하도록 했습니다.
all of them Co., Ltd. · Japan
2021.07 - 2023.04 (1년 10개월) · 프론트엔드 개발자
공통 가입 진입과 성능 개선
공통 가입 진입과 성능 개선고객사 유입부터 가입·운영까지 이어지는 보험 제품
  • 여러 고객사 페이지에서 하나의 보험 가입 모달을 재사용할 수 있도록 공통 CDN SDK 안에서 API key·노출 옵션을 설정으로 받고, 상품별 화면 자산을 planId 기반 경로로 분리했습니다. 고객 정보 전달부터 가입 URL 연결까지 같은 흐름으로 처리했습니다.
  • 일본 고객사가 가입 진입 시 흰 화면과 로더가 합쳐 약 5초간 보인다고 문의했습니다. 가입 전 이탈 가능성이 있는 문제로 판단해 바로 프레임워크부터 바꾸기보다 기존 React 화면의 초기 조회를 Promise.all로 묶고 고객 정보 조회를 첫 화면으로 앞당겼습니다.
  • 추가 성능 여지와 낮은 이관 비용을 기준으로 담당 가입 흐름을 별도 Next.js 코드베이스로 옮기고 초기 데이터 조합을 SSR에서 처리했습니다.
  • 한국에서 전환본을 Lighthouse 데스크톱 기본 설정으로 측정해 LCP 1.2초를 확인한 뒤, 이 수치만으로 일본 환경의 개선을 단정하지 않고 현지 팀원에게 재검증을 요청했습니다. 고객사에서 실제 진입 시간이 약 1.2~1.5초로 줄었다는 답변을 받은 뒤 배포했습니다.
가입·운영 시스템
가입·운영 시스템
기술 스택
React
Next.js
TypeScript
Redux
Context API
Java
Spring Boot
Doma2
MySQL
Redis
GraphQL
DynamoDB
S3
Sass
GitLab CI/CD
  • 직업 기반 보험료 산정부터 가입자 정보·고지·카드 결제·신청 완료까지 한 가입 흐름을 맡았습니다.
  • 별도 암·입원보험 제품에서는 견적·플랜과 계약자·피보험자·고지·결제, 중도 저장·복원을 개발·보완하고 복원 시 카드 정보는 초기화했습니다.
  • 보험 고객 검색·상세와 거래·가입 이력을 React 화면부터 Spring 백엔드까지 개발하고, 관리자 CSV 파일을 S3에 저장하는 모듈을 만들었습니다.
  • 별도 계약·대리점 백오피스에서는 지점·모집인, 계약·결제·보험료 청구서 조회와 파일 업로드 화면을 맡았습니다.
데이터로직스
2020.08 - 2021.07 (1년) · 운영/유지보수 및 개발
외교부 영사콜센터 유지보수와 Smart-DIS ETL 개발
외교부 영사콜센터 유지보수와 Smart-DIS ETL 개발
기술 스택
Java
JavaScript
JSP
eGovFrame
MyBatis
MariaDB
Oracle
Linux
HTML
CSS
  • 외교부 영사콜센터의 상담 애플리케이션을 운영·유지보수했습니다. 설문 조사용 일부 JSP 화면과 DB 배치 서버 연계 API를 개발하고, 기능 개선·버그 수정과 무료전화 앱 트러블슈팅을 맡았습니다.
  • 데이터 통합·ETL 도구 Smart-DIS에서 데이터 마이그레이션 기능을 개발하고, Oracle 쿼리를 MariaDB에서도 동작하게 했습니다.
  • Linux 전용 기능을 Windows에서도 사용할 수 있게 하고, 온라인 연결이 필요한 라이브러리를 인트라넷에서도 동작하는 대체재로 교체한 뒤 운영 매뉴얼을 작성했습니다.
데이터로직스
2017.08 - 2019.05 (1년 10개월) · 인프라 엔지니어
공공기관 인프라 구축과 운영
공공기관 인프라 구축과 운영
기술 스택
Linux
Server
Network
L2/L3
Firewall
IPS
TMS
Backup
  • 국무조정실 운영·유지보수에서 세종·서울의 서버, L2·L3 네트워크 장비, 방화벽·IPS·TMS 보안 장비와 백업을 운영하고, 장애 복구·보안 감사 대응·국정감사 준비를 맡았습니다.
  • 사회보장정보원 고도화 사업에서 장비 검수·마운팅·설치 테스트를 맡았습니다.
  • 아동보호전문기관 구축·유지보수에서 콜센터 이전을 위한 장비 철거·재설치와 신규 기관 구축을 맡았습니다.
대외활동
2020.03
하이브리드 앱 및 웹 개발자 양성과정
  • 인프라에서 개발 직무로 전환하기 위해 Java·Spring 기반 웹과 REST API, Android·iOS 앱 개발 기초를 학습했습니다.
링크