내일은 내가 개발왕

디자인 토큰이란 무엇인가?디자인 토큰은 디자인 결정을 저장하는 작은 데이터 조각입니다. 색상, 간격, 글꼴 크기 같은 디자인 요소를 `primary-color: #3B82F6` 같은 이름-값 쌍으로 정의해 두는 것이죠.비유하자면, 레고 설명서 같은 겁니다. "빨간 블록 2개, 파란 블록 4개"라고 적혀있으면 어떤 나라에서든 똑같은 결과물을 만들 수 있겠죠? 디자인 토큰도 마찬가지입니다. 한 번 정의해 두면 웹, 앱, 심지어 마케팅 자료까지 모든 플랫폼에서 동일한 디자인을 구현할 수 있습니다. 왜 디자인 토큰이 필요한가?문제 1: 개발자마다 다른 파란색디자이너가 Figma에서 만든 버튼은 `#3B82F6`인데, 개발자 A씨는 `#3B82F6`을 쓰고, 개발자 B씨는 "비슷해 보이는" `#4A90E2`를..

웹사이트를 만들 때, 디자인을 어떻게 입힐지 고민해 본 적 있나요?HTML에 직접 색상 넣고, 크기 조절하는 건 너무 지저분하고요. 그렇다고 CSS 파일 따로 만들자니 파일도 많아지고 관리가 어렵습니다. "분명 더 좋은 방법이 있을텐데..." 하고 구글링을 시작하면, 온갖 생소한 단어들이 쏟아집니다. 결국 선택지는 크게 두 가지입니다. 하나는 JavaScript 파일 안에서 CSS를 같이 작성하는 방법(ex: styled-components, emotion)이고, 다른 하나는 미리 만들어진 디자인 조각들을 조립하는 방법(ex: Tailwind CSS)입니다.이 글에서는 각 방법이 어떻게 다른지, 어떤 상황에 어떤 걸 쓰면 좋은지 최대한 쉽게 설명해드리겠습니다. JavaScript 안에 CSS 쓰기: ..