디자인 시스템 컬러/폰트 마이그레이션을 자동화한 방법

새 디자인 시스템이 반갑지 않았던 이유

리브랜딩 이후의 현실

리브랜딩이 끝나고 컬러와 폰트가 바뀌었다.자연스럽게 디자인 시스템도 다시 정비해야 했다.

기존 시스템은 더 이상 기준이 아니었다. 컬러는 브랜드 톤과 어긋나 있었고, 타이포그래피 역시 새 기준으로 보기엔 애매한 상태였다.

그래서 디자인 시스템을 다시 정비하기로 했다. 이번에는 단순히 값이나 스타일을 나열하는 방식이 아니라,

역할과 맥락을 중심으로 한 구조로.

디자인 시스템을 다시 정비했다

컬러는 기존의 값 중심 네이밍에서 Text/Default, Surface/Primary처럼 어디에 쓰이는지를 드러내는 시맨틱 구조로 바꿨다.

타이포그래피도 마찬가지였다. Display, Title, Body, Caption 등 텍스트 역할을 기준으로 스타일을 다시 정리했다.

디자인 시스템 자체를 정비하는 일은 비교적 빠르게 끝났다. 기준은 명확했고, 문서도 정리돼 있었다.

이 시점까지만 해도 “이제 적용만 하면 되겠네”라고 생각했다.

문제는 그다음 단계였다.

적용 단계에서 문제가 터졌다

이미 만들어진 화면이 못해도 500개 이상은 되었다. 그리고 그 화면들에는 전부 이전 기준의 컬러와 타이포그래피가 적용돼 있었다.

처음엔 그냥 손으로 하기로 했다.컬러를 하나씩 바꾸고, 텍스트 스타일을 다시 확인해서 연결했다.

하지만 곧 한계가 보였다. 컬러만 해도 레이어 수가 상당한데, 타이포그래피까지 함께 정리하려니 화면 하나를 넘길 때마다 판단이 필요했다.

“이 텍스트는 Body일까, Caption일까?”
“이건 강조 텍스트니까 Strong로 봐야 하나?”

화면 수가 늘어날수록 이 판단은 점점 기준이 아니라 감이 되어갔다. 컬러와 타이포를 동시에 수동으로 적용하는 건 시간보다 정확성 면에서 더 위험한 작업처럼 느껴졌다.

멈춰서서 고민했다

한 탭에 있는 페이지만 이정도인데 언제 바꿀지 멘붕옴

이걸 정말 끝까지 손으로 해야 할까. 디자인 시스템을 다시 정비했는데, 적용 단계에서 또 다른 레거시를 만드는 건 아닐까. 플러그인을 만들 생각이 들었다. 하지만 바로 확신이 생기진 않았다.

‘이걸 만들다 실패하면?’

‘그 시간에 그냥 적용하는 게 더 빠른 건 아닐까?’

그래도 결론은 명확해졌다. 이 작업을 그대로 밀어붙이는 쪽이 더 위험해 보였다.

자동화의 범위를 다시 정의했다

자동화를 하기로 마음먹고 나서 가장 먼저 정리해야 했던 건 이거였다. 이건 단순히 컬러를 자동으로 바꾸는 문제가 아니었다.

재정비된 디자인 시스템을 기존 화면에 일관되게 적용하는 방법이 필요했다. 컬러와 타이포그래피를 각각 따로 처리하면 결국 기준은 또 흐트러질 가능성이 컸다.그래서 적용 자동화의 범위를 디자인 시스템 전체로 확장했다.

컬러 적용 기준

컬러는 두 가지 기준으로 접근했다.

1. 색상값 유사도였다. 기존 색상과 수치적으로 가까운 컬러들을 먼저 추렸다.

2.시맨틱 매칭이었다. 같은 색상이라도 텍스트인지, 아이콘인지, 배경인지에 따라 의미는 완전히 달랐다.

그래서 레이어의 맥락을 먼저 판단하고, 그 맥락에 맞는 시맨틱 컬러에 우선순위를 두었다.

단순히 “비슷한 색”이 아니라 “이 자리에 쓰일 이유가 있는 색”을 기준으로 삼았다.

타이포그래피 적용 기준

타이포그래피도 같은 방식으로 접근했다.텍스트 레이어를 스캔해서 재정비된 텍스트 스타일과 연결하되,

자동으로 판단하기 애매한 경우는 직접 확인할 수 있도록 남겼다. 모든 텍스트를 한 번에 바꾸는 게 아니라,

기존 화면의 맥락을 최대한 보존하는 방식을 택했다. 덕분에 화면마다 미묘하게 달라지던 텍스트 기준도

한 번에 정리할 수 있었다.

기존 스타일과 비슷한 폰트로 매칭했다.

완전 자동화를 선택하지 않은 이유

여기서 또 하나의 선택이 필요했다.

버튼 한 번으로 전부 바꾸는 방식
추천 결과를 보고 확인한 뒤 적용하는 방식

처음엔 완전 자동화가 더 편해 보였다. 하지만 테스트를 해보니 마음이 편하지 않았다.

“이게 진짜 맞게 바뀐 걸까?” 확인하지 않으면 다음 화면으로 넘어가기 어려웠다. 결국 검토 후 적용 방식을 선택했다. 도구가 판단을 대신하는 게 아니라, 판단을 빠르게 도와주는 역할을 하길 바랐다.

판단은 내가 하는걸로...

결과

500개가 넘는 화면에 재정비된 디자인 시스템을 적용했다. 예상보다 훨씬 빨랐고, 무엇보다 마음이 편했다. 컬러와 타이포그래피가 같은 기준으로 정리돼 있다는 확신이 생기니 “이거 나중에 터지겠는데?”라는 불안이

거의 사라졌다.

마무리하며

이번 작업을 하면서 다시 느꼈다. 반복 작업이 보이기 시작하면 일단 멈춰서 고민해볼 필요가 있다는 것.

100% 자동화보다 통제 가능한 자동화가 현실적이라는 것.

그리고 디자이너도 문제를 정확히 정의할 수 있다면 도구를 설계할 수 있다는 것.

레거시를 정리하는 일은 여전히 부담스럽다.그래도 이번에는 처음으로 “이 정도면 괜찮게 넘겼다”는 느낌이 들었다.