파일트리 디렉티브

이 문서는 파일트리 디렉티브만 분리해 설명합니다. 폴더/파일 계층을 텍스트보다 빠르게 전달해야 하는 구조 문서에서, 작성 문법과 렌더링 결과를 바로 확인할 수 있도록 구성했습니다.

파일트리 작성 기본

파일트리 디렉티브는 상위 경로부터 하위 경로 순서로 작성하는 것을 기본으로 합니다. 문서와 직접 관련된 최소 범위만 표시해야 독자가 경로를 빠르게 해석할 수 있습니다.

작성 문법

:::filetree
- feature-guide/
  - interactive-filetree/
    - index.md
:::

렌더링

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. 강물은 유유히 흘러가고, 구름은 바람에 따라 모양을 바꿉니다.

feature-guide/
- interactive-filetree/
  - index.md

새는 하늘을 날고, 물고기는 물 속을 헤엄칩니다. 계절은 반복되지만주. 모든 시작은 한 걸음에서 비롯되며, 가나다라마바사아자차카타파하 이것은 화면 서식 확인을 위한 더미 텍스트입니다.

파일트리 작성 확장

확장 예시는 실제 문서 운영 구조처럼 다단계 트리를 보여줄 때 사용합니다. 너무 깊은 구조를 한 번에 넣기보다 목적 범위를 제한해 가독성을 유지하는 것이 좋습니다.

작성 문법

:::filetree
- docs/
  - src/
    - content/
      - docs/
        - 02-image/
          - index.md
          - profile_img.png
        - 03-video/
          - index.md
          - test video.mp4
:::

렌더링

하늘과 바람과 별과 시를 노래하며 살아가는 것은 참으로 행복한 일이다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. 강물은 유유히 흘러가고, 구름은 바람에 따라 모양을 바꿉니다.

docs/
- src/
  - content/
    - docs/
      - 02-image/
        
        index.md
        
        profile_img.png
      - 03-video/
        
        index.md
        
        test video.mp4

새는 하늘을 날고, 물고기는 물 속을 헤엄칩니다주 tempor incididunt ut labore et dolore. 빛이 있으면 반드시 그림자가 따르는 법이며, 계절은 반복되지만 매번 새롭습니다. 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세.

파일트리 주석 병행

각 항목 뒤에 —를 붙이면 역할 설명을 바로 붙일 수 있습니다. 별도 목록 없이 경로와 목적을 한 줄에 정리할 수 있어 구조 설명 문서에서 유용합니다.

작성 문법

:::filetree
- docs/
  - astro.config.mjs — 사이트 메타, 사이드바 자동 생성 설정 진입점
  - src/
    - assets/
      - prose.css — 본문 타이포 스타일 관리
      - interactive.css — 인터랙션 컴포넌트 스타일 관리
    - plugins/
      - remarkDirectiveComponents.js — 커스텀 디렉티브 파싱 처리
      - rehypeImage.js — 이미지 후처리 렌더링 담당
    - content/
      - docs/ — 실제 문서 본문 위치
:::

렌더링

가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. 강물은 유유히 흘러가고주, 모양을 바꿉니다.

docs/
- astro.config.mjs — 사이트 메타, 사이드바 자동 생성 설정 진입점
- src/
  - assets/
    - prose.css — 본문 타이포 스타일 관리
    - interactive.css — 인터랙션 컴포넌트 스타일 관리
  - plugins/
    - remarkDirectiveComponents.js — 커스텀 디렉티브 파싱 처리
    - rehypeImage.js — 이미지 후처리 렌더링 담당
  - content/
    - docs/ — 실제 문서 본문 위치

새는 하늘을 날고, 물고기는 물 속을 헤엄칩니다. Sed do eiusmod tempor incididunt ut labore et dolore. 계절은 반복되지만 매번 새롭습니다. 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.

파일트리 활용 패턴

파일트리 디렉티브는 경로 안내 외에도 절차 흐름이나 체크리스트 구조를 시각화할 때도 사용할 수 있습니다. 계층이 있는 항목이라면 파일/폴더 구조가 아니어도 동일한 방식으로 표현됩니다.

작성 문법 (점검 순서 표현)

:::filetree
- 배포 점검 흐름
  - 1) 빌드 검증
    - pnpm run build 실행
    - 빌드 아티팩트 확인
  - 2) 기능 검증
    - 이미지/비디오 렌더링 확인
    - 디렉티브 렌더링 확인
    - 내부 링크 접속 확인
  - 3) 운영 반영
    - 담당자 승인 완료 확인
    - 배포 실행 및 결과 기록
:::

렌더링 (점검 순서 표현)

이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. 강물은 유유히 흘러가고, 구름은 바람에 따라 모양을 바꿉니다.

배포 점검 흐름
- 1. 빌드 검증
  - pnpm run build 실행
  - 빌드 아티팩트 확인
- 1. 기능 검증
  - 이미지/비디오 렌더링 확인
  - 디렉티브 렌더링 확인
  - 내부 링크 접속 확인
- 1. 운영 반영
  - 담당자 승인 완료 확인
  - 배포 실행 및 결과 기록

새는 하늘을 날고, 물고기는 물 속을 헤엄칩니다. 빛이 있으면 반드시 그림자가 따르는 법이며주, 비롯됩니다. Sed do eiusmod tempor incididunt ut labore et dolore. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다.

작성 문법 (수정 대상 선택 구조)

:::filetree
- 스타일 수정 목적별 파일 선택
  - 인터랙티브 컴포넌트 수정
    - w0-migration/interactive.css
  - 콜아웃/공통 보정
    - migration-checks.css
  - 본문 타이포/기본 문단
    - w0-migration/prose.css
  - 랜딩 페이지 전용
    - landing.css
:::

렌더링 (수정 대상 선택 구조)

봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 가나다라마바사아자차카타파하주, 위한 더미 텍스트입니다. 아침 일찍 일어나 산책을 하면 하루가 상쾌하게 시작된다는 것을 느꼈다.

스타일 수정 목적별 파일 선택
- 인터랙티브 컴포넌트 수정
  - w0-migration/interactive.css
- 콜아웃/공통 보정
  - migration-checks.css
- 본문 타이포/기본 문단
  - w0-migration/prose.css
- 랜딩 페이지 전용
  - landing.css

새는 하늘을 날고, 물고기는 물 속을 헤엄칩니다. 계절은 반복되지만 매번 새롭습니다. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다.