시맨틱컬러1 피그마 Variables로 다크 모드 구축 (컬러 시스템, 시맨틱 컬러, 개발자 핸드오프) 프리랜서 디자이너 5년 차에 접어들던 어느 날, 30장이 넘는 화면의 다크 모드 시안을 납품했다가 개발팀에게서 "컬러가 화면마다 달라요"라는 피드백을 받은 적이 있습니다. 밤새 버튼 배경색을 바꿔놓고 그 위 텍스트 컬러는 깜빡한 것이었습니다. 그때부터 피그마 Variables를 제대로 써야겠다고 마음먹었고, 직접 써봤더니 작업 방식이 완전히 달라졌습니다.컬러 시스템을 구조부터 다시 짠다는 것저도 처음엔 디자인 토큰 방식으로 버텼습니다. 여기서 디자인 토큰(Design Token)이란 컬러, 타이포그래피, 간격 같은 디자인 속성을 이름과 값으로 저장해두는 방식으로, 일종의 디자인 변수 사전이라고 보면 됩니다. 라이트 모드 시안을 완성한 뒤 다크 모드는 수작업으로 컬러를 하나씩 교체했는데, 화면 수가 늘어날.. 2026. 4. 9. 이전 1 다음
