응답형 작성
응답형 작성을 사용하여 데스크톱, 태블릿 및 모바일과 같은 다양한 양식 요소(크기)에 맞게 원활하게 조정되는 페이지를 만들 UI 빌더 수 있습니다.
의 응답형 작성 UI 빌더
응답형 작성을 사용하면 보기 좋고 모든 양식 요소에서 제대로 작동하는 페이지를 만들 수 있으므로 사용자가 콘텐츠와 더 쉽게 상호 작용할 수 있습니다. 예를 들어, 노트북에서 볼 때 세 개의 열이 포함된 페이지는 작은 화면의 경우 단일 열로 조정될 수 있습니다.
UI 빌더 는 현재 세 가지 기본 폼 팩터를 제공합니다.
- 데스크톱(1281픽셀에서 무한대까지)
- 태블릿(1280픽셀 이하)
- 모바일(500픽셀에서 0으로)
이러한 폼 팩터 외에도 최대 3개의 추가 사용자 지정 중단점(너비)을 만들 수 있습니다. 자세한 내용은 응답형 작성을 위한 중단점 만들기 문서를 참조하십시오.
응답형 작성 및 리플로우
Xanadu Store 릴리스 1부터 응답형 작성은 페이지를 처음부터 만들 UI 빌더 때만 사용할 수 있습니다. 기존 페이지 또는 템플릿으로 만든 페이지에는 응답형 작성을 사용할 수 없습니다. 이러한 유형의 페이지는 기존의 기본 리플로우 모델을 계속 사용하여 다양한 화면 너비에 맞게 페이지를 조정합니다.
리플로우는 사용자가 브라우저 확대/축소 비율을 400%로 늘리면 콘텐츠나 기능의 손실 없이 페이지 레이아웃을 자동으로 세로 스택 뷰로 변환합니다. 이 조정은 시력이 나쁜 사용자나 모니터 크기, 장치 유형, 어두운 조명 또는 기타 상황으로 인해 브라우저에서 웹 콘텐츠를 보는 데 문제가 있는 사용자에게 도움이 됩니다.
템플릿을 사용하여 만들거나 처음부터 새로 만든 모든 기존 페이지는 리플로우를 자동으로 사용합니다. 이제 에서 처음부터 UI 빌더페이지를 만들 때 추가 단계에서 응답형 작성이 기본적으로 선택되어 있음을 보여 줍니다. 자동 리플로우 규칙 사용을 선택하여 리플로우를 사용하도록 선택할 수 있지만, 응답형 작성 옵션을 사용하면 페이지 작동 방식을 더 잘 제어하고 다른 양식 요소를 볼 수 있습니다. 에서 UI 빌더페이지를 만드는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 만들기를 참조하십시오.
리플로우에 대한 자세한 내용은 을 참조하십시오 Reflow for Configurable Workspace.
리플로우를 UI 빌더 지원하는 구성 요소 목록은 Next Experience 구성 요소 릴리스 정보의리플로우 지원 섹션을 참조하십시오.
변경 내용의 적용 및 계단식
폼 팩터에 대한 모든 변경 내용은 모든 작은 폼 팩터에 자동으로 적용됩니다. 예를 들어 태블릿에 대한 변경 내용은 태블릿과 모바일 모두에 적용됩니다. 그러나 모바일 폼 팩터를 변경하면 태블릿 폼 팩터의 종속 설정이 재정의됩니다. 이 계단식 기능을 사용하면 페이지가 잘 보이고 잘 작동하도록 각 작은 폼 팩터에 대해 특정 변경 작업을 수행할 수 있습니다.
응답형 작성 및 컨트롤러
페이지에 컨트롤러를 추가하는 경우 컨트롤러 속성은 전역이며 양식 요소별로 설정할 수 없습니다. 컨트롤러에 대한 자세한 내용은 을 참조하십시오 컨트롤러를 UI 빌더 사용하여 페이지에 데이터 바인딩(고급 기능).
응답형 작성을 사용하여 페이지 만들기
페이지를 만들 때 맞춤형 디자인을 만들어 다양한 폼 팩터의 모양과 느낌을 제어할 수 있습니다.
기본적으로 스테이지에서는 데스크톱용 페이지(1281픽셀에서 무한대까지)를 빌드합니다. 언제든지 다른 아이콘을 선택하여 태블릿 또는 모바일과 같은 다른 폼 팩터에서 스테이지의 페이지를 볼 수 있습니다. 필요한 경우 새 양식 요소에 적절하게 표시되도록 페이지를 편집합니다.
다음은 데스크톱 폼 팩터에서 샘플 페이지의 모양입니다.
다음은 태블릿 폼 팩터에 대해 사용자 지정된 동일한 페이지입니다.
태블릿의 경우 제목 및 이미지 구성 요소의 크기가 축소되었습니다. 단순 목록 구성 요소 구성은 6개가 아닌 4개의 열을 표시하도록 편집되었으며 최대 행 수는 5개로 설정되었습니다. 양식 요소의 구성요소를 편집할 때 변경된 필드는 해당 양식 요소(이 경우 태블릿)에 대한 계단식 아이콘으로 표시됩니다. 이 아이콘을 사용하면 지정된 페이지의 양식 요소 간의 차이를 쉽게 확인할 수 있습니다.
다음은 모바일 폼 팩터에 대해 사용자 지정된 동일한 페이지입니다.
제목의 단어 수가 줄어들고 이미지 구성 요소가 숨겨졌습니다. 단순 목록 구성요소 구성이 편집되어 4개가 아닌 2개의 열이 표시되었으며 "모두 보기" 바닥글 옵션을 숨기는 옵션이 선택되었습니다. 모바일용으로 특별히 사용자 지정된 두 필드 옆에는 모바일 계단식 아이콘이 있습니다. 최대 행 필드에는 태블릿 계단식 아이콘이 계속 유지되는데, 이는 해당 필드가 태블릿 설정을 상속하고 모바일용으로 사용자 지정되지 않았기 때문입니다.
편집기 뷰의 기본 폼 팩터 외에도 언제든지 픽셀 필드에 숫자를 수동으로 입력할 수 있습니다. 스테이지는 범위를 기준으로 가장 가까운 폼 팩터로 조정됩니다. 예를 들어, 850픽셀을 입력하면 스테이지의 범위가 1280-501픽셀로 정의되므로 스테이지가 태블릿 폼 팩터에 맞게 조정됩니다.
