정연재 · Frontend Engineer

샐러드랩 프론트엔드 개발자

2024.03 – 재직 중 · 2년 5개월

리뷰 · 마케팅 SaaS(알파리뷰)의 어드민 대시보드와 쇼핑몰 노출 위젯을 담당했습니다. 분리되어 있던 서비스의 통합 대시보드를 설계·구축하고, 위젯 렌더링 구조를 전면 교체해 성능과 인프라 비용을 함께 개선했습니다.

리뷰 위젯 렌더링 구조 전환 및 비용 최적화 2025.06 – 2025.08

iframe + 서버 템플릿 기반 위젯을 LIT · Shadow DOM 컴포넌트로 마이그레이션 — 렌더링 시간 3.2s → 1.1s (66% 개선)
스크립트 모듈화 및 FE↔BE 불필요 API 정리 — Data Transfer Out 412KB → 166KB, 평균 API 요청 16회 → 8회
CDN 요청 전략 재설계로 302 리다이렉트 최소화 — 요청량 7,000만 → 3,000만 건, 관련 트래픽 비용 50% 이상 절감
리뷰 카드 누적이 전체 리렌더링에 미치는 영향을 content-visibility로 차단
위젯 미리보기를 하드코딩 방식에서 실제 생성 스크립트 기반 프리뷰로 전환 — 위젯 추가 시 반복 공수 제거

3개 서비스 통합 대시보드 구축 2024.06 – 2025.04

업셀 · 푸시 · 리뷰로 각각 운영되던 웹을 Nx 모노레포 단일 대시보드로 통합, 의존성 트리를 제거해 앱별 독립 배포 기반 마련
FSD 아키텍처 도입 및 공통 컴포넌트 · 레이아웃 · GNB 상태관리 설계, 앱별 온보딩 워크플로우와 공용 상태 정의
Signals와 React Query 패턴을 차용한 서비스 모듈을 설계해 중복 API 호출 제거
Angular 16 → 19 마이그레이션, GitHub Actions Large Runner를 main 브랜치에만 적용해 빌드 시간과 비용을 동시에 관리
배포 인프라 및 CI/CD 구축, Datadog 기반 에러 · 세션 로깅 체계 도입
서비스 간 UX를 일관되게 정리한 결과 평균 세션 체류 시간 증가

신규 백오피스 어드민 및 모노레포 기반 정비 2024.03 – 2024.06

구독 · 결제 워크플로우 설계, 모노레포 앱 및 공용 모듈 구성, base.less 변수화
공통 스타일에서 폰트를 호출해 다중 폰트가 중복 로드되던 문제를 각 앱 루트 import 구조로 분리해 해결
Angular Material 컴포넌트를 사내 디자인 시스템에 맞게 래핑, 피드백 메시지를 스택형으로 재구성
라우팅 처리를 네비게이션 컴포넌트에서 Route Guard로 이관, static 파일 S3 이전, Prettier · ESLint 정비
merge 기반 작업을 PR 단위로 전환하고 커밋 · 브랜치 컨벤션 도입 — GitFlow에서 main 중심(TBD) 전략으로 변경해 릴리스 이력 관리

디자인 시스템 라이브러리 · 배포 자동화 2026.08 –

인증 코드 보유자가 수동 명령으로 진행하던 UI 라이브러리 배포를 CI/CD 자동 배포로 전환, 성공 · 실패를 Slack 채널로 알림
컴포넌트 모음에서 출발해 생긴 디자인–코드 간 괴리를 디자이너와 합의해 재정렬, 공용 라이브러리 패키지화
Playwright 기반 E2E 테스트 자동화 파이프라인 구성

플랫폼 · 상품 확장 2025.12 – 2026.06

아임웹 신규 플랫폼 연동 설계 — 하나의 대시보드에서 플랫폼별로 다른 상태 UI를 처리하도록 구조화해 이후 플랫폼 · 요금제 확장의 토대 마련
무료 구독형 인스타피드 · 알파리뷰 앱 런칭, 구독 종류별 전환 및 온보딩 상태 설계
온보딩 단계에서 위젯 자동 설치 지원 — 설치 · 삭제 기준과 상태관리 재정의, 위젯 프리뷰 타입 추가

AI 기반 개발 워크플로우 · 팀 문화

신규 입사자와 기존 인원을 위한 통합 코드 파악 도구(AR-AI) 개발, 사내 Claude 룰 정비 및 옵시디언 기반 SSOT 문서 체계 구축
방어 스크립트 조기 경보 및 자동 수정 PR 생성 기능 개발
코드리뷰 도입과 FE 스터디를 제안해 운영, 온보딩 문서 · README · 트러블슈팅 기록 정리
PD 및 타 직군과 기술 의사결정을 조율하고 통합 프로젝트를 리딩

얼리페이 프론트엔드 개발자

2022.03 – 2023.10 · 1년 8개월

소상공인 선정산 서비스의 웹 프론트엔드를 단독으로 담당했습니다. Vue 기반 레거시를 React · TypeScript로 마이그레이션해 이후 합류할 개발자가 이어받을 수 있는 코드베이스로 정리했고, 배포 환경과 운영팀 업무 자동화까지 프론트엔드 바깥의 영역을 함께 맡았습니다.

Vue → React 마이그레이션 및 구조 재설계

싱글 파일 컴포넌트가 사실상 페이지 단위로 묶여 있던 구조를 작은 단위 컴포넌트로 재설계, 라우트 가드와 공통 레이아웃을 직접 구현
Redux → React Query + Recoil로 전환해 서버 상태와 클라이언트 상태를 분리, 이후 Redux Toolkit · TypeScript로 정착
TypeScript 마이그레이션과 전체 프론트엔드 구조 개편, 테스트 코드 및 Git 컨벤션 도입
불필요한 로컬스토리지 · 전역 상태 정리, 글로벌 CSS와 styled-components 상속으로 컴포넌트 재사용성 확보

성능 · 사용자 경험 개선

라우트 가드에서 문서 이미지 판별을 위해 매번 호출하던 API를 새로고침 시에만 호출하도록 변경해 중복 요청 제거
무한 스크롤을 스크롤 이벤트에서 IntersectionObserver로 전환, 모바일 정산 화면 스크롤 이벤트 최적화
picture · source 태그로 WebP · SVG · PNG를 브라우저 지원에 따라 분기 제공
Rollup 기반 빌드에 minify와 코드 스플리팅을 적용하고 중복 API 호출 순서를 정리해 초기 로딩 리소스 축소
Vue History 모드 전환 및 Netlify 리다이렉트 설정, robots.txt · 메타 description 정비

배포 환경 이전 및 인프라 자동화

백엔드와 배포 스택을 통일하기 위해 Netlify에서 AWS로 이전 — 프론트엔드 월 배포 비용 50,495원 → 3,000원
이전 과정에서 발생한 Jenkins 메모리 부족 이슈를 스왑 메모리 설정으로 해결
80 포트를 닫은 서버의 certbot 갱신을 DNS 방식으로 전환하고 Crontab으로 자동화, 결과를 Slack으로 전송
CloudFront → S3 → Athena → Grafana로 표준 액세스 로그 파이프라인 구성
백엔드 API Error를 Sentry 커스텀 에러로 로깅해 운영팀의 CS 선제 대응 가능하게 함

CS 어드민 · 크롬 익스텐션 개발

운영팀이 기존 도구와 이질감 없이 쓰도록 Django Admin과 유사한 UI로 CS 어드민 개발
파편화된 고객 정보를 한 화면에 모은 CS 대시보드와 엑셀 내보내기 기능으로 수기 반복 작업 제거
계정 정보 · 날짜 입력 등 단순 반복 업무를 자동화하는 크롬 익스텐션 개발, chrome.storage로 탭 간 상태 공유
GitHub Actions로 master push 시 Notion · Slack API를 통해 버전 기록과 알림 자동화

금융 도메인 기능 개발

대부 약정 동의 사이트 개발 — 버튼 조작에 따라 약관 위치로 자동 스크롤되도록 동의 UX 개선
계좌 이미지 업로드 시 Tesseract OCR로 계좌번호를 추출해 입력 필드에 자동 반영
Canvas 기반 전자 서명 패드 구현 — 서명 데이터는 클라이언트에서만 보관 후 전송
경남은행 인증번호 팝업 개발, 정산 페이지 이중 탭 구조 개편
커스텀 캘린더 컴포넌트를 직접 구현해 라이브러리 제약 없이 요구사항 반영

그로스 · 마케팅 기반 작업

카카오 친구 초대 이벤트 개발(메시지 공유, 초대 현황 페이지) 및 카카오 로그인 시 초대 · UTM 기준 분기 처리
GA · GTM 삽입, 회원가입 유입 경로(UTM · 리퍼럴) 추적 체계 구축
PWA 설치 배너 및 설정, Web Push 발송 테스트
백엔드 없이 인터랙션 중심의 행사용 체험 사이트를 1주 만에 개발

정연재Frontend Engineer

강점

기술 스택

경력 총 4년 1개월