file-tree-browser

1 개의 포스트

파일 트리 브라우저로 저장 (새 탭에서 열림)

GitLab 18.9 버전에서 새롭게 도입된 '파일 트리 브라우저'는 웹 환경에서도 IDE와 유사한 코드 탐색 경험을 제공하여 개발자의 생산성을 높여줍니다. 기존의 번거로운 뒤로 가기 방식이나 브레드크럼(breadcrumb) 의존 방식에서 벗어나, 파일 구조를 유지한 채 직관적으로 코드를 탐색할 수 있는 환경을 구축한 것이 핵심입니다. 이 기능은 GitLab.com뿐만 아니라 자가 관리형(Self-Managed) 및 전용(Dedicated) 인스턴스에서도 모두 사용할 수 있습니다. ### 직관적인 파일 구조 탐색 및 동기화 * **IDE 스타일의 트리 뷰**: 파일 및 디렉토리 구조를 측면 패널에 상시 표시하여, 현재 위치를 잃지 않고 코드의 계층 구조를 한눈에 파악할 수 있습니다. * **실시간 위치 동기화**: 메인 콘텐츠 영역에서 파일을 선택하면 트리 뷰가 해당 파일의 상위 디렉토리를 자동으로 확장하고 위치를 강조해 줍니다. * **유연한 레이아웃**: 트리 패널은 접거나 크기를 조절할 수 있어, 사용자의 화면 작업 공간에 맞춰 최적화가 가능합니다. ### 강력한 검색 및 키보드 중심의 내비게이션 * **빠른 파일 필터링**: 트리 브라우저가 열린 상태에서 'F' 키를 누르면 검색창이 활성화되며, 파일명이나 확장자의 일부를 입력해 원하는 파일로 즉시 이동할 수 있습니다. * **W3C ARIA 표준 준수**: 키보드 사용자와 스크린 리더 사용자를 위해 W3C ARIA treeview 패턴을 구현하였습니다. 화살표 키, Enter, Space, Home, End 키 등을 사용하여 손을 마우스로 옮기지 않고도 모든 탐색이 가능합니다. * **반응형 인터페이스**: 데스크톱에서는 사이드바 형태로 제공되지만, 작은 화면에서는 토글 방식의 드로어(drawer)로 전환되며 모바일에서는 코드 뷰를 최대로 활용할 수 있도록 숨김 처리됩니다. ### 대규모 저장소를 위한 성능 최적화 * **페이지네이션(Pagination) 적용**: 항목이 매우 많은 대형 저장소에서도 성능 저하가 발생하지 않도록 페이지네이션 기술을 도입하여 필요한 만큼 데이터를 로드합니다. * **확장성**: 프로젝트 규모가 커지더라도 트리 뷰의 응답성을 유지하도록 설계되어 대규모 엔터프라이즈 환경에서도 쾌적한 사용이 가능합니다. ### 활용 팁 및 권장 사항 새로운 파일 트리 브라우저를 효율적으로 사용하려면 `Shift + F` 단축키를 기억하는 것이 좋습니다. 저장소 뷰에서 이 키를 눌러 브라우저를 즉시 켜고 끌 수 있으며, 파일 검색 시에는 `F` 키를 활용해 계층 구조를 일일이 클릭하지 않고도 대상 파일에 접근하는 방식을 추천합니다. GitLab은 향후 성능 및 접근성을 더욱 개선할 예정이므로 피드백 이슈를 통해 개선 의견을 전달하는 것도 좋은 방법입니다.