사용자 모르게 리멤버 UI icon 개선하기

2022년 리브랜딩 때 만든 리멤버 UI 아이콘은 -3° 기울임과 모서리 깎임 때문에 사용자에게 찌그러져 보였고, 제작 과정도 복잡했습니다. 그래서 Pretendard 폰트를 기준으로 아이콘을 다시 디자인하고 제작 가이드와 템플릿을 만들었습니다. 배포 후 아이콘 관련 VOC는 0건이 되었고, 팀의 체감 작업량은 3배 이상 줄었습니다.

배경

2022년 리멤버 리브랜딩

리멤버는 2022년 7월 ‘기회가 열린다, 리멤버’라는 슬로건과 함께 명함 앱을 넘어 비즈니스의 다양한 기회가 열리는 직장인 슈퍼앱으로 나아가고자 리브랜딩이 진행되었습니다.

이 과정에서 리브랜딩 심볼의 큰 변화가 있었는데요. 명함을 연상시키는 기존 사각형을 벗어나 다양한 기회가 열리는 ‘문’을 형상화한 스퀘어로 진화했고, 이 스퀘어가 리멤버 R의 한 획을 받쳐주면서 대표성 있는 새로운 심볼로 탄생하게 되었습니다.

리멤버 심볼

리멤버 스퀘어는 서비스 곳곳에 반영이 되었고, UI icon에도 역시 리멤버 스퀘어가 적용이 되었습니다.

리브랜딩과 함께 개발된 UI icon은 기존의 Material design을 참고하여 디자인된 ver1의 아이콘보다 확실한 개성을 가진 형태로 완성되었습니다.

리멤버 UI icon ver 1.5

리브랜딩과 함께 새롭게 만들어진 ver1.5의 리멤버 UI icon은 Filled type의 아이콘이라는 점과 모서리의 깎임 효과 그리고 -3°의 기울임이라는 큰 특징들이 있었습니다. 각각의 특징 역시 리멤버 스퀘어라는 메타포에서 가져온 특징으로 리멤버의 브랜드 아이덴티티를 시각화하는 데 있어 두드러지는 포인트라고 볼 수 있었습니다.

새롭게 제작된 UI icon은 2022년 7월 리멤버 서비스 전체에 적용되었습니다.

기존 UI 아이콘의 세 가지 문제

Filled 타입과 Outline 타입의 밸런스 차이

ver1.5의 아이콘은 Filled 타입을 기본으로 디자인되었습니다. 그러나 Filled 타입으로 표현할 수 없는 아이콘이 존재하기도 하는데요.

Fill type과 Outline type이 혼재되었던 as-is

동일한 영역에 Filled 타입과 Outline 타입의 아이콘이 함께 사용되면 같은 아이콘 세트임에도 불구하고 밸런스 차이가 나다 보니 하나의 아이콘 세트처럼 보이지 않는 문제가 있었습니다.

아이콘이 찌그러져 보여요

아이콘들 자체가 -3°의 기울임과 모서리 깎임 효과들이 적용되어 있는데, 사용자 눈에는 의도된 디자인이 아니라 잘못된 형태로 인지되기 시작했습니다.

가령 내비게이션 아이콘의 기울여진 각도가 아이콘이 잘못 틀어져 있다고 인지한다든가 작은 사이즈의 Filled 타입 아이콘의 모서리가 깎인 부분을 사용자는 찌그러진 형태로 본다든가 하는 부분이었습니다.

새로운 아이콘이 적용된 서비스의 배포 비율이 올라가면서 관련 VOC도 증가하기 시작했습니다.

UI icon을 만드는 데 너무 많은 시간이 필요해요

as-is 아이콘 제작 프로세스

유저들의 사용성 문제 외에도 또 다른 문제가 있었습니다. 새로운 기능들이 생기다 보면 기존의 아이콘이 아닌 새로운 아이콘이 추가로 필요할 때가 있는데요. 새로운 아이콘들은 가이드에 맞춰 제작하면 되는데 이 가이드가 너무나 복잡하고 번거로운 과정들을 거쳐야 하는 것이 문제였습니다.

아이콘을 제작하기 위해서는

1. Figma에서 아이콘의 원형을 그린 후
2. Adobe Illustrator의 아이콘 가이드 파일로 옮겨
3. 모서리를 깎고
4. -3°의 기울임을 준 뒤
5. SVG로 내보내야 합니다.
6. SVG 파일을 다시 Figma의 디자인 시스템에 등록하고,
7. 작업 중이던 화면에 적용해야

비로소 아이콘 1개의 제작이 완료되는 과정이었습니다.

개선 방향: 폰트 기준으로 아이콘 다시 디자인하기

폰트와 UI icon의 상관관계

UI icon을 개선하기에 앞서 중요한 두 가지를 먼저 짚고 넘어가야 했습니다.

1. UI icon이 어떤 환경에서 쓰이는지 다시 생각해보자
2. UI icon의 기능적인 역할을 충실히 하면서도 리멤버 브랜드 가치를 담을 수 있는 방향을 고민하자

UI icon은 대부분의 화면에서 폰트와 함께 사용됩니다. 리스트라든지 버튼이라든지 앱바와 탭바를 제외하면 대부분 폰트와 함께 나열되어 사용된다고 봐도 될 정도이기 때문에 폰트와의 밸런스가 매우 중요해집니다.

브랜드를 설명할 수 있는 요소들은 심볼도 있겠지만 서비스 전반에 사용되는 컬러, 폰트 또한 브랜드를 설명할 수 있습니다. 게다가 아이콘은 대부분 폰트와 함께 사용될 테니 리멤버 브랜드 가치가 담긴 폰트와 닮은 아이콘을 만드는 것이 가장 적절하다고 판단했습니다.

이미 다양한 글로벌 브랜드들이 폰트에 맞춘 아이콘을 제작하여 서비스에 반영 중인 사례들도 있었기 때문에 글로벌 기업들의 공식문서(IBM Design Language — UI icons, Icons — Material Design 3)를 참고해서 서비스에 적용된 폰트를 기반으로 UI icon을 다시 제작하기로 했습니다.

또한 아이콘 제작의 리소스를 절감하기 위해 프로덕트 디자이너 누구나 가이드를 보고 피그마 안에서 UI icon을 빠르게 만들 수 있도록 가이드 문서와 작업용 템플릿 파일을 만들기로 했습니다.

서비스에 적용된 폰트를 기반으로 UI icon 디자인하기

리멤버는 기본 시스템 폰트 대신 커스텀 폰트를 사용하며 Pretendard를 지정서체로 사용하고 있습니다. (참고: Pretendard 커스텀 폰트 도입기)

프리텐다드를 사용하는 기술적인 이유도 있지만 리멤버의 기업 가치 관점에서 왜 사용하는지를 조금 더 들여다보고 해석하여 리멤버 브랜드 관점에서 볼 수 있는 프리텐다드의 특징들을 골라내 컨셉에 맞는 아이콘 디자인을 진행했습니다.

아이콘 굵기 기준 정하기

리멤버에서 아이콘과 폰트가 함께 사용되는 여러 가지 사례들을 모아보았고, 다수의 상황에서 Medium 굵기의 폰트와 아이콘이 가장 많이 사용된다는 사실을 발견했습니다. 폰트의 weight나 크기에 따라 아이콘도 weight와 크기가 함께 맞춰지면 가장 좋겠지만 제작 리소스와 현재의 상황을 고려하여 가장 많이 사용되는 weight를 기준으로 아이콘 weight를 결정했고, 그 기준으로 가이드를 제작했습니다.

아이콘 제작 가이드

가이드의 일부 내용은 다음과 같습니다.

• Base grid: 리멤버 아이콘은 32px X 32px의 픽셀 기반 그리드에 그려지며 1px 단위의 격자를 기본 가이드로 사용합니다.
• Padding: 그리드에는 4px의 패딩이 포함되어 있습니다. 이렇게 하면 아이콘을 내보낼 때 원하는 배율과 주변 공백이 유지됩니다.
• Key shapes: 키 라인은 아이콘 세트 전체에서 기본 모양 또는 비율에 대해 일관된 크기를 제공합니다.
• Style: 리멤버 아이콘의 형태적 특징은 리멤버의 아이덴티티인 카드에서 볼 수 있는 각진 형태와 Pretendard 폰트에서 볼 수 있는 형태적 특징에서 가져왔습니다. 때문에 아이콘 모서리는 radius를 적용하지 않습니다.
• Stroke: 리멤버 아이콘은 리멤버 시스템 폰트인 Pretendard와 밸런스를 맞추도록 합니다. 각 아이콘의 stroke는 리멤버 앱에서 아이콘과 가장 많이 사용되는 Title2의 두께와 맞춰져 있습니다.
• Angles: 리멤버 아이콘에서 일관된 형태를 가져가기 위해 45° 각도를 사용합니다. 필요 시 15°의 각도를 활용합니다.

가이드를 문서화하고 팀에 공유하여 공식화하는 과정을 거쳐 기존의 아이콘들을 개선했고, 점진적으로 각 디바이스와 OS에 적용하게 되었습니다.

개선 결과: 리멤버 UI 아이콘은 이렇게 바뀌었습니다

AS-IS / TO-BE

• 사용자에게 오류로 보였던 기울기와 모서리 깎임 요소를 제거하였습니다.
• 리멤버 제품에 사용된 폰트와의 조화를 위해 폰트의 시각적 요소를 참고하여 아이콘에 반영하였습니다.
• 누구나 쉽게 이해하고 아이콘을 만들 수 있도록 명확한 가이드와 템플릿을 만들었습니다.

개선 효과

1. UI icon 관련 VOC 감소: 배포 이후 UI icon과 관련된 VOC가 0건으로, 사용자에게 UI icon으로 인해 사용성을 저해하는 경험은 없어졌다고 봐도 될 수치였습니다.
2. 제작 리소스 절감: 사용자뿐만 아니라 그동안 여러 단계를 거쳐 아이콘을 제작해야 했던 프로덕트 디자인 팀에도 좋은 변화가 생겼습니다. 아이콘 개선 이후 체감 작업량이 기존 대비 3배 이상 감소했다고 평가했습니다.

글을 마치며

2022년 리브랜딩 이후 적용된 UI icon을 개선하는 부분은 사실 조심스럽기도 했습니다. 그럼에도 불구하고 개선해야 했던 이유는 명확했습니다.

사용자 경험을 해치면서까지 브랜드 가치를 전달할 수 있는 요소는 없다

이번 UI icon 개선은 브랜드 가치를 제품에 어떻게 담아낼 것인지 다시 한 번 고민해 볼 수 있는 시간이었습니다.

또한, 사용자에게 UI의 변화는 ‘불편할 때’ 비로소 체감하게 되는 요소라는 것을 확인할 수 있었습니다. 마치 공기처럼 자연스러울 때에는 의식하지 못하다가 눈에 거슬리거나, 어딘가 불편하다고 느끼는 순간 의식하게 되고 신경 쓰이는 것처럼요.

명함 앱을 넘어 다양한 비즈니스 기회를 만들 수 있는 서비스로 성장 중인 리멤버의 브랜드 가치를 사용자가 서비스를 경험하며 더욱 체감할 수 있도록 프로덕트 디자이너 관점에서 계속해서 고민해야 하는 숙제라는 생각이 들었습니다.