Read Original
#Frontend

항공 프론트엔드 구축기 (2/10): Vue2 디자인 시스템을 React로 옮기기

항공 프론트엔드 구축기 (2/10): Vue2 디자인 시스템을 React로 옮기기
01

Summary

뷰에서 리액트로 디자인 시스템 '날먹' 이식하기: 똑똑하게 책임 분리하고 공수 제로에 도전하는 실무 팁

디자인 토큰과 TailwindCSS의 정밀 결합으로 마이그레이션 공수를 획기적으로 무너뜨린 여기어때 프론트엔드 이야기

본 아티클은 기존 Vue2에 강결합되어 있던 디자인 시스템을 React Next.js 프로젝트로 신속하고 안전하게 이전한 실제 이식 사례를 친근하게 풀어냅니다. 무턱대고 바닥부터 새로 코딩하기보다는 기존의 높은 스타일 독립성과 공통 Tailwind 설정을 활용해 클래스 문자열 수준에서 손쉽게 비주얼을 동일하게 재현한 팁을 나눕니다. 더불어, 컴포넌트가 과도하게 들고 있던 도메인 지식을 밖으로 도려내는 시니어의 스마트한 설계 기준을 전수합니다.

  • 01디자인 수치 1px도 안 틀리고 Vue2 컴포넌트 외형을 React로 100% 동일하게 초고속 이식한 비결
  • 02수없이 많은 컴포넌트별 커스텀 여백 Prop을 TailwindCSS 친화적인 className 단일 통로로 전면 개편
  • 03웹 프레임워크 전역 객체에 걸려 있던 기능 역시 '숨은 프레임워크 종속성'임을 명확히 인지하고 탈피
  • 04한국형 주민번호/카드번호 입력 분기 등 '우리만 아는 지식'은 화면단으로, 'HTML 표준'은 컴포넌트로 분리
  • 05UI 라이브러리를 커스텀 설계했을 때 비로소 발휘되는 강력한 아키텍처적 유연성과 이식성 체득

RECOMMENDATION

디자인 시스템의 신규 프레임워크 이식 비용으로 머리가 아픈 프론트엔드 리드 개발자, 또는 공통 UI 컴포넌트에 자꾸만 비즈니스 요구사항 분기 코드가 쌓여 리팩터링의 한계를 느끼고 있는 주니어 엔지니어에게 적극 추천합니다.

The Problem

항공 서비스를 신규 구축하면서 React 기반 Next.js와 TailwindCSS 스택을 도입하였으나, 기존의 풍부한 UI 컴포넌트 자산은 Vue2 기반 공용 라이브러리에 묶여 있었습니다. 한정된 시간 안에 디자인 스펙을 분석해 React로 무작정 재구현하기에는 일정과 검증 면에서 리스크가 매우 컸습니다.

The Solution

프레임워크에 종속되지 않은 자체 UI 컴포넌트 설계, 공통 Tailwind CSS 스택, 그리고 별도로 설정화된 디자인 토큰이라는 세 가지 강점을 극대화해 Vue2의 스타일 클래스 문자열을 React 컴포넌트로 직이식했습니다. 컴포넌트의 개별 여백 옵션 Prop을 표준 className 오버라이딩 방식으로 통일하고, 주민번호나 카드번호 등 한국 전용 서식 포맷팅을 컴포넌트 내부에서 제거하여 표준 입력 타입만 남기는 도메인 분리 설계를 적용했습니다.

The Result

정교한 디자인 수치(여백, 모서리 등)가 단 1px의 오차도 없이 동일하게 이식되었으며, 개발자들이 다루는 컴포넌트 인터페이스 언어와 토큰명이 양쪽 프레임워크에서 유사하게 유지되어 개발 학습 곡선이 최적화되었습니다. 컴포넌트 내부에서 도메인 지식을 배제해 11가지에 달하던 복잡한 입력 포맷팅 분기 처리와 전역 객체 의존성을 제거하는 효과를 거두었습니다.

Trade-off

className을 활용한 무제한 스타일 오버라이딩을 지원하게 되면서, 스타일 상속 관계가 꼬이거나 여러 클래스가 합쳐질 때 우선순위 충돌 문제를 정밀하게 통제해야 하는 추가적인 과제(다음 편에서 다룰 클래스 해소책)를 안게 되었습니다. 또한, 복잡한 서식 포맷팅(포맷터) 로직이 컴포넌트 바깥으로 빠지며 개별 화면을 개발하는 쪽에서 해당 정규식 및 가공 처리를 직접 구현해야 하므로 호출 단의 코드 양이 상대적으로 증가하였습니다.

03

Key Concepts

Concept · 01

Design Tokens

색상, 타이포그래피, 크기 등 시각 디자인 요소들을 하드코딩된 값 대신 플랫폼 독립적인 설정값 데이터(예: TailwindCSS 테마 변수)로 관리해 시스템 일관성을 유지하는 기법입니다.

  • Tailwind 설정 파일 내 픽셀 스케일 규칙을 1:1로 사전 정렬해 두어 프레임워크 변경 시에도 동일한 간격 스케일(px)을 즉각 유지했습니다.
Concept · 02

Component Domain Decoupling

공통 UI 컴포넌트가 결제 카드사, 주민등록번호 등 특정 도메인의 포맷팅 규칙이나 상세 비즈니스 지식을 직접 아는 대신, 순수 인터페이스 동작만을 수행하도록 구조를 분리하는 아키텍처 원칙입니다.

  • Vue2 Input 컴포넌트가 다루던 11가지 비즈니스 전용 타입을 HTML 표준 인풋 사양(text, number, tel 등) 5개로 줄이고 서식 포맷팅은 화면단 formatter로 격리시켰습니다.
Concept · 03

Class Name Overriding

내부 스타일 규칙에 가두지 않고 부모 컴포넌트나 레이아웃 레벨에서 주입하는 클래스 속성을 통해 컴포넌트 외관 및 위치를 유동적으로 오버라이드할 수 있게 개방해 두는 스타일링 전달 방식입니다.

  • 컴포넌트 바깥 여백은 해당 요소를 배치하는 레이아웃 화면이 더 잘 알고 있다는 판단 하에, 여백 Prop 대신 Tailwind 클래스 문자열(className)을 전달받아 유연하게 대응했습니다.