CSS에 함수를 정의하는 시대가 온다

와, 테두리 스타일이 더 화려해졌네요! 쓸모없는 눈요기용 장식에 무한한 복잡성이라니. 데이트 피커는 여전히 겨우 작동하고, 지난번에 장갑을 끼고 산업 현장에서 터치에 최적화된 인터페이스를 만들어야 했을 때 데이트 피커, 타임 피커, 숫자 증감 입력 필드가 필요했는데 커스텀 컴포넌트와 js가 필요했어요...

하지만 베젤 같은 게 있으면 이런 게 누가 필요하겠어요...

터치 플랫폼 네이티브 키보드 표시를 안정적으로 트리거하고, 표시될 때 알림을 받고, 입력 필드가 키보드에 가려지지 않도록 화면 안으로 이동시키는 방법은 누가 필요하겠어요?

이것이 웹이 Windows Forms에 비해 일을 처리하기에 형편없는 플랫폼인 이유입니다. 표준을 만드는 사람들이 오직 기믹을 만드는 데만 일하기 때문이죠.

부정적인 분위기가 나오기 전에 미리 말하자면: 저는 CSS를 사랑합니다! 왠지 모르게 항상 저에게는 이해가 잘 됐어요. 설령 실제로 쓰이게 되더라도 5~10년이 걸릴 수 있는 개선을 밀어붙이는 끈기를 가진 모든 분들께 큰 존경을 표합니다.

Josh가 글을 쓰는 걸 보니 반갑네요, 특히 그의 강좌들이 큰 타격을 입은 후라서요. 그는 훌륭합니다. 전기 엔지니어이자 이제 CS 졸업생으로서, 전체 스택에서 일할 수 있기를 바라며 그의 강좌를 구매한 사람이지만.. 동시에 '신이시여, 이제 정말 CSS를 배울 필요가 없어서 다행이다'라고 생각하기도 했습니다 (네, 모델 성능이 향상되면서요).

그런 점에서 Josh 덕분에 위험할 정도로 아는 게 있을지도 모르겠네요 (주문을 외우는 식으로: 예를 들어, 저것들을 자체 컨테이너로 묶고 그 컨테이너 안에서 flex box로 해야 하지 않나?). 제가 여기서 말하고 싶은 건 인간은 모순투성이라는 겁니다.

저는 CSS로 작업하는 걸 정말 즐기는 듯한 소수파에 속한 것 같습니다. 그리고 오늘날 제가 CSS를 사용하는 방식은 몇 년 전과 완전히 다릅니다. 예를 들어 CSS 모듈, 변수로 팔레트를 선언한 다음 다크 모드용으로 변경하는 것… 정말 훌륭하게 작업할 수 있습니다.

이 글이 바이브코딩 프론트엔드에 관한 게 아니라는 건 알지만...

제 동료와 친구들 중 많은 이들이 더 이상 프론트엔드를 작성하지 않아도 된다고 기뻐하고 있습니다. 저는 사실 프론트엔드가 바이브코딩되어서는 안 되는 마지막 부분이라고 생각합니다. 사용자와 마주하는 부분이니까요. 사용자가 제품에 대해 첫인상을 형성하도록 돕는 부분입니다. 만약 랜딩 페이지가 Claude가 30초 만에 만든 것처럼 보인다면, 그들은 제품의 나머지 부분도 그렇게 만들어졌다고 생각할 겁니다. 코드베이스에서 순수한 기능만 중요한 부분(예: 백엔드)에는 AI 지원을 사용하고, 시스템의 나머지 부분에 쏟은 노력을 반영하는 프론트엔드에는 진정한 인간의 노력과 정성을 쏟으세요.

여기서의 논의는 제가 가장 좋아하는 데모 중 하나를 떠올리게 했습니다. 누군가 1세대 Raspberry Pi에서 1080p HDMI로 Qt5와 QML을 라이브 코딩하는 모습이었죠. 간단한 셰이더를 위한 CSS와 JavaScript의 짬뽕 같은 것이었습니다. 14년 전 일입니다.

https://youtu.be/0j-Wakm5B84?is=7dU_EvFyk_nQNwjO

다른 타임라인에서 본 CSS의 미래를 엿보는 것 같습니다. 우리가 가질 수 있었던 무언가 말이죠.

저만 그런지 모르겠지만, 그 모든 제안들이 CSS를 불필요하게 복잡하게 만드는 것 같습니다 (아니면 더 JS처럼 만드는 것 같고요).

특히 함수가 그렇습니다.

블로그를 운영하기 위해 10만 줄의 코드를 작성한 저자의 이전 글을 떠올리게 하네요.

https://www.joshwcomeau.com/blog/how-i-built-my-blog-v2/