MUI 모범 사례

MUI 모범 사례 (MUI best practices)

Docker Desktop 확장에서 MUI(Material UI)를 사용할 때 권장되는 모범 사례를 설명하는 문서예요.

출처: 문서

본문

이 문서는 우리가 권장하는 방식대로 Material UI 테마를 사용하는 것을 가정해요.

아래 단계를 따르면 Docker Desktop과의 호환성을 극대화하고 확장 작성자로서 해야 할 작업을 최소화해요. 이것들은 UI Styling 개요에서 찾을 수 있는 MUI 비특정 가이드라인의 보충으로 간주해야 해요.

테마는 언제든 바뀔 수 있다고 가정하기 (Assume the theme can change at any time)

가장 매력적으로 보이도록 정밀한 색상, 오프셋, 글꼴 크기로 UI를 미세 조정하고 싶은 유혹을 참으세요. 오늘 만드는 어떤 특수화든 현재 MUI 테마를 기준으로 한 것이며, 테마가 바뀌면 더 나빠 보일 수 있어요. 테마의 어떤 부분이든 경고 없이 변경될 수 있어요. 그 예는 다음을 포함하지만 이에 국한되지 않아요:

글꼴 또는 글꼴 크기
테두리 두께 또는 스타일
색상:
- 팔레트 멤버(예: red-100)의 RGB 값이 바뀔 수 있음
- 시맨틱 색상(예: error, primary, textPrimary 등)이 팔레트의 다른 멤버를 사용하도록 변경될 수 있음
- 배경 색상(예: 페이지 또는 다이얼로그의 배경)이 변경될 수 있음
간격:
- 기본 간격 단위의 크기(theme.spacing으로 노출). 예를 들어 사용자가 UI의 밀도를 사용자 지정하도록 허용할 수 있음
- 단락 또는 그리드 항목 사이의 기본 간격

미래의 테마 변경에 견고하도록 UI를 구축하는 가장 좋은 방법은:

기본 스타일을 최대한 적게 재정의하세요.
시맨틱 타이포그래피를 사용하세요. 예를 들어 타이포그래피 HTML 요소(<a>, <p>, <h1> 등)를 직접 사용하는 대신 적절한 variant의 Typography 또는 Link를 사용하세요.
정해진 크기를 사용하세요. 예를 들어 픽셀로 크기를 지정하는 대신 버튼에 size="small", 아이콘에 fontSize="small"을 사용하세요.
시맨틱 색상을 선호하세요. 예를 들어 명시적 색상 코드 대신 error 또는 primary를 사용하세요.
가능한 한 적게 CSS를 작성하세요. 대신 시맨틱 마크업을 작성하세요. 예를 들어 텍스트 단락 사이의 간격을 두려면 Typography 인스턴스에서 paragraph prop을 사용하세요. 다른 것을 띄우려면 기본 간격의 Stack 또는 Grid를 사용하세요.
Docker Desktop UI에서 본 시각적 관용구를 사용하세요. 우리가 테마 변경을 테스트할 주요 대상이기 때문이에요.

사용자 지정할 때는 중앙화하기 (When you go custom, centralize it)

때로는 우리 디자인 시스템에 존재하지 않는 UI 조각이 필요할 거예요. 그렇다면 먼저 우리에게 연락하는 것을 권장해요. 우리 내부 디자인 시스템에 이미 있는 것일 수도 있고, 여러분의 사용 사례를 수용하도록 디자인 시스템을 확장할 수도 있어요.

연락한 후에도 직접 빌드하기로 결정했다면, 새 UI를 재사용 가능한 방식으로 정의하려고 노력하세요. 사용자 지정 UI를 한 곳에만 정의하면, 핵심 테마가 변경될 때 나중에 변경하기가 더 쉬워요. 다음을 사용할 수 있어요:

기존 컴포넌트의 새 variant - MUI 문서 참조
MUI mixin (테마 안에 정의된 재사용 가능한 스타일링 규칙의 자유 형식 번들)
새 재사용 가능 컴포넌트

위 옵션 중 일부는 우리 MUI 테마를 확장해야 해요. MUI의 테마 구성 문서를 참조하세요.

다음은 무엇인가요?

우리 UI 스타일링 가이드를 살펴보세요.
확장 게시 방법을 알아보세요.

MUI 모범 사례