Concept practice
디자인 토큰: 반복되는 선택에 이름 붙이기
먼저 상황을 판단한 뒤, 설명과 내 예시를 확인해 보세요.
1. 판단하기
여러 화면에서 쓸 색의 '의미 토큰' 이름으로 가장 알맞은 것은?
선택하기 전에는 맞음·틀림을 표시하지 않습니다.
답과 설명 먼저 보기
추천 답: color-action
맞다. 의미 토큰은 실제 색상값보다 역할을 이름에 담아, 전역 스타일과 원시값을 연결한다.
한 번의 수정이 퍼지는 구조
2. 비교하고 조작하기
디자인 토큰은 색, 간격, 글자 크기, 모서리 반경처럼 반복되는 디자인 결정을 이름과 값으로 저장한 작은 약속이다. 원시 토큰은 값 자체를, 의미 토큰은 '행동용 색'처럼 용도를 표현한다.
첫 사례는 버튼마다 파랑 값을 직접 입력해 비슷하지만 다른 색이 생긴다. 둘째 사례는 `color-action`이라는 이름을 여러 버튼이 함께 써서 브랜드 색을 바꿀 때 한 규칙을 고친다.
자주 생기는 오해
토큰은 개발자만 쓰는 코드 변수라는 오해가 있다. 먼저 팀의 디자인 결정을 공유하는 언어이며, 코드로 옮길 수도 있다.
눈으로 비교하기
한 토큰이 여러 요소를 함께 바꾸는 모습
색을 바꾸면 버튼, 배지, 링크가 같은 규칙으로 바뀝니다. 각각을 따로 고치는 방식과 비교해 보세요.
팀의 다음 실험을 정리합니다
안내 링크 예시 예시 버튼3. 내 작업에 옮기기
한 장면을 적어 보세요
작업에서 세 번 이상 반복되는 선택 하나를 찾아 '무엇에 쓰는가'가 드러나는 이름을 붙여 보세요.
이 메모는 이 기기와 브라우저에만 저장됩니다. 점수나 이해도는 기록하지 않습니다.
다음 검토
답한 기록과 다시 볼 약속
아직 답을 확인하지 않았습니다. 한 번의 선택은 이해도 점수가 아니라, 다시 살펴볼 출발점입니다.
예시
카드 간격을 `space-card`로 묶으면 웹 화면과 이메일 모듈이 같은 여백 규칙을 공유할 수 있다.
함께 적용하기
이 개념을 써 본 기록
직접 적용한 과정과 달라진 점을 적어 보세요. 제출한 기록은 검토 후 공개됩니다.
위 메모에서 공유할 부분을 복사해 다음 작성 화면에 붙여 넣으세요. 적용 기록은 500자까지 작성할 수 있습니다.
아직 공개된 적용 기록이 없습니다. 첫 기록을 남겨 보세요.
더 읽을 자료
다음 개념: 컨텍스트 윈도우: 지금 함께 다루는 범위 →
개념을 썼으면 → S0 첫 빌드
이제 내 아이디어에 적용해 봐요. S0에서 첫 결과물을 만드는 무료 실습을 시작해요.
S0 무료 실습 시작하기 →