HTML 디자인을 깨뜨리지 않는 템플릿 엔진 설계 방법

[29S09] How To Create A Beautiful Template Engine Which Never Breaks HTML (ja)

작성자
RubyKaigi
발행일
2025년 10월 05일

핵심 요약

  • 1 이상적인 템플릿 엔진은 순수 HTML 템플릿을 지향하며, 이를 위해 프레젠테이션 로직을 HTML 템플릿과 메인 프로그램으로부터 독립적으로 분리하는 것이 핵심입니다.
  • 2 프레젠테이션 계층에도 고유한 로직이 필요하며, 이를 템플릿 파일이나 메인 프로그램에 혼재시키는 것은 계층 분리를 저해하고 디자이너에게 불필요한 부담을 줍니다.
  • 3 Quartz 템플릿 엔진은 HTML 템플릿에 마커 ID를 사용하고, 프레젠테이션 로직을 CSS와 유사한 별도 파일로 정의하여 순수 HTML 템플릿과 로직 분리를 실현합니다.

도입

웹 애플리케이션 개발에서 템플릿 엔진은 프레젠테이션 계층을 담당하며 중요한 역할을 수행합니다. 그러나 현재 많은 웹 환경에서는 템플릿 엔진의 잘못된 사용과 오해가 만연하여 디자이너와 개발자 모두에게 비효율을 초래하고 있습니다. 본 발표는 템플릿 엔진의 올바른 이해를 돕고, HTML 디자인을 훼손하지 않으면서 효율적인 협업을 가능하게 하는 이상적인 템플릿 엔진의 설계 방안을 모색하고자 합니다. 특히, Ruby on Rails 환경에서 흔히 사용되는 ERB와 같은 방식의 문제점을 지적하고, 프레젠테이션 로직의 분리 중요성을 강조합니다.

템플릿 엔진의 역할과 오해

애플리케이션은 비즈니스 계층과 프레젠테이션 계층으로 나뉘며, 각 계층은 데이터와 로직을 가집니다. 프레젠테이션 계층에는 표시 방식과 관련된 ‘프레젠테이션 로직’이 필요합니다. 템플릿 엔진의 역할은 로직과 프레젠테이션을 분리하는 것이 아니라, 계층을 분리하는 것입니다. 현재 많은 웹 애플리케이션은 HTML과 프레젠테이션 로직을 템플릿 내에 혼재시켜 디자이너의 부담을 가중하고, 동시 편집 시 충돌 및 로직 오류 발생 위험을 높이는 문제를 겪고 있습니다.

이상적인 템플릿과 로직 분리

이상적인 템플릿은 프레젠테이션 로직이 없는 순수 HTML(Pure HTML) 형태여야 합니다. 이는 디자인 훼손 방지, 디자이너 학습 부담 경감, 동시 편집 충돌 방지 등 여러 장점을 제공합니다. 이 목표를 달성하기 위해서는 프레젠테이션 로직을 템플릿에서 완전히 분리하여 독립적으로 관리하는 것이 핵심입니다.

프레젠테이션 로직의 분리 방식 비교

프레젠테이션 로직을 작성하는 방식은 크게 세 가지입니다.

  1. 템플릿 파일 내 작성 (예: ERB): HTML과 로직 혼재로 순수 HTML이 아니며 협업 문제를 야기합니다.

  2. 메인 프로그램 내 작성 (예: Amrita2): 템플릿은 순수 HTML이나, 프레젠테이션 로직이 비즈니스 계층에 포함되어 계층 분리 원칙을 위배합니다.

  3. 독립적인 별도 파일 내 작성 (예: Quartz): 템플릿은 순수 HTML로 유지하고, 프레젠테이션 로직을 CSS와 유사한 별도 파일에 정의하는 가장 이상적인 방식입니다. 이는 비즈니스/프레젠테이션 계층 및 HTML/로직의 완벽한 분리를 통해 협업 효율성을 극대화합니다.

Quartz 템플릿 엔진의 구현 및 특징

Quartz는 독립 파일 분리 방식을 구현한 템플릿 엔진입니다.

  • 구조: 순수 HTML 프레젠테이션 데이터 파일에 로직 적용을 위한 마커 ID를 사용하고, 프레젠테이션 로직 파일에 CSS 유사 문법으로 로직을 기술합니다.

  • 작동: 이 두 파일을 조합하여 ERB, PHP, JSP 등으로 컴파일하며, 컴파일 시 마커 ID는 자동으로 제거됩니다.

  • 특징: 순수 HTML 템플릿, 고속 처리, 다양한 텍스트 형식 지원.

  • 활용: 조건부 요소 선택, 더미 요소 제거, 특정 요소 추출(부분 템플릿) 등 다양한 프레젠테이션 패턴 구현에 효과적입니다.

결론

결론적으로, 이상적인 템플릿 엔진은 순수 HTML 템플릿을 제공하며, 이를 위해 프레젠테이션 로직을 HTML 템플릿이나 메인 프로그램으로부터 완전히 분리하여 독립적인 파일에 정의하는 것이 중요합니다. 단순히 템플릿이 순수 HTML이라는 것만으로는 계층 분리가 완벽히 이루어졌다고 볼 수 없으며, 프레젠테이션 로직의 독립적인 관리가 핵심입니다. Quartz와 같은 템플릿 엔진은 이러한 원칙을 구현하여 디자이너와 프로그래머의 협업 효율성을 높이고, 유지보수성을 개선하는 실질적인 해결책을 제시합니다. 이는 웹 개발의 복잡성을 줄이고 보다 견고한 아키텍처를 구축하는 데 기여할 것입니다.

댓글 0

댓글 작성

0/1000
정중하고 건설적인 댓글을 작성해 주세요.

아직 댓글이 없습니다

첫 번째 댓글을 작성해보세요!