김한솔

다크모드는 라이트모드의 반전상태일까 - 다크모드를 단순히 라이트모드의 반전색으로 만들 수 없는 이유

김한솔 — Tue, 25 Mar 2025 14:59:43 GMT

과거 회사에서 디자인 시스템을 재정비할 때 훗날 사용할지도 몰라 다크모드를 함께 구현하려고 했다. 당시에는 흰색(#FFFFFF) 배경을 기준으로 라이트모드의 컬러 스케일을 만들었기 때문에 다크모드는 단순히 검은색(#000000) 배경을 기준으로 기존의 컬러 스케일을 반전시키면 될 거라 생각했다. 하지만 만들면서 다크모드가 단순히 라이트모드의 반전상태가 아니

기본적인 컬러 스케일의 구성 - 디자인 시스템에서 컬러 스케일을 설정하는 법

김한솔 — Sun, 16 Mar 2025 14:40:38 GMT

디자인 시스템에서 스타일 가이드를 제작할 때 보편적으로 따르는 규칙들이 있다. 이러한 규칙들은 오랜 시간 정형화되어 있었기 때문에 왜 그런 규칙들이 생겨났는지 의문을 가져본 적이 없다. 이번에 디자인 시스템에 대한 내용을 정리하면서 그동안 당연하게 여겼던 규칙들의 근거를 살펴봤다. 컬러 스케일을 세 자리 숫자로 쓰는 이유 컬러 스케일을 세 자리 숫자로(

명도를 이용해 컬러 스케일 제작하기 - 명도대비율만으로도 균등한 값의 컬러 스케일을 추출할 수 있을까?

김한솔 — Tue, 11 Mar 2025 14:51:37 GMT

지금까지 진행한 실험의 목적은 적절한 명도대비율을 가지고 색상값과 상관없이 일관된 명도를 가진 컬러 스케일을 추출하는 것이다. 목적을 달성하기 위해 배경지식으로 명도대비율의 개념과 다양한 컬러 모델, 그리고 각 모델별로 명도를 구하는 공식까지 깊이 파고들었다. 이제 우리는 명도대비율로부터 상대 휘도값을 도출할 수 있으며, 해당 값을 이용해 CIELAB의

왜 명도는 색상 모델마다 다르게 적용될까 - 색상 모델이 명도를 구하는 공식

김한솔 — Sun, 09 Mar 2025 14:56:35 GMT

빛은 파장(Spectrum)으로 움직이며, 이 파장에 따라 색이 결정되고 우리 눈은 각 파장을 다른 색으로 인식한다. 인간의 눈이 관측할 수 있는 400~750nm 파장을 가시광선이라고 하며, 사람의 눈은 원추세포를 통해 이 가시광선을 색으로 인지한다. 청색원추세포는 420-440nm의 파장을 파란색으로, 녹색원추세포는 534-545mn의 파장을 초록색으로

Contrast Ratio에서 명도 추출하기 - WCAG를 고려한 명도대비율만을 가지고 균형 잡힌 컬러 스케일 생성하기

김한솔 — Fri, 07 Mar 2025 10:48:38 GMT

앞서 우리는 디자인 시스템에서 명도가 왜 중요한지 알아보았다. 컬러 스케일에서 WCAG(Web Content Accessibility Guidelines)를 고려해 균등한 명도대비를 정하면 가독성과 접근성, 그리고 사용성을 보장할 수 있을 것이다. 이러한 맥락에서 Adobe Design Spectrum은 WCAG를 고려해 적절한 명도대비율로 컬러 시스템을

명도: 디자인 시스템의 색을 정할 때 가장 중요한 요소 - 색의 3요소 중 명도가 왜 디자인 시스템에서 가장 중요한지 알아보자

김한솔 — Thu, 06 Mar 2025 01:35:15 GMT

색의 3요소 색을 구성하는 핵심 요소는 색상(Hue), 채도(Saturation), 그리고 명도(Lightness)다. 색상(Hue)은 색을 다른 색과 구별하게 하는 고유한 특질이다. 우리가 알고 있는 빨강, 파랑, 초록처럼 색상환의 색 자체를 나타내며, 빛깔이라고도 한다. 채도(Saturation 또는 Chroma)는 색상의 선명도를 나타내며, 색이