Ui

Design Token은 색상, 타이포그래피, 간격, 그림자 같은 디자인 결정을 이름 있는 변수로 추상화한 것이다. 컴포넌트가 직접 헥스코드를 박지 않고 토큰을 참조하면, 브랜드 변경이나 다크모드 구현이 토큰 수정 하나로 전체에 반영된다. 토큰 계층 구조, 실제 구현 방법, 그리고 Design System과의 관계를 설명한다.

Design System은 토큰, 컴포넌트, 패턴, 가이드라인을 하나의 시스템으로 묶어 제품 전체의 일관성을 유지하는 체계다. 원자 디자인 방법론으로 컴포넌트를 계층화하고, Storybook으로 문서화하는 방법, 그리고 Design System을 도입할 때의 현실적인 트레이드오프를 설명한다.

타이포그래피는 텍스트가 어떻게 보이는지를 결정한다. 폰트 크기, 행간, 자간, 굵기를 체계 없이 쓰면 화면마다 느낌이 달라지고 위계가 흐려진다. 타이포그래피 스케일로 크기 체계를 정하고, 가독성 좋은 line-height를 설정하고, 웹에서 반응형 타이포그래피를 구현하는 방법을 설명한다.

간격이 일관되지 않으면 화면이 어수선해 보인다. 8pt 그리드 시스템은 모든 간격을 8의 배수로 정의해 시각적 일관성을 만든다. 간격이 정보 구조를 표현하는 방식, 컴포넌트 내부와 외부 간격의 차이, 그리고 레이아웃 컴포넌트로 간격을 관리하는 방법을 설명한다.

접근성은 장애가 있는 사용자를 위한 것이기도 하지만, 동시에 모든 사용자의 경험을 개선한다. 색상 대비 기준, 키보드만으로 이동 가능한 UI, 스크린 리더를 위한 ARIA 속성, 그리고 실무에서 가장 자주 놓치는 접근성 체크포인트를 설명한다.

마이크로인터랙션은 사용자가 행동을 취했을 때 인터페이스가 반응하는 작은 순간이다. 버튼을 눌렀을 때 눌리는 느낌, 저장이 완료됐을 때 체크마크, 에러가 발생했을 때 흔들림. 이 작은 피드백들이 쌓여 제품의 완성도를 결정한다. 트리거, 규칙, 피드백, 루프 4단계 구조와 실제 구현 방법을 설명한다.

반응형 디자인은 하나의 코드베이스가 모바일부터 데스크탑까지 다양한 화면 크기에서 잘 동작하도록 하는 접근 방식이다. 모바일 우선 설계 원칙, 브레이크포인트 설정 방법, CSS Grid와 Flexbox로 유동적인 레이아웃을 만드는 방법, 그리고 자주 발생하는 문제들을 설명한다.