00:00:00요즘 제가 새로 시작한 프로젝트들 중 상당수, 아니 거의 대부분의 프로젝트에서
00:00:05사실 테일윈드(Tailwind)를 더 이상 사용하지 않기로 했습니다. 이제 그런 프로젝트에는 테일윈드를 쓰지 않고,
00:00:11당연히 섀드씨엔(Shadcn)도 쓰지 않죠. 여기에는 이유가 있습니다. 테일윈드가 나빠서가
00:00:18절대 아닙니다. 오히려 그 반대죠. 정말 놀라운 라이브러리라는 점을 분명히 말씀드리고 싶어요.
00:00:22사실 이 영상을 찍으면서 마음이 좀 불편하기도 합니다. 왜냐하면
00:00:27불과 몇 주 전만 해도 테일윈드가 겪고 있던 심각한 재정적 문제에 대해 이야기했었거든요.
00:00:32다행히 그 이후 상황이 훨씬 좋아졌습니다. 많은 새로운 스폰서들이 참여했고, 이제는
00:00:38재정적으로 훨씬 안정적인 상태라고 생각합니다. 당연히 테일윈드는 훌륭하니까요.
00:00:43그리고 그 프로젝트에는 정말 열정과 에너지를 다해 일하는 분들이 계십니다. 제 요점은
00:00:49테일윈드가 별로라거나 쓰지 말라고 설득하려는 게 아닙니다. 그저 이 채널을 통해
00:00:56제 생각과 의견, 그리고 제가 일하는 방식에 대한 인사이트를 나누고 싶을 뿐입니다. 흥미로운 주제가 될 것 같아서요.
00:01:01그럼 테일윈드가 훌륭하다고 생각하면서 왜 안 쓰는 걸까요? 자, 잠시 과거로 돌아가 보죠.
00:01:07AI 혁명이 일어나기 전, 혹은 AI의 코딩 실력이 지금처럼 좋지 않았던 몇 년 전만 해도
00:01:15저도 다른 개발자들처럼 테일윈드를 사용했습니다. 주로 한 가지 핵심적인 이유 때문이었죠.
00:01:21바로 코드를 빠르게 반복해서 수정하고 개선할 수 있게 해주었기 때문입니다. 전 피그마(Figma) 같은
00:01:28디자인 도구를 거의 사용하지 않았거든요. 제가 주로 혼자 작업하는 환경이라 더 그렇기도 했죠.
00:01:34혼자 프로젝트를 할 때는 굳이 그런 디자인 도구를 거칠 필요가 없었습니다. 저에게는
00:01:40코드에서 직접 디자인을 수정하는 게 항상 더 빨랐습니다. 코드를 바로 써 내려갈 수 있으니까요.
00:01:45테일윈드를 쓰면 DOM이나 JSX 코드 안에 클래스가 인라인으로 들어가 있어서,
00:01:50코드를 즉시 업데이트하고 스타일을 바꾸거나 여백을 조절해 보며 다양한 시도를 할 수 있었습니다.
00:01:57그건 정말 효율적인 흐름이었죠. 그게 제가, 그리고 아마 다른 많은 개발자가 테일윈드를 썼던 주된 이유일 겁니다.
00:02:04물론 꽤 많은, 어쩌면 대다수의 개발자에게는 또 다른 강력한 이유가 있을 텐데,
00:02:10바로 CSS를 싫어한다는 점이죠. 웹 개발자들 사이에서 CSS가 인기 없다는 건 저도 잘 압니다.
00:02:17이유는 이해합니다. 매우 복잡해 보일 수 있거든요. 수백, 수천 개의 속성과 값이 존재하니까요.
00:02:23네, 위압감이 느껴질 수 있습니다. 하지만 현대의 CSS는
00:02:31정말 많이 발전했습니다. 예전보다 훨씬 쉬워진 것들이 많아요. 플렉스박스(Flexbox)는 이제
00:02:37전혀 새로운 기술이 아니지만, 많은 것들을 단순하게 만들어줬죠. 색상을 추출하는 방식 같은
00:02:44다른 영역들도 예전보다 훨씬 쉬워졌습니다. 이제 CSS에는 상대적 색상(Relative colors) 기능도 있죠.
00:02:51참고로 제 아카데마인(Akatamine) 채널에 최신 브라우저와 CSS 기능들에 대한 영상을 몇 개 올렸습니다.
00:02:55색상이나 상대적 색상, 혹은 컨테이너 쿼리(Container queries) 같은 것들인데, 뷰포트가 아니라
00:03:01컴포넌트에 가용 가능한 공간에 따라 크기가 동적으로 조절되는 컴포넌트를 만들 때 정말 환상적입니다.
00:03:08이처럼 CSS는 비약적인 발전을 이뤘습니다. 사실 이런 최신 CSS 기능들을
00:03:14테일윈드와 함께 사용할 수도 있지만, 그냥 순수(Vanilla) CSS로 작성할 수도 있습니다.
00:03:23심지어 이제는 AI 덕분에 훨씬 더 쉬워졌죠. CSS 작성을 싫어하시더라도,
00:03:28특정 기능과 브라우저 지원 여부만 알고 있으면 충분합니다. AI에게 원하는 기능을 지목하고,
00:03:34관련 문서나 MDN 아티클을 참고 자료로 주면 AI가 코드를 대신 짜줍니다.
00:03:39그럼 굳이 왜 그렇게 하느냐고 물으시겠죠? 테일윈드도 이런 최신 기능을 다 지원하는데 말이죠.
00:03:45저에게는 한두 가지 정도의 이유가 있습니다.
00:03:51덜 중요한 이유는 테일윈드가 항상 최신 기능을 모두 즉각 지원하지는 않을 수 있다는 점이고,
00:03:58더 중요한 건 AI가 테일윈드의 모든 기능을 완벽히 알지 못한다는 점입니다. 테일윈드에는
00:04:05수많은 기능이 있지만, AI는 늘 쓰던 몇 가지 클래스만 사용하거나 심지어 옛날 문법을 쓰기도 해서
00:04:13특정 기능을 놓치게 되는 경우가 많습니다. 물론 이런 일은
00:04:17순수 CSS를 쓸 때도 일어날 수 있죠. AI에게 특정 기능을 쓰라고 지시하지 않으면
00:04:22그냥 넘어가 버릴 수 있습니다. 하지만 가장 중요한 CSS 기능 몇 가지만 익혀서
00:04:29AI에게 시키면 됩니다. 물론 테일윈드도 똑같이 AI에게 특정 기능을 쓰라고
00:04:34명령할 수 있다는 점은 저도 인정합니다. 다만 테일윈드 클래스 이름보다는 핵심 CSS 기능
00:04:40몇 개를 언급하는 게 더 쉬울 수도 있다는 거죠. 하지만 이것 역시 제 주된 요점은 아닙니다.
00:04:48제 진짜 요점은, 저는 항상 프로젝트에서 사용하는 외부 라이브러리 개수를 줄이려 노력해 왔다는 겁니다.
00:04:53이유는 두 가지입니다. 첫째로, 저는 교육 콘텐츠를 제작하기 때문에
00:05:01외부 라이브러리가 늘어나는 걸 경계하는 편입니다. 예를 들어 리액트 강의를 만드는데
00:05:07강의 중에 테일윈드를 사용했다고 칩시다. 그런데 테일윈드에 중대한 변경 사항(Breaking change)이 생기면,
00:05:12강의 코드의 많은 부분이 갑자기 작동하지 않게 되고 학생들로부터 수많은 질문을 받게 됩니다.
00:05:17정작 핵심 주제인 리액트는 변한 게 없는데 말이죠. 이건 저처럼 교육하는 사람에게만 해당되는 특수한 문제일 수도 있습니다.
00:05:23하지만 일반적인 웹사이트를 구축할 때도, 제 생각엔 타사 라이브러리를
00:05:29최소한으로 유지하는 게 합리적이고 좋은 아이디어라고 봅니다.
00:05:38물론 모든 라이브러리를 무조건 배제하라는 뜻은 아닙니다. 특정 라이브러리를 써야 할 좋은 이유들도 분명 있죠.
00:05:44예를 들어 서식 있는 텍스트 에디터(Rich text editor)가 필요한 웹사이트를 만든다면,
00:05:50팁탭(TipTap) 같은 라이브러리를 쓰는 게 훨씬 합리적입니다. 에디터를 직접 만드는 건 너무 힘드니까요.
00:05:54AI 덕분에 어느 정도 쉬워졌다고는 하지만, 여전히 수많은 예외 상황과
00:05:59직접 해결해야 할 문제들에 직면하게 될 겁니다. AI도 모든 걸 완벽하게 해내지는 못하니까요.
00:06:06직접 써보셨다면 아실 겁니다. 그래서 타사 라이브러리를 써야 할 이유들은 분명히 존재합니다.
00:06:11다만 스타일링은 앞서 설명했듯이 충분히 대체 가능한 영역이라는 게 제 생각입니다.
00:06:16다시 말씀드리지만 모든 분께 권하는 건 아닙니다. 하지만 저에게는 이 방식이 잘 맞았습니다.
00:06:21덕분에 라이브러리 하나를 줄일 수 있었죠. 저는 AI가 준 CSS 코드를 검토하고
00:06:28문제가 생겼을 때 순수 CSS로 직접 수정하는 것을 번거롭게 생각하지 않습니다.
00:06:37AI를 쓰다 보면 당연히 언젠가는 문제가 생기기 마련이니까요.
00:06:44하지만 저는 괜찮습니다. 만약 여러분이 CSS 코드를 보는 것조차 정말 싫어하신다면,
00:06:50당연히 이 방식은 선택지가 될 수 없겠죠. 하지만 저는 테일윈드 라이브러리를 걷어낼 수 있었고,
00:06:56직접 컴포넌트를 만들기 때문에 섀드씨엔 같은 것도 필요 없게 되었습니다. 섀드씨엔은
00:07:00전형적인 라이브러리는 아니지만 내부적으로 라딕스 UI(Radix UI)를 사용하는데,
00:07:08제가 알기로 현재 라딕스 UI의 유지보수 상태가 조금 불투명하다고 들었습니다. 여기서
00:07:16교육 콘텐츠가 아닌 일반적인 상황에서도 제가 라이브러리를 피하려는 진짜 이유가 나옵니다.
00:07:21프로젝트에 추가하는 모든 라이브러리는 유지보수가 중단되는 순간 부채가 될 수 있습니다.
00:07:29그 시점부터 보안 문제는 더 이상 해결되지 않고, 버그도 방치됩니다. 스타일링 버그도 마찬가지죠.
00:07:35새로운 기능도 추가되지 않을 겁니다. 새로운 CSS 기능이 나왔는데 테일윈드가 유지보수되지 않는다면
00:07:41(물론 지금은 잘 되고 있지만요), 여러분은 영영 그 기능을 쓰지 못할 수도 있습니다.
00:07:46실제로 테일윈드도 그런 위기에 처할 뻔한 적이 있었죠. 제가 언급했던 그 영상에서
00:07:52테일윈드 제작자가 쓴 글을 보면, 재정 문제를 해결하지 못하면 테일윈드가
00:07:58방치된 소프트웨어(Abandonware)가 될 수도 있다고 말했습니다. 조금 극단적인 표현이었을 수도 있고
00:08:03관심을 끌기 위한 전략이었을지도 모르지만요. 어쨌든 대부분의 타사 라이브러리가 가진 공통적인 문제는
00:08:11누가 작업하느냐에 따라 미래에 유지보수가 중단될 가능성이 늘 존재한다는 것입니다.
00:08:17그게 제가 다시 순수 CSS를 선호하게 된 이유이기도 합니다. 전에도 늘 써왔던 방식이니까요.
00:08:22다시 한번 강조하지만, 저는 테일윈드가 잘 되길 진심으로 바라고
00:08:28여전히 많은 프로젝트에서 테일윈드를 사용하고 있습니다. 테일윈드를 싫어하는 게 절대 아닙니다.
00:08:35단지 몇몇 프로젝트에서 테일윈드 없이 작업해보는 실험을 하고 있는 것뿐입니다.
00:08:41그게 테일윈드든 전혀 다른 무엇이든, 저는 AI 시대 이전부터도 그랬지만
00:08:46타사 라이브러리를 쓰기 전에 항상 두 번은 생각해보시길 권합니다. 라이브러리를 써야 할 좋은 이유는 많습니다.
00:08:53예를 들어 인증을 위한 Better Auth 같은 라이브러리는 정말 훌륭하죠. 저라도 꼭 쓸 겁니다.
00:08:57하지만 충분히 대체 가능한 라이브러리라면, 한 번쯤 다시 고민해 볼 가치가 있다고 생각합니다.
00:09:04it might be worth a second look or thought, I guess.