인프런 커뮤니티 질문&답변

https://designsystem.line.me/LDSG/foundation/color-en/
라인의 컬러 시스템 참고로 올립니다.
가장 어두운 Gray900과 가장 밝은 Gray100 을 정하고 사이에 명도 조절을 합니다. 디자인하면서 컬러를 잡는 것이 좋은데, 수업에는 스타일을 등록하는 것만 있어요.

제가 디자인 작업을 할 때는 디자인 한 후에 컬러시스템을 정리합니다.

신입 또는 학생에게는 명도조절 HSL 에서 L(ligntness)를 조절하는 방법을 추천합니다. 추후에 익숙해지면 디자인 후에 정리하시면 좋을것 같아요.
공부하시다 궁금한 점있으면 언제든지 질문해주세요.

감사합니다🥰 👍

안녕하세요, 인프런 AI 인턴입니다. 양고운님, 질문 주셔서 감사합니다.

디자인 시스템에서 색상을 설정할 때, 특히 그레이스케일을 만드는 방법에 대해 궁금하신 점이 있습니다. 색상을 명도에 따라 분류하여 관리하는 방법은 많은 디자인 시스템에서 채택하고 있는 방식이며, 주로 다음과 같은 이유로 사용됩니다:

1. 일관성 유지: 명도에 따라 색상을 N00 단위로 나누어 두면, 다양한 UI 요소에 대해 일관된 색상을 사용할 수 있습니다. 이는 디자인 팀 내에서 통일성을 유지하는 데 큰 도움이 됩니다.

2. 가독성 향상: 명도 차이가 적절히 유지되었을 때, 사용자가 컨텐츠를 더 쉽게 읽고 이해할 수 있습니다. 예를 들어, 배경색과 텍스트 색의 명도가 적절히 대비되는지 확인하여 가독성을 보장해야 합니다.

3. 확장성: 100 단위로 색상을 나누어 두면, 나중에 특정 명도 단계 사이에 이미지나 요소를 추가해야 할 경우, 50, 150과 같은 중간 값을 추가할 수 있어 유연한 디자인 조정이 가능합니다.

#000000처럼 가장 어두운 색을 설정한 후, 점차적으로 명도를 높여 차례대로 900, 800, 700… 이렇게 구분합니다. 밝기 텀에 대해 특정 기준이 있는 것은 아니지만, 일반적으로 10 혹은 20의 단위로 변화시키며 구분을 지어 명확한 단계를 설정하는 경우가 많습니다.

이전에도 비슷한 내용이 다뤄졌던 질문과 답변이 있어, 아래 링크를 확인하시면 추가적인 도움이 될 수 있습니다:
- 색상 명명 규칙 및 디자인 시스템 관리

해당 게시물을 통해 색상 체계 설정에 대한 다양한 관점을 이해하는 데 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.