[view] UI Framework 확정 (MUI) 및 컬러 차트 논의

[taboowiths]

안녕하세요, 디자인 시스템 개편 팀 입니다.
오늘 (08/12(월) 21:00) 개편사항에 대해 간단하게 회의를 진행했는데요, 확정된 사안들에 대해 공유드리려고 합니다 !

1. UI Framework는 MUI로 결정했습니다. 관련 discussion 입니다.

• SCSS 사용 가능, (어렵지만) 커스터마이징 가능, 문서화가 잘 되어있음, 경량화 가능, 다양한 컴포넌트 제공 등 ... 을 고려했습니다.
• UI를 갈아엎는 것보다, 현재 있는 부분적인 컴포넌트를 Framework를 이용해 통일감 있게 바꾼다는 목적을 설정했습니다.
• 이슈에 다양한 의견 감사합니다 👍👍👍

2. 기존의 컬러 피커를 대체하여 미리 컬러 차트를 설정해, 정해진 테마를 사용하도록 할 예정입니다. 관련 discussion 입니다.

• 제공되는 테마의 개수는 5개 입니다.
• 이미지 상으로 가로로 한 줄이 한 세트 입니다. 왼쪽 세 컬러는 primary와 secondary 등, 그 다음부터 순서대로 success, fail, 그리고 기본 black, white 입니다.
• 다크모드가 기본으로 되는 것 같아, 다크모드에서 잘 어울릴만한 컬러로만 선정했습니다.
• 컬러에 대한 다양한 의견 받습니다 !! 미리 컬러 차트를 선택한다는 부분이나, 컬러의 구성에 대한 이견도 좋습니다.
  

[ytaek]

완죤 멋집니다 🥇🥇🥇🥇🥇🥇🥇🥇🥇🥇🥇🥇🥇🥇🥇🥇🥇🥇🥇

(질문) 다크모드면 기본 배경색은 #000000을 생각하고 계실까요? 기본 블랙이 #000000 으로 잡혀있네요.
(vscode상의 다크모드 배경은 완전 블랙은 아닌걸로 알고 있긴 합니다. 그러면 흰색도 다른색이 되는거 같던데.. (잘모릅니다 😢)

[pcwadarong]

@ytaek
오 그 부분에 대해 생각하지 못했네요!!
저희는 배경 색 변경은 생각하지 않았어서, 폴더 그래프 등에 나오는 작은 글씨의 검정을 정한 거긴 했습니다!

vscode의 색상을 찍어봤더니 이렇게 나옵니다! 흰색도 흰색이 아닌 줄은 이번에 처음 알았어요 ㅎㅎ

[pcwadarong]

지금 githru의 background(dark)과 white는 이렇게 되어있는데 혹시 vscode와 통일하는 게 좋을까요?
사실 전 검정 글자조차 #000000 (컬러 피커 그래프상 가장 우측 하단) 으론 하진 않는데요!
검은 색은 좀 쨍한 감이 있어 조금 밝은 회색을 사용합니다. 아래글 참고해보시고 의견 남겨주세용!
https://brunch.co.kr/@chaewonkong/12

오 근데 제가 쓴 건 아닌데 저랑 이름이 똑같으시네요 브랜치 작성자분..

[ytaek]

https://m2.material.io/design/color/dark-theme.html#usage

material 가이드에 다크모드에대한 설명이 있긴 합니다.
이게 아시겠지만, 이게 단순히 흑백 color conversion? 만 한게 아니라 아래 포인트들을 다 염두에 두고 한 것이라서
참고하시면 좋을 것 같습니다.

• Darken with grey
  : Use dark grey - rather than black - to express elevation and space in an environment with a wider range of depth.
• Color with accents
  : Apply limited color accents in dark theme UIs, so the majority of space is dedicated to dark surfaces.
• Conserve energy
  In products that require efficiency (such as devices with OLED screens), conserve battery life by reducing the use of light pixels.
• Enhance accessibility
  Accommodate regular dark theme users (such as those with low vision), by meeting accessibility color contrast standards.

[yuiseo]

vscode 테마를 화이트로 사용하는 저같은 악성 유저를 위해 하얀색 배경 화면도 선택 가능하면 좋을 거 같습니다!

[ytaek]

vscode 테마를 화이트로 사용하는 저같은 악성 유저를 위해 하얀색 배경 화면도 선택 가능하면 좋을 거 같습니다! ![image]

안그래도 이서님 화면 공유하실 때 눈이 부시더라구요. ✨O.O✨

---

다크랑 화이트랑 조금 성격이 다를 수 있으니,
일단 다크부터 시작하고, 화이트는 이슈로 따로 등록해서 다크 완성 이후에 진행해봐도 괜찮을 것 같습니다!