JavaScript로 파일 탐색기 트리 UI 만들기 (3Depth 지원 + 폴더/파일 아이콘)

 

 

 

오늘은 웹에서 자주 쓰이는

파일 탐색기 형태의 트리 구조 UI를

직접 만들어보겠습니다.

 

다음과 같은 기능을 포함할 거예요:

 

• 3단계(3 Depth) 트리 구조
• 폴더/파일 유니코드 아이콘 적용
• 클릭 시 펼치기/접기 기능
• 간결하고 재사용 가능한 코드

 

🛠️ 트리 UI 구현 코드

 

✅ HTML

 

<ul id="tree">
  <li>
    <span class="toggle">▸</span> 📁 루트
    <ul>
      <li>
        <span class="toggle">▸</span> 📁 자식1
        <ul>
          <li>📄 자식1-1.txt</li>
          <li>
            <span class="toggle">▸</span> 📁 자식1-2
            <ul>
              <li>📄 자식1-2-1.png</li>
              <li>📄 자식1-2-2.pdf</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>📄 자식2.txt</li>
    </ul>
  </li>
</ul>

 

✅ CSS

 

ul {
  list-style: none;
  padding-left: 1em;
  font-family: sans-serif;
}

li {
  margin: 0.25em 0;
}

.toggle {
  cursor: pointer;
  margin-right: 5px;
  color: #555;
}

ul ul {
  display: none;
  padding-left: 1.5em;
}

.toggle.open + ul {
  display: block;
}

 

✅ JavaScript

 

document.querySelectorAll('.toggle').forEach(toggle => {
  toggle.addEventListener('click', function () {
    const nextUl = this.nextElementSibling;
    if (nextUl && nextUl.tagName === 'UL') {
      const isOpen = nextUl.style.display === 'block';
      nextUl.style.display = isOpen ? 'none' : 'block';
      this.textContent = isOpen ? '▸' : '▾';
    }
  });
});

 

🖼️ 실행 결과

• 폴더 아이콘 📁은 펼칠 수 있고,
• 파일 아이콘 📄은 클릭해도 반응 없이 단순히 노출됨
• 루트 → 자식1 → 자식1-2 같은 3단계 구조도 지원

 

📌 활용 팁

• 아이콘은 Font Awesome 등으로 커스터마이즈 가능
• JSON 데이터를 이용하면 동적 트리 구성도 쉽게 가능
• React, Vue 등의 프레임워크로도 확장 가능

 

♿ 접근성도 챙겨보자 – 트리 UI에 포함해야 할 요소들

 

파일 탐색기 트리 UI는 시각적으로 직관적이지만,

모든 사용자가 편리하게 쓸 수 있도록 접근성을 고려하는 것도 중요합니다.

 

다음과 같은 요소를 추가하면

스크린리더 사용자, 키보드 사용자 등

다양한 환경에서도 UX를 개선할 수 있어요.

 

✅ ARIA 속성으로 의미 부여하기

 

<ul role="tree">
  <li role="treeitem" aria-expanded="true">📁 루트</li>
</ul>

• role="tree" / role="treeitem"으로 구조 명시
• aria-expanded, aria-selected 속성으로 펼침 상태 전달
• 시각적 요소에 aria-label을 추가하여 의미 전달

 

✅ 키보드 탐색 지원

• Tab, Arrow Up/Down으로 노드 간 이동
• Enter로 펼치기/접기 실행
• tabindex="0"으로 포커스 설정 + 스타일로 시각적 피드백 제공

 

document.querySelectorAll('.toggle').forEach(toggle => {
  toggle.setAttribute('tabindex', '0');
  toggle.addEventListener('keydown', e => {
    if (e.key === 'Enter' || e.key === ' ') toggle.click();
  });
});

 

✅ 색상 대비와 텍스트 보완

• 텍스트 대비율 최소 4.5:1 이상으로 설정 (WCAG 기준)
• 아이콘 외에도 텍스트, 패턴, 굵기 등을 활용하여 의미 전달

 

✅ 모바일 접근성도 고려

• 터치 영역 넓게 설정 (ex. padding 늘리기)
• 확대 시 레이아웃이 깨지지 않도록 반응형 구성

 

✅ 마무리

이렇게 간단한 코드만으로도

직관적인 파일 탐색기 스타일의 트리 메뉴를 만들 수 있어요.

 

정적 사이트, 관리자 페이지,

또는 개인 포트폴리오에 활용해보세요!