Clock_App / 색상 정의하기

사실 이전 글에서 했어야 했는데 깜빡하고 넘어가 버렸다.

 

디자인을 하려면 가장 필수로 있어야 하는 것이 당연지사 하게도 색, 컬러일 것이다.

Flutter 내부에서 컬러를 어떻게 사용하는지 생각해 보자.

그렇다 Color 위젯을 사용하여 16 진수 색상 코드로 Color(0xFF121212) 이런 식으로 색을 정의하거나 혹은 Colors.black 이런 식으로 색을 가져오게 될 것이다. 그렇다면 내가 고른 색을 사용하려면 내 프로젝트 내부에서 모든 컬러를 사용하는 부분에서 16진수로 길게 표현해야 할까? 답은 당연하게도 NO다.

 

Flutter에서는 다른 언어들과 마찬가지로 어떠한 컬러를 선언한 후에 그것을 상수로써 사용할 수 있다.

그럼 그 컬러 상수들을 어떤 파일에다 놓을까?

이미 내가 만들어 놓았다. 맨 처음 파일 구조화를 해놓을 때 만들어 놓은 constant/에 추가해 주면 된다.

 

lib/
 ├─ constant/
 ├─ controllers/
 ├─ screens/
 │   ├─ components/
 │   ├─ widgets/
 └─ main.dart 

 

이 constant/에는 앱의 디자인 토큰들을 정의한 파일들을 모아두는 용도로 사용할 것인데 이번에 만드는 파일은 color.dart. 즉 이 파일은 앱의 디자인 토큰 중 색상을 정의한 모듈이 되겠다. 

 

디자인 토큰(Design Tokens)이란 앱의 색상, 폰트, 간격 등을 일정한 이름으로 정의한 디자인 시스템의 기초 단위를 뜻한다.

 

사실 위에 건 너무 공식적인 표현법이고 그냥 앱 전반에서 사용되는 색상을 상수로 지정한 Color Constants 파일을 하나 만들어준단 소리이다.

 

import 'dart:ui';

const Color kBackgroundColor = Color(0xFFF7F6FB);
const Color kBlack = Color(0xFF121212);
const Color kGray = Color(0xFF9A999E);
const Color kWhite = Color(0xFFFCFBFF);

 

이전에 Figma에서 이미 색을 다 지정해 놨기 때문에 바로 만들어주면 된다.

(사실 내용은 이게 끝인데 앞에서 주저리주저리 말 좀 늘려 봤다.)