다크모드3 디자인 토큰 (토큰 구조, 네이밍 컨벤션, 자동화 파이프라인) 버튼 하나의 컬러를 바꾸는 데 이틀이 걸렸습니다. 수동으로 화면 수십 개를 뒤지고, 개발자에게 헥스코드를 일일이 붙여 넣어서 전달하던 시절 얘기입니다. 디자인 토큰을 도입하고 나서야 그게 얼마나 비효율적인 구조였는지 실감했습니다. 이 글은 그 경험을 바탕으로, 토큰 구조 설계부터 네이밍 컨벤션, 자동화 파이프라인까지 실무에서 어떻게 작동하는지 풀어봤습니다.손으로 하나씩 고치던 시절, 토큰 구조가 바꾼 것디자인 시스템을 도입하기 전 저는 프리랜서 UI/UX 디자이너로 B2B SaaS 프로젝트를 진행하고 있었습니다. 당시의 작업 방식은 단순했지만 끔찍했습니다. 디자인 수정이 생기면 Figma에서 화면별로 일일이 컬러를 찾아 바꿔야 했고, 개발자에게 넘길 때는 "#1A1A2E입니다"처럼 헥스코드를 직접 전달했.. 2026. 4. 10. 피그마 Variables로 다크 모드 구축 (컬러 시스템, 시맨틱 컬러, 개발자 핸드오프) 프리랜서 디자이너 5년 차에 접어들던 어느 날, 30장이 넘는 화면의 다크 모드 시안을 납품했다가 개발팀에게서 "컬러가 화면마다 달라요"라는 피드백을 받은 적이 있습니다. 밤새 버튼 배경색을 바꿔놓고 그 위 텍스트 컬러는 깜빡한 것이었습니다. 그때부터 피그마 Variables를 제대로 써야겠다고 마음먹었고, 직접 써봤더니 작업 방식이 완전히 달라졌습니다.컬러 시스템을 구조부터 다시 짠다는 것저도 처음엔 디자인 토큰 방식으로 버텼습니다. 여기서 디자인 토큰(Design Token)이란 컬러, 타이포그래피, 간격 같은 디자인 속성을 이름과 값으로 저장해두는 방식으로, 일종의 디자인 변수 사전이라고 보면 됩니다. 라이트 모드 시안을 완성한 뒤 다크 모드는 수작업으로 컬러를 하나씩 교체했는데, 화면 수가 늘어날.. 2026. 4. 9. 디자인 토큰 (네이밍 컨벤션, 토큰 구조, 자동화 파이프라인) 솔직히 저는 디자인 토큰이 그냥 "색깔에 이름 붙이는 것" 정도라고 생각했습니다. 디자인 시스템을 처음 구축하던 시절, 색상 이름을 red, dark-gray, white-background 식으로 저장해 두고는 꽤 체계적이라고 자부했었으니까요. 그 착각이 얼마나 비싼 대가를 치르게 되는지는, 실제로 무너져봐야 알게 됩니다.네이밍 컨벤션 — "이름이 틀리면 시스템 전체가 흔들린다"작년에 B2B SaaS 대시보드 프로젝트에서 디자인 시스템을 처음부터 구축할 때 일입니다. 디자이너 두 명이 각자 익숙한 색상 코드를 쓰다 보니 같은 앱인데 화면마다 분위기가 달랐습니다. 버튼 배경색이 한 화면에서는 #E53935, 다른 화면에서는 #EF5350이었고, 둘 다 "빨간 버튼"으로 통했습니다. 개발자에게 "이 빨간색.. 2026. 4. 7. 이전 1 다음
