PandaCSS 사용 지속 여부 논의 후 반영

[DaleSeo]

모임 때 짧게 말씀드렸던 데로 제가 CSS-in-JS 라이브러리로 건의드렸던 PandaCSS가 우리 프로젝트에 맞지 않는다는 생각이 들어서 여기서 함께 논의하고 싶습니다. 이 부분의 blocker가 되지 않도록 다음 2개를 빠르게 결정하고 싶습니다.

1. PandaCSS 계속 사용할지 말지
2. 대안 스타일링 기술 결정 (1에서 PandaCSS 사용하지 않기로 결정했다면)

[DaleSeo]

제가 PandaCSS를 사용하자고 말씀드렸던 것을 이제 와서 경솔했다고 생가갛고 후회하는 이유는 다음과 같아요.

• 우리가 필요로 하지 않는 Advanced 기능이 너무 많음
• 프로젝트 전반적인 설정이 복잡해 졌음 (codegen, postcss, panda.config etc)
• PandaCSS를 일관적으로 효과적으로 쓰려면 어떻게 토큰 설정해야 할지에 대한 사전 논의의 결정이 필요함 (agile 하게 진행이 어려움)
• PandaCSS가 Learnig curve가 다른 CSS-in-JS 라이브러리 보다 훨씬 높음 (공식 홈페이지에 유료 강의가 있을정도 https://www.pandamastery.com/)
• 지금까지 코드 리뷰를 보면 제대로 활용하고 있다는 느낌이 들지가 않음
• Atomic CSS라 번들 사이즈 측면에서는 유리한테 최종 결과물이 Tailwind처럼 최종 결과물이 클래스 덩어리라 디버깅이 아주 괴로움

[DaleSeo]

저는 우리 프로젝트의 정도 규모라면 CSS-in-JS 쓰는 것도 overkill일 것 같고, 그냥 CSS Modules만으로도 충분하지 않을까하는 생각이 듭니다. 모임 때 말씀드린 JSX 안에 style 요소 넣는 것은 CSS의 @layer를 배우셔야 되서 그 나름 학습 곡선이 있어서 생각해보니 아닌 것 같습니다.

[sounmind]

@DaleSeo 님 말씀에 십분 동의합니다. PandaCSS를 사용하지 않고 CSS Modules를 사용해도 충분히 요구사항에 부합하는 프로젝트를 만들 수 있다고 생각합니다. 그래도 나름 초반(?)에 이렇게 논의가 나온 것 같아 좋네요..!

[Bumsu-yi]

저도 PandaCSS을 사용해보면서 학습 곡선을 느낀지라 현재 프로젝트 스콥에서는 반드시 필요하지 않다면 더 간단한 방법을 쓰는게 좋아보입니다!

[yolophg]

의견 보태보자면, CSS Modules로 충분하다고 생각합니다. 현재 프로젝트 규모에서 PandaCSS의 고급 기능들이 꼭 필요한 상황은 아니고, 오히려 설정과 유지보수가 복잡해지는 것 같아요. 현 상황에서는 CSS Modules가 상대적으로 학습 부담을 줄이고, 간결하게 관리할 수 있어서 현재 저희 워크 플로에도 더 잘 맞을 것 같다는 의견입니다!

[Sunjae95]

저도 우리 프로젝트에서 Panda CSS를 제대로 사용하지 못하는 이유 2가지정도 생각이 드는데요. 첫번째는 global style 변수의 부재입니다. color, fontsize등 global 선언 후 재사용하게 된다면 local에서 static하게 넣어줄 필요가 없으며, PandaCSS의 merge기능과 같은 기능을 재사용할 수 있다고 생각해요. 두번째는 말씀하신대로 작은 프로젝트이기에 Advanced기능이 필요없다는 의견에 추가로 의견을 덫붙이자면 디자인시스템과 같은 컴포넌트의 디자인이 분리되어 정해진것이 아니다 입니다. 작은 프로젝트이므로 컴포넌트를 더 세분화할 필요가 없기에 PandaCSS의 재활용하는 부분을 덜 쓰게 되어 자칫 styled-component와 같이 local에서 선언하는 것처럼 된다고 생각해요.

첫번째는 css in js로도 충분히 커버가 가능하지만 두번째는 프로젝트 본질 이므로 달레님 말씀처럼 우리 프로젝트에서 PandaCSS가 필수인가 라는 생각이 들기도하네요.

하지만 프로젝트 4주 남았고 다시 세팅하고 그러면 오히려 시간이 더 지체될 수 있다고 생각합니다. 대안으로 기술적으로 미흡한 style에 대한 리뷰는 rough하게 진행하고, 추후 리팩토링(너무 뒤로 보내는거 아닌가 싶지만..)을 통해 Panda CSS의 기능을 즐겨보는건 어떨까요?

[Sunjae95]

라고 말했지만 CSS Module 적극 찬성입니다

[DaleSeo]

@Sunjae95 님께서 우려하신 부분에 대해서 아래 답변드립니다.

하지만 프로젝트 4주 남았고 다시 세팅하고 그러면 오히려 시간이 더 지체될 수 있다고 생각합니다.

CSS Moduless는 별도로 세팅없이 바로 사용할 수 있고 프레임워크의 영향을 받지 않는 Univericial한 스타일링 방법입니다. 단지 PandaCSS를 위한 의존성과 설정을 걷어내는 것이 필요할 뿐입니다. 프로젝트가 중반에 접어들었지만 아직까지 본격적인 스타일링 작업을 시작하지 않았고, main 브랜치에 이미 PandaCSS를 사용하고 있는 코드가 극소량이라서 지금이 PandaCSS를 재고할 수 있는 적기라 판단하였습니다. 지금 작업하고 계신 PR도 큰 노력없이 CSS Moduless로 쉽게 전환하실 수 있을 거라 생각합니다!

대안으로 기술적으로 미흡한 style에 대한 리뷰는 rough하게 진행하고, 추후 리팩토링(너무 뒤로 보내는거 아닌가 싶지만..)을 통해 Panda CSS의 기능을 즐겨보는건 어떨까요?

PandaCSS의 기능을 즐기는 것은 개인 프로젝트를 통해서도 충분히 하실 수 있지 않을까요? 😅 저는 우리가 프로젝트의 목표를 납기 내에 완성도 있게 달성하는 것과 추후 유지보수가 용이한 것이 더 중요하다고 생각하여 이러한 제안을 드렸습니다. 현재 프로젝트 진척상황을 생각해봤을 때 추후 리팩토링에 얼마나 많은 시간을 할애할 수 있을지 솔직히 의문이 듭니다.

라고 말했지만 CSS Module 적극 찬성입니다

마지막에 이 말씀은 정확히 어떤 의도이신지 이해가 잘 안 되는 것 같습니다. 갈팡질팡 하시는 건지 ㅋㅋ

[DaleSeo]

@DaleStudy/leaderboard 변경에 따른 영향도를 상상하시기 쉽도록 코드 수정을 먼저 한 번 해보았습니다. https://github.com/DaleStudy/leaderboard/pull/50

[DaleSeo]

@DaleStudy/leaderboard PandaCSS 제거 완료하였습니다. 불필요한 이슈 방지를 위해서 열린 PR을 main 브랜치 상대로 rebase 하신 후에 작업하시기를 권유드립니다.