본 글은 순수 HTML/CSS/JS만 사용하려는 개발자 관점에서 웹 기본 기술의 발전상을 논하며, 프레임워크 의존도를 낮출 수 있는 CSS와 웹 표준의 발전을 강조합니다. Flexbox, Grid 등 최신 CSS 기능과 브라우저 업데이트 속도가 빨라지면서 과거보다 훨씬 쉽고 효율적으로 레이아웃을 구성할 수 있게 되었다는 점을 설명합니다.
핵심 포인트
최신 CSS(Grid, Flexbox)와 웹 표준의 발전으로 기본 기술만으로도 충분히 복잡한 UI 구현이 가능해졌다.
브라우저 업데이트 속도가 빨라져 과거처럼 기능 도입까지 오랜 시간이 걸리지 않는다.
CSS Modules, 변수, @scope, :has() 등 최신 CSS 기능을 활용하면 유지보수가 용이하고 작업의 즐거움이 커진다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GeekNews의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
되도록 순수 HTML/CSS/JS만 쓰려고 노력하는 입장에서, 프레임워크만 쓰는 사람들에게 웹 기본 기술이 얼마나 좋아졌는지 설명하기가 어려울 정도임. 물론 작업에 맞는 도구를 써야 하지만, 쓰는 것 자체가 즐거움을 줌!
나도 수년째 그렇게 개발하고 있는데, IQ 종 모양 곡선 밈이 떠오름. 양쪽 끝에서 모두 “순수 HTML/CSS/JS면 충분함”이라고 하는 느낌임.
프레임워크 사용자도 웹 기본 기술의 발전을 따라갈 가치가 있음. 번들이 작아지고, 쓰기 더 쉬운 경우도 많으며, 버그가 생길 여지도 줄어듦. 코드는 부채인 만큼, 기능이 브라우저 기본 지원에 들어올 때마다 코드를 대거 걷어낼 수 있어 즐거움.
나만 이상하게 느끼는 건가? React와 Vue도 HTML, CSS, JS를 사용한다는 건 다들 알고 있지 않나? 같은 기술 위에 컴포넌트 마운트와 생명주기 관리를 돕는 얇은 계층을 얹어서 쓰는 것임.
구체적으로 어디가 어떻게 좋아졌다는 건가? 너무 무비판적인 평가로 보임. Flexbox와 Grid 등은 지나치게 복잡하게 느껴짐.
너비가 유연하게 변하는 div를 나란히 배치하는 방법을 검색해 보길 바람. 두 개로 시작했다가 다섯 개로 바꿔 보면, 어떤 해법이 잘 작동하는지 궁금함.
강좌 사업이 큰 타격을 받은 뒤에도 Josh가 계속 글을 쓰니 반가움. 전기공학자이자 이제 컴퓨터과학 전공 졸업자로서, 전체 기술 스택을 다루고 싶어 그의 강좌를 구매했으며 실력도 높이 평가함.
그런데 모델 성능이 좋아지자 “이제 CSS를 굳이 배우지 않아도 돼서 다행”이라고 생각하기도 했음. Josh 덕분에 어설프게 아는 게 오히려 위험한 수준까지는 배웠을지도 모름. 인간은 참 모순적인 존재임.
부정적인 댓글이 나오기 전에 말하자면, CSS가 정말 좋음! 이유는 모르겠지만 내게는 늘 이해가 잘되는 기술이었음. 널리 쓰이기까지 5~10년이 걸리거나 아예 쓰이지 않을 수도 있는 개선을 끈기 있게 추진하는 분들을 존경함.
브라우저가 워낙 적극적으로 업데이트되므로 이제 5~10년씩 기다리는 시대는 지났음. 불과 1년 전에 도입된 기능이 널리 쓰이는 것도 흔히 볼 수 있음.
LaTeX에서 표를 꾸미겠다는 무모한 야심을 품었다가 CSS를 더욱 사랑하게 됨.
소수인 듯하지만, 나는 CSS 작업을 정말 즐기는 편임. CSS Modules를 쓰고, 변수로 색상 팔레트를 선언한 뒤 다크 모드에서 바꾸는 등 지금의 사용 방식은 몇 년 전과 크게 달라졌으며 작업하기도 정말 좋음.
최신 CSS는 쓰는 즐거움이 있고, 시간이 갈수록 많은 JS 코드를 CSS로 대체하게 되는 것도 반가움. 유일한 불만은 새 기능을 실제로 쓰기까지 기다려야 하는 시간이 길다는 것임.
중첩과 @layers 덕분에 유지보수도 예전보다 훨씬 쉬워짐.
Grid와 Flexbox가 예전에는 까다로웠던 레이아웃 문제를 상당수 해결해 줌. 애니메이션 덕분에 자잘한 JS도 많이 없앨 수 있음. 가끔 CSS에서 좋은 부분만 남겨 더 단순하게 만들고 싶지만, 현실적으로 불가능하다는 것도 이해함.
나도 CSS 작업을 좋아하며, 가장 최적화된 접근법처럼 느껴짐. 다만 CSS에 관심이 덜한 동료들과 협업하게 되면 CSS를 충분히 활용하기가 매우 어려워짐.
색상 전환에는 light-dark() 가 더 좋음! 나도 CSS를 즐겨 쓰며, @scope, @layer, :has()를 자주 활용함. 이제는 정말 많이 달라졌는데 대부분 이를 잘 모르는 듯함.
이 토론을 보니 내가 좋아하는 시연 하나가 떠오름. 14년 전 1세대 Raspberry Pi에서 Qt5와 QML을 실시간으로 코딩하며 HDMI로 1080p 화면을 출력하는 영상임. 간단한 셰이더를 위해 CSS와 JavaScript를 섞어 놓은 듯함.
다른 시간선에서 CSS의 미래를 엿보는 느낌임. 우리도 누릴 수 있었을 미래임.
Josh의 블로그가 과도하게 설계된 것은 분명하고, 본인도 인정할 듯함. 상당히 복잡한 강좌 시스템과 기능 수준을 맞추려 했으며, 블로그 자체도 단순히 페이지에 글을 표시하는 수준을 훨씬 넘어섬.
함수는 CSS에 들어갈 기능이 아니라고 봄. 실제로 추가되면 꽤 실망할 것 같음.
남은 기능이 이런 것들이라면, 이제는 아이디어가 바닥나 억지로 긁어모으는 듯함.
JavaScript처럼 @function으로 함수를 정의하고 result로 반환값을 지정한다고 함. 예전에는 HTML은 콘텐츠, CSS는 레이아웃, JS는 코드를 담당했음.
이제 JS는 콘텐츠·레이아웃·코드를 모두 맡고, HTML은 콘텐츠와 레이아웃을, CSS는 레이아웃과 코드를 맡는 셈임.