Frontend2 [Frontend] 작은 조각부터 쌓는 컴포넌트 설계 — Atomic Design과 UI 라이브러리를 안 쓴 이유 이 글은 디자인 토큰 위에 컴포넌트를 어떻게 체계적으로 쌓았는지, 그리고 잘 만들어진 UI 라이브러리들을 두고도 직접 컴포넌트를 만들기로 한 이유를 정리한 것입니다. 1인 개발이나 소규모 팀에서 컴포넌트 구조가 점점 뒤죽박죽이 되는 게 고민이거나, UI 라이브러리를 쓸지 직접 만들지 저울질하고 있다면 참고가 될 만한 내용입니다.함께 보면 좋은 글: 이 글은 디자인 시스템 2부작의 2편입니다. 1편에서는 색·간격·폰트를 토큰으로 묶어 일관성을 만드는 방법을 다뤘습니다. 토큰이 "값의 일관성"이라면, 이번 글은 "구조의 일관성"입니다.토큰만으로는 부족했다1편에서 색과 간격, 폰트를 토큰으로 묶고 나니 화면 사이의 시각적 어긋남은 크게 줄었습니다. 그런데 화면이 늘어나면서 다른 종류의 혼란이 찾아왔습니다. 같.. 2026. 6. 26. [Frontend] 디자인 감각이 없어도 일관된 UI 만들기 — 디자인 토큰으로 시스템에 맡기기 이 글은 디자인 감각이 부족한 개발자가, 색상·간격·폰트를 "토큰"으로 묶어서 화면마다 들쭉날쭉하던 UI를 일관되게 만든 과정을 정리한 것입니다. 별도 라이브러리 없이 객체 파일 몇 개로 시작할 수 있는 방법이라, 1인 개발이나 소규모 프로젝트에서 디자이너 없이 UI 일관성을 유지하고 싶을 때 바로 적용할 수 있습니다.함께 보면 좋은 글: 이 글은 디자인 시스템 2부작의 1편입니다. 2편에서는 이 토큰 위에 컴포넌트를 쌓는 Atomic Design 구조와, UI 라이브러리를 쓰지 않고 직접 만든 이유를 다룹니다.나는 디자인 감각이 없다솔직히 고백하면, 저는 디자인 감각이 없습니다. 색을 고르라면 한참 헤매고, 버튼 여백이 16이 맞는지 20이 맞는지를 매번 새로 고민합니다. 그런데 1인 개발이라 옆에서 .. 2026. 6. 25. 이전 1 다음
