아이콘 요소와 아이콘 선택기

혜택 목록 앞에 체크 표시를 붙이고 싶거나, 연락처 옆에 전화기·메일 모양을 두고 싶은데 이미지 파일을 따로 구하기는 번거로우셨나요? 에디터의 아이콘 요소는 171개의 기본 아이콘 중에서 골라 바로 넣고, 색과 크기까지 고칠 수 있습니다. 이 글에서는 아이콘 선택 창의 사용법과 넣은 뒤 바꾸는 방법을 순서대로 안내합니다.

1. 아이콘 요소는 어디에 있나요

캔버스에서 아이콘을 넣을 섹션의 빈 곳을 눌러 선택한 뒤, 왼쪽 레일의 요소 추가를 엽니다. 미디어 묶음의 이미지, 영상 옆에 아이콘이 있습니다. 누르면 아이콘 선택 창이 열립니다.

2. 아이콘 선택 창 살펴보기

창 위쪽에는 아웃라인/채움 전환 단추, 현재 설정이 반영된 미리보기 칸, 색상, 크기 선택이 있습니다. 그 아래에 검색 칸과 카테고리 탭, 아이콘 목록이 이어집니다. 아이콘 아래에는 이름이 적혀 있고, 목록은 창 안에서 아래로 스크롤됩니다.

카테고리 탭은 전체(171), 기본/감정, UI/앱, 사람/소통, 비즈니스, 화살표, 미디어, 소셜, 자연/기타로 나뉩니다. 찾는 아이콘의 성격에 맞는 탭을 누르면 목록이 그 묶음으로 좁혀집니다.

검색으로 찾기

검색 칸에 한글 이름이나 영어 이름을 입력하면 그 글자가 이름에 들어 있는 아이콘이 목록에 나옵니다. 예를 들어 하트, 로켓, heart를 입력해 볼 수 있고, 맞는 아이콘이 없으면 검색 결과 없음 안내가 보입니다. 아래는 하트를 검색한 모습이며, 위쪽 미리보기 칸에 목록의 첫 아이콘이 표시됩니다.

스타일·색상·크기 정하기

• 아웃라인은 선으로 그린 아이콘, 채움은 속을 칠한 아이콘입니다. 체크, 플러스, 화살표처럼 채운 모양이 따로 없는 아이콘은 채움을 눌러도 모양이 같습니다.
• 색상은 색 칸을 눌러 고릅니다. 처음에는 짙은 색으로 되어 있습니다.
• 크기는 16, 24, 32, 48, 64, 80, 96, 128px 중에서 고릅니다. 처음에는 48px입니다.

방금 고른 스타일과 색은 목록의 아이콘과 위쪽 미리보기에 바로 반영됩니다.

3. 아이콘 넣기

원하는 아이콘을 누르면 그 순간의 스타일·색상·크기 그대로 선택한 섹션에 들어가고 창이 닫힙니다. 여러 개를 넣고 싶으면 같은 방법을 반복하면 됩니다. 아래는 채운 빨간 하트, 노란 별, 보라색 로켓을 차례로 넣은 모습입니다.

4. 넣은 아이콘 바꾸기

아이콘을 누르면 오른쪽 위에 ⋮ 단추가 나타나고, 누르면 아이콘 막대가 펼쳐집니다. 막대에는 요소 설정 열기, 아이콘 편집, 링크 넣기, 요소 복제, 요소 삭제가 있습니다.

아이콘 편집을 누르면 작은 창에 아이콘 변경과 색상이 나옵니다. 아이콘 변경 줄에는 지금 쓰고 있는 아이콘이 함께 보입니다.

톱니바퀴 모양의 요소 설정 열기를 누르면 아이콘 설정 창이 열립니다. 현재 아이콘 미리보기 아래에 세 가지를 조절합니다.

• 아이콘 변경: 선택 창이 다시 열리고, 다른 아이콘을 누르면 지금의 색과 크기를 유지한 채 모양만 바뀝니다.
• 색상: 색 칸으로 고르거나 #로 시작하는 색 번호를 직접 입력합니다.
• 크기: 12~200px 범위에서 슬라이더나 숫자 입력으로 정합니다.

창 아래의 전체 속성 패널 열기를 누르면 효과·반응형·HTML 설정으로 이어집니다.

5. 저장하고 확인하기

고친 값은 바로 캔버스에 보입니다. 상단의 저장을 누른 뒤 편집 화면을 새로 열어도 아이콘의 모양·색·크기가 그대로 남아 있습니다.

6. 이렇게 활용해 보세요

• 혜택·특징 목록의 줄마다 체크 아이콘을 붙여 한눈에 구분되게 만들 수 있습니다.
• 전화, 이메일, 위치 아이콘을 연락처 옆에 두면 항목을 빨리 알아볼 수 있습니다.
• 소셜 카테고리의 로고 아이콘을 나란히 두고, 각각 링크 넣기로 채널 주소를 연결해 보세요.

7. 알아 두실 점

• 선택 창에서 정한 색과 크기는 넣는 순간에만 적용됩니다. 이후에는 아이콘 편집 창이나 아이콘 설정 창에서 바꿉니다.
• 아이콘은 도형이어서 크기를 키워도 흐려지지 않습니다. 사진이나 직접 만든 그림을 넣을 때는 이미지 요소를 사용하며, 이는 별도 글에서 다룹니다.
• 소셜 카테고리의 아이콘은 모양만 있고 링크가 걸려 있지 않습니다. 누르면 이동하게 하려면 링크를 직접 연결해야 합니다.
• 이 글의 화면은 모두 데스크탑 편집 화면 기준입니다.