Mole의 아이콘을 꼼꼼하게 다시 다듬은 이야기

제품 아이콘을 한 번 새로 다듬을 때 무엇을 조심해야 하고 어디를 더 좋게 만들 수 있는지, 가볍게 이야기해 보려고 합니다.

오늘 아침 Mole의 아이콘을 꼼꼼하게 다시 손봤습니다. 지금까지는 시스템 아이콘을 썼고, 단순한 제품이라면 그걸로 충분하다고 생각했지만, 자세히 보면 개성이 조금 부족하다는 느낌이 있었습니다.

어떤 아이콘 라이브러리를 고를까

찾아보니 앱 아이콘에 잘 맞는 건 Remix Icon과 Phosphor Icons 두 가지였습니다. 웹을 만들 때는 Remix를 많이 썼고 단순하고 편하지만, 앱에 넣어 보니 제 눈에는 그다지 예쁘지 않아서 Phosphor로 바꿨습니다. 이쪽은 표정이 살아 있어서 아주 좋았고, 대략 70%는 고치지 않고 그대로 쓸 수 있었습니다. 나머지 30%는 Opus 5.5로 SVG를 써서 직접 그렸고, 그래서 전체가 더 일관되게 보입니다.

반드시 제품 안에 넣고 함께 보기

위 비교 그림만 봐서는 차이를 느끼기 어려울 수도 있습니다. 실제 제품에 넣어 봐야 알 수 있는 경우가 많고, 저는 한 모듈 안에 놓이는 아이콘 묶음이 서로 잘 어울리는지도 봅니다. 아이콘 하나하나는 다 괜찮은데 모아 놓으면 어색한 경우도 있습니다. 눈, 코, 입이 하나씩은 다 예쁜데 한 얼굴에 모아 놓으면 그렇게 어울리지 않는 것과 비슷합니다. 그래서 아이콘을 바꿀 때는 꼭 실제 제품 안에서, 한데 모아서 보시길 권합니다. 그래야 결과가 좋습니다.

작은 아이디어가 제품에 생명을 준다

두 번째로, 저는 우리가 만드는 제품에는 살아 있는 느낌, 생기가 있어야 한다고 늘 생각합니다. 아무 고민 없이 AI Coding으로 뽑아낸 차가운 빌드 결과물 같은 게 아니라요. 아이콘 같은 작은 디테일은 제품에 생명을 불어넣기 좋은 출발점입니다. 예를 들어 「화면 켜기 유지」에는 커피잔을 썼습니다. Caffeine이라는 비유로, Mac이 커피를 마셔서 잠들지 못하는 느낌입니다. 「Mole에 관하여」는 보통 동그라미 안의 i를 쓰지만, 저는 이게 인사라고 생각해서 손을 흔드는 아이콘을 골랐습니다. 「Doctor」도 보통은 문제를 찾는 기호를 쓰는데, 여기서는 청진기를 써서 의사가 문제를 진찰해 주는 느낌을 냈습니다. 이런 작은 아이디어를 제품 곳곳에 넣을 수 있고, 그러면 전체가 훨씬 재미있어집니다.

정렬, 크기, 가운데 맞춤

마지막으로, 좋은 디자인은 거의 언제나 정렬, 정돈, 적절한 리듬이라는 원칙에서 벗어나지 않습니다. 아이콘과 내용, 위아래 모듈이 사람 눈에 가지런하고, 크기가 같고, 위아래로도 가운데에 맞춰 보이게 하려면 하나씩 보면서 조정할 수밖에 없습니다. 글자와 아이콘의 정렬, 그리고 처음부터 세로 위치가 맞지 않는 중국어와 영문을 어떻게 맞출지까지 포함해서, 오래 다듬을 수 있고 아주 재미있는 부분입니다.

이번 작업에서 몇 가지 예를 들어 보겠습니다. 배터리는 처음에 잔량과 상관없이 똑같은 빈 틀로 그려서, 완전히 충전되어 있어도 비어 보였습니다. 지금은 4분의 1씩 채워집니다. 메뉴 아이콘은 처음에 시스템 아이콘 크기를 따라가서 메뉴 안에서 크고 두껍게 보였고, 14.3pt에서 12.5pt로 줄여도 여전히 커서 결국 11pt로 정했습니다. 어떤 아이콘은 너비에, 어떤 아이콘은 긴 변에 맞춰 크기를 정했더니, 세로로 긴 빗자루와 로그아웃 화살표는 커 보이고 가로로 넓은 벌레와 꺾은선은 작아 보였습니다. 그래서 너비와 높이의 평균으로 크기를 맞추고 긴 변에는 상한을 두는 방식으로 바꿨고, 앞으로 추가하는 아이콘도 자동으로 이 규칙을 따릅니다. 그리고 트윗용으로 만든 비교 이미지에서는 제목의 Mole을 중국어 명조 계열 글꼴로 썼는데, 영문자가 옆의 중국어보다 4pt 높게 올라가 있어서 그 부분만 따로 조금 내려야 두 글자가 한 줄에 맞았습니다.

사용자의 의견을 듣고 한 번 더

글을 올린 뒤 사용자들의 의견이 하나둘 들어왔습니다. 제가 마음에 들어 했던 아이콘 중에도 사용자에게는 별로 예쁘지 않거나 낯설게 느껴지는 것이 있었습니다. 「업데이트 확인」은 다운로드 아이콘을 써서 다운로드로 읽혔고, GPU의 작은 정육면체는 그래픽카드로 보이지 않았고, 압축 파일 아이콘은 무슨 뜻인지 알기 어려웠고, 두 개를 겹친 메모리도 메모리 같지 않았습니다. 「화면 닦기」의 스펀지와 「Mole에 관하여」의 손 흔드는 아이콘이 별로라는 의견도 있었습니다.

이럴 때는 혼자 좋다고 믿는 것보다 사용자와 몇 마디 나누는 편이 훨씬 확실합니다. 그래서 이 아이콘들을 모두의 제안에 따라 한 번 더 고쳤습니다. 업데이트 확인은 시계 방향 화살표로, GPU는 팬이 두 개인 그래픽카드로, 압축 파일은 보관 상자로, 오디오는 음표에서 헤드폰으로 바꿨습니다. 「화면 닦기」는 맨 처음 시스템 아이콘의 붓이라는 뜻으로 돌아갔고, 「Mole에 관하여」는 결국 가장 정통적인 ⓘ로 돌아가되 줄 전체의 선 굵기에 맞춰 다시 그렸습니다. 메모리도 칩으로 돌아갔습니다. 몇몇은 중간에 세 번이나 바뀌었습니다.

AI가 아껴 준 시간은 다듬는 데 쓰기

겉보기엔 쓸데없어 보이는 이런 일이 사실 제가 아주 좋아하는 일입니다. AI는 뛰어난 코드와 합격선의 안목을 크게 끌어올려 주고, 사람은 이제 말만 하면 되는 것처럼 보입니다. 그런데 저는 오히려 반대라고 생각합니다. 여기서 사람의 역할은 더 커졌습니다. AI가 아껴 준 시간을 제품을 다듬는 데 쓸 수 있고, 알아봐 주는 1%의 사용자가 제품을 쓰다가 가끔 「바로 알겠다」, 「와」, 「마술 같다」는 느낌을 받는다면 그건 정말 가치 있고 재미있는 일입니다. 어쩌면 그게 제가 혼자 제품을 만드는 일을 재미있다고 느끼는 이유인지도 모릅니다.