서버 없이 화면 시안 만들기
도구 > 개발 도구 > Tabler 웹 페이지 제작은 일반 HTML 시안을 만드는 도구입니다. HandStack 거래와 컨트롤 실행을 연결할 화면은 View Designer 학습을 이용하세요.
1. 화면 추가하고 편집
- **화면 추가 (+)**에서 빈 페이지나 목적에 맞는 기본 템플릿을 고릅니다.
- 구성요소를 추가하고 요소 계층에서 대상 요소를 선택합니다.
- 속성에서 문구와 크기를 바꿉니다. 이동은 선택 상자의 이름 레이블을 드래그합니다.
- 미리보기에서 표시 결과를 확인합니다.
템플릿의 검색·저장 버튼과 HandStack Controls는 디자인용 예시입니다. 실제 거래, 업로드 서버, 지도 API나 고급 컨트롤 라이브러리는 자동 연결되지 않습니다.
2. 저장과 내보내기 구분
| 작업 | 목적 |
|---|---|
| 저장 | 다시 편집할 .project.json 프로젝트 파일 갱신 |
| 소스보기·소스 적용 | 화면 HTML 원문 편집 |
| HTML 내보내기·퍼블리싱 | 다른 환경에서 제공할 화면과 자산 경로 확인 |
처음 저장할 때 위치·파일명을 정하고 .project.json 확장자를 포함하세요. 브라우저의 임시 복구 데이터는 파일 저장을 대신하지 않습니다. 기존 파일을 열어 편집했다면 저장 시 그 파일을 갱신합니다.
이미지 파일 선택은 주소를 입력하는 기능이지 파일을 자동 복사·포함하는 기능이 아닙니다. 내보낸 환경에서도 같은 자산 경로를 제공해야 합니다.
3. 다시 열어 확인
프로젝트를 다시 열어 요소·중첩 구조가 유지되는지 확인하고, 내보낸 HTML도 확인하세요. 모바일 미리보기는 크기를 바꿔 보는 기능이며 반응형 @media 규칙을 자동 생성하지 않습니다.
Studio의 저장 마커는 data-studio-props입니다. View Designer의 data-designer-*와 혼용하지 마세요. 두 도구의 원본 차이는 파일과 저장 규칙에 정리되어 있습니다.