버튼 요소 ②: 아이콘 넣기

"전화로 상담받기", "자세히 보기"처럼 행동을 알려 주는 버튼에는 작은 그림이 하나 있으면 용도가 한눈에 들어옵니다. 에디터에서는 버튼 안에 아이콘을 넣고, 글자의 왼쪽이나 오른쪽에 둘지, 얼마나 크게 할지, 어떤 색으로 할지를 버튼 설정 창에서 바꿀 수 있습니다. 버튼을 넣고 링크를 연결하는 방법은 별도 글에서, 버튼의 배경색과 마우스를 올렸을 때의 효과는 또 다른 글에서 다룹니다.

1. 아이콘 항목은 어디에 있나요

버튼을 누르면 글자를 고칠 수 있는 상태가 되므로, Esc를 눌러 편집을 끝낸 뒤 버튼이 선택된 상태에서 오른쪽 위 모서리의 작은 원을 누릅니다. 펼쳐진 툴바에서 요소 설정 열기를 누르면 버튼 설정 창이 열립니다. 위에서부터 클릭 동작, 링크 URL, 버튼 정렬이 이어지고, 그 아래에 아이콘 항목이 있습니다. 아이콘이 없는 버튼에는 아이콘 추가 버튼 하나만 보입니다.

2. 아이콘 고르기

아이콘 추가를 누르면 아이콘 선택 창이 크게 열립니다. 위쪽의 아웃라인과 채움으로 선으로 그린 모양과 속이 찬 모양 중 하나를 고르고, 검색칸에 이름을 입력하거나 기본/감정, UI/앱, 사람/소통, 비즈니스, 화살표, 미디어, 소셜, 자연/기타 탭으로 좁힙니다. 원하는 아이콘을 누르면 창이 닫히고 버튼 글자 왼쪽에 아이콘이 들어갑니다. 아이콘의 색과 크기는 고른 다음 버튼 설정 창에서 조정합니다.

1. 아이콘을 넣을 버튼을 선택하고 요소 설정 열기로 버튼 설정 창을 엽니다.
2. 아이콘 항목의 아이콘 추가를 누릅니다.
3. 아웃라인 또는 채움을 고른 뒤 검색하거나 탭에서 아이콘을 찾아 누릅니다.
4. 버튼에 들어간 아이콘을 아래 조정 칸에서 다듬고, 상단바의 저장을 누릅니다.

3. 들어간 아이콘 다듬기

아이콘이 들어가면 같은 항목에 조정 칸이 나타납니다. 값을 바꾸는 즉시 버튼에 반영됩니다.

• 아이콘 변경과 제거(×): 다른 아이콘으로 바꾸거나 아이콘을 없앱니다. 아이콘을 바꿔도 위치와 크기 설정은 그대로 유지되고, 제거하면 버튼은 아이콘을 넣기 전 모습으로 돌아갑니다.
• 위치: 텍스트 왼쪽과 텍스트 오른쪽 중에서 고릅니다.
• 아이콘 크기와 텍스트와 간격: 슬라이더를 움직이거나 오른쪽 칸에 숫자를 직접 입력합니다. 단위는 px이고, 아이콘 크기는 10에서 64까지, 간격은 0에서 32까지 고를 수 있습니다.
• 아이콘 색상: 기본은 텍스트 색 따름이라 버튼 글자색을 따라갑니다. 직접 지정을 누르면 색상 칸이 나타나 원하는 색을 넣을 수 있습니다.
• 버튼 안 정렬: 왼쪽, 가운데, 오른쪽, 양끝 중 하나로 아이콘과 글자 묶음의 배치를 정합니다.

4. 폭이 넓은 버튼에서 정렬하기

버튼 안 정렬은 버튼 폭이 아이콘과 글자를 합친 길이보다 넓을 때 차이가 드러납니다. 아래는 폭이 넓은 버튼에 오른쪽 화살표를 넣고 텍스트 오른쪽을 고른 뒤, 정렬을 가운데에서 양끝으로 바꾼 모습입니다. 글자는 왼쪽 끝에, 화살표는 오른쪽 끝에 붙습니다.

5. 저장 뒤에도 유지됩니다

상단바의 저장을 누르고 에디터를 새로고침해도 아이콘의 위치, 크기, 색이 그대로 유지됩니다. 아이콘 부분을 눌러도 아이콘이 따로 선택되지 않고 버튼을 누른 것과 같이 동작하므로, 아이콘은 항상 버튼 설정 창에서 다룹니다.

6. 이렇게 활용해 보세요

• 전화 상담을 받는 버튼에는 전화 아이콘을 왼쪽에 넣어 어떤 행동인지 먼저 알려 줄 수 있습니다.
• "자세히 보기" 같은 이동 버튼에는 화살표를 오른쪽에 두고, 넓은 버튼이라면 양끝 정렬로 글자와 화살표를 멀리 떨어뜨려 보세요.
• 버튼 색이 짙다면 텍스트 색 따름 그대로 두고, 눈에 띄게 하고 싶을 때만 직접 지정으로 포인트 색을 넣어 보세요.

7. 알아 두실 점

• 아이콘 설정은 버튼 하나마다 따로 적용됩니다. 같은 모양의 버튼이 여러 개 필요하다면 먼저 완성한 버튼을 툴바의 요소 복제로 복제하면 아이콘 설정까지 함께 복제됩니다.
• 아이콘 선택 창 위쪽에도 색상과 크기 칸이 있지만, 버튼에 들어간 아이콘의 색과 크기는 버튼 설정 창의 아이콘 크기와 아이콘 색상이 정합니다.
• 같은 창에서 아이콘 모양만 다시 고르려면 아이콘 변경을 누르세요. 선택 창이 같은 모습으로 다시 열립니다.
• 변경한 내용은 상단바의 저장을 눌러야 보존됩니다.

배경색과 마우스를 올렸을 때의 효과는 버튼 ③ 글에서 이어서 다룹니다.