𝗠𝗮𝘁𝗲𝗿𝗶𝗮𝗹 𝗬𝗼𝘂 𝗼𝗻 𝘁𝗵𝗲 𝗪𝗲𝗯

𝗠𝗮𝘁𝗲𝗿𝗶𝗮𝗹 𝗬𝗼𝘂 𝗼𝗻 𝘁𝗵𝗲 𝗪𝗲𝗯

Google 디자인은 Android에서 매우 훌륭해 보입니다. 유연한 느낌을 주며, 동적 색상과 둥근 모양을 사용합니다.

웹 개발자들은 다른 현실에 직면해 있습니다. 이러한 테마를 브라우저로 가져오는 데는 기술적인 장애물이 따릅니다.

Material Design 3를 웹으로 옮기는 것에 관한 새로운 글을 작성했습니다. React와 Angular에서 어떻게 작동하는지 살펴봅니다.

다루는 내용은 다음과 같습니다:

• 동적 색상과 SSR: 런타임에 컬러 팔레트를 계산하면 문제가 발생합니다. 이는 종종 스타일이 적용되지 않은 콘텐츠가 잠깐 나타나는 현상(flash of unstyled content)을 초래합니다.
• 레이아웃 기하학: 그리드를 깨뜨리지 않으면서 큰 코너 반경(corner radiuses)과 셰이프 토큰(shape tokens)을 관리하는 방법.
• 디자인 토큰 캡슐화: MUI나 Angular Material 같은 라이브러리를 통해 커스텀 토큰을 전달하는 방법.

CSS 변수나 테마 프로바이더(theme providers)를 다룬다면 이 글을 참고하세요.

전체 기사는 여기서 읽어보세요: https://dev.to/matin676/the-web-wasnt-built-for-material-you-but-we-build-it-anyway-2gdc