mui icon 도입에 대한 논의

[pcwadarong]

안녕하세요.
MUI를 설치함에 따라 #609 기존 svg로 사용되었던 아이콘들도 유지 보수성 향상을 위해 mui-icons로 교체하고자 하였습니다.
그런데 githru 내 아이콘은 5개보다 많은 데도 불구하고 svg가 5개밖에 보이지 않는 점이 이상해서 더 찾아보니, 일부 아이콘은 이미 react icons를 설치하여 사용하고 있었습니다.

// src/components/VerticalClusterList > Summary > Content > Content.tsx
import { IoIosArrowDropdownCircle, IoIosArrowDropupCircle } from "react-icons/io";

그래서 react-icons 에 대해 더 찾아보고 장단점을 분석해보았습니다.

패키지 크기

• React Icons은 다양한 아이콘 세트를 포함하고 있기 때문에, 패키지의 크기가 상대적으로 큽니다. 우선 설치할 땐 모든 아이콘이 설치되고, tree shaking을 통해 빌드할 땐 사용한 아이콘만 포함됩니다.
• Material UI는 상대적으로 사이즈가 작으며, Google Fonts를 통해 CSS 기반으로 아이콘을 사용할 수 있습니다.

렌더링 시 성능

• React Icons은 SVG 아이콘을 사용하므로, 렌더링 성능은 보통 우수합니다. 컴포넌트이므로 최적화가 가능합니다.
• Material UI는, CSS와 웹폰트를 사용하여 스타일시트에서 직접 렌더링하기 때문에 약간 더 좋습니다.

---

정리

react-icons 는 초기 설치 시 크기가 상대적으로 무겁습니다. 두 라이브러리 모두 렌더링 성능이 좋지만 material-ui가 조금 더 좋습니다. 이렇게 말하면 react-icons가 상대적으로 비효율적인 것 같지만, react-icons 는 많은 종류의, 아름다운 아이콘을 제공하고 있어 선택지가 넓은 편입니다. Hero, radix 등 깔끔하고 현대적인 아이콘들이 많아 이점이 있습니다.

---

기존에 UI 프레임워크 자체는 MUI로 하기로 #596 에서 의견을 나누고 #607 에서 결정했는데, MUI도 아이콘의 경우 따로 패키지를 다운 받아야 하기 때문에, 이미 사용하고 있는 icon 라이브러리가 있는 경우도 전면 교체로 결정된 것인지 헷갈려 이슈 올립니다.
우선 어떤 것을 사용하던 간에 svg (아이콘만)은 교체할 것 같습니다. 다만 mui icon과 react-icon을 둘 다 사용하는 것은 비효율적이고, 이미 react-icons에서 mui 아이콘도 지원하기 때문에..

1. 아이콘만이라도 더 아름다운 것을 사용함 (유지보수 가능. 러닝커브 낮음)
2. MUI 컴포넌트들과 디자인 시스템을 통일함

두 가지 방향 중 하나 골라 의견 남겨주시면 감사하겠습니다. 어느 정도 의견 취합 후 업데이트하여 pr 올리겠습니다~!

+) 어떤 라이브러리를 사용하든 지금보단 조금 더 (선 끝 모양) 동글동글하고 깔끔하게 선택하려고 합니다! 그게 githru라는 이름과 로고의 느낌과도 더 알맞는것 같아서요!

[taboowiths]

제 개인적인 의견으로는 mui icons로 통일하는 게 낫지 않을까 싶습니다 !

말씀하신대로 mui-ui를 사용하기 떄문에 디자인 통일성을 유지할 수 있고, 사용하기 쉽다는 점도 이점이 되겠지만,
프로젝트에서 사용되는 아이콘의 양이 많지 않기 때문에 mui icons로도 충분할 것 같다는 생각이 듭니다.

react icons의 가장 큰 장점은 다양한 아이콘을 하나의 라이브러리로 사용할 수 있다는 것으로 보이는데, 아이콘의 중요성이 그렇게 크지 않은 저희 프로젝트에서는 다소 오버스펙이 ㅎㅎ 아닐까 싶기도 합니다 !!

[xxxjinn]

저도 일단은 아이콘 양이 그렇게 많이 필요하다고 생각하지 않아서, mui icons로도 충분하지 않을까 싶습니다!

[ytaek]

오 성능까지 비교를!!! 멋집니다 👍👍👍👍👍👍👍👍

[pcwadarong]

@taboowiths @xxxjinn 의견 감사합니다! 저도 MUI가 더 맞는 것 같습니다 ㅎㅎ 그러머 기존 svg 포함해서 REACT-ICONS의 아이콘들도 수정해서 올리도록 하겠습니다!

[pcwadarong]

해결 완료!