프론트엔드 개발자

김윤지

단순한 UI 구현을 벗어나 UX와 DX를 함께 고민하고, 팀과 함께 성장하는 프론트엔드 개발자 김윤지입니다.

책임감

협업 지향

커뮤니케이션

김윤지_이력서.pdf

김윤지_경력기술서.pdf

이력서

<ul><li>링크 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.npmjs.com/package/react-daum-postcode">react-daum-postcode</a></li><li>다음 우편번호 서비스를 React 환경에서 사용하기 쉽게 컴포넌트화 한 오픈소스 라이브러리입니다.</li><li>현재 이슈 대응,유지 보수 등을 하며 메인테이너로 활동중입니다.</li></ul>

react-daum-postcode

‘어떤 상상도 바로 그릴 수 있게’를 추구하며 3차원 스케치북 서비스 ‘Feather’를 개발하는 스타트업입니다. 엔지니어로 합류하여 주로 서비스의 프론트엔드를 개발하였고, 상황에 따라 백엔드 개발도 진행했습니다. 팀 내부에서 일정 관리에 대한 필요성이 생겨, 스크럼을 도입하고 스프린트를 진행하며 제품 개발에 대한 프로세스를 정립하였습니다.<h4>스크럼 프로세스 도입 및 진행</h4><ul><li>제품의 마일스톤 기반 백로그 구성 및 스프린트 진행<ul><li>가시적인 일정과 정리된 작업을 통해 명확한 목표를 제공하여 팀의 집중도를 향상</li><li>작업 단위를 세분화하고 리소스를 관리하여 작업 간 충돌과 병목을 최소화</li></ul></li><li>다른 팀과의 소통 및 협업 진행<ul><li>문서화된 기록을 통해 다른 팀과의 소통을 개선하여 원활한 협업을 진행</li><li>작업 결과와 배포 전 모습을 지속적으로 확인할 수 있게 하여 제품의 상태를 명확히 파악할 수 있도록 지원</li></ul></li></ul><h4>3D Sketchbook Feather</h4>react, typescript, zustand, three.js, styled-components<ul><li>어플리케이션 진입 시 마지막 상태 복원 과정 최적화<ul><li>상태를 판단하는 로직을 통합하고 prefetch를 통해 목표 페이지의 리소스를 사전 로딩</li><li>화면 전환을 최소화하여 복원 과정에 대한 UX를 개선하고 복원 시간을 약 30% 단축</li></ul></li><li>드로잉 데이터 저장 방식 마이그레이션<ul><li>IndexedDB를 활용한 로컬 우선 저장 방식으로 일시적인 오프라인일 때에도 작업 지원 및 데이터 유실을 방지</li><li>데이터 업로드 시 델타 압축을 적용하여 벡터 데이터의 크기를 약 60% 감소</li><li>비정상적 종료 시에도 작업을 보존하고 접속 시 복원할 수 있는 기능을 구현하여 서비스 안정성 향상</li></ul></li><li>그리기 툴의 속성 제어 UI의 사용성 개선<ul><li>좌측 제어 패널을 항상 노출하는 대신 내부 아이템을 수직으로 배치해 화면 가림을 최소화하고 즉각적인 속성 제어 기능을 제공</li><li>직관적이고 세밀한 조작 경험을 위해 제스처 인터랙션과 시각적인 피드백, 정밀 조정 기능 추가</li></ul></li><li>프로젝트 아키텍처의 문제 해결을 위한 점진적 리팩토링<ul><li>높은 결합도 등의 구조적 문제 해결을 위해 프로젝트에 적합한 아키텍처를 지속적으로 검증</li><li>AR 구현 시 신규 구조 적용을 시작으로 다양한 시도를 하며 점진적으로 리팩토링</li><li>React, Zustand 도입으로 컴포넌트 기반 구조와 상태 관리를 적용</li></ul></li><li>프로젝트의 모듈 시스템 정리<ul><li>팀의 선호 문법을 유지하면서 프로젝트와 ESLint, Jest의 파싱 옵션, esbuild의 결과물을 CJS로 통일하여 일관된 설정을 적용</li></ul></li><li>서비스 공지사항 풀스택 개발<ul><li>이미지 삽입을 위한 에디터 라이브러리 확장과 백오피스 공지사항 CRUD 구현을 통해 담당자의 작업 효율을 개선</li><li>이미지를 포함한 복수 개의 공지사항 출력과 슬라이드 탐색을 통해 사용자에게 다양한 정보를 제공</li></ul></li><li>제스처 이벤트 모듈화 작업 진행<ul><li>포인터 이벤트를 활용해 조건에 따라 펜과 손가락의 제스처를 구분하고 커스텀 이벤트로 정의하여 제스처 이벤트 시스템 구현</li><li>상세한 문서화와 직관적인 구조로 개발자가 쉽게 이해하고 사용할 수 있도록 모듈화</li></ul></li></ul>

블록체인 관련 기술을 보유한 스타트업으로, 프론트엔드 개발자로 합류하였습니다. 입사 초기에 거래소의 신규 기능 개발과 유지보수를 진행하였습니다. 이후 회사의 방향성에 의해 투자 조합 관리 플랫폼을 개발하였습니다. 좋은 기회가 생겨, 작은 규모의 팀 리드를 경험하였습니다.<h4>프론트엔드 팀 리드 수행</h4><ul><li>프론트엔드 개발 문화 형성 및 기술 스택 확장<ul><li>Typescript, AWS Amplify 등 신규 기술 도입</li><li>프로젝트의 아키텍처 고민 등 기술적 지점에 대한 공유와 논의를 통해 프로젝트 이해도를 향상</li><li>사내 npm registry 구성을 통한 공용 로직 재사용 환경 구성</li></ul></li><li>업무 프로세스 개선<ul><li>담당자가 개발 논의에 참여하도록 하여 협업 환경을 개선</li><li>작업을 세분화하고 우선순위를 정리하여 작업의 흐름을 최적화</li></ul></li><li>브랜치 전략 구성 및 배포 관리<ul><li>Develop-Staging-Release 전략을 구성하고 적용</li><li>AWS Amplify를 통해 프로젝트의 배포를 자동화</li></ul></li></ul><h4>투자 조합 관리 플랫폼 RedFi</h4>react, typescript, recoil, styled-components<ul><li>HTML 기반 PDF 전자 서명 시스템 프론트엔드 개발<ul><li>전자 서명에 대한 기능 요구 사항과 제약 사항을 분석하여 빠르게 구현 가능한 방식을 제안하고 진행</li><li>계약서의 문법과 스타일을 HTML/CSS 로 정의하고, 화이트리스트 기반 필터링으로 XSS 방지</li><li>커스텀 태그를 활용한 입력을 설계하고 구현하여 서명 데이터 처리를 구조화</li></ul></li><li>SPA 환경에서의 신규 버전 배포 시 사용자 안내 방법 개발<ul><li>번들 엔트리포인트의 해시값 비교를 통해 신규 버전 배포 확인 로직을 구현</li><li>사용자 행동 기반의 버전 체크 로직 적용(페이지 체류 2시간, API 호출과 주소 변경 3분 기준)</li></ul></li><li>로딩 표현 세분화를 통한 사용자 경험 개선<ul><li>스켈레톤 UI와 기본 여백으로 컨텐츠의 공간을 미리 확보하여 레이아웃 시프트를 최소화</li><li>상황별 다양한 로딩 UI를 적용해 사용자에게 예측 가능한 UI를 제공하고 로딩에 대한 경험을 개선</li></ul></li></ul><h4>암호화폐 거래소</h4>react, redux, redux-saga, sass, styled-components<ul><li>레거시 코드 리팩토링 및 성능 최적화<ul><li>레거시 라이프사이클 메서드 componentWillMount, componentWillReceiveProps를 최신 getDerivedStateFromProps 메서드로 교체</li><li>Redux 상태의 구조와 구독하는 방식을 정리하여 불필요한 렌더링 최소화</li><li>중복 코드를 정리하고 로직의 수월한 재사용을 위해 관리자 페이지의 코드를 Hook 기반으로 리팩토링</li></ul></li><li>첫 초기화 과정에서 발생하는 병목 현상 제거<ul><li>데이터 초기화 과정에서 데이터 간 의존성으로 인한 병목 현상을 식별하고 최적화</li><li>의존 관계를 분석하여 불필요한 순차 처리 구간을 redux-saga를 활용하여 비동기 처리로 구성</li><li>비동기 처리 및 순서 재구성을 통해 모든 데이터가 출력되는 시간을 약 30% 단축</li></ul></li></ul>