<div id="readability-page-1" class="page"><div>Nick Babich의 글 Tabs for Mobile UXDesign 소개하고자 합니다.<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;탭(Tabs) UX 설계 14가지 원칙&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;(요약문)&quot;}]}">탭(Tabs) UX 설계 14가지 원칙 (요약문)</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;탭(Tabs) UX 설계의 14가지 원칙은 사용자 경험을 향상시키기 위한 중요한 지침을 제공합니다. 이 원칙들은 탭의 위치, 디자인, 레이블, 상호작용 등 다양한 요소를 포함하고 있습니다.&quot;}]}]}">탭(Tabs) UX 설계의 14가지 원칙은 사용자 경험을 향상시키기 위한 중요한 지침을 제공합니다. 이 원칙들은 탭의 위치, 디자인, 레이블, 상호작용 등 다양한 요소를 포함하고 있습니다.<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;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;원칙 1. 탭 위치&quot;}],&quot;styleType&quot;:&quot;bold&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;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;원칙 2. 활성화 탭 강조&quot;}],&quot;styleType&quot;:&quot;bold&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;현재 선택된 탭을 명확히 표시해 사용자의 방향 감각과 신뢰를 높입니다.&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;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;원칙 3. 선택된 탭 존재&quot;}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;항상 하나의 탭이 선택되어 있어야 정보를 명확히 이해할 수 있습니다.&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;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;원칙 4. 이해하기 쉬운 레이블&quot;}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;탭 레이블은 직관적이고 사용자 중심으로 설정되어야 합니다.&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;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;원칙 5. 의미 있는 텍스트 레이블&quot;}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;간결하고 명확한 레이블은 탐색을 쉽게 합니다.&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;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;원칙 6. 일관된 형식&quot;}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;모든 탭은 아이콘 또는 텍스트 중 하나의 형식으로 통일해야 합니다.&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;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;원칙 7. 단일 줄 사용&quot;}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;탭은 여러 줄로 겹치지 않게 배치하여 시각적 혼잡을 피해야 합니다.&quot;}]}]}">원칙 7. 단일 줄 사용 탭은 여러 줄로 겹치지 않게 배치하여 시각적 혼잡을 피해야 합니다.<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;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;원칙 8. 탭 속의 탭 금지&quot;}],&quot;styleType&quot;:&quot;bold&quot;}]}]}">원칙 8. 탭 속의 탭 금지<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;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;원칙 9. 충분한 크기&quot;}],&quot;styleType&quot;:&quot;bold&quot;}]}]}">원칙 9. 충분한 크기<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;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;원칙 10. 선택되지 않은 탭 가시성&quot;}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;사용자가 모든 탭을 인식할 수 있도록 해야 합니다.&quot;}]}]}">원칙 10. 선택되지 않은 탭 가시성 사용자가 모든 탭을 인식할 수 있도록 해야 합니다.<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;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;원칙 11. 탭 숨기기&quot;}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;스크롤 방향에 따라 탭을 숨겨 화면 공간을 효율적으로 활용합니다.&quot;}]}]}">원칙 11. 탭 숨기기 스크롤 방향에 따라 탭을 숨겨 화면 공간을 효율적으로 활용합니다.<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;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;원칙 12. 슬라이드 애니메이션&quot;}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;탭 전환 시 애니메이션을 사용하여 사용자 경험을 향상시킵니다.&quot;}]}]}">원칙 12. 슬라이드 애니메이션 탭 전환 시 애니메이션을 사용하여 사용자 경험을 향상시킵니다.<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;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;원칙 13. 스와이프 제스처&quot;}],&quot;styleType&quot;:&quot;bold&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;손쉬운 탐색을 위해 스와이프 제스처를 지원합니다.&quot;}]}]}">원칙 13. 스와이프 제스처 손쉬운 탐색을 위해 스와이프 제스처를 지원합니다.<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;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;원칙 14. 일관성 유지&quot;}],&quot;styleType&quot;:&quot;bold&quot;}]}]}">원칙 14. 일관성 유지<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;}]}]}">이 원칙들을 따르면 사용자에게 직관적이고 효율적인 앱 경험을 제공할 수 있습니다.<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;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;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/02bfd13b&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;https://maily.so/uiux/posts/02bfd13b&quot;}],&quot;target&quot;:&quot;_blank&quot;}]}"><a target="_blank" href="https://maily.so/uiux/posts/02bfd13b">https://maily.so/uiux/posts/02bfd13b</a></div></div>

UX 컨설턴트 전민수

Nick Babich의 글 Tabs for Mobile UXDesign 소개하고자 합니다. 탭(Tabs) UX 설계 14가지 원칙(요약문)  탭(Tabs) UX 설계의 14가지 원칙은 사용자 경험을 향상시키기 위한 중요한 지침을 제공합니다. 이 원칙들은 탭의 위치, 디자인, 레이블, 상호작용 등 다양한 요소를 포함하고 있습니다.  원칙 1. 탭 위치 탭은

[UX원칙#13]탭(Tabs) UX 설계 14가지 원칙

댓글