화면 모델링

실제로 동작하는 화면은 HTML 모델에서 만듭니다. Wireframe은 기획 단계의 화면 설계이고, Theme, Asset, 다국어 모델은 화면이 함께 쓰는 자원을 관리합니다.

모델	결과	사용 시점
HTML	실행과 코드 생성이 가능한 화면	동작하는 화면을 만들 때
Wireframe `실험중`	검토용 화면 설계와 PDF·PowerPoint	구현 전에 화면을 기획할 때
Theme	색상, 글꼴 등 공통 토큰	여러 화면의 디자인을 맞출 때
Asset	이미지와 파일 원본	화면에 파일을 넣을 때
다국어	언어별 메시지	화면 문구를 번역할 때

HTML 모델

화면 전환

도구 모음에서 세 가지 보기를 전환합니다.

보기	내용
디자인	요소를 배치하고 속성을 편집
미리보기	화면 동작 확인
코드	HTML, CSS, Unibase 원문 편집

HTML, CSS, Unibase 클래스가 원본입니다. 디자인에서 고친 내용은 원본의 해당 범위에 반영됩니다.

디자인 화면에서는 데스크톱(1280px), 태블릿(768px), 모바일(390px) 폭으로 전환하고, 배율을 50%~160%로 조절합니다. 되돌리기는 Ctrl+Z, 다시 실행은 Ctrl+Y 또는 Ctrl+Shift+Z입니다. 원문 편집을 시작하기 전 상태로는 되돌릴 수 없습니다.

왼쪽 패널

탭	내용
화면	페이지 추가, 페이지 편집, 페이지 삭제와 재사용 컴포넌트
기본 요소	레이아웃, 폼, 콘텐츠, 탐색과 피드백 요소
구조	현재 페이지의 요소 구조

라우터 패널은 앱의 경로를 보여 줍니다. 화면 연결과 가드는 코드에서 편집합니다.

페이지 정보

페이지마다 화면 계약을 작성해 의도를 기록합니다.

항목	값
대표 경로	페이지 경로
화면 템플릿	직접 구성, 목록, 상세, 폼, 관리자
접근 권한	공개, 로그인 필요, 역할 제한
사용 API	API 모델의 Operation

페이지 상태는 문자열, 참·거짓, 숫자 타입으로 만들고 초깃값을 지정합니다.

재사용 컴포넌트

재사용 컴포넌트는 공통 요소를 한 번 정의해 여러 곳에 배치합니다. 원본을 고치면 배치한 곳 모두에 적용됩니다. 입력, 이벤트, 슬롯과 상태는 컴포넌트를 만든 뒤 코드에서 선언합니다.

앱 전체 상태

Store에서 여러 화면이 함께 쓰는 값을 만듭니다. 필드 추가와 메서드 추가로 구성하고, 요소의 Store 연결에서 다음 방식으로 연결합니다.

연결	동작
텍스트 · 읽기 전용	값을 화면에 표시
입력값 · 양방향	입력란과 값을 함께 갱신
선택 상태 · 양방향	선택 상태와 값을 함께 갱신
클릭	클릭 시 메서드 호출

브라우저 저장소 동작은 저장소 연결에서 메모리, 세션, 로컬 중에서 고릅니다. 비밀값은 브라우저 저장소에 넣지 마세요.

API 호출

요소의 동작에서 API 호출 대상과 API 호출 환경을 지정합니다. 응답은 성공 응답, 실패는 오류 메시지 상태, 진행 중 표시는 로딩 상태에 연결합니다. **제한시간 (ms)**도 지정할 수 있습니다.

API 서버 주소는 브라우저에 공개되는 값입니다. 비밀번호와 토큰을 입력하지 마세요. 환경 구성은 환경 모델에서 설명합니다.

실행과 코드 생성

실행은 앱을 별도 창으로 띄웁니다. 순서는 실행 창으로 앱 확인하기를 따르세요. HTML 패키지는 화면 코드 내보내기를 참고합니다.

Wireframe 모델 `실험중`

검토용 화면을 빠르게 그립니다. 코드 전환 없이 캔버스에서 작업합니다.

웹 또는 모바일을 고릅니다.
페이지 탭에서 페이지 추가를 선택합니다.
컴포넌트 탭의 항목을 Artboard로 끌어 놓습니다.
페이지와 요소를 요구사항에 연결합니다.

방향키로 선택한 요소를 1px, Shift+방향키로 8px 이동합니다.

기획 문서는 **문서 내보내기 → 화면 기획서 (.pptx·.pdf)**에서 만들며, 다음 설정을 지원합니다.

설정	선택지
형식	PowerPoint, PDF
출력 방식	화면 그대로, 기획 검토 문서, 편집 가능한 요소
출력 범위	현재 Artboard, 현재 페이지, 모든 페이지
화면 품질	표준 1배, 고해상도 2배
포함 항목	표지, 페이지 설명, 연결 요구사항, 요구사항 본문, 기획 메모, 주요 컴포넌트 모음, 페이지 번호

Theme 모델

HTML과 Wireframe이 함께 쓰는 디자인 값을 정의합니다.

토큰 추가: 색상, 타이포그래피, 간격, 모서리, 그림자, 아이콘 값을 만듭니다. 별칭 토큰으로 다른 토큰을 참조할 수 있습니다.
Mode: 토큰 값의 묶음을 추가하거나 현재 Mode 삭제로 지웁니다.
컴포넌트 변형 추가: 컴포넌트 타입별 변형과 속성을 정의합니다.
미리보기: 컴포넌트, 타이포그래피 위계, 생성 CSS를 확인합니다.

사용할 모델의 적용 Theme에서 Theme을 고릅니다. Theme 패키지는 theme.css와 theme.tokens.json을 폴더로 저장합니다.

Asset 모델

화면과 문서에 쓰는 파일 원본을 프로젝트에 넣습니다.

파일 가져오기로 파일을 추가합니다. 파일 하나의 크기는 64MiB 이하여야 합니다.
파일 종류 필터로 전체, 이미지, JSON, 영상, 텍스트를 나누어 봅니다.
정보를 고친 뒤 변경 저장을 선택합니다.

파일을 교체할 때는 같은 종류의 파일을 사용해야 합니다. 파일 자산 삭제는 모델에서 파일과 배치를 함께 지웁니다.

HTML의 이미지 선택에는 PNG, JPEG, GIF를 사용합니다. Asset에 먼저 추가한 뒤 HTML에서 고릅니다. video 요소에는 영상 파일을 지정합니다.

다국어 모델

언어별 메시지를 관리합니다.

언어 관리에서 기준 언어, 언어 태그(en, en-US 등), 언어 이름, 문자 방향, 대체 언어를 지정합니다.
메시지를 추가하고 메시지 키와 메서드 이름을 정합니다.
번역에서 언어별 문구를 입력합니다. 인수는 {name} 형식으로 씁니다. 사용 맥락에 번역자를 위한 설명을 적습니다.
번역을 확인했으면 검토 완료를 선택합니다.

메시지 상태는 미번역, 검토 필요, 검토 완료입니다. 미번역만 보기와 검토 필요한 메시지만 보기로 남은 작업을 찾습니다.

언어 설정에는 엄격한 번역 검사 옵션이, 메시지에는 빈 번역 허용 옵션이 있습니다.

HTML 요소의 다국어 연결에서 다국어 모델, 메시지 키, 메시지 표시 위치를 지정합니다. 표시 위치는 본문, title, aria-label, placeholder, alt 중에서 고릅니다.

메서드 이름이나 인수를 바꾸면 HTML 호출에 영향을 줍니다. 다른 모델은 자동으로 고쳐지지 않으므로 메시지 사용처와 변경 영향에서 사용처를 확인하세요.