Docker 확장용 UI 스타일링 개요
Docker 확장용 UI 스타일링 개요 (UI styling overview for Docker extensions)
Docker 확장의 UI 스타일링을 시작하는 방법과 권장 프레임워크를 설명하는 문서예요.
출처: 문서
본문
우리 Design System은 Docker 제품 전반의 시각적 일관성을 보장하고 level AA 접근성 표준을 충족하기 위한 끊임없이 진화하는 사양 세트예요. 우리는 그 일부를 확장 작성자에게 공개해 기본 스타일(색상, 타이포그래피)과 컴포넌트를 문서화했어요. Docker Extensions Styleguide를 참조하세요.
우리는 확장이 더 넓은 Docker Desktop UI와 어느 정도 일치할 것을 요구하며, 향후 이를 더 엄격하게 만들 권리를 보유해요.
UI를 시작하려면 아래 단계를 따르세요.
1단계: 프레임워크 선택하기 (Step one: Choose your framework)
권장: React + MUI, 우리 테마 사용 (Recommended: React+MUI, using our theme)
Docker Desktop의 UI는 React와 MUI(Material UI 특별히)로 작성되었어요. 이것은 확장 빌드에서 공식적으로 지원되는 유일한 프레임워크이며, init 명령이 자동으로 구성해주는 프레임워크예요. 이것을 사용하면 작성자에게 큰 이점이 있어요:
- 우리 Material UI 테마를 사용해 Docker Desktop의 모양과 느낌을 자동으로 재현할 수 있어요.
- 향후 이 조합을 특별히 겨냥한 유틸리티와 컴포넌트(예: 사용자 지정 MUI 컴포넌트 또는 Docker와 상호작용하기 위한 React 훅)를 출시할 거예요.
- 우리 MUI 모범 사례 가이드를 읽어 Docker Desktop과 함께 MUI를 사용하는 미래 지향적인 방법을 배우세요.
비권장: 다른 프레임워크 (Not recommended: Some other framework)
다른 프레임워크를 사용하고 싶을 수도 있어요. 아마 자신이나 팀이 더 익숙하거나, 재사용하려는 기존 자산이 있기 때문일 거예요. 가능은 하지만 매우 권장하지 않아요. 그 이유는:
- Docker Desktop의 모양과 느낌을 수동으로 재현해야 해요. 이는 많은 노력이 필요하고, 우리 테마와 충분히 가깝게 일치시키지 못하면 사용자가 확장을 어색하게 느끼고 리뷰 과정에서 변경을 요청받을 수 있어요.
- 유지보수 부담이 커져요. Docker Desktop의 테마가 변경될 때마다(어떤 릴리스에서든 발생할 수 있음) 확장을 수동으로 변경해 일치시켜야 해요.
- 확장이 오픈소스라면, 의도적으로 일반적인 관례를 피하면 커뮤니티가 기여하기 더 어려워져요.
2단계: 아래 권장사항 따르기 (Step two: Follow the below recommendations)
MUI 모범 사례 따르기 (if applicable)
우리 MUI 모범 사례 문서를 참조하세요.
팔레트의 색상만 사용하기
로고를 표시하는 것 같은 사소한 예외를 제외하고, 우리 팔레트의 색상만 사용해야 해요. 이들은 스타일 가이드 문서에서 찾을 수 있으며, 곧 MUI 테마와 CSS 변수를 통해서도 사용할 수 있게 될 거예요.
라이트/다크 모드에서 대응 색상 사용하기
우리 색상은 팔레트 각 변형의 대응 색상이 동일한 핵심 특성을 갖도록 선택되었어요. 라이트 모드에서 red-300을 사용하는 곳이라면 어디든 다크 모드에서도 red-300을 사용해야 해요.