Alcion

Gray, 배경과 텍스트2016.10.04

*16.10.05 컬러 업데이트 *16.10.07 shadow 업데이트
정희연님의 글( 원문 바로가기)을 보며, 자주 사용하는 그레이를 체계적으로 정리해야겠다는 다짐이 생겨 글을 쓰게 되었다. 해당 글은 절대적인 규칙은 아니며, 디자이너 스스로 규칙을 갖고 각 상황에 맞게 변형하여도 좋다.

1. 자주 사용하는 Gray 정하기

 디자이너들 마다 자주 사용하는 색상이 있다. 특히 GUI디자인 시 활용하기 가장 좋은 그레이계열은 HEX값( hexadecimal numbers)을 외워둘 만큼 자주 사용하게 된다.

 본인이 가장 자주 사용하는 그레이를 모아보았다.

- Default Gray
0
#F9F9F9
1
#EAEAEA
2
#CDCDCD
3
#BCBCBC
4
#9C9C9C
5
#6D6D6D
6
#444444
7
#353535
8
#262626
9
#151515
- Cool Gray
0
#FAFCFC
1
#EEF3F3
2
#D6DADA
3
#BCC2C2
4
#A6AEAE
5
#757B7C
6
#494D4E
7
#373A3B
8
#252727
9
#151616
 보통 우리가 자주 사용하는 기본 그레이(#eee , #666와 같은)는 Warm톤의 느낌이 있기에 Cool Gray계열의 색상 또한 따로 선정하여 사용하고 있다. 보편적으로 서비스마다 브랜드 컬러가 정해져 있고 성질도 다 다르기 때문에 상황에 맞게 사용하면 된다.

2. 활용하기

 최근 모바일 앱의 디자인의 트렌드를 살펴보면 그레이의 활용이 매우 중요함을 알 수 있다.

출처 - Complexion Reduction: A New Trend In Mobile Design
 그레이 계열은 어떤 브랜드 컬러와 함께 사용하더라도 어색함을 줄일 수 있으며 컨텐츠의 주목성을 높여준다. 잘 사용한다면 굳이 브랜드 컬러를 사용하지 않더라도 완성도가 매우 높은 결과물을 낼 수 있다. 실제로 서비스 중에서는 포인트 컬러를 블랙에 가까운 색상으로 두는 곳들도 많다.

 무엇보다도 가장 큰 장점은 그레이의 각 명도의 차이를 이용하여 UI요소에 기능성을 부여 할 수 있는 점이다.

 한 요소(배경, 텍스트 혹은 버튼 같은..)에 있어 위에서 나열했던 모든 컬러를 적용하는 것이 아님에 유의한다.

 해당 글에서는 특히 배경과 텍스트에서 어떻게 적용하고 있는지에 대해서 설명하고자 한다.

예로 밝은 Background 컬러를 사용할 때에는 White / gray_0 / gray_1만을 사용한다. 배경에 화이트와 그레이의 명도 차이를 이용하여 여백과 컨텐츠에 대한 표현이 용이하다.
Light Background
white
#FFFFFF
0
#F9F9F9
1
#EAEAEA
예시 - 여백과 컨텐츠
List component
List 1
List 2

 또한 어두운 Background 컬러를 사용할 때에는 gray_9 / gray_8만을 사용하고, 완전한 블랙(#000000)은 오히려 이질감이 들기 때문에 특별한 경우가 아니라면 배경 / 텍스트의 컬러로는 사용하지 않는다.

Dark Background
8
#262626
9
#151515
List component
List 1
List 2

 텍스트 컬러는 주로gray_2 / gray_3 / gray_6 / gray_7 를 사용한다.

 배경이 white나 gray_0인 경우에는 Title과 같은 강조 텍스트gray_7을 사용하고, Sub-title과 같은 서브 텍스트본문 텍스트gray_6를 사용한다. gray_6은 앞서 적었던 밝은 Background 컬러와 어색하지 않게 사용할 수 있다.
 gray_2gray_3은 어두운 배경에서 같은 방법으로 사용한다.

 마지막으로 상대적으로 중요하지 않은 정보를 담은 부수적인 요소비활성 상태의 텍스트는 gray_3을 사용한다.

3
#BCBCBC

비활성
6
#444444

서브
7
#353535

강조
예시 1 - 게시글
프로필사진

Lorem Ipsum

2016.10.03

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, ... 더보기


예시 2 - 비활성화

'Design'에 대한 검색 결과가 없습니다.


예시 3 - 비활성화2

삭제된 게시글 입니다.

최근에 자주 사용하게 되는 shadowgray_7을 사용한다.

쉐도우는 다른 배경과 썼을 때 어색함을 줄이기 위해 alpha값을 적용한다.

gray_7의 #353535를 RGB값(r53, g53, b53)으로 변환 한 뒤 밝은 배경과 어두운 배경에서 쓸 때 어색하지 않도록 alpha값을 조절하여 사용한다.

7
#353535

shadow
예시 - Shadow
.shadow_light {
  box-shadow: 2px 2px 6px rgba(53, 53, 53, 0.2)
}
.shadow_regular {
  box-shadow: 2px 2px 6px rgba(53, 53, 53, 0.4)
}

3. 적용하기

 자신만의 규칙을 가지고 만든 gray를 이용해 실제 디자인에 적용한다.

적용 디자인 1 적용 디자인 1
 위의 특정 상황 속에서의 배경 / 텍스트 뿐만 아니라, 선 / 버튼 / input box등... 여러 요소에서 그레이는 쓰일 수 있다.
 그레이 계열을 각 10개로 정해놓은 이유는 이 이상으로 제작 할 경우에는 관리가 안될 뿐더러 GUI에 있어 복잡도가 올라간다. 또한 프로젝트 시 갑자기 컬러를 생성해야 하는 상황을 막기 위해서다.
 자신이 자주 사용하는 컬러를 정리하여 얻을 수 있는 가장 큰 장점은, 디자인을 하거나 웹 코딩을 할 때 빠르게 진행 할 수 있다는 점이다. 또한 컬러에 대한 고민 때문에 디자인이 어색해지는 것을 막을 수 있다.

 글의 앞부분에서도 이야기 했듯이, 해당 글은 절대적인 규칙이 아니며, 각 상황에 맞게 변형여 적용하는 것이 좋다.