이 논문은 웹 애플리케이션 개발에서 프레임워크 중심의 접근에서 벗어나 HTML 을 우선시하고 서버 측 로직을 강화하는 'HTML First' 방식이 코드베이스 축소, 유지보수 용이성, 성능 향상 등의 이점을 제공한다는 주장을 htmx 프로젝트 및 Yle 웹사이트 사례 연구를 통해 뒷받침하고 있습니다.
단점: 집이 커질수록 기계가 너무 무거워집니다. 전기를 많이 먹고, 고장 나면 수리하기 어렵습니다. 또한, 집의 기본 구조 (벽과 기둥) 를 무시하고 기계 장치만 쑤셔 넣다 보니, 집이 원래의 목적 (살기) 에서 멀어집니다.
HTML First 방식:
**튼튼한 벽돌과 목재 (HTML)**부터 꼼꼼하게 쌓아 올리는 전통적인 건축 방식입니다.
먼저 방의 구조를 잡고, 창문을 달고, 문이 잘 열리도록 합니다.
핵심: "이게 HTML 로만 해결될까?"를 먼저 묻습니다. JavaScript(전기 배선) 는 정말 필요할 때만 최소한으로 사용합니다.
장점: 집이 가볍고, 바람이 잘 통하며, 고장 나면 벽돌 하나를 교체하면 됩니다.
📝 이 논문이 말하는 핵심 내용
1. 왜 우리는 HTML 을 잊어버렸을까? (과거)
1990 년대 웹이 처음 생겼을 때는 단순히 정보를 보여주는 '웹사이트'였습니다. 하지만 2000 년대 이후로 웹이 '앱'처럼 복잡해지자, 개발자들은 프레임워크라는 거대한 도구를 도입했습니다.
문제점: 프레임워크가 너무 강력해지자, 개발자들은 "HTML 이 원래 할 수 있는 일 (예: 폼 검증, 드롭다운 메뉴, 탭 전환 등)"을 잊어버리고, 모든 것을 JavaScript 코드로 다시 짭니다.
결과: 웹페이지가 너무 무거워지고, 로딩이 느려지며, 유지보수가 어려워졌습니다. 마치 가벼운 자전거를 타야 할 때, 무거운 오토바이를 타고 다니는 꼴이 된 것입니다.
2. HTML First 란 무엇인가? (해결책)
이 논문은 **"HTML 을 먼저, 그리고 최소한의 도구만 쓰자"**고 제안합니다.
원칙 1: 가장 간단한 것부터. HTML → CSS → JavaScript 순서로 생각하세요. HTML 로 해결되면 JavaScript 를 쓰지 마세요.
원칙 2: 불필요한 빌드 과정 제거. 복잡한 설정 없이 바로 코드를 쓸 수 있게 하세요.
원칙 3: 서버로 논리를 옮기기. 복잡한 계산은 브라우저 (클라이언트) 가 아니라 서버에서 처리하게 하세요.
3. 실제로 효과가 있을까? (실험 결과)
저자는 여러 사례를 통해 이 방식이 얼마나 효과적인지 증명했습니다.
코드 양 감소: 어떤 SaaS(서비스) 를 React 에서 HTML First 방식으로 바꿨더니, 코드 양이 67% 줄고, 파일 수는 72% 감소했습니다.
속도 향상: 웹사이트를 개조한 결과, 로딩 속도가 2 배 이상 빨라졌습니다.
유지보수: 코드가 단순해지니 버그가 줄어들고, 새로운 기능을 추가하기가 훨씬 쉬워졌습니다.
비유: 복잡한 기계 장치를 다 떼어내고, 수동으로 작동하는 견고한 시계를 만들었더니, 고장도 안 나고 배터리도 안 필요해졌다는 이야기입니다.
4. AI 시대에 왜 중요한가?
최근 AI 가 웹을 분석하거나 코드를 작성하는 시대가 왔습니다.
깨끗한 HTML: AI 는 구조가 명확하고 깔끔한 HTML 을 훨씬 잘 이해합니다.
접근성: 장애인이나 AI 봇이 웹을 읽을 때, 복잡한 JavaScript 대신 명확한 HTML 구조는 필수적입니다.
결론: HTML First 방식은 AI 와도 잘 통하는 미래지향적인 개발 방식입니다.
💡 요약: 이 논문이 우리에게 주는 메시지
"복잡한 프레임워크가 모든 문제를 해결해 줄 것 같지만, 사실은 웹의 기본인 HTML이 우리가 생각하는 것보다 훨씬 강력하고 똑똑합니다."
과거: "무조건 프레임워크를 써야 해!" (무거운 오토바이)
현재와 미래: "HTML 로 먼저 해보자. 정말 필요하면만 JavaScript 를 써." (가벼운 자전거)
이 방식은 코드를 줄이고, 속도를 높이며, 유지보수를 쉽게 만들어줍니다. 특히 콘텐츠가 많은 뉴스 사이트나 블로그, 쇼핑몰 같은 곳에서는 프레임워크 없이 HTML 만으로도 충분히 훌륭하고 빠른 사이트를 만들 수 있다는 것이 이 논문의 결론입니다.
한 줄 요약:
"무거운 기계 장치를 떼어내고, 웹의 본질인 HTML 을 다시 주목하면, 더 가볍고 빠르고 튼튼한 웹을 만들 수 있다."
HTML First 웹 개발의 필요성에 대한 기술적 요약
이 논문은 Juho Vepsäläinen (Aalto 대학교) 이 작성한 것으로, 현대 웹 개발에서 HTML 의 역할을 재조명하고 'HTML First' 접근법의 기술적 이점과 필요성을 논증합니다.
1. 문제 정의 (Problem)
웹 플랫폼의 오용: 웹은 초기 정보 교환을 위해 설계되었으나, 2000 년대 초반 'Web 2.0'과 함께 복잡한 애플리케이션 플랫폼으로 진화했습니다.
프레임워크의 지배와 HTML 의 소외: 복잡한 UI 를 구축하기 위해 React, Next.js 와 같은 웹 프레임워크가 등장하면서, 개발자들은 플랫폼 자체 (HTML, CSS) 의 기능을 간과하고 프레임워크에 의존하게 되었습니다. 이로 인해 'div soup(의미 없는 div 중첩)'과 같은 비효율적인 코드가 생성되고, 불필요한 클라이언트 사이드 상태 관리와 빌드 단계가 증가했습니다.
표준과의 괴리: 웹 표준 (HTML5, 웹 컴포넌트 등) 이 프레임워크가 해결하려던 문제들을 자체적으로 해결할 수 있을 만큼 발전했음에도 불구하고, 개발자들은 여전히 과도한 추상화와 자바스크립트 의존성을 유지하고 있습니다.
2. 연구 방법론 (Methodology)
저자는 두 가지 주요 연구 질문 (RQ) 을 설정하고 다음과 같은 방법으로 분석을 수행했습니다:
역사적 및 개념적 분석: HTML 표준화 과정 (XHTML2 대 HTML5, WHATWG 와 W3C 의 협력), 웹 애플리케이션의 진화, 그리고 2023 년 'HTML First Manifesto'와 2025 년 'Progressive Complexity Manifesto'의 원칙을 분석했습니다.
기술적 패턴 조사: HTML 만으로 해결 가능한 UI 패턴 (폴더블 컨테이너, 폼 유효성 검사, 다이얼로그 등) 과 경량 라이브러리 (Alpine.js, htmx) 를 활용한 확장 방식을 조사했습니다.
비교 벤치마킹 (Case Studies & Benchmarks):
htmx 프로젝트 사례 연구: React, Next.js, WebAssembly 기반 프로젝트를 htmx (HTML 중심) 로 리팩토링한 사례들의 코드 크기, 빌드 시간, 성능 데이터를 분석했습니다.
홀로타입 (Holotype) 비교: 콘텐츠 기반 사이트 (Learn Rust vs Next.js Docs, Hacker News vs The Verge 등) 를 대상으로 PageSpeed Insights 를 통해 성능, 접근성, SEO, JS 사용량을 비교했습니다.
실제 사이트 벤치마킹 (Yle): 핀란드 방송사 Yle 의 랜딩 페이지를 HTML First 원칙에 따라 수정 (JS 제거, 정적 CSS 추출 등) 하고 Google Lighthouse 를 통해 성능 지표를 비교했습니다.
3. 주요 기여 및 핵심 내용 (Key Contributions)
3.1 HTML First 개발 원칙
최소 권한의 원칙 (Principle of Least Power): HTML → CSS → JavaScript 순서로 복잡도가 낮은 기술부터 우선적으로 사용해야 합니다.
빌드 단계 최소화: 가능한 한 빌드 툴 없이 순수 HTML 로 개발합니다.
클라이언트 사이드 상태 최소화: 상태 관리를 서버로 이동시키고, 클라이언트 상태를 최소화합니다.
소스 보기 (View-Source) affordance 유지: 브라우저에서 직접 디버깅이 가능하도록 컴파일 단계를 숨기지 않습니다.
경량 라이브러리 활용: Alpine.js(상태 관리) 나 htmx(서버 통신 및 하이퍼미디어) 와 같이 HTML 문법을 확장하는 가벼운 라이브러리를 사용합니다.
3.2 기술적 대안 제시
네이티브 HTML 기능 활용:<details>, <summary>, <dialog>, 폼 자동 완성 (autocomplete), 네이티브 유효성 검사 등 자바스크립트 없이 구현 가능한 기능을 적극 활용합니다.
하이퍼미디어 (Hypermedia) 접근: 애플리케이션 로직을 서버로 이동시키고, HTML 응답을 통해 UI 를 부분적으로 갱신하는 방식 (htmx 등) 을 장려합니다.
4. 연구 결과 (Results)
4.1 코드 효율성 및 유지보수성
htmx 리팩토링 사례:
React 기반 SaaS 프로젝트 리팩토링 시 코드베이스 크기가 67% 감소, 자바스크립트 의존성이 96% 감소했습니다.
빌드 시간은 40 초에서 5 초로 88% 단축되었으며, 클라이언트 메모리 사용량과 초기 로딩 시간도 크게 개선되었습니다.
파일 수와 파일 유형이 감소하여 개발 워크플로우가 단순화되었습니다.
4.2 성능 벤치마킹
홀로타입 비교: HTML 중심 사이트 (예: Learn Rust) 는 자바스크립트 기반 사이트 (예: Next.js Docs) 에 비해 JS 요청 수와 용량이 현저히 적었으며, PageSpeed 점수 (성능, SEO 등) 에서 우위를 보였습니다.
예: Learn Rust (JS 10.2KB) vs Next.js Docs (JS 416.9KB).
Yle 사이트 벤치마킹:
CSS-in-JS 와 과도한 JS 로직을 제거하고 HTML First 방식으로 수정한 결과, Lighthouse 성능 점수가 58 에서 90 으로 향상되었습니다.
FCP (First Contentful Paint): 4.4 초 → 2.0 초
LCP (Largest Contentful Paint): 10.2 초 → 3.4 초
TBT (Total Blocking Time): 310ms → 0ms
4.3 유지보수 및 접근성
로컬리티 (Locality of Behavior): 관련 코드가 HTML 파일 내에 직접 위치하여 코드 탐색과 이해가 용이해졌습니다.
접근성과 AI: 깔끔한 HTML 구조는 웹 접근성 (EU 접근성 법 등) 을 준수할 뿐만 아니라, 웹 페이지를 이해하는 AI 에이전트에게도 더 명확한 신호를 제공합니다.
5. 의의 및 결론 (Significance)
프레임워크 피로 (Frameworkitis) 의 해결: 불필요한 추상화와 의존성을 줄여 개발 속도를 높이고, 장기적인 유지보수 비용을 절감합니다.
플랫폼의 재발견: 웹 표준이 발전함에 따라 프레임워크가 해결해야 할 과제가 줄어들었음을 강조하며, 개발자가 플랫폼의 네이티브 기능을 최대한 활용하도록 유도합니다.
미래 지향성:
AI 개발과의 조화: HTML First 코드는 AI 가 이해하고 생성하기 용이하여, AI 기반 개발 도구와 시너지를 낼 수 있습니다.
지속 가능성: 표준에 기반한 개발은 브라우저 업데이트에 따른 파기 위험이 적고, 웹의 초기 단순함과 확장성을 동시에 확보합니다.
결론적으로, 이 논문은 복잡한 웹 애플리케이션 개발에서도 HTML 을 최우선으로 고려하는 'HTML First' 접근법이 코드 크기 감소, 성능 향상, 유지보수 용이성, 접근성 개선 등 명백한 기술적 이점을 제공함을 실증했습니다. 이는 웹 개발의 방향성을 프레임워크 중심에서 플랫폼 중심으로 되돌리는 중요한 패러다임 전환을 제안합니다.