EXPERIENCE

TOTAL 총 4년 2개월
2024.11 ~ 2025.08

HL7(휴비츠레이어세븐)

10개월

프로덕트 엔지니어 · 2024.11 ~ 2025.08

  • [사내 관리 시스템 정상화]
    • 상황: 낙후된 UI와 빈번한 런타임 에러, 프론트엔드 단의 잘못된 상태 업데이트 로직으로 인해 타 부서에서 사용을 기피하던 시스템
    • 판단: 사용자의 입력값이 폼(Form) 상태에 즉각 반영되지 않거나, 다른 탭의 불필요한 API 호출이 기존 데이터를 덮어쓰는 구조적 결함이 신뢰도 하락의 원인이라 판단
    • 해결: 화면 전환 시 발생하는 비정상적인 API 호출을 차단하고, 데이터 상태 관리 로직을 단일화하여 사용자가 입력한 데이터가 오차 없이 저장되도록 개편
    • 성과: 데이터 신뢰도를 회복하여 3개월 만에 영업팀 도입률 98%를 기록하고 부서 간 협업 프로세스를 정상화
  • [확장 가능한 i18n 구조 설계로 글로벌 서비스 다국어 대응]
    • 상황: 글로벌 서비스 확장을 위해 한국어와 영어 대응이 필수적이었으나, 수동 관리 방식(DB 방식)으로는 향후 언어 확장에 한계
    • 판단: SSR 환경에서 서버가 페이지를 그리기 전 사용자의 지역 정보를 인식해야 하며, i18next 대비 가볍고 자동화가 뛰어난 Lingui.js가 최적이라 판단
    • 해결: 미들웨어를 통해 접속 국가 및 브라우저 설정을 감지해 최적의 언어를 결정하고, 서버 사이드에서 번역 리소스를 미리 결합하여 화면을 내려주는 구조를 설계
    • 성과: 신규 언어 추가 시 코드 수정 없이 번역 파일 추가만으로 대응 가능한 기반을 구축하여 유지보수 효율을 극대화
  • [배포 자동화 시스템 구축을 통한 운영 안정성 확보]
    • 상황: 수동 빌드 및 배포 방식으로 인해 환경별 설정 오류가 잦고, 사람이 직접 개입하며 발생하는 배포 사고가 빈번
    • 판단: 인프라를 코드로 관리하고 배포 파이프라인을 자동화하여 사람의 실수를 원천 차단하는 것이 제품 안정성의 최우선 과제라 판단
    • 해결: GitHub Actions와 AWS OIDC를 연동하여 코드 푸시 시 자동으로 빌드와 배포가 진행되는 통합 파이프라인을 구축
    • 성과: 배포 사고를 0건으로 제어하고, 전체 배포 소요 시간을 기존 방식 대비 약 50% 단축
  • [명세 기반 협업 체계 전환을 통한 커뮤니케이션 정확도 개선]
    • 상황: 구두 중심 커뮤니케이션으로 요구사항 해석 차이 및 반복적인 코드 수정 작업 발생
    • 판단: 요구사항을 시각화하고 명세화하여 기획-개발 간의 정보 격차를 해소하는 것이 전체 생산성 향상의 핵심이라 판단
    • 해결: Figma 기반의 화면 정의 및 API 명세 문서화를 주도하여 협업 효율 및 커뮤니케이션 정확도 개선
    • 성과: 요구사항 오해로 인한 재작업률을 낮추고 유관 부서와의 의사결정 속도 향상
Skill Keywords
React Next.js TypeScript Lingui.js AWS OIDC GitHub Actions Figma
2022.03 ~ 2024.01

멋쟁이사자처럼

1년 11개월

프론트엔드 개발자 · 2022.03 ~ 2024.02

  • [LMS(학습 관리 시스템) 및 백오피스 운영 자동화]
    • 상황: 교육 과정이 열릴 때마다 개발자가 매번 지원서 화면 코드를 수동으로 수정하고 배포해야 하는 병목 현상
    • 판단: 운영 관리자가 개발자의 개입 없이 직접 전형 문항을 구성할 수 있도록 비즈니스 로직을 추상화한 동적 시스템이 필요하다고 판단
    • 해결: react-hook-form을 활용해 운영자가 문항 형태와 데이터를 직접 정의하면 시스템이 이를 화면으로 렌더링하는 동적 폼 빌더를 설계
    • 성과: 신규 과정 런칭 시 개발 공수를 제거하여 운영팀이 시장 변화에 즉각적으로 대응할 수 있는 업무 독립성을 확보
  • [지원 프로세스 UX 최적화 및 고도화된 Form 관리]
    • 상황: 최대 6단계의 복잡한 입력 과정에서 대규모 데이터를 처리하며 발생하는 화면 끊김과 브라우저 이탈 시 데이터 유실 문제를 해결
    • 판단: 실시간 입력 성능을 위해 비제어 컴포넌트 방식을 사용하되, 데이터 안정성을 위해 각 단계 완료 시 서버와 상태를 동기화하는 하이브리드 전략
    • 해결: Selector 최적화로 불필요한 전체 리렌더링을 차단하고, 단계별 중간 저장 로직을 구현하여 데이터 정합성을 유지
    • 성과: 사용자가 중간에 이탈하더라도 작성 내용을 그대로 유지할 수 있게 개선하여 최종 지원서 완료율을 향상
  • [데이터 중심의 프로덕트 개선 및 협업]
    • 상황: 유저의 주요 이탈 지점을 파악하기 어렵고, 마케팅 성과를 정량적으로 측정할 수 있는 데이터 환경이 미비
    • 판단: 기술적 구현을 넘어 제품의 성장 지표를 추적할 수 있는 데이터 태깅 환경이 제품 전략 수립의 기반이 된다고 판단
    • 해결: 마케팅팀과 협업하여 GTM 전략적 태깅을 수행하고, 주요 유저 행동 퍼널을 추적 가능한 데이터 구조를 설계
    • 성과: 데이터에 기반한 의사결정 구조를 확립하고, A/B 테스트를 통해 실질적인 유저 전환 지표 개선을 이끌어냄
Skill Keywords
React Remix.js TypeScript Redux Redux-Thunk react-hook-form Tailwind CSS Storybook GTM GA
2020.11 ~ 2022.02

피타그래프

1년 3개월

웹퍼블리셔 · 2020.11 ~ 2022.02

  • [공공기관 지도 기반 플랫폼 UI 구축]

    동작구 빅데이터 플랫폼(스마트 상권분석, 지도 서비스)의 퍼블리싱을 담당했습니다
    공공기관 프로젝트 특성상 웹 표준과 접근성 기준을 엄격하게 지켜야 했습니다

    • W3C 웹 표준 및 웹 접근성 지침(WCAG) 기반의 시맨틱 마크업 작성
    • 다양한 사용자 환경과 브라우저를 고려한 크로스 브라우저 대응 퍼블리싱
    • 지도 서비스 UI 구현: 지도 API 연동 및 위치 기반 인터랙티브 요소 퍼블리싱
  • [데이터 시각화 UI 구현]

    상권분석 데이터를 직관적으로 보여주는 대시보드 UI를 담당했습니다
    복잡한 데이터를 시각적으로 명확하게 전달하는 방식을 고민했습니다

    • 차트 라이브러리 연동 및 커스터마이징으로 다양한 형태의 데이터 시각화 UI 구현
    • 지도 위에 데이터를 오버레이하는 인터랙티브 대시보드 인터페이스 퍼블리싱
    • 테이블, 필터, 검색 등 관리형 UI 컴포넌트 구현
Skill Keywords
HTML/CSS JavaScript React

SKILL

Front-End
React Next.js TypeScript React Native React-Query Tailwind CSS Storybook Remix.js Redux
Back-End & Database
Node.js Supabase Nest.js Prisma PostgreSQL
DevOps & Tools
GitHub Actions Vercel pnpm Workspace AWS EC2/OIDC Figma GA/GTM Docker Jenkins