채용공고 올리기

정주연님을 응원해보세요!

가벼운 티타임 좋아요

미리보기

직업
프론트엔드 개발자
이름
정주연
간단소개
디자이너 경력을 가진 2년차 프론트엔드 개발자입니다. 디자이너로 일한 경험 덕분에 Figma와 HTML/CSS를 이용하여 의도한 바를 시각화 하는 것에 능숙합니다. 또한 디자이너의 언어로 개발할 내용을 설명할 수 있으며, 1px 차이의 중요성을 이해합니다. 업무에 오너십을 가지고 필요한 일을 찾아내어 주어진 일 이상을 해내는 것을 좋아합니다. 사용자 가치를 만드는 것을 최우선으로 생각하며 기획부터 주도적으로 참여하여 작은 기능도 이유를 가지고 개발합니다. 좋은 프로덕트는 함께 만들어 나가는 것이라고 믿기에 이해관계자와 적극적이고 유연하게 소통합니다. 모두가 더 나은 환경에서 일할 수 있도록 업무 프로세스 개선과 팀 문화 구축에도 기여합니다. '서버 구동 시간 85%, Hot Module Replacement 대기 시간 100%, 배포 시간 30%'를 단축하는 프론트엔드 개발 환경의 생산성 개선을 진행했습니다. 팀원 간 교류를 늘리고 업무를 더 잘하기 위한 회고 문화 도입 및 운영, 업무 일정을 지키기 위한 데일리 미팅 도입, 빠른 사용자 피드백을 위한 마일스톤 단위 축소 등을 진행했습니다.

경력

회사명
(주)넥슨코리아
직책 • 부서
프론트엔드 개발자 • 탐지프로덕트개발팀
근무 기간 (근무 형태)
2023.02. - 재직 중
(1년 9개월 | 정규직)
담당 업무

프론트엔드 개발자, 백엔드 개발자, 데이터 엔지니어로 이루어진 팀에서 협력하며 게임 이상 탐지 프로덕트를 만들고 있습니다. 게임 내 이상 현상 탐지 데이터를 시각화하고, 데이터 분석을 위한 편의 기능을 제공하는 모니터링 대시보드 프로덕트를 담당하고 있습니다.

  • 게임이상탐지 모니터링 대시보드 및 백오피스 개발 및 운영
  • 대시보드 및 백오피스 전체 리뉴얼 작업 (UI/UX 기획 및 개발)
  • 반응형 대시보드 구현 (화면 크기와 구성 요소에 반응하여 최적의 레이아웃 제공)
  • 레거시 버전 마이그레이션 (개발 환경 생산성 개선 / Vue.js, 번들러, Node.js)
  • 비즈니스 로직 분리 및 유닛 테스트 코드 작성
  • 팀 회고 도입 및 운영 (팀원 간 교류 증진 및 업무 개선을 목표로 진행)

프로젝트

프로젝트명
게임이상탐지 모니터링 대시보드 리뉴얼
소속/기관명
(주)넥슨코리아
프로젝트 기간
2023.06. - 2023.11.
(6개월)
프로젝트 설명

게임이상탐지 데이터를 탐색할 수 있는 대시보드를 리뉴얼하고 신규 기능을 개발한 프로젝트입니다. 게임마다 많게는 100개 이상의 탐지 모델이 있어서 사용자가 탐색에 어려움을 겪고 있었고, '검색 기능' 및 '탐지 모델 모아서 보기 기능'을 개발하여 탐지 생산성을 개선했습니다. 실 내에서 새로운 대시보드를 활용해서 게임 내 어뷰저를 잡아 수십억 가치를 확보하는 성과가 있었습니다.

  • 새로운 도메인 설계에 맞는 대시보드 UI/UX 기획 및 개발
  • 도메인에 최적화된 형태로 시계열 차트 및 랭킹 차트 제공 (Highcharts를 이용하여 커스텀 차트 구현)
  • 사용자가 원하는 여러개의 탐지 모델 대시보드를 하나의 대시보드 뷰로 모아서 볼 수 있는 기능을 개발
  • 사용자간 도메인 지식을 공유할 수 있도록 모델 메모 및 리포트 발행 기능 개발
  • 비즈니스 로직을 컴포넌트에서 분리하여 vuex store에서 관리
프로젝트명
반응형 대시보드 구현
소속/기관명
(주)넥슨코리아
프로젝트 기간
2024.01. - 2024.01.
(1개월)
프로젝트 설명

사용자의 화면 크기나 탐지 모델의 구성 요소에 상관없이 UI가 최적의 레이아웃으로 나타나도록 반응형을 구현한 프로젝트입니다. 탐지 모델 지표에는 '시계열 차트, 랭킹 차트, 탐지 모델 상세 정보, 모델 상세 조건 변경 및 조회 기능' 등이 포함되어 있는데, 사용자 기기의 해상도가 낮은 경우 UI가 영역을 벗어나거나 겹치는 문제가 발생했고 시계열 차트가 충분한 높이를 확보하지 못해서 데이터 가독성이 떨어지는 문제가 있었습니다. 반응형 작업을 통해 낮은 해상도와 더불어서 사용자가 가로나 세로 창 크기를 줄여서 사용하는 경우에도 대응할 수 있도록 했습니다.

  • 다양한 화면 크기에 맞게 재배치되는 유연한 레이아웃 제공 (사이드바-탐지 모델 지표 간, 지표 내부 UI 간에 Grid template 및 media query를 이용하여 반응형으로 동작하게 구현)
  • 컨테이너 크기 변화를 감지하여 차트 리렌더링 (ResizeObserver 이용)
  • vuetify 및 highcharts 커스텀시 css 명시도를 고려한 스타일 작성
프로젝트명
레거시 버전 마이그레이션
소속/기관명
(주)넥슨코리아
프로젝트 기간
2023.12. - 2023.12.
(1개월)
프로젝트 설명

오랫동안 운영된 프로젝트의 레거시 버전으로 인해 발생하는 프론트엔드 생산성 저하를 개선한 프로젝트입니다. 서버 구동 시간과 수많은 Hot Module Replacement 대기 시간, 배포 시간으로 인해 작은 작업에도 수십분 씩 낭비되는 문제가 있었고 마이그레이션을 통해 이를 해결했습니다.

  • Vue.js를 2.7로 마이그레이션 (Vue3의 기능이 백포팅된 버전으로 점진적 마이그레이션 가능)
  • 번들러를 Webpack -> Vite로 마이그레이션 (서버 구동 시간 85%, Hot Module Replacement 시간 100% 단축)
  • 배포 환경의 Node.js 버전을 16 -> 20으로 업그레이드 (배포 시간 30% 단축)
프로젝트명
게임이상탐지 백오피스 리뉴얼
소속/기관명
(주)넥슨코리아
프로젝트 기간
2023.03. - 2023.05.
(3개월)
프로젝트 설명

게임이상탐지를 위한 탐지 모델을 관리하는 백오피스를 리뉴얼한 프로젝트입니다. 게임이상탐지 도메인이 진입장벽을 낮추기 위해 새로 설계되었고, 변경된 설계에 맞는 api만 교체하는 것이 주어진 업무였으나 새로운 설계에 맞는 UI를 직접 제안하여 전체적으로 개선하는데 기여했습니다.

  • 핵심 기능인 '게임이상탐지 신규 모델 생성' 절차를 4단계에서 1단계로 개편 (작업 소요시간 70% 절감)
  • 복잡한 모델 규칙을 쉽게 적용할 수 있도록 규칙 선택 자동화 및 유효성 검사 구현
  • 불필요한 api 요청을 제거하여 메인 페이지 로딩 시간 50% 단축

교육

소속/기관
네이버 커넥트재단 부스트캠프
종류 | 전공명/전공계열
사설 교육 | 웹·모바일 7기
재학 기간 (재학 상태)
2022.07. - 2022.12. (졸업)
소속/기관
성신여자대학교
종류 | 전공명/전공계열
대학교(학사) | 산업디자인과
재학 기간 (재학 상태)
2013.03. - 2018.02. (졸업)

포트폴리오

타입
URL
깃허브
link
https://github.com/jayjeong8
미디엄
link
https://medium.com/@jayjeong8

기술 스택

기술 스택
JavaScript
TypeScript
HTML/CSS
Vue.js
React
Git
Figma
Vuex
pinia
댓글