레거시 UI를 Asterix로 바꾸며 개발 시간을 줄이는 방법

기존 UI와 Asterix의 공존

기존 프로젝트에 새 디자인 시스템을 통째로 올리는 일은 사고가 나기 쉽습니다. 레이아웃이 깨지고 기능이 꼬이기 마련이죠. 메타가 8년간 13,000개 이상의 앱을 관리하며 개발한 StyleX 엔진을 쓰면 기존 CSS-in-JS와 안전하게 공존할 수 있습니다.

스타일이 서로 섞이지 않게 네임스페이스를 분리하세요.

@astryxdesign/build 설정을 바꿔 라이브러리 소스는 .astryx- 접두사로, 기존 코드는 .x- 접두사로 컴파일되게 하세요.
CSS의 @layer를 사용해 layers.css를 최상단에 두고, [reset, astryx-base, astryx-theme, product] 순으로 우선순위를 정하세요.
원자 UI, 레이아웃, 복합 모듈 순으로 전환 범위를 정한 매트릭스를 만드세요.

이 격리 구조를 쓰면 전체 리팩토링보다 개발 시간을 40% 아낄 수 있습니다.

디자이너와 토큰 동기화

피그마의 디자인 토큰과 Asterix의 테마 설정을 맞추지 않으면 시각적인 오차가 계속 발생합니다. 개발자가 수동으로 코드를 고치지 말고 JSON 기반의 파이프라인으로 해결하세요.

저장소 최상위에 색상, 타이포그래피, 간격을 정의한 JSON 스키마를 두세요.
디자이너가 피그마 토큰을 푸시하면 깃허브 액션이 theme.ts를 자동 재생성하도록 CI/CD를 구성하세요.
@stylexjs/eslint-plugin을 설정해 인라인 수치 입력을 막으세요.

이 과정이 끝나면 개발자는 하드코딩 대신 var(--spacing-3) 같은 토큰 변수만 쓰게 됩니다. UI 파편화가 사라지고 자동완성 덕분에 실수할 일도 줄어듭니다.

도메인 컴포넌트 자동화

반복되는 비즈니스 로직과 UI 조립을 줄여야 신규 페이지 개발 속도가 올라갑니다. 복잡한 모듈일수록 렌더링 영역과 상태 관리 로직을 분리하세요.

데이터 페칭과 상태 제어는 순수 리액트 훅으로 분리해 관리하세요.
Asterix CLI의 swizzle 명령을 써서 핵심 컴포넌트를 로컬 디렉토리로 꺼내 제어권을 가져오세요.
CLI 템플릿과 커스텀 스크립트를 연결해 API 명세에 맞춰 페이지 마크업과 훅이 자동으로 생성되게 하세요.

이렇게 하면 페이지 하나를 만들 때마다 컴포넌트를 처음부터 만드는 시간을 2시간씩 줄일 수 있습니다.

빌드 타임 성능 관리

런타임에 스타일을 주입하는 방식은 컴포넌트가 늘어날수록 성능을 떨어뜨립니다. StyleX는 빌드 타임에 원자적 CSS를 뽑아 번들 크기를 줄입니다. 메타 개발팀의 데이터에 따르면 정적 컴파일 도입 후 스타일 번들 용량은 80% 줄었고 렌더링 효율은 30% 좋아졌습니다.

vite.config.ts의 astryxStylex 옵션에서 runtimeInjection: false를 설정해 정적 CSS 추출을 강제하세요.
rollupOptions에서 @astryxdesign과 @stylexjs를 별도 청크로 분리하세요.
크롬 개발자 도구의 Performance 패널에서 INP 지표를 확인하며 50ms 이상 걸리는 스타일 계산 병목을 찾으세요.

정적 빌드로 전환하면 대규모 서비스에서도 런타임 오버헤드 없이 안정적인 화면을 보여줄 수 있습니다.

기존 UI와 Asterix의 공존

스타일이 서로 섞이지 않게 네임스페이스를 분리하세요.

@astryxdesign/build 설정을 바꿔 라이브러리 소스는 .astryx- 접두사로, 기존 코드는 .x- 접두사로 컴파일되게 하세요.

CSS의 @layer를 사용해 layers.css를 최상단에 두고, [reset, astryx-base, astryx-theme, product] 순으로 우선순위를 정하세요.

원자 UI, 레이아웃, 복합 모듈 순으로 전환 범위를 정한 매트릭스를 만드세요.

이 격리 구조를 쓰면 전체 리팩토링보다 개발 시간을 40% 아낄 수 있습니다.

디자이너와 토큰 동기화

저장소 최상위에 색상, 타이포그래피, 간격을 정의한 JSON 스키마를 두세요.

디자이너가 피그마 토큰을 푸시하면 깃허브 액션이 theme.ts를 자동 재생성하도록 CI/CD를 구성하세요.

@stylexjs/eslint-plugin을 설정해 인라인 수치 입력을 막으세요.

도메인 컴포넌트 자동화

반복되는 비즈니스 로직과 UI 조립을 줄여야 신규 페이지 개발 속도가 올라갑니다. 복잡한 모듈일수록 렌더링 영역과 상태 관리 로직을 분리하세요.

데이터 페칭과 상태 제어는 순수 리액트 훅으로 분리해 관리하세요.

Asterix CLI의 swizzle 명령을 써서 핵심 컴포넌트를 로컬 디렉토리로 꺼내 제어권을 가져오세요.

CLI 템플릿과 커스텀 스크립트를 연결해 API 명세에 맞춰 페이지 마크업과 훅이 자동으로 생성되게 하세요.

이렇게 하면 페이지 하나를 만들 때마다 컴포넌트를 처음부터 만드는 시간을 2시간씩 줄일 수 있습니다.

빌드 타임 성능 관리

vite.config.ts의 astryxStylex 옵션에서 runtimeInjection: false를 설정해 정적 CSS 추출을 강제하세요.

rollupOptions에서 @astryxdesign과 @stylexjs를 별도 청크로 분리하세요.

크롬 개발자 도구의 Performance 패널에서 INP 지표를 확인하며 50ms 이상 걸리는 스타일 계산 병목을 찾으세요.

정적 빌드로 전환하면 대규모 서비스에서도 런타임 오버헤드 없이 안정적인 화면을 보여줄 수 있습니다.

레거시 UI를 Asterix로 바꾸며 개발 시간을 줄이는 방법

관련 영상

메타가 자체 shadcn을 만들었습니다 (Astryx)

레거시 UI를 Asterix로 바꾸며 개발 시간을 줄이는 방법

기존 UI와 Asterix의 공존

디자이너와 토큰 동기화

도메인 컴포넌트 자동화

빌드 타임 성능 관리

커뮤니티의 다른 글

사내 시스템에 llm api 붙일 때 마주하는 현실적인 한계와 대응법

레거시 백엔드에 GPT-6 Astra 붙일 때 예산 승인과 보안 통과를 먼저 끝내는 법이 있습니다

에이전트끼리 대화하다 6천만 원 청구서가 나오는 이유

사내 RAG 벡터 검색에 Okta 권한 필터를 직접 거는 방법

브라우저 에이전트에게 내 구글 계정을 통째로 넘기면 안 되는 이유

Apple Won the AI Race

댓글 (0)

레거시 UI를 Asterix로 바꾸며 개발 시간을 줄이는 방법

기존 UI와 Asterix의 공존

디자이너와 토큰 동기화

도메인 컴포넌트 자동화

빌드 타임 성능 관리