폴더 트리 시각화
들여쓰기된 파일·폴더 이름 목록을 README나 유닉스 `tree` 명령 출력에서 볼 수 있는 고전적인 박스 문자 트리(`├──`, `└──`, `│`)로 바꿔 줍니다. 파서는 각 줄의 앞쪽 공백만으로 깊이를 판단하므로 — 원본에 맞게 레벨당 2칸, 4칸 또는 탭 1개를 선택하세요 — 아무 에디터에서나 구조를 스케치해 붙여넣으면 됩니다. 자식이 있는 항목은 디렉토리로 간주되어 끝에 `/`를 붙일 수 있고, 자식이 없는 항목은 파일로 표시됩니다. 최상위 루트가 여러 개여도 괜찮습니다. 모든 처리는 입력과 동시에 브라우저 안에서 이루어집니다. 아무것도 업로드되지 않으며, 작성 중인 내용은 로컬 스토리지에 보관되어 새로고침해도 남아 있습니다. 출력에 쓰이는 유니코드 박스 문자는 모든 현대 터미널, GitHub/GitLab의 코드 블록, 대부분의 문서 시스템에서 올바르게 렌더링됩니다 — 고정폭 글꼴로 가지가 정렬되도록 트리를 코드 블록으로 감싸세요.
project/ ├── src/ │ ├── components/ │ │ ├── Header.tsx │ │ └── Footer.tsx │ ├── lib/ │ │ └── utils.ts │ └── index.ts ├── public/ │ ├── favicon.ico │ └── robots.txt ├── package.json └── README.md
출력은 Unicode 박스 그리기 문자 — 모든 모던 터미널·GitHub에서 정상 렌더링.
사용법
- 들여쓰기 목록을 붙여넣거나 입력하세요 — 한 줄에 파일·폴더 하나씩, 자식은 부모보다 한 단계 더 들여씁니다.
- 목록의 들여쓰기 방식에 맞게 옵션(2칸, 4칸, 탭)을 설정하세요. 설정이 틀리면 트리가 평평해지거나 과하게 중첩됩니다.
- 디렉토리에 `/`를 붙이고 싶으면 trailing slash를 켜세요.
- 결과를 복사해 README나 문서의 코드 블록(백틱 3개) 안에 붙여넣으세요.
자주 묻는 질문
- 탭과 스페이스가 섞여 있으면?
- 파서는 선택한 들여쓰기 단위 하나만 인정하므로 혼용하면 깊이가 어긋납니다. 더 많이 쓰인 쪽을 고르거나, 에디터에서 정규식 치환으로 `\t`를 스페이스 2칸으로 바꿔 먼저 정리하세요.
- 디렉토리의 trailing slash가 왜 중요한가요?
- 일반 텍스트에는 아이콘이 없어서 `/` 접미사가 그 항목이 확장자 없는 파일이 아니라 폴더임을 알리는 유일한 단서입니다. GitHub README, 터미널 문서, 유닉스 `tree -F` 옵션 모두 같은 관례를 사용합니다.
- 빈 폴더는 어떻게 표시하나요?
- 자식이 하나 이상 있어야 디렉토리로 인식되므로, 빈 폴더는 파일처럼 렌더링됩니다. 폴더로 보이게 하려면 `.gitkeep` 같은 자리표시 자식을 넣으세요 — Git에서 빈 디렉토리를 유지하는 흔한 관례이기도 합니다.
- GitHub에서도 트리가 제대로 보이나요?
- 네 — `├──`/`└──`는 평범한 유니코드 텍스트입니다. 백틱 3개짜리 코드 블록 안에 넣으면 GitHub가 고정폭 글꼴로 렌더링합니다. 코드 블록 밖에서는 공백이 접혀 가지가 어긋납니다.
- 입력이 저장되거나 업로드되나요?
- 브라우저 밖으로 나가지 않습니다. 다만 새로고침 후에도 남도록 최근 입력을 브라우저 로컬 스토리지에 보관합니다. 지우려면 입력창을 비우거나 사이트 데이터를 삭제하세요.
관련 도구
이미지 → ASCII 아트
이미지를 ASCII 아트로 변환 — 너비·문자 집합·반전 조정, 브라우저에서.
텍스트 ↔ 2진수 변환기
텍스트를 8비트 2진수로, 또 그 반대로 변환합니다. UTF-8 인코딩이라 이모지·악센트 문자도 되고, 바이트 구분자를 고를 수 있습니다.
텍스트 ↔ 16진수 변환기
텍스트를 16진수 바이트로 변환하고 16진수를 다시 텍스트로 디코딩합니다. UTF-8 지원, 브라우저에서 동작합니다.
Lorem Ipsum 생성기
문단·문장·단어 단위로 자리표시자 텍스트를 생성하세요.
URL 슬러그 생성기
어떤 텍스트든 깔끔한 URL 슬러그로 — 악센트 제거, 구분자 선택, 최대 길이 지정.
Leetspeak(1337) 변환기
텍스트를 leetspeak로 변환하고 1337을 다시 글자로 디코딩합니다. 브라우저에서 동작합니다.
ASN.1 / DER 디코더
PEM·base64·hex 무엇이든 붙여넣으면 ASN.1 트리를 보여줍니다. 오프셋, 태그, 길이, 해석된 값까지.