모던 CSS, SPA를 넘어서다 — 웹의 진짜 미래는 어디에 있을까?

“우리는 너무 많은 자바스크립트를 사용해왔다. CSS는, 여전히 살아있다.”

🕰️ 과거: 왜 우리는 SPA를 선택했을까?

한때 웹사이트는 모든 페이지가 HTML 파일 하나로 구성되어 있었습니다.
링크를 클릭하면 전체 페이지가 새로고침되고, 화면이 깜빡였죠.

그러던 어느 날, **SPA(Single Page Application)**라는 개념이 등장했습니다.

• 화면은 하나의 페이지에서 전환되며
• 필요한 데이터만 불러오고
• 부드러운 사용자 경험을 제공합니다.

React, Vue, Angular 같은 프레임워크들이 SPA를 중심으로 성장했고, 우리는 그것을 **“현대적인 웹 개발 방식”**이라고 믿어왔습니다.

💣 현실: SPA는 정말 정답이었을까?

시간이 흐르며 문제가 드러나기 시작했습니다.

• 초기 로딩 속도가 느림: JavaScript 번들이 수 MB에 달하는 경우도 있음
• SEO 문제가 발생: 크롤러가 콘텐츠를 제대로 읽지 못함
• 접근성 저하: JS 비활성화 시 페이지가 아무것도 안 보임
• 사용자 리소스 낭비: 간단한 기능을 위해 너무 무거운 코드를 로딩

결국 많은 서비스가 **SSR(Server-Side Rendering)**이나 **MPA(Multi Page Application)**로 회귀하기 시작합니다.
그리고 이 시점에서, 우리는 **“모던 CSS”**를 다시 보게 됩니다.

✨ 등장: 모던 CSS의 진화

과거에는 CSS만으로는 할 수 없는 게 많았습니다. 하지만 최근의 CSS는 다릅니다.
우리는 다음과 같은 것들을 JavaScript 없이도 구현할 수 있게 되었습니다.

📌 모던 CSS 기능들

이제 많은 UI 로직을 CSS만으로 처리할 수 있습니다.

🧠 깨달음: 왜 JavaScript를 줄여야 할까?

SPA 중심의 개발 방식은 지나치게 JavaScript에 의존합니다.
하지만 웹 브라우저는 HTML + CSS만으로도 꽤 많은 걸 할 수 있게 진화했어요.

모던 CSS는 다음과 같은 점에서 강력합니다:

• 빠름: 별도 로딩 없이 브라우저가 바로 해석
• 안정적임: JS 오류로 인해 레이아웃이 깨질 일이 없음
• 생산성 향상: 복잡한 JS 없이 UI를 쉽게 구성
• 접근성과 호환성 증가: CSS는 기본적으로 브라우저 호환성이 좋음

📈 미래: 우리가 가야 할 방향

이제 우리는 새로운 질문을 던져야 합니다:

“정말 JavaScript로만 구성된 SPA가 최선인가?”

답은 점점 아니오 쪽으로 기울고 있습니다.

✅ 앞으로의 웹 개발 방향

• MPA + 모던 CSS + 약간의 JS
• HTML 우선 개발 (Progressive Enhancement)
• CSS 기능을 적극 활용한 인터랙션 설계
• 서버 렌더링 및 정적 사이트 생성 활용 (SSG/SSR)

🎯 정리: SPA보다 좋은 모던 CSS의 세계

SPA는 많은 것을 가능하게 만들었지만, 모든 것에 SPA가 필요하지는 않습니다.
오히려 모던 CSS + HTML만으로도 가볍고 빠르며, 사용자에게 친화적인 웹을 만들 수 있습니다.

“CSS는 죽지 않았다. 오히려 이제야 진짜 쓰일 준비가 된 것이다.”

당신의 다음 프로젝트에서는, JavaScript를 줄이고 CSS의 가능성을 열어보세요.