design-system
-
실제 화면에서 쓰는 패턴을 기준으로 UI 컴포넌트 고르기
UI 라이브러리를 만들면서 컴포넌트의 범위부터 정해야 했다. 살펴본 daisyUI 목록에는 68개가 있었고, shadcn의 목록은 더 길었다. 위에서 아래로 읽으면 전부 필요해 보인다. Rating도 언젠가 쓸 자리가 있어 보이고 Carousel도 없으면 아쉬워 보인다. 그런데 이 사이트는 화면이 다섯 개다. 68개 중…
-
에이전트에게 UI 구현을 맡기기 전에 정해야 할 디자인 값
화면 설계 문서를 넘기자 구현을 맡은 에이전트가 카드 사이 여백과 빈 목록에 표시할 내용을 물었다. 버튼을 눌렀을 때의 색도 정해져 있지 않았다. 문서에는 “여백은 적당히”, “로딩 처리”라고만 적혀 있었다. 구현은 에이전트에게 맡겼다. 하나한테 다 시키면 오래 걸려서 화면을 나눠 여러…
-
같은 파란색이 화면마다 달라질 때: 디자인 토큰으로 정리하기
디자인 시안의 파란색을 CSS에 옮긴다. 버튼 하나에는 background: #3B82F6 한 줄이면 충분하다. 다음 화면에서도 같은 버튼이 필요해 그 줄을 복사한다. 몇 달 뒤에는 버튼과 링크, 배지가 모두 파란색인데 값은 조금씩 달라져 있다. 색을 바꿀 때마다 화면 전체를 찾아다니지 않으려면 값을…
