알림 박스·단계 표시 요소

신청이 접수되었다는 안내, 마감이 임박했다는 주의 문구, 가입에서 완료까지의 진행 순서를 페이지에 넣고 싶은데 디자인을 처음부터 만들기는 부담스러우셨나요? 에디터의 알림 박스와 단계 표시 요소는 색과 모양이 이미 정리된 블록을 넣어 주므로, 문구와 색만 내용에 맞게 고치면 됩니다. 이 글에서는 두 요소를 넣고 고치는 방법을 안내합니다.

1. 알림 박스와 단계 표시는 어디에 있나요

편집 화면 왼쪽 레일에서 요소 추가를 열면 인터랙티브 묶음에 알림 박스와 단계 표시가 있습니다. 블록을 넣을 섹션을 먼저 선택한 뒤 항목을 누르면 그 섹션 안에 바로 들어갑니다.

알림 박스는 파란색의 정보 알림, 초록색의 성공 알림, 노란색의 경고 알림 세 줄이 한 블록으로 들어옵니다. 줄마다 아이콘과 안내 문구가 붙어 있습니다. 단계 표시는 가입, 설정, 시작 세 단계가 숫자 원과 연결선으로 이어진 모양이며, 1단계는 진한 보라, 2단계는 연한 보라, 3단계는 회색으로 칠해져 있습니다.

2. 문구 고치기

알림 문구와 단계 이름은 각각 글자 요소입니다. 글자를 눌러 편집 상태로 만든 뒤(바로 편집되지 않으면 두 번 누릅니다) Ctrl+A로 전체를 선택하고 새 문구를 입력한 다음 Esc를 누르면 끝납니다. 편집 중에는 위쪽에 텍스트 편집 도구가 나타나 글꼴, 크기, 굵기, 색을 바꿀 수 있습니다. 문구를 고쳐도 줄마다의 아이콘과 색은 그대로 남으므로, 정보 알림 줄에는 안내를, 성공 알림 줄에는 완료 소식을, 경고 알림 줄에는 주의 사항을 적으면 색이 주는 인상과 문구가 어긋나지 않습니다. 아래는 알림 세 줄과 단계 이름을 신청 상황에 맞게 고친 모습입니다.

3. 색과 단계 상태 바꾸기

색을 바꾸거나 단계의 진행 상태를 표시하려면 섹션의 소스를 고칩니다. 블록이 들어 있는 섹션의 빈 곳을 눌러 선택하면 오른쪽 위에 톱니바퀴 단추가 나타나고, 누르면 아이콘 줄이 펼쳐집니다. 이 줄의 </> 아이콘이 HTML 소스 편집입니다.

섹션 소스 편집 창이 열리면 알림 한 줄이 background(바탕색), border(테두리색), 아이콘의 fill, 글자의 color 네 가지 색으로 이루어져 있음을 볼 수 있습니다. 네 값을 같은 계열로 함께 바꾸면 알림의 종류별 색을 브랜드 색으로 맞출 수 있습니다. 단계 표시도 같습니다. 원의 background를 진한 보라 #4A3094(완료), 연한 보라 #6E5AD1(현재), 회색 #e5e7eb(예정)으로 두고, 연결선의 background와 단계 이름의 color를 같은 방식으로 맞춥니다. 색은 #으로 시작하는 번호나 rgb 형태 어느 쪽으로 적어도 됩니다. 고친 뒤 적용(또는 Ctrl+Enter)을 누르면 화면에 반영되고, 편집 창 위에 수정됨 표시가 나타납니다.

4. 저장하고 확인하기

상단의 저장을 누른 뒤 편집 화면을 새로 열어도 고친 문구와 색이 그대로 남아 있습니다. 아래는 첫 알림을 보라 계열로 바꾸고, 신청과 결제를 완료 상태, 완료를 현재 단계로 바꾼 뒤 저장해 다시 연 화면입니다.

5. 이렇게 활용해 보세요

• 신청 폼 위에 정보 알림을 두고 일정이나 준비물을 한 줄로 안내해 보세요.
• 마감이나 수량 안내는 경고 알림 줄에, 신청 완료 안내는 성공 알림 줄에 적어 보세요.
• 신청 절차 소개 섹션에서 단계 이름을 신청, 결제, 안내 메일 수신 등 실제 순서에 맞게 바꿔 보세요.
• 이벤트 신청 페이지 상단에 경고 알림 한 줄로 신청 기한을 알리고, 아래에 단계 표시로 참여 순서를 보여 주세요.
• 알림과 단계의 색을 브랜드 색에 맞추면 페이지의 다른 요소와 어울리기 쉽습니다.

6. 알아 두실 점

• 두 요소 모두 화면에 그려 주는 블록이라, 방문자의 실제 진행 상황과 자동으로 연결되지 않습니다. 현재 단계는 위 방법으로 직접 표시합니다.
• 알림 박스에는 닫기 단추가 없어 항상 표시됩니다.
• 알림 박스는 세 줄, 단계 표시는 세 단계로 들어옵니다. 항목의 이름과 색은 줄마다 따로 고칩니다.
• 문구와 색을 고친 뒤에는 상단의 저장을 눌러야 다음에 열었을 때도 남습니다.
• 이 글의 화면은 모두 데스크탑 편집 화면 기준입니다.

같은 인터랙티브 묶음의 진행 바와 평점 요소는 별도 글에서 다룹니다.