---
sourceDocument: 호주 애플리케이션 빌드 또는 수정
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/application-development

 Release :

    - australia

ft:locale :

    - ko-KR

ft:publication_title :

    - 호주 애플리케이션 빌드 또는 수정

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# 응답형 작성을 위한 레이아웃 조정

# 응답형 작성을 위한 레이아웃 조정 {#ariaid-title1}

* 릴리스 버전: Australia
* 
* 업데이트 날짜 2026년 03월 12일
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 2분

다양한 양식 요소에 대한 응답형 작성으로 페이지를 만들 때 레이아웃을 조정하여 더 작은 크기로 페이지의 모양과 느낌을 개선하는 방법을 알아보십시오.

## 시작하기 전에

필요한 역할: ui_builder_admin

## 이 태스크 정보

페이지 사용성을 높이는 방법은 중단점 간에 레이아웃을 조정하여 구성요소를 조정하는 것입니다. 레이아웃을 조정하기 위한 다양한 옵션이 있습니다. 이 절차에서는 모바일 양식 요소에 대한 탭 구성요소의 레이아웃을 조정합니다.  
속성 창에 있는 대부분의 열 레이아웃 옵션은 다양한 양식 요소에 맞게 편집할 수 있습니다. 그러나 다음 옵션에는 양식 요소 전반에 걸쳐 전역 값이 있습니다.

* 열 수
* 아래에 열 스태킹(픽셀) 옵션
* 접근성 아래의 모든 옵션
{#responsive-authoring-adjust-layout__ul_wyz_v3p_lcc}

## 프로시저

1. 다음으로 이동 모두Now Experience 프레임워크UI 빌더.
2. 경험 생성을 선택하여 작업할 경험을 열거나 경험을 생성합니다 \>.  
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 [UI 빌더에서 사용자가 애플리케이션과 상호 작용하는 방법 구성](https://servicenow-prod.fluidtopics.net/wmSXv2G8HVoRum7Zuh3W9w "에서 경험이 UI 빌더무엇인지 알아봅니다. 경험에 포함된 내용을 이해합니다.") .
3. 응답형 작성으로 페이지를 처음부터 새로 생성합니다.  
   페이지를 생성하는 방법에 대한 자세한 내용은 [UI 빌더에서 페이지 생성을](https://servicenow-prod.fluidtopics.net/hdB5pxJ108nQsFmjCl3uYg "사용자를 위한 웹 환경을 구축할 수 있도록 포털, 작업 공간 또는 사용자 지정 애플리케이션에 대한 페이지를 생성합니다.UI 빌더") 참조하세요.
4. 상단에서 데스크톱 폼 요소 아이콘이 선택되어 있는지 확인합니다.  
   ![편집기 뷰에서 UI 빌더 페이지 상단에 있는 데스크톱 양식 요소를 가리키는 검은색 화살표 아이콘입니다.]()
5. 스테이지에서 + 콘텐츠 추가를 선택합니다.
6. 레이아웃 탭에서 단일 열을 선택합니다.
7. 탭 구성요소를 추가합니다.
   1. 스테이지에서 열 중앙에 있는 + 아이콘을 선택합니다.
   2. 구성요소 탭에서 탭 구성요소를 찾아 선택합니다.
   3. 저장을 선택합니다.
   {#responsive-authoring-adjust-layout__substeps_am5_1rv_sbc}
8. 구성 패널의 구성 탭에서 편집 아이콘을 선택하여 첫 번째 탭의 이름을 편집합니다.  
9. 탭 레이블에<kbd class="ph userinput">탭 1</kbd>을 입력합니다.
10. 탭 ID에 <kbd class="ph userinput">tab_1 입력합니다.</kbd>
11. 저장을 선택합니다.
12. 두 번째 탭을 추가합니다.
    1. 구성 탭에서 탭 옆에 있는 + 추가를 선택합니다.
    2. 빈 컨테이너에서 시작을 선택하고 다음을 선택합니다.
    3. 탭 레이블에<kbd class="ph userinput">Tab 2</kbd>를 입력합니다.
    4. 탭 ID가 자동으로 tab_2로 채워졌는지 확인합니다.  
    5. 생성을 선택합니다.
    {#responsive-authoring-adjust-layout__substeps_z3n_1cn_5bc}
13. 단계 12를 반복하여 세 번째 탭을 추가하고 12c에서 탭의 이름을 탭 <kbd class="ph userinput">3으로</kbd> 지정한다.
14. 컨텐츠 트리와 페이지가 정확한지 확인합니다.
15. 태블릿 폼 팩터 아이콘을 선택합니다.  
    ![편집기 뷰에서 UI 빌더 페이지 상단에 있는 태블릿 폼 팩터 아이콘을 가리키는 검은색 화살표.]()

    탭의 간격과 위치는 태블릿 너비에서 잘 보입니다.
16. 모바일 폼 팩터 아이콘을 선택합니다.  
    ![편집기 뷰에서 UI 빌더 페이지 상단에 있는 모바일 양식 요소를 가리키는 검은색 화살표 아이콘.]()

    탭은 크기가 작을수록 더 많은 공간을 차지합니다.
17. 모바일 크기에 맞게 탭의 레이아웃을 변경합니다.
    1. 콘텐츠 트리의 열 레이아웃 1에서 열 1을 선택합니다.
    2. 구성 패널의 방향에서 행 아이콘을 선택합니다.  
    3. 저장을 선택합니다.

    {#responsive-authoring-adjust-layout__substeps_mf2_tzm_5bc}  
    스테이지가 자동으로 업데이트되어 탭 1이 표시되고 새 드롭다운 메뉴가 있음을 보여줍니다.
18. 미리 보기를 선택합니다.
19. 자세히를 선택합니다.  
    다른 두 탭을 사용할 수 있습니다.
20. 데스크톱 및 태블릿 폼 요소 아이콘을 선택하여 더 보기 드롭다운이 나타나지 않는지 확인합니다.
21. X를 선택하여 미리 보기 오버레이를 닫습니다.