정영길

경력 요약

컴퓨터공학 전공 후 삼성 청년 소프트웨어 아카데미(SSAFY)에서 애자일 협업과 실무 개발 기본기를 다졌고, WPF 개발을 시작으로 웹(React/Next)·앱(React Native)까지 확장하며 4년 8개월간 프로덕션 서비스의 핵심 UI 플로우 안정화와 성능 최적화로 전환/체감속도를 개선해 왔습니다.

WPF 환경에서는 실시간 데이터 수신 기반 모니터링·시각화 UI를, 웹/앱에서는 사용자 흐름·상태(로딩/성공/실패)·전환 품질을 기준으로 직관적이고 일관된 경험을 구현해 왔습니다.

문제 해결과 근본 원인 분석에 집중합니다. 사용자 입력 유실 문제를 "상태 관리 전략" 관점에서 접근해 화면 상태와 서버 상태를 분리하고, 요청 작성 완료율을 안정화했습니다. 렌더링 성능 이슈는 페이지 목적과 데이터 변경 주기를 분석해 SSG/SSR/ISR/CSR을 전략적으로 선택 적용했습니다.

아키텍처와 설계 사고를 중시합니다. React Query로 서버 상태를 관리하고 Zustand는 UI 핵심 상태만 최소화해 데이터 동기화 이슈를 사전에 방지합니다. 복잡한 비즈니스 로직은 Custom Hook으로 추상화해 컴포넌트는 표현에만 집중하도록 설계합니다.

협업과 문서화를 통해 팀 생산성을 높입니다. Swagger(OpenAPI)로 API 계약을 명확히 하고, Storybook으로 UI 컴포넌트를 문서화해 디자이너·기획자와의 커뮤니케이션 비용을 절감했습니다. 백엔드 사이드 프로젝트(NestJS, Prisma)를 통해 풀스택 관점에서 API 설계와 데이터 모델링을 이해하고 있습니다.

기술적 역량

Core: Language & Framework

TypeScript JavaScript (ES6+) React Next.js

Core: State & UI

React Query Zustand Tailwind CSS Storybook Styled-components

Sub

React Native WPF

Tools

Cursor AI Jira/Slack/Git Figma

코드 스타일 및 철학

Separation of Concerns

관심사의 분리와 추상화 레벨

복잡한 비즈니스 로직은 Custom Hooks로 추상화하여 컴포넌트에는 '무엇을 보여줄지'만 남깁니다. UI 컴포넌트는 오직 데이터의 표현과 인터랙션에만 집중합니다.

Server State Management

상태 관리의 전략적 선택

API 데이터는 React Query를 통해 서버 상태로 관리하고, UI의 핵심 상태만 Zustand로 최소화하여 데이터 동기화 이슈를 사전에 방지합니다.

Design System

디자인 시스템과 생산성

반복되는 UI 패턴은 조기에 컴포넌트화하여 Storybook으로 문서화합니다. 디자이너와의 커뮤니케이션 비용을 줄이고 개발 리드타임을 단축합니다.

UI Responsiveness

체감 속도 중심의 UI/UX 설계

로딩 단계에서 스켈레톤/고정 높이로 레이아웃 시프트를 차단하고, 인터랙션으로 화면 전환과 애니메이션이 자연스럽게 이어지도록 설계합니다.

AI-Powered Productivity

AI 도구를 활용한 반복 작업 최소화

Figma 시안을 단순 구현 대상으로 보기보다 컴포넌트 구조, 상태 변화, 재사용 가능성을 먼저 분석한 뒤 마크업과 로직을 설계합니다.
이 과정에서 Cursor와 같은 AI 도구를 보조적으로 활용해 반복적인 스타일링·레이아웃 코드를 빠르게 정리하고, 핵심 비즈니스 로직과 상태 관리 설계에 더 많은 시간을 할애합니다.

경력 사항

팀패스 (Team Pass)

사업 종료

Frontend Developer

2025.04 - 2025.12 (9개월)

화장품 제조의 시작과 끝을 함께하는 뷰티 플랫폼 '브래닛' 웹 개발
브래닛 서비스의 프론트엔드 전 범위를 수행. 1~2주 단위 스프린트 배포 및 데이터 기반 문제 정의/개선.

React TypeScript React Query Zustand Tailwind CSS Storybook

AI 어시스턴트(Cursor) 기반 프로토타이핑

반복 레이아웃/스타일링 초안을 빠르게 생성하고 인터랙션/상태 케이스 중심으로 정교화
동일 유형 화면 반복 구현 기준 마크업 소요 50% 절감

🚀 Impact: AI 기반 초안 생성 + 상태 케이스 중심 정교화로 개발 사이클을 단축

UI 표준화 및 Storybook 기반 공통 컴포넌트 정비(레거시 점진 전환)

버튼/입력/팝업 등 컴포넌트를 variant/size/disabled/loading 규격으로 표준화하고 문서화
“전면 교체” 대신 신규/수정 화면부터 우선 적용해 전환 리스크를 줄이고 점진 확산

🚀 Impact: UI 일관성/재사용성 향상으로 유지보수 부담 감소 및 신규 화면 개발 속도 향상

UI State / Server State 분리로 상태 관리 책임 정립

React Query로 서버 상태 캐싱/동기화를 단일 책임으로 관리하고 UI 상태는 화면 단위로 국소화
비즈니스 로직을 Custom Hook으로 분리해 컴포넌트는 표현/상호작용에 집중하도록 구조화

🚀 Impact: 버그 원인 범위를 축소하고 변경 대응/운영 이슈 처리 비용을 절감

레이아웃 시프트 최소화 및 전환 UX 안정화

Skeleton/Placeholder 영역을 고정하고 높이·간격을 선확보해 렌더링 전후 레이아웃 변동을 최소화
모달/탭/리스트 갱신 등 전환 구간 인터랙션을 기준화해 UX 회귀를 줄이고 재사용 가능한 패턴으로 정리

🚀 Impact: 핵심 동선에서의 이탈/오조작 리스크를 줄이고 체감 안정성을 향상

구독 유료화 결제 연동(E2E, FE 관점)

구독 상품/상태 조회 → 결제 팝업(토스페이먼츠) 호출 → 결과 처리 → 서버 동기화 흐름을 연결
성공/실패/취소 등 결제 결과 케이스에 따른 UX와 구독 상태 기반 접근 제어/노출 정책을 정리

🚀 Impact: 유료화 도입 이후 결제 흐름의 예외 케이스까지 포함한 운영 안정성을 확보

케이브먼트 (Cavement)

사업 종료

Frontend Developer

2023.11 - 2025.04 (1년 6개월)

남성 미용의료 플랫폼 '미남이오' 앱/웹과 제모 탐색 서비스 '제모데이' 웹 개발
렌더링 전략(SSG/SSR/CSR/ISR) 분리, 지도 UX 최적화, 운영 대응 구조(CodePush)와 결제(PG) 연동 수행.

Next.js React Native TypeScript

서비스 성능 개선 및 캐싱/렌더링 비용 최적화

페이지 목적(SEO/개인화)·데이터 변경 주기를 기준으로 정적 성격의 화면은 SSG/ISR로 운영 부담을 줄이고 응답 속도를 안정화 개인화·권한 기반 영역은 SSR로 구현
자주 이동하는 페이지는 Next Link prefetch로 선로딩하여 클릭 후 대기 체감을 축소
이미지가 많은 화면은 레이지 로딩으로 초기 로딩 부담을 분산
React Query 캐싱으로 동일 데이터의 중복 호출을 억제하고, 리페치 시점/규칙을 정리해 핵심 전환 구간의 불필요한 네트워크/리렌더를 최소화

🚀 Impact: 초기 로딩 지연을 개선하고 중복 요청을 줄여 서버 부하를 완화

병원 지도 화면 렌더링 최적화 및 사용자 경험 개선

지도 이동/줌 이벤트마다 자동 재조회가 발생해 깜빡임과 마커 중복 렌더링 문제가 발생
dragend/zoom_changed 이후 디바운스 처리 및 “검색” 트리거 기반으로 요청 타이밍을 통제하여 불필요한 재요청을 감소
마커는 diff 기반으로 업데이트(기존 마커 재사용/필요 마커만 추가·제거)하고, 지도 렌더링 로직을 모듈화해 화면 튐 현상을 제거

🚀 Impact: 지도 화면 반응성 개선 및 불필요한 API 호출 감소, 사용자 지도 이용 만족도 향상

앱 업데이트 및 장애 대응을 고려한 유지보수 구조 개선(RN)

WebView 구조 적용으로 주요 화면 웹 관리
CodePush 도입으로 즉시 반영 환경 구축

🚀 Impact: 장애 발생 시 1일 이내 대응 가능, 콘텐츠·기능 수정 배포 주기 단축

토스페이먼츠 결제(PG) E2E 연동(FE 관점)

결제 시작(prepare) → 결제 위젯 실행 → 결과 수신(성공/실패) → 서버 confirm 호출 → 완료/후속 플로우 동기화
결제 중단/실패/재시도 등 예외 케이스에 대한 UX 및 상태 동기화 흐름을 정리

🚀 Impact: 결제 예외 케이스를 포함한 안정적인 결제 플로우 운영 기반을 확보

펫피플 (Pet People)

조직 개편

Frontend Developer

2022.04 - 2023.03 (1년)

반려동물 플랫폼 '와요/펫플래닛'의 앱 및 내부 어드민 서비스를 개발.

React React Native JavaScript

훈련사 일지 기능 개발(RN)

훈련사 일지 작성/조회 플로우를 React Native에서 구현(화면 구성, 상태 관리, 입력/검증, API 연동 등).
운영/사용자 관점에서 작성 동선(입력 저장/수정 확인)의 UX를 안정화.

🚀 Impact: 훈련 기록 관리 기능의 사용성 확보 및 앱 기능 범위 확장

반려동물 동반 호텔 기능 개발(RN)

반려동물 동반 가능 호텔 탐색/상세, 예약/문의 관련 화면 및 사용자 흐름을 React Native에서 구현.
리스트/상세 화면 간 데이터 전달, 필터/정렬 등 탐색 UX를 개선.

🚀 Impact: 신규 카테고리(동반 호텔) 기능을 앱 내로 확장하여 사용자 탐색 경험 강화

휴라(Hura)

응용프로그래머

2020.11 - 2022.04 (1년 5개월)

전파 탐지 프로그램(EdgeRF) 프로그램 개발

WPF

전파 탐지 프로그램(EdgeRF) 프로그램 개발(WPF)

FPGA장비로부터 전달되는 전파 데이터를 애플리케이션에서 수신하여 화면에 표시하는 모니터링 UI 구현(WPF/C#).
운영자가 데이터를 빠르게 해석할 수 있도록 시각화 중심의 화면 구성(대시보드/그래프/상태 표시 등) 및 사용자 흐름 정리.

🚀 Impact: 실시간/준실시간 모니터링 환경에서 운영 관점의 가시성과 데이터 해석 속도 향상

사이드 프로젝트

프로젝트 태그

MVP 완료 최소 기능 제품을 완성해 실제 사용 가능한 프로젝트
진행중 개발·기능 추가가 계속 진행 중인 프로젝트
보류 우선순위·방향 조정 등으로 개발을 보류한 프로젝트

Sprintlog

MVP 완료

2026.03 (3일)

Live Demo Source Code

OKR 관리와 일일 업무기록을 한 곳에서 관리하는 생산성 앱

React 19 TypeScript Tailwind CSS 4 React Router 7 Supabase (RLS · Auth)

JobLens

MVP 완료

2026.02 (9일)

Source Code

사람인·잡코리아 채용공고를 수집하고, 스코어링 엔진으로 추천/보류/제외를 판단한 뒤 이메일 알림을 발송하는 개인용 의사결정 지원 시스템

Python FastAPI BeautifulSoup · lxml pytesseract (OCR) Spring Boot PostgreSQL Docker Compose

TubeSync

보류

2026.02 (2일)

Source Code

실시간으로 유튜브 영상을 함께 보면서 채팅/목록 관리를 할 수 있는 실시간 워치파티 서비스

React 18 Vite 5 TypeScript Tailwind CSS 3 Socket.IO NestJS Docker Compose

Wardrobe

MVP 완료

2026.01 (4일)

Source Code

옷을 등록하고, 코디를 만들고, 세탁을 추적하는 모든 것이 한 곳에서 할 수 있는 서비스

React 18 Vite 5 TypeScript Tailwind CSS 3 Recharts Supabase Auth Supabase Storage

RMancer

MVP 완료

2026.01 (9일)

Source Code

인바디·1RM·운동목표를 바탕으로 사용자에게 최적화된 운동 루틴을 추천해주는 서비스

Next.js 16 Next Auth 5 Tailwind CSS 4 TanStack Query OpenAPI-TS NestJS 11 Prisma 6 PostgreSQL JWT · Swagger Docker Compose

경력 요약

기술적 역량

Core: Language & Framework

Core: State & UI

Sub

Tools

코드 스타일 및 철학

관심사의 분리와 추상화 레벨

상태 관리의 전략적 선택

디자인 시스템과 생산성

체감 속도 중심의 UI/UX 설계

AI 도구를 활용한 반복 작업 최소화

경력 사항

팀패스 (Team Pass)

AI 어시스턴트(Cursor) 기반 프로토타이핑

UI 표준화 및 Storybook 기반 공통 컴포넌트 정비(레거시 점진 전환)

UI State / Server State 분리로 상태 관리 책임 정립

레이아웃 시프트 최소화 및 전환 UX 안정화

구독 유료화 결제 연동(E2E, FE 관점)

케이브먼트 (Cavement)

서비스 성능 개선 및 캐싱/렌더링 비용 최적화

병원 지도 화면 렌더링 최적화 및 사용자 경험 개선

앱 업데이트 및 장애 대응을 고려한 유지보수 구조 개선(RN)

토스페이먼츠 결제(PG) E2E 연동(FE 관점)

펫피플 (Pet People)

훈련사 일지 기능 개발(RN)

반려동물 동반 호텔 기능 개발(RN)

휴라(Hura)

전파 탐지 프로그램(EdgeRF) 프로그램 개발(WPF)

사이드 프로젝트

Sprintlog

JobLens

TubeSync

Wardrobe

RMancer

학력 및 수료

자격증