Profile Picture

Introduce

웹 퍼블리싱으로 시작해 12년간 탄탄한 UI/UX 개발 경험을 쌓아온 프론트엔드 엔지니어입니다.

Vue와 React를 사용하여 AI 디지털교과서 및 3D 관제 플랫폼 개발 등 사용자 중심의 서비스 개발에 주력하였습니다.

효율적인 개발 환경 구축(MonoRepo, Storybook)과 오픈소스 기여를 통해 팀의 생산성을 높이고 기술 내재화에 앞장서고 있습니다.

기획자, 디자이너와의 긴밀한 협업을 통해 비즈니스 가치를 실현하며, 기술적 해답을 넘어 서비스의 본질적인 가치를 높이는 개발자가 되기 위해 끊임없이 노력합니다.

Work Experience

2024.02 - Current
1년 11개월 (재직중)

동아출판 (Dong-A Publishing)

Frontend Engineer

  • AI 디지털교과서 학습 뷰어(VIEWER) 서비스 개발 및 운영 (콘텐츠-뷰어 간 연동 개발 및 기능 개선)
  • 학습 관리 시스템(LMS) 서비스 개발 및 운영
  • 학습 콘텐츠 관리 시스템(LCMS) 관리 기능 개발 및 운영
  • Nuxt + Storybook을 적용한 디자인 시스템 구축
  • 오픈소스(IcPlayer) 커스터마이징 및 오픈소스 기여
  • 수식입력기(MathType) 에디터 기능 커스터마이징 개발 및 운영
  • 문항콘텐츠(UniPlayer) 저작도구 기능 개발 및 운영
2018.02 - 2023.11
5년 10개월

SK쉴더스 (SK Shieldus)

Frontend Engineer

  • React, Three.js을 기반으로 융합보안플랫폼(SUMiTS) 3D 시각화 및 컴포넌트 개발 담당
  • Vue.js 기반 개인정보 검출 차단 솔루션(Eagleye for Server) 프론트엔드 개발
  • Php 기반 위협 인텔리전스 솔루션(Threat Intelligence) PoC 프로젝트 프론트엔드 개발
  • yarn workspace와 lerna로 구성한 Monorepo 프로토타입 구현
  • MSW(Mock Service Worker) API mocking 구현
  • 테스트코드 Enzyme 라이브러리 적용으로 테스트 코드 작성
  • 사내웹표준가이드 작성 및 세미나
2011.01 - 2017.05
6년 4개월

Previous Experience

Web Publisher

  • 농심 그룹사 사이트 운영 유지보수 및 웹접근성 인증 마크 획득 (스크린리더 대응, 키보드 접근성 준수)
  • SK C&C R통합 분석 포탈: jQuery Plugin/Mindmap 활용 시각화 UI 개발 (계약직 프리랜서)
  • SK Hynix: JqGrid 커스터마이징 및 데이터 그리드 고도화 (계약직 프리랜서)
  • 프라임에듀넷: 공무원 교육 플랫폼 반응형 웹 & 애자일 협업 경험 (계약직 프리랜서)
  • 대한상공회의소: 대규모 사이트 리뉴얼, 웹표준/접근성 100% 준수 작업
  • 모겐토: 여행박사, 코레일, 네파 등 다수 프로젝트 UI/UX 퍼블리싱
  • 지엔드에이치: 코튼베이비, 에스텔, 탐스 등 쇼핑몰 구축 및 이벤트/홍보 페이지 퍼블리싱 작업

Projects

2024.02 - Current

AI 디지털교과서 뷰어 서비스 개발

선생님과 학생의 수업진행에 도움을 주는 뷰어 서비스

Tech Stack
Vue.js Pinia TypeScript Vite
[성능 개선]
  • 선생님-학생 간 필기 데이터 공유 시, SSE 도입으로 실시간성 동기화 구현 및 cdn 이미지 캐싱 이슈로 간헐적 이미지 로딩 실패 문제 해결
  • 실시간 URL 공유 알림 시, 기존 Polling -> SSE 적용으로 실시간성 보장하고 URL 공유 알림 및 텍스트 및 데이터 동기화 문제 해결
  • iframe 브라우저 자동 번역 불가 시, MutationObserver와 Shadow Text Mirroring 기법을 적용하여 브라우저 자동번역 환경 구현
  • 오픈소스 IcPlayer HLS 비디오 초기화 시점 문제 및 비속어 필터링 미지원 문제 해결
  • 동아출판 소속으로 IcPlayer video addons 오류 수정 기여 (관련 글)

    - 페이지 로딩 시 간헐적으로 state.videoURLS 정보 누락되는 문제 수정 (video > presenter.js :1593 ~ 1596)

[기능 구현]
  • 뷰어-컨테이너 양방향 통신 아키텍처를 설계하여 이종 콘텐츠 간 인터페이스 호환성 및 데이터 동기화 구현 (뷰어 타입 9종 개발)
  • 자동 번역 방지 기능 구현 시, Web Selection API를 활용한 드래그 텍스트 범위 감지 및 동적 태그 래핑(Tag Wrapping) 기능 개발
  • MathType 에디터의 학년별 커스텀마이징 적용으로 수식 입력 편의성 및 UI/UX 강화 (가이드문서)
  • 수업 중 학생들의 시선 분산 문제를 SSE 기반 실시간 화면 제어 기능을 제공으로 학생의 학습 집중도 향상
  • Vue, pinia 상태관리를 이용한 선생님 수업도구 지원(판서, URL 공유, 내 자료함, 스톱워치, 타이머, 깜깜이) 등 다양한 컴포넌트 개발로 사용자 경험 증대
  • 콘텐츠/문항 데이터의 정합성 확보를 위한 상세페이지 내 프리뷰(Preview) 뷰어 연동 구현
[개발 생산성 향상]
  • Vite 기반 번들링 최적화 및 bulid 버전 자동 업데이트를 적용한 캐싱 문제 해결과 최신 버전의 애플리케이션 제공으로 일괄된 사용자 경험 제공 (이미지 용량 평균 76% 감소, 초기 로딩 속도 약 40% 개선)
  • API Interceptor 및 로깅 시스템 표준화를 통해 운영 환경의 보안성과 개발 생산성을 동시에 확보

두클래스 교사 지원 플랫폼

Nuxt 기반 초·중·고 교사 전용 교수학습 지원 플랫폼

Tech Stack
Nuxt.js Pinia Webpack
[개발 생산성 향상]
  • 프로젝트 확대에 따른 UI 파편화 문제를 Figma 디자인 기반으로 Nuxt + Storybook 구축하여 개발 생산성 및 협업 효율 증대
2018.02 - 2023.11

SUMiTS 산업안전 / SUMiTS FM

물리보안과 정보보안을 통합 관제 및 관리 가능한 설치형 융합보안플랫폼 서비스

Tech Stack
React Three.js Redux MonoRepo MSW Webpack
[성능 개선]
  • 정적 레이아웃의 한계를 React 위젯 아키텍처 및 Config-Driven UI로 고객 맞춤형 화면 구성의 유연성을 확보한 관리형 대시보드 개발
  • 평면적 데이터 표현의 한계를 Three.js 기반 3D 모델(GLTF/GLB) 렌더링 및 카메라 제어 기술로 직관적인 인터랙티브 시각화 환경을 구현한 3D 웹 시각화 구현
  • React.memo 및 페이징 기법을 활용하여 IoT 센서 데이터 렌더링 지연 문제 해결
[기능 구현]
  • 데이터 표현의 복잡성을 Bizcharts / D3.js 기반 차트 컴포넌트 모듈화로 해결하여 다양한 시각화 요구사항에 유연하게 대응한 데이터 시각화 구현
  • 다양한 IoT 센서(맨홀, 소화기)의 파편화된 데이터 모니터링 문제를 통합 대시보드 인터페이스 구현으로 실시간 관제 효율성을 높인 IoT 안전 관제 대시보드 개발
  • i18next 기반의 확장성 있는 다국어 아키텍처를 구축하여 글로벌 서비스 출시 및 프로세스 최적화 개선
[생산성 향상]
  • 프로젝트 확장에 따른 관리 복잡성을 Yarn Workspace와 Lerna 기반 모노레포(Monorepo) 구축으로 해결하여 공통 모듈 재사용성 증대 및 의존성 관리 효율화
  • 에러 대응의 비효율성을 Sentry 기반 중앙 집중식 로깅 및 Slack 실시간 알림 연동으로 해결하여 운영 이슈 대응 속도를 단축한 운영 모니터링 시스템 구축
  • UI 컴포넌트 검증의 어려움을 Enzyme 라이브러리 기반 테스트 코드 도입으로 해결하여 잠재적 버그를 사전에 차단하고 시스템 안정성을 확보
  • 백엔드 개발 일정 의존성으로 인한 병목 현상을 MSW 기반 API 모킹(Mocking) 환경 구축으로 해결하여 개발 생산성 향상
  • 웹 표준 가이드라인 수립 및 전파 교육으로 해결하여 코드 품질의 평준화와 협업 체계 구축

Skills

Languages & Frameworks
JavaScript (ES6+) TypeScript Vue.js Nuxt.js React.js HTML5/CSS3 jQuery
State & Build
Pinia Redux Recoil React Query Vite Webpack
Graphics & Tools
Three.js (WebGL) D3.js Bizcharts Docker Figma Jenkins Git/Gitlab Redmine

ETC

2023.01 - 2023.03

데이터분석으로 생존하기(데분생) 커뮤니티

엘라스틱넷 기반 로그우도함수를 대입한 회귀분석에 대한 발표

2018.08 - 2018.08

보안관제의 이해 및 운영 교육 이수

한국정보보호경영연구소

CERTIFICATIONS

2021.12

데이터분석준전문가(ADsP)

한국데이터산업진흥원

EDUCATION

2020.09 - 2023.02
졸업

한양대학교 공학대학원

전기전자컴퓨터공학과 컴퓨터공학전공

응급의료서비스에서 엘라스틱넷 기반 로그우도함수를 대입한 회귀분석 방안
(A Regression Analysis Method Using Elastic Net-Based LogLikelihood Function in Emergency Medical Service)

2002.03 - 2010.08
졸업

협성대학교

실내디자인과