트리 탭

VertiTab의 트리 탭 보기는 탭 간 관계를 기반으로 계층 구조로 조직해, 연결성을 쉽게 파악하고 관련 콘텐츠를 일괄 관리할 수 있게 합니다.

로그인 필요

트리 탭은 등록 사용자에게 무료로 제공되며, 프리미엄 없이 사용할 수 있습니다. 단, 고급 사용자화 옵션은 프리미엄이 필요합니다.

트리 탭 켜기

1. VertiTab 사이드패널을 엽니다.
2. 툴바의 표시 방식 버튼을 클릭합니다.
3. 드롭다운에서 트리 탭을 선택합니다.

트리 구조 이해

트리 탭은 openerTabId 개념을 기반으로 합니다. 어떤 탭이 다른 탭을 열었는지 추적하는 브라우저 속성으로, 자연스러운 부모-자식 관계를 만듭니다.

구성 요소

• 루트 탭: 다른 탭이 열지 않았거나, 부모가 사라진 탭
• 자식 탭: 링크 클릭/새 탭 열기로 생성된 하위 탭
• 트리 계층: 자식이 또 다른 자식을 갖는 다단계 관계

시각 표현

• 트리 라인: 부모-자식 관계를 선으로 연결
• 들여쓰기: 계층 레벨을 들여쓰기로 표시
• 펼침/접힘 아이콘: 부모의 자식 표시/숨김

트리 수동 구성

탭을 다른 탭 위로 드래그해 수동으로 트리 관계를 만들 수 있습니다. 드롭 대상 위에서 호버하면 다음 메뉴가 나타납니다.

가능한 동작

• 탭 이동: 대상 탭 근처로 이동
• 그룹에 추가: 그룹 생성/추가
• 트리로 묶기: 부모-자식 관계 생성

드래그로 트리 만들기

1. 부모-자식 생성: 탭을 다른 탭 위로 드래그해 "트리로 묶기" 선택 → 대상이 부모가 됩니다.
2. 다중 트리 구성: 여러 탭을 선택해 대상 탭 위로 드래그 → 하나의 부모 아래 여러 자식 구성
3. 재구성: 트리 내에서 드래그해 계층을 재정렬

그룹 vs 트리 우선순위

"트리보다 그룹 우선" 설정이 트리에서 그룹을 어떻게 처리할지 결정합니다.

트리 우선(기본: 끔)

설정이 꺼져 있으면(트리 우선):

• 그룹이 달라도 트리 관계를 유지
• 부모-자식 관계가 보존됨
• 트리 구조에 초점

그룹 우선(켜짐)

설정이 켜져 있으면(그룹 우선):

• 트리 관계는 같은 그룹 내에서만 유지
• 그룹 간 이동 시 부모-자식 관계가 끊김
• 트리보다 그룹이 우선
• 각 탭은 자신의 그룹 내부에서만 트리 관계 유지

새 탭 동작

tabTreeIgnoreOpenerOnNewTab 설정은 새 탭이 자동으로 부모-자식 관계를 맺을지 제어합니다.

기본 동작(설정 끔)

• 기존 탭에서 연 새 탭은 자동으로 그 탭의 자식이 됩니다.
• 탐색 행동을 기반으로 트리가 자동 구성됩니다.

독립 새 탭(설정 켬)

• 새 탭을 독립 루트로 만듭니다.
• 자동 부모-자식 관계를 만들지 않습니다.
• 트리를 수동으로 관리하길 원하는 경우에 적합합니다.

고급 사용자화(프리미엄)

프리미엄을 사용하면 트리 탭의 시각 요소를 폭넓게 사용자화할 수 있습니다.

트리 라인

• 스타일: 실선, 점선, 점점선, 라인 없음
• 두께: 연결선 굵기 조정
• 색상: 사용자 지정(무작위 색상도 가능)
• 투명도: 투명도 조절

트리 아이콘

• 형태: 사각/원/화살표/삼각형/폴더
• 호버 표시: 호버 시에만 펼침/접힘 아이콘 표시

간격과 레이아웃

• 수평 들여쓰기: 레벨 간 가로 간격
• 수직 들여쓰기: 항목 간 세로 간격

동작 옵션

• 부모 탭 닫을 때 트리 닫기: 부모 닫기 시 자식 자동 닫기
• 관계 기반 정렬: 트리 관계를 기준으로 브라우저에서 자동 정렬

트리 활용 팁

1. 자연 탐색: 새 탭 열기만으로 자연스러운 계층이 형성됩니다.
2. 수동 구성: 자동 관계가 마음에 들지 않으면 드래그로 논리 그룹을 만드세요.
3. 그룹과 병행: 트리는 관계, 그룹은 주제로 병행해 최대 조직 효율을 얻으세요.
4. 주기적 정리: 불필요한 부모-자식은 탭을 루트로 끌어 제거하세요.
5. 시각 사용자화: 라인 스타일/간격을 조정해 가독성을 높이세요.

트리 탭은 평면 리스트를 넘어 실사용 흐름을 반영한 계층 구조로 전환해, 관련 콘텐츠를 더 자연스럽게 관리하게 해 줍니다.