React 프로젝트의 실무 스타일링 방식과 관련된 궁금증 해결

1. CSS 프레임워크를 현업에서 적절하게 사용하는 부분이 궁금합니다.

안녕하세요. 이번에도 도움만 받는 주니어 프론트엔드 개발자 입니다. 금일의 고민은 css 프레임워크의 활용입니다. 그동안은 CSS 적응력을 기르기 위해서 구성되어있는 bootstrap이나 mui 말고, styled-components, tailwindcss 정도로 개발을 진행해왔습니다. 이 부분이 더 커스텀하기에 용이하기도 해서 말이죠. 이번에 현업에서 개발을 들어가게 되었는데, 빠른 진행력을 위해서 어느정도 레이아웃까지는 CSS 프레임워크의 간편함을 빌려야되겠다는 생각이 문득 들게 되었습니다. 여기서 궁금한 부분은 CSS 프레임워크를 사용하여 다른 컴포넌트까지 빠르게 만들 수 있으나, 기획과 디자인의 용도에 맞는 커스텀 제작에 어려움을 겪을 수도 있을 것 같고 또한, 용량으로 인해 사용자 경험이 저하될까봐 우려가 됩니다. 하지만, 속도도 포기할 순 없단 말이죠? 선배 개발진분들의 현업에서 빠른 UI 제작을 위한, 그리고 모든 요구사항과 최대한의 최적화를 고려한 CSS 활용에 대한 팁을 듣고 싶습니다. 괜찮으시다면, css 프레임워크를 추천을 해주시면 더욱 감사할 것 같습니다 :) 감사합니다. 아! 참고로 Nextjs 를 사용하여 제작할 예정입니다. next 초기 설정에서 tailwindcss 를 밀어주는 느낌이 없지 않아 있어서 마음이 흔들립니당

답변

CSS의 변화 또한 JS 생태계의 변화만큼 빠르고 다양하게 바뀌어 가고 있습니다. (JS만큼 주목을 많이 받지는 않지만요) 말씀 주신 편함과 커스텀의 용이함, 그리고 성능 등을 고려해서 (SASS, SCSS), CSS in JS, tailwind(atomic css 포함) 등등 여러 방향성으로 발전이 되어 왔습니다. 그리고 이러한 방향성에서 파생되어 다양한 프레임워크들이 등장하고 있는게 지금의 CSS 생태계라고 생각합니다. 빠른 UI 제작을 위해서는 보통 프레임워크를 이용하는게 맞고, 기획 및 디자인 단계에서 기획자, 디자이너와 함께 프레임워크를 선정하여 그를 기반으로 기획 및 디자인을 진행하게 됩니다. 그 외적인 부분은 커스텀하게 작성하거나, 프레임워크를 수정하며 진행하게 되는게 보통이라고 생각합니다. 빠름보다 정교함을 선택하게 된다면 직접 구현을 하게 되는 경우가 있고, 규모가 큰 회사들은 디자인 시스템을 개발하여 진행하는 경우가 많구요. 그래서 어느 것을 선택하는 것에 대한 정답은 없다고 생각합니다. 그것보다는 진행하시는 프로젝트의 성격에 맞는 툴을 잘 택할 줄 아는 것이 중요하다고 생각합니다.

2. 여러분의 회사에서는 어떤 CSS 라이브러리를 사용하시나요?

Q. 회사에서 어떤 CSS 라이브러리를 사용하고 계시며, 장점과 단점을 알려주실 수 있나요? Q. 반응형 웹사이트와 유지보수의 관점에서, 어느 css 라이브러리를 선택하는 것이 좋을까요? 회사에서 웹사이트를 개발 중인 신입 프론트엔드 개발자입니다. 기존에 Vue로 작성된 레거시 코드를 React로 마이그레이션하고 있습니다. 기존 코드의 스타일링은 css 파일을 import하는 방식으로 사용되었습니다. 이를 React로 변경했을 때, 클래스명이 중복되는 문제가 있어서, css-module을 사용하는 중입니다. (참고로 디자인은 정해져있는 상태입니다.) 앞으로 웹사이트를 반응형으로 제작해야하고, 기능을 추가해야합니다. 또 추후에 다른 사람이 코드를 보고 디자인을 수정해야하는 상황이 올 때, 쉽게 변경할 수 있게 만들고 싶습니다. 제가 익숙한 css 라이브러리는 Tailwind인데, 이 라이브러리는 클래스명이 복잡성이 있고, className이 길어질 수 있다는 단점 때문에, 일부 개발자들이 기피한다고 들었습니다. 제가 선택할 라이브러리를 앞으로도 회사에서 계속 사용하게 될 것 같은데, 어떤 것이 프로젝트 진행에 도움이 될 지, 혹시나 선택한 라이브러리가 걸림돌이 되진 않을지 불안합니다. 여기 계신 개발자분들은 어떤 css 라이브러리를 사용하고 계시며, 어떤 장점이 있나요?

답변

저는 tailwindcss + clsx 혹은 tailwindcss + twin.macro 조합을 선호합니다. 이 방식은 tailwind의 장점과 emotion, styled-components의 장점을 최대한 활용할 수 있는 방법 중 하나라고 생각하고 있습니다.

3. 실무에서 가장 많이 사용하는 React 스타일링 방식은 무엇인가요??

Styled-component가 생각보다 어렵던데... 실무애서는 모듈을 더 많이 쓰나요??

답변

안녕하세요 :) 프로젝트나 회사에 따라 다를거라 무엇을 더 많이 쓰는지는 모르겠어서 설문 자료 가져왔습니다. 2023 버전은 아직 없는데, 2022 버전 자료 보시면 어떤것을 더 많이 사용 중인지 알 수 있을 것 같아요! https://2022.stateofcss.com/ko-KR/css-in-js/