React Native에서 로컬 디자인 시스템 바로 연동해서 사용하는 방법 (개발 속도 ↑)

요즘 프로젝트와 별도로 디자인 시스템을 따로 구축하고 있다.
컴포넌트나 스타일을 만들다 보면 수정 사항이 정말 자주 발생하는데,
그때마다 .tgz로 묶거나 npm에 publish해서 앱 프로젝트에 반영하는 과정이 너무 비효율적이었다.

이런 과정으로 개발속도가 늦어지는건 짜증나므로 로컬에 직접 연동해서 작업한다.

📁 현재 내 프로젝트 구조

두 프로젝트는 같은 상위 폴더 안에 있다.

WORKSPACE
 ├─ design-system        ← 디자인 시스템
 └─ MyApp (앱)    ← React Native 프로젝트

이 구조만 맞으면 바로 연동할 수 있다.

🧩 앱 프로젝트에서 디자인 시스템을 로컬 패스로 설치하기

앱 프로젝트(MyApp)로 이동해서 이렇게 설치했다.

yarn add ../design-system

설치가 끝나면 package.json에 다음처럼 추가된다.

"dependencies": {
  "design-system": "file:../design-system"
}

그리고 앱에서 바로 이렇게 import할 수 있다.

import { Button } from 'design-system';

publish하지 않아도 바로 코드가 연결되니 귀찮은 일 하나를 지운셈

⚠ 설치가 멈춘 것처럼 보임

처음 설치할 때 아래 같은 로그만 뜨고
아무 일도 일어나지 않는 것처럼 보여서 멈춘 줄 알았다.

YN0000: Resolution step

검색해보니 Yarn Berry가 로컬 패키지를 zip으로 만들고 의존성 해석하고 .yarn/cache에 저장하는 작업을 조용히 진행 중이라고했다 좀 기다리니 작업완료

⚡ 로컬 패스 연동 후 얻은 가장 큰 장점

이 방식의 핵심은 정말 간단하다.

디자인 시스템 수정 → 앱에서 바로 반영된다.

• UI 수정 → 바로 확인

• 스타일 변경 → 실시간 반영

• 배포 불필요

• tgz 파일 생성 불필요

진짜로 개발 속도가 눈에 띄게 빨라졌다.

문제가 생기면 Metro 캐시만 초기화하면 된다.

yarn start --reset-cache

📌 .tgz와 비교