← 전체 사례  ·  CASE #02  ·  Enterprise Admin UI

S사 엔지니어링
MAP Admin UI

⚠ NDA · 고객사 요청으로 사명 비공개

복합 Admin UI 라이브러리(MUI · Ag-Grid · Shadcn UI · Tailwind)가 혼재된 환경에서 스타일 충돌을 구조적으로 해결하고 컴포넌트 재사용률 70%를 달성한 프로젝트입니다.

재사용률 70%+ Enterprise Admin UI 기여도 100% SI · 국내 대형 EPC사
MAP Admin · Dashboard
대시보드
프로젝트
일정 관리
보고서
항목명상태일정
공정 A완료03/15
공정 B진행04/30
공정 C대기06/01
결과
Results
  • 컴포넌트 재사용률 70%+ 달성 — 벤더·외주팀 공통 사용
  • 복합 라이브러리 스타일 충돌을 구조적으로 해결하는 가이드 수립
  • 다층 메뉴트리 + 대용량 데이터 테이블 UI 단독 설계·구현
  • 신입 UI 퍼블리셔 멘토링 — 2개월 내 실무 투입 성공
Reflection

복잡한 환경일수록 '표준'이 없으면 더 복잡해진다는 것을 배웠습니다.

MUI, Ag-Grid, Shadcn, Tailwind가 한 프로젝트에 섞이는 상황은 흔하지 않지만, 앞으로 점점 더 많아질 것이라 생각합니다. 이 경험이 저만의 분명한 차별점이 되었습니다.

완성도 높은 가이드가 팀의 속도를 끌어올리는 것을 직접 수치로 확인한 프로젝트입니다.

문제

국내 대형 플랜트 EPC 기업의 MAP(Material & Asset Planning) 시스템 Admin UI를 구축하는 프로젝트였습니다. 핵심 난제는 복수의 UI 라이브러리 통합이었습니다.

MUI, Ag-Grid, Shadcn UI, Tailwind CSS가 동일한 프로젝트에 공존하면서 각자의 CSS 특성이 충돌했고, 이를 아무도 체계적으로 해결하지 못한 상태로 프로젝트가 이어지고 있었습니다. 여기에 다층 메뉴트리수만 행의 데이터 테이블이라는 UI 복잡도까지 더해졌습니다.

역할
넥스트리㈜ 수석연구원으로서 UI 아키텍처를 전담 설계하고, 벤더·외주 개발팀과의 협업 체계를 구축했습니다.
  • 프론트엔드 구조 분석 및 UI 아키텍처 설계
  • 스타일 충돌 원인 분석 → 레이어 분리 가이드 수립
  • 컴포넌트 재사용률 70%+ 달성을 위한 공통 컴포넌트 설계
  • 벤더·외주 개발팀 협업을 위한 퍼블리싱 가이드라인 문서화
  • 신입 UI 퍼블리셔 멘토링 (2개월 내 실무 투입)
제약 접기

고객사 요청으로 상세 화면은 공개가 제한됩니다. 구조와 수행 방식 위주로 서술합니다.

  • 다층 메뉴트리 (3단 이상)
  • 대용량 데이터 테이블
  • 다수 협력업체 연동
  • 스타일 충돌 해소 필수
  • 하위 퍼블리셔 없이 초반 단독 수행
핵심 판단 접기

라이브러리를 고르는 것보다, 뒤섞인 라이브러리를 다루는 능력이 더 희귀합니다.

MUI의 emotion 기반 CSS-in-JS와 Tailwind의 유틸리티 클래스, Shadcn의 Radix 기반 컴포넌트, Ag-Grid의 자체 테마가 한데 섞인 환경을 정리하는 방법은 책에 없습니다.

Claude를 활용해 충돌 패턴을 체계적으로 분석했고, CSS specificity 레이어 전략과 CSS custom property 우선순위 계층을 설계해 모든 라이브러리가 공존하는 구조를 만들었습니다.

증거 접기

NDA로 인해 실제 화면은 공개 제한됩니다. 구조 다이어그램과 익명 처리된 화면으로 대체합니다.

Admin UI — Menu Tree + Data Grid
MENU TREE
▶ 대시보드
─ 공정 현황
─ 자재 관리
▶ 프로젝트
▶ 보고서
AG-GRID · 대용량 데이터
ID항목상태일정 A-001공정 데이터완료03.15 A-002자재 현황진행04.30 A-003일정 관리대기06.01
Mono Tree UI — 다층 메뉴트리와 Ag-Grid 연동 구조 다이어그램
컴포넌트 스타일
레이어 구조
공통 컴포넌트
재사용 가이드
이 프로젝트는 고객사 요청으로 실제 화면 공개가 제한됩니다. 구체적인 화면은 면접 시 구두로 설명 가능합니다.
Next Case
Edulime LMS
디자인 없이 Web-App 구조를 분석해 출시한 프로젝트입니다.
다음 케이스 보기 →
Now
애드포터
현재 애드포터에서 광고 플랫폼 UI 구조화와 AI/AX 문서화·QA 흐름을 운영 중입니다.
현재 역할 보기 →
Next Conversation
주요 사례와 현재 역할부터 바로 확인할 수 있습니다.
이력서 보기 →