개념 학습으로
조합 · 종합 실습
디자인 시스템 컴포저
오른쪽 패널의 토큰을 바꾸면 왼쪽 웹페이지가 즉시 반응합니다. 왼쪽 요소에 마우스를 올리거나 포커스하면 그 요소에 영향주는 토큰이 패널에서 강조돼요.
이 도구는 무엇을 연습하나요
디자인 시스템의 핵심은 화면마다 값을 따로 정하지 않고, 색·간격·타이포그래피 같은 결정을디자인 토큰으로 묶어 한 곳에서 지휘하는 것입니다. 컴포저는 27개 토큰이 13개 화면 영역에 동시에 반영되는 과정을 직접 조작하며 익히는 연습장입니다.
미리보기의 요소에 마우스를 올리거나 포커스하면, 그 요소에 영향을 주는 토큰이 오른쪽 패널에서 강조됩니다. 값 하나가 어디까지 퍼지는지 원인과 결과를 짚어보세요. 조합은 이 브라우저에 자동 저장되어 다음 방문에 이어집니다.