<br> ## 옵시디언 개발 로드맵 [Obsidian Roadmap | Trello](https://trello.com/b/Psqfqp7I/obsidian-roadmap) [Obsidian Release Notes](https://forum.obsidian.md/c/announcements/13) <br> --- # Obsidian v0.16.0 테마 마이그레이션 가이드 Release date: 2022.08.29 <br> ## [0.16.0 Theme Migration Guide - Announcements - Obsidian Forum](https://forum.obsidian.md/t/0-16-0-theme-migration-guide/42537) <br> ### 개요 옵시디언 0.16은 새로운 기본 테마, 새로운 테마 버전 관리 시스템 및 몇 가지 중요한 새 기능을 도입했습니다. 우리는 대부분의 테마(themes)와 플러그인(plugins)에 약간의 조정이 필요할 것으로 예상합니다. - 테마를 새 버전 관리 시스템으로 마이그레이션 - 0.16+용 테마를 디자인하는 방법 - 고려해야 할 새로운 0.16 기능 및 모드 - 디자인 가이드라인 <br> ### 테마를 새 버전 관리 시스템으로 마이그레이션 0.16에는 많은 주요 변경 사항이 포함되어 있으므로 이 시간을 내어 테마 갤러리(theme gallery)를 재설정하고 앞으로 옵시디언에서 테마를 로드하는 방법을 개선하려고 합니다. 0.16과 호환되지 않는 테마는 community-css-themes.json 파일에서 "레거시(legacy)"로 플래그가 지정되었습니다. 레거시 테마는 테마 작성자가 테마를 업데이트하여 플래그가 제거되도록 선택할 때까지 갤러리에서 숨겨집니다. 테마가 새 목록에 포함되더라도 새 버전의 옵시디언에 맞게 테마를 준비하려면 다음 단계를 수행하는 것이 좋습니다. 1. obsidian.css 파일의 복사본을 만들고 이름을 theme.css로 바꿉니다. 옵시디언의 이전 버전에서 테마를 계속 다운로드할 수 있도록 obsidian.css 파일을 저장소에 보관하십시오. obsidian.css 파일을 출력하는 전처리 도구가 있는 경우 해당 도구도 업데이트해야 합니다. 2. Obsidian 0.16에서 테마를 테스트하고 모든 문제를 theme.css에 적용하세요. 3. 저장소에 manifest.json 파일을 만듭니다. 이 파일은 테마의 minAppVersion을 지정합니다. 즉, 지정한 버전보다 오래된 옵시디언 버전은 테마를 설치할 수 없습니다. #### 샘플 Manifest.json ``` { "name": "Sample Theme", "version": "1.0.0", "minAppVersion": "0.16.0", "author": "Obsidian", "authorUrl": "https://obsidian.md" } ``` 4. 선택 사항: 스크린샷 미리보기 이미지(screenshot thumbnail)를 업데이트합니다. 가로 세로 비율은 16:9여야 하며 권장 크기는 512 x 288픽셀입니다. 5. 테마의 README 파일을 업데이트합니다. 테마 갤러리에서 테마를 클릭하면 이제 Github의 README 파일이 생성됩니다. 즉, 테마를 홍보할 수 있는 더 많은 공간이 있고 추가 스크린샷을 로드하여 다양한 기능을 선보일 수 있습니다. 6. obsidian-releases 리포지토리에서 풀 요청을 만들고 community-themes.json의 테마 항목에서 "legacy": true를 제거합니다. <br> ### 0.16+용 테마를 디자인하는 방법 TLDR: Obsidian 0.16에는 옵시디언 UI의 거의 모든 측면에 스타일을 지정하는 데 도움이 되는 400개 이상의 새로운 CSS 변수가 도입되었습니다. 이렇게 하면 테마(theme)에서 복잡한 선택기를 제거하고 변수가 무거운 작업을 수행할 수 있습니다. Obsidian 0.16이 출시되면서 맞춤형 테마(custom themes)와 스니펫(snippets)을 훨씬 쉽게 만들 수 있게 되었습니다. 이전에는 옵시디언의 많은 UI 요소가 높은 특수성을 가진 복잡한 CSS 선택기를 작성해야만 대상이 될 수 있었습니다. 읽기 모드(Reading mode)와 실시간 미리 보기(Live Preview)에서 동일한 요소를 대상으로 지정하려면 일반적으로 여러 선택기가 필요했습니다. 0.16에서는 대부분의 UI 요소를 본문 요소에 적용된 CSS 변수로 추상화했습니다. app.css 파일 상단에서 모든 CSS 변수의 알파벳순 목록을 찾을 수 있습니다. 또한 이러한 변수는 읽기 모드(Reading mode)와 실시간 미리 보기(Live Preview)에서 패리티를 제공하도록 설계되었습니다. 우리의 목표는 CSS 선택기에서 덜 구체적이고 표현력이 풍부한 테마(theme)를 만들 수 있도록 하는 것이었습니다. 대부분의 테마는 인터페이스 스타일링을 위해 단순히 본문을 대상으로 하고 색상을 위해 .theme-light/.theme-dark를 대상으로 지정하여 인터페이스를 완전히 사용자 정의할 수 있어야 합니다. 이러한 변경으로 인해 고급 테마의 코드 줄 수가 크게 줄어들 것으로 기대합니다. 이렇게 하면 유지 관리 작업이 줄어들고 코드가 미래에 대비할 수 있습니다. 복잡한 테마에서 작업하는 경우 선택기를 단순화하고 새로운 CSS 변수를 사용하여 무거운 작업을 수행하는 것을 고려하십시오. 또한 새로운 CSS 변수를 사용하면 조건부 CSS 클래스에 반응하는 스타일을 더 쉽게 만들 수 있습니다. ### 요약: - app.css를 보고 개발자 도구를 사용하여 CSS의 새 변수 탐색 - 가능한 가장 낮은 특이도 선택기를 사용하십시오. body, .theme-light 및 .theme-dark만 사용할 수 있습니다. <br> ### 고려해야 할 새로운 0.16 기능 및 모드 Obsidian 0.16에는 테마에서 고려해야 할 새로운 기능과 모드가 포함되어 있습니다. <br> #### 액센트 컬러(Accent color) 이제 사용자는 강조 색상을 사용자 지정할 수 있습니다. 액센트 HSL 값 --accent-h, --accent-s, --accent-l에 대한 동적 변수가 제공되며 CSS calc() 함수로 수정할 수 있습니다. 테마에서 이러한 변수를 정의하면 사용자에게 기본 강조 색상이 표시되고 기본값으로 재설정하면 사용자가 지정된 기본 강조 색상으로 돌아갑니다. <br> #### 제목 표시줄 스타일(Title bar style) 설정(Settings) -> 테마(Appearance)에서 사용자는 이제 세 가지 제목 표시줄 스타일(Title bar style) 중에서 선택할 수 있습니다. - **숨김(Hidden)**: 제목 표시줄(title bar)이 표시되지 않고 탭의 맨 위 행만 표시되며 0.16+에서 기본 설정(default)입니다. - **사용자 지정(Custom/Obsidian)**: CSS로 스타일을 지정할 수 있는 사용자 지정 제목 표시줄 요소를 표시합니다(이전 버전 0.15 및 이전 버전에서는 기본값). - **기본(Native)**: 기본 운영 체제 제목 표시줄을 표시합니다. <br> #### 탭의 맨 위 행 및 .mod-top 사용자 정의 제목 표시줄/Obsidian Frame(활성화된 경우)과 탭의 맨 위 행을 모두 포함하는 애플리케이션의 상단 영역은 단일 UI 영역으로 간주됩니다. 기본 테마는 이 상단 영역에 단일 배경색을 사용합니다. .mod-top modifier 클래스가 사이드바와 창의 탭 맨 위 행에 추가됩니다. .mod-top 내부의 탭 컨테이너는 --tab-container-background 변수 대신 --titlebar-background 변수를 사용합니다. <br> #### 사이드바(sidebars) 및 사이드바 버튼 ※ 참고: 오른쪽 리본이 제거되었습니다. 사이드바 토글 버튼이 탭의 맨 위 행으로 이동했습니다. 사용자의 운영 체제에 따라 창 버튼(최소화, 최대화, 닫기)이 애플리케이션의 왼쪽 또는 오른쪽에 있을 수 있습니다. 사용자가 제목 표시줄을 숨김으로 설정하면 사이드바 버튼의 위치를 고려해야 함을 의미합니다. macOS 대 Windows에서 특히 제목 표시줄(title bar)이 숨겨져 있는 경우 다음 시나리오를 고려하십시오. - 왼쪽 사이드바 닫힘 - 오른쪽 사이드바 닫힘 - 팝업 창에는 사이드바가 없습니다. - 전체 화면에는 창 버튼이 없습니다. <br> #### 헤더 보기(view header) 이제 보기 헤더(view header)가 기본적으로 비활성화되어 있고 보기 헤더 아이콘(view-header-icon)이 제거되었습니다. 사용자는 모양 설정에서 보기 헤더를 다시 활성화할 수 있습니다. <br> ### 디자인 가이드라인 0.16부터 기본 옵시디언 환경은 운영 체제 설계 지침 및 모범 사례와 일치하도록 설계되었습니다. 우리의 의도는 옵시디언을 새로운 사용자에게 친숙하게 만들고 응용 프로그램의 화면과 모드 전반에 걸쳐 응집력을 만드는 것입니다. 플러그인 개발자는 사용자가 기본 테마를 사용할 때 일관된 경험을 할 수 있도록 이러한 디자인 지침을 따르도록 권장합니다. <br> #### 패딩(padding), 여백(margins) 및 간격(spacing) 옵시디언은 4픽셀 격자를 사용합니다. 4픽셀 그리드는 인터페이스가 높거나 낮은 DPI 화면에서 확장 및 축소할 수 있도록 하고 레이아웃에 편리한 비율을 제공하기 때문에 선택되었습니다. UI 요소는 앱 전체의 패딩 및 간격에 4의 배수를 사용합니다. 플러그인 전체에서 모든 차원을 정의하려면 --size CSS 변수를 사용하는 것이 좋습니다. 각 크기 변수에는 밑수와 배수를 나타내는 두 개의 숫자가 포함됩니다. 예를 들면 다음과 같습니다. - --size-4-1은 4\*1 = 4px를 나타냅니다. - --size-4-2는 4\*2 = 8px를 나타냅니다. - --size-4-4는 4\*4 = 16픽셀을 나타냅니다. 소수의 --size-2-x 변수는 4의 분수가 유용할 수 있는 작은 공간에 사용할 수 있습니다. --size-2-1은 2\*1 = 2px를 나타냅니다. <br> #### 커서(cursor) 옵시디언은 커서에 대한 운영 체제 규칙을 따릅니다. 즉, 포인터 커서는 링크 위로 마우스를 가져갈 때만 사용됩니다. 버튼 및 대화형 요소에 포인터 커서를 사용하지 마십시오. - --cursor 변수를 사용하여 시스템 규칙을 따르십시오. - 링크에 --cursor-link 사용 <br> #### 아이콘(icons) ★ 중요: Obsidian의 향후 업데이트에서 테마(theme)가 아이콘을 대체하는 새로운 방법을 제공할 것입니다. 지금은 CSS를 통한 아이콘 교체를 피해야 합니다. 옵시디언에는 플러그인에 사용할 수 있는 800개 이상의 아이콘이 있는 Lucide 3 아이콘 라이브러리가 포함되어 있습니다. Lucide 라이브러리에서 사용할 수 없는 아이콘을 사용하려는 경우 직접 만들 수 있습니다. 옵시디언과의 최상의 호환성과 응집력을 위해 아이콘은 Lucide의 지침을 따라야 합니다. - 아이콘은 24 x 24픽셀 캔버스에서 디자인해야 합니다. - 아이콘에는 캔버스 내에서 최소 1픽셀의 패딩이 있어야 합니다. - 아이콘의 획 너비는 2픽셀이어야 합니다. - 아이콘은 라운드 조인을 사용해야 합니다. - 아이콘은 둥근 대문자를 사용해야 합니다. - 아이콘은 가운데 획을 사용해야 합니다. - 아이콘의 모양(예: 직사각형)은 테두리 반경이 2픽셀이어야 합니다. - 고유한 요소는 서로 2픽셀의 간격을 가져야 합니다. Lucide는 Illustrator, Figma 및 Inkscape와 같은 벡터 편집기를 위한 템플릿 및 가이드 2도 제공합니다. <br> ## 연결 문서 [[_Index_1_Obsidian]] [[옵시디언 버전 업데이트(releases) 정보 - v0.16.x (Insider)]]