미리보기

기본 정보

이름

이지원

직업

프론트엔드 개발자

간단 소개

3년차 프론트엔드 개발자 이지원입니다. 초기 프로젝트에 합류해 기본적인 기능을 개발했으며, 현재는 데이터를 그래프로 시각화하는 기능을 주로 담당하고 있습니다. 비즈니스 가치를 만드는 일을 최우선으로 생각합니다. 필요한 기능의 목적을 이해하고 다양한 아이디어를 제안하며 빠르게 개발하는 역량을 키워 왔습니다. 또한, 프로젝트의 지연을 방지하기 위해서 구성원 간의 생각이 일치해야 한다고 생각해 적극적으로 커뮤니케이션하며 협업해왔습니다. 누구나 쉽게 이어서 개발할 수 있는 환경을 좋아합니다. 건설 회사 특성상 복잡한 도메인 지식이 얽혀있고 명확하지 않은 개발 요구사항이 내려올 때가 많습니다. 구현 기능에 대해 도입 배경, 구현 의도, 동작 원리, 앞으로의 로드맵을 정리해 처음 보는 팀원도 이해하기 쉽도록 했습니다. 프로젝트에서 중요한 것을 파악해 빠르게 개발하고, 동료들과 소통하며 더 나은 제품을 만들어가는데 장점이 있습니다.

경력

회사명

수성엔지니어링

직급 | 부서 | 근무 유형

사원 | 드론스퀘어 | 재직 중

근무 기간

2022.07. ~ 재직 중 (2년 8개월)

담당 업무

드론으로 촬영한 사진을 처리해 지도 위에 시각화하고, 해당 사진 데이터를 활용한 계산 결과를 제공하는 플랫폼입니다.

대용량 데이터 그래프 시각화 기능 개발
- API 분리를 통한 성능 최적화
  100개의 선분 위치를 지도에 표시하고, 각 선분의 높이 값을 그래프로 시각화하는 기능이 있었습니다. 표현해야 하는 선분이 많아지면서, API 호출 시간이 30초를 넘기게 되었고, 기존의 백엔드 구조(API Gateway, Lambda)에서 대용량 데이터를 처리할 때 Timeout 문제가 발생했습니다.
  - 문제 분석: 백엔드 팀과 의논한 결과, 모든 선분의 높이 값을 한 번에 계산하는 과정이 API 호출 속도를 저하시키는 주요 원인임을 확인했습니다.
  - api 분리 제안:
    그래프는 한 번에 하나만 보여줄 수 있으므로, 모든 데이터를 한 번에 계산할 필요가 없다는 점에서, 선분 위치를 지도에 표시하는 API와 높이 값을 계산하여 그래프로 보여주는 API를 분리하는 것을 제안했습니다.
  - 성능 90% 개선: API 호출 시간이 30초에서 3초로 단축되었습니다. 백엔드에서는 불필요한 데이터 처리가 줄어들었고, 전체 시스템의 성능이 90% 향상되었습니다.
- 최소한의 구조 변경으로 빠른 성능 개선
  선분의 길이가 길어지며 API Gateway 응답 길이를 넘어가는 케이스가 생겨 문제가 발생했습니다.
  - Pagenation 도입: 기능 하나 때문에 백엔드 구조를 바꾸기에는 시간과 비용적 측면에서 부담이 된다고 판단해 기존 아키텍처에서 해결할 수 있는 Pagenation 을 도입했습니다. 전체 데이터가 있어야 유의미한 데이터였기 때문에 여러 페이지의 데이터를 한 번에 요청하여 시간을 단축했습니다.
  - 데이터 병합: 한 그래프에서 사용해야 하는 데이터가 여러 페이지에 걸쳐 나타날 경우 이를 자동으로 병합하여 정확한 정보 제공을 보장했습니다.
  - 함수 분리를 통한 코드 최적화: 복잡한 도메인 로직을 관리하기 위해 관심사에 따라 함수를 분리함으로써 모듈의 재사용성을 30% 증가시켰습니다.
대용량 네트워크 요청 처리 최적화
3000장 이상의 사진을 업로드할 때 네트워크 요청이 증가해 브라우저가 멈추는 문제가 발생했습니다.
이를 해결하기 위해 300장씩 분할하여 업로드하는 비동기 및 배치 업로드 방식을 적용하여 에러 발생 비율을 1% 이하로 감소, 평균 처리 시간을 50% 단축시켰습니다.
- 로그 시스템 도입: 기능이 실제로 동작하는지에 대한 검증을 하기 위해 로그 시스템을 도입했습니다.
  업로드 시작과 끝에 이벤트 로그를 찍고 1시간 이내에 작업이 끝나지 않은 데이터가 차지하는 비율을 분석했습니다. 이 과정을 통해 샘플 사이즈를 300장으로 결정했습니다.
어드민 어플리케이션 기획/개발
운영팀이 개발팀에 요청하지 않고 데이터를 처리할 수 있었으면 좋겠다는 의견을 듣고
작업 처리 시간을 줄일 수 있을 것이라는 것에 공감해 어드민 어플리케이션을 기획하고 개발했습니다.
운영팀이 개발팀의 도움 없이도 데이터를 직접 처리할 수 있게 되었고,
전체 작업 처리 시간이 10% 감소되어 부서 전체의 생산성이 향상되었습니다.
드론 스퀘어의 기능 개발 및 모듈화
로그인 기능만 개발된 상태에서 입사하여, 플랫폼의 기본적인 기능을 개발했습니다.
개발 과정에서 반복적으로 사용될 수 있는 요소들을 공통 유틸리티(utils)와 훅(hooks)으로 모듈화했습니다.

[기술스택]

Next.js, Typescript, openlayers, aws amplify, recoil, react-query, emotion

프로젝트

프로젝트명

컬러온미

소속/기관명

비사이드

프로젝트 기간

2023.06. ~ 진행 중

프로젝트 내용

클라이언트와 진단자를 위한 퍼스널 컬러 진단 결과 공유 및 상품 추천 서비스입니다. (클라이언트 앱 : 기여도 100%)
1년 전 10일 해커톤으로 시작해 현재는 기획자, 디자이너, 프론트 개발자, 백엔드 개발자 8명이 모여 주말 프로젝트로 개발하고 있습니다. React Native Android 버전 출시 완료

[URL]

[토픽]

퍼스널 컬러 색상을 쉽게 볼 수 있는 컬러 휠 제작 • 라이브러리 배포
- 휠 크기, 두께, 초기 각도, 색상 추출 각도 옵션 선택 가능
- docusaurus 사용한 공식문서 제공
상품 등록 시 이미지에서 색상 추출, 색상 선택 기능
상품 검색, 필터링, 무한 스크롤 기능 구현
- URL 상태 저장: 검색 URL을 저장하거나 공유할 수 있게 되어 사용자 경험, 접근성 향상