프론트엔드 개발자 정성모입니다.

콘솔 제품군의 프론트엔드 구현과 구조 개선을 담당하며, 기능 단위 개발 및 제품 확장과 운영을 고려한 UI·개발 환경 안정화에 책임을 가지고 있습니다. 단순 기능 구현을 넘어, 프론트엔드 파트 내에서 주요 기술적 의사결정과 설계 방향에 참여하며 개발자 경험 향상에 기여해왔습니다.

Work Experience.

* Megazone Cloud

Frontend Developer | 2022.01 ~ 현재

멀티 클라우드 환경 운영을 위한 자산·비용·권한·운영을 통합 관리하는 B2B SaaS 제품(Cloud Management Platform)을 제공합니다. 콘솔 제품군의 프론트엔드 구현과 구조 개선을 담당하며, 기능 단위 개발 및 제품 확장과 운영을 고려한 UI·개발 환경 안정화에 책임을 가졌습니다.

Scope & Responsibilities

프론트엔드 파트 내 설계 의사 결정 및 기능 구조 설계 주도
멀티 테넌시 환경을 고려한 인증·권한 UI 구조 개발
다양한 데이터를 수용하는 동적 UI 메커니즘 개발
프론트엔드 빌드·배포 안정성에 개선
프론트엔드 개발 생산성 및 테스트 환경 구조화
디자인 시스템 운영 및 UI 표준화
내부 비즈니스 시스템의 프론트엔드 아키텍처 설계

Tech Stack

React, Vue.js, Next.js, TypeScript, Tanstack Query, Tailwind CSS, Storybook, Vite, Turborepo, Vitest, Playwright, GitHub Actions, Vercel, AWS

Project Highlights.

* 빌드 최적화: 빌드 시간 및 메모리 사용량 개선

Megazone Cloud | 2024.11

Vercel 기반 콘솔 빌드 과정에서 메모리 사용량이 9GB 이상으로 증가하며 OOM 에러가 발생해 개발 환경 배포가 불가능한 이슈 발생. 임시 조치가 아닌 근본적인 해결을 위해 빌드 프로세스 전반을 분석하고 최적화를 진행.

Impact

메모리 사용량 약 75% 감소 및 빌드 시간 단축
원인 분석 전 빠른 임시 대응
Vercel 기반 PR 단위 CI/CD 환경 안정화

What I Did

임시 대응 : 로컬 빌드를 통한 vercel 배포 파이프라인 제공
빌드 로그 기반 단계별 리소스 사용량 분석
PostCSS, TailwindCSS 플러그인 병목 구간 추적을 위한 메모리 로깅
JIT 엔진 도입을 위한 TailwindCSS 3.x 마이그레이션
불필요 CSS 제거 및 빌드 전략 재정립
개선 결과 및 원인 분석을 내부 문서로 정리해 팀 공유

* QA 환경 배포 관리 (Vercel + GitHub Actions)

Megazone Cloud | 2024.09

조직 구조 변경으로 피처 단위 개발 및 배포 환경이 필요해졌으나, 기존 스캐폴드 기반 배포 방식은 DX 측면에서 사용성이 낮고 운영 주도권과 관리 책임을 위한 방안을 고려한 과제.

Impact

브랜치별 개발 배포 환경 제공
PR 단위 Preview 환경 도입
SRE 및 백엔드의 추가 의존성 제거
커뮤니케이션 및 운영 비용 감소

What I Did

피처별 개발 배포 구조 분석 및 팀내 역할 정리
N개의 고객 환경기준 QA에서 환경 세팅을 위한 config 분리
Vercel Preview 환경을 활용한 PR 단위 배포 흐름 설계
기존 배포 프로세스의 DX 불편 사항 개선

* MSW 기반 Mock 개발 환경 구축

Megazone Cloud | 2025.08 ~ 현재

백엔드 API 의존으로 인해 프론트엔드 개발 및 테스트 생산 개선. 프론트엔드 개발 환경 개선을 목적으로 필요에 맞는 핸들러 구조와 사용성을 고려한 구현.

Impact

백엔드 일정과 무관한 프론트엔드 개발 가능
테스트 신뢰도 및 재현성 향상
Mock 데이터 표준화로 협업 효율 개선
Postman Mock 서버 비용 절감

What I Did

MSW 기반 Mock 아키텍처 설계
브라우저·테스트 환경 사용성 별 핸들러 구조 구성
실제 API 응답 자동 수집 Devtool 구현
Vitest 기반 테스트 환경 연동

* 모노레포 워크스페이스 구조 재정비

Megazone Cloud | 2025.01 ~ 2025.02

기존 모노레포 구조가 서비스 확장 및 패키지 재사용 목적에 부합하지 않아 구조 개선이 필요. 앞으로의 로드맵과 이에 따른 확장성을 함께 고려하고, 프로젝트들의 명확한 분리가 필요.

Impact

신규 앱 생성 시 필요한 패키지 조합이 용이한 구조 확보
기능 및 목적 단위 분리로 수정·확장 범위 최소화
디자인 시스템 및 Storybook 확장의 기반 마련

What I Did

업무 플로우에 따른 프로젝트별 목적과 기능 분리
여러 스토리북의 통합 관리 및 제공 방식 조사 및 설계
코드·스타일 컨벤션 및 디자인 시스템 Foundation 패키지 구성

* SAML SSO 지원을 통한 ID Provider 통합

Megazone Cloud | 2024.07

OAuth2 기반 인증만 지원하던 기존 구조에서 대기업·금융권 고객 요구에 따라 SAML 기반 인증 지원 니즈.

Impact

보안 요구사항이 높은 엔터프라이즈 고객 대응 가능
인증 체계 다변화를 통한 서비스 확장성 확보

What I Did

태넌시 별 OAuth2, SAML 프로바이더 별 UI 컴포넌트 적용 구조 설계
SAML 인증 플로우 검증 및 로그인 UI 로직 설계
Okta, Auth0, OneLogin, Megazone PoPs 연동 검증 및 적용

* Google SSO 라이브러리 마이그레이션

Megazone Cloud | 2023.02

기존 Google 로그인 sdk의 deprecated 예정에 따라, 신규 라이브러리로의 마이그레이션이 필요.

Impact

인증 안정성 유지 및 GIS(google identity service)의 인증/인가 구조 공유
신규 로그인 UX 트렌드 공유 및 적용 가능성 확보

What I Did

신규 Google 로그인 라이브러리로 마이그레이션
토큰 구조 변경 이슈를 백엔드 팀과 공유
Opaque Token 기반 인가 API 활용으로 기존 로그인 플로우 유지
One Tap 기능 리서치 및 내부 제안

* 디자인 시스템 Mirinae 구축 및 운영

Megazone Cloud | 2022.01 ~ 현재

멀티 클라우드 콘솔을 위한 Vue 기반 공통 UI 컴포넌트 집합인 사내 디자인 시스템을 구축·운영. 디자인팀과 프론트 개발팀간 디자인시스템 이슈 로깅 및 논의 해결. 목적에 맞는 디자인시스템의 구조와 환경 구성 고려.

Impact

UI 일관성 및 개발 생산성 향상
다수 프로젝트에서 재사용 가능한 UI 기반 확보

What I Did

JSONSchema 기반 Dynamic UI 컴포넌트 개발
Dynamic Layout 및 Form 컴포넌트 제공
npm 패키지 배포 및 사내외 프로젝트 적용

* Storybook 운영 전략 개선

Megazone Cloud | 2025.01 ~ 2025.02

컴포넌트 문서와 앱 의존 컴포넌트가 혼재된 구조로 인해 유지보수 비용이 증가 이슈. core 형식의 기본 디자인이 있었으며, 추가적으로 비즈니스로직이 포함되는 중복 사용 컴포넌트의 지속적인 관리가 필요.

Impact

목적별 Storybook 분리로 유지보수 비용 감소
디자인·개발 간 싱크 개선

What I Did

Foundation / App 의존 컴포넌트 개념 분리
Storybook Composition 기반 통합 구조 구성
Storybook 배포 CI/CD 파이프라인 구축

* ASP Credit 관리 시스템 개발

Megazone Cloud | 2025.02 ~ 2025.07

멀티 CSP 크레딧 수불을 Excel로 관리하며 발생하던 오류와 비효율을 시스템화하여 해결하는 내부 서비스. 사내 빌링 조직의 업무 프로세스를 직접 듣고 서비스화 및 자동화가 목적.

Impact

크레딧 정합성 및 운영 효율 개선
정산 프로세스의 가시성 확보

What I Did

React 기반 SPA 개발 운영
현업 인터뷰를 통한 요구사항 정의 및 유저 플로우 설계
TanStack Query 기반 상태 관리 및 캐싱 전략 수립
Credit 시스템 개발 팀 일정 조율 및 구현 우선순위 관리