사용자 모르게 리멤버 UI icon 개선하기
2022년 리멤버 리브랜딩
리멤버는 2022년 7월 ‘기회가 열린다, 리멤버’라는 슬로건과 함께 명함 앱을 넘어 비즈니스의 다양한 기회가 열리는 직장인 슈퍼앱으로 나아가고자 리브랜딩이 진행되었습니다.
이 과정에서 리브랜딩 심볼의 큰 변화가 있었는데요. 명함을 연상시키는 기존 사각형을 벗어나 다양한 기회가 열리는 ‘문’을 형상화한 스퀘어로 진화했고, 이 스퀘어가 리멤버 R의 한 획을 받쳐주면서 대표성 있는 새로운 심볼로 탄생하게 되었습니다.
리멤버 스퀘어는 서비스 곳곳에 반영이 되었고, UI icon에도 역시 리멤버 스퀘어가 적용이 되었습니다.
리브랜딩과 함께 개발된 UI icon은 기존의 Material design을 참고하여 디자인 된 ver1의 아이콘보다 확실한 개성을 가진 형태로 완성되었습니다.
리브랜딩과 함께 새롭게 만들어진 ver1.5의 리멤버 UI icon은 Filled type의 아이콘이라는 점과 모서리의 깎임 효과 그리고 -3°의 기울임이라는 큰 특징들이 있었습니다. 각각의 특징 역시 리멤버 스퀘어라는 메타포에서 가져온 특징으로 리멤버의 브랜드 아이덴티티를 시각화 하는데 있어 두드러지는 포인트라고 볼 수 있었습니다.
새롭게 제작된 UI icon은 2022년 7월 리멤버 서비스 전체에 적용되었습니다.
그런데 문제가 있었습니다.
Filled 타입과 Outline 타입의 밸런스 차이
ver1.5의 아이콘은 Filled 타입을 기본으로 디자인 되었습니다. 그러나 Filled 타입으로 표현할 수 없는 아이콘이 존재하기도 하는데요.
동일한 영역에 Filled 타입과 Outline 타입의 아이콘이 함께 사용되면 같은 아이콘 셋트임에도 불구하고 밸런스 차이가 나다보니 하나의 아이콘 셋트처럼 보이지 않는 문제가 있었습니다.
아이콘이 찌그러져 보여요
아이콘들 자체가 -3°의 기울임과 모서리 깎임 효과들이 적용되어 있는데, 사용자 눈에는 의도된 디자인이 아니라 잘못된 형태로 인지되기 시작했습니다.
가령 네비게이션 아이콘의 기울여진 각도가 아이콘이 잘못 틀어져 있다고 인지한다던가 작은 사이즈의 Filled 타입 아이콘의 모서리가 깎인 부분을 사용자는 찌그러진 형태로 본다던가 하는 부분이었습니다.
새로운 아이콘이 적용된 서비스의 배포 비율이 올라가면서 관련 VOC도 증가하기 시작했습니다.
UI icon을 만드는데 너무 많은 시간이 필요해요
유저들의 사용성 문제 외에도 또다른 문제가 있었습니다. 새로운 기능들이 생기다보면 기존의 아이콘이 아닌 새로운 아이콘이 추가로 필요할때가 있는데요. 새로운 아이콘들은 가이드에 맞춰 제작하면 되는데 이 가이드가 너무나 복잡하고 번거로운 과정들을 거쳐야 하는것이 문제였습니다.
아이콘을 제작하기 위해서는
- Figma에서 아이콘의 원형을 그린 후
- Adobe illustrator의 아이콘 가이드 파일로 옮겨
- 모서리를 깎고
- -3°의 기울임을 준 뒤
- SVG로 내보내야 합니다.
- SVG 파일을 다시 Figma의 디자인 시스템에 등록하고,
- 작업중이던 화면에 적용해야
비로소 아이콘 1개의 제작이 완료되는 과정이었습니다.
