진행 바·평점 요소

신청 현황이나 고객 만족도를 막대로 보여 주고, 후기 평점을 별로 보여 주고 싶은데 디자인을 처음부터 만들기는 부담스러우셨나요? 에디터의 진행 바와 평점 요소는 막대와 별이 이미 그려진 블록을 넣어 주므로, 문구와 숫자, 색만 내용에 맞게 고치면 됩니다. 이 글에서는 두 요소를 넣고 고치는 방법을 안내합니다.

1. 진행 바와 평점은 어디에 있나요

편집 화면 왼쪽 레일에서 요소 추가를 열면 인터랙티브 묶음 맨 앞에 진행 바와 평점이 있습니다. 블록을 넣을 섹션을 선택한 뒤 항목을 누르면 그 섹션 안에 바로 들어갑니다.

진행 바는 프로젝트 완성도 75%, 고객 만족도 92%, 배포 완료율 58%의 세 줄짜리 막대로 들어옵니다. 평점은 별 다섯 개 중 네 개가 채워진 모양에 4.0 / 5.0, 총 1,284개의 리뷰 문구가 붙어 들어옵니다. 아래는 두 요소를 차례로 넣은 모습입니다. 캠페인 묶음에 있는 진행률 바는 별도 글에서 다룹니다.

2. 진행 바 고치기

막대 길이 바꾸기

색이 칠해진 막대 부분을 누르면 오른쪽 위에 ⋮ 단추가 나타납니다. ⋮ 단추를 눌러 아이콘 막대를 펼치고 톱니바퀴 모양의 요소 설정 열기를 누르면 컨테이너 설정 창이 열립니다. 크기의 너비 (width)가 막대의 길이입니다. 단위를 %로 두고 숫자를 입력하거나 슬라이더를 움직이면 막대가 그 비율만큼 채워집니다. 고친 값은 저장하기 전에도 캔버스에 바로 보입니다.

막대 색 바꾸기

같은 창을 아래로 스크롤하면 배경색이 있습니다. 처음에는 그라데이션이 선택되어 있고 색상 1, 색상 2에 #으로 시작하는 색 번호를 입력해 두 색을 바꿉니다. 한 가지 색으로 채우려면 단색을 고릅니다.

제목과 숫자 고치기

왼쪽의 항목 이름과 오른쪽의 퍼센트 숫자는 각각 글자 요소입니다. 글자를 두 번 눌러 편집 상태로 만든 뒤 고치고 Esc를 누르면 끝납니다. 막대의 길이와 숫자는 서로 연결되어 있지 않으므로 막대를 40%로 바꿨다면 숫자도 직접 40%로 적어 주세요. 막대 색을 바꿔도 숫자의 글자 색은 그대로 남습니다. 편집 상태에서는 위쪽에 나타나는 텍스트 편집 도구로 글꼴, 크기, 굵기, 정렬도 바꿀 수 있습니다.

3. 평점 고치기

평점 아래의 4.0 / 5.0과 총 1,284개의 리뷰도 글자를 두 번 눌러 고칩니다. 별은 그림 다섯 개가 한 줄로 놓인 형태여서 별 하나만 따로 선택되지 않습니다. 채워진 별의 수를 바꾸려면 별 줄을 누르고 ⋮ 단추 > 요소 설정 열기로 설정 창을 연 뒤, 창 아래의 전체 속성 패널 열기를 누릅니다. 속성 패널 위쪽의 </> 아이콘(섹션 HTML 코드 편집)을 누르면 HTML 소스 편집 창이 열립니다.

별 하나는 <svg ... fill="#f59e0b">로 시작하는 한 덩어리이고, 채워진 별은 #f59e0b(주황), 빈 별은 #e5e7eb(회색)입니다. 바꾸려는 별의 색 번호만 서로 바꾸고 적용(또는 Ctrl+Enter)을 누르면 별 개수가 달라집니다. 아래는 네 번째 별을 회색으로 바꿔 별 세 개로 만든 화면입니다.

4. 저장하고 확인하기

상단의 저장을 누른 뒤 편집 화면을 새로 열어도 막대 길이와 색, 고친 글자, 별 개수가 그대로 남아 있습니다.

5. 이렇게 활용해 보세요

• 신청 현황이나 목표 달성률을 막대로 보여 주고, 항목 이름을 상황에 맞게 바꿔 보세요.
• 서비스 소개 섹션 위에 평점 블록을 두고 별 개수와 리뷰 문구를 실제 수치에 맞춰 적어 보세요.
• 강의나 프로그램 소개에서 항목 이름을 진행 단계나 달성률에 맞게 바꿔 현재 위치를 보여 주세요.
• 막대 색을 브랜드 색에 맞추면 페이지의 다른 요소와 색을 맞추기 쉽습니다.

6. 알아 두실 점

• 두 요소 모두 화면에 그려 주는 블록이라, 숫자와 별 개수는 직접 입력한 값입니다. 실제 설문 결과나 리뷰 집계와 자동으로 연결되지 않습니다.
• 진행 바는 막대 세 줄이 한 블록으로 들어옵니다. 항목 이름과 숫자, 길이는 줄마다 따로 고칩니다.
• 평점도 같은 방식이어서, 별 개수와 3.0 / 5.0 같은 숫자가 서로 맞도록 직접 함께 고쳐 주세요.
• 이 글의 화면은 모두 데스크탑 편집 화면 기준입니다.

같은 인터랙티브 묶음의 알림 박스와 단계 표시 요소는 별도 글에서 다룹니다.