16×16에서도 선명한 아이콘 디자인하는 법
16×16 아이콘에는 픽셀이 256개뿐입니다. 복잡한 로고는 이 크기에서 흐릿한 얼룩이 되지만, 단순하고 굵은 모양은 여전히 알아볼 수 있습니다. 파비콘과 프로그램 아이콘을 선명하게 유지하는 실전 규칙을 소개합니다.
1. 마크를 단순하게
알아보기 쉬운 요소 하나만 쓰세요: 브랜드의 첫 글자, 기호, 로고의 한 가지 모양. 슬로건, 얇은 외곽선, 그라데이션, 작은 디테일은 빼세요. 많은 브랜드가 파비콘용으로 더 단순한 “작은 로고”를 따로 씁니다 — 타협이 아니라 일반적인 방법입니다.
2. 굵고 대비 강하게
- 16px에서 선은 최소 2px 두께로 하세요. 1px 선은 축소 후 사라지거나 회색이 되기 쉽습니다.
- 대비가 강한 색을 고르세요. 흰 바탕의 연회색, 검은 바탕의 진한 파랑은 많은 브라우저 테마에서 보이지 않습니다.
- 밝은 탭과 어두운 탭 모두에서 확인하세요 — 크롬, 엣지, 파이어폭스 모두 다크 테마가 있습니다.
3. 공간을 꽉 채우기
브라우저는 파비콘에 여백을 넣지 않습니다. 정사각형의 90–100%를 채우는 모양이 가운데 떠 있는 모양보다 더 크고 선명해 보입니다. 마크가 얇거나 투명하다면 색이 있는 배경 도형(사각형, 둥근 사각형, 원)을 쓰세요.
아이콘 편집기의 배경 레이어는 원하는 색의 사각형, 둥근 사각형, 원으로 바꿀 수 있고, 이모지·텍스트 도구는 이런 아이콘을 한 번에 만들어 줍니다.
4. 픽셀 격자에 맞추기
가장자리가 두 픽셀 사이에 걸치면 안티에일리어싱으로 반쯤 회색인 두 줄이 됩니다. 가장 작은 크기에서 중요한 가장자리가 정수 픽셀에 떨어지게 하세요:
- 256px에서 16의 배수로 디자인하세요(16px 블록 하나가 16×16의 1픽셀).
- 편집기에서 픽셀 격자(Ctrl+')와 가운데 십자선(Ctrl+;)을 켜서 정렬과 대칭을 확인하세요.
- 방향키로 레이어를 1px씩(Shift+방향키는 10px) 움직여 16px 미리보기에서 가장자리가 또렷해질 때까지 맞추세요.
5. 가장 작은 크기는 직접 다듬기
최상의 결과를 원하면 16, 32px 버전을 따로 그리세요. 안티에일리어싱을 끄고 연필 도구로 픽셀을 정확히 찍습니다. 작은 크기용 디자인을 별도 ICO로 내보내 크기를 조합하거나, 간단히 파비콘에는 작은 디자인, 큰 타일에는 자세한 디자인을 쓰면 됩니다.
6. 아이콘 속 글자
- 16px에서는 한두 글자까지만 읽힙니다. 단어 전체는 안 됩니다.
- 굵은 두께(Bold, Black)와 단순한 기하학적 글꼴을 고르세요.
- 한글·한자 등 복잡한 문자는 굵은 외곽선을 넣은 한 글자가 가장 잘 읽힙니다.
7. 항상 실제 크기로 확인
400% 확대에서는 괜찮아 보여도 100%에서는 실패할 수 있습니다. 작업 중에는 실제 크기 미리보기를 계속 띄워 두고 — 편집기는 모든 ICO 크기를 실시간으로 보여 줍니다 — 업로드한 뒤 실제 브라우저 탭에서도 보세요.