응답형 작성에서 구성요소 가시성 조정

다양한 양식 요소에 대해 응답형 작성으로 페이지를 만들 때 모바일 크기에서 이미지를 숨기는 단계를 완료하여 구성 요소를 표시하거나 숨기는 방법을 알아봅니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

페이지 사용성을 높이는 방법은 구성 요소를 숨기거나 중단점 간에 다른 구성 요소를 표시하는 것입니다. 구성요소 가시성을 사용하는 방법은 셀 수 없이 많지만 몇 가지 예는 다음과 같습니다.

• 데스크톱 및 태블릿 크기의 경우 페이지 상단에 가로로 여러 버튼 구성요소를 사용하지만 모바일 크기에서는 버튼을 숨기고 드롭다운 구성요소를 표시합니다.
• 모바일 크기의 경우 더 작은 단추 크기를 사용하되 사용자가 엄지 손가락으로 누를 수 있을 만큼 단추가 충분히 큰지 확인합니다. 모바일용 버튼의 위치도 변경하는 것이 좋습니다.
• 데스크톱 및 태블릿 페이지에서는 이미지를 사용하지만 모바일에서는 이미지, 특히 큰 이미지를 숨깁니다.

이 절차에서는 데스크톱 및 태블릿 폼 팩터의 상단에 버튼을 표시하지만 버튼을 숨기고 모바일용 드롭다운 구성요소를 사용합니다.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 작업할 경험을 열거나 > 경험 생성을 선택하여 환경을 생성합니다.
   경험 생성에 대한 자세한 내용은 을 참조하십시오 다음에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 응답형 작성을 사용하여 처음부터 페이지를 생성합니다.
   페이지를 생성하는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 생성을 참조하십시오.
4. 상단에서 데스크톱 폼 팩터 아이콘이 선택되어 있는지 확인합니다.
   
5. 콘텐츠 트리의 본문에서 + 콘텐츠 추가를 선택하여 열 레이아웃을 추가합니다.
6. Layouts(레이아웃) 탭에서 Single column(단일 열)을 선택합니다.
7. 첫 번째 버튼 구성요소를 추가합니다.
   1. 스테이지의 새 열 가운데에 있는 + 아이콘을 선택합니다.
   2. 구성 요소 탭에서 버튼 구성 요소를 찾아 선택합니다.
   3. 구성 패널에서 None - Configure the component manually 를 선택합니다.
   4. 구성 패널의 구성 탭에서 Tasks를 입력하여 레이블 필드의 기본 텍스트를 대체합니다.
      
   5. 저장을 선택합니다.
8. 7단계를 두 번 반복하여 버튼을 두 개 더 추가하고 7d로 버튼 이름을 Incidents 및 Changes로 지정합니다.
   주:

   단추를 추가하려면 콘텐츠 트리에서 단추 1 을 가리키고, 메뉴 아이콘을 선택한 다음, 뒤에 추가를 선택합니다.

   

9. 콘텐츠 트리와 페이지가 정확한지 확인합니다.
   
10. 각 버튼 주위에 약간의 공간을 추가합니다.
    1. 콘텐츠 트리에서 버튼 1을 선택합니다.
    2. 구성 패널에서 스타일 탭을 선택합니다.
    3. 간격(Spacing)에서 여백(Margin)을 선택합니다.
    4. 메뉴에서 XS (아주 작게)를 선택합니다.
       
    5. 저장을 선택합니다.
11. 다른 두 단추 주위에 각각 10단계를 반복하여 공백을 추가합니다.
12. 버튼을 수직 방향에서 수평 방향으로 변경합니다.
    1. 콘텐츠 트리에서 열 1 을 선택합니다.
    2. 구성 패널의 방향에서 행 아이콘을 선택합니다.

       

    3. 저장을 선택합니다.
    페이지가 바탕 화면 너비에서 잘 보입니다.

    

13. 태블릿 폼 팩터 아이콘을 선택합니다.

    

    버튼의 간격과 위치도 태블릿 너비에 잘 어울립니다.

    

14. 모바일 반응형 작성 아이콘을 선택합니다.

    

    버튼은 더 작은 크기에서 거의 모든 수평 공간을 사용합니다.

    

15. 드롭다운 구성요소를 추가합니다.
    1. 스테이지 맨 위에 있는 데스크톱 폼 팩터를 선택합니다.
    2. 콘텐츠 트리에서 단추 3 을 가리키고, 메뉴 아이콘을 선택한 다음, 뒤에 추가를 선택합니다.
    3. 구성요소 탭에서 드롭다운 구성요소를 찾아 선택합니다.
    4. 구성 패널에서 None - Configure the component manually 를 선택합니다.
    5. 구성 패널의 구성 탭에 있는 자리 표시자 텍스트에서 기본 텍스트를 제거하고 아이콘에서 메뉴 개요를 선택합니다.
       
    6. 저장을 선택합니다.
16. 데스크톱 및 태블릿 폼 팩터에서 드롭다운 구성요소를 숨깁니다.
    1. 콘텐츠 트리에서 드롭다운 1을 선택합니다.
    2. 구성 패널의 구성 탭에서 구성요소 가시성을 선택하여 옵션을 표시합니다.
    3. 구성요소 숨기기를 선택합니다.
    4. 저장을 선택합니다.
17. 모바일 폼 팩터에서 버튼 구성요소를 숨깁니다.
    1. 스테이지 상단에 있는 모바일 폼 팩터 아이콘을 선택합니다.
    2. 콘텐츠 트리에서 버튼 1을 선택합니다.
    3. 구성 패널의 구성 탭에서 구성요소 숨기기를 선택합니다.
    4. 버튼 2와 버튼 3에 대해 b-c 단계를 반복합니다.
    5. 저장을 선택합니다.
    두 위치는 버튼 구성요소가 모바일 크기에서 숨겨져 있음을 보여줍니다. 먼저 구성 패널에서 구성요소 숨기기 옵션 옆에 있는 모바일 아이콘을 선택합니다. 값(선택한 구성 요소 숨기기)이 모바일 크기에 대한 값인지 확인하는 메시지가 표시됩니다.

    

    둘째, 콘텐츠 트리에 세 개의 버튼 구성요소가 숨겨진 아이콘과 함께 표시됩니다.
18. 모바일 폼 팩터에서 드롭다운 구성요소를 표시합니다.
    1. 콘텐츠 트리에서 드롭다운 1을 선택합니다.
    2. 구성 패널의 구성 탭에서 구성요소 숨기기를 선택하여 필드를 지웁니다.
    3. 저장을 선택합니다.
19. 미리 보기를 선택합니다.
    모바일 폼 팩터는 메뉴 아이콘과 함께 표시됩니다. 화살표를 선택하면 기본 옵션(목록 항목 1, 목록 항목 2 등)이 표시됩니다. 태블릿 및 데스크톱 폼 팩터에서 사용할 수 있는 가로 버튼처럼 작업, 인시던트 및 변경 사항을 표시하도록 드롭다운 구성요소를 구성할 수 있습니다.

    

20. 상단에서 데스크톱 및 태블릿 폼 팩터 아이콘을 선택합니다.
    데스크톱 및 태블릿 폼 팩터에는 메뉴 아이콘이 아닌 가로 버튼만 표시됩니다.
21. X를 선택하여 미리 보기 오버레이를 닫습니다.