옵시디언 live preview 읽기 모드와 똑같이 가독성 좋게 만드는 방법

이번 포스팅에서는 옵시디언(Obsidian)의 인기 테마 중 하나인 미니멀 테마(Minimal theme)에서 발생하는 줄 간격 문제를 해결하는 방법에 대해 상세히 알아보겠습니다. 미니멀 테마는 이름처럼 극도로 깔끔하고 정돈된 사용자 인터페이스(UI)를 제공하여 많은 사용자들에게 사랑받고 있는데요, 하지만 일부 사용자들은 테마가 기본적으로 처리하는 줄 간격 방식에 불편함을 느끼기도 합니다. 특히 글을 많이 작성하는 사용자에게는 가독성과 직결되는 문제이기에 더욱 민감하게 다가올 수 있습니다.

혹시 여러분도 미니멀 테마를 사용하시면서 제목과 본문 사이 간격이 너무 좁거나, 편집 모드와 읽기 모드의 모습이 달라서 신경 쓰였던 경험이 있으신가요? 또는 목록(list)의 들여쓰기나 글머리 기호(bullet)와 텍스트 사이 간격이 마음에 들지 않았던 적은 없으신가요? 이런 문제들은 사소해 보일 수 있지만, 한번 눈에 거슬리기 시작하면 계속 신경 쓰여 글쓰기 경험을 해칠 수 있습니다.

이 글에서는 이러한 미니멀 테마의 줄 간격 관련 문제들을 CSS 코드 수정을 통해 깔끔하고 일관성 있게 해결하는 구체적인 방법을 단계별로 설명합니다. CSS에 익숙하지 않은 사용자도 쉽게 따라 할 수 있도록 각 코드의 의미와 적용 방법을 자세히 풀어드릴 예정이니, 미니멀 테마의 줄 간격 문제로 고민하셨던 분들이라면 이번 기회에 확실히 해결해 보시기 바랍니다. 이 내용을 이해하고 적용하면 여러분의 옵시디언 사용 경험이 한층 더 쾌적해질 것입니다.

미니멀 테마의 줄 간격, 무엇이 문제일까?

미니멀 테마는 뛰어난 디자인 완성도를 자랑하지만, 줄 간격 처리 방식에는 몇 가지 아쉬운 점이 지적되곤 합니다. 사용자들이 주로 불편함을 느끼는 지점들은 다음과 같습니다.

제목과 본문 사이의 간격 문제

가장 흔하게 지적되는 문제입니다. 특히 헤딩(Heading) 바로 다음에 오는 문단(Paragraph)과의 간격이 너무 좁아서 답답한 느낌을 줄 수 있습니다. 제목과 본문은 시각적으로 명확히 구분되어야 내용의 구조를 파악하기 쉬운데, 간격이 부족하면 이러한 구분이 모호해져 가독성을 떨어뜨릴 수 있습니다.

(수정 전: 제목과 본문 간격이 좁고, 문단 간 간격이 불규칙함)

문단 위아래 간격의 불일치

문단 앞의 간격과 문단 뒤의 간격이 서로 다르게 적용되는 경우도 있습니다. 이로 인해 글 전체의 리듬감이 깨지고 시각적으로 불안정한 느낌을 줄 수 있습니다. 일관된 간격은 편안한 읽기 경험의 기본 요소인데, 이것이 지켜지지 않으면 사용자는 미묘한 불편함을 느끼게 됩니다.

편집 모드와 읽기 모드의 불일치

옵시디언의 편집 모드(Edit view)에서 보이는 화면과 읽기 모드(Reading view)에서 보이는 화면의 줄 간격 차이가 크게 나타나는 것도 문제입니다. 사용자는 편집 모드에서 보이는 대로 결과물이 나오기를 기대하지만, 두 모드 간의 렌더링 차이로 인해 간격 설정이 다르게 적용되어 혼란을 야기할 수 있습니다. 이는 특히 CSS를 직접 수정하려 할 때 큰 어려움으로 작용합니다. 특정 모드에 맞춰 수정하면 다른 모드에서 문제가 발생하는 식이지요.

목록(List) 서식 문제

목록의 들여쓰기(indent)가 과도하게 크거나, 반대로 글머리 기호(bullet)와 실제 텍스트 내용 사이의 간격이 너무 좁아서 답답해 보이는 문제도 있습니다. 적절한 들여쓰기와 간격은 목록의 계층 구조를 명확히 하고 가독성을 높이는 데 중요한 역할을 합니다.

아니, 그냥 테마 설정에서 몇 개 바꾸면 되는 거 아니야? CSS까지 건드려야 해?

네, 그렇게 생각하실 수 있습니다. 저도 처음에는 간단한 설정 변경으로 해결될 줄 알았습니다. 실제로 인터넷 검색을 통해 여러 해결책들을 찾아 적용해 보았지만, 결과는 만족스럽지 않았습니다. 어떤 설정은 편집 모드에만 영향을 미치고, 어떤 설정은 읽기 모드에만 영향을 미치거나, 혹은 두 모드에 서로 다른 방식으로 영향을 주어 문제를 더 복잡하게 만들 뿐이었습니다. 일관성 있는 결과를 얻기가 매우 어려웠지요.

결국, 이 문제를 근본적으로 해결하기 위해서는 옵시디언의 개발자 도구(Developer Tools)를 열어 직접 CSS 코드를 분석하고 수정하는 방법밖에 없다는 결론에 이르렀습니다. 웹 개발 경험이 없는 사용자에게는 다소 생소하고 어렵게 느껴질 수 있지만, 핵심 원리를 이해하면 생각보다 간단하게 문제를 해결할 수 있습니다.

핵심 해결 전략 : CSS 변수와 선택자 활용

문제 해결의 열쇠는 미니멀 테마가 사용하는 CSS 변수(variables)를 이해하고, 편집 모드와 읽기 모드에 각각 적절한 CSS 규칙을 적용하는 데 있었습니다. 특히 다음과 같은 접근 방식이 유효했습니다.

1. 핵심 CSS 변수 수정: --p-spacing과 --p-spacing-empty 같은 변수는 문단 간격에 전반적인 영향을 미칩니다. 이 변수들의 값을 조정하여 기본적인 간격을 설정합니다.

2. 편집 모드 선택자 활용: 편집 모드(Live Preview 포함)는 CodeMirror라는 에디터를 기반으로 하므로, .cm-s-obsidian, .cm-line, .HyperMD-header, .HyperMD-list-line 등 CodeMirror 관련 클래스 선택자를 사용해야 합니다.

3. 읽기 모드 선택자 활용: 읽기 모드는 표준 HTML 태그(h1, h2, p, ul, li 등)로 렌더링되므로, .markdown-rendered 컨테이너 안의 해당 태그 선택자를 사용합니다.

4. 정교한 선택자 조합: 특정 조건(예: 목록의 첫 번째 줄)에만 스타일을 적용하기 위해 인접 형제 선택자(+)나 부정 선택자(:not())를 활용합니다.

5. 간격 속성 구분: padding과 margin 속성을 적절히 사용합니다. 특히 margin-block-start와 margin-block-end는 요소의 위쪽 및 아래쪽 마진을 논리적으로 제어하여 일관된 간격 설정에 유용합니다.

이러한 전략을 바탕으로, 다음과 같은 CSS 코드를 작성하여 앞서 언급된 문제점들을 해결할 수 있었습니다.

해결책 : 커스텀 CSS 코드 적용

아래는 미니멀 테마의 줄 간격 문제를 해결하기 위한 CSS 코드입니다. 이 코드를 옵시디언의 CSS 스니펫(snippet)으로 저장하여 활성화하면 됩니다.

/* changes to global variables */
body {
    --p-spacing: 1.0rem;
    --p-spacing-empty: 1.0rem;
    --heading-spacing: 0;
    --list-edit-offset: 0;
}

/* -------------------------- */
/* edit mode (preview) tweaks */
/* -------------------------- */

/* Spacing before all headings */
.cm-s-obsidian .cm-line.HyperMD-header {
    padding-top: var(--p-spacing-empty);
    padding-bottom: 0 !important;
}

/* Larger spacing before H1 */
.cm-line.HyperMD-header-1 {
    padding-top: calc(var(--p-spacing-empty)*2) !important;
}

/* Margin between H1 and its divider */
.h1-l .markdown-reading-view h1:not(.embedded-note-title), 
.h1-l .mod-cm6 .cm-editor .HyperMD-header-1{
    padding-bottom: calc(var(--p-spacing-empty)*0.8) !important;
    border-bottom: 2.5px solid var(--h1l); /* thicker divider */
}

/* Spacing before First lines of lists */
.is-live-preview .cm-line:not(.HyperMD-list-line) + 
.cm-line.HyperMD-list-line {
    padding-top: var(--p-spacing-empty);
}

/* Larger list indent */
.cm-formatting-list.cm-formatting-list-ul {
    margin-right: 5px;
}

/* ---------------- */
/* read mode tweaks */
/* ---------------- */

/* Spacing of headings except for H1 */
.markdown-rendered :is(h2, h3, h4, h5, h6) {
    margin-block-start: var(--p-spacing-empty) !important;
    margin-block-end: 0.0rem !important;
    padding-top: 0rem !important;
    padding-bottom: 0.0rem !important;
}

/* Spacing of H1 */
.markdown-rendered :is(h1) {
    margin-block-start: calc(var(--p-spacing-empty)*2) !important;
    margin-block-end: 0.0rem !important;
    padding-top: 0rem !important;
    padding-bottom: calc(var(--p-spacing-empty)/2) !important; /* spacing above divider */
}

/* Larger list indent */
.markdown-rendered .list-bullet {
    margin-right: 5px;
}

코드 해설

• body { ... }: 테마의 전역 CSS 변수 값을 재정의합니다. --p-spacing은 문단 아래 간격, --p-spacing-empty는 빈 줄이나 다른 요소들(헤딩, 목록 등) 앞의 간격을 제어하는 데 사용됩니다. 여기서는 두 값을 1.0rem으로 통일하여 기본적인 수직 간격을 일관되게 만들었습니다. rem 단위는 루트 요소(html)의 글꼴 크기에 비례하는 상대 단위로, 사용자 설정에 따라 유연하게 조절됩니다. 일반적으로 1rem은 16px에 해당합니다.

• .cm-s-obsidian .cm-line.HyperMD-header: 편집 모드에서 헤딩 줄을 선택합니다. 여기에 padding-top: var(--p-spacing-empty)를 적용하여 모든 헤딩 위에 일관된 간격을 확보합니다. padding-bottom: 0 !important는 헤딩 자체의 아래쪽 내부 여백을 제거하여, 헤딩과 다음 내용 사이 간격 조절을 용이하게 합니다. !important는 다른 스타일 규칙보다 이 규칙을 우선 적용하도록 강제합니다.

• .cm-line.HyperMD-header-1: 편집 모드에서 H1 헤딩 줄만 특정하여 선택합니다. padding-top: calc(var(--p-spacing-empty) * 2) !important를 통해 H1 헤딩 위에는 다른 헤딩보다 두 배 큰 간격을 주어 시각적인 중요도를 높입니다. calc() 함수는 CSS 내에서 계산을 수행하게 해줍니다.

• .h1-l ...: 미니멀 테마 설정 중 'Trim heading indentation' 옵션이 켜져 있을 때 H1 헤딩에 적용되는 스타일입니다. 편집 모드와 읽기 모드 모두에서 H1 텍스트와 그 아래 구분선(divider) 사이의 간격(padding-bottom)을 조절하고, 구분선 두께(border-bottom)를 약간 더 두껍게 만듭니다.

• .is-live-preview .cm-line:not(.HyperMD-list-line) + .cm-line.HyperMD-list-line: 라이브 프리뷰(Live Preview) 모드에서, 일반 텍스트 줄 바로 다음에 오는 목록의 첫 번째 줄을 선택합니다. +는 인접 형제 선택자로, 바로 다음에 오는 형제 요소를 선택합니다. :not(.HyperMD-list-line)은 목록 줄이 아닌 줄을 의미합니다. 여기에 padding-top을 적용하여 문단과 목록 사이에 적절한 간격을 부여합니다.

• .cm-formatting-list.cm-formatting-list-ul: 편집 모드에서 목록의 글머리 기호(*, - 등)를 감싸는 부분을 선택합니다. margin-right: 5px를 적용하여 글머리 기호와 뒤따르는 텍스트 사이의 간격을 늘려 답답함을 해소합니다.

• .markdown-rendered :is(h2, h3, h4, h5, h6): 읽기 모드에서 H2부터 H6까지의 헤딩을 선택합니다. :is()는 여러 선택자를 그룹화하는 최신 CSS 기능입니다. margin-block-start는 요소의 위쪽 마진을 설정하여 헤딩 위에 간격을 만듭니다. margin-block-end: 0은 헤딩 아래 마진을 제거합니다. padding 관련 속성도 0으로 초기화하여 불필요한 내부 여백을 제거합니다.

• .markdown-rendered :is(h1): 읽기 모드에서 H1 헤딩을 선택합니다. 편집 모드와 마찬가지로 margin-block-start를 사용하여 H1 위에 다른 헤딩보다 큰 간격을 설정합니다. padding-bottom을 조절하여 H1 텍스트와 아래 구분선 사이의 간격을 읽기 모드에서도 적절하게 맞춥니다.

• .markdown-rendered .list-bullet: 읽기 모드에서 목록의 글머리 기호를 선택합니다. margin-right: 5px를 적용하여 편집 모드와 동일하게 글머리 기호와 텍스트 사이 간격을 확보합니다.

이 CSS 코드를 적용하면 편집 모드와 읽기 모드 모두에서 헤딩과 본문, 문단과 문단, 목록 항목 등 다양한 요소들의 줄 간격이 일관되고 가독성 높게 조절됩니다.

(수정 후: 제목과 본문 간격, 문단 간 간격이 일정하고 보기 좋게 조절됨)

CSS 스니펫 적용 방법

CSS 코드를 옵시디언에 적용하는 방법은 간단합니다.

1. 옵시디언 설정(Settings) 창을 엽니다. (단축키: Ctrl/Cmd + ,)

2. 왼쪽 메뉴에서 '모양새(Appearance)' 탭을 선택합니다.

3. 아래로 스크롤하여 'CSS 스니펫(CSS snippets)' 섹션을 찾습니다.

4. 폴더 아이콘(Open snippets folder)을 클릭하면 옵시디언 저장소(Vault) 내의 .obsidian/snippets 폴더가 열립니다.

5. 이 폴더 안에 텍스트 파일을 새로 만들고, 원하는 이름(예: minimal-spacing-fix.css)으로 저장합니다. 파일 확장자는 반드시 .css여야 합니다.

6. 방금 만든 .css 파일을 텍스트 편집기로 열고, 위에 제공된 CSS 코드를 전체 복사하여 붙여넣은 후 저장합니다.

7. 다시 옵시디언 설정의 'CSS 스니펫' 섹션으로 돌아옵니다. 새로고침 아이콘(Reload snippets)을 클릭하면 방금 추가한 스니펫 파일(minimal-spacing-fix)이 목록에 나타납니다.

8. 해당 스니펫 이름 옆의 토글 스위치를 켜서 활성화합니다.

이제 옵시디언 노트 화면으로 돌아가면 변경된 줄 간격이 즉시 적용된 것을 확인할 수 있습니다. 편집 모드와 읽기 모드를 전환하며 의도한 대로 간격이 조절되었는지 확인해 보세요.

지금까지 옵시디언 미니멀 테마의 줄 간격 문제를 해결하기 위한 구체적인 CSS 수정 방법에 대해 알아보았는데요. 처음에는 복잡해 보였을 수 있지만, 각 코드 라인이 어떤 역할을 하는지 이해하고 나면 CSS를 통해 옵시디언의 외형을 얼마나 세밀하게 제어할 수 있는지 알게 되셨을 겁니다. 특히 편집 모드와 읽기 모드의 차이를 고려하여 각각에 맞는 선택자와 속성을 적용하는 것이 일관된 결과를 얻는 핵심이었습니다.

이 포스팅에서 제시된 CSS 코드는 미니멀 테마의 줄 간격 문제를 해결하여 더욱 편안하고 가독성 높은 글쓰기 환경을 만드는 데 도움을 줄 것입니다. 사소하지만 신경 쓰였던 시각적 불편함이 해소됨으로써 여러분은 이제 내용 자체에 더욱 집중할 수 있게 될 것입니다. CSS가 낯선 분들에게는 이번 기회가 옵시디언 커스터마이징의 새로운 가능성을 발견하는 계기가 되었기를 바랍니다.