📍Semantic Tokens

Chakra UI의 Semantic Tokens를 활용하여 Color를 설정하는 방법을 소개합니다.

❓ Semantics (시맨틱) 이란?

프로그래밍에서, 시맨틱은 코드 조각의 의미를 나타냅니다. "버튼", "링크", "입력란"과 같은 요소들은 시맨틱 정보를 가지고 있습니다. 이 정보는 스크린 리더나 웹 검색 엔진과 같은 보조 기술이 해당 요소를 이해하고 사용자에게 적절한 정보를 전달하는 데 도움이 됩니다.

아래의 두 케이스 중 어떤 태그가 더 Semantic(의미론)적인 태그일까요? - <div class="header"> - <Header>헤더입니다.</Header>

header라는 명확한 의미가 있는 태그를 사용하므로써 코드의 가독성을 높일뿐 아니라 문서의 핵심요소를 빠르게 파악할 수 있습니다.

Chakra UI의 Semantic Tokens는 이러한 시맨틱 정보를 React 컴포넌트에 쉽게 부여할 수 있도록 지원합니다. 예를 들어, <Button> 컴포넌트는 시맨틱 토큰인 "button"을 가지고 있으며, <Link> 컴포넌트는 시맨틱 토큰인 "link"를 가지고 있습니다. 이러한 시맨틱 토큰은 컴포넌트의 역할을 명확하게 정의하고, 개발자와 사용자에게 일관된 경험을 제공하는 데 도움이 됩니다.

Semantic Tokens를 사용하면 Chakra UI 컴포넌트를 더 쉽게 사용하고 이해할 수 있으며, 접근성과 검색 엔진 최적화를 개선할 수 있습니다.

Next

똑플레이트의 Foundation 과 적용 과정을 이해하셨다면, 기초작업부터 같이 설정해 봅시다.

@referece

• Mozila - Semantics

• Chakra UI - Semantic-tokens