옵시디언(CSS, 테마) 이것저것 좋은 것만 꾹꾹 담아봤습니다 - 33

옵시디언의 시각적 요소를 개선하기 위해 Style Settings 플러그인과 CSS 스니펫을 활용하는 방법은?

옵시디언의 시각적 요소를 개선하기 위해 Style Settings 플러그인과 CSS 스니펫을 활용하여 체크박스, 데이터뷰 테이블, 태그 색상, 마크다운 테이블, 강조 구문, 이미지 테두리, 구분선 등을 커스터마이징할 수 있습니다

Style Settings 플러그인과 CSS 스니펫의 주요 기능은?

• Style Settings 플러그인: 체크박스 색상 및 모양 변경, 액티브 라인 하이라이트 및 색상 변경, 프론트매터 숨기기 및 너비 조절, 인라인 타이틀 크기 및 색상 조절, 데이터뷰 테이블 설정, 마크다운 테이블 줄바꿈 비활성화 및 행/열 라인 표시 등
• CSS 스니펫: 헤딩 색상 및 크기 변경, 편집/읽기 모드 간격 조절, 본문 강조 구문(두껍게, 기울임, 하이라이트, 밑줄) 스타일 변경, 임베딩된 노트 타이틀 스타일 변경, 이미지 테두리 및 여백 추가, 태그 색상 변경, 구분선 스타일 변경 등

옵시디언의 시각적 만족도와 효율성을 극대화하고 싶다면 이 콘텐츠가 해답을 제시합니다. 단순히 테마를 적용하는 것을 넘어, Style Settings 플러그인과 CSS 스니펫을 활용하여 체크박스, 데이터뷰 테이블, 태그, 강조 구문 등 옵시디언의 거의 모든 요소를 사용자 맞춤형으로 커스터마이징하는 방법을 상세히 알려줍니다. 복잡한 설정 없이도 나만의 개성 있는 노트 환경을 구축하고, 정보의 가독성을 높여 생산성을 향상시키는 실질적인 팁들을 얻을 수 있습니다. 이 영상을 통해 옵시디언을 단순한 도구가 아닌, 나만의 생각과 정보를 담는 강력한 시각적 허브로 변모시킬 수 있을 것입니다.

1. 옵시디언 시각적 요소 커스터마이징 소개

1. 영상 개요: 옵시디언의 시각적 요소를 개선하는 방법에 대해 다룬다.
   1. 주요 내용: Style Settings 플러그인과 CSS 스니펫을 활용하여 옵시디언 스타일을 변경하는 방법을 설명한다.
   2. 다룰 내용: 체크박스 취소선, 데이터뷰 테이블 설정, 태그 색상 변경, 마크다운 테이블 가독성 향상, 강조 구문 커스터마이징, 이미지 테두리, 구분선 설정 방법 등을 다룬다.

1. 사전 준비 권장: Minimal theme나 Style Settings 플러그인에 대한 이해가 부족한 경우, 관련 영상을 먼저 시청하는 것을 권장한다.

2. 화면 세팅 및 Style Settings 활용

2.1. 화면 세팅 방법

1. 설정 화면 분할: 옵시디언 설정을 열었을 때 화면이 가려지는 문제를 해결하기 위해 화면을 분할한다.
   1. 우측 분할: 설정을 오른쪽으로 분할한다.
   2. 읽기 모드 설정: 분할된 창을 읽기 모드로 변경한다.
   3. 새 창 이동: 우측 창을 새 창으로 이동시킨다.
   4. 창 배치: 새 창은 우측에, 옵시디언은 좌측에 배치한다.

2.2. 체크박스 설정

1. 기본 체크박스 동작:
   1. 예시: 3개의 체크박스를 생성하여 '할 일' 완료 시 체크박스를 눌러 완료 표시를 한다.
   2. Minimal 테마: Minimal 테마에서는 체크박스 체크 시 색상이나 별다른 변경 없이 체크만 된다.
   3. 다른 테마 비교:
      1. Blue Topaz 테마: 체크박스 모양과 색상이 바뀌고 글자 색상도 변경된다.
      2. 다른 테마: 모양뿐만 아니라 취소선과 함께 글자 색상도 변경된다.

1. Style Settings를 이용한 체크박스 커스터마이징:
   1. 접근 경로: Minimal 테마로 변경 후 Style Settings → Minimal → Lists and Tasks로 이동한다.
   2. 색상 변경: 체크박스 색상을 붉은색 등으로 변경하고 저장할 수 있다.
   3. 모양 변경: 체크박스 모양을 원형에서 사각형으로 변경할 수 있다.
   4. 취소선 추가: 완료한 일에 취소선을 그을 수 있다.
   5. 간격 조절: 리스트 간의 간격 및 들여쓰기 간격을 조절할 수 있다.

2.3. 액티브 라인 설정

1. 액티브 라인 기본 동작:
   1. 편집 모드 전환: 화면을 읽기 모드에서 편집 모드로 변경한다.
   2. 커서 위치: 마우스 커서를 놓으면 해당 라인 번호의 색상이 약간 변경되는 것을 확인할 수 있다.

1. Style Settings를 이용한 액티브 라인 커스터마이징:
   1. 접근 경로: Style Settings → Minimal → Line Numbers로 이동한다.
   2. 하이라이트 활성화: 'Highlight Active Line'을 누르면 현재 편집 중인 라인이 하이라이트되어 한눈에 확인할 수 있다.
   3. 위치 이동: 'Gutter Offset'으로 라인 번호의 위치를 이동시킬 수 있다.
   4. 배경색 설정: 라인 번호의 배경색을 설정할 수 있다.
   5. 활성화된 라인 넘버 색상 변경: 현재 활성화된 라인 넘버의 색상을 푸른색 등으로 변경하여 직관적으로 수정 중인 라인을 확인할 수 있다.

2.4. 프론트매터 설정

1. 프론트매터 문제점: 노트 내 프론트매터가 상당 부분을 차지하여 내용을 보면서 수정하기 불편할 수 있다.
   1. 기존 CSS: 예전 영상에서 프론트매터를 숨기고 마우스 오버 시에만 나타나게 하는 CSS를 소개한 바 있다.
   2. 수정 필요성: 직접 내용을 보면서 수정이 필요할 때는 최소한으로만 보여줄 수 있도록 설정하는 것이 필요하다.

1. Style Settings를 이용한 프론트매터 커스터마이징:
   1. 접근 경로: Style Settings → Minimal → Properties로 이동한다.
   2. 상단 부분 숨기기: 'Hide Properties Setting'을 눌러 가장 윗부분을 숨길 수 있다.
   3. 'Add Property' 버튼 숨기기: 'Hide "Add Property" Button'을 숨길 수 있다.
      1. 추가 방법: 우측 상단의 'Add File Property'를 눌러 새로운 내용을 추가할 수 있다.
   4. 아이콘 숨기기: 아이콘을 숨길 수 있다.
   5. Property 이름 너비 조절: Property 이름의 너비를 조절하여 긴 내용도 생략 없이 볼 수 있다.

2.5. 인라인 타이틀 설정

1. 인라인 타이틀 정의: 노트의 제목 부분을 의미한다.

1. Style Settings를 이용한 인라인 타이틀 커스터마이징:
   1. 접근 경로: Style Settings → Minimal → Titles → Inline title로 이동한다.
   2. 글꼴 변경: 인라인 타이틀의 글꼴을 변경할 수 있다.
   3. 폰트 사이즈 조절: 폰트 사이즈를 조절하여 제목을 더 크게 만들 수 있다 (예: 1.1em에서 1.5em으로).
   4. 글자 굵기 조절: 글자를 더 가늘게 또는 더 굵게 만들 수 있다.
   5. 색상 변경: 인라인 타이틀의 색상을 푸른색 등으로 변경할 수 있다.

2.6. 데이터뷰 테이블 설정

1. 데이터뷰 테이블 문제점:
   1. 태그 정렬: 태그가 세로로 정렬되어 있다.
   2. URL 생략: URL의 뒷부분이 생략되어 표시된다.

1. Style Settings를 이용한 데이터뷰 테이블 커스터마이징:
   1. 접근 경로: Style Settings → Minimal → Dataview로 이동한다.
   2. 긴 텍스트 표시: 'Long text' 트림 기능을 비활성화하면 생략된 내용이 전부 표시된다.
   3. 태그 가로 정렬: 'Force tables lists inline'을 누르면 세로로 정렬되었던 태그들이 가로로 정렬된다.
   4. 읽기 모드 확인: 읽기 모드에서 링크가 전부 표시된 것을 확인할 수 있다.
   5. 최대 열 너비 조절: 최대 열 너비를 18em에서 30em 등으로 늘리면 한 줄에 더 많은 내용을 볼 수 있다.

2.7. 마크다운 테이블 설정

1. 마크다운 테이블 문제점:
   1. 줄바꿈 발생: 한 화면에 모든 내용을 담으려 할 때 불필요한 줄바꿈이 생긴다.
   2. 과도한 너비 축소: 내용이 많은 부분의 너비가 과도하게 줄어든다.

1. Style Settings를 이용한 마크다운 테이블 커스터마이징:
   1. 접근 경로: Style Settings → Minimal → Tables로 이동한다.
   2. 폰트 크기 조절: 테이블 안의 폰트 크기를 조절할 수 있다.
   3. 최소 열 너비 설정: 최소 열 너비를 6ch에서 13ch 등으로 변경하여 불필요한 줄바꿈을 최소화하고 우측 스크롤을 가능하게 한다.
   4. 줄바꿈 비활성화: '줄바꿈 비활성화'를 활성화하면 자동으로 줄바꿈이 일어나지 않는다.
      1. 내용 확인: 우측 스크롤을 통해 내용을 확인할 수 있다.
      2. 수동 줄바꿈: 편집 모드에서 Shift + Enter를 사용하여 수동으로 줄을 바꾸고 표 구조를 구성할 수 있다.
   5. 행과 열 라인 표시:
      1. 데이터뷰 테이블: '활성화'를 통해 행과 열을 구분하는 선을 표시할 수 있다.
      2. 마크다운 테이블: 'Cell lines'을 누르면 마크다운 테이블의 가장자리에도 라인이 생긴다.
   6. 행/열 구분 편의성:
      1. 행 구분: '활성화'를 통해 행 구분을 편하게 할 수 있다.
      2. 열 구분: '활성화'를 통해 열 구분을 편하게 할 수 있다.
   7. 자동 행 번호: '활성화'를 통해 자동으로 행 번호가 들어가게 할 수 있다.

3. CSS 스니펫 활용

3.1. CSS 스니펫 준비 및 설정

1. CSS 스니펫 사용 목적: Style Settings 플러그인에서 설정할 수 없는 부분을 커스터마이징하기 위해 CSS 스니펫을 사용한다.
2. CSS 스니펫 폴더 접근:
   1. 설정 경로: 설정 → 테마로 이동한다.
   2. 폴더 아이콘: 폴더 아이콘을 눌러 CSS 스니펫이 저장된 폴더로 이동한다.
3. CSS 파일 생성 및 활성화:
   1. 파일 생성: 'obsidian_style.css'와 같은 파일을 미리 만들어 둔다.
   2. 활성화: 옵시디언 화면으로 돌아와 'obsidian_style' 부분을 활성화한다.
4. CSS 파일 편집 환경:
   1. 편집 도구: VS Code와 같은 프로그램을 사용하여 CSS 파일을 편집한다.
   2. 화면 구성:
      1. 좌측: 'obsidian-style.css' 파일을 수정하여 바로 적용할 수 있도록 창을 열어둔다.
      2. 우측: CSS 파일에 입력한 결과를 바로 볼 수 있도록 옵시디언 화면을 열어둔다.
   3. 파일 관리: 모든 CSS를 하나의 파일에 작성할 수도 있고, 필요에 따라 여러 개로 나누어 관리할 수도 있다.

3.2. 헤딩(Heading) 설정

1. 헤딩 기본 설정: 헤딩의 색상이나 텍스트 크기는 Style Settings 플러그인에서 변경 가능하다.
2. CSS를 이용한 헤딩 변경:
   1. 코드 적용: 준비된 CSS 코드를 붙여 넣으면 헤딩 1의 색상이 아쿠아 색상으로 바로 적용된다.
   2. 폰트 사이즈 적용 문제: 폰트 사이즈를 50px로 설정해도 본문 텍스트 크기는 변하지 않는다.
   3. 우선순위 부여: 느낌표와 '!important'를 입력하여 우선순위를 주면 헤딩 1 텍스트 크기가 변경된다.
3. CSS와 Style Settings의 역할 분담:
   1. 문제점: CSS로 헤딩을 변경한 후 추가로 작성하면 원래 테마에 설정된 텍스트 스타일이 일시적으로 적용될 수 있다.
   2. 권장 사항: 테마에서 기본적으로 설정 가능한 부분은 Style Settings 플러그인을 통해 설정하고, Style Settings에서 지원하지 않는 기능들을 CSS를 통해 작성하는 것이 좋다.

3.3. 편집 모드와 읽기 모드 간격 조절

1. 간격 차이 문제: 편집 모드와 읽기 모드 간의 간격이 상당히 다르다.
2. CSS를 이용한 간격 조절:
   1. 헤딩 간격 늘리기: 헤딩 1에 코드를 추가하여 헤딩의 상단 및 하단 간격을 늘린다.
   2. 읽기 모드 간격 줄이기: 읽기 모드의 간격을 줄이는 코드를 추가하고 마이너스 값을 사용하여 간격을 더 줄인다.
   3. 나머지 간격 늘리기: 추가 코드를 통해 나머지 간격까지 늘린다.
   4. 수치 조절: 직접 숫자를 조절하여 제목과 내용의 간격을 조절할 수 있다.

3.4. 텍스트 강조 구문 커스터마이징

1. 강조 구문 종류: 두껍게, 기울임, 두껍고 기울임, 하이라이트(마크다운), 밑줄(HTML) 등 5가지 강조 구문을 살펴본다.
2. 기존 강조 구문 문제점:
   1. 두껍게: 색상만 변경된 것처럼 보인다.
   2. 기울임/두껍고 기울임: 입력은 다르지만 텍스트가 기울여져 보이기만 한다.
   3. 하이라이트: 하이라이트된 부분과 텍스트가 너무 가까워 어색해 보인다.
3. CSS를 이용한 강조 구문 변경:
   1. 두껍게:
      1. 색상 변경: 코드를 추가하여 색상을 변경한다.
      2. 글꼴 변경: 텍스트 글꼴을 변경하여 본문 글꼴과 구별되게 한다.
      3. 텍스트 높이 조절: 글꼴마다 높이 차이로 인해 텍스트가 주변보다 위쪽에 있는 문제를 해결하기 위해 약간 아래로 이동시킨다.
   2. 기울임: 색상을 변경한다.
   3. 두껍고 기울임: 텍스트를 변경하고 다른 색상으로 강조한다.
   4. 하이라이트:
      1. 기본 설정: 백그라운드 색상과 텍스트 색상을 변경한다.
      2. 패딩 추가: 텍스트 주변에 패딩을 추가하여 하이라이트 영역을 넓힌다.
      3. 여백 조절: CSS 코드에서 상하 여백(앞부분)과 좌우 여백(뒷부분)을 조절할 수 있다.
   5. 밑줄:
      1. 색상 변경 및 위치 조정: 텍스트 색상을 변경하고 밑줄을 텍스트보다 약간 아래로 내린다.
      2. 간격 조절: 밑줄의 위치 조정 값(예: 4px)을 입력하여 글자와 밑줄 간의 간격을 조절한다.
4. 밑줄 단축키 설정 팁:
   1. HTML 직접 입력: 밑줄은 HTML로 작성되어 직접 입력할 수 있다.
   2. Editing Toolbar 플러그인: 마우스 드래그를 통해 Editing Toolbar 플러그인으로 입력할 수 있다.
   3. 단축키 지정: 설정 → 단축키에서 'underline'을 검색하여 Editing Toolbar 플러그인이 설치되어 있다면 단축키를 지정하여 사용할 수 있다.

3.5. 임베딩된 노트 타이틀 설정

1. 임베딩된 노트 문제점: 임베딩된 노트의 제목과 내용이 같은 텍스트 크기와 색상으로 되어 있어 제목 구별이 어렵다.
2. CSS를 이용한 타이틀 변경:
   1. 색상 변경: CSS 파일에 코드를 추가하여 제목의 색상을 지정된 색상으로 변경한다.
   2. 텍스트 사이즈 변경: 텍스트 사이즈를 1em에서 1.2em 등으로 변경하여 제목임을 한눈에 구분할 수 있게 한다.

3.6. 이미지 테두리 및 여백 설정

1. 이미지 테두리 문제점: 노트의 배경색과 이미지 색상이 같아 이미지 경계를 구별하기 어렵다.
2. CSS를 이용한 테두리 추가: CSS에 코드를 추가하면 정확히 테두리가 생겨 이미지 크기를 알 수 있다.
3. 이미지-텍스트 간격 문제점: 본문에 이미지를 넣고 텍스트를 함께 입력할 때 이미지와 텍스트 사이가 좁게 느껴진다.
4. CSS를 이용한 여백 추가: 괄호 사이에 마진 코드를 추가하면 상하단 여백이 넓어져 보기가 좋아진다.

3.7. 태그 색상 변경

1. 태그 색상 변경 필요성: 데이터뷰 테이블에 많은 태그가 모여 있을 때 중요한 태그가 눈에 띄지 않을 수 있다.
2. CSS를 이용한 태그 색상 변경:
   1. 특정 태그 색상 변경: '#일기'와 '#데이터뷰' 태그의 색상을 변경하는 코드를 추가한다.
      1. 예시: 데이터뷰 태그는 텍스트 흰색, 배경 파란색; 일기 태그는 텍스트 붉은색, 배경 투명색으로 설정한다.
   2. 추가 태그 색상 변경: '#플러그인' 태그의 색상도 초록색 등으로 변경하여 중요한 태그를 한눈에 알아볼 수 있게 한다.
   3. 본문 적용: 데이터뷰 테이블뿐만 아니라 본문에 있는 태그 색상도 변경된다 (편집 모드에서는 보이지 않으며, 읽기 모드에서 확인 가능).
   4. 프론트매터 적용 문제: 프론트매터에서는 태그 색상이 변경되지 않는다.
      1. 해결 방법: 데이터뷰 테이블 작성 시 'file.tags'를 입력해야 한다. 'file.'을 지우면 프론트매터에서 바로 가져오기 때문에 색상이 변경되지 않는다.

3.8. 구분선 설정

1. 구분선 입력 방법: 크게 '*'와 '---' 두 가지 방법으로 입력할 수 있다.
2. 두 구분선의 차이:
   1. '' 구분선*: 위에 텍스트를 입력해도 정상적으로 작성된다.
   2. '---' 구분선: 위에 텍스트를 입력하면 일반 텍스트가 아닌 헤딩 2 형식으로 표시된다.
      1. 아래 텍스트: 아래에 입력하는 텍스트는 일반 텍스트로 보인다.
      2. 읽기 모드: 읽기 모드에서는 구분선이 사라지고 텍스트만 제목으로 바뀐다.
      3. ''와의 비교: ''로 만든 구분선은 텍스트가 바로 붙어 있더라도 문제없이 표시된다.
3. CSS를 이용한 구분선 커스터마이징:
   1. 너비 설정: 구분선의 너비를 50% 등으로 설정할 수 있다.
      1. 적용 확인: 편집 모드에서는 변경되지 않지만, 읽기 모드에서는 구분선 너비가 절반으로 줄어든 것을 확인할 수 있다.
      2. 중앙 정렬: 코드를 추가하면 간격이 넓어지면서 중앙으로 정렬된다.
   2. 두께와 색상 변경: 코드를 추가하면 구분선의 색상과 두께가 변경된다.
      1. 예시: 연두색으로 변경하거나 두께를 줄일 수 있다.

4. 마무리

1. 옵시디언 설정의 방대함: 옵시디언에서 설정할 수 있는 부분이 매우 많다.
2. 핵심 가치 강조: 옵시디언을 꾸미는 것보다 더 많은 지식과 정보를 담아내는 데 집중하는 것이 중요하다.

옵시디언 편의성 업그레이드 플러그인 2탄 – 34 바로가기

옵시디언 편의성 업그레이드 플러그인 2탄 - 34 - 하나이프 블로그