이전에 테마 설정에 대해 다뤘고, 테마를 설치하면 Obsidian이 훨씬 좋아 보입니다. 하지만 많은 사람들이 여전히 테마를 바꾼 후에도 뭔가 어색함을 느낍니다—글꼴이 너무 작거나, 줄 간격이 너무 좁거나, 노트 영역이 너무 좁거나… 이러한 세부 사항은 테마의 범위를 벗어납니다. 이 장에서는 CSS Snippets으로 미세 조정하는 방법을 다룹니다.
이 장에서는 네 가지를 다룹니다:
- CSS가 무엇인지—코딩 지식이 없어도 이해할 수 있게
- 테마가 있어도 왜 CSS가 필요한지
- AI가 CSS를 대신 작성하게 하세요—복사해서 붙여넣기만 하면 됩니다
- CSS를 어디에 두고 어떻게 활성화하는지
CSS란 무엇인가
CSS는 Cascading Style Sheets의 약자입니다. 기술적으로 들리지만 핵심 논리는 간단합니다: CSS는 모양을 제어하는 규칙의 집합입니다.
예를 들어:
- 이 텍스트의 글꼴, 크기, 색상은 무엇인가?
- 이 영역의 너비는 얼마인가? 여백은?
- 마우스를 올렸을 때 배경색은 무엇인가?
웹페이지에서 보는 거의 모든 시각적 효과는 CSS로 제어됩니다. Obsidian의 인터페이스도 웹 기술(Electron)로 구축되었으므로 CSS를 사용하여 모양을 제어할 수 있습니다.
설치하는 테마는 본질적으로 다른 사람이 작성한 대규모 CSS 패키지입니다. CSS Snippet은 테마가 다루지 않는 부분을 미세 조정하기 위해 직접 추가하는 작은 CSS 조각입니다.
테마는 전체 스타일이고, 스니펫은 국소적인 조정입니다. 서로 충돌하지 않으며 함께 사용할 수 있습니다.
테마가 있는데 왜 여전히 CSS가 필요한가?
테마는 “전체 스타일” 문제를 해결하지만, 많은 개인 취향 세부 사항은 테마의 범위를 벗어납니다—그리고 그래야만 합니다. 모든 사람의 취향이 다르기 때문입니다.
테마가 부족한 몇 가지 일반적인 상황:
노트 영역이 너무 좁음: 많은 테마가 기본적으로 노트의 최대 너비를 제한하여, 넓은 화면에서 큰 빈 공간이 남고 내용이 중앙에 좁게 표시됩니다. 어떤 사람은 이 레이아웃을 좋아하고, 다른 사람은 낭비라고 생각합니다.
줄 간격이 너무 좁거나 너무 넓음: 기본 줄 간격이 편하지 않을 수 있지만, 테마에는 이에 대한 옵션이 없습니다.
제목 색상이 마음에 들지 않음: 테마는 전반적으로 마음에 들지만 H1 색상이 너무 밝아서 어둡게 하고 싶습니다.
성가신 UI 요소: 예를 들어, 사용하지 않는 버튼을 숨기고 싶습니다.
이러한 요구는 매우 구체적이고 개인적입니다. CSS Snippet은 이러한 “마지막 마일” 문제를 해결하기 위해 설계된 도구입니다.
직접 작성할 필요 없음—AI가 대신 작성하게 하세요
이 장에서 가장 중요한 점입니다: CSS를 전혀 배울 필요가 없습니다—AI가 대신 작성하게 하면 됩니다.
과정은 매우 간단합니다: AI에게 변경하고 싶은 내용을 말하기만 하면 됩니다:
“Obsidian CSS Snippet을 작성해줘: 노트 내용 영역의 최대 너비를 900px로 설정”
“Obsidian CSS Snippet을 작성해줘: 본문 줄 간격을 1.8로 설정”
“Obsidian CSS Snippet을 작성해줘: H1 색상을 진한 파란색으로 변경”
AI는 완전한 CSS 코드 조각을 제공하며, 복사해서 바로 사용할 수 있습니다.
AI에서 더 나은 결과를 얻기 위한 몇 가지 팁:
- Obsidian CSS Snippet이라고 명시하세요, 그렇지 않으면 AI가 잘못된 변수 이름을 가진 일반 웹 CSS를 줄 수 있습니다.
- AI에게 주석을 추가하라고 요청하세요, “각 속성 옆에 무엇을 하는지 설명하는 주석을 추가해줘"라고 말하면 나중에 파일을 이해할 수 있습니다.
- 한 번에 하나씩 변경하세요, 하나의 스니펫 파일에 하나의 작업만—디버깅이 쉽고 개별적으로 끌 수 있습니다.
예시 대화:
Me: Write me an Obsidian CSS Snippet to set the maximum width of the note content area to 900px, please add comments.
AI:
.markdown-source-view, .markdown-reading-view {
/* Limit the maximum width of the note content area */
--file-line-width: 900px;
}
이게 전부입니다. CSS 구문을 이해할 필요도, 문서를 찾아볼 필요도 없습니다. 원하는 것을 설명하고, 코드를 받고, 붙여넣고, 끝입니다.
CSS를 어디에 두나요? 어떻게 활성화하나요?
CSS Snippet은 고정된 저장 위치가 있습니다. 다음 단계를 따르기만 하면 됩니다.
1단계: 스니펫 폴더 찾기
경로: 볼트 루트 → .obsidian 폴더 → snippets 폴더
.obsidian은 숨김 폴더입니다. Mac에서는 Command + Shift + .를 눌러 숨김 파일을 표시합니다. snippets 폴더가 없으면 수동으로 만드세요.
물론 설정에서 직접 접근할 수도 있습니다.
2단계: .css 파일 만들기
snippets 폴더에 새 텍스트 파일을 만들고 확장자를 .css로 변경합니다. 이름은 원하는 대로 지정하되, note-width.css나 line-height.css처럼 설명적인 이름을 사용하는 것이 좋습니다. AI의 코드를 붙여넣고 저장합니다.
또는 이 폴더를 열고 AI가 직접 CSS 파일을 여기에 작성하게 할 수도 있습니다.
3단계: Obsidian에서 활성화하기
경로: 설정 → 외형 → CSS snippets
페이지 하단으로 스크롤하면 “CSS snippets” 섹션이 보입니다. 오른쪽의 새로고침 아이콘을 클릭하면 방금 만든 파일이 목록에 나타납니다. 파일 이름 옆의 토글을 클릭하면 토글 색상이 바뀌고 스니펫이 적용됩니다. 인터페이스가 즉시 변경되며 재시작이 필요 없습니다. 효과가 맞지 않으면 토글을 끄고 코드를 다시 확인하세요.
내가 CSS를 사용하는 방법
참고를 위해 실제로 사용하는 몇 가지 스니펫을 소개합니다.
노트 영역 넓히기 – 가장 많이 사용하는 스니펫입니다. 노트 내용 영역의 최대 너비를 더 넓게 설정하여 큰 화면에서 여백을 줄입니다.
줄 간격 조정 – 기본 줄 간격이 저에게는 약간 좁아서 CSS로 약간 늘려 더 편안하게 읽을 수 있게 합니다.
사용하지 않는 요소 숨기기 – Obsidian 인터페이스에 사용하지 않는 버튼과 아이콘이 있습니다. CSS로 display: none으로 설정하여 숨겨 인터페이스를 더 깔끔하게 만듭니다.
Callout 스타일 조정 – 특정 테마의 callout 블록 기본 색상이 마음에 들지 않아 CSS로 더 부드러운 색상으로 변경했습니다.
이 네 가지 스니펫은 각각 별도의 .css 파일에 저장되어 있으며, 각각 개별적으로 토글할 수 있습니다. 시간이 지나 어떤 것이 맞지 않으면 그냥 끄면 됩니다—서로 간섭하지 않습니다.
요약
오늘 배운 내용:
- CSS는 인터페이스 모양을 제어하는 규칙이며, Obsidian은 CSS Snippet을 사용하여 국소적인 조정을 합니다.
- 테마는 전체 스타일이고, 스니펫은 세부 조정입니다—함께 작동합니다.
- CSS를 직접 작성할 필요 없이 AI에게 변경할 내용을 말하고 코드를 복사하세요.
- 스니펫 저장 경로: 볼트 루트 →
.obsidian/snippets/→.css파일. - 설정 → 외형 → CSS snippets에서 활성화하고 토글을 켜면 적용됩니다.
핵심 요점:
- AI에게 요구사항을 설명하여 CSS를 작성하게 하는 것이 CSS 구문을 직접 배우는 것보다 훨씬 효율적입니다.
- 하나의 스니펫은 하나의 작업만 수행하여 관리와 디버깅이 쉽습니다.
- 토글은 언제든지 끌 수 있어 안전하고 되돌릴 수 있으므로 인터페이스를 망칠 걱정이 없습니다.