본문으로 건너뛰기
yutils
예시

입력 (디렉토리 들여쓰기)

src
  app
    page.tsx
    layout.tsx
  components
    Header.tsx
  lib
    tools.ts

출력 (ASCII 트리)

src
├── app
│   ├── page.tsx
│   └── layout.tsx
├── components
│   └── Header.tsx
└── lib
    └── tools.ts

참고

들여쓰기(2-space 또는 4-space)로 계층을 표현하면 `├──` · `└──` 트리 문자로 자동 변환. README 의 디렉토리 구조 작성에 적합.

사용법 / 자주 묻는 질문

이런 경우 사용하세요

  • README 의 디렉토리 구조 시각화
  • 기술 문서 · 위키 페이지의 폴더 트리 표기
  • 코드 리뷰 PR 본문에 영향받는 파일 트리 첨부
  • design doc 의 정보 구조(IA) 다이어그램 빠른 작성
  • AI prompt 에 디렉토리 구조 첨부할 때

자주 묻는 질문

Q.탭과 공백을 섞어도 되나요?
A.추천하지 않습니다. 첫 줄의 들여쓰기 단위를 기준으로 인식하므로 일관된 2-space 혹은 4-space 를 사용하세요.
Q.디렉토리와 파일을 구분 표시할 수 있나요?
A.기본은 텍스트 그대로 노출됩니다. 직접 `/` 접미사 또는 이모지(`📁`)를 입력에 추가하면 결과에도 보존됩니다.
Q.결과를 GitHub 마크다운에 그대로 붙여도 되나요?
A.예. ASCII 문자만 사용하므로 코드 펜스(```)로 감싸면 어디서든 동일하게 보입니다.
재미있는 사실
  • ├ │ └ ─ 같은 트리 그림 문자는 Unicode 1.0 (1991) 의 'Box Drawing' 블록 (U+2500 ~ U+257F) 128 글자 중 일부입니다. 그 전엔 IBM Code Page 437 (1981 PC) 의 single/double line drawing 이 사실상 표준 — Unicode 가 그 의도를 그대로 통합했어요.

    Wikipedia — Box-drawing characters
  • DOS 의 `tree` 명령어는 MS-DOS 3.2 (1986) 부터 박혔습니다 — 디렉토리 구조를 ASCII 트리로 시각화하는 첫 보편 도구. Windows·Linux 의 동명 명령어는 이 컨벤션을 그대로 계승 — 'C:\>tree' 의 출력 형태가 40년째 유지됐어요.

    Wikipedia — tree command
  • Git 의 `git log --graph` 도 같은 box drawing 문자를 활용해 branch·merge 히스토리를 ASCII 그래프로 출력합니다 — `*` 가 commit, `| / \` 가 분기·합류. 터미널이 GUI 도구 없이도 commit topology 를 한 눈에 보게 만든 강력한 trick.

    Git — log documentation