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