소개: 시도하고자 했던 것과 그 이유를 알려주세요.
초기 목표였던, chatGPT 대화 내용을 Obsidian으로 가져와서 활용하기는 어느 정도 달성되었기에 욕심을 부려 Obsidian의 Style 변경하기에 도전합니다. Obsidian Expert께서 보여주셔서 눈에 띄었던, 그래서 저도 해보고 싶다는 생각이 든 3 가지를 따라해보려 합니다.
진행 방법: 어떤 도구를 사용했고, 어떻게 활용하셨나요?
첫번째 따라해보고 싶었던 것은 작성된 노트에서 현 위치의 글씨 뒤에 음영 처리되는 것입니다.
chatGPT에게 질문하여 답을 얻었습니다.
-----------------------------------------------------------------------------------------------------------
ChatGPT의 말:
📌 Obsidian에서 줄에 배경(음영) 효과 적용하기
Obsidian에서 현재 커서가 위치한 줄이나 텍스트가 있는 줄 전체에 배경 효과(음영)를 추가하려면, CSS Snippet을 활용하면 해결할 수 있 습니다.
✅ 1. 현재 커서가 있는 줄에 배경(음영) 효과 적용하기
현재 커서가 위치한 줄에 배경을 강조하려면 CSS Snippet을 추가해야 합니다.
💡 적용 방법
1. Settings → Appearance → Snippets에서 snippets 폴더 열기
2. highlight-line.css 파일을 생성
3. 아래 CSS 코드 추가 후 저장
4. Obsidian에서 해당 Snippet을 활성화
🎨 CSS 코드 (highlight-line.css)
css
/* 1. 현재 커서가 위치한 줄에 배경 강조 */
.cm-active.cm-line {
background-color: rgba(255, 255, 100, 0.2); /* 연한 노란색 */
transition: background-color 0.2s ease-in-out;
}
/* 2. 마우스를 올린 줄에 배경 강조 */
.cm-line:hover {
background-color: rgba(100, 100, 100, 0.2); /* 연한 회색 */
transition: background-color 0.1s ease-in-out;
}
✅ 2. 텍스트가 있는 줄 전체에 배경(음영) 효과 적용하기
만약 텍스트가 있는 모든 줄에 자동으로 배경(음영) 효과를 적용하고 싶다면, 다음 CSS 코드를 사용하세요.
🎨 CSS 코드 (text-line-highlight.css)
css
/* 텍스트가 포함된 줄에 배경 추가 */
.cm-contentContainer .cm-line:not(:empty) {
background-color: rgba(50, 50, 50, 0.1); /* 연한 회색 */
padding: 2px 5px;
border-radius: 4px;
}
✅ 3. 적용 결과
이제 Obsidian에서 텍스트가 있는 줄과 현재 커서가 위치한 줄에 배경(음영) 효과가 적용됩니다.
🎯 추가적으로 색상 조정이나 특정 스타일을 원하면 알려줘! 양식의 맨 아래
-----------------------------------------------------------------------------------------------------------
무슨 말인지 거의 모릅니다. 그래도 구요한님의 “Obsidian 101” 수업에서 들은 설정에서, ‘Appearance’ 내의 ‘CSS snipets’에서 다양하게 스타일을 조정할 수 있다고 설명하시면서, 너무 많이 쓰면 느려지니 조심하라던 이야기가 기억납니다. 정확한 기억인지는 알 수 없지만, 멋부리기로 했으니 계속 도전해봅니다. 그런데 CSS 파일을 어떻게 만드는지 모릅니다. 그래서 chatGPT에게 물어봅니다. 친절한 답변을 얻었습니다.
답변 중 “1. 현재 커서가 있는 줄에 배경(음영) 효과 적용하기”에 대해 시키는 대로 파일을 만들어서 적용하였습니다.
그 결과, 마우스 커서가 있는 줄에 음영이 표시됩니다.
마우스가 클릭된 줄에는 노란색 표시가, 현재 마우스가 있는 줄에는 음영 표시도 됩니다.
첫번째 성공에 자신감을 얻고 두번째 멋부리기에 도전합니다.
여러 번 시도했지만, 실패했습니다.
세번째 멋부리기 도전으로 변경해서 시도해봅니다.
이 또한 실패했습니다. 이 스타일은 이태극님이 logseq로 발표하는 자료에서도 본 것으로 꼭 해보고 싶었지만, 현재 제 능력으로는 어려운 것 같습니다. 도움이 필요합니다. 옵시디언 스터디에서 질문해서 해결할 숙제로 남겨둡니다.
결과와 배운 점
거의 아무 것도 모르는 상태에서 chatGPT와의 대화만으로 해결되는 것들이 상당히 많은 것 같습니다. 앞으로도 계속 활용해야겠습니다. 그럼에도 불구하고 안되는 것들도 있습니다. 어느 정도 시도해 본 후, 잘 아는 분들께 도움을 구하는 것도 좋은 방법이라고 생각합니다. 이런 점에서 GPTers는 최고입니다. 지난 번과 마찬가지로 이번 문제도 스터디에서 문제가 해결될 것으로 기대합니다.
도움 받은 글 (옵션): 참고한 지피터스 글이나 외부 사례를 알려주세요.
아래와 같습니다.
* GPTers 14기 (구요한) 옵시디언 커맨드스페이스: AI의 언어 마크다운으로 지식관리
* [CS4BT] Obsidian 101 --- 유료 강의