brunch

You can make anything
by writing

C.S.Lewis

by UX George Apr 11. 2023

소리로도 디자인 시스템을 구축할 수 있다고?

이어콘 family를 디자인하는 법

#SoundFeedback #SoundDesign #AuditoryInterface #AuditiveFeedback #Earcon #DesignPrinciples #UX #사용자경험

이 주제에 관심이 있으시다면, 꼭 읽어보세요!




눈에는 아이콘, 귀에는 이어콘


이어콘이 필요한 이유

아이콘(icon)은  컴퓨터 화면에 정보를 시각적으로 보여주는 그래픽적인 상징입니다. 그러나 과도하게 밀집된 화면은 인지 과부하를 일으킬 수 있고, 사용자의 판단과 퍼포먼스에까지 영향을 미칠 수 있습니다[1]. 이럴 때 시각적인 아이콘에 대응시켜 이어콘(earcon)을 대체 수단으로 사용할 수 있습니다.


이어콘이란?

이어콘이란 사용자에게 정보를 제공하기 위해서 컴퓨터 인터페이스에 사용되는 비언어적인 청각 메시지입니다. 이어콘은 일시적이지만 사용자의 주의를 환기할 수 있습니다. 아이콘과 마찬가지로 구성 요소를 조합해서 패밀리(family)를 형성할 수 있습니다. 이 스키마는 쉽게 이해되고, 쉽게 사용되며, 쉽게 수정될 수 있어야 합니다.


동기란?

이어콘의 구성 요소는 동기(motive)인데, 아이콘을 이루는 기하학적인 형상들의 조합과 유사합니다. 동기는 리듬과 피치의 구성으로 형성되는 오디오 패턴이며, 이외에도 음색(timbre)이나 옥타브 높이(register), 그리고 셈여림(dynamics)을 활용해 동기를 표현할 수 있습니다. 그리고 이런 동기들이 변형되고 합쳐지고 상속되면서 family를 형성할 수 있습니다.



이어콘 family를 구성하는 방법


1. One element Earcones


비교적 단순한 단일 요소 이어콘에는 하나의 음표로 구성된 이어콘이 포함됩니다. 키를 클릭하거나 커서를 선택하는 등 단순하고 기본적인 사용자 인터페이스 엔티티를 나타내는 데 사용할 수 있습니다. 셈여림이나 음색 등의 속성으로 이어콘을 구성할 수 있는데 가령 (b)와 같이 볼륨이 감소하는 단일 피치 이어콘으로 삭제되고 있음을 은유적으로 표현할 수 있습니다.


단일 동기식 이어콘도 단일 요소 이어콘에 포함되는데요, 기본적인 컴퓨터 엔티티(Entity)를 나타낼 수 있습니다. 예를 들어 이어콘의 옥타브 높이와 셈여림은 시스템 메시지를 표시하는 창의 위치를 나타낼 수 있고, 이를 적용하여 옥타브가 낮고 부드러운 셈여림을 가진 이어콘은 왼쪽 아래 창에 시스템 메시지가 표시되고 있음을 나타탤 수 있습니다.



2. Compound Earcons



결합 이어콘은 2개 이상의 요소를 연속적으로 배치해서 형성되며 공통 기능을 공유하는 컴퓨터 엔티티를 나타낼 수 있습니다. 유사한 종류의 정보를 나타내기 위해 유사한 요소가 사용됩니다. 가령 시스템에서 파일 관리와 관련된 요소 앞에 다른 피치와 다른 셈여림을 가진 노트를 붙여 파일의 생성과 삭제를 식별할 수 있습니다.



3. Inherited Earcons


상속된 이어콘은 동일한 동기의 속성을 변화하여 유사한 계열을 표현하는 방법입니다. 리듬, 피치, 음색, 셈여림, 옥타브 높이 등 5개의 속성만 있기 때문에 총 5개의 레벨만 표현할 수 있습니다. 예시와 같이 오류 중 시스템 운영 에러와 실행 에러의 차이를 표현하기 위해 상위 동기에 변형된 요소를 추가할 수 있습니다.


4. Transformed Earcons

음악은 속성의 변화에 의해 부분적으로 수정될 수 있으면서도 정체성을 유지할 수 있습니다. 아이콘에서 시각적인 요소를 유지 시키는 것과 마찬가지로, 이어콘에서도 지각적인 동등성을 유지하기 위해 멜로디 윤곽 모양을 보존할 수 있습니다. 가령 가장 상위의 오류 리듬을 활용해서 시스템 운영 오류와 실행 오류를 다른 멜로디로 나타낼 수 있습니다. 또 시스템 운영 오류의 하위 에러들은 동일한 멜로디를 지니고 있지만 다른 파형의 음색으로 표현될 수 있습니다.



공간복잡도를 고려해 방식을 선택합시다.

이어콘이 유용하려면 각각의 이어콘이 어떤 기능을 의미하는지에 대해 사용자들이 빠르게 학습해야 합니다. 일정한 규칙을 가지고 이어콘 family를 사용하면 소리를 보다 잘 인식하고 기억하게 만들어 줄 수 있습니다. 그렇다면 어떤 구성 방법을 언제 적용해야 할까요? family에 포함되어있는 이어콘의 종류와 계층이 얼마나 다양한지에 따라 공간 복잡도를 계산해보고 적절한 구성 방법을 취사선택할 수 있습니다. 사용자의 전문성에 따라서도 복잡도를 고려해볼 수 있을 것입니다.


*공간복잡도 = 인지적 노력을 필요로 하는 메모리의 양




UX George는 아래 논문을 대신 읽어드렸어요. 여러분이 프로덕트 만드는 시간은 소중하니깐요!

Blattner, Meera M., Denise A. Sumikawa, and Robert M. Greenberg. "Earcons and icons: Their structure and common design principles." Human–Computer Interaction 4.1 (1989): 11-44.



Reference

[1] Ramsey, H. Rudy, and Michael E. Atwood. "Man-computer interface design guidance: State of the art." Proceedings of the Human Factors Society Annual Meeting. Vol. 24. No. 1. Sage CA: Los Angeles, CA: SAGE Publications, 198

작가의 이전글 인공지능(AI)에 대한 편견, 당신도 갖고 있나요?
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari