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

EMAILtjdah0853@gmail.com
GITHUBgithub.com/sulmoJ
BLOGhttps://sulmo.link
LINKEDINsungmo-jeoung

웹 프론트엔드 구현과 구조 개선을 담당하며, 기능 단위 개발 및 제품 확장과 운영을 고려한 UI·개발 환경 안정화에 책임을 가지고 있습니다.

Work Experience.

* Megazone Cloud

Frontend Developer | 2022.01 ~ 현재

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

Scope & Responsibilities

  • 프론트엔드 파트 내 설계 의사 결정 및 기능 구조 설계 주도

    • 멀티 테넌시 환경을 고려한 인증·권한 UI 구조 개발
    • 다양한 데이터를 수용하는 동적 UI 메커니즘 개발
    • 디자인 시스템 운영 및 UI 표준화
    • i18n 기반 3개국어(한/영/일) 글로벌 서비스 지원

  • 개발 환경 안정화 및 구조 정립

    • 프론트엔드 빌드·배포 안정성에 개선
    • 프론트엔드 개발 생산성 및 테스트 환경 구조화
    • 스토리북 및 디자인 정책 운영 정립

Tech Stack

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

Project Highlights.

Product & Feature Development

* Service Account 오토싱크 동기화 기능 개발

Megazone Cloud | 2024.03 ~ 2024.05

CSP(Cloud Service Provider)별 자산 정보를 자동으로 수집·동기화하는 기능 개발. 대규모 엔터프라이즈 고객 유치의 핵심 기능으로, CSP별로 상이한 인증 스키마를 동적으로 처리해야 하는 기술적 과제 해결

Impact
  • 엔터프라이즈 고객 PoC/도입의 핵심 요구사항 충족
  • 수동 자산 등록 대비 운영 효율 대폭 개선
  • CSP 확장 시 프론트엔드 코드 변경 최소화
What I Did
  • CSP별 Dynamic Schema 기반 Form UI 구현
  • JSONSchema를 활용한 동적 필드 렌더링 및 유효성 검증

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

Megazone Cloud | 2024.07

OAuth2 기반 인증만 지원하던 기존 구조에서 대기업·금융권 고객 요구에 따라 SAML 기반 인증 지원 니즈. 백엔드 인증 로직부터 프론트엔드 UI까지 전 과정을 주도적으로 설계·구현

Impact
  • 보안 요구사항이 높은 엔터프라이즈 고객 대응 가능
  • 인증 체계 다변화를 통한 서비스 확장성 확보
What I Did
  • SAML 인증 플로우 설계 및 Assertion 검증/세션 발급 로직 검토·구현 참여
  • 테넌시별 OAuth2, SAML 프로바이더 분기 처리 UI 컴포넌트 구조 설계
  • Okta, OneLogin, Megazone PoPs(사내 IdP/SSO 포털) 연동
  • IdP 메타데이터 기반 자동 설정 기능 구현

* ASP Credit 관리 시스템 개발

Megazone Cloud | 2025.02 ~ 2025.07

멀티 CSP 크레딧 수불을 Excel로 관리하며 발생하던 오류와 비효율을 시스템화하여 해결하는 내부 서비스. 사내 빌링 조직의 업무 프로세스를 직접 파악하고, 요구사항 정의부터 배포/운영까지 end-to-end 오너십을 가지고 추진

Impact
  • 크레딧 정합성 오류 제거
  • 월간 정산 소요 시간 단축
  • 정산 프로세스의 실시간 가시성 확보
  • 수작업 기반 휴먼 에러 차단 및 로깅
What I Did
  • PRD(Product Requirements Document) 작성 및 요구사항 정의
  • 현업 인터뷰를 통한 As-Is/To-Be 분석 및 유저 플로우 설계
  • TanStack Query 기반 서버 상태 관리
  • 개발팀 일정 조율 및 스프린트 단위 구현 우선순위 관리

Project Highlights.

Platform Engineering & Developer Experience

* 모노레포 워크스페이스 구조 도입

Megazone Cloud | 2023.03, 2025.01 ~ 2025.02

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

Impact
  • 신규 앱 생성 시 필요한 패키지 조합이 용이한 구조 확보
  • 기능 및 목적 단위 분리로 수정·확장 범위 최소화
  • 디자인 시스템 및 Storybook 확장의 기반 마련
What I Did
  • Turborepo 기반 모노레포 아키텍처 설계 및 도입
  • 업무 플로우에 따른 프로젝트별 목적과 기능 분리
  • 여러 스토리북의 통합 관리 및 제공 방식 조사 및 설계
  • 코드·스타일 컨벤션 및 디자인 시스템 Foundation 패키지 구성

* QA 환경 배포 자동화 (Vercel + GitHub Actions)

Megazone Cloud | 2024.09

조직 구조 변경으로 프로젝트별 독립적인 개발·QA 환경이 필요해짐. 기존 스캐폴드 기반 배포 방식은 SRE/백엔드 의존성이 높고 DX 측면에서 비효율적이어서 프론트엔드 자체적으로 관리 가능한 배포 파이프라인 구축

Impact
  • 브랜치별 독립 개발 환경 제공으로 병렬 개발 가능
  • PR 단위 Preview 환경 도입으로 코드 리뷰 품질 향상
  • SRE 및 백엔드 의존성 제거로 배포 리드타임 단축
  • 커뮤니케이션 및 운영 비용 감소
What I Did
  • 피처별 별 개발 배포 구조 분석 및 팀내 역할 분리
  • Vercel Preview 환경을 활용한 PR 단위 자동 배포 흐름 구축
  • 기존 배포 프로세스의 DX 불편 사항 개선

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

Megazone Cloud | 2024.11

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

Impact
  • 메모리 사용량 약 75% 감소 및 빌드 시간 단축
  • 원인 분석 전 빠른 임시 대응
  • Vercel 기반 PR 단위 CI/CD 환경 안정화
What I Did
  • 임시 대응 : 로컬 빌드를 통한 vercel 배포 파이프라인 제공
  • 빌드 로그 기반 단계별 리소스 사용량 분석
  • PostCSS, TailwindCSS 플러그인 병목 구간 추적을 위한 메모리 로깅
  • JIT 엔진 도입을 위한 TailwindCSS 3.x 마이그레이션
  • 불필요 CSS 제거 및 빌드 전략 재정립
  • 개선 결과 및 원인 분석을 내부 문서로 정리해 팀 공유 ⇒ 메모리 최적화를 위한 가이드라인 수립

* MSW 기반 API Mocking 환경 구축

Megazone Cloud | 2025.08 ~ 현재

백엔드 API 의존으로 인한 프론트엔드 개발 병목 해소 및 테스트 환경 개선. API Contract 기반 병렬 개발 체계 구축을 목적으로, 다양한 사용 시나리오를 고려한 핸들러 구조 설계

Impact
  • API Contract 기반 프론트엔드 선행 개발 체계 확립
  • Mock 데이터 표준화로 팀 간 협업 효율 개선
  • Postman Mock 서버 비용 절감
What I Did
  • MSW(Mock Service Worker) 기반 Mock 아키텍처 설계
  • 브라우저·Node.js 테스트 환경별 핸들러 구조 구성
  • 실제 API 응답 자동 수집을 위한 Devtool 확장 구현
  • Vitest 기반 단위·통합 테스트 환경 연동

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

Megazone Cloud | 2022.01 ~ 현재

멀티 클라우드 콘솔을 위한 Vue 기반 공통 UI 컴포넌트 집합인 사내 디자인 시스템을 구축·운영. 빠르게 변하는 요구사항과 다양한 제품 맥락 속에서 디자인 시스템이 단순한 컴포넌트 모음이 아니라, 팀 간 협업과 제품 확장을 지원하는 기반으로 동작하도록 정비

Impact
  • 공통 UI 사용 비율 증가로 중복 구현 감소 및 화면 품질 편차 축소
  • 문서화·릴리즈 체계 정리를 통해 신규 구성원 온보딩 및 협업 효율 개선
  • 디자인 변경 및 제품 확장 과정에서 UI 회귀 이슈 감소
  • 다수 프로젝트에서 재사용 가능한 UI 기반 확보
What I Did
  • 버튼, 폼, 테이블, 레이아웃 등 80+개 공통 컴포넌트 유지보수 및 신규 요구사항 반영
  • 실제 제품 사용 사례를 기준으로 API와 인터페이스를 점진적으로 정비
  • 정기적인 Design System Scrum 운영하며 변경 요청, 이슈, 릴리즈 계획을 한 흐름으로 정리
  • 디자인 변경 시 "의도 / 적용 범위 / 영향 컴포넌트 / 마이그레이션 가이드" 템플릿 표준화
  • JSONSchema 기반 Dynamic Form/Layout 컴포넌트 개발
  • Server-Driven UI 구조 변경 시 하위 호환성을 고려한 컴포넌트 대응 및 마이그레이션 지원
  • Changesets 기반 버저닝·릴리즈 프로세스 운영
  • npm 패키지 배포 및 사내외 프로젝트 적용

* Storybook 운영 전략 개선

Megazone Cloud | 2025.01 ~ 2025.02

컴포넌트 문서와 앱 의존 컴포넌트가 혼재된 구조로 인해 유지보수 비용이 증가. Foundation(기본 디자인 컴포넌트)과 Composite(비즈니스 로직 포함 컴포넌트)의 명확한 분리 및 통합 문서화 전략 수립

Impact
  • 목적별 Storybook 분리로 유지보수 비용 감소
  • 디자인·개발 간 컴포넌트 정의(Definition) 싱크 개선
  • 디자이너 협업 시 페인포인트 해결 (컴포넌트 탐색, 상태 확인 등)
What I Did
  • Foundation / Composite 컴포넌트 계층 분리 기준 정의
  • Storybook Composition 기반 멀티 스토리북 통합 구조 구성
  • 컴포넌트별 Definition(용도, Props, 사용 예시) 문서 템플릿 표준화
  • Storybook 배포 CI/CD 파이프라인 구축 (GitHub Actions + Vercel)