양자역학 스럽기도 하고 무공 비급서 같기도 한 shadcn

shadcn을 아시나요??

web frontend 개발 필드에 있으면서 react를 주력으로 쓰고 있다면,

한번 쯤 들어 봤을 이름입니다.

저도 어디서 줏어 들은 건 있어서

'오 그거 요새 뜨는 ui 컴포넌트 라이브러리 아님? ㅋ' 했었습니다.

shadcn 이전에 한 따까리들 하셨던 UI 컴포넌트 라이브러리들:

그러니까 예를 들면...

- Material UI

- Ant Design

- Chakra UI

- (그리고 인기가 폭발하진 않았지만 제가 좋아했던 IBM의) Carbon

뭐 각자 나름의 철학과 사명을 갖고

문제 정의와 해결책을 제시하고 있지만

까 보면 다 고만고만 합니다 ^^^;;;

비슷한 질문을 던지고

비슷한 해결책을 제시하죠.

그리고 아무리 수사를 다르게 한다 쳐도

어쨋든! 적어도!

`npm install`CLI 로 node_modules 폴더 에 설치된 모듈을 import 해서 쓴다 점 만큼은

똑같습니다.

보통 이것만은 다를 수가 없죠.

생각해보면,

npm 모듈인데 node_modules에 설치 해서 import 하는 식으로 쓰지 않는다?

'있을 수 있나?' 하는 생각이 들죠.

아니,

오히려 그런 생각은 한번도 해본적이 없네요.

이게 지금 npm 모듈인데

node_modules에 설치 해서 그 설치된 원본을 import 해서 쓰는건

넘모넘모 넘~~~모 당연당연한거잖아요?

의심을 가져본 적조차 없어요.

그래서 shadcn을 처음 제대로 써 본 그때의 충격을 잊을 수가 없습니다.

shadcn도 npm install을 통해 node_modules 폴더로 설치 되는 것들이 있기는 한데요,

거기에 설치 된 걸 import 해서 쓰는 애가 아닙니다.

`shadcn add` 명령을 통해 그걸 node_modules 바깥으로 복/붙 해서 써요.

어떠세요?

진짜

이상하지

않습니까?

이전에 복붙 해서 쓰는 npm 모듈을 보신적이 있나요?

shadcn은 이름도 이상해요.

위에서 언급한 다른 ui 모듈들은 다들 자기 이름의 유래에 대해 자랑스럽게 선언하고

정체성을 분명히 하는데 열과 성을 다합니다.

그게 브랜딩이니까요!

반면 shadcn은 그냥 창시자의 닉네임을 가져다 쓴 것일 뿐이고

심지어는 창시자 본인이 shadcn 이라는 이름에 대해

별 의미 없이 계속 쓰고 있는 닉네임일 뿐이고 무슨 뜻으로 지었는지 생각해 본적 없다고 말합니다.

그런데 말입니다,

shadcn이 이렇게 근본부터 다른 덕분인지

근본이 비슷한 녀석들이 답습하는 문제들을 해결하고 있습니다.

하지만 근본부터 다르다는 얘기는

익숙한 방식으론 사용할 수 없다는 얘기예요.

익숙한 시각으론 들여다봐도 이해할 수 없다는 얘기예요!

그러나 한번 이해하기 시작하면 그동안 없었던 방식이었기 때문에

엄청나게 재밌습니다.

이 포스팅을 필두로

UI 컴포넌트계의 양자역학!

UI 라이브러리계의 요술!

S.H.A.D.C.N 에 대해 이야기 해 보겠습니다.