- 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를 결합한 간결한 문법 제공
<let/count=0> <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 통합을 결합한 현대적 웹 개발 언어
- 서버와 클라이언트 모두에서 효율적으로 동작하며, 대규모 서비스 운영에 적합한 확장성과 성능을 제공