[TIL/Coin Site Project] 2023/12/11

reference: https://mui.com/material-ui/customization/palette/

palette ✍️

공식문서에는, palette를 통해 사용자에게 적합하도록(=customize) 컴포넌트의 '컬러'를 수정할 수 있다고 언급되어 있다. 애초에 MUI 개발자들이 palette라는 개념을 고안해 낸 목적 자체가 커스텀에 있음을 확인할 수 있는 대목이다.

Color tokens ✍️

palette color라는 개념은 네 가지 token으로 구성된다. 여기서 말하는 token은 일반명사로서, 컬러를 구분하는 최소단위 정도로 이해하면 되겠다.

1. ``main``: 컬러의 주요 음영을 나타내는 토큰 2. ``light``: main 토큰의 더 연한 색상 3. ``dark``: main 토큰의 더 진한 색상 4. ``contrastText``: main과 대비를 이루기 위한 텍스트의 색상

네 가지 토큰에 대한 공식문서의 예제이다. 색상 코드를 살펴보면, 앞에서 이해한대로 푸르딩딩한 컬러가 조금 더 밝아지거나 어두어진다는 것을 확인할 수 있다.

Default colors ✍️

MUI의 theme은 다음과 같은 default palette colors를 드러낸다. ``theme.palette.``로 접근할 수 있다고 나와있다. 객체의 형태로 구성되어 있다는 점을 알 수 있겠다.

1. ``primary``: 주요 인터페이스 요소를 위한 색상 객체 2. ``secondary``: primary 다음으로 활용할, 인터페이스 요소를 위한 색상 객체 3. ``error``: 사용자가 반드시 인지해야 할 요소를 위한 색상 객체 4. ``warning``: 위험한 액션 또는 중요한 메세지를 위한 색상 객체 5. ``info``: 중립적인 정보를 강조하기 위한 색상 객체 6. ``success``: 사용자가 시도한 작업의 성공적인 수행 여부를 나타내기 위한 색상 객체

요약하자면, MUI는 theme이라는 객체를 통해서 6가지 default palette colors를 제공하며, 각각의 색상은 'main, light, dark' 등의 token으로 더욱 세부적으로 구분되어 있다.

Customization ✍️

1. Using a color object

가장 직접적으로 palette color를 커스텀하는 방법 중 하나는, MUI에서 제공하는 색상 객체를 import 한 뒤 적용하는 것이다.

lime과 purple 색상 객체를 가져와서 palette에 직접적으로 적용한 모습이다.

theme.palette.secondary를 backgroundColor에 적용해야 색상이 반영된다고 생각했는데, 코드를 살펴보니 color에 "secondary"라는 문자열을 대입하기만 해도 색상이 변경되는 점을 확인할 수 있었다.

2. Providing the colors directly

MUI에서 제공하는 색상 객체를 import & apply 하는 것이 아니라, 개별 색상을 직접 수정하는 방법도 있다. 이때, 하나 이상의 token이 필요한데, main token은 반드시 필요하고 light, dark, contrastText는 옵션이다. 제공되지 않은 옵션 색상은 main에 의해 자동적으로 계산된다고 한다.

main을 제외한, '정의되지 않은 옵션 컬러'에 대해서는, 자동적으로 계산된 컬러가 제공되고 있다는 점을 직접 확인했다.

Contrast threshold ✍️

'대조 임계값' 정도로 해석할 수 있겠다. 앞서 contrastText token이 있다고 언급했는데, contrastText token은 배경과 텍스트 사이의 대조를 극대화하기 위해 contrastThreshold 값을 활용하여 계산된다고 한다.

무슨말이냐면, 더 높아진 contrast threshold 값(3 -> 4.5)에 의해 background color가 더 밝아졌다고 판단한 뒤, dark한 text를 준다는 것이다. 최소 명암비인 3:1을 default로 제공한다.

문제는 처음에, 공식문서에서 contrast threshold가 비선형 곡선의 형태를 따른다고 설명한 부분이 이해되지 않았다. 그런데 이 문장이 사실상 Contrast threshold의 본질이었다.

비선형은 선형적이지 않다는 뜻이다. y=x 그래프처럼, 증가된 값을 투입하면 증가된 아웃풋을 준다는 말이 아니다. 3.2로 임계값을 설정하면 회색 텍스트가 아니라 검정색 텍스트를 반환한다는 말이다. '임계값'이라는 단어 자체에서 이미 본질을 알 수 있다.

Tonal offset ✍️

light와 dark token은 tonalOffset이라는 값을 통해 변경된 main color의 luminance이다. luminance가 뭐냔 말이다.

'휘도'라고 한다. 방사되는 빛의 밝기를 의미한다. 높아진 tonalOffset 값은 밝은 것은 더 밝게, 어두운 것은 더 어둡게 만든다.

default는 0.2이다. 두 칸정도 옮기는 효과를 낸다고 이해하면 된다. tonalOffset은 0에서 1사이의 값이며, 값이 높아질수록 밝은 것은 더 밝게 어두운 것은 더 어둡게 만든다.

Custom colors ✍️

⚠️ Custom colors 파트에서 주의해야 할 점은, default color와 달리 custom color는 자동적으로 계산되지 않는다는 것이다.

1. Provide tokens manually

custom color가 자동적으로 계산되지 않는 탓에, 개별 토큰을 모두 수동적으로 정의하는 것이 가장 간단한 커스텀 방식이다.

색상을 조정하기 위해서 '@mui/material/styles'가 제공하는 유틸리티를 활용할 수 있다.

alpha 유틸리티 함수에 색상과 투명도를 전달하여 light와 dark를 간편하게 정의할 수 있다. 또한 getContrastRatio 유틸리티 함수는 두 색상 간의 대비 비율을 반환한다. 반환된 비율을 조건문에 적용하여 text color를 지정할 수 있게 되는 것이다.

2. Generate tokens using augmentColor utility

defualt color를 계산할 때 사용되는 augmentColor 유틸리티를 통해서 light, dark, contrastText token을 생성할 수 있다. augmentColor를 활용하려면, theme을 두 단계로 만들고 main에 대한 정보를 전달해야 한다.

초기 테마를 생성하고, 해당 테마를 확장하여 salmon이라는 컬러를 추가하는 방식을 따른다.

현재로서는 이 방법이 굉장히 불편해 보인다. 하지만 필요 없다고 느껴지지는 않는다. 아무튼 그렇다!

Adding color tokens ✍️

token 자체를 추가하고 싶다면, 컬러 객체에 단순히 추가하면 된다.

darker라는 새로운 token이 추가된 모습이다. 개인의 필요에 맞게 추가하면 되겠다.

정리 ✍️

1. theme 객체에 있는 Palette를 통해 color의 지정이 가능함 ✅ 2. default color로 primary, secondary, error 등이 제공됨 ✅ 3. 각 default color 객체(=primary, secondary 등)는 main, light, dark, contrastText라는 네 가지의 token으로 구성됨 ✅ 4. MUI에서 제공하는 컬러를 사용하거나, 컬러를 직접 지정하는 방식으로 컬러의 커스텀이 가능함 ✅ 5. default color의 main을 제외한 token은, contrastThreshold와 tonalOffset이라는 값을 통해, token을 굳이 지정하지 않더라도 자동적으로 계산됨 ✅ 6. custom color는 자동 계산이 되지 않기 때문에, 직접 토큰을 지정하거나 유틸리티를 활용하는 방식을 취하여 자동 계산이 되지 않는다는 한계를 보완할 수 있음 ✅ 7. 필요한 token은 필요에 따라 단순히 추가하면 됨 ✅

회고 ✍️

구글은 모든 답을 갖고 있다. 따라서 무엇이든 개발할 수 있다. 전제조건은, 문서를 읽고 이해할 수 있는 능력이다. 개발은 곧 코딩이라고 생각해왔는데, 실상 개발은 '자료의 조사 및 이해 + 코딩'이고 전자의 비중이 압도적으로 더 크다는 점을 깨달아가는 요즘이다.

텍스트를 읽고 이해하는 능력을 함양하는 것이 코드 몇 줄 짜는 것보다 더 중요하다고 생각된다. 다양한 관점이 담긴 문서를 열심히 읽고, 내 언어로 정리하는 과정에 집중해야겠다. 독서도 더 열심히 해야겠다. 독서가 '왜' 중요한지 알려주는 어른이 있었다면 참 좋았겠다는 생각이 든다. ~~들어먹었을지는 모르겠으나!~~ 어쨌든 이제라도 알았다는 게 중요한 거지 뭐!