---
sourceDocument: Yokohama Mobile 구성 및 탐색
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/yokohama/mobile

 Release :

    - yokohama

ft:locale :

    - ko-KR

ft:publication_title :

    - Yokohama Mobile 구성 및 탐색

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - evelopment, Data and Analytics


---

# 모바일 카드 작성기 구성요소

# 모바일 카드 작성기 구성요소 {#ariaid-title1}

* 릴리스 버전: Yokohama
* 
* 업데이트 날짜 2025년 01월 30일
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 6분

모바일 카드를 구성하는 구성요소에 대해 알아보기

## 구성요소 추가 및 제거 {#mcb-elements__section_gqy_xn4_ynb}

## 단추 {#mcb-elements__section_kfq_3b4_zcc}

버튼 구성요소를 사용하면 버튼을 선택할 때 사용자가 작업을 수행할 수 있습니다. 버튼을 사용하여 카드에 작업을 추가합니다.  
{#mcb-elements__table_a5m_jb4_zcc__entry__2}

| 속성 | 설명 |
|-|-|
| 요소 ID | 버튼의 고유 JSON ID 속성입니다. |
| 표시 ||
| 높이 | 버튼 높이(픽셀) |
| 너비 | 버튼의 너비(픽셀)입니다. 이 속성을 비워 두면 버튼이 사용 가능한 공간을 채웁니다. |
| 모서리 반경 | 버튼의 모서리 반경입니다. 버튼의 둥근 모서리를 만들려면 이 값을 늘립니다. |
| 여백 상단 | 버튼의 상단 여백(픽셀) |
| 여백 하단 | 버튼의 하단 여백(픽셀) |
| 왼쪽 여백 | 버튼의 왼쪽 여백(픽셀) |
| 오른쪽 여백 | 버튼의 오른쪽 여백(픽셀) |
| 테두리 너비 | 버튼의 테두리 너비(픽셀)입니다. |
| 버튼 속성 ||
| 형식 | 버튼에 텍스트 레이블, 아이콘 또는 둘 다를 표시할지 여부를 결정합니다. 다음 옵션 중에서 선택합니다. * 레이블 * 아이콘 * 라벨 및 아이콘 {#mcb-elements__ul_ppl_kc4_zcc} |
| 레이블 | 버튼의 텍스트 레이블입니다. 주: 이 옵션은 레이블 또는 레이블 및 아이콘 형식을 선택한 경우에만 나타납니다. |
| 아이콘 | 버튼에 표시될 아이콘입니다. 제공된 드롭다운 목록에서 아이콘을 선택합니다. 주: 이 옵션은 아이콘 또는 레이블 및 아이콘 형식을 선택한 경우에만 나타납니다. |
| 접근 가능 이름 | 보조 장치를 사용하는 사용자가 버튼의 목적을 알 수 있도록 큰 소리로 읽어주는 대체 텍스트입니다. 주: 이 옵션은 아이콘 형식을 선택한 경우에만 나타납니다. |
| 작업 ||
| 다중 | 사용자가 버튼을 선택할 때 선택할 수 있는 여러 다른 작업의 메뉴를 만듭니다. |
| 함수 | 미리 정의된 기능 또는 구성 가능한 기능을 선택합니다. 구성 가능한 기능은 sys_sg_button 테이블에서 가져옵니다. 사용 가능한 미리 정의된 함수: * 취소 * 계속 * 로그아웃 {#mcb-elements__ul_q24_hd4_zcc} |
| 버튼 모양 ||
| 텍스트 및 아이콘 스타일 | 텍스트, 아이콘 또는 둘 다의 서식 스타일입니다. |
| 배경색 변수 | 버튼 배경의 색상 변수입니다. |
| 배경색 | 버튼의 배경 색상입니다. 이 속성의 값은 HTML 색상 코드입니다(예: sienna의 경우 `#A0522D` ). |
| 텍스트 및 아이콘 색상 변수 | 버튼의 텍스트와 아이콘의 색상 변수입니다. |
| 텍스트 및 아이콘 색상 | 버튼의 텍스트와 변수 색상입니다. 이 속성의 값은 HTML 색상 코드입니다(예: sienna의 경우 `#A0522D` ). |
| 테두리 색 변수 | 버튼 테두리의 색상 변수입니다. |
| 테두리 색상 | 버튼 테두리의 색상입니다. 이 속성의 값은 HTML 색상 코드입니다(예: sienna의 경우 `#A0522D` ). |
[표 1. 버튼 구성 속성]

{#mcb-elements__table_a5m_jb4_zcc}

## 컨테이너 {#mcb-elements__section_y5k_yn4_ynb}

컨테이너 구성요소에는 다른 구성요소가 포함되어 있습니다. 컨테이너에는 다른 컨테이너를 포함한 모든 카드 구성요소가 포함될 수 있습니다. 컨테이너를 사용하여 카드 구성요소를 구성하고 컨테이너 내의 구성요소를 정렬하고 배포하는 방법을 결정합니다.  
{#mcb-elements__table_nm2_bp4_ynb__entry__2}

| 속성 | 설명 |
|-|-|
| 속성 ||
| 요소 ID | 컨테이너의 고유 JSON ID 속성입니다. |
| 표시 ||
| 높이 | 컨테이너의 높이(픽셀) |
| 너비 | 컨테이너의 너비(픽셀)입니다. 이 속성을 비워 두면 컨테이너가 사용 가능한 공간을 채웁니다. |
| 여백 상단 | 컨테이너의 상단 여백(픽셀) |
| 여백 하단 | 컨테이너의 하단 여백(픽셀) |
| 왼쪽 여백 | 컨테이너의 왼쪽 여백(픽셀) |
| 오른쪽 여백 | 컨테이너의 오른쪽 여백(픽셀) |
| 모서리 반경 | 컨테이너의 모서리 반경입니다. 이 값을 늘리면 컨테이너에 둥근 모서리가 만들어집니다. |
| 디자인 ||
| 컨테이너 방향 | 컨테이너 내 구성요소의 방향 방향을 결정합니다. 다음 값 중에서 선택합니다. * 수평 * 세로 {#mcb-elements__ul_p5f_dq4_ynb} |
| 정렬 | 컨테이너 내 구성요소의 정렬을 결정합니다. 다음 값 중에서 선택합니다. * 스트레치 * 센터 * 왼쪽 * 오른쪽 * 상위 * 하단 {#mcb-elements__ul_prk_1q4_ynb} |
| 배포 | 컨테이너 내 구성요소의 분포를 결정합니다. 다음 값 중에서 선택합니다. * 같음 * 자동 {#mcb-elements__ul_d52_xp4_ynb} |
| 배경 유형 | 컨테이너에 포함될 배경의 유형입니다. 다음 값 중에서 선택합니다. * 없음 * 색상 * 이미지 {#mcb-elements__ul_nth_3dz_fdc} |
[표 2. 컨테이너 구성 속성]

{#mcb-elements__table_nm2_bp4_ynb}

## 아이콘 {#mcb-elements__section_pwz_j2z_fdc}

아이콘 구성요소는 카드에 아이콘을 표시하는 데 사용됩니다. 구성 화면의 아이콘 드롭다운 메뉴에서 아이콘을 선택할 수 있습니다.  
{#mcb-elements__table_qwz_j2z_fdc__entry__2}

| 속성 | 설명 |
|-|-|
| 속성 ||
| 요소 ID | 아이콘의 고유 JSON ID 속성입니다. |
| 표시 ||
| 아이콘 | 표시할 아이콘입니다. |
| 여백 상단 | 아이콘의 상단 여백(픽셀)입니다. |
| 오른쪽 여백 | 아이콘의 오른쪽 여백(픽셀)입니다. |
| 여백 하단 | 아이콘의 아래쪽 여백(픽셀)입니다. |
| 왼쪽 여백 | 아이콘의 왼쪽 여백(픽셀)입니다. |
| 디자인 ||
| 색 변수 | 아이콘의 색상 변수입니다. |
| 색상 | 아이콘의 색상입니다. 이 속성의 값은 HTML 색상 코드입니다(예: sienna의 경우 `#A0522D` ). |
[표 3. 아이콘 구성 속성]

{#mcb-elements__table_qwz_j2z_fdc}

## 이미지 {#mcb-elements__section_nr5_yn4_ynb}

이미지 구성요소는 이미지를 표시하는 데 사용됩니다. 이미지가 포함된 기록의 필드(예: 사용자 기록의 아바타 필드)를 선택하여 표시할 이미지를 정의합니다.  
{#mcb-elements__table_lwl_gr4_ynb__entry__2}

| 속성 | 설명 |
|-|-|
| 속성 ||
| 요소 ID | 이미지의 고유 JSON ID 속성입니다. |
| 표시 ||
| 높이 | 이미지의 높이(픽셀)입니다. |
| 너비 | 이미지의 너비(픽셀)입니다. |
| 여백 상단 | 이미지의 상단 여백(픽셀)입니다. |
| 오른쪽 여백 | 이미지의 오른쪽 여백(픽셀)입니다. |
| 여백 하단 | 이미지의 하단 여백(픽셀)입니다. |
| 왼쪽 여백 | 이미지의 왼쪽 여백(픽셀)입니다. |
| 모서리 반경 | 이미지의 모서리 반경입니다. 이미지의 둥근 모서리를 만들려면 이 값을 늘립니다. |
| 이미지 ||
| 매핑된 필드 사용 | 이미지에서 매핑된 필드를 사용할지 여부를 선택합니다. |
| 필드 값 | 이미지의 매핑된 필드 값입니다. 이 속성은 매핑된 필드 사용 이 선택된 경우에만 표시됩니다. |
| 첨부 파일 | 사용할 첨부된 이미지입니다. 이 속성은 매핑된 필드 사용 이 선택되지 않은 경우에만 표시됩니다. |
| 이미지 확장 | 이미지의 배율 크기입니다. 다음 값 중에서 선택합니다. * 입력 * 적합 {#mcb-elements__ul_xd5_1s4_ynb} |
[표 4. 이미지 구성 속성]

{#mcb-elements__table_lwl_gr4_ynb}

## 텍스트 {#mcb-elements__section_eng_zn4_ynb}

텍스트 구성요소는 카드에 텍스트를 표시합니다. 정적 텍스트 또는 필드 값 레이블의 텍스트일 수 있습니다. 사용자가 기록 목록을 볼 때 먼저 확인해야 하는 정보에 텍스트 구성요소를 사용합니다.  
{#mcb-elements__table_pjv_jt4_ynb__entry__2}

| 속성 | 설명 |
|-|-|
| 속성 ||
| 요소 ID | 텍스트의 고유 JSON ID 속성입니다. |
| 표시 ||
| 필드 유형 | 텍스트 필드의 유형입니다. 다음 값 중에서 선택합니다. * 필드 값 * 필드 레이블 * 정적 텍스트 {#mcb-elements__ul_qmd_rt4_ynb} |
| 텍스트 가치 | 텍스트 구성요소에 나타나는 텍스트입니다. 이 값은 필드 유형 속성에서 정적 텍스트를 선택한 경우에만 사용됩니다. |
| 높이 | 텍스트 구성요소의 높이(픽셀)입니다. |
| 너비 | 텍스트 구성요소의 너비(픽셀)입니다. |
| 여백 상단 | 텍스트 구성요소의 상단 여백(픽셀)입니다. |
| 오른쪽 여백 | 텍스트 구성요소의 오른쪽 여백(픽셀)입니다. |
| 여백 하단 | 텍스트 구성요소의 하단 여백(픽셀)입니다. |
| 왼쪽 여백 | 텍스트 구성요소의 왼쪽 여백(픽셀)입니다. |
| 디자인 ||
| 텍스트 스타일 | 텍스트의 서식 스타일입니다. |
| 텍스트 정렬 | 구성요소의 텍스트 정렬입니다. 다음 값 중에서 선택합니다. * 왼쪽 * 중앙 * 오른쪽 {#mcb-elements__ul_cln_w54_ynb} |
| 최대 라인 수 | 요소에 있는 텍스트의 최대 줄 수입니다. |
| 텍스트 색상 변수 | 텍스트의 색상 변수입니다. |
| 텍스트 색상 | 텍스트의 색상입니다. 이 속성의 값은 HTML 색상 코드입니다(예: sienna의 경우 `#A0522D` ). 주: 텍스트 구성요소의 배경색은 변경할 수 없지만 컨테이너 구성요소 내에 텍스트 구성요소를 배치하고 컨테이너 배경색을 변경할 수 있습니다. |
[표 5. 텍스트 구성 속성]

{#mcb-elements__table_pjv_jt4_ynb}

## 비디오 {#mcb-elements__section_kvf_qfz_fdc}

비디오 구성요소는 카드에 포함된 비디오를 표시합니다. Youtube 및 Viemo 비디오 URL이 모두 지원됩니다.  
{#mcb-elements__table_lvf_qfz_fdc__entry__2}

| 속성 | 설명 |
|-|-|
| 속성 ||
| 요소 ID | 비디오의 고유 JSON ID 속성입니다. |
| 표시 ||
| 매핑된 필드 사용 | 비디오에서 매핑된 필드를 사용할지 여부를 선택합니다. |
| 필드 값 | 비디오의 매핑된 필드 값입니다. 이 속성은 매핑된 필드 사용 이 선택된 경우에만 표시됩니다. |
| URL | 포함할 비디오의 URL입니다. 이 속성은 매핑된 필드 사용 이 선택되지 않은 경우에만 표시됩니다. |
| 재생 모드 | 비디오가 모바일 장치에 표시되는 방식입니다. 다음 값 중에서 선택합니다. * 전체 화면 * 인라인 {#mcb-elements__ul_s5d_yfz_fdc} |
| 너비 | 비디오 구성요소의 너비(픽셀)입니다. |
| 높이 | 비디오 구성요소의 높이(픽셀)입니다. |
| 여백 상단 | 비디오 구성요소의 상단 여백(픽셀)입니다. |
| 오른쪽 여백 | 비디오 구성요소의 오른쪽 여백(픽셀)입니다. |
| 여백 하단 | 비디오 구성요소의 하단 여백(픽셀)입니다. |
| 왼쪽 여백 | 비디오 구성요소의 왼쪽 여백(픽셀)입니다. |
[표 6. 비디오 구성 속성]

{#mcb-elements__table_lvf_qfz_fdc}