아이콘 만들기 사용법
- 배경 모양과 두 가지 배경색을 고릅니다.
- 아이콘 가운데에 넣을 글자나 이모지를 입력하고 색, 크기, 기울기를 조절합니다.
- 원하는 크기를 고르고 PNG 또는 SVG로 저장합니다.
아이콘 만들기의 원리
아이콘은 브라우저의 캔버스에 그려지며, 배경 모양과 그라데이션, 글자(또는 이모지)를 겹쳐서 만듭니다. 그라데이션 각도는 두 배경색이 이어지는 방향을 정하고, 모서리 둥글기는 사각형 모서리를 얼마나 깎을지 정합니다. PNG는 선택한 크기의 이미지로 바로 저장되고, SVG는 확대해도 선명한 벡터 형식으로 저장됩니다. 이모지는 기기마다 모양이 다르므로 같은 이모지도 사용하는 기기에 따라 다르게 보일 수 있습니다. 모든 작업은 방문자 기기 안에서 이뤄지고 만든 이미지는 서버로 전송되지 않습니다.
활용 팁
- 사이트 파비콘은 64px이나 128px로, 앱 아이콘은 512px로 저장하세요.
- 글자는 한두 글자로 간단하게 할수록 작은 크기에서도 잘 보입니다.
- 배경과 글자색의 명암 차이를 크게 하면 눈에 잘 띕니다.
- SVG로 저장하면 크기를 바꿔도 깨지지 않아 디자인 작업에 편리합니다.
보기 좋은 아이콘 디자인 요령
작은 크기에서도 알아볼 수 있으려면 요소를 단순하게 하는 것이 좋습니다. 배경 두 색은 비슷한 계열에서 약간만 차이를 주면 자연스럽고, 글자는 배경과 확실히 대비되게 하세요. 둥근 사각형은 앱 아이콘, 원은 프로필 이미지에 잘 어울립니다. 기울기는 너무 크게 주면 작은 크기에서 읽기 어려워집니다.
주의사항
이모지는 기기와 글꼴에 따라 모양이 달라지고, 일부 이모지에는 별도의 사용 조건이 있을 수 있습니다. 상업용 로고로 쓰려면 글자 위주로 만들고 사용 조건을 확인하세요.
자주 묻는 질문
ICO 파일로도 저장되나요?
아직은 PNG와 SVG만 지원합니다. 파비콘은 PNG로도 대부분 사용할 수 있습니다.
저장한 이미지의 배경이 투명한가요?
모양 바깥 부분은 투명하게 저장됩니다. 원이나 둥근 사각형이면 모서리 바깥이 투명합니다.
SVG에서 이모지가 다르게 보여요.
SVG의 이모지는 보는 기기의 글꼴로 표시되므로 PNG와 모양이 다를 수 있습니다. 이모지 모양을 고정하려면 PNG를 쓰세요.