컴포넌트 디자인 지침

원문 보기 위키 갱신 2026.10.07

새 컴포넌트 기여든 플러그인별 컴포넌트든, 다음 지침을 따르고 싶을 거예요. 컴포넌트의 일반적인 외관과 느낌을 정의하는 세 가지 주요 주제를 다룰 거예요. 모두 Material UI 테마 기능 위에 구축돼요.

레이아웃(Layout)
색상 팔레트(Color palette)
타이포그래피(Typography)

출처: 문서

본문

레이아웃(Layout)
색상 팔레트(Color palette)
타이포그래피(Typography)

🏗️ 레이아웃

레이아웃은 콘텐츠를 구성하거나 쌓는 방식을 말해요. 가능할 때마다 Backstage의 컴포넌트를 먼저 사용하고(목록과 데모는 Storybook 참고), 그 외에는 Material UI 컴포넌트로 대체하고 싶어요(Material UI 문서 참고).

이 중 어느 것도 레이아웃 요구에 맞지 않으면 나만의 컴포넌트를 만들 수 있어요. 하지만 HTML+CSS를 직접 사용하는 것은 권장하지 않아요. 레이아웃을 테마에 따라 반응하게 만들기 위해 Material UI 레이아웃 컴포넌트를 사용하는 것이 더 좋아요. 즉, 누군가 테마를 바꾸면 코드를 업데이트하지 않아도 레이아웃이 그 변경에 반응한다는 뜻이에요.

구체적으로 여백, 패딩, 위치뿐 아니라 색상 팔레트와 타이포그래피에 theme.spacing() 함수를 사용하는 다음 컴포넌트들을 살펴봐야 해요.

Container: 대부분 페이지 수준
Box: 많이 사용자 지정할 수 있는 div 같은 것
Grid: 유연한 그리드 레이아웃
Paper: 카드의 기반, 배경과 테두리 패딩 같은 것
Card: 제목, 설명, 버튼, 이미지 등을 지원하는 카드

색상 팔레트

기존 컴포넌트를 사용하면서 전체 애플리케이션에서 일반적으로 그것이 사용하는 색상을 조정하고 싶다면, Custom Theme를 사용해 그 컴포넌트의 특정 스타일(패딩, 여백, 색상 포함)을 덮어쓸 수 있어요.

하지만 처음부터 컴포넌트를 만들 때는 테마를 최대한 많이 참조해야 해요. 테마의 색상 팔레트를 사용하세요. 대부분의 Backstage 컴포넌트와 모든 Material UI 컴포넌트는 기본적으로 테마의 색상 팔레트를 사용해야 해요. 그래서 컴포넌트의 색상에 명시적 제어가 필요하지 않다면(예: 컴포넌트가 primary 색상을 사용하도록 설계됐는데 secondary 색상을 사용하고 싶은 경우), 색상 팔레트에 접근하는 가장 쉬운 방법은 Backstage가 제안하는 대로 컴포넌트 스타일 오버라이드(Override the Component Styles)를 사용하는 것이에요.

Material UI 컴포넌트에서 테마 색상을 오버라이드하는 것은 아주 흔한 사용 사례는 아니지만, 사이드 메뉴를 위해 다른 색으로 내용을 강조하는 Paper 컴포넌트를 가진 사용자 지정 Sidebar 컴포넌트가 있다고 해볼게요(보통은 elevation을 사용하지만, 디자이너가 다채로운 앱을 원했을 수도 있어요). 테마를 이렇게 사용할 수 있어요.

import { makeStyles, Paper } from '@material-ui/core';

const useStyles = makeStyles((theme: Theme) => ({
  sidebarPaper: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
  },
}));

export function Sidebar({ children }) {
  const { sidebarPaper } = useStyles();
  return <Paper className={sidebarPaper}>{children}</Paper>;
}

사용할 수 있는 기본 팔레트(Default Palette) 값에 대한 링크는 다음과 같아요. 토큰은 동일하지만, 앱 테마 색상 팔레트에 따라 그 토큰과 연관된 색상이 달라져요. 컴파일된 테마의 토큰 참조로 사용할 수 있는 항목을 보려면 Default Theme Explorer도 있어요.

타이포그래피

대부분의 경우 Material UI의 컴포넌트는 <Typography /> 컴포넌트를 사용하며, 그것은 테마의 타이포그래피 속성(글꼴 계열, 크기, 두께)과 그 컴포넌트의 맥락에 적절한 팔레트의 색상을 사용해요. 예를 들어 contained 버튼에 흰색 글꼴 색상을 사용하거나, 적절한 대비를 위해 outlined가 아닐 때 props로 전달된 각각의 색상을 사용하는 버튼에 적용돼요(어두운 테마의 버튼은 흰색 대신 어두운 글꼴을 사용해 제대로 적응해요).

하지만 콘텐츠의 부모 컴포넌트가 텍스트를 처리하지 않는 경우(예: 부모 컴포넌트가 레이아웃 컴포넌트일 때) HTML 대응물 대신 타이포그래피 컴포넌트를 사용해요. 보통 제목과 단락에 사용되지만 어떤 유형의 텍스트에도 유효해요.

설치, 사용, 시맨틱 요소 사용자 지정, 특히 접근성에 대한 권장 사항에 대한 정보는 Typography 문서를 확인하세요.

컴포넌트 디자인 지침

본문

🏗️ 레이아웃

색상 팔레트

타이포그래피

더 알아보기 (Learn more)