버버리 UX팀이 말하는 아이콘 디자인

*원문을 번역한 글입니다.

*원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다.

버버리의 Product Design & UX 팀이 말하는 아이콘 디자인
글: Giulia Parini, Inês Margarido, Abigail Deakin — 버버리 디지털 프로덕트 디자이너

아이콘은 종종 과소평가되지만, 브랜드를 조용히 대변하는 존재입니다. 버버리는 최근 리브랜딩에 맞춰, 브랜드 헤리티지와 새로운 크리에이티브 방향성, 그리고 사용자 기대에 부합하는 새로운 아이콘 시스템을 개발하는 데 집중했습니다.

초기 콘셉트부터 최종 구현까지 모든 디테일을 면밀히 검토하며, 아이콘이 단순한 시각 요소를 넘어 고객 여정을 안내하는 강력한 스토리텔링 장치가 되도록 설계했습니다. 이 글에서는 새로운 아이콘 시스템을 개발하는 과정을 살펴봅니다. 영감의 출발점부터 디자인 방향, 제작 기준까지 함께 다룹니다.

그리드와 크기

일관성과 시각적 완성도를 확보하기 위해, 버버리의 아이콘은 그리드 시스템을 기반으로 설계됩니다. 그리드는 두 가지 크기를 사용합니다.

기본 아이콘: 24×24px
소형 아이콘: 20×20px

이 그리드 크기는 버버리의 기술용 서체인 Oracle의 line-height를 기준으로 정해졌으며, 텍스트와 아이콘 사이의 조화로운 관계를 유지하기 위한 것입니다.

각 그리드에는 safe area, key-line 각도, 그리고 아이콘의 목적에 따라 달라질 수 있는 기본 도형이 포함됩니다. 이 가이드를 따르면 시각적으로 완성도 높으면서도 기술적으로 안정적인 아이콘을 만들 수 있습니다.

최상의 품질을 확보하기 위해, 아이콘은 100% 배율에서 보이는 상태를 기준으로 디자인됩니다. 이를 통해 모든 픽셀이 정확한 위치에 놓이고, 결과적으로 선명하고 또렷한 비주얼을 만들 수 있습니다. 픽셀 단위의 정확성을 우선함으로써, 버버리 브랜드에 걸맞은 아이콘을 제공할 수 있습니다.

Burberry Oracle (글자 크기: 16px, 줄 간격: 24px, 획 두께: 약 1.5px) 및
Burberry House (글자 크기: 20px, 줄 간격: 24px, 획 두께: 1px + 2px)

24px 아이콘과 20px 아이콘을 위한 그리드 구조

아이콘이 균형 잡힌 인상과 일관된 비례를 유지할 수 있도록, 만들고자 하는 아이콘 형태와 가장 가까운 그리드 내 도형을 기준으로 선택합니다. 이 도형들은 가이드 역할을 하며, 아이콘의 시각적 무게감이 조화롭게 유지되도록 돕습니다. 콘셉트를 더 명확하게 만들거나 시각적 균형을 맞추기 위해서라면, safe area를 벗어나지 않는 범위 안에서 기준 도형을 벗어나는 것도 허용됩니다. safe area 밖으로 나가는 것은 반드시 피해야 합니다. 모바일 디바이스에 맞춰 리사이징되는 과정에서 영역 밖 요소가 잘릴 수 있기 때문입니다.

콘셉트를 강화하거나 시각적 균형을 맞추기 위해 기준 도형을 일부 벗어난 아이콘 예시

스타일

이 아이콘들은 날카로운 엣지, 기하학적 형태, 직각 모서리를 특징으로 하며, 유기적인 형태나 둥근 모서리는 배제합니다. 이처럼 또렷한 미감은 시각적 완성도를 높일 뿐 아니라, 작은 크기에서도 충분한 가독성을 확보해 줍니다.

아이콘 디자인에 영감이 된 Oracle 폰트의 형태와 스트로크

브랜드의 전반적인 미적 감각을 반영하기 위해, 당사 디지털 제품 전반에 걸쳐 사용되는 아이콘의 기본 스타일은 윤곽선으로 되어 있습니다. 채워진 아이콘은 매우 신중하게 사용하며, 사용자가 즐겨찾기 목록에 항목을 추가하는 등 활성화되거나 선택된 상태를 나타낼 때만 사용하고, 강조를 위해 사용하지 않습니다. 또한, 교차하는 두 선 사이에 간격을 두지 않고, 반드시 교차하도록 디자인했습니다.

아이콘은 오라클 폰트와 동일한 모양과 획을 사용하여 당사의 타이포그래피와 어울리도록 디자인되었습니다.

스트로크와 굵기

텍스트와 아이콘 사이의 조화로운 관계를 만들기 위해, 모든 아이콘은 1.5px 스트로크를 기준으로 디자인합니다. 이 기준은 곡선, 각도, 내부와 외부 스트로크 모두에 적용됩니다. 이 스트로크 굵기는 Oracle과 House 폰트에 맞춰져 있어, 균형 잡힌 인상을 유지하면서도 식별에 필요한 디테일을 충분히 확보합니다. 스트로크의 한쪽 면을 픽셀 그리드에 맞춰 정렬함으로써, 픽셀 단위의 정확성을 우선합니다. 이러한 디테일 덕분에 아이콘은 모든 화면에서 선명하고 또렷하게 보입니다.

1.5픽셀 두께의 아이콘

원근감

일관되고 깔끔한 디자인을 유지하기 위해 아이콘은 일반적으로 정면을 향하도록 표시되며, 기울이거나 회전하거나 입체적인 효과를 적용하지 않습니다. 하지만 깊이감이나 원근감을 더하면 아이콘의 의미가 더욱 명확해지는 예외적인 경우도 있습니다. 예를 들어, 상자는 완전히 평면으로 만들면 형태를 알아보기 어려울 수 있습니다.

정렬과 시각 보정

앞서 설명드린 것처럼 아이콘 크기는 24px와 20px 두 가지가 있습니다. 아이콘과 텍스트를 함께 사용할 경우, 텍스트의 줄 간격과 동일한 크기의 그리드를 사용합니다(줄 간격이 24px인 경우 24px, 20px인 경우 20px). 텍스트 없이 사용하거나 다른 아이콘과 함께 사용할 때는 기본적으로 24px 그리드가 사용됩니다.

24px 및 20px 그리드 사용 예시입니다.

시각적으로 보기 좋은 프레젠테이션을 만들기 위해 아이콘의 기준선을 텍스트의 기준선에 직접 맞추지 않습니다. 텍스트의 중간 또는 다른 아이콘의 중간을 기준으로 아이콘을 정렬합니다.

왼쪽은 시각 보정이 적용된 아이콘, 오른쪽은 시각 보정이 적용되지 않은 아이콘입니다.

대부분의 경우 아이콘은 컨테이너 중앙에 배치됩니다. 필요한 경우 아이콘이 함께 사용되는 타이포그래피와 세로로 정렬되도록 미세한 조정을 거칩니다. 이러한 세심한 배려는 전체적으로 세련되고 전문적인 느낌을 만들어냅니다.

광학적 보정을 통한 정렬의 다른 예입니다.

디테일, 의미, 보편적 커뮤니케이션

전 세계 고객과 효과적으로 소통하기 위해, 우리는 명확성을 최우선으로 생각하며, 가독성이 떨어지거나 아이콘을 알아보기 어렵게 만드는 불필요한 디테일을 배제합니다. 버버리만의 독창적인 아이콘을 만들기 위해 노력하는 동시에, 누구나 쉽게 이해할 수 있도록 디자인합니다.

버버리 월드에서 영감을 받은 몇 가지 아이콘입니다.

다양한 문화적 배경을 가진 사용자들을 고려하여, 우리는 특정 문화권에만 국한되거나 시대에 뒤떨어진 비유를 사용하지 않습니다. 각 아이콘은 특정 플랫폼 내에서 하나의 기능에만 연결되어야 하며, 이를 통해 일관성을 유지하고 혼란을 방지합니다.

새로운 아이콘을 출시하기 전에 사용자 테스트를 실시하여 고객이 아이콘의 의도된 의미를 제대로 이해하는지 확인합니다. 이를 통해 긍정적인 사용자 경험과 효과적인 커뮤니케이션을 보장할 수 있습니다.

컬러와 효과

다양한 배경에서도 잘 보이도록 아이콘은 검정색 또는 흰색으로 디자인되었습니다. 적절한 색상은 주변 디자인을 고려하여 선택됩니다. 비밀번호 유효성 검사 성공 시 녹색을 사용하는 경우와 같이 예외적인 경우도 있지만, 일반적으로 텍스트와 아이콘에 서로 다른 색상을 사용하지 않습니다. 또한, 깔끔하고 간결한 디자인을 유지하기 위해 여러 색상이나 투명도, 그림자 등의 효과 사용을 최소화합니다.

Burberry.com에서 아이콘 사용 예시

마치며

이 글을 읽고 아이콘 디자인의 복잡한 뉘앙스와 전 세계 사람들에게 공감을 불러일으키는 상징을 만들어내는 세심한 과정을 성공적으로 전달했다면, 우리는 일단은 임무를 완수한 셈입니다. 아이콘 디자인은 끊임없는 개선의 여정입니다. 따라서 이 부분은 해결했을지 몰라도, 우리의 작업은 아직 끝나지 않았습니다. 아이콘의 완벽을 향한 여정은 계속됩니다.

원문 출처: https://medium.com/@burberry.product.design/icons-101-77c9f145bc0e

DEET를 구독하고 커리어 성장을 위한 작은 습관을 시작해 보세요.