IT 스타트업 로고 디자인, 앱 아이콘에서 뭉개지기 전 확인할 7가지

홈페이지 헤더에선 멀쩡하던 로고가 앱 프로필에 들어가는 순간, 그냥 색 덩어리처럼 보이는 경우가 많습니다.

왜 큰 화면에선 괜찮던 로고가 작아지면 무너질까?

대표님들이 처음 보는 시안은 보통 크게 띄운 PDF입니다. 그 크기에서는 얇은 선, 긴 워드마크, 작은 점 하나도 다 보입니다. 문제는 실제 사용처가 그렇게 친절하지 않다는 겁니다.

파비콘은 브라우저 탭에서 보통 16×16픽셀로 보입니다. MDN도 파비콘을 설명하며 일반적인 크기를 16×16픽셀이라고 말합니다. 그러니까 로고가 ‘멋진가’보다 먼저 봐야 할 건 16픽셀에서도 남는 뼈대가 있느냐입니다. (developer.mozilla.org)

이렇게 하세요. 로고 시안은 처음부터 1200픽셀짜리 목업만 보지 말고 16, 24, 32, 64픽셀로 줄여 한 줄에 놓고 보세요. 이때 설명 없이도 형태가 남아야 합니다. 안 남으면 장식이 많은 게 아니라 구조가 약한 겁니다.

앱 아이콘에 글자까지 넣으면 왜 더 지저분해질까?

스타트업 로고에서 자주 보는 실수는 심볼 안에 서비스명 첫 글자, 작은 꺾임, 슬로건 느낌의 선을 다 넣는 겁니다. 크게 보면 똑똑해 보이는데, 앱 아이콘으로 줄이면 전부 같은 회색 먼지가 됩니다.

애플 Human Interface Guidelines는 앱 아이콘에 텍스트를 넣지 말라고 안내합니다. 접근성이나 현지화에 맞지 않고, 작은 크기에서 읽기 어렵고, 아이콘을 복잡하게 만든다는 이유입니다. 저는 이 문장이 로고에도 그대로 적용된다고 봅니다. 앱 아이콘에 들어갈 브랜드라면 글자를 읽히게 할 게 아니라, 글자를 빼도 남는 모양을 만들어야 합니다. (developer.apple.com)

이렇게 하세요. 심볼 버전과 워드마크 버전을 분리하세요. 서비스명은 헤더와 랜딩 페이지에서 읽히면 됩니다. 앱 아이콘, 프로필, 파비콘에서는 심볼 혼자 버텨야 합니다.

선이 얇고 색이 비슷하면 어떤 문제가 생길까?

작은 로고는 디테일이 줄어드는 게 아니라, 약한 부분부터 사라집니다. 1픽셀짜리 선, 연한 그라데이션, 비슷한 명도의 두 색은 축소되는 순간 서로 붙습니다. 흑백 출력이나 다크모드에서는 더 빨리 무너집니다.

W3C의 WCAG 2.2는 사용자 인터페이스 구성요소와 그래픽이 주변 색과 최소 3:1 대비를 갖도록 설명합니다. 국내 KWCAG에서도 텍스트와 배경의 명도 대비 기준이 반복해서 다뤄집니다. 로고가 접근성 심사 대상이냐를 떠나, 작은 화면에서 형태를 잃지 않으려면 색 차이가 아니라 명도 차이로 버텨야 한다는 뜻입니다. (w3.org)

이렇게 하세요. 컬러 시안 다음에 바로 흑백 시안을 보세요. 검정 1도, 흰 배경, 어두운 배경, 저해상도 캡처까지 확인해야 합니다. 여기서 형태가 남으면 실제 서비스 안에서도 오래 갑니다.

실사용 기준 체크리스트는 어디까지 봐야 할까?

저라면 IT 스타트업 로고 디자인을 볼 때 이 7가지는 꼭 확인합니다. 16픽셀 파비콘에서 알아보이는가. 32픽셀 앱 프로필에서 실루엣이 남는가. 심볼만 떼어도 브랜드가 이어지는가. 흑백에서도 구조가 무너지지 않는가. 다크모드에서 배경과 붙지 않는가. 명함에 8mm로 넣어도 뭉개지지 않는가. 개발자가 SVG, PNG, 앱 아이콘 파일로 넘겨받아도 흔들리지 않는가.

여기서 하나라도 막히면 디자인 취향 문제가 아닙니다. 운영 비용 문제가 됩니다. 런칭 후에 파비콘만 다시 만들고, 앱 아이콘만 다시 다듬고, IR 자료용 로고를 따로 보정하는 일이 생깁니다. 작은 수정처럼 보여도 브랜드는 그때부터 버전이 갈라집니다.

마크에서 로고를 볼 때도 이 순서로 봅니다. 예쁜 시안보다 먼저, 어디에 올려도 깨지지 않는 최소 구조를 찾습니다. 그다음 컬러와 워드마크를 얹어야 오래 씁니다.

결국 어떤 로고가 오래 버틸까?

오래 가는 로고는 복잡한 로고가 아닙니다. 줄였을 때 남는 로고입니다. 홈페이지 상단, 앱 아이콘, 파비콘, 명함, 투자 제안서, 채용 공고 썸네일에 같은 얼굴로 등장할 수 있어야 합니다.

대표님이 지금 시안을 보고 있다면 크게 확대해서 보지 마세요. 오히려 작게 줄여보세요. 작게 줄였을 때 못 버티는 로고는 런칭 후 더 많은 곳에서 흔들립니다.

지금 당장 할 행동 한 줄: 현재 로고를 16·32·64픽셀, 흑백, 다크모드 배경에 올려보고 버티는지 확인한 뒤 마크 작품 둘러보기에서 실사용 중심의 로고 구조를 비교해보세요.

출처

• Apple Developer Documentation, “App icons” https://developer.apple.com/design/human-interface-guidelines/app-icons
• MDN Web Docs, “Favicon” https://developer.mozilla.org/en-US/docs/Glossary/Favicon
• W3C WAI, “Understanding Success Criterion 1.4.11: Non-text Contrast” https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast
• UXKM, “텍스트 콘텐츠의 명도 대비” https://uxkm.io/accessibility/a11yCreationTech/01-web/08-contrast-minimum