가격표(그리드 패널): 카드 추가·간격·모바일 열 수

요금제를 나란히 비교하는 가격표는 카드 모양을 처음부터 그리기가 번거로운 블록입니다. 에디터의 가격표 요소는 카드 세 장이 이미 놓인 상태로 들어오고, 카드 묶음 전체를 다루는 그리드 설정 창에서 한 줄에 놓을 카드 수, 카드 추가, 간격, 정렬, 모바일 칸 수를 바꿀 수 있습니다. 이 글에서는 가격표를 넣고 카드를 늘려 가며 배치를 다듬는 방법을 안내합니다. 카드 안의 글자와 버튼 모양을 고치는 일반적인 방법은 다른 글에서 다룹니다.

1. 가격표는 어디에 있나요

편집 화면 왼쪽 레일에서 요소 추가를 열면 콘텐츠 묶음에 가격표가 있습니다. 목록이 길어서 위쪽 요소 검색 칸에 가격표를 입력하면 바로 찾을 수 있습니다. 블록을 넣을 섹션을 먼저 선택한 뒤 항목을 누르면 그 섹션 안에 들어갑니다.

처음에는 베이직, 프로, 엔터프라이즈 세 장이 한 줄로 놓입니다. 가운데 프로 카드에는 추천 표시와 보라색 테두리가 있고, 카드마다 이름, 가격, 한 줄 설명, 기능 세 줄, 아래쪽 버튼이 들어 있습니다. 베이직 카드의 세 번째 기능은 사용할 수 없다는 뜻의 회색 표시입니다.

2. 카드 묶음 전체 선택하기

카드 안쪽을 누르면 그 카드 하나가 선택됩니다. 카드 묶음 전체를 고르려면 카드와 카드 사이의 빈틈을 누르세요. 선택되면 오른쪽 위에 점 세 개가 나타납니다. 점 세 개를 눌러 아이콘 막대를 펼치고 톱니바퀴 모양의 요소 설정 열기를 누르면 그리드 설정 창이 열립니다.

3. 그리드 설정 창의 항목

• 그리드 (카드 수): 1, 2, 3, 4 중 하나를 누르면 한 줄에 놓이는 카드 수가 바뀝니다. 카드가 이 수보다 많으면 다음 줄로 넘어갑니다.
• 카드 추가: 맨 마지막 카드를 그대로 복사해 끝에 붙입니다. 아래 화면은 3에서 4로 바꾸고 카드를 하나 추가한 모습이며, 엔터프라이즈 카드가 한 장 더 생겼습니다.
• 카드 간격: 카드 사이의 틈을 숫자 입력이나 슬라이더로 0에서 80px까지 정합니다.
• 카드 정렬: 가로와 세로 각각 시작, 가운데, 끝, 꽉 중에서 고릅니다. 꽉이면 카드가 칸을 가득 채우고, 가로를 가운데로 하면 카드가 내용 폭만큼만 차지하고 칸 가운데에 놓입니다.

4. 카드 하나씩 다듬기

카드를 눌러 선택하면 위쪽에 작은 도구 막대가 나타납니다. 왼쪽·오른쪽 화살표(왼쪽으로 이동, 오른쪽으로 이동)는 카드 순서를 바꾸고, 요소 복제는 선택한 카드 바로 다음에 같은 카드를 만들며, 요소 삭제는 그 카드를 지웁니다. 이름이나 설명 같은 글자는 두 번 눌러 편집 상태로 만든 뒤 고치고 Esc를 누르면 됩니다. 복사로 생긴 카드는 이름과 설명이 그대로이므로 내용에 맞게 고쳐 주세요.

이 예에서는 카드 간격을 32px로 넓히고, 이름을 스타터, 프로, 비즈니스, 엔터프라이즈로 바꾸었습니다. 상단의 저장을 누른 뒤 편집 화면을 다시 열어도 같은 모습입니다.

5. 모바일에서 보이는 칸 수

화면 위쪽의 기기 아이콘으로 모바일 보기를 고르고 같은 방법으로 카드 묶음을 선택하면, 그리드 설정 창 아래에 모바일 칼럼 수 줄이 생깁니다. 자동, 1, 2, 3, 4 중에서 고르며, 처음에는 자동이라 카드가 위에서 아래로 한 장씩 쌓입니다. 숫자를 고르면 모바일에서만 그 칸 수로 바뀌고 데스크탑의 칸 수는 그대로입니다. 태블릿 보기에서는 같은 줄이 태블릿 칼럼 수로 나옵니다.

모바일 화면은 폭이 375px 기준이라 2칸으로 두면 카드 한 장이 약 150px가 됩니다. 글이 짧은 카드는 2칸, 내용이 많은 카드는 자동(한 장씩)으로 두는 식으로 고르시면 됩니다. 저장한 뒤 다시 열어도 모바일 설정은 유지됩니다.

6. 이렇게 활용해 보세요

• 요금제가 네 가지라면 카드 수를 4로 바꾸고 카드 추가로 한 장을 보탠 뒤 이름만 고쳐 보세요.
• 추천하고 싶은 요금제는 이동 화살표로 가운데에 놓으면 눈에 잘 들어옵니다.
• 카드 사이가 답답하면 카드 간격을 넓히고, 카드 폭이 좁아 보이면 간격을 줄여 보세요.

7. 알아 두실 점

• 가격과 기능 문구는 직접 입력한 글자입니다. 결제나 상품 설정과 자동으로 연결되지 않습니다.
• 카드 추가는 마지막 카드를 복사하므로, 추천 표시가 있는 카드를 마지막에 두면 그 표시까지 복사됩니다.
• 카드 안의 시작하기, 문의하기 버튼은 모양만 들어 있고 이동할 주소가 정해져 있지 않습니다. 버튼 연결은 별도 글에서 다룹니다.
• 그리드 설정 창에서 고를 수 있는 한 줄 카드 수는 1에서 4까지입니다.