[View] UI Framework 도입에 대한 논의

[pcwadarong]

지난번에 알아오기로 했었던 ui framework에 대해 논의해보고자 합니다. SASS와 잘 호환되면서 최근 인기가 있고 추천될 만한 framework를 몇 가지 조사해와서 가장 어울릴 만한 툴을 찾습니다.

---

조사

Bulma

커스터마이징

• SASS를 통해 커스터마이징 가능하지만, 다른 프레임워크에 비해 상대적으로 제한적일 수 있습니다.
• 커스터마이징 자체는 쉬운 편입니다.

경량성

• Bulma 자체가 가볍고 빠릅니다. 개별 컴포넌트 설치는 불가능합니다.

장점

• 최신 CSS3의 기술을 사용합니다. 반응형 디자인을 지원합니다.
• 러닝 커브가 낮은 편입니다.
• ui를 둘러봤는데 커스터마이징을 많이 하지 않아도 비교적 깔끔한 것 같습니다.

단점

• 컴포넌트의 종류가 다소 적은 편입니다.
• 기본 스타일이 많이 적용되어 있어서 커스터마이징을 많이 할 경우 시간이 소요됩니다.

Boostrap

커스터마이징

• 매우 자유롭고 쉬우며, SASS를 지원합니다.

경량성

• 필요한 컴포넌트만 선택적으로 로드할 수 있어 비교적 가볍게 사용 가능하지만, 전체를 가져올 경우 다소 무겁습니다.

장점

• 다양한 컴포넌트를 제공하고, 많은 사용자들로 인해 풍부한 문서화와 커뮤니티를 지원합니다.
• 반응형 디자인을 지원합니다.

단점

• 사용자가 많고 사용된지도 오래되어 다소 평범해 보일 수 있습니다.

Foundation

커스터마이징

• 매우 자유롭고 SASS를 통해 커스터마이징이 가능합니다.

경량성

• Foundation의 SASS 파일을 커스터마이징하여 필요한 컴포넌트만 포함하는 방식으로 사용 가능합니다.

장점

• 유연한 그리드 시스템과 다양한 컴포넌트를 제공합니다.

단점

• 기본 모양새가 너무 못생겨서 (15년 전 같아요,,) 무조건 커스터마이징해서 써야할 것 같습니다.

Material UI

커스터마이징

• 매우 용이하며, 테마 설정과 SASS 변수를 통해 자유롭게 스타일 변경 가능합니다.

경량성

• 트리 쉐이킹을 지원하여 사용하지 않는 컴포넌트를 제거 가능합니다.
• Material UI 5부터는 개별 컴포넌트를 모듈 방식으로 가져와 사용할 수 있습니다.

장점

• Google의 Material Design 가이드라인을 따라 만들어져 현대적이고 일관된 UI 제공합니다.
• 매우 엄청나게 다양한 컴포넌트를 제공합니다.
• 컬러팔레트도 제공해서 여기서 뽑아다가 쓰면 편리할 것 같습니다.

단점

• 장점이자 단점이 될 수 있는데, 이미 검증되고 일관된 디자인과 애니메이션이 강하게 적용되어 있어 원하는 대로 완전히 수정하기 위해선 커스터마이징을 이리저리 해야할 것 같습니다.
• 기본적으론 JSS를 사용하여 스타일을 관리하기 때문에 SASS 스타일을 적용하려면 수정이 필요합니다.

---

의견

지금 githru 화면에서는 ui 컴포넌트를 적용시킬 부분이 많아 보이지는 않습니다. 토글 버튼, 구분선, 아이콘 정도가 보입니다.하지만 앞으로 여러 컴포넌트들이 더 생겨날 수 있기 때문에 일관성을 유지하기 위해서 프레임워크를 도입하는 것은 좋다고 생각합니다. 계속해서 다른 분들이 일관성을 유지하면서 적용시키기 위해선 처음 디자인이 깔끔하여 추가 커스터마이징이 많이 필요 없는 Bulma를 추천하고 싶습니다. 하지만 앞으로 복잡한 컴포넌트들이 추가될 가능성을 고려하면 다양한 컴포넌트를 제공하는 Material UI가 좋아 보입니다.

• ) 제가 느끼는 바로는 그래프와 폴더구조 박스 등이 ui의 분위기를 대부분 가져가고 있다고 생각합니다.ㅎㅎㅎ 이 부분을 수정해야 ui 개편하는 느낌이 날 것 같습니다.

[pcwadarong]

잘못 닫아버렸습니다 , ,, 근데 생성도 잘못 했기는 한데 ㅠㅠ 이왕 올렸으니 그대로 수정해서 이슈로 올려두겠습니다...!

[ytaek]

오!!! survey 좋습니다 👍👍👍👍👍👍👍

개인적으로는 사람들 많이 쓰는걸 사용하는게 좋긴 합니다만 (구글링하면 답이 나오니까?!! 😄 ) material만 써봐서.. 다른 것들도 좀 써보면 좋을 것 같긴 하네요

사용해보신 분들 의견 많이 주세요!!!

[yoouyeon]

저는 조사해주신 것들 중에서 Material UI만 사용해 보았는데요. 아래에 장점이자 단점이라고 적어주신대로 디자인이 강하게 적용되어 있어서 제공하는 커스터마이징 옵션이 "아닌" 경우에는 일일이 해당 속성이 적용된 클래스를 찾아 !important 로 덮어씌우는 식으로 커스텀을 했었는데 이런 부분들이 꽤 많았어서 개인적으로 굉장히 불편하다는 느낌을 받았었습니다. 🥲 하지만 역시 말씀해주신대로 디자인이 일관되고 깔끔하고 위에 영택님이 말씀해주신것처럼 어쨌든 구글링하면 답이 나오긴 했어서 명확히 원하는 디자인이 있다면 Material UI가 좀 불편한 선택이 될 수도 있겠지만, 아니라면 괜찮은 선택일 것 같다는 생각이 듭니다!

[xxxjinn]

저도 저희 팀 회의를 위해 sass 적용이 용이한 framework를 찾아본 걸 여기에 간단히 정리해두겠습니다..!

• Semantic UI

  • https://react.semantic-ui.com/
  • 디자인이 특출나게 예쁜 것 같진 않습니다. (사이트 자체도 옛날 것 같은 느낌..)

• React-Bootstrap

  • https://react-bootstrap.netlify.app/docs/getting-started/introduction/
  • 예전부터 유명했고, 사용량도 매우 높은 것으로 보입니다.
  • 이것도 위의 Semantic UI보다 디자인이... 현대적인 것 같진 않다고 생각했습니다.
  • 페이지 로딩 속도가 느리다는 단점이 있습니다.

• material ui

  • https://mui.com/material-ui/react-button/
  • 그나마 ui가 제일 낫다고 생각했습니다.
  • class명 찾아서 scss 파일에서 커스텀이 가능합니다.
  • 저도 사용 경험이 있는데, 위의 정연님 말대로 클래스명을 일일히 찾아야해서 커스텀 하는 과정이 시간이 꽤 걸리긴 했습니다.

---

결론

• 알아본 것 중 material ui가 단점이 좀 번거롭기는 하지만 그나마 기본 디자인 측면에서 마음에 들긴 했습니다. ㅎㅎ.......
• sass를 적용할 수 있어야 하는 framwork를 찾아야 한다고 생각해서 조금 제한적이라는 생각을 해서,, 요즘 많이 사용하는 것으로 보이는 shadcn이나 daisyUI같은 경우 정확히 'sass 적용'을 검색해보았을 때 그냥 다들 tailwind css를 적용하고 있어서 그냥 sass로 class를 줘서 덮어쓰는 방식은 불가능하거나 큰 단점이 있는지 테스트를 해보아야 할 지,, 관련해 정보를 아시는 분이 계시다면 말씀해주세요..!! 저도 tailwind css를 적용해본 경험만 있습니다.
• 그래서 혹시 편리한 ui framework 커스텀을 위해서 tailwind css를 설치해 프로젝트에 총 두 개의 CSS framwork(전체적인 스타일링:sass, ui framework 커스텀: tailwind css)를 사용하는 방식은 비효율적일까요?

[pcwadarong]

@xxxjinn

2. tailwind 나 dasiyUi 같은 건 아무래도 tailwind랑 강하게 연결되어 있어서, SASS를 통해 직접 Tailwind CSS 클래스를 오버라이드할 수는 있으나, Tailwind CSS의 구조와 방식에 익숙해야 하며 SASS를 통한 커스터마이징이 다소 번거로울 수 있습니다. 라고 나오네요! 할 수는 있겠으나 굳이 쓰지는 않는 느낌..? 인 것 같습니다.
3. 저도 고민하면서 오히려 이 방법이 낫지 않나 생각했습니다. tailwind 자체가 별로 무거운 툴도 아니고 shadcn 같은 건 또 엄청 가벼워서, 둘이 병행할 수 있다면 좋을 것 같습니다. 개인적으로 tailwind는 매우 편해서 애용하지만 컴포넌트 파일이 좀 보기 더러워지는 게 별로라고 생각하는데.. 정말 ui 프레임워크 불러오는 파일 안에서만 사용한다면 그 단점도 해결될 것 같습니다. 그리고 shadcn/ui와 daisy 중 고른다면 더 현대적이고 깔끔한 shadcn이 좋을 것 같습니다 ㅎㅎ

[ytaek]

말씀하시는 것들 보면 다 장단이 존재해서 고민이 많이 되는 포인트긴 하네요. 아래 포인트들도 좀 고려해보면 좋을 것 같습니다.

• 유망주냐 아니냐? (1년 지나고 나서 그게 뭐임? 이라는 얘기는 안 듣도록 👿)
• 기술적으로 썼을 때 얻을 수 있는 것이 있느냐 (나 이거 써봣어!! 라고 자랑할 수 있느냐?)
• 쉽게 적용 가능하느냐? or 최소화된 수정으로 가능한가? (기껏 골랐는데 다른 컨트리뷰터들이 모두 헤매고 있으면 안되기에..)

꼭 업계 1등만을 써야 되는건 아니니까, 약간은 도전적인 걸 골라도 괜찮을 것 같구요. 여러 의견을 모으면 좋겠습니다!

[pcwadarong]

mui로 결정했습니다!

[pcwadarong]

내일 다시 닫겠습니다

[pcwadarong]

잘못눌럿슴다...