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

EMAILtjdah0853@gmail.com
GITHUBgithub.com/sulmoJ
BLOGhttps://sulmo.link
LINKEDINlinkedin.com/in/성모-정

멀티 클라우드 B2B SaaS에서 계정 연결·자산·비용처럼 한 번 틀어지면 고객이 제품을 신뢰하지 않는 도메인을 프론트엔드로 풀어 왔습니다. 모노레포·Module Federation으로 서비스가 확장되는 구조를 설계하고, 디자인부터 QA·배포까지 개발 라이프사이클을 AI 기반으로 표준화하는 일에 집중하고 있습니다.

Work Experience.

* Megazone Cloud

Frontend Developer | 2022.01 – 현재

멀티 클라우드 환경의 자산·비용·권한·운영을 통합 관리하는 B2B SaaS(Cloud Management Platform)를 만듭니다. 고객사가 로그인해서 가장 먼저 만나는 대고객 통합 콘솔과, 여기서 계약을 확장한 고객이 쓰는 상위 운영 상품(CloudOps) 양쪽의 프론트엔드를 담당했습니다.

화면을 그리는 데서 멈추지 않고 요구사항 정의와 현업 인터뷰까지 범위를 넓혀, 무엇을 만들지부터 정하는 방식으로 일해 왔습니다.

동시에 모노레포·Module Federation 기반 구조 설계, 빌드·배포 안정화, 디자인 시스템 운영, AI 기반 개발 라이프사이클 표준화처럼 팀 전체의 개발 방식이 바뀌는 일을 직접 제안하고 이끌었습니다.

Scope & Responsibilities

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

    • 모노레포·Module Federation 기반 프론트엔드 아키텍처 설계 및 서비스 확장 구조 수립
    • 멀티 테넌시 환경을 고려한 인증·권한 UI 구조 개발
    • 서버가 내려주는 스키마로 화면을 구성하는 동적 UI 메커니즘 개발
    • 디자인 시스템 운영 및 UI 표준화
    • i18n 기반 3개국어(한/영/일) 글로벌 서비스 지원
    • 다중 프로바이더·이중 통화(KRW/USD)를 다루는 비용·청구 도메인 UI 개발

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

    • 프론트엔드 빌드·배포 안정성 개선
    • 프론트엔드 개발 생산성 및 테스트 환경 구조화
    • 스토리북 및 디자인 정책 운영 정립
    • AI 기반 개발 라이프사이클(디자인→개발→QA→배포) 표준화

Tech Stack

React, Vue.js, Next.js, TanStack Start, TypeScript, Tanstack Query, Tailwind CSS, Storybook, Vite, Turborepo, Module Federation, React Flow, Orval, MDX, Vitest, Playwright, MSW, GitHub Actions, Bitbucket Pipelines, Forgejo, Vercel, AWS, Claude Code

Project Highlights.

제품 개발

고객이 제품에 진입하는 첫 관문(계정 온보딩), 자산 관계 시각화, 비용·인증처럼 정합성이 무너지면 신뢰가 무너지는 도메인을 프론트엔드에서 풀어낸 작업입니다.

* 클라우드 계정 온보딩 — 상위 운영 상품 진입 전 구간 신규 구축

Megazone Cloud | 2026.04 ~ 2026.07

메가존 클라우드 고객이 로그인해서 만나는 통합 콘솔은 기본 정보를 제공하는 허브이고, 여기서 계약을 확장하면 고급 운영 기능을 쓰는 상위 상품(CloudOps)으로 이어진다. 상품이 팔린 뒤 고객이 실제로 값을 얻기까지 반드시 통과해야 하는 첫 관문이 자신의 클라우드 계정을 연결하는 온보딩이며, 여기서 막히면 계약은 성사돼도 제품은 쓰이지 않는다. CSP마다 인증 방식과 계정 계층이 전부 다른 이 구간을 하나의 플로우로 흡수하도록 프론트엔드 전 구간을 설계·구현

Impact
  • 상위 상품 전환의 첫 관문인 계정 연결 구간을 프론트엔드 오너십으로 맡아 릴리스까지 완료
  • CSP(AWS/Azure/GCP/OnPrem)마다 다른 자격 증명 항목을 서버 스키마로 렌더링해, 신규 CSP가 늘어도 전용 화면을 새로 만들지 않는 구조 확보
  • 계정을 하나씩 연결하던 방식과 조직 단위로 한 번에 등록하는 방식을 같은 규칙 위에 올려, 계정 수가 많은 고객의 초기 도입 부담 해소
  • 릴리스 QA에서 도출된 Major/Minor 결함을 직접 정리해 배포 가능 상태로 안정화
What I Did
  • 계정 연결(Connect Account) 플로우 설계·구현 — Provider 선택 → 자격 증명 입력 → 검증 → 완료 4단계를 다중 CSP 대응으로 구축
  • 조직 단위 대량 등록(Bulk Register) 구현 — 최상위 계정에서 하위 계정 후보를 탐색·선택해 일괄 연결하고, 실패 건만 골라 재시도하는 흐름 설계
  • 온보딩 허브와 자산 계층 관리 구현 — 연결 이후 수집 상태를 확인하고, 수집된 자산을 Application 단위 계층으로 정리하는 구간
  • 엔터프라이즈 도입 요건 대응 — 자격 증명 마스킹, 권한 부족 상황의 안내 UI, 다국어, Critical/Major 결함 대응

* 클라우드 서비스 계정 자산 자동 동기화 기능 개발

Megazone Cloud | 2024.03 ~ 2024.05

고객사가 AWS·Azure·GCP 등 클라우드 사업자(CSP)에 만들어 둔 서비스 계정을 연결하면, 그 아래 자산을 자동으로 수집·동기화하는 기능. 계정 수가 수백 개인 엔터프라이즈 고객은 수동 등록 자체가 도입 장벽이었고, 인증에 필요한 입력 항목이 CSP마다 전부 달라 화면을 CSP 수만큼 만들 수 없다는 것이 과제

Impact
  • 수동 등록이 사실상 불가능하던 대규모 조직에서도 자산 연결이 가능해져, 엔터프라이즈 PoC·도입의 핵심 요구사항 충족
  • 인증 입력 폼을 서버가 내려주는 스키마로 렌더링해, 신규 CSP가 추가돼도 전용 화면을 새로 만들지 않고 대응
  • 자산 등록 단계에서 발생하던 반복 수작업과 입력 오류 제거
What I Did
  • CSP별로 다른 인증 항목을 JSONSchema로 기술하고 런타임에 폼·유효성 검증을 생성하는 Server-Driven UI 구조 설계·구현
  • 백엔드가 정의한 스키마 계약을 함께 맞추고, CSP 추가 시 프론트엔드 변경 없이 확장되도록 인터페이스 협의
  • 연결 실패 원인(권한 부족·자격 증명 오류 등)을 고객이 스스로 해석할 수 있는 형태로 노출

* 클라우드 리소스 토폴로지 시각화 신규 개발 (Architecture View)

Megazone Cloud | 2026.06

수백 개 리소스가 어떤 네트워크 경계 안에서 무엇과 연결돼 있는지는 목록 화면만으로는 파악되지 않는다. 클라우드 자산의 실제 구성과 연결 관계를 한 화면의 토폴로지로 그려내는 뷰를 신규 설계·구현하고, QA에서 도출된 사용성 이슈까지 단기간에 안정화

Impact
  • 제품 핵심 시각화 기능을 신규로 완성해 차별화 요소 확보
  • 실제 인프라와 다르게 그려지던 연결선·유령 노드·VPC 외부 리소스 누락을 해소해 다이어그램 신뢰도 확보
  • QA 도출 Critical/Major 사용성 이슈를 단기간에 안정화
What I Did
  • 토폴로지 뷰 렌더링, 노드/간선(edge) 레이어링, VPC·그룹·엔드포인트(peering) 표현, 간선 연결 최적화
  • 헤더 바(검색·Last synced·새로고침·전체화면), 표시 필터 패널, 리소스 딥링크·센터링, 서비스 매핑 아이콘 구현
  • 토폴로지 렌더링과 상세 조회를 분리하는 detail API 설계를 반영해 뷰잉 로직 재구성
  • 노드 검색·선택 해제·팬텀노드·indicator 기준 등 QA 이슈 신속 대응

* 클라우드 통합 콘솔 — 비용·청구(FinOps) 도메인 프론트엔드

Megazone Cloud | 2026.06 ~ 현재

멀티 클라우드 통합 콘솔의 비용·청구 도메인 프론트엔드를 담당. FinOps 대시보드, Cost Explorer, Billing History, Dashboard 네 화면을 API 연동부터 차트·필터·내보내기까지 구현하고, AWS/GCP 다중 프로바이더와 원화·달러 이중 통화 표기를 처리

Impact
  • FinOps AWS 분석 위젯 4종을 API 스펙 동기화 → 목데이터 → UI → PDF/CSV 내보내기까지 단독 구현
  • 차트 합계와 API 합계 불일치, 음수 포함 도넛 미표시, 전월 0 이하 시 증감률 오표기 등 비용 정합성 결함 해소
  • 환율 로직을 UI 계층으로 일원화해 통화 표기 기준 통일
What I Did
  • Cost Explorer 시계열 전환·인라인 확장·페이지네이션·Group By 최대 3개 제약 구현
  • metadata.currency 기준 통화 표기와 displayCurrency·usdKrwRate 연동
  • Billing Center Overview → Dashboard 이전 및 예측 비용(Forecast) UI 고도화
  • 청구 내역 서버 정렬 도입 및 SortableTableHead 공용 컴포넌트 추출
  • FinOps 리포트 PDF 내보내기 고도화와 비용 최적화 제안 다국어 매핑

* MSP 크레딧 정산 관리 서비스 개발

Megazone Cloud | 2025.02 ~ 2025.07

고객사가 클라우드 사업자로부터 받은 크레딧(선지급 사용권)을 대신 관리·정산해 주는 것이 MSP의 핵심 업무 중 하나다. 이 수불 내역이 Excel로 관리되면서 잔액이 실제와 어긋나고 매달 정산에 사람이 붙는 상태였다. 기획자 없이 현업 조직에 직접 들어가 업무를 관찰하고, 요구사항 정의부터 설계·구현·배포·운영까지 혼자 책임진 내부 서비스

Impact
  • 장부와 실제 잔액이 어긋나 정산 후에 바로잡던 문제를 시스템 차원에서 차단
  • 매달 사람이 붙어 대조하던 정산 업무의 소요 시간 단축
  • 집행 현황을 실시간으로 확인할 수 있게 되어, 정산 시점에 몰리던 확인 요청 감소
  • 수작업으로 처리되던 조정 내역에 이력을 남겨 "누가 언제 무엇을 바꿨는지" 추적 가능
What I Did
  • 현업 인터뷰와 업무 관찰을 통해 As-Is/To-Be를 정리하고, 정의되지 않은 요구사항을 직접 발굴해 유저 플로우로 설계
  • PRD(Product Requirements Document) 작성 및 기능 정의 — 기획 산출물부터 직접 생산
  • 서비스 구동에 필요한 배포 환경·인프라 세팅까지 직접 구성해 릴리스
  • 개발팀 일정 조율 및 구현 우선순위 관리

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

Megazone Cloud | 2024.07

사내 계정 체계(SSO)를 이미 갖춘 대기업·금융권 고객은 "우리 회사 계정으로 로그인되지 않으면 도입할 수 없다"는 조건을 걸었다. OAuth2만 지원하던 기존 인증 구조에 SAML을 추가하기 위해, 백엔드 인증 로직을 직접 읽고 검증 규칙을 맞춘 뒤 프론트엔드 연동까지 전 구간을 설계·구현

Impact
  • 사내 계정 연동을 도입 조건으로 내걸던 보안 요구 수준 높은 고객군을 신규로 수용
  • 인증 프로토콜을 하나 더 얹을 수 있는 구조로 정리해, 이후 IdP 추가 요구를 화면 변경 없이 대응
What I Did
  • SAML 인증 플로우 설계 및 Assertion 검증/세션 발급 로직 검토·구현 참여
  • 테넌시별 OAuth2, SAML 프로바이더 분기 처리 UI 컴포넌트 구조 설계
  • Okta, OneLogin, Megazone PoPs(사내 IdP/SSO 포털) 연동
  • IdP 메타데이터 기반 자동 설정 기능 구현으로 고객사 담당자의 수동 입력 항목 축소

Project Highlights.

FE 아키텍처 · 개발 환경

구조를 먼저 정하고 그 위에 제품을 올리는 방식. 모노레포와 Module Federation으로 서비스가 확장되는 구조를 설계하고, 빌드·디자인 시스템·목킹 환경처럼 팀 전체가 올라타는 기반을 직접 세워 왔습니다.

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

Megazone Cloud | 2023.03, 2025.01 ~ 2025.02

제품이 여러 서비스로 갈라지는 로드맵이 잡혀 있는데 저장소는 하나였다. 공통 컴포넌트를 복사해 쓰거나, 한 곳을 고치면 어디까지 영향이 가는지 아무도 확신하지 못하는 상태였다. 당장의 분리가 아니라 앞으로 추가될 앱들이 같은 규칙으로 얹히는 것을 목표로, 패키지 경계와 의존 방향을 먼저 정하고 모노레포 구조를 설계·도입

Impact
  • 신규 앱을 추가할 때 필요한 패키지를 조합해 시작할 수 있는 구조 확보 — 이후 실제로 여러 앱이 이 구조 위에 올라감
  • 패키지 간 의존 방향을 단방향으로 고정해, 변경의 영향 범위를 구조 차원에서 예측 가능하게 만듦
  • Turborepo 캐시·의존성 그래프 기반 실행으로 변경된 패키지만 빌드·검사하도록 정리
  • 디자인 시스템 및 Storybook 확장의 기반 마련
What I Did
  • Turborepo 기반 모노레포 아키텍처 설계 및 도입
  • 앱과 공용 패키지의 경계·의존 방향 정의, 순환 의존을 구조적으로 차단
  • 태스크 파이프라인과 캐시 기준을 정의해 변경 범위만 빌드·검사하도록 구성
  • 업무 플로우에 따른 프로젝트별 목적과 기능 분리
  • 여러 스토리북의 통합 관리 및 제공 방식 조사 및 설계
  • 코드·스타일 컨벤션과 디자인 시스템 Foundation 패키지를 공용 기준으로 구성해, 신규 앱이 세팅 없이 같은 규칙을 상속받도록 정리

* 통합 콘솔 ↔ 상위 운영 상품 확장 구조 구축 (Module Federation)

Megazone Cloud | 2026.04 ~ 2026.07

통합 콘솔은 모든 고객에게 열리는 기본 허브이고, 상위 운영 상품(CloudOps)은 계약을 확장한 고객만 진입하는 별도 서비스다. 사용자에게는 한 제품처럼 이어지되 팀과 배포 주기는 분리되어야 했기에, 상위 상품을 모노레포 기반 Module Federation Remote로 신규 구축하고 허브에서 진입하는 경계를 설계

Impact
  • 허브 콘솔과 독립적으로 배포하면서도 사용자에게는 하나의 제품으로 이어지는 확장 구조 확보
  • 빈 저장소에서 시작해 첫 릴리스까지 프론트엔드 초기 구조·개발 환경을 세움
  • Remote로 붙은 상태와 단독 실행 상태 양쪽에서 동일하게 동작하는 개발·목킹 환경 확보
  • 상품 확장이 곧 매출로 이어지는 구조에서, 확장 서비스를 추가할 때 반복 가능한 기준 마련
What I Did
  • Module Federation Remote 앱 구조 설계 및 호스트 콘솔과의 연동 경계 정의
  • 모노레포 워크스페이스 구성과 앱·공용 패키지 간 의존성 경계 정리
  • 초기 세팅(빌드·라우팅·인증 컨텍스트 전달·공용 스타일 기준) 구축
  • 환경별 버저닝·CHANGELOG 작성 플로우 적용

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

Megazone Cloud | 2024.11

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

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

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

Megazone Cloud | 2022.01 ~ 2025.01

멀티 클라우드 콘솔을 위한 사내 공통 UI 컴포넌트 집합을 구축·운영. 범용 UI 킷을 옮겨온 것이 아니라, 자산 트리·리소스 상태·대용량 테이블처럼 클라우드와 데이터 관리 도메인에서 반복되는 화면 패턴을 제품의 정체성을 담은 컴포넌트로 정의한 것이 특징. 빠르게 변하는 요구사항과 다양한 제품 맥락 속에서도 단순한 컴포넌트 모음이 아니라 팀 간 협업과 제품 확장을 지원하는 기반으로 동작하도록 정비

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

* MSW 기반 API Mocking 환경 구축

Megazone Cloud | 2025.08 ~ 현재

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

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

Project Highlights.

AI 기반 개발 프로세스 (AX)

개인의 코딩 속도가 아니라 팀의 개발 방식을 바꾼 작업. 디자인·개발·QA·배포 전 주기를 재현 가능한 워크플로우로 세웠습니다.

* AI 기반 개발 라이프사이클 표준화 (Claude Code 스킬·에이전트)

Megazone Cloud | 2025 ~ 현재

단순 'AI로 코딩'을 넘어 디자인→개발→QA→핸드오프 전 주기를 Claude Code 스킬·에이전트로 표준화. 개인 생산성을 넘어 팀 단위 AI-네이티브 개발 프로세스를 구축하는 것을 목표로, 실제 제품 저장소에서 스킬·에이전트를 운영

Impact
  • 디자인·개발·QA 산출물과 규칙을 재현 가능한 워크플로우로 표준화
  • 주제별 개발 규칙(dev-guide) 스킬화로 팀 내 구현 일관성 확보
  • 유저플로우·테스트케이스 산출물 자동 생성으로 QA·디자이너 협업 비용 감소
  • flow-cycle · design-start · generate-user-flow 3종을 4개 저장소 전부에 이식해 워크플로우 재사용 확인
What I Did
  • 디자인 단계: design-start / design-adopt / design-complete(핸드오프) / design-cycle 스킬로 Figma→코드 전환 과정 표준화
  • 개발 가이드: dev-guide-* (api·forms·i18n·error-ui·loading-ui·test·ui-components·url-state·stat-api) 스킬로 역할·주제별 개발 규칙 문서화
  • QA 단계: qa-test-case / qa-run / qa-report / qa-cycle, generate-user-flow로 유저플로우 산출물을 디자이너용 자연어로 자동 전환, 테스트케이스 설계 자동화
  • Figma 연동 에이전트: figma-explorer(재귀 노드 탐색), api-finder로 디자인·스펙 탐색 자동화
  • 디자인 핸드오프 파이프라인: design-start → design-handoff → design-deploy 구성 및 가이드 문서화

* 프론트엔드 회귀 테스트 · 릴리스 자동화 체계 구축

Megazone Cloud | 2025 ~ 현재

기능 확장 속에서 회귀 안정성과 배포 리드타임을 함께 확보하기 위해, baseline 테스트 룰·mock 자동 동기화·E2E·자동배포·릴리스 태깅을 하나의 체계로 정립

Impact
  • 다이얼로그·폼·뮤테이션 등 상태 로직을 가진 feature에 테스트를 의무화해 회귀 이슈 감소
  • API 스펙 변경 시 mock·어댑터를 자동 동기화하여 유지보수 비용 감소
  • main·release·hotfix 자동배포로 배포 리드타임 및 휴먼 에러 감소
  • QA 사이클 스킬 3종(qa-test-case → qa-run → qa-report) 설계·구현 및 전체 플로우 검증
What I Did
  • baseline 테스트 룰 정의 및 Vitest browser 기반 다수 baseline 테스트 작성
  • sync-mocks 스킬로 MSW mock·어댑터 자동 동기화 (standalone / Module Federation 양쪽 mock host 대응)
  • Playwright 기반 E2E 자동화 도입, smoke 중심 3계층 test-plan 재구성
  • Bitbucket Pipeline 자동배포 구성 (main→DEV, release/hotfix 자동배포 + 수동 트리거)
  • commit-and-tag-version 릴리스 태깅, CHANGELOG(Keep a Changelog), Conventional Commits + commitlint 강제