<aside>
깃허브 : https://github.com/klmhyeonwoo
블로그 : https://klmhyeonwooo.tistory.com/
새로운 블로그로 이전하고 있어요 : https://slashpage.com/timmy
링크드인 : www.linkedin.com/in/hyeonwoo-klm
</aside>
2024.01 -
Front-End Developer @*AhnLab, Threat Intelligence Development Team*
Threat Intelligence Platform
서비스 운영 및 유지보수 진행
여러 해외 및 국내 고객사의 사전 위협 대응을 위해 위협 인텔리전스 플랫폼에서 위협 정보에 대한 데이터 시각화를 진행했습니다. 이외에도 유사 도메인 서칭 · 다크웹 계정 유출 조회 기능 · 고객 문의 게시판 · i18n을 이용한 다국어 대응에 참여하였으며, 커스텀 대시보드 리뉴얼 · 고객 문의 게시판 관리 기능 · 악성 파일 분석 서비스 등 신규 기능 및 유지보수 진행하고 있습니다.
사용자 커스텀 대시보드 개발
커스텀 대시보드 개발 전, 기술 구현 가능성에 대한 PoC를 사전에 진행해보며 어떻게 해당 기능을 설계할 것인지에 대한 개발 플로우를 경험했습니다. vue-grid-layout을 이용해 사용자가 자유롭게 위젯의 크기 등을 수정할 수 있게하며, 위젯 공통 컴포넌트 구조를 설계하였습니다.
사용자 커스텀 대시보드 구현을 하면서 위젯들을 삽입 및 제거하는 과정에서 불필요한 서버 호출들이 발생하였고, 이를 해결하기 위해 서버의 명시적 상태와 데이터 캐싱 처리를 위한 @tanstack/vue-query를 도입하여, 컴포저블 형태로 구조를 구성하며 성공적으로 기능 릴리즈를 진행했습니다.
Threat Intelligence Platform Backoffice (Lead)
서비스 운영 및 유지보수 진행
위협 인텔리전스 플랫폼에서 Amchart를 이용한 데이터 시각화 및 연구소 내에 고객사 관리 및 위협 정보 관련 데이터들을 관리할 수 있는 백오피스 환경을 구성했습니다. 현재 백오피스의 메인 개발자로 프론트엔드 단독 개발을 진행하고 있습니다.
Vue 2 → Vue3 전환 진행
기존 노드 버전(v14)로 인해 일부 패키지 및 기능에 제약이 발생하여, Vue3 및 Node v20(LTS)로 마이그레이션 진행하면서 백오피스의 전체 UI가 Vuetify 컴포넌트로 종속되어있어 커스텀이 힘든 상황이기에 이를 해결하기 위해 컴포저블과 공통 커스텀 컴포넌트를 개발하여 의존성 제거했습니다.
Vue2에서 Vue3 마이그레이션의 리소스 부족 및 기존 진행 사항에 대한 현행 파악이 제대로 이뤄지지 않아 8달 동안 지연되던 프로젝트를 효율적인 진행을 위해 마이그레이션 및 티켓 현황, 가이드 문서화에 참여해 ****마이그레이션 기간을 2~3달로 단축하여 성공적으로 릴리즈 진행할 수 있었습니다.
효율화를 위한 유틸 함수 모음 라이브러리 개발 및 배포
도메인 별로 구분되어있지 않은 유틸 함수 · 믹스인 등을 팀 내에서 회의를 통해 각 기능(도메인) 별로 구조화를 진행했으며, 각 플랫폼 별 유틸함수를 공통화시키는데 있어 불편함이 발생하여 이를 해결하기 위해 라이브러리로 제작하고자 유틸 함수 모음 라이브러리 개발 및 배포했습니다.
디자인 시스템 인터널 커스텀 컴포넌트 개발
백오피스 컴포넌트 구조화를 위해 도메인에 맞는 디자인 시스템을 구축하고자 했고, 이를 위해 커스텀 컴포넌트(인터널)의 접근성 및 시각화를 돕고자 스토리북을 도입하며 DX(Developer eXperience)를 향상시키는데 기여했습니다.
프론트엔드 선행 기술 연구 진행
로컬 개발 환경 실행 시간이 30~40초 걸렸던 환경(Webpack)을 Vite로 변경하여 명령어 즉시 실행되게 변경했던 경험과 타입 보장 및 휴먼 에러 방지를 위해 타입스크립트를 선제적으로 도입을 했던 것처럼 Threat Intelligence Platform 프론트엔드 소스 코드에 적용 전, 선제적으로 기술을 도입하여 안정성을 확보하고 도입하는 과정들을 진행하고 있습니다.
***안랩 연구소 (ASEC) 보안 블로그 리뉴얼 (Lead)***
서비스 운영 및 유지보수 진행
안랩의 분석 및 보안을 콘텐츠를 책임지는 안랩 연구소 보안 블로그를 20년 만에 리뉴얼하고, 워드프레스 · php · 바닐라 자바스크립트를 통해 서비스 오류 및 배너 등 이벤트가 존재할 때마다 대응을 진행하고 있습니다.
게시 이중화 불편함을 원소스 멀티 플랫폼으로 전환
기존에는 워드프레스에 직접 글을 게재 후, 인텔리전스 플랫폼에 이중 수동 게시 작업을 진행했던 문제가 있었으나, 이 불필요한 작업을 해결하기 위해 워드프레스 훅을 연동하여 백오피스에서 게시글 작성 시, 인텔리전스 플랫폼 및 안랩 블로그에 동시 게재될 수 있도록 자동화를 진행했습니다.
ASEC 블로그 구축기 및 워드프레스 지식 공유
워드프레스 게시 자동화를 위한 문서 분석 및 팀 내 세미나 진행 · 공유를 진행하며 전반적인 서비스 디자인 및 퍼블리싱 진행 · 블로그 관리 등의 글로벌 운영 이슈 대응을 진행했습니다.
사내 인프라 업무 효율성 향상을 위한 Zookeeper UI 개발
Zookeeper CLI를 Web Zookeeper UI로 전환
Zookeeper CLI를 통해 ZNode를 매번 개별로 조회하던 불편함을 해결하기 위해 클러스터 생성 및 삭제 · 노드 CRUD · 노드 메타데이터 조회와 같은 API를 통한 시각화 웹 서비스로 업무 효율성 제공했습니다.
V0를 이용해 1차 MVP를 제작하고, V0가 제작한 React + Tailwind 흐름에 MUI의 트리뷰를 통한 ZNode 시각화 및 커스텀 컴포넌트 개발을 통한 레이아웃 제공했으며, 초기 사용자의 권한에 따라 Jotai의 전역 상태를 통해 각 기능 별 권한 제어 기능 등 프로젝트의 전반적인 부분을 개발했습니다.
2023.04 - 2023.01
Front-End Developer *@JiranSoft, Component Development Team*
크로스에디터 (구 나모에디터) 리액트 라이브러리 개발
고객사 지원을 위한 SPA 환경 대응
기존 에디터는 바닐라 자바스크립트로 이루어져있어, SPA를 사용하는 고객사들은 가이드 문서를 통해 타입 정의, 스크립트 로드와 같은 포팅 처리를 직접 진행해야하는 설치 과정의 불편함 발생했습니다. 이를 해결하기 위해 에디터 코어 소스코드를 폴더에 삽입하면 기타 포팅 작업 없이 타입스크립트 및 래핑 컴포넌트와 함께 사용할 수 있도록 리액트를 이용해 에디터 래핑 NPM 라이브러리를 개발하여 에디터 설치 과정을 간소화했습니다.
직접 문서를 전달하던 비효율화를 마크다운 예시 제공으로 효율화
기존 기술 지원 팀에서 고객사에 직접 전달하던 SPA 에디터 연동 가이드 문서를 케이스 별 예제와 README.MD로 제공하여 에디터 접근성 향상 및 고객사 대응 효율화를 할 수 있었습니다.
웹 기반 한글 뷰어 개발
성능 최적화를 위한 레이지 로드 적용
에디터 내에서 한글 뷰어의 편리성을 제공하기 위해 PDF 뷰어와 같은 한글 뷰어를 자체적으로 개발 진행했습니다. 한글 컨버터를 통해(외부 응용프로그램) 패칭된 태그 데이터들을 각 페이지 별 데이터를 핸들링하고, 스로틀링을 통해 무한 스크롤(Lazy Load) 방식으로 성능 최적화를 진행했습니다.
User Agent 헤더를 이용한 브라우저 별 크로스 브라우징 대응
Webkit, Mozila 등 모던 브라우저의 크로스 브라우징 현상을 해결하고자 유저 에이전트 헤더를 활용해 환경 별 공통 함수 개발 ****과 조건별 분기처리를 통해 모든 모던 브라우저에 대응했습니다.
인쇄 및 확대 이벤트 추가 개선
한글 뷰어의 인쇄 기능 실행 시, 확대 상태 그대로 인쇄되는 문제가 발생하여 이를 해결하고자 사용자가 인쇄 이벤트를 실행하기 전, 사용자가 설정해놓았던 배율 상태를 저장. 스타일 요소(scale)를 이용해 인쇄 시에는 기본 배율(100%)로 변경하고, 인쇄 후에는 저장된 상태 값을 활용하여 다시 확대 상태를 유지할 수 있도록 설계하여 뷰어 사용성을 개선했습니다.
크로스에디터 (구 나모에디터) 유지보수 및 신규 기능 추가
애자일 문화 및 JIRA 업무 플로우 경험
8,000여 고객사의 필드 이슈를 패치하고, 2주 간격의 스프린트를 통한 체계적인 개발 일정 관리를 경험했으며, 연구소 내부에서 업무 및 지라 이슈 티켓 구체화에 대한 레퍼런스로 선발되어 우수사원 수상을 했습니다.
에디터 모던 브라우저 지원을 위한 크로스 브라우징 대응
모던 브라우저와 더불어 일부 고객사의 IE (Internet Explorer) 대응을 하고자 자바스크립트와 제이쿼리를 사용하여 userAgent 기반으로 크로스 브라우징 현상을 해결하고 브라우저 별 에디터의 캐럿 및 엘리먼트 렌더링에 관련된 동일한 동작을 구현했습니다.