[flutter] enum을 이용한 ui resource 관리(2.Color)

[1.이미지(Image)] 이미지 관리

[2.컬러(Color)] 색상 관리

[3.텍스트스타일(TextStyle] 텍스트 스타일 관리

2편 컬러 사용법입니다.

이 글을 쓸때 고민이 되었던 부분중 하나가 enum을 사용하여 관리하는 것이 좋을지 기존에 플루터에서 이미 사용하고 있는 방식으로 하는 것이 좋을지 무척 고민이 되었습니다.

이유는 color 부분은 딱히 enum으로 변경한다고 해서 큰 장점이 생긴다고 생각되지 않아서 였는데요. 그래서 간략히 flutter에서 Color 제공하고 있는 방식만 소개하고 넘어갈까 합니다.

 

 

Color color = ResColors.buttonBlue;

이런 방식은 이미 flutter에서도 이렇게 제공하고 있는 부분이 있죠? 이런 방식을 동일하게 사용하는 것입니다.

 

아래와 같이 상수로 컬러를 정의해서 사용하면 됩니다.

abstract class ResColors{

static const Color buttonBlue = Color.fromRGBO(0,0,255,1);

}

이렇게 어플리케이션에서 나만의 color pattern을 사용하는 것입니다.

[예제]

abstract class ResColors{
  static const transparent = Color.fromRGBO(0, 0, 0, 0);
  static const white = Color.fromRGBO(255, 255, 255, 1.0);
  static const black = Color.fromRGBO(0, 0, 0, 1.0);
  static const greenLight_50 = Color.fromRGBO(242, 251, 247, 1.0);
  static const greenLight_100 = Color.fromRGBO(233, 246, 237, 1.0);
  static const greenLight_100F = Color.fromRGBO(212, 229, 212, 1.0); //by karzia
  static const greenLight_500 = Color.fromRGBO(1, 183, 100, 1.0);
  static const greenLight_600 = Color.fromRGBO(25, 161, 77, 1.0);
  static const grayScaleL1 = Color.fromRGBO(247, 247, 247, 1.0);
  static const grayScaleL2 = Color.fromRGBO(244, 244, 244, 1.0);
  static const grayScaleL3 = Color.fromRGBO(238, 239, 241, 1.0);
  static const grayScaleL4 = Color.fromRGBO(237, 237, 237, 1.0);

 

그런데 왜 저는 컬러(Color)를 관리하려고 할까요?

이유는 간단한데요. 협업이 쉽기 때문입니다. 색상표(Color code)가 R,G,B, A 4가지 값을 각각 0~255  만큼 가지고 있는데, 숫자로 되어있습니다.

때문에 소스코드에서 어떤 색상이 어디에 사용되어있는지를 검색하기 쉽지 않습니다.

또 협업을 하게 되는 경우 다른 사람이 작성한 코드에서 컬러값을 찾기는 더 힘들죠.

디자인 가이드가 바뀌는 경우에는 더 많은 작업이 필요해 집니다.

 

예를 들자면, 위에 현재 confirm 버튼으로 사용하고 있는  색상이 RGBO(0,0,255,1) 인데 디자이너가 색상을 좀 옅게 바꾸고 싶어서  confirm 버튼으로 디자인 된곳을 모두 RGBO(100,100, 200,1) 로 변경한다고 합시다.

그러면 개발자들은 RGBO(0,0,255,1)로 된 곳을 모두 찾아서 변경 해야 합니다. 

간혹 빠진 곳이 생기겠죠? 또 개발자중 몇명은 아직 변경 사실을 모르고 있을 수도 있습니다. 그러면 어떤 화면은 적용이 늦어지겠죠.

 

만약 위에 설명드린것 처럼 ResColors와 같이 컬러 테이블을 관리하고 있다면 buttonBlue = Color.fromRGBO(255) 만  Color.fromRGBO(100,100,200,1)로 변경하면 어플리케이션 전체에서 색상을 찾아서 수정할 필요가 없어지겠죠.

 

그래서 보통 어플리케이션에서 사용하는 컬러를 상수나 enum으로 이름을 주고 관리를 하는 편입니다.

이렇게 하면 디자이너와 협업도 쉬워지는데요. 디자이너가 특정 요소의 색상을 바꾸고 싶을때 컬러테이블의 값도 같이 수정 해주고 개발자에게 알려주면, 개발자는 해당 컬러 테이블만 수정 하면 되거든요.

 

 

 

끝

 

 

[1.이미지(Image)] 이미지 관리

[2.컬러(Color)] 색상 관리

[3.텍스트스타일(TextStyle] 텍스트 스타일 관리