프론트엔드 개발자

오민섭

저는 사용자에게 최고의 경험을 제공할 수 있는 제품을 개발하는 것을 목표로 합니다.

최고의 경험을 제공하기 위해서는 문제의 본질을 파악하고 해결해야 할 과제를 정확히 이해하는 것이 중요합니다. 이를 위해 끊임없는 학습이 필요하며, 저는 이러한 성장 과정을 즐기며 나아가고 있습니다.

서비스 개발은 혼자 하는 것이 아닌 여러 사람이 함께 만들어가는 과정입니다. 저는 다양한 관점을 가진 사람들과 적극적으로 소통하며 개발자의 시각에 국한되지 않고 다각도로 문제를 해결하는 것에 관심이 있습니다.

성실함

학습 지향

커뮤니케이션

자기 주도적

적응력

https://github.com/OhMinsSup

<ul><li>기존 윈도우 프로그램을 Electron 기반으로 전환하고, 프로그램 내부에서 직접 데이터를 수집・분석하던 방식을 개선했습니다. 각 기능을 모듈로 분리하여 <code>child_process</code>에서 실행하고, <code>ipc</code> 통신을 통해 렌더러 프로세스와 메인 프로세스 간 데이터를 주고받도록 구현.</li></ul>

고려대학교 - 사용자 PC 정보 수집 및 선별 서비스

<ul><li>NextJs에서 Chrome 56 레거시 브라우저를 지원하기 위해 transpilePackages와 Polyfill 설정으로 호환성 작업 진행</li><li>@next/bundle-analyzer로 분석 후 모듈별로 chunk로 분리 후 lazy import 처리</li><li>브라우저에서 대규모 데이터 처리를 위해서 B+ 트리 기반 메모리 저장소 BlinkDB 및 Virtual List 도입하여 클라이언트 필터링 및 검색시 화면 렌더링 시간을 5초정도에서 0.9초 미만으로 최적화</li><li>초기 카테고리별 데이터 호출 시 8만 개 이상의 데이터로 인해 API 호출부터 렌더링까지 1분 30초가 소요되었으나, <code>IndexedDB</code>를 활용한 데이터 캐싱 구현으로 두 번째 요청부터의 카테고리별 로딩 시간을 대폭 단축했습니다.</li><li>Leaflet 라이브러리를 사용해 지도 경로 추적 플레이어 기능을 <code>requestAnimationFrame</code> 을 사용해 구현 및 마커 최적화를 위한 마커 클러스터러 적용</li></ul>

경찰청 - 증거 분석 서비스

<ul><li>구글 검색시 사용자 노출 확대를 위해 채용 공고에 대한&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=ko">구조화된 데이터</a>&nbsp;개선</li><li>레이아웃 안정성 지표인 CLS(Cumulative Layout Shift)를 개선하기 위해 데이터 로딩 시 스켈레톤 컴포넌트를 도입. 이를 통해 CLS 수치를 0.25에서 0.1 이하로 개선.</li><li>초기 콘텐츠 표시 속도인 FCP(First Contentful Paint)를 개선하기 위해 리소스 우선순위를 지정하고, SSR과 미디어 파일의 뷰포트 기반 지연 로딩을 적용했습니다. 또한 사용자 상호작용 이후에 필요한 자바스크립트 파일은 상호작용 후 지연로딩하는 방식을 도입하여 초기 로딩 속도를 개선</li><li>번역 담당자와 효율적인 작업을 위해 Google Sheets API를 연동하여 번역 워크플로우 자동화</li></ul>

바른손 - BRS 생태계의 NFT 서비스를 제공하는  블록체인 기반 마켓플레이스

<ul><li>아임포트를 통한 본인인증 구현 및 NFT 작품 결제 시스템 개발</li><li>모바일 전용으로 웹을 <code>JavaScript MediaQuery</code>를 활용하여 데스크탑 모드를 지원 할 수 있게 확장. 이를 통해 고객사의 요구사항을 시간과 비용 측면에서 효율적으로 구현</li><li>사용자 상호작용이 필요한 컴포넌트들을 지연 로딩(lazy import)으로 처리하여 초기 번들 크기를 최적화</li><li>React Hook Form와 Yup를 활용한 멀티페이지 폼 개발로 개발 및 검증 효율성 향상</li><li>Redux를 통해 API 관리하던 로직을 SWR을 적용해서 API 로직 분리</li><li><code>Intersection Observer</code> 기반 호출로 불필요한 호출 방지하여 리스트 성능을 개선</li></ul>

바른손 - 바른손랩스 국내향 예술 작품 마켓플레이스

<ul><li>EC2에서 <code>serverless-nextjs</code>를 통해 AWS Lambda@Edge에 Next.js 배포 방식을 전환하였고, 배포 방식도 간소화</li><li>bitbucket pipelines을 이용해서 Next.js 앱 배포 자동화</li><li>jQuery 기반 백오피스를 Next.js 기반으로 전환</li></ul>

오픈소스 레쥬메 시스템 - 상명대학교 Github 연동 기반 오픈소스 레쥬메 시스템

• Jquery 기반 백오피스 개발

최고의 상명 - 상명대학교 비대면 경진대회 플랫폼

<ul><li>Jquery 기반 백오피스 개발</li><li>웹 소켓을 활용하여 공연장의 실시간 입장, 출입 현황 및 티켓 확인 정보를 데이터 시각화</li><li>공연장 내 티켓 확인 시스템에서 네트워크 통신 장애로 인한 입장 지연 문제가 빈번하게 발생하였고 이를 해결하기 위해 웹 기반 시스템을 일렉트론으로 전환</li><li>데스크톱 애플리케이션 마이그레이션을 위해 체계적인 계획을 수립하였고 우선순위가 반영된 체크리스트를 작성하여 주간 진행 상황을 점검하며 이슈를 문서화. 이를 통해 팀원들과 효율적으로 소통하며 예정된 일정 내에 마이그레이션을 성공적으로 완료.</li></ul>

디지털티켓 제로솔루션 - IoT 기반 디지털 티켓 발급 및 공연 출입관리 솔루션

<ul><li><code>Server Side Rendering</code>으로 구현된 웹사이트에서 트래픽 증가로 인한 운영 비용 상승과 서버 다운 문제가 발생했습니다. 이를 해결하기 위해 <code>Static Site Generation</code>을 적용하여 서버 다운 문제를 해결하고 서버 자원을 절약했습니다.</li><li>AWS Cloud Front를 활용한 CDN 캐싱으로 추가 개선 진행</li></ul>

서울 가요 대상

<ul><li>복잡한 비즈니스 로직의 안정적인 관리와 코드 재사용성 향상을 위해 TypeScript를 도입하고, 공통 비즈니스 로직을 모듈화한 관리 시스템을 구축</li><li>웹뷰로 구현된 페이지와 네이티브 앱 간의 효율적인 통신을 위한 브릿지 인터페이스 구현</li></ul>

KEMY - K-POP 마스터들과 함께하는 아이돌 트레이닝 플랫폼

다양한 규모의 SI 프로젝트에서 프론트엔드 개발을 주도하며, 각 프로젝트의 특성에 맞는 기술 스택 선정과 아키텍처 설계, 배포 구조 구축을 담당했습니다. EC2 기반 환경에서 Serverless 아키텍처로의 점진적 전환을 이끌었고, Serverless로 배포하는 Next.js 앱이 Next.js 최신 기능 구현의 한계점을 SST 도입으로 해결하여 효율적인 배포 시스템을 구축했습니다. 공통 컴포넌트와 유틸리티 함수를 독립 라이브러리로 모듈화해 재사용성을 향상시켰습니다. Core Web Vitals 지표 개선을 통해 CLS 0.1 이하, FCP 1.5초 미만의 성능을 달성했으며, 브라우저에서 대규모 데이터 처리를 위해서 B+ 트리 기반 컬렉션 및 Virtual List를 도입하여 클라이언트 필터링 및 검색시 화면 렌더링 시간을 5초정도에서 0.9초 미만으로 단축했습니다. 이러한 기술적 성과들은 사용자 경험 향상을 위한 지속적인 학습과 노력의 결과입니다. 문제 해결 과정에서 팀원들과 적극적으로 소통하며 실질적인 개선을 이루어내고 있습니다.