# Marko – 선언적 HTML 기반 언어
> Clean Markdown view of GeekNews topic #24246. Use the original source for factual precision when an external source URL is present.
## Metadata
- GeekNews HTML: [https://news.hada.io/topic?id=24246](https://news.hada.io/topic?id=24246)
- GeekNews Markdown: [https://news.hada.io/topic/24246.md](https://news.hada.io/topic/24246.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-11-10T00:33:07+09:00
- Updated: 2025-11-10T00:33:07+09:00
- Original source: [markojs.com](https://markojs.com/)
- Points: 8
- Comments: 2
## Summary
**Marko**는 기존 **HTML 문법을 확장해 반응형 UI를 선언적으로 작성**할 수 있게 해주는 언어로, 서버와 클라이언트 모두에서 효율적으로 동작하도록 설계되었습니다. **스트리밍 렌더링**으로 초기 화면을 즉시 표시하고, **세분화된 번들링**으로 불필요한 코드 전송을 최소화해 성능을 극대화합니다. 또한 **TypeScript 통합**과 풍부한 에디터 지원으로 대규모 서비스에서도 안정적이고 생산적인 개발 경험을 제공합니다. HTML 중심의 사고방식을 유지하면서도 현대적 웹 앱의 복잡성을 다루고 싶은 개발자에게 특히 매력적인 접근입니다.
## Topic Body
- **HTML 문법을 확장해 동적·반응형 웹 인터페이스를 구축**할 수 있는 선언적 언어로, 기존 HTML 사용자에게 익숙한 개발 환경 제공
- **스트리밍 렌더링**을 통해 서버에서 콘텐츠를 즉시 전송하고, 클라이언트 자바스크립트 번들 로딩 이전에도 화면 표시 가능
- **세분화된 번들링(fine-grained bundling)** 으로 불필요한 코드 전송을 최소화해 성능과 로딩 속도 향상
- **환경별 최적화 컴파일(targeted compilation)** 을 통해 브라우저와 서버 각각에 맞는 효율적 출력 생성
- **TypeScript 통합 지원**과 풍부한 에디터 기능으로 개발 생산성과 코드 품질 향상
---
### Marko 개요
- Marko는 **HTML을 재구상한 선언적 언어**로, 동적이고 반응형인 사용자 인터페이스 구축을 목표로 함
- 대부분의 유효한 HTML이 Marko에서도 그대로 사용 가능
- HTML 문법을 확장해 현대적 애플리케이션을 선언적으로 작성 가능
- eBay.com과 같은 **대규모 트래픽 사이트**에서 실제 서비스 운영에 사용 중
- HTML, CSS, JavaScript를 알고 있다면 별도의 학습 곡선 없이 바로 활용 가능
### 주요 특징
- **스트리밍 렌더링(Streaming)** 기능을 통해 서버가 준비된 콘텐츠를 즉시 전송
- 클라이언트 측 자바스크립트 번들이 로드되기 전에도 초기 화면 표시 가능
- HTML, 이미지, 자산이 비동기적으로 로드되어 빠른 첫 화면 렌더링 제공
- **세분화된 번들링(Fine-Grained Bundling)** 으로 필요한 코드만 전송
- 사용되지 않는 코드 제거 및 하위 템플릿 수준에서 불필요한 하이드레이션 생략
- “Lean by default, Fast by design”이라는 철학으로 설계
- **환경별 최적화 컴파일(Targeted Compilation)** 지원
- 브라우저와 서버의 차이를 고려해 각 환경에 맞는 최적화된 출력 생성
- 더 빠른 로드, 더 작은 번들, 하나의 통합 언어로 구현
### 코드 예시 및 문법
- HTML과 JavaScript를 결합한 간결한 문법 제공
```html
<button onClick() { count++ }>
Clicked ${count} times
</button>
```
- 동일한 코드를 간결한 구문으로도 작성 가능
```
let/count=0
button onClick() { count++ }
-- Clicked ${count} times
```
- `<for>`, `<if>`, `<await>`, `<const>`, `<define>` 등 **확장된 태그 세트** 제공
- HTML 기본 태그와 함께 Marko 전용 태그를 혼합 사용 가능
### 성능 및 확장성
- **빠른 초기 렌더링(Faster First Paint)** 지원으로 사용자 경험 개선
- **스케일 확장성(Scalable)** : 단순한 HTML 템플릿부터 복잡한 컴포넌트 구조까지 유연하게 확장 가능
- **작은 런타임과 최적화된 컴파일러**로 다양한 네트워크 환경에서도 높은 성능 유지
### TypeScript 및 개발 도구 통합
- **TypeScript 내장 지원**으로 강력한 타입 추론 제공
- 템플릿과 컴포넌트 간 타입 일관성 유지
- 에디터에서 자동 완성, 정의 이동, 구문 강조, 포매팅 등 기능 지원
- 오류 조기 탐지 및 코드 품질 향상으로 **안정적 개발 환경** 제공
### 결론
- Marko는 **HTML 친화적 문법**, **고성능 렌더링**, **정교한 번들링**, **TypeScript 통합**을 결합한 현대적 웹 개발 언어
- 서버와 클라이언트 모두에서 효율적으로 동작하며, **대규모 서비스 운영에 적합한 확장성과 성능**을 제공
## Comments
### Comment 46148
- Author: shakespeares
- Created: 2025-11-10T20:36:43+09:00
- Points: 1
아직까지는 스벨트겠네요
### Comment 46103
- Author: neo
- Created: 2025-11-10T00:33:09+09:00
- Points: 1
###### [Hacker News 의견](https://news.ycombinator.com/item?id=45858905)
- 앞으로 HTML 자체에서 **JavaScript 없이도** 모든 HTTP verb(put, delete 등)를 지원하고, 드롭다운·멀티셀렉트·날짜·시간 같은 입력 컨트롤을 기본 제공하며, 페이지 전체 리로드 없이 폼을 제출할 수 있기를 바람
처음 htmx라는 이름을 들었을 때 그런 걸 기대했지만, 실제로는 intercooler 수준이었음
이런 기능은 브라우저 벤더들의 폭넓은 지원이 필요함
- htmx의 아이디어 일부를 HTML 스펙에 직접 통합하려는 작업을 진행 중임
관련 내용은 [Triptych 프로젝트](https://alexanderpetros.com/triptych/)에서 볼 수 있음
- JavaScript 프레임워크를 직접 만들어본 입장에서 **Marko**는 과소평가받고 있다고 생각함
컴파일 타임 최적화가 매우 인상적이며, [세밀한 번들링 설명](https://markojs.com/docs/explanation/fine-grained-bundling) 문서도 훌륭함
실제로 [Kanban 보드 성능 비교](https://www.lorenstew.art/blog/10-kanban-boards)에서도 좋은 결과를 보였음
- RSC와 SSR 유행은 누군가의 **승진 명분**이나 새 회사를 차리기 위한 구실 같았음
React는 Next.js와 결합하며 플랫폼의 본질을 배신했고, 이제는 선택할 이유가 거의 없음
정적으로 하이드레이션된 React가 CDN 위에서 돌아가던 시절이 훨씬 나았음
- SvelteKit을 새 프로젝트에 자주 쓰는데, 기능·개발 경험·성능의 균형이 좋음
그래도 Marko도 살펴봐야겠다는 생각이 듦
Electron 같은 데스크톱 프레임워크 쪽도 이런 **깊이 있는 분석**이 있으면 좋겠음
- React를 좋아하는 이유는 단순히 **“그냥 JavaScript”** 이기 때문임
`<let>`이나 `<for>` 같은 문법은 보기 싫음
- JSX도 사실 순수한 JavaScript는 아님
너무 익숙해져서 그렇지, 새로운 프레임워크를 볼 때는 이 점을 기억해야 함
- 예전에도 좋은 템플릿 문법이 있었고 지금도 있음
`{% for user in users %}`나 `{#each users as user}` 같은 형태가 훨씬 명확함
JSX도 완벽하지 않음 — `{users.map(...)}` 구문은 여전히 장황함
- 예전에 Marko를 써봤는데, 원래 **eBay 내부 프로젝트**로 시작해 2015년쯤 오픈소스로 전환되었음
- 사람마다 다르지만, 이런 템플릿 기반 문법이 마음에 드는 이들도 있음
Vue나 Svelte가 인기 있는 이유도 그 때문임
참고로 Vue는 원하면 JSX만으로도 작성 가능함
- React는 이미 오래전부터 “그냥 JS”가 아님
DSL이 점점 비대해지고, **useFormStatus**나 **useActionState** 같은 훅이 늘어나면서 복잡해졌음
반면 Marko의 문법은 직관적이고, 함수는 함수처럼, 변수는 변수처럼 보여서 이해하기 쉬움
- HTML 안에 JS를 넣는 방식이 꽤 신선함
Ryan Carniato가 이 프로젝트에 참여했다가 나중에 SolidJS를 이끌게 되었는데, 왜 다시 **HTML-in-JS** 스타일로 돌아갔는지 궁금함
- Ryan은 Solid를 eBay/Marko 합류 전부터 진행 중이었음
두 프로젝트는 서로의 아이디어를 공유하며 발전했고, 지금도 교류 중임
- JSX를 선택한 이유는 단순함
많은 개발자가 익숙하고, 에디터와 TypeScript 지원이 이미 잘 되어 있음
- “JS inside HTML”이라니, 마치 1995년 Netscape 시절로 돌아간 느낌이라 농담처럼 들림
- 20년 넘게 프론트엔드가 돌고 돌아 결국 **JSP 시절의 패러다임**으로 회귀한 느낌임
당시엔 ‘촌스럽다’며 외면했지만, 결국 그게 옳았던 것 같음
- 기술은 순환하지만, 매번 미묘한 개선이 있음
어떤 건 사라지지만, 다음 세대의 창의성이 새로운 걸 만들어냄
- JSF도 기억남 — 서버 사이드에서 상태를 복원할 수 있었고, 복잡한 폼 기반 웹사이트를 빠르게 만들 수 있었음
다만 대규모 확장성에는 주의가 필요했음
- “옳은 패러다임”이라는 말엔 동의하기 어려움
상황에 따라 다른 접근이 더 적합할 수 있음
- SPA를 선택한 이유를 “옛 기술이 싫어서”로 단정하는 건 너무 단순함
당시엔 모바일 앱과 API 중심 구조가 필요했고, SPA는 그 요구에 맞았음
지금은 JSP로의 회귀가 아니라 **양쪽의 균형점**을 찾는 과정임
- Marko는 이미 **eBay에서 검증된 기술**임
수년간 써왔지만 문제를 겪은 적이 없음
반면 React 기반의 Facebook, Instagram, Messenger는 UI 버그가 끊이지 않음
실제 대규모 서비스에서의 결과를 보면 Marko의 안정성이 돋보임
- Marko는 예전부터 여러 번 HN에 등장했음
[2023년 1월](https://news.ycombinator.com/item?id=34591625), [2017년 8월](https://news.ycombinator.com/item?id=15057371), [2015년 2월](https://news.ycombinator.com/item?id=9065447)에도 관련 스레드가 있었음
- 꽤 오래된 프로젝트였다는 걸 이제야 알게 되었음
- JSX보다 훨씬 개선된 문법처럼 보임
특히 **Pug 스타일의 간결한 문법**이 마음에 드는데, 왜 문서 깊숙이 숨겨놨는지 의문임
[Concise Syntax 문서](https://markojs.com/docs/reference/concise-syntax)
- 나도 그 간결한 문법 때문에 Marko를 살펴봤었음
하지만 문서의 **하이라이팅 오류**나 속성 구분 방식이 마음에 들지 않았음
최근엔 Svelte를 주로 쓰지만, 여전히 더 우아한 문법을 기다리고 있음
- 개인적으로는 YAML의 실수를 반복하는 느낌임
공백 기반 문법은 괜찮지만, `--` 같은 표기나 파싱 난이도는 아쉬움
- Marko 팀이 Marko 6을 소개하기 위해 **Hacker News 클론**을 직접 만들어 공개했음
[GitHub 예제 보기](https://github.com/marko-js/example-hacker-news)
- 데모용으로 만든 언어라 그런지, “HTML-based”, “building web apps” 같은 **그라데이션 텍스트가 안 보이는** 건 좀 웃김