<div id="readability-page-1" class="page"><div><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;좋은 캐러셀 디자인을 위한 가이드 5가지&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;(요약문)&quot;}]}">좋은 캐러셀 디자인을 위한 가이드 5가지 (요약문)</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;캐러셀은 웹사이트의 메인 페이지에서 마케팅 정보를 효과적으로 전달하기 위해 사용되는 디자인 요소로, 주로 \u0027above the fold\u0027 영역에 위치하여 사용자에게 여러 콘텐츠를 한 번에 보여줍니다. 그러나 캐러셀에 대한 부정적인 시각이 존재하며, 연구에 따르면 방문자의 1%만이 캐러셀을 클릭하고, 그 중 84%는 첫 번째 이미지만 선택하는 경향이 있습니다.&quot;}]}]}">캐러셀은 웹사이트의 메인 페이지에서 마케팅 정보를 효과적으로 전달하기 위해 사용되는 디자인 요소로, 주로 'above the fold' 영역에 위치하여 사용자에게 여러 콘텐츠를 한 번에 보여줍니다. 그러나 캐러셀에 대한 부정적인 시각이 존재하며, 연구에 따르면 방문자의 1%만이 캐러셀을 클릭하고, 그 중 84%는 첫 번째 이미지만 선택하는 경향이 있습니다.<div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/2fEJ/image/IvNBAJg_Y26A5UaankaM2m3G2EE.jpeg&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;930&quot;,&quot;height&quot;:&quot;500&quot;,&quot;originalName&quot;:&quot;101.jpeg&quot;}"><img src="https://img1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/2fEJ/image/IvNBAJg_Y26A5UaankaM2m3G2EE.jpeg" data-filename="101.jpeg"></div><h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&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;}]}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}">캐러셀의 장점</h3><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;}]}]}">중요한 콘텐츠를 한눈에 보여줄 수 있음.<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;}]}]}">페이지 상단에 위치해 노출 확률을 높임.<h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&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;}]}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}">캐러셀의 단점</h3><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;}]}]}">사용자가 캐러셀을 지나치기 쉽고, 자동 슬라이드에서도 주목받지 못함.<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;}]}]}">디자인이 비생산적일 수 있음.<h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&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;}]}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}">좋은 캐러셀 디자인 가이드</h3><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;1. 콘텐츠 우선&quot;}]}]}">1. 콘텐츠 우선<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;}]}]}">사용자에게 유용하고 흥미로운 콘텐츠를 제공해야 함.<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;2. 슬라이드 수 제한&quot;}]}]}">2. 슬라이드 수 제한<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;5개 이하의 슬라이드로 제한해 사용자가 쉽게 찾을 수 있도록 해야 함.&quot;}]}]}">5개 이하의 슬라이드로 제한해 사용자가 쉽게 찾을 수 있도록 해야 함.<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;3. 진행률 표시&quot;}]}]}">3. 진행률 표시<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;}]}]}">현재 슬라이드 위치를 명확히 표시해야 함.<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;4. 모바일 최적화&quot;}]}]}">4. 모바일 최적화<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;}]}]}">모바일에서 읽기 쉽도록 콘텐츠 최적화가 필수임.<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;5. 내비게이션 컨트롤&quot;}]}]}">5. 내비게이션 컨트롤<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;}]}]}">명확하고 접근하기 쉬운 내비게이션을 제공해야 함.<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;6. 자동 로테이션 주의&quot;}]}]}">6. 자동 로테이션 주의<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;}]}]}">사용자 통제권을 제공하고, 슬라이드 속도를 적절하게 설정해야 함.<h3 data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&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;}]}],&quot;styleType&quot;:&quot;bold&quot;}],&quot;size&quot;:&quot;h3&quot;}">대안</h3><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;}]}]}">캐러셀의 맥락 부족 문제를 해결하기 위해 ‘영웅 이미지’를 사용하는 것이 효과적일 수 있습니다. 이는 사용자에게 하나의 이미지에 집중하게 하고, 더 나은 시각적 경험을 제공합니다.<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;}]},{&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;}]}]}">위글은&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;text&quot;:&quot;이 글에 대한 &quot;}]},{&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;}]}],&quot;styleType&quot;:&quot;bold&quot;},{&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;}]}],&quot;styleType&quot;:&quot;bold&quot;}]}">이 글에 대한&nbsp;전체 번역 원문은 아래 링크를 클릭해주세요~<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/b55bf1bf&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;https://maily.so/uiux/posts/b55bf1bf&quot;}],&quot;target&quot;:&quot;_blank&quot;}]}"><a target="_blank" href="https://maily.so/uiux/posts/b55bf1bf">https://maily.so/uiux/posts/b55bf1bf</a></div></div>

UX 컨설턴트 전민수

좋은 캐러셀 디자인을 위한 가이드 5가지(요약문)  캐러셀은 웹사이트의 메인 페이지에서 마케팅 정보를 효과적으로 전달하기 위해 사용되는 디자인 요소로, 주로 'above the fold' 영역에 위치하여 사용자에게 여러 콘텐츠를 한 번에 보여줍니다. 그러나 캐러셀에 대한 부정적인 시각이 존재하며, 연구에 따르면 방문자의 1%만이 캐러셀을 클릭하고, 그 중

[UX원칙#4]좋은 캐러셀 디자인을 위한 가이드 5가지

댓글