[ReactNative]Google Material Design Color : 패키지 install

계속해서 리액트 네이티브를 공부하는 중이다. 이제 컴포넌트 등 기본적인 요소에 대한 공부를 슬슬 끝마쳤나보다. 컴포넌트 스타일링 챕터를 공부했다!

나는 무언가를 개발하기 전에 무조건 테마를 고르고 시작하는 편인데, 구체적인 레이아웃들 보다는 컬러감, 컬러 조합 등을 많이 찾아본다. 그래서 color picker도 내게는 없어서는 안될 존재이다. 그러다 보니 이번 챕터가 되게 반가웠는데, 그 중에서도 구글 머터리얼 디자인 (Google Material Design)의 가이드라인이 무척 흥미로워 번역과 적용을 함께 해 보려고 한다.

 

Googe Materail Design - https://material.io/design

 

오늘 살펴볼 것은 이 중에서도 왼쪽 메뉴에 보이는 Color , 색상 가이드 라인이다.

 

 

우리가 그동안 css 등에서 표현하던 16진수 RGB 표현식과 달리 무척 쉽게 색을 표현할 수 있다. 색상을 blue, pink 등 이름으로 명시하고, 그 뒤에 밝기를 수치로 붙여 표현하면 된다. blue500처럼 말이다.(물론 이전 표현식도 사용한다.)

 

그러면 아래와 같이 우리가 자주 보았던 안드로이드 앱의 느낌이 좀 난다.

 

 

사이트에 접속해보면 컬러 팔레트가 있어서 여기서 직접 컬러를 추출할 수도 있다.

 

이를 잘 이용하면 어플리케이션의 컬러감, 단일 테마 뿐이 아니라 라이트모드/다크모드에 따른 테마 변경, 다중테마 등 다양한 기능과 디자인을 적용할 수 있을 것이다.

 

 패키지 package install 

RGB 값이 아닌 구글 머터리얼 디자인의 표현식으로 색을 지정하고 싶다면 다음을 install 하면 된다.

npm i react-native-vector-icons react-native-paper

 

그리고 import {Colors} from 'react-native-paper' 를 상단에 추가해주면 되겠다.

그럼 인스톨한 Colors를 통해 Colors.blue500 등과 같은 표현이 가능해진다.

 

색을 좀 더 세분화해서 지정하고 싶다면, 밝기나 투명도 조절이 쉽게 가능한 다음의 패키지를 install 하면 된다.

npm i color
npm i -D @types/color

나는 타입스크립트를 적용하여 리액트 네이티브 앱을 개발중이므로  @types/color 패키지를 지정하여 install 하였다.

 

그럼 이제 위의 패키지들을 모두 install 했으니 다음과 같은 표현이 가능하다.

 

import {Colors} from 'react-native-paper'
import Color from 'color'

console.log("color : ",
	Color(Colors.blue500).alpha(0.5).lighten(0.5).string())
);

Colors.blue500 색을 알파값 절반(alpha(0.5)), 밝기 절반(lighten(0.5)) 으로 셋팅해준 것이다. 그 값을 .string()으로 받을 수 있다. 원래는 이렇게 16진수 string으로 입력해줘야 했던 것들을 다양한 메소드를 통해 쉽게 색 지정을 할 수 있다.

 

 

내가 참고한 도서는 다음의 글에 있다.https://iworldt.tistory.com/27

[ReactNative]컴포넌트 이벤트 속성과 API