옵시디언 CSS 스니펫 완벽 가이드: 나만의 테마 만들기

옵시디언의 가장 큰 매력 중 하나는 바로 세세한 부분까지 커스터마이징할 수 있다는 점입니다. CSS 스니펫을 활용하면 옵시디언의 외관을 자신의 취향에 맞게 완벽하게 조정할 수 있습니다. 이 가이드에서는 CSS 스니펫을 생성하고 활용하는 방법부터 실용적인 커스터마이징 예시까지 상세히 알아보겠습니다.

1. CSS 스니펫 기초

CSS 스니펫 생성 방법

설정(Settings) 열기
외관(Appearance) 선택
CSS 스니펫(CSS snippets) 섹션으로 이동
새 스니펫 생성 또는 기존 스니펫 편집

기본 구조

/* 스니펫 정보 */
/*
@name: 커스텀 테마
@version: 1.0.0
@author: 작성자 이름
@description: 테마 설명
*/

/* 글로벌 변수 설정 */
:root {
    --main-text-color: #333333;
    --background-primary: #ffffff;
    --accent-color: #5b8aff;
}

2. 기본 UI 요소 커스터마이징

기본 폰트 및 텍스트 스타일

/* 전체 폰트 설정 */
.theme-light {
    --font-text-theme: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-monospace-theme: 'JetBrains Mono', monospace;
}

/* 본문 텍스트 스타일 */
.markdown-preview-view {
    font-family: var(--font-text-theme);
    font-size: 16px;
    line-height: 1.6;
    color: var(--main-text-color);
}

/* 코드 블록 스타일 */
.markdown-preview-view code {
    font-family: var(--font-monospace-theme);
    background-color: #f5f5f5;
    padding: 2px 4px;
    border-radius: 4px;
}

헤더 스타일링

/* 헤더 스타일 */
.markdown-preview-view h1 {
    font-size: 2em;
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.3em;
    margin-bottom: 1em;
}

.markdown-preview-view h2 {
    font-size: 1.5em;
    color: #444;
    margin-top: 1.5em;
}

.markdown-preview-view h3 {
    font-size: 1.2em;
    color: #555;
}

3. 사이드바 및 탐색 영역 커스터마이징

파일 탐색기 스타일

/* 사이드바 기본 스타일 */
.nav-folder-title {
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 8px;
}

/* 파일 아이템 스타일 */
.nav-file-title {
    padding: 4px 8px 4px 24px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.nav-file-title:hover {
    background-color: var(--background-secondary);
}

/* 활성 파일 하이라이트 */
.nav-file-title.is-active {
    background-color: var(--background-modifier-active);
    color: var(--accent-color);
    font-weight: 600;
}

탭 바 스타일링

/* 탭 스타일 */
.workspace-tab-header {
    padding: 4px 16px;
    border-radius: 4px 4px 0 0;
}

.workspace-tab-header.is-active {
    background-color: var(--background-modifier-active);
    border-bottom: 2px solid var(--accent-color);
}

/* 탭 아이콘 스타일 */
.workspace-tab-header-inner-icon {
    color: var(--text-muted);
}

.workspace-tab-header.is-active .workspace-tab-header-inner-icon {
    color: var(--accent-color);
}

4. 마크다운 요소 스타일링

리스트 스타일

/* 글머리 기호 리스트 */
.markdown-preview-view ul {
    padding-left: 1.5em;
}

.markdown-preview-view ul li {
    list-style-type: disc;
    margin: 0.3em 0;
}

/* 순서 있는 리스트 */
.markdown-preview-view ol {
    padding-left: 1.5em;
}

.markdown-preview-view ol li {
    margin: 0.3em 0;
}

블록쿼트 스타일

/* 인용구 스타일 */
.markdown-preview-view blockquote {
    border-left: 4px solid var(--accent-color);
    background-color: var(--background-secondary);
    margin: 1em 0;
    padding: 1em;
    border-radius: 0 4px 4px 0;
}

.markdown-preview-view blockquote p {
    margin: 0;
    color: var(--text-muted);
}

5. 강조 요소 및 링크 스타일

강조 텍스트 스타일

/* 볼드 텍스트 */
.markdown-preview-view strong {
    color: var(--accent-color);
    font-weight: 700;
}

/* 이탤릭 텍스트 */
.markdown-preview-view em {
    color: #666;
    font-style: italic;
}

/* 하이라이트 텍스트 */
.markdown-preview-view mark {
    background-color: rgba(255, 255, 0, 0.3);
    padding: 0 4px;
    border-radius: 2px;
}

링크 스타일링

/* 내부 링크 */
.internal-link {
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.internal-link:hover {
    border-bottom-color: var(--accent-color);
}

/* 외부 링크 */
.external-link {
    color: #0077cc;
    text-decoration: none;
}

.external-link:hover {
    text-decoration: underline;
}

6. 테이블 및 코드 블록 스타일링

테이블 스타일

/* 테이블 기본 스타일 */
.markdown-preview-view table {
    border-collapse: collapse;
    margin: 1em 0;
    width: 100%;
}

.markdown-preview-view th {
    background-color: var(--background-secondary);
    font-weight: 600;
    text-align: left;
    padding: 8px;
    border: 1px solid var(--background-modifier-border);
}

.markdown-preview-view td {
    padding: 8px;
    border: 1px solid var(--background-modifier-border);
}

/* 줄무늬 테이블 */
.markdown-preview-view tr:nth-child(even) {
    background-color: var(--background-secondary);
}

코드 블록 스타일링

/* 코드 블록 컨테이너 */
.markdown-preview-view pre {
    background-color: #2e3440;
    padding: 1em;
    border-radius: 8px;
    margin: 1em 0;
}

/* 코드 블록 내부 */
.markdown-preview-view pre code {
    color: #d8dee9;
    font-family: var(--font-monospace-theme);
    line-height: 1.5;
}

/* 문법 하이라이팅 */
.token.keyword {
    color: #81a1c1;
}

.token.string {
    color: #a3be8c;
}

.token.comment {
    color: #4c566a;
}

7. 다크 모드 지원

다크 모드 변수 설정

/* 다크 모드 테마 변수 */
.theme-dark {
    --background-primary: #2e3440;
    --background-secondary: #3b4252;
    --text-normal: #d8dee9;
    --text-muted: #9fa6b5;
    --accent-color: #88c0d0;
}

/* 다크 모드 특정 스타일 */
.theme-dark .markdown-preview-view {
    color: var(--text-normal);
}

.theme-dark .markdown-preview-view code {
    background-color: var(--background-secondary);
}

8. 반응형 디자인

미디어 쿼리 활용

/* 모바일 디바이스 */
@media screen and (max-width: 768px) {
    .markdown-preview-view {
        font-size: 14px;
    }

    .markdown-preview-view h1 {
        font-size: 1.8em;
    }

    .workspace-split.mod-vertical {
        flex-direction: column;
    }
}

/* 태블릿 디바이스 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .markdown-preview-view {
        font-size: 15px;
    }
}

마무리

CSS 스니펫을 통한 옵시디언 커스터마이징은 단순한 스타일 변경을 넘어서 작업 환경을 완벽하게 개인화할 수 있는 강력한 방법입니다. 이 가이드에서 소개한 다양한 스타일링 예시들을 기반으로 자신만의 독특한 테마를 만들어보세요.

특히 다크 모드 지원과 반응형 디자인을 고려한 스타일링은 현대적인 사용자 경험을 제공하는 데 필수적입니다. 각 요소들의 스타일을 세심하게 조정하고, 일관된 디자인 언어를 유지하면서 자신만의 완벽한 작업 환경을 구축해보세요.

이제 여러분도 옵시디언을 자신만의 스타일로 꾸밀 준비가 되셨나요? 이 가이드를 기반으로 하나씩 적용해보면서, 자신만의 독특한 테마를 만들어보세요.