시작
혼자 사이드프로젝트를 할때에는 UI 라이브러리가 제공해주는 기본 색상을 쓴다. 사실 이걸로만 통일해도 아주 깔끔한 UI를 뽑을 수 있다.
단적인 예로 Maturial UI를 봐보자
별거 없이 컴포넌트를 가져와 붙였는데도 통일성이 있고 페이지가 깔끔해진다.
이렇듯 사이트의 전체 테마와 색상은 중요하다.
Maturial UI에 대하여
나는 Maturial UI(이하 MUI)를 좋아한다. 좋아한다고 말하지만 실제로는 처음 react를 하고 접한게 MUI여서 그렇다.
쨋든 많은 UI 라이브러리들이 각각의 컴포넌트들을 제어할 수 있도록 theme와 palette를 제공한다. 하지만 각 라이브러리에 종속적이기에 한번 쓰면 빠져나올 수 없다.
또한 내가 UI 라이브러리을 좋아하는 이유는 복잡한 UI 컴포넌트들을 이미 만들어놓았기 때문에 좋아한다. 근데 theme와 palette까지 적용하면 MUI가 아닌 컴포넌트들을 관리할때 생각보다 빡세지는 상황이 종종 나온다.
그래서 어쩌자고?
그래서 그냥 theme와 palette는 독립해서 쓰자고!!
디자이너님들과 협업을 하게되면 결국 종착지는 figma이고 대부분의 색상값을 정리해서 넘겨주신다.
하지만 가끔 귀찮을때는 #15DC87를 직접 코드에 때려박을 때도 있는데 그러면 나중에 스타일 수정할때 필연적으로 피를 보게된다.
그래서 귀찮더라도 palette에 색상을 정의한다음 color에서 한번 묶어서 쓴다. 그리고 MUI의 THEME에도 이러한 값을 넣어서 쓴다.
결국 디자이너와 연결되는 고리는 Color와 Palette이고 이걸 우리는 MUI Theme에서 쓰든 바로 코드에서 값으로 때려박든 하는 것이다.
Color 와 Palette 예시
// palette.ts
export const palette = {
white: '#FFFFFF',
grey0: '#F8F9FA',
grey1: '#F1F3F5',
grey2: '#E9ECEF',
grey3: '#DEE2E6',
grey4: '#CED4DA',
/*... 중략*/
secondaryBlue: '#22B8CF',
secondaryBlueLight: '#E3FAFC',
secondaryYellow: '#FAB005',
secondaryYellowLight: '#FFF9DB',
system: '#FA5252',
};
// color.ts
import { palette } from './palette';
export const color = {
transparent: 'rgba(0, 0, 0, 0)',
background: palette.white,
primary: palette.primary5,
text: palette.black,
error: palette.system,
storybookDarkBg: palette.black,
};
그리고 실제 tsx, jsx에는 color.background를 가져다 쓰면 된다.
Color Highlight(extendsion)
근데 막상 색상을 전부다 작성했는데 우리는 평범한 인간이기 때문에 코드값을 보고 실제 색상까지 바로 떠올리지 못한다.
그래서 괜찮은 extendsion를 하나 소개하고자 한다. Color Highlight extensions를 찾아보자.
그 결과 아래 사진처럼 아름답게 표시된다.
장점
Color와 Palette를 넣어 디자이너님과 점접을 만들고 내부적으로 다시 써보면서 느낀 장점은 크게 2가지다.
- 디자이너님이 색상을 다시 지정해주면 하나식 코드값을 바꿀필요 없이 color, palette에서만 바꾸면 된다.
- 내가 사용하고 있는 디자인패턴인 VAC패턴과도 잘 어우러 진다.
- 디자인 관점에서 UI 라이브러리, 내부 코드 상황과 분리시켜 관리할 수 있다.
단점
여기서는 별도의 Color와 Palette를 만들어서 사용했지만 UI 라이브러리에서는 실제로 Theme기능을 재공한다고 언급했다.
그리고 이 Theme 기능에서 Color와 Palette를 관리하는 기능도 당연히 내재되어있다.
그렇다보니 별도로 만들어서 사용하는게 쓸데없어 보이기도 한다.
하지만 3번째 장점을 위해서라도 별도로 작성하는게 아직까지는 더 좋아보인다.
마치면서
완벽한 구조는 없다. 다만 프로젝트에 맞는 구조를 찾아갈 뿐이다.
내가 이렇게 Color, Pallette를 분리하고 실제 컴포넌트에서도 VAC로 분리한 이유는 디자이너와 실시간 협업이 안되는 외주의 상황이었기 때문이다.
그러니 디자인적 요소와 실제 컴포넌트를 분리할 필요가 있어 이런 구조를 사용했다.
