다크모드에 어울리는 네온 앰비언트 표 만들기

표를 바꿔보자!

 

옵시디언을 메모앱으로 쓰다 보면, 참 마음에 드는 기능이 많다.
그런데 유독 눈에 걸리는 게 있었다. 표(table)였다.

기본 스타일은 지나치게 단정하다 못해 밋밋했다.
특히 다크모드를 사용할 때면, 배경과의 조화도 어색하고 가독성도 떨어졌다.

그래서 CSS 스니펫을 직접 만들어서 표를 다시 디자인해보기로 했다.

---

왜 굳이 표를 건드렸냐고?

솔직히 말하자면, ‘필요해서’라기보다 ‘보기 좋게 만들고 싶어서’였다.
일상적인 메모에서도, 구조가 보이는 정보 정리는 분명 더 오래 기억에 남는다.
그 중에서도 표는 시선을 분산시키기도 하고, 정보를 구획화하기에도 좋다.

그러니까, 표가 예뻐야 한다.

---

목표는 이랬다

• 다크모드에 어울리는 배경색
• 부드러운 둥근 테두리
• 셀마다 hover 반응 가능
• 표 테두리에 은은한 노란빛 앰비언트 효과
• 그리고 가장 중요한 건, ‘티 안 나게 고급스러운 것’

---

최종적으로 만든 CSS는 이렇다

/* 옵시디언용 – 다크모드 앰비언트 테이블 스타일 */
.markdown-preview-view table,
.markdown-rendered table {
  width: calc(100% - 24px);
  margin: 24px auto;
  padding: 12px;
  background-color: #1e1e1e;
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  box-shadow:
    0 0 6px 1px rgba(255, 235, 100, 0.10),
    0 0 12px 2px rgba(255, 235, 100, 0.08),
    0 0 16px 3px rgba(255, 215, 80, 0.06);
}

.markdown-preview-view th,
.markdown-rendered th,
.markdown-preview-view td,
.markdown-rendered td {
  background-color: #2c2c2c;
  color: #f5f5f5;
  border: 1px solid #3a3a3a;
  padding: 14px;
  text-align: center;
  border-radius: 8px;
  font-family: 'Noto Sans KR', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.markdown-preview-view th,
.markdown-rendered th {
  background-color: #333029;
  color: #fce08d;
  font-weight: bold;
}

.markdown-preview-view td:hover,
.markdown-rendered td:hover,
.markdown-preview-view th:hover,
.markdown-rendered th:hover {
  background-color: #3a3a2f;
  color: #fffbe6;
}

---

이렇게 적용하면 된다

1. 옵시디언 > 설정 > 외형 > CSS 스니펫 메뉴로 이동
2. .css 파일을 새로 만들어 위 내용을 붙여넣기
3. 저장 후, 해당 스니펫을 활성화하면 끝

별다른 설정 없이도 바로 적용된다.

---

결과적으로, 어땠냐면

 

표는 너무 튀지 않으면서도 다크모드 배경 위에 잘 녹아들었다.
hover 효과로 셀 하나하나가 살아있고,
노란빛 테두리는 밤에 스탠드 조명 아래 펼쳐둔 노트의 느낌을 준다.

작은 변화였지만, 옵시디언의 분위기가 훨씬 깊어졌다.
개인적으로는 아주 만족스럽다.

---

다음에는?

이 스타일을 코드 블럭, callout 박스, 인라인 강조 등으로 확장해볼 예정이다.
다크모드에서 은은한 발광 스타일이 궁금한 분이라면,
한 번쯤 직접 만들어보는 것도 나쁘지 않을 것이다.