프론트엔드 엔지니어

김정문

리모트 환경에서도 빠른 성과를 내는 다국어 서비스에 특화된 프론트 엔지니어

효율적

커뮤니케이션

기술적

문제 해결사

고객 중심

정보처리기사

CHINESE

JAPANESE

[개요]기업(B2B)과 인재(B2C) 대상의 경력직 기반의 채용플랫폼 서비스<ul><li>인재에게 채용공고, 이력서, 이력서 파싱, 지원현황 및 교육 콘텐츠를 제공</li><li>기업에게 인재의 이력서, 인재 추천, AI 기반의 JD빌더 및 교육 콘텐츠 광고 서비스를 제공</li></ul>개발 기간 3개월만에 Beta서비스(인재 사이드) 런칭, 개발 기간 5개월 만에 정식 런칭 [참여 내용 및 성과]<ul><li>전체 서비스 설계 및 개발 (Next.js, React, Typescript, Emotion, TailwindCSS, AWS, Github, Figma)</li><li>SSE(Server-Side Event) 를 이용한 AI 이력서 Parser 및 JD 빌더 구현<ul><li>SSE에 Authorization 헤더를 추가하기 위해, WebServer Middleware에 Proxy 구현</li></ul></li><li>PDF 빌더 및 PDF 뷰어 구현 (React-PDF)</li><li>Websocket 기반 알림/채팅 서비스 구현</li><li>Notion API를 이용한 블로그 개발<ul><li>Notion API가 불안정하여, Notion API 상태에 관계없이 운영하기 위해 Node Cache를 이용하여 캐싱 구현</li></ul></li><li>플랫폼 어드민 개발 (Next.js/App Directory)</li><li>Github Action을 이용한 CD/CI 구현</li><li>채널톡, MS Clarity를 통한 CX 대응 o 채널톡을 통하여 유저 행동경로를 파악하여, 이를 통해 MS Clarity로 해당 유저를 특정한 후, 해당 유저의 행동을 추가 조치없이 LIVE로 보며 대응</li></ul>

경력직 채용 플랫폼 휘슬 (https://whistle.to)

[개요]MAU 5000만 이상의 서비스 이용자에게 Riot Games에서 서비스 중인 게임 리그 오브 레전드의 전적 검색 및 통계를 제공하는 서비스[참여 내용 및 성과]<ul><li>서비스 운영 및 신규 기능 개발 (Next.js 14/Express, React, Typescript, Emotion)</li><li>서비스 최적화<ul><li>Next.js 프레임워크 업데이트(v12 -&gt; v14)로의 마이그레이션을 통한 렌더 성능 개선</li><li>이미지 컴포넌트 리뉴얼을 통해 페이지당 이미지 파일 개수를 50% 이상 개선</li><li>다국어(26개 언어)의 텍스트 리소스 개선</li><li>SSR 시 전달되는 텍스트의 용량을 1~2MB 절감</li><li>Server-side 데이터 플로우 개선 (Node/Express)</li></ul></li><li>SEO 최적화 TF 참여<ul><li>메타 태그 최적화</li><li>사이트 내 키워드 개선을 통한 최적화</li><li>PageSpeed Insights, Lighthouse 성능 지표 개선을 통한 SEO 개선</li></ul></li></ul>

리그오브 레전드 전적검색 서비스 (https://op.gg)

[개요]사용자 PC의 웹 브라우저를 통해 Cloud 상의 브라우저 엔진의 결과 화면을 전달받아, 안전하게 웹 브라우징과 브라우저의 기능 전반을 수행하는 서비스 [참여 내용 및 성과]<ul><li>Front-end 웹 어플리케이션 전체 개발 (Node.js/Express, React.js/Hook, Webpack5/Babel) <ul><li>Browser의 기능 전반 개발(History, 화상회의, 업/다운로드 등)</li><li>Websocket을 사용하여 C언어 기반 엔진과의 통신 파트 개발<ul><li>비디오 모드(WebRTC)/이미지 모드(Websocket + HTML Canvas) 화면 렌더링 모듈 개발 </li><li>HTML Canvas에서 플리커링 방지를 위한 더블 버퍼링 및 렌더링 최적화를 통해 720p에서 10-15fps로 제공</li></ul></li></ul></li><li>WebView 기반의 Android App 출시</li><li>Back-end 파트 개발 (Node.js/Express, Sqlite) <ul><li>C언어 기반 엔진과의 세션 관리를 API 구현 (Redis)</li><li>업/다운로드 프로세스 중 복수의 무해화/바이러스 검사 등의 절차 삽입이 가능한 REST API 개발</li></ul></li><li>Docker, k8s의 컨테이너 빌드 자동화 구축 (git/Bitbucket WebHook + Pipeline)</li><li>특허 출원<ul><li>다국어 입력가능한 원격서비스 제공방법 및 이를 수행하는 서버(10-2021 0037469)</li><li>원격보안 서비스 제공 방법 및 이를 수행하는 서버 (10-2022-0024544)</li></ul></li><li>GS 인증 통과</li><li>소프트캠프의 Shieldex Remote Browser로 한국/일본에 출시</li></ul>

웹 격리 솔루션

<ul><li>경력직 플랫폼 휘슬 서비스 개발(<a target="_blank" rel="noopener noreferrer nofollow" href="https://whistle.to">https://whistle.to</a>) (Next.js 14/page dir, React 18, Typescript, Emotion/tailwindcss, Node-cache, AWS, Github Action) <ul><li>전체 서비스 설계 및 개발 o AI 이력서 파서, JD 빌더 구현 (SSE) </li><li>PDF 뷰어, PDF 빌더 개발 o Websocket 기반 채팅 서비스 구현 </li><li>어드민 개발 Next.js 15(app dir) </li><li>채용공고, 세미나, 커뮤니티의 광고 시스템 개발 </li><li>Github Action을 사용한 CD/CI 프로세스 구현 (Github Action, AWS) </li><li>채널톡, MS Clarity를 통한 CX 대응</li></ul></li></ul>

<ul><li>리그오브레전드 전적 서비스(<a target="_blank" rel="noopener noreferrer nofollow" href="https://op.gg">https://op.gg</a>) 기능 개발 및 서비스 최적화 (Next.js 14/Express, React, Typescript, Emotion) <ul><li>서비스 성능 및 리소스 최적화</li><li>SEO 최적화 (콘텐츠 최적화, 메타 태그 최적화) </li></ul></li><li>전략적 팀 전투 전적 서비스 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://tft.op.gg">https://tft.op.gg</a>) 기능 개발 (Next.js 14/Express, React, Typescript, Emotion)</li><li>발로란트 전적검색 서비스(<a target="_blank" rel="noopener noreferrer nofollow" href="https://valorant.op.gg">https://valorant.op.gg</a>) 리뉴얼 및 기능개발 (Next.js, React, Typescript, Emotion)</li><li>전체 서비스용 어드민 개발 (Next.js 14 AppDir, tailwindcss) </li><li>이스포츠 서비스 (<a target="_blank" rel="noopener noreferrer nofollow" href="https://esports.op.gg">https://esports.op.gg</a> ) 기능 개발 및 유지보수 (Next.js, React, GraphQL) <ul><li>서비스 리뉴얼<ul><li>전체 컴포넌트 재설계</li><li>GraphQL 스키마 및 SSR 데이터 플로우 최적화</li><li>전체 플로우 500ms~2sec 개선</li><li>총 3개월만에 리뉴얼 완료</li></ul></li></ul></li></ul>

<ul><li>제로 트러스트 기반 웹격리 플랫폼 Shieldex Remote Browser Front-end/Back-end 개발 (Node.js/Express, React 18, MariaDB, Sqlite, WebRTC, Html Canvas, Docker, Native Android, Figma)<ul><li>Websocket 을 이용한 엔진과의 이벤트 상호작용 및 실시간 통신 구현 </li><li>비디오 모드(WebRTC) 및 이미지 모드(Canvas)를 통한 원격 브라우저 구현</li><li>브라우저 내 히스토리, 컨텍스트 등의 브라우저 기능 구현 </li><li>WebRTC 기반의 화상회의 연동 기능 구현</li><li>Webview 기반의 Android App 개발 연동</li><li>특허 출원<ul><li>다국어 입력가능한 원격서비스 제공방법 및 이를 수행하는 서버(10-2021 0037469)</li><li>원격보안 서비스 제공 방법 및 이를 수행하는 서버 (10-2022-0024544) </li></ul></li></ul></li><li>케이블, IPTV의 Cloud UI Front-end / 개발 (HTML, HTML Canvas, JQuery, CSS)<ul><li>케이블, IPTV의 클라이언트 개발(Android Java, Java 1.4) </li></ul></li><li>소프트웨어 공급망 보안 서비스 Front-end / Back-end 기능 개발 (Vue.js, Nuxt.js, Node.js/Express, Typescript, AWS DocumentDB/Mongo) </li><li>BosCoin 가상화폐 Android/iOS 어플리케이션 개발 (React Native)</li></ul>

<ul><li>화자인증이 포함된 대장암 환자의 식이관리 어플리케이션 개발(Android Java, MariaDB)</li><li>중국 낙하산 VR 체험 어플리케이션 개발(Unity3D/C#, WinForm)</li><li>생체인증 기반 융복합 인증 어플리케이션 개발 (Android Java, JNI/C++)</li></ul>