Design
여기어때 시스템 아이콘 개선기
여기어때 UX Center여기어때
2025년 3월 21일
원문에서 보기 ↗김제린(Riny) / Visual graphic Designer
아래 이미지에서 어떤 문장이 더 읽기 쉬워 보이시나요?
디지털 환경에서 일관된 디자인 언어는 사용자 경험을 높이는 중요한 요소인데요, 여러 서체가 섞였을 때 가독성이 떨어지는 것처럼 시스템 아이콘에서도 일관된 그래픽 스타일을 유지하는 게 중요하죠. 시스템 아이콘은 디지털 인터페이스에서 기능이나 상태를 시각적으로 나타내는 그래픽 요소로, 사용자가 빠르게 이해하고 조작할 수 있도록 돕는 역할을 해요.
하지만 기존 시스템 아이콘들은 각기 다른 스타일로 디자인되어 가독성이나 통일성 면에서 아쉬움이 있었어요. 2024년 하반기 앱 6.0 업데이트를 맞아 UI 디자인이 새롭게 개편되었는데요, 여기어때의 브랜드 아이덴티티를 반영한 일관된 그래픽 규칙을 수립하고, 가독성을 높이기 위한 시스템 아이콘 개선한 과정을 공유하고자 해요.
시스템 아이콘이란?
먼저 본격적으로 이야기를 하기에 앞서 시스템 아이콘이란 무엇인지 알아볼게요. 사실 시스템 아이콘은 단순한 그림이 아닙니다. 앞서 말씀드렸듯 디지털 제품에서 사용자가 기능이나 상태를 빠르게 인식할 수 있도록 돕는 중요한 시각적 도구예요. 내비게이션, 버튼, 상태 표시 등 여러 UI 요소에 적용되어 사용자 경험을 매끄럽게 만들어주는 핵심 요소입니다.
그럼 시스템 아이콘의 역할은 무엇일까요?
이처럼 시스템 아이콘은 단순히 장식적인 요소가 아니에요. 오히려 사용자 경험을 향상시키고, 제품 내에서 가독성과 접근성을 높이는 중요한 디자인 자산이죠. 그래픽 규칙이 명확하게 설정된 일관성 있는 아이콘은 브랜드 아이덴티티를 강화하고, 사용자에게는 더욱 직관적인 경험을 제공할 수 있게 돼요.
기존 아이콘의 문제점
시스템 아이콘은 제품의 일관성을 유지하는 중요한 요소이지만, 기존 아이콘들은 그래픽적인 통일성이 부족했어요. 이는 사용자 경험을 저해할 뿐만 아니라, 브랜드 아이덴티티를 일관되게 전달하는 데도 어려움을 만들었어요.
이렇듯 기존 시스템 아이콘들은 각기 다른 스타일과 규칙으로 제작되어 디자인 일관성이 부족했어요. 대표적인 문제점은 다음과 같아요.
또한, 기존 아이콘의 문제는 앱 6.0 업데이트를 통해 해결할 필요성이 더욱 커졌어요. 홈 화면부터 UI, 배너, 버튼 등 제품에서 전반적인 요소가 대규모 업데이트 되었는데, 이 과정에서 시스템 아이콘 또한 새로운 디자인 방향성에 맞춰 개선해야 할 필요성이 대두되었죠.
이처럼 제품의 시각적 정체성을 확립하고, 사용자 경험을 향상시키기 위해 새로운 그래픽 규칙을 적용한 시스템 아이콘 업데이트가 필수적이었어요.
해결 방법 ① 브랜드 아이덴티티 반영하기
시스템 아이콘을 개선하면서 가장 중요한 목표는 여기어때의 브랜드 아이덴티티를 반영하는 것이었어요. 기존 아이콘들은 스타일이 일관되지 않아 브랜드의 시각적 정체성이 명확하지 않았고, 이를 해결하기 위해 여기어때 로고의 특징을 시스템 아이콘에 녹여내는 방향으로 디자인을 진행했죠.
여기어때의 로고는 한글 로고타입으로, 폰트를 분석해 보면 윗면은 원형의 형태, 밑면은 사각형의 형태를 가지고 있어요. 이러한 디자인 요소를 시스템 아이콘에도 적용함으로써, 브랜드의 그래픽 언어를 확장하고 일관된 아이덴티티를 구축하려고 했죠.
이 원칙을 바탕으로 모든 시스템 아이콘의 형태를 조정해서 브랜드의 정체성을 반영했어요. 아이콘의 윤곽을 수정하고, 곡선과 직선을 적절히 조합하면서도 가독성과 기능성을 유지하는 것이 핵심이었죠. 이를 통해 새롭게 제작된 시스템 아이콘들은 기존보다 더 정돈되고, 브랜드의 특징을 직관적으로 드러내는 디자인으로 거듭났어요. 제품 내에서 아이콘이 단순한 기능 전달 도구를 넘어, 여기어때의 정체성을 시각적으로 강화하는 요소로 작용할 수 있도록 설계한 거예요.
해결 방법 ② 일관된 그래픽 규칙 정립하기
시스템 아이콘을 개선하면서 일관된 그래픽 규칙을 정립하는 것이 중요한 과제였어요. 기존 아이콘들은 형태, 라운드 값, 라인 굵기 등이 제각각이라서 시각적인 통일성이 부족했죠. 이를 해결하기 위해 명확한 디자인 원칙을 수립하고, 아이콘 제작 및 유지 보수 과정에서 일관성을 유지할 수 있도록 체계를 정리했어요.
새롭게 정의한 시스템 아이콘의 기본 스타일은 Solid(면) 아이콘을 기본으로 사용하는 것이었어요. 면을 활용한 디자인은 더 높은 가독성을 제공하여 명확한 시각적 인상을 남길 수 있기 때문이에요. 또한, 아이콘의 형태를 결정하는 가장 중요한 요소로 여기어때 로고의 특징을 반영한 곡선과 직선의 조합을 규칙화했죠. 기본적으로 아이콘의 바닥에 닿는 하단 모서리는 직선으로 처리하고, 상단 모서리는 곡선으로 표현하여 브랜드의 그래픽 아이덴티티와의 연결성을 강화했어요. 다만, 기능과 가독성을 고려하여 목적에 따라 유연하게 조정될 수 있도록 했어요.
아이콘 내부에서 추가적인 묘사가 필요할 경우, 1.5px의 라인을 사용하여 표현하도록 규칙을 정했어요. 이는 내부 디테일이 너무 얇거나 두꺼워지는 것을 방지하고, 전체적인 스타일을 균일하게 유지하기 위함이에요. 또한, 곡선을 사용할 때는 가로세로 비율이 동일한 정원을 활용하여 제작하며, 자유곡선 형태는 지양하도록 설정했어요. 이를 통해 불필요한 스타일 변형을 막고, 일관된 형태를 유지할 수 있도록 했죠.
방향성을 나타내는 화살표의 경우, 2px의 라인 형태로 제작하며, 화살표 코의 각에는 라운드 값을 적용하여 부드러운 인상을 줄 수 있도록 했어요. 이러한 규칙들은 단순히 그래픽적인 통일성을 위한 것이 아니라, 사용자가 직관적으로 인식할 수 있도록 시각적인 완성도를 높이는 데 초점을 맞추고 있어요.
이처럼 명확한 그래픽 규칙을 수립함으로써, 향후 새로운 아이콘이 추가되거나 변경될 때도 일관성을 유지할 수 있도록 했어요.
더 견고해진 시스템 아이콘
시스템 아이콘을 개선한 이후, 제품 내 시각적 통일성이 더욱 견고해졌어요. 기존 아이콘들의 불균형한 스타일이 정리되면서 가독성이 향상되었고, 브랜드 아이덴티티와의 일관성도 강화되었죠. 특히, 로고에서 가져온 그래픽 요소를 적용한 덕분에 아이콘이 단순한 UI 요소를 넘어, 여기어때만의 디자인 언어를 구축하는 데 기여할 수 있었어요.
이 프로젝트를 진행하며, 단순히 아이콘을 ‘예쁘게’ 만드는 것이 아니라, 제품의 사용성과 일관성을 고려한 디자인이 얼마나 중요한지 다시 한번 깨닫게 되었어요. 작은 요소 하나에도 브랜드의 정체성이 담길 수 있고, 이를 통해 사용자 경험을 개선할 수 있다는 점을 실감했죠. 또한, 명확한 그래픽 규칙을 수립하는 것이 향후 확장성과 유지보수 측면에서도 얼마나 큰 영향을 미치는지 배우는 계기가 되었어요.
이번 시스템 아이콘 개선 작업은 단순한 그래픽 업데이트를 넘어, 브랜드 아이덴티티와 UX를 함께 고려한 디자인의 가치를 확인하는 과정이었어요. 앞으로도 작은 요소 하나에도 의미를 담아, 사용자 경험을 더욱 향상시킬 수 있는 디자인을 만들어 나가고자 해요.
✔️ 글쓴이를 더 알고 싶다면? 링크드인
편집: 이소연(Jetty) UX Writer
그래픽: 김제린(Riny) Visual Interaction Designer
*해당 글과 이미지를 인용 또는 재가공 시 출처를 꼭 밝혀주세요.
관련 글