Obsidian에서 _assets 폴더를 자동으로 숨기기 (필요할 때까지)

Source: Dev.to

번역할 텍스트를 제공해 주시면, 요청하신 대로 한국어로 번역해 드리겠습니다. (코드 블록, URL 및 마크다운 형식은 그대로 유지됩니다.)

Overview

이것은 Obsidian에서 Custom Attachment Location 플러그인을 사용하기 전과 후의 모습이며, 파일 탐색기에서 _assets 폴더를 자동으로 숨기고 (보이게) 하는 아주 작은 CSS‑only 해킹 방법을 함께 보여줍니다.

1️⃣ 사용 전 모습

Articles/
  Some Guide/
    _Some Guide.md
    Another take.png
    Final result.png
    How to do that.png
    How to do this.png
    …
  Another Article/
    _Another Article.md
    Screenshot 1.png
    Screenshot 2.png
    …

2️⃣ Custom Attachment Location 사용 후 모습

Articles/
  > Article A_assets/
  v Article B_assets/
      file-1.png
      file-2.png
      …
  > Article C_assets/
    Article A.md
    Article B.md
    Article C.md

플러그인은 첨부 파일을 깔끔하게 정리해 주지만, 시간이 지나면 파일 탐색기가 여전히 복잡하게 느껴집니다.

3️⃣ “아하!” 순간

Obsidian 포럼(예: 2021년 스레드)에서 흔히 제기되는 요청을 계기로 순수 CSS 해결책을 생각해냈습니다.
이름이 __ 로 시작하고 __ 로 끝나는 폴더를 숨기는 원본 스니펫은 다음과 같습니다:

/* hide paths with __before and ending with __ */
.nav-folder-title[data-path^="__"][data-path$="__"] {
  display: none;
}

이것을 보고 생각했습니다: 이름이 _assets 로 끝나는 모든 폴더를 숨겨버리면 어떨까?

CSS‑only “hide‑assets‑folders” 스니펫

무엇을 하는가

• 이름이 _assets 로 끝나는 모든 폴더를 축소합니다 (설정 가능).
• 현재 활성화된 노트(또는 그 노트의 assets) 만 _assets 폴더를 펼칩니다.
• 펼쳐진 assets 폴더 안에 스크롤 가능한 영역을 옵션으로 추가합니다.
• 시각적으로는 접혀 있지만 실제로는 펼쳐진 폴더를 강조 표시합니다(“경고” 상태).

참고 – 아래 GIF에서 보이는 두 개의 접힌 assets 폴더는 얇은 회색 선으로 표시됩니다(사용자 정의 가능).

📦 권장 설정

1. CSS Editor 플러그인을 설치합니다(또는 선호하는 방법을 사용).

2. 새 스니펫 파일을 만들고, 예: hide-assets-folders.css.

3. 아래 CSS 코드를 파일에 붙여넣습니다.

4. 스니펫을 활성화합니다:

   • CSS Editor 사용 시 – 스니펫이 자동으로 활성화됩니다; 편집기 버튼을 통해 확인할 수 있습니다.
   • 편집기 없이 – 파일을 VaultRoot/.obsidian/snippets/에 넣고 Settings → Appearance → CSS snippets 로 이동한 뒤 토글을 켭니다.

5. (선택) Custom Attachment Location을 사용해 첨부 파일을 정리합니다:

   # Settings → Files & Links → Location for new attachments
   ./${noteFileName}_assets

📄 CSS 스니펫

/* Hide assets folders – https://forum.obsidian.md/t/automatically-hide-assets-folder-when-not-focused/111617 */

/* Base style for every assets folder (visible / hidden). */
.nav-folder:has(>[data-path$='_assets']) {
  background: color-mix(in srgb, currentColor 5%, transparent); /* Highlight all assets folders. */
  max-height: 4px;               /* Height of the hidden assets folder. */
  overflow: hidden;              /* Hide everything beyond the max-height. */
  transition: max-height 500ms ease-in-out; /* Smooth expand/shrink animation. */

  /* -------------------------------------------------
     Style overrides for active folders (has an .is-active child)
     ------------------------------------------------- */
  .nav-folder-children:has(>*>.is-active) > &,
  .nav-folder-children > &:has(.is-active) {   /* When the assets folder itself has an active asset. */
    background: color-mix(in srgb, currentColor 3%, transparent); /* Highlight for active expanded assets folders. */
    max-height: 150px;          /* Large enough for smooth animation; at least 25px larger than the scrollable area. */

    /* Optional: enable scroll within assets folders. */
    .tree-item-children {
      max-height: 125px;       /* Height of the scrollable area. */
      overflow-y: auto;
    }
  }
}

/* -------------------------------------------------
   Optional: highlight “forgotten” (expanded but hidden) assets folders.
   This helps avoid rendering glitches when the folder’s height is still counted
   by the explorer even though it’s visually collapsed.
   ------------------------------------------------- */
.nav-folder-children:not(:has(>*>.is-active))
  > .nav-folder:not(.is-collapsed):has(>[data-path$='_assets']):not(:has(.is-active)) {
  background: color-mix(in srgb, red 30%, transparent);
  max-height: 10px;               /* Slightly larger so it can be clicked to hide comfortably. */
  * { color: transparent; }
}

작동 원리

제한 사항 및 개선 가능성

• 순수 CSS만으로는 “활성 노트에 속한 _assets 폴더만 보여라”는 것을 정확히 지정할 수 없습니다. 현재는 어떤 활성 하위 요소가 있든 반응합니다.

• 폴더에 여러 개의 _assets 하위 폴더가 포함되어 있으면, 자식이 활성화될 때 모두 확장됩니다.

• 작은 JavaScript 스니펫(예: JavaScript Init 또는 최소 플러그인 사용)을 이용하면 올바른 assets 폴더에 커스텀 클래스를 토글하여 위의 예외 상황을 해결할 수 있습니다.

Why the warning rule matters

assets 폴더가 시각적으로 접혀 있더라도 Obsidian의 가상화된 파일 탐색기는 여전히 해당 높이를 계산합니다. 이로 인해 다음과 같은 문제가 발생할 수 있습니다:

• 항목이 예상보다 일찍 렌더링되지 않음.
• 활성 노트가 렌더링 범위 밖으로 밀려남.
• _assets 폴더가 DOM 노드가 사라져 다시 사라짐.

빨간색 하이라이트 규칙은 확장된(즉, .is-collapsed가 아닌) 폴더이지만 CSS에 의해 여전히 숨겨진 경우를 표시하여, 보다 원활한 동작을 위해 수동으로 접으라는 알림을 제공합니다.

TL;DR

1. CSS 스니펫(위)을 볼트에 추가합니다.
2. 설정 → 외관 → CSS 스니펫(또는 CSS Editor 플러그인)에서 활성화합니다.
3. (선택) Custom Attachment Location을 사용해 첨부 파일을 노트와 같은 폴더에 있는 _assets 폴더에 보관합니다.
4. 현재 작업 중인 노트의 _assets 폴더만 표시되는 깔끔하고 조용한 파일 탐색기를 즐기세요!

Folder_assets/

목표

• _assets 폴더를 기본적으로 접힌 상태로 유지합니다.
• 해당 노트 폴더 안에 있을 때만 폴더가 펼쳐지도록 합니다.

가상화 글리치에 대한 우회 방법

• 수동으로 _assets 폴더를 접기하거나,
• JS 기반 접근 방식으로 노드를 시각적으로 축소하는 대신 실제로 제거/숨김 처리합니다.

향후 가능한 개선

관심이 있거나 너무 번거로워진다면, 작은 JavaScript 도우미/플러그인을 추가할 수 있습니다:

1. 활성 노트를 식별합니다.
2. 해당 _assets 폴더 이름을 유도합니다.
3. 그 폴더에 클래스를 토글합니다.
4. 다른 _assets 폴더를 자동으로 접어 가상화 문제를 방지합니다.

이 아이디어는 원래 이 스레드에서 소개된 포럼 CSS 접근 방식을 기반으로 하며 영감을 받았습니다.