[Package] 디자이너와 협업을 위한 개발툴

상황

디자이너가 작성해둔 Color들을 보고 코드에서 사용하기 위하여 열심히 옮겨 작성하고 작업시작!

(구현된 앱 디자이너 리뷰 중)
디자이너 : 여기 Color 잘못 들어갔네요?!
나 : 네?? 그럴리가...

어느 순간 바껴있던 Figma Color...

하나하나 달라진 값 찾아 수정하다 너무 화가난 나머지 이 패키지를 작성했다.

https://pub.dev/packages/project_color_palette

project_color_palette | Flutter package

 

패키지 설명

디자이너가 사용할 컬러코드들을 직접 정리하여 개발자에게 전달하고
개발자는 그 파일을 기반으로 프로젝트에 바로 사용할 수 있도록 개발하였다.

여기서 사용되는 파일은 CSV이고 디자이너도 비교적 쉽게 작성할 수 있는 프로그램인 엑셀을 사용하도록 디자인되었다.

이 툴을 사용하면 디자이너는 색상이름, 코드, 주석을 개발자에게 전달할 수 있고
'어느새' 변경된 컬러코드가 아닌 버저닝이 가능한 파일로 전달되므로 업무 히스토리가 남게된다.

다른 파일들과의 충돌 등을 방지하고자 하여

assets/color_palette 폴더에 담긴 csv 파일을 변환시키며 csv파일명에 "color"가 포함되어 있어야 build되도록 작성했다
그렇게 build된 컬러코드는 {파일명}.g.dart의 형태로 lib/palette에 생성된다.

 

사용방법

1. 디자이너는 엑셀을 사용하여 프로젝트에서 사용할 컬러코드를 정리한다

color name	color code	메모
black	#000000	주로 글자색으로 사용합니다
white	#FFFFFF
...

2. 디자이너가 엑셀 파일을 개발자에게 전달한다

3. CSV로 변환시켜 프로젝트 "assets/color_palette" 폴더에 넣는다

4. "flutter pub run build_runner build" 명령을 실행시키고 자동으로 만들어진 파일을 확인한다