정성훈
ajcjcjc@gmail.com
소개
서비스 기획부터 출시·운영까지 전 과정을 경험하며, 모노레포 도입, 디자인 시스템 구축/고도화, CI/CD 및 테스트 자동화, 성능 최적화 등 팀과 서비스의 스케일을 고려한 아키텍처 설계와 생산성 개선을 주도해왔습니다.
프로젝트를 진행할 때 항상 다음을 기준으로 의사결정합니다.
- 이 기능이 사용자에게 어떤 구체적 가치를 제공하는가?
- 이 구조가 팀에 얼마나 효율적이고 일관된 개발 환경을 제공하는가?
앞으로도 신뢰할 수 있는 사용자 경험과 팀이 지속적으로 성장할 수 있는 개발 문화를 만들어가는 데 기여하겠습니다.
경력
주식회사 써로마인드
연구원 | LLM 솔루션
Oct. 2024 - 현재
프론트엔드 아키텍처 설계 및 개발 (Next.js / TypeScript)
Next.js App Router 기반의 React 환경에서 Server/Client Components를 분리하여 SSR/SSG 전략 수립
모노레포(Turborepo + pnpm)에서 @core/ui, projects 패키지로 공통 컴포넌트와 유틸을 모듈화하고 Vitest로 단위 테스트 체계화
Promise 기반 Overlay 시스템을 설계하여 stack 관리, 전역 상태 최소화, 선언적 API로 확장성 확보
디자인 시스템 및 UI 컴포넌트 엔지니어링
Styled-components 기반 토큰과 컴포넌트 규격을 정립하고 접근성(a11y) 표준 반영
Tailwind CSS 기반으로 마이그레이션하여 스타일 일관성, 빌드 성능, 유지보수성 개선
개발 생산성 및 품질 자동화
Husky/Git Hooks로 Lint/Format/Commit 규칙을 표준화하여 CI 파이프라인 안정성 강화
dependency-cruiser로 모듈 간 의존성을 시각화하고 경계 규칙을 정의해 아키텍처 안정성 확보
gitlab-runner 기반 CI/CD에서 배포 워크플로우를 최적화하여 회귀 위험도 감소
브라우저 사이드패널 확장 및 E2E 시나리오 자동화
iframe 기반 사이드패널 크롬 확장 개발로 사용자 이벤트(클릭/입력) 기록 및 재생
메인 페이지 이벤트를 고유 selector로 구분, chrome.runtime.sendMessage로 안정적 통신 구현
녹화 이벤트를 기반으로 E2E 테스트 시나리오를 자동 생성하고 XState 테스트 모델로 확장 가능하도록 설계
(주)케이씨산업
프론트엔드 엔지니어
May. 2023 - May. 2024
- 3D 건축 설계 플랫폼·MES 고도화 (WebGL 연동 UI/UX)
- 도메인 특화 워크플로우를 반영해 컴포넌트를 리팩토링하고 상호작용(Interaction) 품질을 개선
- WebGL 기반 3D 뷰어와의 인터페이스를 최적화하여 렌더 상태와 UI 상태의 동기화 안정성 향상
- PDF 렌더링 품질 및 템플릿 시스템 개선
- 클라이언트/서버 환경에서 PDF 렌더링 품질을 개선하고 오류 내성을 강화
- 다국어(i18n), 스타일 일관성, 동적 레이아웃에 대응하는 템플릿 구조로 유지보수성을 향상
- CSR → SSG 전환으로 성능·SEO 최적화
- 기존 CSR을 Node + Express 기반 SSG로 전환하여 초기 로딩 성능과 크롤러 대응을 개선
- 핵심 랜딩 페이지 사전 렌더링으로 SEO 구조를 최적화하고 인덱싱 신뢰도 제고
- 데이터 패칭 최적화 (TanStack Query/react-query)
- 캐싱·동기화 전략을 수립하여 서버 요청을 최소화하고 사용자 체감 성능을 개선
- Query invalidation 규칙을 정비하여 불필요한 refetch를 방지하고 서버 부하를 감소
(주)모두디자이너
프론트엔드 엔지니어 | RnD
Oct. 2021 - Mar. 2023
- 개인정보 보호 중심(Privacy by Design) 미아 찾기 서비스 초기 설계·개발
- PII 최소화 원칙을 반영한 아키텍처·API 설계로 보안 리스크를 저감
- 권한 제어(RBAC) 및 익명화 파이프라인을 구현해 신고·열람 프로세스의 안전성 확보
- 이미지 편집 기반 커스텀 펜던트 플랫폼 고도화
- 업로드·크롭·필터링 기능과 실시간 미리보기를 포함한 편집 툴 UX를 개선
- 사용자 피드백 기반의 반복 개선으로 전환 흐름과 사용성 지표를 향상
- 백오피스 기능 개발(재고·주문·송장·알림톡)
- 상품/재고/주문 관리 화면을 설계·구현하고 운영 로직을 표준화
- 송장 출력 자동화 및 카카오 알림톡 API 연동으로 주문 처리 효율을 개선
- 레거시 Vue 2 → Vue 3 마이그레이션
- Composition API 기반 구조로 재편해 코드 일관성과 재사용성을 확보
- 호환성 이슈를 분석·완화하며 점진적 마이그레이션으로 무중단 전환 달성
학력
방송통신대
컴퓨터공학
Mar. 2025 - 현재
부평그린컴퓨터아카데미
프론트엔드 실무 과정
Mar. 2021 - Sep. 2021
평택대학교
데이터정보학과
Mar. 2016 - Dec. 2020
산곡고등학교
이과
Mar. 2014 - Feb. 2016
기술
Frontend Development
- React: 실무 프로젝트 및 서비스 운영 경험
- Next.js: App Router 기반 프로젝트 설계 및 개발
- Vue.js: Vue 2 → Vue 3 마이그레이션, Composition API 활용
- TypeScript: 전 프로젝트 적용 및 타입 안정성 확보
Backend & Node.js
- Node.js: Express 기반 SSG, API 서버 개발
DevOps & Automation
- CI/CD: Gitlab-runner, Jenkins, Docker, pm2, 자동화 파이프라인 구축
- Husky, Git Hook: Lint/Format/Commit 규칙 자동화
- dependency-cruiser: 폴더 간 의존성 시각화 및 제한
- SonarQube: 코드 품질 정량 평가
Testing
- Vitest: 테스트 환경 구성
- E2E 자동화: 사이드패널 기반 이벤트 레코딩, XState 테스트 모델
UI/UX & Design System
- Styled Components: 디자인 시스템 운영
- Tailwindcss: 디자인 시스템 마이그레이션
- Storybook: Docs Addon 활용, 디자인 검수 파이프라인 구축
3D/Visualization
- WebGL: 3D 뷰어 연동
- Three.js: 3D 모델 로드 및 실시간 견적/조감도 동기화
- Recharts: 데이터 시각화
Authentication & Security
- JWT, OAuth 2.0: 인증/권한 관리
- WebRTC, WebSocket: 실시간 통신 및 보안 아키텍처
프로젝트
사이드패널 기반 이벤트 레코딩·E2E 시나리오 자동화
주식회사 써로마인드
Jul. 2025 - 현재
QA 팀의 부재로 릴리스마다 테스트 시나리오를 수동으로 작성하고 직접 테스트를 하게 되면서 테스트 누락과 휴먼 에러가 잦았습니다. 또한 코드를 작성할 때마다 테스트 코드가 작성되어 코드의 크기가 지나치게 비대해지는 현상을 발견했습니다. 그래서 개발자가 아닌 사람도 테스트 시나리오를 작성하고 테스트를 할 수 있는 환경을 만들고자 했습니다.
Chrome Extension 사이드패널을 설계해 클릭·입력 이벤트를 실시간 캡처하고, 이를 고유 selector로 구분해 저장했습니다. 이후 기록된 이벤트를 E2E 테스트 시나리오로 자동 변환하는 아키텍처를 구상·구현했습니다.
아직 진행 중이지만, 이 프로젝트는 QA 리소스를 줄이고 시나리오 신뢰성을 높이는 기반이 되고 있습니다. 향후 XState 기반 테스트 모델로 확장할 계획입니다.
자동화·개발 생산성 향상
주식회사 써로마인드
May. 2025 - Jun. 2025
프로젝트가 커질수록 사소한 규칙 위반이 CI 단계에서 뒤늦게 발견되는 문제가 있었습니다. 커밋 메시지 불일치, Lint 미수정 코드, 레이어 간 의존성 위반 등이 코드 리뷰 이후에서야 드러나며, 리뷰 지연과 반복 수정이 빈번하게 발생했습니다.
저는 이를 개선하기 위해 Husky 기반 pre-commit / commit-msg Hook 자동화를 도입했습니다. 개발자가 코드를 올리기 전에 자동으로 Lint/Format 검증을 거치도록 하여 불필요한 리뷰 낭비를 막았습니다. 또한 dependency-cruiser를 통해 레이어 간 의존성 위반을 사전에 탐지할 수 있도록 했고, SonarQube를 도입해 코드 품질을 정량적으로 평가하는 체계를 마련했습니다.
그 결과 CI 단계에서 lint 위반으로 인한 빌드 실패율을 크게 줄였고, PR 이후 머지까지 걸리는 시간을 단축시켰습니다. 이 경험을 통해 작은 자동화 도입이 개발 사이클 전체의 효율성을 얼마나 개선할 수 있는지 직접 체감할 수 있었습니다.
디자인 시스템 마이그레이션
주식회사 써로마인드
Dec. 2024 - Jan. 2025
Styled Components 기반 테마는 프로젝트가 커질수록 CSS 번들 증가와 초기 렌더링 지연 문제를 야기했습니다. 또한 디자이너·개발자 간 토큰 관리가 분산되어 협업 비용도 높았습니다.
이에 저는 디자인 토큰을 CSS Variant 전략으로 재정의하고, Tailwind 기반 시스템으로 마이그레이션을 주도했습니다. Typography를 Tailwind utility class로 재작성하고, Storybook Docs Addon을 활용해 디자이너가 즉시 검수할 수 있는 파이프라인을 마련했습니다.
그 결과 CSS 번들 크기 22% 감소, 초기 렌더링 성능 개선, 신규 테마 적용 속도 2배 향상, 피드백 사이클 단축(2일 → 반나절) 등 실질적인 생산성 향상을 달성했습니다.
제조 실행 시스템 플랫폼(MES)
(주)케이씨산업
Oct. 2023 - May. 2024
MES 대시보드는 생산 계획·자재 소요·설비 가동률을 보여주는 핵심 서비스였지만, 초기 MVP 코드의 복잡성으로 확장성과 서버 효율성이 낮은 상태였습니다.
저는 Compound Component Pattern을 도입해 가독성과 재사용성이 높은 UI 구조를 설계했고, react-query로 API 요청을 캐싱·오토리프레시하여 서버 트래픽을 줄였습니다. 또한 Jenkins + Docker 기반 파이프라인을 구축해 배포를 자동화하고, Webpack 빌드를 Vite로 전환해 개발·배포 속도를 크게 개선했습니다.
그 결과 빌드 시간 15분 → 5분, API 호출량 28% 절감, UI 컴포넌트 재사용률 45% → 78% 상승을 달성했습니다. 이 과정에서 프론트엔드 최적화가 곧 서비스 운영 효율과 비용 절감으로 이어진다는 점을 체감했습니다.
빌드 심플리
(주)케이씨산업
May. 2023 - Oct. 2023
서비스의 초기 MVP는 CSR 기반 React 애플리케이션으로 구축되어 검색 노출이 제한적이었고, 3D 모델·지도·이미지 리소스를 한 번에 내려받는 구조라 LCP 지표가 낮게 측정되었습니다. 또한 PDF 견적서 생성 시 브라우저별 렌더링 차이로 레이아웃이 깨지는 문제가 자주 보고되었습니다.
이를 해결하기 위해 Express.js 기반의 SSG 전환을 통해 주요 랜딩 페이지를 사전 렌더링해 SEO 점수를 개선했습니다. 초기 로딩 속도는 코드 스플리팅, 이미지 리사이즈, WebP 변환을 통해 최적화했습니다. 또한 Kakao Map API와 공공 데이터 API를 병합하여 부지 경계·용도 지역 등 다각형 편집 기능을 구현했고, Three.js를 사용해 주택 타입별 3D 모델을 로드하여 실시간 견적/조감도 동기화 기능을 개발했습니다.
PDF 생성 문제는 Headless Chromium(Puppeteer)을 도입하여 크로스 브라우징 환경에서도 안정적으로 출력할 수 있게 했고, 상담 및 견적 데이터는 Recharts로 시각화했습니다. 마지막으로 웹훅 → pm2를 활용한 정적 배포 파이프라인 자동화를 구축했습니다.
그 결과 SEO Lighthouse 점수가 62 → 91로 개선되어 유입 트래픽이 1.8배 증가했고, LCP가 4.2s → 2.0s로 단축되었습니다. 또한 PDF 레이아웃 오류 접수 건수는 월 15건에서 2건으로 줄어들어 서비스 신뢰도를 높일 수 있었습니다.
미아찾기 서비스
(주)모두디자이너
Jan. 2023 - Mar. 2023
어린이 위치 추적 기기의 개인정보 유출 사고가 사회적으로 이슈가 되던 시기, 회사에서 개인정보를 서버에 저장하지 않는 MVP 서비스를 기획했습니다. 저는 신입 프론트엔드 개발자로서 이 프로젝트의 실제 구현 파트를 맡아 참여했습니다.
WebRTC 기반의 P2P 연결을 통해 영상·음성 데이터를 서버에 저장하지 않고 주고받도록 구현했고, WebSocket을 활용해 텍스트 채팅과 시그널링을 분리했습니다. 또한 Geolocation API와 Kakao Map API를 결합해 보호자가 자녀의 위치를 실시간 지도·경로로 확인할 수 있는 기능을 개발했습니다.
짧은 기간이었지만, 이 프로젝트를 통해 실시간 통신과 보안 아키텍처의 기본 원리를 직접 경험할 수 있었습니다. 특히 “서비스의 기술적 선택이 사용자 신뢰에 직결된다”는 사실을 신입 시절부터 몸소 체득한 계기가 되었습니다.
커스텀 펜던트 플랫폼
(주)모두디자이너
Oct. 2021 - Jan. 2023
Vue 2 기반 레거시 프로젝트에서 발생한 빌드 성능 저하와 Canvas 처리 한계를 직접 경험했습니다.
저는 Vue 3 → Vite 마이그레이션을 맡아 빌드 속도를 개선하고, Canvas 편집 툴을 Off-screen Canvas 기반으로 최적화했습니다. 이 과정에서 프레임워크 전환과 성능 최적화에 필요한 다양한 기술적 고민을 깊이 배울 수 있었습니다.
또한 JWT·OAuth 2.0 인증을 도입해 로그인/권한 관리 로직을 단순화하고, e-Commerce 기능(상품 무한 스크롤, 쿠폰/결제)을 구현하며 서비스 기능 확장에도 기여했습니다. 백오피스 영역에서는 재고/주문/알림톡 기능 개발과 유지보수에 참여하며 운영 효율성을 높였습니다.
그 결과 빌드 시간이 21분 → 7분, 개발 서버 기동 시간이 11초 → 3초로 단축되었고, Canvas 성능 개선으로 브라우저 멈춤 현상을 줄일 수 있었습니다.
레거시 개선과 성능 최적화의 중요성을 몸소 체득한 소중한 경험이 되었습니다.
사용자 정의
• Github