<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
여러 해외 및 국내 고객사의 사전 위협 대응을 위해 위협 인텔리전스 플랫폼에서 Amchart를 이용한 데이터 시각화를 진행하고 있습니다.
유사 도메인 · 다크웹 계정 관련 기능 · 고객 문의 게시판 · i18n을 이용한 다국어 대응에 참여하였으며, 대시보드 리뉴얼 · 고객 문의 게시판 관리 기능 · 악성 파일 분석 서비스 등 신규 기능 및 유지보수 진행하고 있습니다.
사용자 커스텀 대시보드 구현을 하면서 위젯들을 On · Off 하는 과정에서 불필요한 서버 호출들이 발생하였고, 이를 해결하기 위해 서버의 명시적 상태와 데이터 캐싱 처리를 위한 TanstackQuery를 도입하였고, 컴포저블 형태로 구조를 구성하여 성공적으로 기능 릴리즈를 진행했습니다.
Threat Intelligence Platform Backoffice
위협 인텔리전스 플랫폼에서 Amchart를 이용한 데이터 시각화 및 연구소 내에 고객사 관리 및 위협 정보 관련 데이터들을 관리할 수 있는 백오피스 환경 구성했습니다.
기존 노드 버전(v14)로 인해 일부 패키지 및 기능에 제약이 발생하여, Vue3 및 Node v20(LTS)로 마이그레이션 진행하면서 백오피스의 전체 UI가 Vuetify 컴포넌트로 종속되어있어 커스텀이 힘든 상황이기에 이를 해결하기 위해 컴포저블과 공통 커스텀 컴포넌트를 개발하여 의존성 제거했습니다.
Vue2에서 Vue3 마이그레이션의 리소스 부족 및 기존 진행 사항에 대한 현행 파악이 제대로 이뤄지지 않아 8달 동안 지연되던 프로젝트를 효율적인 진행을 위해 마이그레이션 및 티켓 현황, 가이드 문서화에 참여해 ****마이그레이션 기간을 2~3달로 단축하여 성공적으로 릴리즈 진행할 수 있었습니다.
도메인 별로 구분되어있지 않은 유틸 함수 · 믹스인 등을 팀 내에서 회의를 통해 각 기능(도메인) 별로 구조화를 진행했으며, 각 플랫폼 별 유틸함수를 공통화시키는데 있어 불편함이 발생하여 이를 해결하기 위해 라이브러리로 제작하고자 유틸 함수 모음 라이브러리 개발 및 배포했습니다.
백오피스 컴포넌트 구조화를 위해 도메인에 맞는 디자인 시스템을 구축하고자 했고, 이를 위해 스토리북을 도입하며 DX(Developer eXperience)를 향상시키는데 기여했습니다.
***안랩 연구소 (ASEC) 보안 블로그 리뉴얼***
기존에는 워드프레스에 직접 글을 게재 후, 인텔리전스 플랫폼에 이중 수동 게시 작업을 진행했던 문제가 있었으나, 이 불필요한 작업을 해결하기 위해 워드프레스 훅을 연동하여 백오피스에서 게시글 작성 시, 인텔리전스 플랫폼 및 안랩 블로그에 동시 게재될 수 있도록 자동화를 진행했습니다.
워드프레스 게시 자동화를 위한 문서 분석 및 팀 내 세미나 진행 · 공유를 진행하며 전반적인 서비스 디자인 및 퍼블리싱 진행 · 블로그 관리 등의 글로벌 운영 이슈 대응을 진행했습니다.
사내 인프라 업무 효율성 향상을 위한 Zookeeper UI 개발
Zookeeper CLI를 통해 ZNode를 매번 개별로 조회하던 불편함을 해결하기 위해 클러스터 생성 및 삭제 · 노드 CRUD · 노드 메타데이터 조회와 같은 API를 통한 시각화 웹 서비스로 업무 효율성 제공했습니다.
MUI의 트리뷰를 통한 ZNode 시각화 및 커스텀 컴포넌트 개발을 통한 레이아웃 제공했으며, 초기 사용자의 권한에 따라 Jotai의 전역 상태를 통해 각 기능 별 권한 제어 기능 등 프로젝트의 전반적인 부분을 개발했습니다.
2023.04 - 2023.01
Front-End Developer *@JiranSoft, Component Development Team*
크로스에디터 (구 나모에디터) 리액트 라이브러리 개발
기존 에디터는 바닐라 자바스크립트로 이루어져있어, SPA를 사용하는 고객사들은 가이드 문서를 통해 타입 정의, 스크립트 로드와 같은 포팅 처리를 직접 진행해야하는 설치 과정의 불편함 발생했습니다. 이를 해결하기 위해 에디터 코어 소스코드를 폴더에 삽입하면 기타 포팅 작업 없이 타입스크립트 및 래핑 컴포넌트와 함께 사용할 수 있도록 리액트를 이용해 에디터 래핑 NPM 라이브러리를 개발하여 에디터 설치 과정을 간소화했습니다.
기존 기술 지원 팀에서 고객사에 직접 전달하던 SPA 에디터 연동 가이드 문서를 케이스 별 예제와 README.MD로 제공하여 에디터 접근성 향상 및 고객사 대응 효율화를 할 수 있었습니다.
웹 기반 한글 뷰어 개발
에디터 내에서 한글 뷰어의 편리성을 제공하기 위해 PDF 뷰어와 같은 한글 뷰어를 자체적으로 개발 진행했습니다. 한글 컨버터를 통해(외부 응용프로그램) 패칭된 태그 데이터들을 아이프레임을 통해 각 페이지 별 데이터를 핸들링하고, 스로틀링을 통해 스크롤 이벤트의 성능 최적화를 진행했습니다.
Webkit, Mozila 등 모던 브라우저의 크로스 브라우징 현상을 해결하고자 유저 에이전트 헤더를 활용해 환경 별 공통 함수 개발 ****과 조건별 분기처리를 통해 모든 모던 브라우저에 대응했습니다.
한글 뷰어의 인쇄 기능 실행 시, 확대 상태 그대로 인쇄되는 문제가 발생하여 이를 해결하고자 사용자가 인쇄 이벤트를 실행하기 전, 사용자가 설정해놓았던 배율 상태를 저장. 스타일 요소(scale)를 이용해 인쇄 시에는 기본 배율(100%)로 변경하고, 인쇄 후에는 저장된 상태 값을 활용하여 다시 확대 상태를 유지할 수 있도록 설계하여 뷰어 사용성을 개선했습니다.
크로스에디터 (구 나모에디터) 유지보수 및 신규 기능 추가
8,000여 고객사의 필드 이슈를 패치하고, 2주 간격의 스프린트를 통한 체계적인 개발 일정 관리를 경험했으며, 연구소 내부에서 업무 및 지라 이슈 티켓 구체화에 대한 레퍼런스로 선발되어 우수사원 수상을 했습니다.
모던 브라우저와 더불어 일부 고객사의 IE (Internet Explorer) 대응을 하고자 자바스크립트와 제이쿼리를 사용하여 userAgent 기반으로 크로스 브라우징 현상을 해결하고 브라우저 별 에디터의 캐럿 및 엘리먼트 렌더링에 관련된 동일한 동작을 구현했습니다.
2025 -
디프만(Depromeet) 16기
디프만 16기 총괄 리드
디프만 16기 선정 및 디프만 16기의 리더로 동아리를 이끌고 있습니다.
전체적인 개발 · 디자인 직군을 위한 컨퍼런스를 구성하고, 데브챗에서 경험했던 Developer Relations의 영감을 받아 프로그램의 전체적인 부분을 기획하고 있습니다.
데브챗(DevChat)
Developer Relations 커뮤니티 멤버
· Devloper Relation(DevRel)들의 대표적인 커뮤니티
· 테크기업 별 기술 동향 공유, DevRel 등과 관련된 기술 네트워킹 참여
· 주기 별 테크 기술 관련 밋업 참여