인터랙션 패키지: Emotion 의존성 제거와 inline style 전환

Interaction 패키지는 TDS Mobile과 여러 토스 서비스가 함께 쓰는 공용 패키지였고, Emotion을 peer dependency로 요구했어요. 그래서 Emotion을 직접 쓰지 않는 서비스도 이 패키지 때문에 Emotion을 함께 유지해야 했어요.

패키지 안 컴포넌트들의 스타일을 검토한 뒤 대부분을 inline style로 옮기고, Emotion 기반 구현과 peer dependency를 함께 제거했어요. 그 결과 TDS와 Interaction 패키지를 직접 사용하는 서비스 모두 이 패키지 때문에 Emotion을 유지할 필요가 없어졌어요.

Interaction 패키지는 공용 패키지라 내부 구현 선택이 소비 서비스의 의존성까지 바꿨어요. 특히 peer dependency는 패키지 안에서만 쓰는 기술이 아니라, 사용하는 서비스도 함께 설치해야 하는 조건이었어요.

따라서 기존 스타일을 어디로 옮길지뿐 아니라, 그 선택이 또 다른 의존성을 서비스에 요구하지 않는지도 함께 봐야 했어요.

inline style을 선택하면 새로운 의존성은 피할 수 있지만, pseudo selector처럼 그대로 옮길 수 없는 표현을 다른 방식으로 풀어야 했어요.

새로운 의존성을 추가하지 않는 선에서는 여러 서비스가 이미 쓰고 있는 TDS의 vanilla-extract가 가장 자연스러운 후보였어요. 다만 TDS 내부의 Interaction 패키지와 서비스가 직접 설치한 패키지의 버전이 달라질 수 있어, 빌드 설정과 버전 호환성까지 함께 맞춰야 했어요.

제3의 스타일 라이브러리는 새 의존성을 들일 만큼 얻는 이점이 크지 않았어요. 패키지 안 컴포넌트들의 스타일을 검토해보니 별도 라이브러리가 필요할 정도로 복잡하지 않아 inline style을 선택했어요.

대부분의 pseudo selector는 컴포넌트 구조를 바꿔 대체했어요. 외부 코드 컴포넌트를 지원하기 위해 남아 있던 부분은 담당 팀과 논의한 끝에 새 메이저 버전부터 해당 지원을 종료하기로 합의했어요. Storybook에서 여러 인터랙션 컴포넌트 케이스를 확인한 뒤 새 메이저 버전으로 릴리스하고, 변경된 지원 범위는 마이그레이션 문서로 안내했어요.

Emotion을 다른 스타일 라이브러리로 바꾸는 대신 inline style로 옮겼어요. vanilla-extract는 두 Interaction 패키지 버전의 빌드 설정과 호환성을 함께 맞춰야 했고, 제3의 라이브러리는 새 의존성에 비해 얻는 이점이 작았어요. 실제 스타일도 별도 라이브러리가 필요할 만큼 복잡하지 않았어요.

inline style에서는 pseudo selector를 그대로 쓸 수 없었어요. 패키지 내부에서 사용하던 대부분은 컴포넌트 구조를 바꿔 대체하고, 외부 코드 컴포넌트 지원을 위해 남아 있던 부분에 한해 담당 팀과 지원 종료를 합의했어요. 새 메이저 버전부터 이 지원을 유지하지 않는 비용을 받아들이고 Emotion 의존성을 제거했어요.

Interaction 패키지에서 Emotion 기반 구현과 peer dependency를 제거했어요.

TDS와 Interaction 패키지를 직접 사용하는 서비스 모두 이 패키지 때문에 Emotion을 유지할 필요가 없어졌어요.

공용 패키지의 의존성은 내부 구현에 머무르지 않고, 그 패키지를 쓰는 서비스가 함께 지켜야 하는 조건이 된다는 걸 다시 확인했어요.

익숙한 스타일 도구를 고르는 것보다 실제 스타일의 복잡성과 소비 서비스에 생길 조건을 함께 보고, 별도 라이브러리가 꼭 필요한지부터 판단하는 편이 이 문제에는 더 맞았어요.