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

Question

안녕하세요. 이번에도 도움만 받는 주니어 프론트엔드 개발자 입니다.

금일의 고민은 css 프레임워크의 활용입니다.

그동안은 CSS 적응력을 기르기 위해서 구성되어있는 bootstrap이나 mui 말고,  styled-components, tailwindcss 정도로 개발을 진행해왔습니다. 이 부분이 더 커스텀하기에 용이하기도 해서 말이죠.

이번에 현업에서 개발을 들어가게 되었는데, 빠른 진행력을 위해서 어느정도 레이아웃까지는 CSS 프레임워크의 간편함을 빌려야되겠다는 생각이 문득 들게 되었습니다.

여기서 궁금한 부분은 CSS 프레임워크를 사용하여 다른 컴포넌트까지 빠르게 만들 수 있으나, 기획과 디자인의 용도에 맞는 커스텀 제작에 어려움을 겪을 수도 있을 것 같고 또한, 용량으로 인해 사용자 경험이 저하될까봐 우려가 됩니다. 하지만, 속도도 포기할 순 없단 말이죠?

선배 개발진분들의 현업에서 빠른 UI 제작을 위한, 그리고 모든 요구사항과 최대한의 최적화를 고려한 CSS 활용에 대한 팁을 듣고 싶습니다.

괜찮으시다면, css 프레임워크를 추천을 해주시면 더욱 감사할 것 같습니다 :)
감사합니다.

아! 참고로 Nextjs 를 사용하여 제작할 예정입니다. next 초기 설정에서 tailwindcss 를 밀어주는 느낌이 없지 않아 있어서 마음이 흔들립니당

이재찬 · Accepted Answer

CSS의 변화 또한 JS 생태계의 변화만큼 빠르고 다양하게 바뀌어 가고 있습니다. (JS만큼 주목을 많이 받지는 않지만요)

말씀 주신 편함과 커스텀의 용이함, 그리고 성능 등을 고려해서 (SASS, SCSS), CSS in JS, tailwind(atomic css 포함) 등등 여러 방향성으로 발전이 되어 왔습니다.
그리고 이러한 방향성에서 파생되어 다양한 프레임워크들이 등장하고 있는게 지금의 CSS 생태계라고 생각합니다.
빠른 UI 제작을 위해서는 보통 프레임워크를 이용하는게 맞고, 기획 및 디자인 단계에서 기획자, 디자이너와 함께 프레임워크를 선정하여 그를 기반으로 기획 및 디자인을 진행하게 됩니다.
그 외적인 부분은 커스텀하게 작성하거나, 프레임워크를 수정하며 진행하게 되는게 보통이라고 생각합니다.

빠름보다 정교함을 선택하게 된다면 직접 구현을 하게 되는 경우가 있고, 규모가 큰 회사들은 디자인 시스템을 개발하여 진행하는 경우가 많구요.

그래서 어느 것을 선택하는 것에 대한 정답은 없다고 생각합니다. 그것보다는 진행하시는 프로젝트의 성격에 맞는 툴을 잘 택할 줄 아는 것이 중요하다고 생각합니다.

정재용 · Answer

안녕하세요.

저는 개인적으로 tailwindcss 를 사용해서, 자주 쓰이는 작은 단위의 컴포넌트부터 모듈화 하면서, 디자인 시스템을 구축해 나가시는 걸 추천 드리는데요.
말씀하신 것처럼, Bootstrap과 같은 프레임워크를 활용하면 단기적인 생산성은 확실히 올라갈 수 있습니다. 
다만, 프론트엔드의 특성상 요구사항에 따라 빈번하게 변경 될수 있기 때문에, 수정과 유지 보수에 대한 비용도 같이 고려하는게 좋을것 같아요. 
그래서 초기에 시간을 좀 투자하시더라도 유연한 형태의 컴포넌트를 직접 쌓아 올리시면서 관리하는 게 향후 유지보수나 생산성을 위해서 좋을 것 같습니다.
(이러한 관점에서, Storybook(https://storybook.js.org/) 같은 도구를 활용해보시는 것도 추천 드립니다.)