두 가지 의미를 결합하는 복합 아이콘

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

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

때로는 두 개의 기호를 결합해 원하는 의미를 표현합니다.

기본 아이콘인 ‘휴대전화’와 보조 기호인 ‘더하기’를 결합하면 ‘전화번호 추가’라는 의미가 됩니다.

‘새 폴더’, ‘사용자 추가’, ‘위치 추가’ 아이콘

복합 아이콘은 한층 구체적인 의미를 전달할 때 효과적입니다. 무엇을 추가하는지에 따라 휴대전화, 폴더, 사용자, 위치 등의 아이콘을 조합할 수 있습니다.

— 또는 우리가 여러 항목을 서로 구별하고 싶을 때.

이러한 방식은 아이콘에 텍스트 레이블이 없거나, 여러 항목을 서로 구분해야 할 때 유용합니다.

예를 들어 폴더 목록에서 비공개 폴더와 공유 폴더를 한눈에 구분해야 한다면, 폴더 아이콘에 자물쇠나 사용자 기호를 결합할 수 있습니다.

복합 아이콘 구성하기

복합 아이콘은 기본 아이콘에 더 작은 보조 기호를 더해 만듭니다. 보조 기호는 기본 아이콘 안쪽이나 모서리에 배치할 수 있습니다.

또는 기본 아이콘 위에 겹쳐 놓을 수도 있습니다. 아이콘을 가로지르는 빗금이나 ‘X’ 표시는 해당 기능이 비활성화되었거나, 사용할 수 없거나, 금지되었다는 의미를 전달하는 익숙한 방식입니다.

어떤 위치에 배치하든 두 요소가 명확하게 구분되어 보여야 합니다.

두 요소 사이에 여백을 만들고 기본 아이콘 일부를 보조 기호 뒤로 숨기거나, 보조 기호를 면으로 채워 앞으로 나오게 만들 수 있습니다. 두 요소에 서로 다른 색상을 적용하는 방법도 있습니다.

드물게는 하나의 형태에 두 가지 의미를 담기도 합니다. 위 이미지의 ‘사용자 전환’ 아이콘은 바깥쪽 원을 시계 방향 화살표이자 사용자를 감싸는 테두리로 활용합니다.

잘 구현하면 영리한 표현이 될 수 있지만, 두 의미가 모두 명확하게 읽히는지 확인해야 합니다.

출처: Google Maps, Instagram, USPS.com, Apple Weather, Brightwheel, HotelTonight

복합 아이콘을 사용할 때 주의할 점

복합 아이콘은 분명 유용하지만, 일반적인 아이콘보다 의미를 파악하기 어렵습니다.

좁은 공간에 많은 정보를 담아야 합니다

복합 아이콘은 동일한 크기 안에 더 많은 디테일을 담습니다. 디지털 환경에서 흔히 사용하는 24×24픽셀의 공간에는 표현할 수 있는 정보가 한정되어 있습니다.

보조 기호를 넣기 위해 기본 아이콘의 일부를 끊어서 표현해야 하는 경우도 있습니다.

하지만 이러한 방식은 아이콘이 작아질수록 가독성을 떨어뜨립니다. 위 이미지는 기본 아이콘의 일부를 끊어 보조 기호를 배치한 사례입니다.

어떤 요소가 수식어이고 어떤 요소가 수식되는 요소입니까?

아이콘의 문법이 모호해질 수 있습니다

복합 아이콘이 특히 까다로운 이유는 사용자가 두 기호뿐 아니라 두 기호의 관계까지 해석해야 하기 때문입니다. 다시 말해 아이콘에 일종의 문법이 생기는 셈입니다. 문제는 이 문법에 명확하게 합의된 규칙이 없다는 것입니다.

예를 들어 위 아이콘은 ‘비밀번호 변경’을 의미할까요, 아니면 ‘화면 회전 잠금’을 의미할까요?

어느 쪽이 기본 아이콘이고, 어느 쪽이 그 의미를 보완하는 기호인지도 모호할 수 있습니다.

출처: iOS WhatsApp 스크린샷 및 커뮤니티 스크린샷

아이콘 사이의 차이가 잘 드러나지 않을 수 있습니다

같은 기본 형태를 공유하는 복합 아이콘은 서로 지나치게 비슷해 보일 수 있습니다.

iOS용 WhatsApp의 통화 기록 화면에서는 ‘수신 통화’와 ‘발신 통화’를 나타내는 작은 화살표의 차이를 구분하기 어렵습니다.

출처: 안드로이드 WhatsApp 화면 캡처

이미 사용자가 최근 통화 목록을 보고 있다는 맥락을 알고 있다면, 휴대전화 기호를 굳이 유지할 필요가 있을까요? 휴대전화 기호를 없애고 화살표를 더 크게 보여주면 ‘통화’가 아니라 ‘발신’과 ‘수신’의 차이에 집중할 수 있습니다.

실제로 Android용 WhatsApp은 이러한 방식을 사용합니다. 여기에 색상까지 적용해 완료된 통화와 부재중 통화를 구분합니다. 다만 이 화면에서는 ‘수신’, ‘발신’, ‘부재중’이라는 텍스트 레이블이 제거되어 있어, 아이콘만으로 의미를 충분히 전달해야 합니다.

다이노소어 리지에 있는 "등반 금지" 표지판

아이콘의 핵심 장점 중 하나는 정보를 한눈에 파악할 수 있다는 점입니다. 하지만 복합 아이콘이 지나치게 많은 해석을 요구한다면 이러한 장점이 사라집니다.

따라서 보조 기호를 추가할 때는 실제 사용 환경에서 아이콘이 명확하게 읽히는지 반드시 확인해야 합니다.

원문 출처: https://medium.com/@minoraxis/advanced-icon-design-compound-icons-modifiers-a747e028ad7b

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