로고 만들기: 심볼, 글자, 아이콘 세트

로고가 무너지는 자리가 바로 거기이기 때문입니다. 화면에서는 크게 만들지만 실제로 일하는 크기는 작습니다. 브라우저 탭의 16픽셀, 휴대폰 아이콘, 아바타 원, 상자에 찍힌 인쇄물이 그렇습니다. 가는 선으로 된 심볼에 다섯 낱말짜리 태그라인이 붙으면 그 크기에서는 회색 얼룩이 되고, 그 사실은 인쇄를 마친 뒤보다 지금 아는 편이 낫습니다. 같은 줄에 먹 하나 버전과 색약 시뮬레이션도 있습니다. 명암비가 괜찮아 보여도 초록 위의 빨강은 남성 열두 명 중 한 명에게는 여전히 뭉개집니다.

올릴 수 있고, 이것이 «이미 심볼이 있다»는 분을 위한 답입니다. SVG 파일은 곡선으로 분해되어 우리 심볼과 똑같이 쓰입니다. 단색이면 로고와 함께 색이 바뀌고, 여러 색이면 원래 색을 지킵니다. 평범한 이미지 — PNG, JPG, WebP, 손으로 그린 스캔 — 는 윤곽을 따라 그려 벡터로 바꿉니다. 그 뒤에는 손실 없이 확대되고 팔레트 색을 입으며 점이 아니라 곡선으로 SVG에 들어갑니다. 정밀도는 슬라이더로 조절하고, 어두운 배경에 밝은 그림이라면 «반전» 단추가 도움이 됩니다. 사진처럼 따라 그릴 수 없을 때는 그림을 그대로 넣고 미리보기 아래에 그 사실을 분명히 적습니다. 그러지 않으면 «진짜 벡터»라는 약속이 거짓이 되기 때문입니다.

정말로 벡터이고 그 자체로 완결되어 있습니다. 흔한 눈속임은 PNG를 SVG 파일로 감싼 것입니다. 열리기는 하지만 키우면 번집니다. 두 번째는 글자를 text 태그로 넣는 방식입니다. 내 컴퓨터에서는 제대로 보이지만 인쇄소나 디자이너 쪽에서는 시스템 글꼴이 대신 들어가 로고 모양이 조용히 바뀝니다. 여기서는 글자를 곡선으로 바꿔 두어 파일이 아무것에도 의존하지 않고 어떤 벡터 편집기에서든 손볼 수 있습니다. 참고로 잘 알려진 도구 여럿은 벡터 자체가 없습니다. Adobe Express는 어떤 요금제에서도 SVG를 내보내지 않고, Squarespace와 Shopify의 도구는 PNG만 줍니다.

실패하는 네 가지 방식이고, 각각 자기 숫자로 잡힙니다. «명암비»는 WCAG 공식으로 계산한 심볼과 배경의 밝기 비율입니다. 클수록 확실히 보이며, 3 아래로 내려가면 경고로 바뀝니다. 흰 바탕의 연회색 심볼은 시안에서는 예뻐 보여도 명함에서는 사라지기 때문입니다. «색약»은 가장 흔한 색각 이상을 시뮬레이션한 뒤 계산한 같은 명암비입니다. 초록 위의 빨강은 첫 숫자가 괜찮아도 두 번째에서 뭉개질 수 있습니다. «어두운 배경»은 어두운 화면에 대고 심볼을 재는데, 거의 검은 글자가 사라지는 곳이 바로 거기입니다. «16px»는 그 크기에서 태그라인이 읽히지 않는다는 경고입니다. 태그라인의 자리는 큰 버전이지 파비콘이 아닙니다.

브라우저 탭용 파비콘 16·32·48픽셀, 그것들로 만든 favicon.ico(옛 브라우저와 윈도우 바로 가기용), 아이폰 홈 화면용 apple-touch-icon 180, 매니페스트용 192와 512 아이콘, 가장자리 여백이 있는 마스커블 512 아이콘(안드로이드에서 시스템이 알아서 아이콘 모양으로 잘라 냅니다), favicon.svg, 바로 쓸 수 있는 site.webmanifest, 그리고 연결 줄이 담긴 head.html 파일입니다. 파일은 사이트 루트에 두고 head.html의 줄은 페이지의 head 안에 붙여 넣습니다. apple-touch-icon과 마스커블 아이콘의 투명도는 일부러 없앴습니다. iOS는 투명한 아이콘을 검정 위에 올려 모서리가 검게 나오기 때문입니다.

심볼은 공개 아이콘 라이브러리에서 가져온 것이 아니라 이 도구를 위해 직접 그렸습니다. 차이는 닮았는지 여부만이 아닙니다. Squarespace의 도구는 심볼을 남의 라이브러리에서 가져오는데, 그쪽 도움말에도 로고를 공개하기 전에 해당 아이콘의 라이선스를 읽으라고 적혀 있습니다. Adobe Express의 내장 요소 일부는 독립 파일로 내보내는 것을 명시적으로 금지하는 라이선스를 따르는데, 로고야말로 바로 그 독립 파일입니다. 우리 심볼에는 그런 단락이 없습니다. 여기 형태는 일부러 단순하고 기하학적입니다. 그런 형태라야 16픽셀에서 읽히고, 복잡한 아이콘은 그러지 못합니다. 더 나만의 것이 필요하다면 그림을 올리거나 머리글자 모노그램을 쓰세요.

쓸 수 있습니다. 고른 장식 글꼴에 해당 글자가 없으면 — 예를 들어 Bebas Neue에는 키릴도 한글도 없습니다 — 그 글자를 가진 글꼴로 조판하고, 미리보기 아래에 어떤 글꼴인지 분명히 적습니다. 글꼴을 조용히 바꿔치기하는 편이 더 나쁩니다. 내 로고가 아닌 것을 보면서도 그 사실을 모르게 되기 때문입니다. 아랍 문자는 읽는 방향과 글자 이음을 제대로 맞춰 조판합니다.