탭 인터페이스의 예시와 제작 방법

홈 » Python » 탭 인터페이스의 예시와 제작 방법

탭 인터페이스는 현대 소프트웨어에서 가장 익숙한 탐색 패턴 중 하나입니다.모바일 앱과 웹 대시보드부터 복잡한 개발 도구에 이르기까지, 탭은 사용자가 동일한 창 내에서 여러 섹션이나 문서 사이를 이동할 수 있도록 하여 깔끔하고 빠르게 정보를 훑어볼 수 있으며 학습하기 쉬운 환경을 제공합니다. 잘 설계된 탭은 화면의 복잡함을 크게 줄이고 현재 어떤 콘텐츠가 표시되는지 명확하게 보여줍니다.

단순해 보이는 라벨 줄 뒤에는 수많은 디자인 결정과 기술적 선택 사항들이 숨어 있습니다.고정 또는 스크롤 가능한 탭, 아이콘만 있는 레이아웃, 페이지 빌더의 중첩 탭 시스템, 프로그레시브 웹 앱(PWA)의 문서 스타일 탭 창, Bootstrap이나 Xajax와 같은 프레임워크로 구축한 사용자 지정 탭 위젯 등 다양한 탭 유형을 이 가이드에서 살펴보겠습니다. 탭 인터페이스 예시 또한 안드로이드, 웹 UI, PWA 매니페스트 및 기존 PHP + Ajax 솔루션의 모든 아이디어를 통합하여 구현 접근 방식을 제시합니다.

TabLayout과 ViewPager를 사용한 안드로이드 탭 인터페이스

안드로이드에서 머티리얼 디자인의 탭 내비게이션을 구현하는 핵심 요소는 TabLayout 위젯입니다.탭은 종종 ViewPager(또는 최신 프로젝트에서는 ViewPager2)와 함께 사용됩니다. Google의 Material Design 팀은 탭을 매우 간단하게 설명합니다. 탭을 사용하면 동일한 액티비티 내에서 다양한 뷰를 쉽게 탐색하고 전환할 수 있습니다.

TabLayout은 탭을 가로로 배열하고 고정 모드와 스크롤 모드라는 두 가지 주요 작동 모드를 제공합니다.고정 모드에서는 모든 탭이 동시에 표시되며 사용 가능한 너비가 탭들 사이에 분할됩니다. 이는 WhatsApp과 같은 앱에서 사용되는 방식인데, WhatsApp에서는 몇 개의 개별 섹션이 항상 한 번의 탭으로 접근할 수 있는 위치에 있고 탭들이 전체 행을 채웁니다.

스크롤 가능한 탭은 섹션 수 또는 레이블 길이가 화면 너비를 초과할 때 사용됩니다.이 구성에서는 사용자가 탭 바를 가로로 스와이프하여 더 많은 옵션을 표시할 수 있습니다. 콘텐츠 카테고리가 단일 화면에 모두 담을 수 있는 양을 초과하는 경우 스크롤 가능한 탭 레이아웃의 좋은 예시로 구글의 뉴스 및 날씨 앱을 들 수 있습니다.

TabLayout의 각 탭은 일반적으로 ViewPager 내부에 표시되는 Fragment에 매핑됩니다.사용자가 탭을 탭하면 TabLayout의 선택 상태가 업데이트되고 ViewPager는 해당 프래그먼트로 이동합니다. 마찬가지로 사용자가 페이지 사이를 스와이프하면 선택된 탭 표시기가 현재 보이는 프래그먼트를 따라 이동합니다. 이러한 긴밀한 연결은 일반적으로 다음과 같은 방식으로 구현됩니다. setupWithViewPager()이 기능은 탭을 자동으로 생성하고 스크롤 및 클릭 이벤트에 대한 리스너를 연결합니다.

소재 탭에는 텍스트, 아이콘 또는 둘 다를 표시할 수 있습니다.안드로이드용 트위터와 같은 일부 앱은 레이블 대신 알아보기 쉬운 아이콘을 많이 사용하는데, 이는 공간을 절약하고 사용자가 각 기호의 의미를 이해하면 더 빠르게 내용을 파악할 수 있도록 해줍니다. TabLayout은 XML로 정의하든 프로그래밍 방식으로 설정하든 이러한 모든 옵션을 지원합니다.

안드로이드 기본 탭 인터페이스를 단계별로 만드는 방법

Android Studio에서 간단한 탭 UI를 처음부터 구축하려면 일반적으로 빈 액티비티부터 시작합니다.흔히 다음과 같이 불립니다. MainActivity그다음에는 세 가지 핵심 요소, 즉 몇 개의 프래그먼트, 레이아웃 XML의 TabLayout, 그리고 페이저 어댑터에서 관리하는 ViewPager를 소개합니다.

첫 번째 구성 요소는 탭당 하나씩 있는 소수의 Fragment 클래스 세트입니다.예를 들어, 다음과 같이 정의할 수 있습니다. FragmentOne, FragmentTwo FragmentThree각각 자체 XML 레이아웃을 확장합니다(예: fragment_one.xml각 프래그먼트의 코드는 간단합니다. 뷰를 인플레이트하고, 필요한 위젯을 바인딩하고, 해당 탭에 맞는 콘텐츠를 제공하면 됩니다.

다음으로 메인 액티비티 레이아웃에 TabLayout과 ViewPager를 추가합니다.. 에 activity_main.xml 당신은 선언합니다 TabLayout ID가 다음과 같은 요소 tab_layout 및 ViewPager 바로 아래에 있습니다. 다음과 같은 속성을 가지고 있습니다. app:tabMode app:tabGravity 탭이 고정형인지 스크롤 가능형인지, 그리고 사용 가능한 너비를 채우도록 늘어날지 여부를 제어할 수 있습니다. 설정 tabMode="fixed" tabGravity="fill" 탭들이 바 전체에 고르게 분산되므로, 특히 태블릿과 같은 넓은 화면에서 그 효과가 두드러집니다.

탭 스타일 지정은 일반적으로 TabLayout에 대한 사용자 지정 스타일 참조를 사용하여 수행됩니다.다음과 같은 스타일을 통해 @style/CustomTabLayout표시기 색상과 같은 항목을 정의할 수 있습니다.tabIndicatorColor), 표시기 높이 (tabIndicatorHeight선택 및 선택되지 않은 상태에 대한 텍스트 색상( )tabTextColor tabSelectedTextColor). 동일한 속성은 다음과 같은 메서드를 사용하여 프로그래밍 방식으로도 설정할 수 있습니다. setSelectedTabIndicatorColor() or setTabTextColors()하지만 디자인을 XML에 집중시키면 외관의 일관성을 유지하기가 더 쉬워집니다.

레이아웃을 정의한 후에는 각 탭에 어떤 프래그먼트가 표시될지 제어하는 ​​페이저 어댑터를 연결합니다.일반적인 구현은 확장합니다. FragmentPagerAdapter (또는 FragmentStatePagerAdapter 또는 새로운 FragmentStateAdapter ViewPager2의 경우) 세 가지 메서드를 재정의합니다. getItem() 특정 위치에 필요한 조각을 제공하기 위해, getCount() 페이지 수가 몇 개인지 보고하기 위해, getPageTitle() 각 탭에 대한 레이블 텍스트를 전달합니다. "탭 항목 1"과 같은 제목의 첫 번째 탭이 선택되면, getItem() 돌아올거야. FragmentOne레이블을 콘텐츠와 연결합니다.

이 활동에서는 모든 요소들이 하나로 어우러집니다. onCreate() 방법거기서 TabLayout과 ViewPager에 대한 참조를 가져옵니다. activity_main.xmlFragmentManager를 사용하여 어댑터를 생성하고 ViewPager에 설정합니다. 그런 다음 호출합니다. tabLayout.setupWithViewPager(viewPager) 배선을 완료하고 어댑터의 각 항목에 대한 탭을 생성하며 사용자 상호 작용을 동기화합니다. 페이지를 스와이프하면 선택한 탭이 업데이트되고 탭을 탭하면 페이저가 오른쪽 프래그먼트로 스크롤됩니다.

사용자 동작을 더욱 세밀하게 제어해야 하는 경우, 다음을 첨부할 수 있습니다. OnTabSelectedListener이 리스너는 세 가지 콜백을 제공합니다. onTabSelected() 탭이 선택되면, onTabUnselected() 초점을 잃으면, onTabReselected() 사용자가 이미 활성화된 탭을 탭할 때 발생합니다. 이러한 후크는 탭이 실제로 표시될 때만 추가 데이터를 로드하거나 포커스가 변경될 때 미묘한 애니메이션을 트리거하는 데 이상적입니다.

스크롤 가능한 탭과 고정 탭 비교 및 ​​텍스트 대신 아이콘 사용

머티리얼 디자인은 고정 탭과 스크롤 탭을 명확하게 구분하며, 각각에 이상적인 사용 사례가 있습니다.고정 탭은 사용자가 나란히 비교하고 싶어하는 짧은 레이블의 수가 적을 때 권장됩니다. 특히 방대한 페이지 목록을 표시하는 것보다 명확성과 안정성이 중요한 터치스크린의 기본 탐색에 적합합니다.

스크롤 가능한 탭은 레이블이 길거나 탭이 4개 이상 필요할 때 유용합니다.긴 이름을 고정된 탭 레이아웃에 억지로 넣으려고 하면 안드로이드는 레이블을 여러 줄로 줄 바꿈하거나 심지어 잘라버리기까지 하는데, 이는 보기에 지저분할 뿐만 아니라 사용성도 떨어뜨립니다. 스크롤 모드를 활성화하면 사용자는 탭 스트립을 좌우로 부드럽게 밀어서 각 레이블이 읽기 쉬운 충분한 공간을 확보할 수 있습니다.

이러한 모드 간 전환은 XML을 통해 또는 app:tabMode 또는 프로그래밍 방식으로 setTabMode(). 통과 TabLayout.MODE_FIXED 고정 탭을 생성하는 반면 TabLayout.MODE_SCROLLABLE 가로로 스크롤 가능한 목록을 만듭니다. 카테고리가 4개 이상 예상되는 경우 스크롤 가능한 구성을 사용하는 것이 좋다는 가이드라인을 기억해 두는 것이 좋습니다.

또 다른 효과적인 방법은 탭 레이블에 텍스트 대신 아이콘을 사용하는 것입니다.전화함으로써 getTabAt(index) TabLayout 인스턴스에서 호출합니다. setIcon()특정 탭에 드로어블을 할당할 수 있습니다. 이렇게 하면 특히 아이콘이 보편적으로 이해되는 경우 매우 간결한 탭 바를 만들 수 있습니다. 여전히 재정의하는 경우 getPageTitle() 어댑터에서 텍스트와 아이콘을 조합할 수 있습니다. 해당 재정의를 생략하면 아이콘만 있는 탭이 표시됩니다.

탭 동작은 XML 파일을 건드리지 않고도 매우 다양하게 설정할 수 있습니다.탭을 명시적으로 만들 수 있습니다. newTab()~에 의존하기보다는 setupWithViewPager()또한 탭 모드를 즉시 전환하거나, 리스너를 통해 선택에 반응하거나, 단순한 레이블과 아이콘보다 더 정교한 디자인이 필요한 경우 사용자 지정 탭 보기를 삽입할 수도 있습니다.

Android Studio 템플릿을 사용하여 탭이 있는 액티비티를 구성합니다.

탭 인터페이스를 처음부터 직접 작성하는 것은 모든 요소가 어떻게 연결되는지 이해하는 데 매우 유용하지만, Android Studio를 사용하면 몇 초 만에 작동하는 환경을 만들 수 있습니다.IDE에는 일반적인 패턴에 대한 템플릿이 포함되어 있으며, 그중에는 Java와 Kotlin 모두에서 사용할 수 있는 "탭형 액티비티" 템플릿도 있습니다.

새 프로젝트를 시작할 때 애플리케이션 이름과 대상 기기를 선택한 후 활동 목록에서 "탭형 활동"을 선택할 수 있습니다.마지막 설정 대화 상자에는 "액션 바 탭(ViewPager 포함)"과 같은 탐색 스타일을 선택하는 옵션이 있습니다. 확인을 누르면 Android Studio에서 TabLayout, ViewPager 및 예제 프래그먼트가 연결된 액티비티를 생성하므로 바로 실행하고 살펴볼 수 있습니다.

이러한 내장 템플릿은 프로토타입 및 간단한 앱 개발에 매우 ​​유용합니다.기본 코드, 예제 레이아웃 및 연결 로직을 설정해 두었으므로 실제 콘텐츠와 특정 동작 구현에 집중할 수 있습니다. 기존 프로젝트에서는 파일 메뉴에서 새 "탭 활동"을 삽입하고 동일한 단계를 따르면 같은 유형의 활동을 추가할 수 있습니다.

복잡한 탐색 기능이나 매우 독특한 시각적 언어를 사용하는 좀 더 야심찬 앱의 경우, 타사 템플릿을 사용하면 개발 속도를 더욱 높일 수 있습니다.Envato와 같은 마켓플레이스에서는 세련된 탭 인터페이스와 머티리얼 디자인 패턴이 기본적으로 적용된 안드로이드 앱 템플릿을 제공합니다. 이러한 템플릿 키트는 표준 내비게이션을 처음부터 다시 만드는 대신 고유한 기능 구현에 집중하고 싶을 때 특히 유용합니다.

Elementor에서 고급 웹 레이아웃을 위한 중첩 탭

웹에서는 Elementor와 같은 페이지 빌더가 탭 인터페이스 개념을 드래그 앤 드롭 디자인 워크플로에 도입합니다.특히 유연한 패턴 중 하나는 중첩 탭입니다. 탭 안에 또 다른 탭이 존재하므로 페이지를 복잡하게 만들지 않고도 관련 콘텐츠를 심층적으로 구조화하면서도 간결한 레이아웃으로 그룹화할 수 있습니다.

중첩 탭을 디자인할 때 가장 먼저 해야 할 일은 일관된 시각적 언어를 정의하는 것입니다.예를 들어, 탭에는 대표 이미지, 장소나 계획을 요약하는 제목, 간단한 설명 텍스트, 그리고 버튼이 포함될 수 있습니다. 이러한 구조가 설정되면, 각 탭의 레이아웃을 다르게 구성할 수 있습니다. 예를 들어, 어떤 탭은 세로 블록 하나로, 다른 탭은 두 열로, 또 다른 탭은 세 줄로 배치할 수 있습니다. 이렇게 하면서도 동일한 요소를 유지하여 인터페이스의 통일성을 확보할 수 있습니다.

Elementor의 중첩 탭을 사용하면 일반 텍스트뿐만 아니라 원하는 위젯을 자유롭게 추가할 수 있습니다.각 탭에 월별, 반기별, 연간 요금제를 표시하는 가격표를 삽입하거나, 루프 그리드와 결합하여 블로그 게시물, 제품 또는 포트폴리오 항목을 카테고리별로 동적으로 필터링할 수 있습니다. 카테고리와 탭을 연동하면 방문자는 현재 페이지를 벗어나지 않고도 관심 있는 정보를 빠르게 찾아볼 수 있습니다.

탭은 사용자가 프로세스나 스토리를 따라갈 수 있도록 안내하는 강력한 도구이기도 합니다.한 가지 예로, 설정 흐름에서 단계별로 4개 정도의 탭을 사용할 수 있습니다. 각 탭에는 탭 섹션에 아이콘, 단계 번호, 간단한 레이블이 표시되고, 패널 콘텐츠에는 해당 단계에 맞는 고유한 텍스트와 이미지가 포함됩니다. 이미지와 요소에 모션 효과나 미묘한 애니메이션을 추가하면 정적인 페이지보다 훨씬 더 몰입감 있는 안내형 스토리텔링 경험을 만들 수 있습니다.

보다 고급스러운 대시보드나 관리자 스타일 보기를 구현하기 위해 디자이너들은 때때로 한 단계 더 나아가 중첩된 탭 안에 또 다른 중첩 탭을 사용하기도 합니다.왼쪽 측면에 세로로 배열된 탭들이 주요 섹션 역할을 하고, 각 섹션 안에는 하위 보기를 위한 가로 방향의 보조 탭들이 있다고 상상해 보세요. 각 탭의 CSS ID를 사용하여 레이블을 회전시키거나 세로 탐색 메뉴를 압축하는 등의 사용자 지정 CSS를 조금만 활용하면 Elementor 컨테이너와 루프 그리드만으로 매우 기능적인 탭형 컨트롤 패널을 만들 수 있습니다.

핵심은 중첩 탭이 콘텐츠 구조를 구성하는 데 거의 무한한 가능성을 제공한다는 것입니다.제품 소개, 가격 옵션, 포트폴리오 또는 분석 대시보드를 구성하든 관계없이 일관된 디자인 언어와 유연한 레이아웃의 조합을 통해 방대한 양의 정보를 직관적인 탐색이 가능한 공간에 담을 수 있습니다.

프로그레시브 웹 앱(PWA)의 탭 형식 애플리케이션 모드

탭 인터페이스는 웹 페이지 내부에만 존재하는 것이 아닙니다. 프로그레시브 웹 앱(PWA)이 독립 실행형 창으로 실행되는 방식에도 통합될 수 있습니다.ChromeOS에서는 "탭 애플리케이션 모드"라는 특별한 기능을 통해 PWA가 네이티브 편집기나 IDE에서 볼 수 있는 것과 유사한 문서 스타일의 탭 스트립을 표시할 수 있습니다.

PWA는 여러 가지 표시 모드를 지원하며, 이러한 모드는 제어 방식을 통해 관리할 수 있습니다. display 웹 애플리케이션 매니페스트의 멤버. 옵션에는 다음이 포함됩니다. fullscreen, standalone, minimal-ui browser특정 모드가 지원되지 않을 경우 브라우저는 정의된 순서에 따라 대체 모드를 사용합니다. 더욱 세밀한 제어를 위해서는 다음 옵션을 사용할 수 있습니다. display_override 개발자가 사용자 지정 대체 순서를 지정할 수 있도록 하는 속성입니다.

새로운 탭형 애플리케이션 모드는 PWA(프로그레시브 웹 애플리케이션)에 내장된 탭형 문서 인터페이스(TDI)를 제공하여 기존의 공백을 메웁니다.사용자 지정 HTML과 JavaScript를 사용하여 페이지 내부에 탭을 만드는 대신, 앱은 시스템에 요청하여 전용 PWA 창 내의 실제 최상위 탭에 여러 문서 또는 뷰를 호스팅할 수 있습니다. 이는 다음과 다릅니다. display: browser이는 앱을 일반 브라우저 탭에서 전체 브라우저 UI와 함께 열어주는 기능입니다.

이 모드의 일반적인 사용 사례로는 생산성 앱, 커뮤니케이션 도구 및 독서 환경 등이 있습니다.코드 편집기 PWA는 여러 파일을 별도의 탭에서 열 수 있고, 채팅 클라이언트는 방이나 채널별로 탭을 제공하며, 읽기 앱은 기사 링크를 새 애플리케이션 탭에서 열 수 있습니다. 이 모든 기능은 일반 브라우저를 어지럽히지 않고 같은 창 안에 깔끔하게 유지됩니다.

이 내장 탭 모드와 개발자가 만든 사용자 지정 탭 UI 사이에는 중요한 차이점이 있습니다.시스템 수준 탭은 많은 문서를 원활하게 처리하고, 리소스 격리의 이점을 누리며, 탐색 기록, "이 페이지 링크 복사", 현재 탭에서 화면 이동, 활성 문서를 일반 브라우저 창에서 열기 등의 브라우저 기능과 긴밀하게 통합될 수 있습니다. 페이지 내에서 탭을 단순히 시뮬레이션하는 경우에는 이러한 기능들이 외부 셸에만 적용될 뿐, 각 하위 뷰에는 적용되지 않습니다.

PWA 탭 모드 구성 방법

PWA에서 탭 모드를 활성화하려면 매니페스트에서 적절한 설정을 해야 합니다. display_override 체인최소 구성에는 다음 사항이 포함될 수 있습니다. "display": "standalone" "display_override": 즉, 브라우저는 가능하면 탭으로 구분된 앱 창을 선호하고, 그렇지 않으면 표준 독립 실행형 창으로 전환해야 합니다.

그 외에도 tab_strip 멤버를 사용하면 앱 탭 바의 동작을 사용자 지정할 수 있습니다.이 객체는 두 개의 선택적 하위 속성을 정의할 수 있습니다. home_tab new_tab_button생략하면 tab_strip 기본적으로 브라우저는 앱의 시작 URL을 기반으로 새 탭을 생성하는 동작을 제공합니다.

홈 탭 개념은 특히 중요합니다.이 탭은 앱 창이 열려 있는 동안 항상 표시되어야 하는 고정 탭이며, 정의된 범위를 벗어나서는 안 됩니다. 이 홈 탭 내에서 클릭한 링크는 새 애플리케이션 탭에서 열려야 합니다. 이 설정은 다음을 통해 구성할 수 있습니다. home_tab.scope_patterns이는 URL 패턴 목록(대개 간단한 경로명)입니다. "/" or "/index.html") 매니페스트 URL을 기준으로 합니다.

The new_tab_button 이 항목은 사용자 인터페이스의 "새 탭" 기능이 어떻게 작동하는지 설명합니다.그것은 하나를 가지고 있습니다. url 사용자가 버튼을 클릭했을 때 열릴 페이지를 지정하는 멤버로, 일반적으로 앱 범위 내에 있는 요소입니다. "/create"만약 해당 URL이 홈 탭의 범위에 속한다면, 앱은 홈 화면에서 탐색이 이루어진다는 전제하에 별도의 "새 탭" 컨트롤을 전혀 표시하지 않습니다.

탭으로 구분된 앱 창을 연결하는 매니페스트 예시는 (개념적으로) 다음과 같습니다.: 이름을 정의합니다. start_url, display 로 설정 standalone, display_override 포함 "tabbed"은 home_tab 범위는 다음과 같습니다. / /index.html및 new_tab_button 다음과 같이 구성됩니다 "/create" URL. 이러한 설정을 통해 사용자는 항상 홈 탭을 볼 수 있을 뿐 아니라 한 번의 클릭으로 추가 문서를 열 수 있습니다.

앱은 실행 중에 탭 모드로 실행 중인지 여부를 감지할 수도 있습니다.. 사용 display-mode 미디어 기능을 구현하려면 다음과 같은 CSS 블록을 작성할 수 있습니다. @media (display-mode: tabbed) 스타일을 세밀하게 조정하거나 사용하려면 window.matchMedia('(display-mode: tabbed)').matches 탭 모드가 활성화되어 있는지 확인하고 그에 따라 UI 동작을 조정하는 JavaScript 코드입니다.

마지막으로, Launch Handler API와의 흥미로운 상호 작용이 있습니다.탭형 PWA가 설정될 때 "client_mode": "navigate-new" 앱 실행 구성에서, 여러 개의 창을 생성하는 대신 기존 앱 창 내의 새 탭으로 앱을 실행할 수 있습니다. 이렇게 하면 사용자의 작업 공간이 깔끔하게 유지되고 탭 중심의 단일 애플리케이션 환경이라는 개념이 강화됩니다.

PHP, Ajax 및 Xajax를 사용하여 사용자 지정 탭 탐색 기능 구축

PWA에 시스템 수준 탭 기능이 도입되기 훨씬 전부터 웹 개발자들은 HTML, CSS, JavaScript 및 서버 측 코드를 사용하여 자체적인 탭 탐색 구성 요소를 만들어 왔습니다.고전적인 접근 방식 중 하나는 PHP와 Xajax 프레임워크를 함께 사용하여 탭 콘텐츠를 비동식으로 로드하고 페이지를 완전히 새로 고치지 않고 업데이트하는 것입니다.

이러한 예시의 HTML 구조는 매우 간단합니다.포장지 <div> 다음과 같은 등급을 지닙니다. pestanas 그리고 그 안에는 <ul> 이 포함되어 있습니다 <li> 각 탭에 대한 요소입니다. 각 목록 항목에는 고유한 ID(예: )가 있습니다. pestana0, pestana1, pestana2) 그리고 활성 또는 비활성 여부를 나타내는 CSS 클래스가 있습니다. 이러한 목록 항목 내의 앵커 태그는 Xajax에서 생성된 JavaScript 함수를 호출합니다. 예를 들어, javascript:void(xajax_cambia_contenido(0))탭 인덱스를 서버로 전달합니다.

탭 목록 아래에는 탭 본문 콘텐츠를 위한 전용 컨테이너가 있습니다., 종종 <div> ID가 다음과 같은 경우 cuerpopestanas사용자가 탭을 클릭하면 Ajax 호출을 통해 해당 HTML 조각을 가져와 콘텐츠 영역에 삽입합니다. 페이지 자체는 다시 로드되지 않고, 콘텐츠 컨테이너 내부의 HTML만 변경됩니다.

CSS는 탭의 모양과 느낌을 상호작용 가능하게 만드는 데 핵심적인 역할을 합니다.두 가지 핵심 클래스를 정의할 수 있습니다. 하나는 비활성 탭용이고 (예를 들어) li.pestanainactiva) 그리고 선택한 탭에 대한 또 다른 (예: li.pestanaseleccionada스타일 차이(배경색, 테두리, 글꼴 스타일)를 통해 사용자는 어떤 탭이 활성화되어 있는지 명확하게 알 수 있습니다. 추가 규칙을 적용하여 특정 링크 색상을 지정하거나 텍스트 장식을 제거함으로써 레이블이 원하는 시각적 아이덴티티와 일치하도록 할 수 있습니다.

서버 측에서는 다음과 같은 PHP 함수가 실행됩니다. cambia_contenido() 대응을 조율합니다이 함수는 탭 인덱스를 매개변수로 받아 생성합니다. xajaxResponse 객체를 생성하고 PHP 문자열 배열에서 일치하는 내용을 찾습니다. 그런 다음 사용합니다. addAssign() 페이지를 업데이트하려면: 한 번의 호출로 설정됩니다. innerHTML of cuerpopestanas 선택된 텍스트에 대해 다른 텍스트가 변경됩니다. className 클릭한 탭은 "선택됨" 스타일로 변경되고, 나머지 탭은 반복문을 통해 "비활성" 클래스로 되돌려집니다.

이 패턴은 콘텐츠 출처에 대해 유연합니다.배열에 텍스트 문자열을 하드코딩하는 대신 템플릿에서 HTML을 조합하거나, 데이터베이스에서 레코드를 가져오거나, 폼과 대화형 위젯을 동적으로 구성할 수 있습니다. 클라이언트 측에서는 이러한 작업에 신경 쓸 필요 없이 사용자가 탭을 전환할 때 탭 본문에 표시할 업데이트된 마크업만 수신하면 됩니다.

초기화는 간단한 자바스크립트 코드로 처리됩니다.전화함으로써 xajax_cambia_contenido(0) on window.onload페이지는 자동으로 첫 번째 탭을 선택하고 DOM이 준비되는 즉시 해당 콘텐츠를 로드합니다. 따라서 원래 HTML에 본문 콘텐츠를 하드코딩할 필요가 없으며, 탭 시스템은 처음부터 완전히 Ajax에 의해 구동됩니다.

모바일 탭바 디자인 모범 사례

모바일 환경에서 하단 탭 바는 가장 중요한 내비게이션 요소 중 하나이므로 세심한 주의를 기울여야 합니다.복잡하거나 일관성이 없는 탭 바는 사용자를 빠르게 혼란스럽게 만들 수 있으며, 특히 모든 픽셀이 중요한 작은 화면에서는 더욱 그렇습니다.

첫 번째 지침 중 하나는 탭 표시줄에 표시되는 항목 수를 제한하는 것입니다.아이콘은 최대 4~5개 정도가 적당합니다. 그 이상으로 늘리면 터치 영역과 레이블이 너무 작아져 정확하게 누르기 어렵고 해석하기도 힘들어집니다. 더 많은 탐색 옵션이 정말 필요하다면 보조 메뉴나 서랍형 메뉴와 같은 다른 방식을 고려해 보세요.

아이콘 선택 또한 매우 중요합니다.각 아이콘은 해당 섹션의 주요 목적을 명확하게 전달하고 즉시 알아볼 수 있어야 합니다. 의미를 명확히 하기 위해 텍스트 레이블을 최소한으로 사용할 수 있지만, 아이콘이 잘 선택되고 플랫폼 규칙에 부합한다면 사용자는 아이콘을 빠르게 익히고 시각적인 요소에만 의존하게 될 것입니다.

상태 표시는 명확해야 합니다.활성화된 탭을 강조하기 위해 색상, 모양 또는 크기 변경을 활용하세요. 예를 들어, 색상으로 강조하거나, 윤곽선 대신 채워진 아이콘을 사용하거나, 크기를 미묘하게 키우는 등의 방법을 사용할 수 있습니다. 이렇게 하면 사용자가 현재 보고 있는 섹션을 명확하게 알 수 있습니다. 동시에, 탭 바에 알림 배지나 숫자 카운터를 직접 표시하는 것은 시각적 혼란을 야기하고 탐색을 방해할 수 있으므로 일반적으로 피하는 것이 좋습니다.

배치와 꾸준한 노력 또한 매우 중요합니다.탭 바는 화면 하단에 위치해야 하며, 세로 및 가로 방향 모두에서 엄지손가락으로 쉽게 접근할 수 있도록 항상 눈에 잘 띄게 배치해야 합니다. 키보드, 대화 상자 또는 플로팅 액션 버튼 뒤에 숨기거나 탭을 가로챌 수 있는 다른 구성 요소로 겹치지 않도록 해야 합니다. 탭 바를 안정적으로 유지하면 손가락 움직임에 익숙해지고 예측 가능한 탐색이 가능해집니다.

Bootstrap, Bootbox.js 및 Font Awesome을 활용한 웹 탭 UI 디자인

기존 웹 프로젝트의 경우, Bootstrap 3과 같은 프레임워크는 스타일을 지정하고 쉽게 확장할 수 있는 기본 탭 구성 요소를 제공합니다. (참고) 웹사이트를 처음부터 만드는 방법동일한 툴킷으로 버튼, 드롭다운, 패널 및 모달을 제공하여 탭이 디자인의 나머지 부분과 자연스럽게 어우러지는 일관된 인터페이스를 쉽게 구성할 수 있습니다.

Bootstrap의 내비게이션 구성 요소에는 가로 탭 스트립을 만드는 데 필요한 마크업과 클래스가 미리 포함되어 있습니다.표준 네비게이션 클래스와 탭별 클래스를 결합하면 최소한의 JavaScript 코드로 콘텐츠 패널 간 전환이 가능합니다. 모든 요소가 동일한 Bootstrap 스타일링 시스템을 공유하므로 탭은 사이트 전체의 메뉴, 패널 및 폼과 자동으로 정렬됩니다.

Bootstrap의 디자인에 맞춰 알림 및 확인 메시지를 처리하기 위해 많은 개발자들이 Bootbox.js를 사용합니다.이 작은 라이브러리는 Bootstrap 스타일의 모달을 편리한 JavaScript API로 감싸주므로, 사용자가 탭을 전환하거나, 저장되지 않은 뷰를 닫으려고 하거나, 잠재적으로 위험한 작업을 실행할 때 확인 대화 상자나 경고를 표시할 수 있습니다. 이 모든 작업을 CSS 프레임워크에서 확립된 시각적 일관성을 유지하면서 수행할 수 있습니다.

아이콘은 주로 Font Awesome을 사용하여 제작됩니다.이 방대한 아이콘 세트는 Bootstrap과 완벽하게 통합되어 탭 레이블이나 콘텐츠 영역 내에서 사용할 수 있는 다양한 심볼을 제공합니다. 홈, 설정, 메시지, 파일 등에 필요한 일반적인 아이콘부터 특수한 글리프까지, Font Awesome을 사용하면 매번 맞춤 이미지를 디자인할 필요 없이 의미를 효과적으로 전달할 수 있습니다.

Bootstrap의 구조적 구성 요소, Bootbox.js 모달 및 Font Awesome 아이콘을 결합합니다.이를 통해 세련되고 일관성 있는 풍부한 탭 인터페이스를 구축할 수 있습니다. 탭, 알림 및 아이콘이 모두 동일한 디자인 언어를 공유하므로 사용자 경험이 서로 어울리지 않는 요소들을 짜깁기한 것처럼 보이지 않고 의도적으로 구성된 것처럼 느껴집니다.

안드로이드, 웹, PWA, PHP 기반 사이트 등 다양한 환경에서 탭 인터페이스는 단일 프레임에 여러 보기 또는 문서를 정리하는 데 여전히 신뢰할 수 있는 방법입니다.Material Design의 TabLayout과 ViewPager를 사용하든, Elementor의 중첩 탭을 사용하든, PWA를 위한 ChromeOS 탭 모드를 사용하든, Xajax와 Bootstrap을 활용한 맞춤 솔루션을 사용하든, 핵심 목표는 동일합니다. 바로 탐색을 단순하게 유지하고, 콘텐츠를 쉽게 찾을 수 있도록 하며, 상황 변화를 명확하게 보여주는 것입니다.