01핵심 개요
| 항목 | 내용 |
|---|
| 제작·배포 | 오후다섯씨 자작, 평생 무료 배포 |
| 목적 | 보기 좋으면 자주 쓰게 됨 → 생산성 향상 |
| 핵심 도구 | 옵시디언 CSS 스니펫 + 바이브 코딩(AI) |
| 적용 방식 | 테마 통째 교체 X, 원하는 부분만 덮어쓰기 |
| 편집 환경 | VS Code · 클로드 데스크톱 · 터미널 |
02핵심 내용 구조
- 왜 옵시디언인가: AI가 만드는 결과물이 마크다운(MD) 파일 → 이를 읽고 쓰는 무료 생산성 도구이자 AI 에이전트 시대의 핵심 도구.
- 문제의식: 기본 폰트·테이블이 촌스러워 눈에 잘 안 들어옴 → 보기 좋게 만들면 자기 자신에게 보여주는 생산성도 올라감.
- 해법: CSS 스니펫으로 폰트·자간·정렬·테이블만 클로드 스타일로 교체.
03적용 절차 (CSS 스니펫)
- 설정 → 외관 → 아래로 스크롤 → 'CSS 스니펫' 항목.
- 폴더 아이콘 클릭 → 스니펫 폴더 열림.
- 제공받은 CSS 파일을 폴더에 넣고 새로고침 → 토글 ON.
- 원본은 그대로 두고 복사본을 수정하는 것이 안전(나중에 비교·복원 용이).
- 다크 모드 + 강조색을 클로드 주황색으로 세팅하면 링크·강조가 일괄 변경.
04바이브 코딩으로 CSS 수정
- 예전: CSS를 직접 수정하려면 수개월 학습 필요.
- 지금: "자간 넓게 해줘 · 폰트 바꿔줘 · 색 바꿔줘"처럼 말로 지시 → AI가 코드 작성.
- 클로드 데스크톱/VS Code/터미널에서 실행하면 AI가 파일에 직접 접근·수정·세팅까지 자동 수행.
05핵심 워크플로우 — 4가지 배울 점
- ① CSS 기초: 폰트·자간·정렬·테이블이 문서 가독성과 생산성을 좌우.
- ② 스니펫 설치: 설정 → 외관 → CSS 스니펫 폴더에 파일 추가.
- ③ 나만의 CSS 제작: AI에게 자연어로 요청해 커스텀 스니펫 생성.
- ④ UI 커스터마이징: 강조색·다크모드 등 자기 취향대로 전환.
06활용 시나리오
- AI 결과물 정리: AI가 뱉은 마크다운을 깔끔한 테이블·타이포로 즉시 가독성 확보.
- 개인 지식관리: 매일 보는 노트 화면을 보기 좋게 만들어 작성 습관 유지.
- 비개발자: 코딩 지식 없이 말만으로 디자인 커스터마이징.
07현황 및 전망
- 현재: 클로드 스타일 CSS + UI 변경법 무료 공개.
- 의미: '바이브 코딩'이 디자인 영역까지 확장 → 비개발자도 외관 커스터마이징 가능.
- 전망: AI 에이전트 시대에 마크다운 기반 도구(옵시디언)의 중요성 증가.
08용어 사전
| 용어 | 한줄 설명 | 비유/예시 |
|---|
| CSS 스니펫 | 테마 전체가 아닌 원하는 부분만 덮어쓰는 스타일 조각 | 옷 전체가 아니라 단추만 바꿔 다는 것 |
| 마크다운(MD) | 기호로 서식을 표현하는 가벼운 문서 형식 | 메모장으로 쓰는 워드 문서 |
| 바이브 코딩 | 말로 지시하면 AI가 코드를 짜주는 방식 | 통역사에게 말로 시켜 외국어 편지 작성 |
| 강조색(Accent) | 링크·하이라이트에 쓰이는 포인트 컬러 | 형광펜 색을 한 번에 바꾸기 |