[Insight] React만이 정답은 아니다: Grafana.com의 실용주의 스택 분석
[Insight] React만이 정답은 아니다: Grafana.com의 실용주의 스택 분석
1. 배경 (Context)
평소 깔끔하고 빠르다고 느꼈던 Grafana 웹사이트의 기술 스택이 궁금해 개발자 도구(F12)를 열었다.
당연히 React나 Next.js 기반의 무거운 SPA(Single Page Application)일 거라 예상했으나, Elements 탭에서 발견한 것은 의외로 아주 가볍고 단순한 기술들의 조합이었다.
2. 발견 (Discovery)
소스 코드 분석 결과, 이 사이트는 최신 유행을 쫓기보다 HTML 중심(HTML-First)의 실용적인 접근 방식을 취하고 있었다.
🛠 Tech Stack 추정
- Core: HTML (Server Side Rendered via Hugo)
- Interaction: Alpine.js
- Styling: Tailwind CSS
🔍 결정적 단서: x-data
HTML 태그 곳곳에서 x-data, x-on, x-show 같은 속성들이 발견되었다. 이는 Alpine.js의 시그니처 문법이다.
<div x-data="{ open: false }">
<button @click="open = !open">Menu</button>
<div x-show="open" style="display: none;"></div>
</div>
3. 기술적 분석: “Boring Stack”의 현대적 재해석
The Boring Stack Philosophy
개발자 커뮤니티에는 “Choose Boring Technology”라는 격언이 있다. 실패 가능성이 낮고, 우리가 잘 알고, 검증된 기술(HTML, 서버 사이드 렌더링 등)을 쓰자는 철학이다. Grafana는 이 철학을 계승하되, 도구만 현대적인 것으로 교체했다.
- jQuery → Alpine.js: 가볍고 선언적(Declarative)이다.
- CSS Files → Tailwind CSS: 유지보수가 쉽고 직관적이다.
- Complex SPA → Static/Server HTML: SEO와 초기 로딩 속도(Performance)가 압도적이다.
이러한 조합은 최근 AHA Stack (Astro/Alpine, Htmx, Alpine) 등의 흐름과 맥을 같이하며, “탈(脫) React” 움직임의 대안으로 주목받고 있다.
4. 인사이트 (Insight)
“Over-engineering을 경계하라”
최근 프론트엔드 생태계는 간단한 랜딩 페이지조차 Next.js + Redux 등을 사용하는 오버 엔지니어링 경향이 있다. 하지만 Grafana는 “적재적소(Right Tool for the Right Job)”라는 엔지니어링의 본질을 보여준다. 사이트의 목적(정보 전달)에는 이 스택이 훨씬 더 효율적이다.
백엔드 개발자(Django/Python)에게 주는 시사점
나와 같은 백엔드 베이스 개발자에게 이 조합은 ‘생산성 필승 전략’이다.
- Django Template + Alpine.js + Tailwind
- 굳이 프론트/백을 물리적으로 분리하여 API 통신 비용을 높이지 않고도, 모던하고 인터랙티브한 UX를 구현할 수 있다.
- 혼자서 기획부터 배포까지 빠르게 수행해야 하는 포트폴리오나 개인 프로젝트에 최적화되어 있다.
5. 적용 계획 (Action Plan)
포트폴리오 전략: “Pragmatic Engineer”
단순히 유행하는 기술을 쓴 것이 아니라, “왜 이 기술을 선택했는가”를 증명하는 포트폴리오를 만들 예정이다.
- 목표: React 없이 Lighthouse 성능 점수 100점 달성.
- 스택: Django (Backend) + Alpine.js (Lightweight Interactivity).
- 핵심 가치: 기술적 허세보다는 사용자 경험(속도)과 개발 효율성을 중시하는 엔지니어링 사고방식 어필.
Conclusion 화려한 기술 스택보다 중요한 것은 문제 해결에 적합한 도구를 고르는 안목이다. Grafana의 웹사이트는 “Boring(지루한) 기술이 사실은 가장 Smart한 선택일 수 있음”을 증명하는 좋은 사례다.