머릿말

나는 기존에 안드로이드 앱을 만들었었다.

그러다보니, 자연스럽게 Material Design를 접하게 되었다.

디자인을 잘 모르는 개발자에게도 이해하기 쉽도록 문서가 작성되어있을 뿐더러, 안드로이드 개발자들에게는 기본적인 컴포넌트가 아예 Material Design의 Design System을 따르고 있기 때문에 적용하기 쉬웠다.

나는 이 체계를 웹에도 적용해보고자 한다.

---

Material?

머티리얼 디자인은 Google 디자이너와 개발자가 구축하고 지원하는 디자인 시스템입니다. Material.io에는 Android, Flutter 및 웹을 위한 심층적인 UX 지침과 UI 구성 요소 구현이 포함되어 있습니다.

Material의 Color System

하나의 색상 덩어리는 0부터 100에 이르는 휘도를 가지고 있음

접근성에 위배되지 않는 대비와, 체계를 적용하여 다양한 색상 팔레트를 만듦

---

필요한 내용만 추출하기

현재 프로젝트 상황

메인 색상은 한가지만 사용함

• Secondary나 Teritory는 필요하지 않음

일부 색상 덩어리는 세분화되어있으나, 이름은 지정되지 않음

• 0~100까지 10단계로 나누는 것은 현재 상태에서 비효율적임
• 세분화된 색상덩어리만 그 밝기에 따라 0~100 사이의 값을 임의로 지정 (10 단위)

---

프로젝트에 도입하기

Color Object 구현

색상명 : 세부 색상 구조

color = {
  gray: {
    100: "#F9F9F9",
    99: "#F3F3F3",
    60: "#9C9C9C",
    50: "#7E7E7E",
    0: "#070707",
  },
  //...
};

• 세부 색상은 0~100 사이로 임의로 지정
• 0(어두움) - 100(밝음) 순서

색상이 하나뿐인 경우 색상명:색상값 구조

color = {
  white: "#FFFFFF",
};

디자인 시스템 구현

• 추후 테마 확장성을 생각하여 하나의 theme 파일로 구현

ColorRole: 색상 구조

const theme = {
  colors: {
    primary: c.red[50], //기본색
    onPrimary: c.white, //기본색 글자색
  },
};

디자인 시스템 시각화 페이지 구현

ColorBox 컴포넌트 구현

export const ColorBox = styled.div<ColorBoxProps>`
//...

  background-color: ${(props) => props.color};

  &:after {
    content: "${(props) => props.name}";

//...

    color: ${
      (props) =>
        getLuminance(props.color) > 0.3
          ? color.black // 어두운 텍스트
          : color.white // 밝은 텍스트
    };

//...
  }
`;

• color prop으로 배경색 표시
• Polished 라이브러리로 색상 감지하여 글자 색 동적 적용

Theme 내 색상 object 표시

{
  Object.entries(theme.colors).map(([name, value]) => (
    <ColorBox key={name} name={name} color={value} />
  ));
}

• entries와 map 활용으로 선언적 표현

---

결론

Material Design의 색상 시스템을 웹 프로젝트에 도입한 이번 개발은 UI/UX 측면뿐만 아니라 개발 프로세스와 코드 품질 측면에서도 큰 의미가 있었다.

코드의 구조화와 재사용성 향상

• 색상을 객체로 구조화함
• 하드코딩으로 인한 중복 코드를 방지함
• 명확한 네이밍 컨벤션을 적용하여 가독성 향상

테마 확장성 향상

• ColorRole을 도입하여 향후 다크 모드 등 테마 확장에 유연하게 대응할 수 있음
• ColorRole기반의 Component Style로 확장 가능
  

디자인 시스템 시각화

• 디자인 시스템 페이지 구현으로, 각 Theme에 대응하는 ColorRole 및 색상을 직관적으로 확인 가능