<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;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;Anthony의 글 Why Segmented Buttons AreBetter for Sorting 소개하고자 합니다.&quot;}]}]}]}">Anthony의 글 Why Segmented Buttons AreBetter for Sorting 소개하고자 합니다.<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;드롭다운 메뉴와 세그먼티드 버튼 UX 적용 원칙&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;(요약문)&quot;}]}">드롭다운 메뉴와 세그먼티드 버튼 UX 적용 원칙 (요약문)</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;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;사용자가 정보를 쉽게 찾을 수 있도록 도와주는 콘텐츠 분류 옵션은 매우 중요합니다. 그러나 많은 웹사이트에서 드롭다운 메뉴를 사용함으로써 가시성이 낮아지는 문제를 겪고 있습니다. &quot;}]}]}]}">사용자가 정보를 쉽게 찾을 수 있도록 도와주는 콘텐츠 분류 옵션은 매우 중요합니다. 그러나 많은 웹사이트에서 드롭다운 메뉴를 사용함으로써 가시성이 낮아지는 문제를 겪고 있습니다.&nbsp;<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;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;드롭다운 메뉴는 현재 선택된 옵션만 보여주고 나머지는 숨기기 때문에, 사용자는 다른 선택지를 확인하기 어려워 불만을 느낄 수 있습니다. 예를 들어, 특정 카테고리의 상품을 찾을 때 드롭다운 메뉴 대신 모든 옵션을 목록 형태로 보여주면, 사용자는 다양한 선택지를 비교하고 더 나은 결정을 내릴 수 있습니다.&quot;}]}]}]}">드롭다운 메뉴는 현재 선택된 옵션만 보여주고 나머지는 숨기기 때문에, 사용자는 다른 선택지를 확인하기 어려워 불만을 느낄 수 있습니다. 예를 들어, 특정 카테고리의 상품을 찾을 때 드롭다운 메뉴 대신 모든 옵션을 목록 형태로 보여주면, 사용자는 다양한 선택지를 비교하고 더 나은 결정을 내릴 수 있습니다.<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;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;드롭다운 메뉴는 사용자의 작업과 관련이 없는 여러 옵션이 포함될 때 공간을 절약하는 데 유용하지만, 분류 작업에서는 모든 옵션이 사용자가 원하는 정보를 찾는 데 직접적으로 연결됩니다. 이 경우, 가시성을 줄이며 공간을 절약하는 것은 사용자 경험을 저해할 수 있습니다. 드롭다운 메뉴를 클릭하고 선택하기 위해 두 번 클릭하고 한 번 스크롤해야 하므로, 이는 불편함을 초래하고 정보 검색에 소요되는 시간을 늘립니다.&quot;}]}]}]}">드롭다운 메뉴는 사용자의 작업과 관련이 없는 여러 옵션이 포함될 때 공간을 절약하는 데 유용하지만, 분류 작업에서는 모든 옵션이 사용자가 원하는 정보를 찾는 데 직접적으로 연결됩니다. 이 경우, 가시성을 줄이며 공간을 절약하는 것은 사용자 경험을 저해할 수 있습니다. 드롭다운 메뉴를 클릭하고 선택하기 위해 두 번 클릭하고 한 번 스크롤해야 하므로, 이는 불편함을 초래하고 정보 검색에 소요되는 시간을 늘립니다.<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;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;따라서 분류 작업에서는 모든 옵션을 명확하게 보여주는 방식이 더 효과적이며, 사용자에게 더 나은 탐색 경험을 제공해야 합니다. &quot;}]}]}]}">따라서 분류 작업에서는 모든 옵션을 명확하게 보여주는 방식이 더 효과적이며, 사용자에게 더 나은 탐색 경험을 제공해야 합니다.&nbsp;<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;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;세그먼티드 버튼은 이러한 문제를 해결할 수 있는 좋은 대안입니다. 이 버튼은 여러 옵션을 한눈에 보여주어 사용자가 원하는 선택지를 쉽게 확인하고 선택할 수 있게 해줍니다. 사용자는 옵션을 선택하기 위해 한 번만 클릭하면 되므로 매우 편리합니다. &quot;}]}]}]}">세그먼티드 버튼은 이러한 문제를 해결할 수 있는 좋은 대안입니다. 이 버튼은 여러 옵션을 한눈에 보여주어 사용자가 원하는 선택지를 쉽게 확인하고 선택할 수 있게 해줍니다. 사용자는 옵션을 선택하기 위해 한 번만 클릭하면 되므로 매우 편리합니다.&nbsp;<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/vciAjZIefdpWf3meSHsKzCOVAiM.jpeg&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;642&quot;,&quot;height&quot;:&quot;388&quot;,&quot;originalName&quot;:&quot;35.jpeg&quot;}"><img src="https://img1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/2fEJ/image/vciAjZIefdpWf3meSHsKzCOVAiM.jpeg" data-filename="35.jpeg"></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;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;그러나 세그먼티드 버튼은 옵션의 수가 많아질수록 차지하는 가로 공간이 증가하여 화면이 혼잡해질 수 있는 단점이 있습니다.&quot;}]}]}]}">그러나 세그먼티드 버튼은 옵션의 수가 많아질수록 차지하는 가로 공간이 증가하여 화면이 혼잡해질 수 있는 단점이 있습니다.<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;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;세그먼티드 버튼은 높은 가시성을 제공하지만, 옵션 수가 많아지면 화면 공간이 제한될 수 있으므로 적절한 디자인과 레이아웃을 고려해야 합니다. 예를 들어, 옵션을 그룹화하거나 선택 가능한 수를 제한하여 화면을 깔끔하게 유지할 수 있습니다.&quot;}]}]}]}">세그먼티드 버튼은 높은 가시성을 제공하지만, 옵션 수가 많아지면 화면 공간이 제한될 수 있으므로 적절한 디자인과 레이아웃을 고려해야 합니다. 예를 들어, 옵션을 그룹화하거나 선택 가능한 수를 제한하여 화면을 깔끔하게 유지할 수 있습니다.<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;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;결론적으로, 사용자 인터페이스 컨트롤은 사용자 경험에 큰 영향을 미칩니다. 드롭다운 메뉴는 공간을 절약할 수 있지만 가시성을 낮추는 단점이 있고, 세그먼티드 버튼은 높은 가시성을 제공하지만 공간이 제한될 수 있습니다. &quot;}]}]}]}">결론적으로, 사용자 인터페이스 컨트롤은 사용자 경험에 큰 영향을 미칩니다. 드롭다운 메뉴는 공간을 절약할 수 있지만 가시성을 낮추는 단점이 있고, 세그먼티드 버튼은 높은 가시성을 제공하지만 공간이 제한될 수 있습니다.&nbsp;<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;style&quot;:{},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;이 상황에서 여러분은 무엇이 더 중요한지 고민해야 합니다. 공간 절약이 더 우선인지, 아니면 사용자가 정보를 쉽게 볼 수 있는 가시성이 더 중요한지를 고려하여 최적의 사용자 경험을 제공할 수 있는 방향을 찾아야 합니다.&quot;}]}]}]}">이 상황에서 여러분은 무엇이 더 중요한지 고민해야 합니다. 공간 절약이 더 우선인지, 아니면 사용자가 정보를 쉽게 볼 수 있는 가시성이 더 중요한지를 고려하여 최적의 사용자 경험을 제공할 수 있는 방향을 찾아야 합니다.위글은 요약문입니다.이 글에 대한 전체 번역 원문(구체적인 사례 등)은 아래 링크를 클릭해주세요~<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/400ae999&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;https://maily.so/uiux/posts/400ae999&quot;}],&quot;target&quot;:&quot;_blank&quot;}]}"><a target="_blank" href="https://maily.so/uiux/posts/400ae999">https://maily.so/uiux/posts/400ae999</a></div></div>

UX 컨설턴트 전민수

Anthony의 글 Why Segmented Buttons AreBetter for Sorting 소개하고자 합니다.  드롭다운 메뉴와 세그먼티드 버튼 UX 적용 원칙(요약문)  사용자가 정보를 쉽게 찾을 수 있도록 도와주는 콘텐츠 분류 옵션은 매우 중요합니다. 그러나 많은 웹사이트에서 드롭다운 메뉴를 사용함으로써 가시성이 낮아지는 문제를 겪고 있습니다.

[UX#24]드롭다운 메뉴와 세그먼티드 버튼 UX 원칙

댓글