Summary
최근 Bootcamp 에서 Code Review 를 받으면서 Comment 를 정리하는 과정에서 기존에 너무 얕게만 이해하고 있던 RGB, RGBA, HSL, OKLCH 등 CSS 에서 색상을 표현하는 다양한 방식들에 대해 학습해보았습니다. 아직도 학습하지 못 한 부분이 많고, 학습한 내용 조차도 복잡하고 양도 많다 보니, 정리를 겸해 본 포스트에 정리해보았습니다.
특히,
shadcn/ui Component 를 활용해보면서, 이 Library 에서 제공하는 CLI 도구가 oklch Color Model 을 기본 Theme 시스템에 자동으로 적용하는 방식을 확인했고, 이와 관련된 내용도 추가해보았습니다.색상 표현 방식
RGB / RGBA
- RGB 는 Red, Green, Blue 의 조합으로 색을 표현합니다. 각 채널은 0 부터 255 까지의 정수 또는 0 부터 ~ 100% 까지의 % 값으로 표현할 수 있습니다.
- RGBA 는 RGB 에 추가 채널로 Alpha(투명도) 값을 추가해 색의 불투명도를 조절할 수 있습니다.
- e.g.
rgba(255, 0, 0, 0.5)
- RGB 와 RGBA 는 직관적이지만, 색상 간의 관계를 조절하기에 한계가 있습니다. 예를 들어, 채도를 올리거나 밝기를 조정하는 등의 작업은 직접 수치 계산이 필요할 수 있어서 직관적이지 않습니다.
HSL / HSLA
- HSL 은 Hue(색상), Saturation(채도), Lightness(명도) 로 구성됩니다.
- Hue 는 0 부터 ~ 360도 까지 각도 값으로 표현하는 원형 색상환 구조로, Saturation 과 Lightness 는 % 값으로 표현할 수 있습니다.
- e.g.
hsl(120, 100%, 50%)
- HSLA 는 RGBA 와 마찬가지로 HSL 에 추가로 Alpha 채널이 필요한 경우 사용할 수 있습니다.
- 명도나 채도를 직관적으로 조절할 수 있어, 색상 계열을 설계할 때 RGB / RGBA 방식보다 편리합니다.
OKLCH
- OKLCH 는 비교적 최신 색상 모델 중 하나로, 인간의 시각 지각 특성을 더 정확하게 반영하는 인간 친화적인 모델로, 사람이 눈으로 봤을 때의 차이를 기준으로 LCH 라는 색상의 거리 계산 값을 활용합니다.
- LCH 는 Lightness(L), Chroma(C), Hue(H) 를 기준으로 색을 표현함을 의미합니다.
- L 은 밝기, C 는 채도(강도), H 는 색상(각도) 를 표현합니다.
- e.g.
oklch(0.75 0.2 240)
- 색상 대비(Color Contrast Ratio), 접근성 설계에 유리합니다.
- 색상 조절이 논리적이며, 조화로운 Palette 를 구성하는 데 탁월합니다.
- 시각적으로 균일한 색상 계열 생성에 유리하며, 기존 HSL 과 비교해보면 명도를 조정할 때 색상이 죽는 문제를 어느 정도 해소해줍니다.
- Developer 들이 Designer 의 시안을 작성된 그대로 구현하였는데도 환경에 따라 색상에 오차가 생기는 현상이 자주 발생하곤 하는데, OKLCH 색상 모델은 이런 문제들도 어느 정도 해소해줍니다.
- 단, 구형 Browser Support 상태를 참고해보고, 지원하지 않는 경우를 대비하여
@supports not같은 기능을 활용하여 fallback 을 병행해주는 것이 좋습니다.
shadcn/ui 와 OKLCH 의 연관성
shadcn/ui 는 인기 있는 React 기반 UI Component Library 로, TailwindCSS 를 기반으로 다양한 UI 구성 요소를 제공하는 도구입니다.이 라이브러리에서 제공하는 CLI 도구를 활용하여 Component 를 추가해보면 기본적으로 tailwind 설정을 감지하여 config 파일이나 css 파일 내부에 theme 색상 설정이
oklch() 형태의 색상 코드로 자동 생성됩니다.이런 Boilerplate 구조를 통해
tailwindcss 최신 기능과 함께 OKLCH 색상 모델을 적극 활용하려는 방향성을 추측해볼 수 있습니다.개인적인 생각으로는 OKLCH 기반의 색상 설계는 명확한 명도와 채도 제어가 가능하다는 점에서, Design Token 을 기반으로 하는 Design System 의 본래 목적과 잘 부합하는 것 같습니다. 특히, Team 단위로 UI 를 구성하는 상황을 가정해보면, 색상 규칙을 정형화하는 데 큰 도움을 준다고 생각하였습니다.
색상을 표현하는 Modern Trend 를 이해하기 위한 노력
색상은 UI 의 완성도를 결정짓는 중요한 요소라고 생각합니다. 하지만 기존의 RGB 나 HSL 방식으로는 정확한 컨트롤이 어렵다는 불편함을 느낄 때가 있습니다.
OKLCH 에 대해서 정리하면서 색상을 인간이 지각할 수 있는 수치로 오차를 최소화하여 설계하는 접근 방식에 대해 다시 한 번 감탄하게 되었고,
shadcn/ui 같은 많이 사용되는 UI Library 에서도 이런 최신 모델을 적극 활용하려는 사례를 통해 색상을 표현하는 Modern Trend 에 대해서 생각해볼 수 있었던 것 같습니다.본 포스트는 현재까지의 학습하고 이해한 내용을 정리한 것으로, 앞으로 학습과 경험을 통해 지속적으로 갱신될 수 있다는 것을 감안하고 읽어주시기 바랍니다.