개발자

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

2023년 07월 25일조회 338

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

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 2

인기 답변

이재찬님의 프로필 사진

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

이상원님의 프로필 사진

이상원

작성자

Frontend Dev2023년 07월 26일

아 감사합니다. 덕분에 제 결정에 불안함을 조금이나마 덜게 되었어요 :)

정재용님의 프로필 사진

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

이상원님의 프로필 사진

이상원

작성자

Frontend Dev2023년 07월 25일

빠른 답변 감사드립니다. 말씀하신부분을 참고해보려 했으나, 아마 팀단위에서 빠르게 진행되고, 또한 다른 분들이 많이 써본 Antd와 styled-components를 사용하는 방향으로 알아볼 것 같습니다. 추후에 활용할 수 있는 기회가 생기면 꼭 한번 시도해보겠습니다 :)

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!