HandStack 화면 HTML 작성 지침
이 문서는 HandStack 화면 개발 시 준수해야 할 한국어 응답 규칙 및 Tabler CSS Framework 기반의 HTML 작성 지침을 명시합니다.
한국어 응답 규칙
모든 응답은 한국어로 작성하며, 다음 원칙을 따릅니다.
- 언어 통일: 모든 응답 콘텐츠는 한국어로 작성합니다.
- 코드 주석: 주석을 만들지 않아야 합니다. No Comment.
- 기술 용어: 필요시 영어 원문과 한국어를 병행 표기합니다 (예: "컨테이너(container)").
- 원문 유지: 에러 메시지나 로그는 원본 언어를 유지하되, 이에 대한 설명은 한국어로 제공합니다.
- 예외 상황:
- 코드 자체(변수명, 함수명 등)는 영어로 작성합니다.
- 공식 문서나 명령어는 원본 언어를 유지합니다.
- 사용자가 명시적으로 다른 언어를 요청하는 경우에만 해당 언어를 사용합니다.
Tabler CSS Framework 기반 HTML 작성 지침
HandStack 화면은 UI/UX의 일관성과 개발 효율성을 위해 다음 오픈소스 프레임워크와 라이브러리를 기반으로 합니다.
- Tabler CSS Framework:
- Bootstrap 5 기반으로 견고하며, 다양한 UI 컴포넌트와 아이콘을 제공합니다.
- 모바일, 태블릿, 데스크톱 등 다양한 디바이스에 최적화된 반응형(responsive) 화면을 효율적으로 구성할 수 있습니다.
- master-css:
- 직관적인 CSS 클래스 문 법(유틸리티 우선 접근)으로 스타일을 간편하게 작성할 수 있어 코드 가독성 및 유지보수성을 높입니다.
- 다양한 스타일링 옵션을 제공하며, 불필요한 코드 없이 빠른 페이지 로딩을 지원합니다.
- Mustache:
- HTML과 데이터를 결합하여 동적인 콘텐츠를 생성하는 템플릿 엔진입니다.
- 직관적인 문법으로 데이터 바인딩을 쉽게 처리하며, 복잡한 로직 없이 템플릿 작성을 가능하게 합니다.
UI 패턴 화면 예제
| ID | 패턴명 | 용도 |
|---|---|---|
| TPL000 | UX 레퍼런스 | 인터페이스, 항목 디자인 |
| TPL010 | 마스터/디테일 | 조회 조건 및 CRUD 가능한 그리드 목록 |
| TPL020 | 단일 마스터 | 단일 Row 입력 폼 서식 |
| TPL030 | 멀티 마스터 | 데이터가 많지 않은 단일 Row 입력 폼 서식 |
| TPL040 | 멀티 마스터/멀티 디테일 | 데이터가 많지 않은 단일 Row 입력 폼 서식 |
기본 레이아웃 구성
Tabler는 page, page-wrapper, page-header, page-body 등의 클래스를 활용하여 기본 레이아웃을 구성합니다.
최소 레이아웃 구조
HTML 문서의 기본 구조는 다음과 같습니다. <body> 태그에 style="visibility: hidden;"이 적용된 것은 HandStack 시스템의 초기 로딩 성능 최적화를 위한 것으로, 화면 로딩 전 깜빡임(FOUC, Flash Of Unstyled Content)을 방지하기 위함입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="visibility: hidden;">
<form autocomplete="off" id="form1" syn-datafield="MainForm">
<div class="page">
<div class="page-wrapper">
<div class="page-header mt-2 d-print-none">
<div class="container-fluid max-width:1600!">
<div class="row g-2 align-items-center">
<div class="col">
<div class="page-pretitle f:12!">
GNB 메뉴 / LNB 메뉴
</div>
<h2 class="page-title">
프로젝트 항목
</h2>
</div>
</div>
</div>
</div>
<div class="page-body mt-2">
<div class="container-fluid max-width:1600!">
<!-- 여기에 화면 레이아웃과 디자인을 생성 -->
</div>
</div>
</div>
</div>
</form>
<script src="/arha/js/syn.loader.js"></script>
</body>
</html>