미리보기
기본 정보

단순한 UI 구현을 벗어나 UX와 DX를 함께 고민하고, 팀과 함께 성장하는 프론트엔드 개발자 김윤지입니다.
자기소개
5년 차 프론트엔드 개발자로, React와 Typescript를 기반으로 웹 서비스를 개발해 왔습니다. 직관적인 인터페이스와 사용자 경험에 집중한 서비스 개발을 추구합니다. 또한, 개발자 경험을 고려한 코드 작성과 확장 가능한 아키텍처에 대해 끊임없이 고민하고 있습니다. 지속적인 성장을 위해 노력하고 있으며, 최근에는 Next.js와 TailwindCSS를 학습하고 있습니다. 개발 활동에 기여하는 것에 흥미가 있어, 오픈 소스 라이브러리 ‘react-daum-postcode’의 메인테이너로 활동하고 있습니다.
서비스는 함께 만드는 것으로, 좋은 서비스 개발은 원활한 커뮤니케이션이 중요하다고 생각합니다. 더 나은 결과를 만들어가는 과정이라 여겨 문제 해결과 개발을 위해 적극적인 소통을 지향합니다. 이와 함께, 서로가 목표에 집중하며 효율적으로 협업하고 함께 성장할 수 있는 환경을 조성하는 것에 관심이 있습니다. 작은 팀의 리드를 맡게 되어 팀의 성장과 효율적인 협업 방법을 고민하며 개발 문화를 조성한 경험이 있습니다. 스크럼을 도입하고 스프린트를 진행하여 개발 프로세스를 개선하고 체계적인 협업 구조를 만들기도 하였습니다.
‘의미 없는 코드는 없다’는 마음가짐으로 코드를 작성하려 하고, 작성한 코드가 사용자에게 가치를 제공할 때 큰 보람을 느낍니다. 이를 바탕으로 더 좋은 개발자로 성장하여 더 많은 가치를 전달할 수 있도록 계속해서 경험하고 노력하고 있습니다.
기술 스택
React, TypeScript, Redux, zustand, styled-components
경력
Sketchsoft
Engineer | Product team
2021.10. ~ 2024.06. (2년 9개월)
‘어떤 상상도 바로 그릴 수 있게’를 추구하며 3차원 스케치북 서비스 ‘Feather’를 개발하는 스타트업입니다. 엔지니어로 합류하여 주로 서비스의 프론트엔드를 개발하였고, 상황에 따라 백엔드 개발도 진행했습니다. 팀 내부에서 일정 관리에 대한 필요성이 생겨, 스크럼을 도입하고 스프린트를 진행하며 제품 개발에 대한 프로세스를 정립하였습니다.
스크럼 프로세스 도입 및 진행
제품의 마일스톤 기반 백로그 구성 및 스프린트 진행
가시적인 일정과 정리된 작업을 통해 명확한 목표를 제공하여 팀의 집중도를 향상
작업 단위를 세분화하고 리소스를 관리하여 작업 간 충돌과 병목을 최소화
다른 팀과의 소통 및 협업 진행
문서화된 기록을 통해 다른 팀과의 소통을 개선하여 원활한 협업을 진행
작업 결과와 배포 전 모습을 지속적으로 확인할 수 있게 하여 제품의 상태를 명확히 파악할 수 있도록 지원
3D Sketchbook Feather
react, typescript, zustand, three.js, styled-components
어플리케이션 진입 시 마지막 상태 복원 과정 최적화
상태를 판단하는 로직을 통합하고 prefetch를 통해 목표 페이지의 리소스를 사전 로딩
화면 전환을 최소화하여 복원 과정에 대한 UX를 개선하고 복원 시간을 약 30% 단축
드로잉 데이터 저장 방식 마이그레이션
IndexedDB를 활용한 로컬 우선 저장 방식으로 일시적인 오프라인일 때에도 작업 지원 및 데이터 유실을 방지
데이터 업로드 시 델타 압축을 적용하여 벡터 데이터의 크기를 약 60% 감소
비정상적 종료 시에도 작업을 보존하고 접속 시 복원할 수 있는 기능을 구현하여 서비스 안정성 향상
그리기 툴의 속성 제어 UI의 사용성 개선
좌측 제어 패널을 항상 노출하는 대신 내부 아이템을 수직으로 배치해 화면 가림을 최소화하고 즉각적인 속성 제어 기능을 제공
직관적이고 세밀한 조작 경험을 위해 제스처 인터랙션과 시각적인 피드백, 정밀 조정 기능 추가
프로젝트 아키텍처의 문제 해결을 위한 점진적 리팩토링
높은 결합도 등의 구조적 문제 해결을 위해 프로젝트에 적합한 아키텍처를 지속적으로 검증
AR 구현 시 신규 구조 적용을 시작으로 다양한 시도를 하며 점진적으로 리팩토링
React, Zustand 도입으로 컴포넌트 기반 구조와 상태 관리를 적용
프로젝트의 모듈 시스템 정리
팀의 선호 문법을 유지하면서 프로젝트와 ESLint, Jest의 파싱 옵션, esbuild의 결과물을 CJS로 통일하여 일관된 설정을 적용
서비스 공지사항 풀스택 개발
이미지 삽입을 위한 에디터 라이브러리 확장과 백오피스 공지사항 CRUD 구현을 통해 담당자의 작업 효율을 개선
이미지를 포함한 복수 개의 공지사항 출력과 슬라이드 탐색을 통해 사용자에게 다양한 정보를 제공
제스처 이벤트 모듈화 작업 진행
포인터 이벤트를 활용해 조건에 따라 펜과 손가락의 제스처를 구분하고 커스텀 이벤트로 정의하여 제스처 이벤트 시스템 구현
상세한 문서화와 직관적인 구조로 개발자가 쉽게 이해하고 사용할 수 있도록 모듈화
베이스트레이드
Frontend team lead | 개발부
2019.10. ~ 2021.10. (2년 1개월)
블록체인 관련 기술을 보유한 스타트업으로, 프론트엔드 개발자로 합류하였습니다. 입사 초기에 거래소의 신규 기능 개발과 유지보수를 진행하였습니다. 이후 회사의 방향성에 의해 투자 조합 관리 플랫폼을 개발하였습니다. 좋은 기회가 생겨, 작은 규모의 팀 리드를 경험하였습니다.
프론트엔드 팀 리드 수행
프론트엔드 개발 문화 형성 및 기술 스택 확장
Typescript, AWS Amplify 등 신규 기술 도입
프로젝트의 아키텍처 고민 등 기술적 지점에 대한 공유와 논의를 통해 프로젝트 이해도를 향상
사내 npm registry 구성을 통한 공용 로직 재사용 환경 구성
업무 프로세스 개선
담당자가 개발 논의에 참여하도록 하여 협업 환경을 개선
작업을 세분화하고 우선순위를 정리하여 작업의 흐름을 최적화
브랜치 전략 구성 및 배포 관리
Develop-Staging-Release 전략을 구성하고 적용
AWS Amplify를 통해 프로젝트의 배포를 자동화
투자 조합 관리 플랫폼 RedFi
react, typescript, recoil, styled-components
HTML 기반 PDF 전자 서명 시스템 프론트엔드 개발
전자 서명에 대한 기능 요구 사항과 제약 사항을 분석하여 빠르게 구현 가능한 방식을 제안하고 진행
계약서의 문법과 스타일을 HTML/CSS 로 정의하고, 화이트리스트 기반 필터링으로 XSS 방지
커스텀 태그를 활용한 입력을 설계하고 구현하여 서명 데이터 처리를 구조화
SPA 환경에서의 신규 버전 배포 시 사용자 안내 방법 개발
번들 엔트리포인트의 해시값 비교를 통해 신규 버전 배포 확인 로직을 구현
사용자 행동 기반의 버전 체크 로직 적용(페이지 체류 2시간, API 호출과 주소 변경 3분 기준)
로딩 표현 세분화를 통한 사용자 경험 개선
스켈레톤 UI와 기본 여백으로 컨텐츠의 공간을 미리 확보하여 레이아웃 시프트를 최소화
상황별 다양한 로딩 UI를 적용해 사용자에게 예측 가능한 UI를 제공하고 로딩에 대한 경험을 개선
암호화폐 거래소
react, redux, redux-saga, sass, styled-components
레거시 코드 리팩토링 및 성능 최적화
레거시 라이프사이클 메서드 componentWillMount, componentWillReceiveProps를 최신 getDerivedStateFromProps 메서드로 교체
Redux 상태의 구조와 구독하는 방식을 정리하여 불필요한 렌더링 최소화
중복 코드를 정리하고 로직의 수월한 재사용을 위해 관리자 페이지의 코드를 Hook 기반으로 리팩토링
첫 초기화 과정에서 발생하는 병목 현상 제거
데이터 초기화 과정에서 데이터 간 의존성으로 인한 병목 현상을 식별하고 최적화
의존 관계를 분석하여 불필요한 순차 처리 구간을 redux-saga를 활용하여 비동기 처리로 구성
비동기 처리 및 순서 재구성을 통해 모든 데이터가 출력되는 시간을 약 30% 단축
프로젝트
react-daum-postcode
개인
2021.08. ~ 진행 중
링크 : react-daum-postcode
다음 우편번호 서비스를 React 환경에서 사용하기 쉽게 컴포넌트화 한 오픈소스 라이브러리입니다.
현재 이슈 대응,유지 보수 등을 하며 메인테이너로 활동중입니다.
교육
동서대학교
대학교(학사) | 소프트웨어공학전공
2012.03. ~ 2019.02. | 졸업