옵시디언 초기세팅2: 밋밋한 옵시디언 꾸미기 - Minimal 테마와 Style Settings

 

개요 

옵시디언 설치 직후의 기본 화면은 너무 심플해서 밋밋할 수 있다.

이 글에서는 전 세계 옵시디언 사용자가 가장 많이 쓰는 Minimal Theme(미니멀 테마)를 설치하고,

Style Settings 플러그인을 통해 헤더 크기나 색상 등을 내 입맛대로 뜯어고치는 방법을 소개한다.

 

CSS 코드를 몰라도 클릭 몇 번으로 전문가처럼 세팅할 수 있다.

 

플러그인은 옵시디언이 기본적으로 제공하는 기능 외에 다양한 기능을 추가해서 사용할 수 있게 한다.  

내가 생각하기에 옵시디언 Obsidian의 사용성을 올려주는 제일 기본적인 플러그인을 소개한다. 

 

Minimal Theme 테마 설치하기

나도 사람들이 가장 많이 사용하는 Minimal Theme 을 사용중이다. 
설치한다고 크게 달라지는 것도 없어서 별게 없어보이지만

Style Setting 플러그인, Minimal Theme Setting 플러그인과 결합하면 할 수 있는게 무궁무진해진다.

• Apperance 테마 > Theme 테마 > Manage 관리 > Minimal Theme 설치

 

 

 

테마를 "Minimal Theme"을 설치하고, 2가지 플러그인으로 세부적인 설정을 하는것이다 

 

플러그인 기능 켜기, 플러그인 설치하는 방법 

• 설정 > Community plugins 커뮤니티 플러그인 > Turn on commnunity plugins 커뮤니티 플러그인 사용
• 이후 생기는 `Browse 탐색` 버튼을 통해 플러그인을 찾고 설치할 수 있다.
• 원하는 플러그인을 찾은후 `Install 설치`버튼을 누르고 잠깐 기다린 후 설치가 완료되면 `Enable 활성화`버튼을 누르면 된다.

 
플러그인을 설치하고 나면 이렇게 설정 화면 하단에 설치한 플러그인이 추가되고
그에 관련된 추가 option을 조정할 수 있다. 
 

Minimal Theme Setting 플러그인 

Minimal Theme Setting 에서 할 수 있는것들은 여러가지가 있는데 
기본적이라고 생각되는 기능은 다음과 같다 

Color Scheme 정하기 : Atom, Solarized 등등 

출처 :https://minimal.guide/features/color-schemes

테마 안에서도 색깔 톤을 정할수 있는 것 같다 

 

나는 "macOS"로 사용해보는 중이다 

 

상단프레임을 강조색으로 컬러풀하게 

• Colorful window frame  : 상단 프레임을 내가 정한 "강조색"으로 할지 말지 

제목 헤딩(H1~H6) 여러가지 색으로 변경

• Colorful heading : 제목1~제목6에 따라 다른 색으로 보이게 하기 

 

나는 Colorful heading 에서 제공하는 옵션 말고 다른 스타일로 하고싶어서 아래 글처럼 세팅했다. 

옵시디언 헤더(H1~H6) 색상변경, 단축키 설정, 사이드바에서 목차 확인

 

내부링크, 외부링크 양식 

링크를 어떤 양식으로 표현할지 결정할수 있는 옵션도 이 플러그인에서 제공한다.

내부링크는 `[[내부 문서 제목]]`로 표현되고,

외부링크에 `[표현할이름](주소)`로 표현된다. 양식없이 외부링크 붙여넣기만 할수도 있다. 

• underline internal links : 내부 문서 연결 밑줄 표시할지 말지 (`[[문서제목]]`같은 내부문서 연결할때)
• underline external links : 외부 링크 밑줄 표시 할지 말지 (https:// 으로 시작하는 웹링크 등)

 

이미지 그리드 양식으로 보기 

• Image grids : 한줄에 이미지를 두개, 세개 그리드 형식으로 넣고 싶다면 이 기능을 켜야함. 읽기화면에서만 구현됨 

글 맨위 상단에 `cssclasses : img-grid` 를 추가해주면 여러줄로 나온다. 

그대신 이미지 링크도 한줄에 써야함. 다른줄에 쓰면 안됨   

폰트크기, 줄간격 설정하기 

• Text font size : 폰트크기 
• Line height : 줄간격 - 1.9로 사용중 

본문 넓게 보기 

• Normal line width : 기본폭 
• Wide line width : 와이드폭 => `cssclasses : wide` 적용시 
• Maximum line width : 최대폭  => `cssclasses : max` 적용시

 

이외에도 Minimal Theme Setting이 지원하는 cssclasses는 공식문서를 참고하면 된다

https://minimal.guide/features/helper-classes

 

Style Setting 플러그인 : 옵시디언을 내 맘대로 꾸미기 

Minimal Theme 설치 후 Style Setting 플러그인을 설치하면 
css 나 프로그래밍 등에 대해 아무것도 아는 것이 없어도 이것저것 꾸밀 수 있는 자유도가 아주 높아진다.
 
그냥 Style Setting 플러그인만 설치하면 아래와 같은 설정들이 나오지 않는다. 
반드시 '설정 > 테마 > 관리'에서 Minimal Theme 을 먼저 설치하자 
 
내가 제일 먼저 적용한 것은 heading 양식에 대한 부분이였다.
 

Heading 양식 : 사이즈, 색, 굵기 등 수정하기 

• 설정 > Style Setting > minimal > heading

h1 ~ h6 까지 모두 다르게 설정할 수 있으며, 각각에 대해서 폰트 종류, 폰트 사이즈, 폰트 굵기, 텍스트 색 등을 설정할 수 있다. 

 

원하는데로 조금씩 조정해도되고 

Import 기능을 사용해서 한번에 바꾸려면 아래 내용을 한번에 붙여넣어도 된다 

 

{
  "minimal-style@@h1-size": "1.2em",
  "minimal-style@@h1-weight": 800,
  "minimal-style@@h2-size": "1.2em",
  "minimal-style@@h2-weight": 700,
  "minimal-style@@h3-size": "1.1em",
  "minimal-style@@h3-weight": 700,
  "minimal-style@@h4-size": "1.1em",
  "minimal-style@@h4-weight": 600,
  "minimal-style@@h4-variant": "normal",
  "minimal-style@@h5-size": "1em",
  "minimal-style@@h5-weight": 600,
  "minimal-style@@h5-variant": "normal",
  "minimal-style@@h6-size": "1em",
  "minimal-style@@h6-weight": 600,
  "minimal-style@@h6-variant": "normal"
 
}

 

 

초기에 아무것도 설정하지 않으면 왼쪽과 같은 상태인데, 

수정하면 오른쪽처럼 된다 

 

수정 전 → 수정 후 

 

 

• 1em = 폰트기본크기의 1배/ 1.2em = 폰트기본크기의 1.2배
• 나는 heading5, heading6 에서 영어가 대문자로 표현되는 이유가 H5 font variant 가 "AllSamll Caps"이기 때문인데 , Normal 로 바꾸면 해결된다 

인라인 코드블럭 색 바꾸기 : Code text color 

• Code text Color - #D02455 사용중 

 

 

하이라이트 색 바꾸기 : Highlighted text background 

• Highlighted text background : 하이라이트 색  - #fff3a3a6 (연노랑)으로 사용중 
• 단축키 설정하려면 설정 > hotkeys : Toggle highlight > + 버튼 눌러서 원하는 단축키 설정 - alt 1 으로 사용중 

 

커서가 놓인 위치의 줄 표시하기 

오른쪽 그림처럼 커서가 있는 단락의 배경에 약한 색이 들어간다

• Highlight active line 기능 : 켜기

 

참고문서

cssclasses 가 뭔지 알고싶을때 

옵시디언 css 스니펫 사용방법 / property 확인, cssclasses 추가 방법

 

읽기화면, 편집화면, 원본모드, 라이브 미리보기가 뭔지 알고싶을때 

옵시디언 편집화면-읽기화면, 원본모드-라이브 미리보기 차이