초보도 쉽게 배우는 UI 컬러 선택법, 디자인 완성의 비밀!

색상은 배울수록 이전에 몰랐던 것이 얼마나 많은지 깨닫게 되는 그런 것 중 하나이며, 정말 빨리 복잡해집니다.

 하지만 UI 분야의 경우 색상 과학자가 될 필요는 없습니다 .

 제 경험에 따르면 색상은 UI에서 가장 쉬운 부분입니다.

 까다로운 점은 언제 연주를 멈추고, 효과가 있는 것을 골라야 할지 아는 것입니다 .

 실제로 효과가 있는 것은 다음과 같습니다.

 배경, 텍스트, 테두리 및 기타 여러 요소에 중립적인 색상을 사용합니다.

 주요 작업에 브랜드나 기본 색상을 사용 하고 약간의 개성을 더합니다.

 마지막으로, 서로 다른 상태를 전달하기 위한 의미적 색상이 있을 수 있습니다.

  앱과 UI를 디자인하는 데 필요한 색상은 모두 이렇습니다.

 제가 색깔이라고 말할 때 , 실제로 제가 의미하는 것은 음영입니다.

 UI의 모든 곳에서 이런 것을 볼 수 있습니다.

 버튼이나 그라데이션 배경 위에 마우스를 올려 놓았을 때처럼요 .

 음영을 만들려면 올바른 색상 형식을 선택해야 합니다.

 대부분의 사람들은 16진수와 RGB 색상 값에 익숙하지만, 색상 팔레트를 만들 때는 이 값들이 최악입니다  .

 우리가 배경색으로 사용하는 회색의 세 가지 음영과 같습니다 .

 시각적으로는 매우 유사해 보이지만 코드는 그렇지 않습니다.

 이제 이를 더 직관적인 색상 형식과 비교해 보면 코드가 실제로 의미가 있음을 알 수 있습니다.

 색상환에서 색조는 0에서 360까지 표현되는 실제 색상입니다.

 그리고 채도는 0에서 100까지 표현되며, 색상의 강도를 제어합니다 .

 우리의 경우에는 그것을 0으로 설정했습니다 .

 즉, 색조로 어떤 색상을 선택하든 항상 중립적이라는 뜻입니다.

 마지막으로 밝기 값을 사용하여 여러 가지 음영을 만듭니다.

 추측 없이 간단하고 쉽게 하모닉 팔레트를 만들 수 있는 수학입니다 .

 이제 색상을 사용하는 방법을 배웠으니 UI 의 가장 눈에 띄는 색상인 배경색과 텍스트 색상을 만들어 보겠습니다.

 솔직히 말해서 다크 모드부터 시작하겠습니다 .

 그렇죠, 라이트 모드도 다루겠습니다.

 채도는 0으로 유지될 수 있는데,  중립적인 팔레트를 만들기 때문입니다.

 채도가 없으면 색조는 중요하지 않습니다.

 영상 후반부에서는 색조와 다른 중요한 것들에 대해 다루겠습니다 .

 색조와 채도를 모두 0으로 설정하면 기본 색상의 명도는 0%로 시작합니다 .

 그다음 5%는  카드나 다른 표면 요소에 사용할 수 있는 다음 색조로 사용하고, 마지막으로 10%는 가장 중요하거나 돋보이는 요소를 강조하는 데 사용합니다.

 밝은 요소는 위쪽에 나타나며 사용자에게 더 가깝게 느껴집니다.

 그러니 당연히 중요한 일에만 사용해야죠.

 텍스트도 마찬가지입니다.

 제목과 중요한 요소에는 선명하고 대비가 큰 색상을 사용 하고 나머지 부분에는 약간 차분한 색조를 사용하세요.

 아직 읽을 수는 있지만, 항상 눈앞에서 볼 수는 없습니다.

 그래서 우리는 제목에 100% 밝기를 사용하지 않습니다 .

 눈에 너무 심해 보일 거예요.

 강렬함에 대해 말하자면, 이 색상을 밝은 모드로 바꿔보겠습니다.

 먼저 밝기 값을 100에서 빼세요.

 그러면 좋은 시작점이 될 겁니다 .

 그런 다음 눈과 상식을 사용하여 값을 수동으로 조정합니다 .

 예를 들어, 왜 맨 위의 요소는 가장 어두운 색상을 가지고 있을까요? 빛은 보통 위에서부터 나오므로, 가장 밝은 색이어야 하고, 기본색은 가장 어두워야 합니다.

 그래서 저는 배경색을 BG 어둡게 또는 BG 밝게라고 부르죠.

 따라서 BG 어둡기는 가장 어두운 색조 이고 BG 밝기는 가장 밝은 색조입니다 .

 어둡거나 밝은 모드에 관계없이요.

 하지만 텍스트 색상은 그렇게 할 수 없습니다.

 그러니 두 가지 경우 모두에 의미가 있는 이름을 사용하세요.

 이런 종류의 논리와 시각적 사고가 만나는 것을 좋아한다면, 이 영상을 후원한 Brilliant를 좋아할 것입니다.

 Brilliant는 독특하게 효과적인 학습 앱으로 디자인되었습니다 .

 각 수업은  개념을 가지고 놀 수 있는 실습적인 문제 해결로 가득 차 있으며, 이 방법은 강의 영상을 시청하는 것 보다 6배 더 효과적인 것으로 입증되었습니다 .

 또한 Brilliant의 모든 콘텐츠는 최고 수준의 조직에서 근무한 수상 경력이 있는 교사와 전문가로 구성된 팀에서 제작했으므로  , 매 수업을 통해 더 나은 사고력과 문제 해결 능력을 키울 수 있습니다 .

 코딩을 배우든, 공식을 만들든, 전기 회로를 설계하든, AI와 같은 최첨단 주제를 탐색하여 이러한 대규모 언어 모델이 실제로 작동하는 방식을 이해하든, Brilliant에는 말 그대로 모든 것이 있으며, 30일 동안 무료로 모두 체험해 볼 수 있습니다.

 brilliant.

org/sid를 방문하거나 설명에 있는 링크를 클릭하세요.

 게다가 연간 프리미엄 구독료도 20% 할인됩니다 .

 이제 배경색과 텍스트 색상을 정했습니다.

 계속 진행하기 전에, 우리가 여기까지 오게 된 과정을 간략히 살펴보겠습니다.

 우리는 색상이 코드에서 실제로 의미를 갖도록 HSL 색상 형식을 선택했습니다.

 우리는  중립적인 색상 팔레트를 원했고 채도가 없으면 색상이 중요하지 않기 때문에 색조와 채도를 0으로 유지했습니다.

 그런 다음 밝기 값을 조정하여 배경에 세 가지 음영을 , 텍스트 색상에 두 가지 음영을 적용했습니다 .

 마지막으로 밝기 값을 100에서 빼서 밝은 모드에서 색상을 반전했습니다.

 이를 통해 좋은 시작점을 얻을 수 있었습니다.

 하지만 BG를 어둡게 하고 BG를 밝게 하는 것은 의미가 없었습니다.

 그래서 우리는 최종 색상을 얻기 위해 색상을 바꾸었습니다 .

 지금까지 우리가 한 일은 전부입니다 .

 좋습니다.

 이제 주제를 바꿔서 CSS를 작성해 보겠습니다.

 우선, 색상을 이렇게 설정하세요.

 기본 테마는 루트에 넣고 다른 테마는 이렇게 본문 선택기에 넣을 수 있습니다 .

 그런 다음 JavaScript 한 줄을 사용하여 이를 앞뒤로 전환합니다.

 또는 이 미디어 쿼리에 라이트 모드를 래핑하여 사용자가 선호하는 테마에 자동으로 적응하도록 할 수도 있습니다 .

 이를 구현하는 방법은 여러 가지가 있으며, 구현 방법은 프레임워크에 따라 달라지거나 사용자에게 얼마나 많은 제어권을 주고 싶어하는지에 따라 달라집니다.

 하지만 가장 중요한 작업은 색상을 정의하는 것입니다.

 나머지는 에이전트를 통해 처리하면 됩니다.

 이 영상에서는 간단한 논리를 고수하겠습니다 .

 이런 식으로 색상 변수를 정의한 다음 해당 변수를 사용하여 배경색과 텍스트 색상을 설정합니다.

 이 시점에서 우리의 UI는 너무 지루해 보입니다.

 이를 수정하기 위해 네 개의 속성을 더 사용하려고 합니다 .

 언제나 그렇듯이 다크 모드부터 시작해 보겠습니다 .

 테두리는 뚜렷하게 보여야 하지만 너무 방해가 되어서는 안 됩니다.

 그런 다음  배경색을 사용하여 간단한 그라데이션을 만듭니다.

 너무 산만하다고 생각되면 약간 조정하여 마우스를 올리면 전체 그래디언트가 나타나도록 할 수 있습니다.

 이렇게 하면 빛이 위에서 오는 것처럼 윗부분이 반짝반짝 빛나 보입니다 .

 이 효과를 실제로 표현하려면 위쪽 테두리에 더 밝은 색상을 사용하면 됩니다 .

 그리고 저는 이것을, 추측하신 대로, 하이라이트라고 부르겠습니다.

 이제 이것이 밝은 모드에서 어떻게 보이는지 살펴보겠습니다 .

 아직 밝은 모드에 대한 그래디언트를 정의하지 않았기 때문에 여전히 어두운 모드 버전이 표시됩니다.

 그러면 테두리 그라데이션을 복사해서 먼저 밝은 모드로 강조해 보겠습니다.

 이것도 좋지만, 10배 더 좋게 만들 수 있어요 .

 우선, 하이라이트 및 라이트 모드는 하이라이트처럼 보이지 않고 , 단순한 테두리처럼 보입니다.

 그러면 밝기를 최대로 높여보죠.

 이제 국경은 아무런 의미도 없고 몹시 보기 흉해졌습니다.

 이 문제를 해결하려면  테두리로 직접 적용할 수 있는 새 변수를 만들어야 합니다.

 그런 다음 테두리 색상을 밝은 모드의 배경색과 일치하도록 변경하여 카드와 어울리도록 합니다.

 마지막으로 깊이를 주기 위해 멋진 그림자를 추가해 보겠습니다.

  빛이 있는 곳에는 그림자가 있기 때문입니다.

 그림자에는 약간의 투명도가 필요하므로  0에서 1 사이의 알파 값을 사용해야 합니다.

 더욱 사실적인 효과를 얻으려면 항상 어둡고 짧은 그림자와 밝고 긴 그림자를 섞으세요 .

 하지만 색조나 채도에는 전혀 손을 대지 않고 여기까지 왔다는 걸 알아차리셨나요 ? 그러면 색조와 채도가 디자인에 어떤 영향을 미치는지 살펴보겠습니다 .

 저는 실시간으로 그 작업을 할 수 있는 도구를 만들었습니다 .

 저는 이미 적절한 대비, 그라데이션, 하이라이트, 그림자를 설정했습니다.

 색조와 채도를 조절하면 됩니다.

 시원하고 생기 넘치는 룩을 원하시나요, 아니면 따뜻하고 중립적인 룩을 원하시나요? 이렇게 하면 모든 것을 시도해 보고 프로젝트에 가장 적합한 균형을 찾을 수 있습니다.

 그런 다음 이 스위치를 켜서 조명 모드를 조정해야 하는지 확인하세요 .

 모든 색상을 확인해야 하며, 특히 1차 색상 과 2차 색상은 주로 버튼과 호버 상태에 사용되므로 주의하세요.

 원하는 결과가 나오면  이 버튼을 클릭하여 색상을 복사하세요.

 LCH는 대체 뭐 괜찮다는 거야? 그리고 왜 이것이 기본 색상 형식인가요? 잠깐 '괜찮아'라는 부분은 잊어버리세요.

 LCH만 봐도 알 수 있죠 .

 L과 H는 명도와 색조를 나타내는데, 이는 HSL에서 이미 알고 계실 겁니다.

 C는  채도와 비슷한 개념인 크로마를 의미하지만 0에서 100으로 가는 대신 0에서 4로 갑니다.

 UI 작업에서는 0.

15나 2 이상이 필요한 경우는 드뭅니다.

 처음에 말했듯이 색상은 배우면 배울수록 몰랐던 것이 얼마나 많은지 깨닫게 되고, 정말 빨리 복잡해지는 요소 중 하나입니다.

 색조는 이전과 마찬가지로 0~360입니다.

 채도는 0~02, 명도는 0~1입니다.

 사실 LCH는 그 자체로 색상 형식입니다.

 OKLCH는 더 새롭고 더 나은 버전입니다.

 V4 업데이트를 통해 Tailwind도 기본 색상 형식을 OKLCH로 전환했습니다.

 그러면 이 세 가지 색상 형식을 비교 하고 어떻게 다른지 살펴보겠습니다.

 HSL의 경우 가장 큰 문제는 밝기를 어떻게 처리하느냐입니다 .

 어둡고 밝은 색조는 모든 채도를 잃습니다.

 LCH와 OKLCH를 사용하면 증가가 훨씬 더 자연스럽게 보입니다.

 그런데, 몇 가지 변형을 더 보여드리고  어느 것이 더 나은지 판단은 여러분에게 맡기겠습니다.

  잠깐 살펴보겠습니다.

 잠시 멈추거나 스크린샷을 찍으세요.

 그럼, 당신은 어떻게 생각하시나요? 원하시면 HSL 코드를 그대로 복사하실 수도 있습니다.

 이 테마에는 다크 모드와 라이트 모드의 색상 형식 등 모든 것이 포함되어 있습니다 .

 CSS 파일에 코드를 복사하여 붙여넣고 디자인을 시작하세요.

 이 아름다운 버튼 바로 아래 설명에 링크를 남겨두겠습니다 .