반응형

DesignToken 2

디자인 토큰 네이밍 완전 정리 – KRDS vs Material Design 비교

안녕하세요 찐망고입니다. 이전 포스팅에서 피그마의 Variable을 다뤘고, 디자인 토큰이 어떤 개념인지도 대충 알겠다! 싶다면, 이제는 여러 디자인 시스템에서 실제로 토큰 네이밍을 어떻게 하고 있는지 살펴보는 게 순서겠죠. 디자인 토큰은 디자인 시스템의 스타일 가이드 요소인 색상, 글자, 간격 같은 속성을 변수로 정의해 코드화한 값입니다.반복적으로 사용되는 디자인 속성을 효율적으로 관리하기 위한 일종의 추상화된 변수라고 할 수 있죠.즉, 자주 사용하는 스타일 속성을 정의하고 이를 코드로 변환하면 디자인 시스템 전반에 걸쳐 일관된 스타일을 유지할 수 있게 됩니다. 가장 대표적인 토큰은 구글의 머터리얼 디자인 토큰이에요. 피그마에서 바로 쓸 수 있는 머터리얼3 디자인 키트도 제공되고 있죠. 클릭..

그래서 디자인 토큰(Design Token)이 먼데? 피그마 Variable이랑 무슨 관계야?

안녕하세요! 찐망고 입니다.혹시 디자인 토큰에 대해서 들어보신분 🤚 이전포스팅에서 Variable에 대해서 이야기하면서 나온게 토큰이죠? 피그마는 이젠 디자인과 개발 협업을 도와주는 프로그램으로 자리잡고 있어요.HTML은 프로그래밍언어가 아니죠? CSS도 마찬가지죠 하지만 CSS는 은근 까다로운 친구란 말이죠.쉽게 봤다가 뒷걸음질 몇번 쳐야해 그리고 또 CSS도 꾸준히 새로운 기능이 추가돼서 놓치면..하지만 모 어렵지는 않어 ㅋㅋ 여튼, CSS를 쓰기 불편했던 것 중에 하나가 반복되는 셀렉터와 반복되는 속성들 때문인것도 있거든요.그래서 등장한게 SASS/LESS 같은 전처리기들인데..여기서는 변수를 도입해서$primary-color: #1A1A1A; 이렇게 한번만 정의해두고, 필요할 때마다 불러다 ..

반응형