<div id="readability-page-1" class="page"><div><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;Anthony의 「Where to Place Icons Next to Button Labels」 소개하고자 합니다.&quot;}]}">Anthony의 「Where to Place Icons Next to Button Labels」 소개하고자 합니다.</p><blockquote data-app="{&quot;type&quot;:&quot;quotation&quot;,&quot;kind&quot;:&quot;quote&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;아이콘은 버튼레이블의 어느 쪽에 배치해야 하는가&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;(요약문)&quot;}]}">아이콘은 버튼레이블의 어느 쪽에 배치해야 하는가<br>(요약문)</blockquote><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;아이콘은 리스트 항목의 글머리 기호처럼 작용하여, 사용자가 정보를 더 쉽게 찾고 이해할 수 있도록 돕습니다. 아이콘은 버튼의 기능을 직관적으로 나타내고, 글머리 기호는 리스트에서 각 항목을 구분하여 시각적인 힌트를 제공합니다.&quot;}]}]}"><span>아이콘은 리스트 항목의 글머리 기호처럼 작용하여, 사용자가 정보를 더 쉽게 찾고 이해할 수 있도록 돕습니다. 아이콘은 버튼의 기능을 직관적으로 나타내고, 글머리 기호는 리스트에서 각 항목을 구분하여 시각적인 힌트를 제공합니다.</span></p><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;버튼 레이블 왼쪽에 아이콘을 배치하면 사용자는 왼쪽에서 오른쪽으로 정보를 스캐닝할 때 아이콘을 먼저 인식하게 되어, 버튼의 기능을 빠르게 이해할 수 있습니다. 반면, 오른쪽에 배치하면 사용자가 레이블을 먼저 보고 아이콘을 뒤늦게 확인하게 되어, 아이콘이 제공하는 추가 정보를 활용하지 못하게 됩니다.&quot;}]}]}"><span>버튼 레이블 왼쪽에 아이콘을 배치하면 사용자는 왼쪽에서 오른쪽으로 정보를 스캐닝할 때 아이콘을 먼저 인식하게 되어, 버튼의 기능을 빠르게 이해할 수 있습니다. 반면, 오른쪽에 배치하면 사용자가 레이블을 먼저 보고 아이콘을 뒤늦게 확인하게 되어, 아이콘이 제공하는 추가 정보를 활용하지 못하게 됩니다.</span></p><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;또한, 아이콘을 버튼 레이블과 본문 텍스트의 중간에 배치하면 사용자가 아이콘을 먼저 보게 되어 혼란을 초래할 수 있습니다. 이 경우, 아이콘은 버튼의 기능을 설명하기보다 시각적으로 방해 요소로 작용할 수 있습니다. 따라서 아이콘은 버튼 레이블과 정렬하여 배치하는 것이 중요합니다.&quot;}]}]}"><span>또한, 아이콘을 버튼 레이블과 본문 텍스트의 중간에 배치하면 사용자가 아이콘을 먼저 보게 되어 혼란을 초래할 수 있습니다. 이 경우, 아이콘은 버튼의 기능을 설명하기보다 시각적으로 방해 요소로 작용할 수 있습니다. 따라서 아이콘은 버튼 레이블과 정렬하여 배치하는 것이 중요합니다.</span></p><div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;inner-center&quot;,&quot;mobileAlign&quot;:&quot;content-full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/2fEJ/image/lAKzO-83ahbl29pJh9PcrWa2ZXw.jpeg&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;657&quot;,&quot;height&quot;:&quot;434&quot;,&quot;originalName&quot;:&quot;37.jpeg&quot;}"><p><img src="https://img1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/2fEJ/image/lAKzO-83ahbl29pJh9PcrWa2ZXw.jpeg" data-filename="37.jpeg"><span></span></p></div><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;또한, 아이콘은 버튼 레이블의 의미를 보완하거나 강조하는 역할을 해야 하며, 이를 통해 사용자가 버튼의 기능을 명확히 이해할 수 있도록 도와야 합니다. 잘 배치된 아이콘과 레이블은 사용자에게 직관적인 경험을 제공합니다.&quot;}]}]}"><span>또한, 아이콘은 버튼 레이블의 의미를 보완하거나 강조하는 역할을 해야 하며, 이를 통해 사용자가 버튼의 기능을 명확히 이해할 수 있도록 도와야 합니다. 잘 배치된 아이콘과 레이블은 사용자에게 직관적인 경험을 제공합니다.</span></p><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;결론적으로, 아이콘과 글머리 기호는 모두 사용자의 주의를 끌고 정보를 강조하는 중요한 요소입니다. 글머리 기호는 리스트 항목을 효과적으로 구분하고, 아이콘은 버튼의 기능을 명확히 전달합니다. 이 두 요소는 사용자 경험을 향상시키고, 정보를 쉽게 찾고 이해하는 데 큰 도움이 됩니다.&quot;}]}]}"><span>결론적으로, 아이콘과 글머리 기호는 모두 사용자의 주의를 끌고 정보를 강조하는 중요한 요소입니다. 글머리 기호는 리스트 항목을 효과적으로 구분하고, 아이콘은 버튼의 기능을 명확히 전달합니다. 이 두 요소는 사용자 경험을 향상시키고, 정보를 쉽게 찾고 이해하는 데 큰 도움이 됩니다.</span></p><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;위글은 요약문입니다.&quot;}]}">위글은 요약문입니다.</p><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;이 글에 대한 전체 번역 원문(구체적인 사례 등)은 아래 링크를 클릭해주세요~&quot;}]}">이 글에 대한 전체 번역 원문(구체적인 사례 등)은 아래 링크를 클릭해주세요~</p><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;anchor&quot;,&quot;url&quot;:&quot;https://maily.so/uiux/posts/a95cce01&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;https://maily.so/uiux/posts/a95cce01&quot;}],&quot;target&quot;:&quot;_blank&quot;}]}"><a target="_blank" href="https://maily.so/uiux/posts/a95cce01">https://maily.so/uiux/posts/a95cce01</a></p></div></div>

UX 컨설턴트 전민수

Anthony의 「Where to Place Icons Next to Button Labels」 소개하고자 합니다. 아이콘은 버튼레이블의 어느 쪽에 배치해야 하는가(요약문)  아이콘은 리스트 항목의 글머리 기호처럼 작용하여, 사용자가 정보를 더 쉽게 찾고 이해할 수 있도록 돕습니다. 아이콘은 버튼의 기능을 직관적으로 나타내고, 글머리 기호는 리스트에서 각

[UX#23] 아이콘 VS 버튼 레이블의 배치 여부

댓글