CSS • Sep 24, 2026 • 9 min read

Soolog CSS 커스터마이징 가이드 — 무엇을 바꾸면 어디가 변하는가

현재 Soolog main.css를 기준으로 색상, 글자, 카드, 본문, 그림자, 모서리, 여백, 모바일, 다크모드를 안전하게 수정하는 방법을 한 파일에 정리한 CSS 전용 실전 가이드

Soolog CSS 커스터마이징 가이드🔗

이 문서는 현재 Soolog의 themes/dream-clay/assets/css/main.css를 기준으로 작성한 CSS 전용 가이드입니다.

목표는 CSS를 처음 보는 사람도 “이 값을 바꾸면 화면의 어디가 어떻게 변하는지” 바로 알 수 있게 만드는 것입니다.

0. 먼저 알아둘 것🔗

Soolog의 CSS는 크게 다음 순서로 생각하면 됩니다.

전체 색상/크기 변수
    ↓
기본 HTML
    ↓
사이트 헤더·홈 화면
    ↓
게시글 카드
    ↓
게시글 본문
    ↓
검색·푸터·기타 UI
    ↓
커스텀 Shortcode
    ↓
모바일 / 다크모드

가장 중요한 원칙🔗

처음에는 아래 CSS 변수만 수정하는 것을 권장합니다.

:root {
  --bg: ...;
  --surface: ...;
  --surface-2: ...;
  --ink: ...;
  --muted: ...;
  --line: ...;
  --pink: ...;
  --blue: ...;
  --mint: ...;
  --yellow: ...;
  --lav: ...;
  --peach: ...;
  --shadow: ...;
  --shadow-sm: ...;
  --radius: ...;
  --radius-sm: ...;
  --max: ...;
}

이 값을 바꾸면 사이트 전체 분위기를 한 번에 바꿀 수 있습니다.

1. Soolog의 전체 분위기를 바꾸는 곳🔗

1-1. 전체 배경🔗

검색할 문자열:

--bg:

현재 값:

--bg:#eef3f7;

이 색은 블로그 전체의 가장 바깥쪽 배경입니다.

더 푸른 클레이모피즘🔗

--bg:#eef3f8;

따뜻한 아이보리🔗

--bg:#f7f3eb;

약간 더 회색인 배경🔗

--bg:#eceff2;

여기서는 순백색 #ffffff보다 약간 색이 섞인 배경이 클레이모피즘과 더 잘 맞습니다.

1-2. 카드와 게시글 내부 배경🔗

검색:

--surface:

현재:

--surface:#f7f9fb;

이 색은 다음 영역에서 매우 중요합니다.

헤더
카드
게시글 영역
검색창
버튼
댓글 영역
기타 흰색 계열 UI

순백색으로 만들면 화면이 쉽게 쨍해집니다.

1-3. 한 단계 안쪽의 배경🔗

검색:

--surface-2:

현재:

--surface-2:#e5ecf2;

주로 다음에서 사용됩니다.

검색 입력창
탭 선택 상태
스포일러
코드 인라인 배경
보조 UI

--surface와 너무 비슷하게 만들면 구분감이 줄어듭니다.

예:

--surface:#f8fafc;
--surface-2:#e9eef4;

2. 글자가 너무 하얗거나 너무 강할 때🔗

가장 중요한 변수입니다.

검색:

--ink:

현재:

--ink:#304052;

Soolog는 본문 글자를 순수 검정 #000으로 만들지 않는 것이 좋습니다.

2-1. 보조 글자🔗

검색:

--muted:

현재:

--muted:#718094;

날짜, 태그, 설명, 메타데이터 등에 사용됩니다.

너무 진하면 본문과 차이가 없어지고, 너무 연하면 읽기 어려워집니다.

3. Soolog의 포인트 색상🔗

현재 기본 팔레트는 다음과 같습니다.

--pink:#f4c8d8;
--blue:#c9dcf1;
--mint:#cfe7d5;
--yellow:#f6e1a5;
--lav:#ddd2f1;
--peach:#f2d0b6;

각 색상은 카드, 버튼, blob, callout 등에 사용됩니다.

변수	기본 역할	느낌
`--pink`	기본 accent	부드러운 포인트
`--blue`	링크/정보/카드	차분함
`--mint`	성공/여행/소개	산뜻함
`--yellow`	주의/강조	따뜻함
`--lav`	기본 카드/여행	은은함
`--peach`	소개/보조 카드	따뜻함

여행 블로그에서 특히 잘 어울리는 방향🔗

--pink:#e8cbd3;
--blue:#cbdced;
--mint:#cfe1d6;
--yellow:#eadbb0;
--lav:#dcd7ea;
--peach:#ead1bf;

기존보다 채도를 낮추면 사진과 글이 주인공이 됩니다.

4. 클레이모피즘의 핵심: 그림자🔗

검색:

--shadow:

현재 구조:

--shadow:
  8px 10px 24px rgba(94,82,72,.11),
  -7px -7px 18px rgba(255,255,255,.85);

여기서 두 번째 그림자가 너무 밝으면 화면 전체가 빛나는 흰색처럼 보이는 문제가 생깁니다.

4-1. 더 차분한 클레이모피즘🔗

--shadow:
  10px 12px 28px rgba(76,70,64,.12),
  -5px -5px 14px rgba(255,255,255,.50);

결과🔗

입체감 유지
흰색 glow 감소
배경과 카드의 구분 증가
장시간 읽을 때 눈부심 감소

4-2. 작은 UI의 그림자🔗

검색:

--shadow-sm:

버튼, 태그, 아이콘, 작은 카드에 사용됩니다.

5. 카드와 게시글을 얼마나 둥글게 만들 것인가🔗

검색:

--radius:
--radius-sm:

현재:

--radius:28px;
--radius-sm:18px;

더 둥근 클레이모피즘🔗

--radius:32px;
--radius-sm:20px;

조금 더 깔끔한 매거진 스타일🔗

--radius:22px;
--radius-sm:14px;

여행 블로그라면 28~32px 정도가 사진과 잘 어울립니다.

6. 사이트 전체 폭🔗

검색:

--max:

현재:

--max:1320px;

더 좁고 집중된 블로그🔗

--max:1080px;

사진/여행 기록을 넓게 보여주기🔗

--max:1240px;

단, 본문 자체의 가독성은 별도의 .dc-article-layout과 .dc-prose 폭이 결정하므로 --max만 바꾼다고 본문이 무조건 넓어지는 것은 아닙니다.

7. 게시글 본문을 건드리는 핵심 구역🔗

검색:

.dc-prose

현재 기본 설정:

.dc-prose{
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1.08rem;
}

7-1. 본문 글자 크기🔗

현재:

font-size:1.08rem;

조금 작게:

font-size:1.02rem;

조금 크게:

font-size:1.12rem;

여행기는 사진 사이에 긴 설명이 들어가기 때문에 너무 작은 본문은 피하는 편이 좋습니다.

7-2. 줄 간격🔗

본문 전체의 line-height를 추가하고 싶다면:

.dc-prose{
  line-height:1.78;
}

여행기처럼 사진 + 짧은 문단이 반복되는 글에는 1.7~1.85 정도가 읽기 편합니다.

7-3. 문단 간격🔗

현재:

.dc-prose p{
  margin:1.1em 0;
}

더 여유롭게:

.dc-prose p{
  margin:1.35em 0;
}

사진 중심 여행기라면 문단 사이를 조금 넓게 두는 편이 좋습니다.

8. 제목이 너무 크거나 줄이 이상할 때🔗

H1🔗

검색:

.dc-article-head h1

현재:

.dc-article-head h1{
  max-width:none;
  font-size:clamp(2.7rem,6vw,5rem);
}

여행 블로그에서는 제목을 조금 낮추는 것도 좋습니다.

예:

.dc-article-head h1{
  max-width:none;
  font-size:clamp(2.2rem,5vw,4.2rem);
  line-height:1.18;
}

H2🔗

검색:

.dc-prose h2

현재 상단 여백:

margin-top:2.4em;

여행 글에서 섹션을 확실하게 나누고 싶으면:

.dc-prose h2{
  margin-top:2.8em;
  margin-bottom:.75em;
}

9. 한국어가 음절 단위로 깨지는 문제🔗

검색:

.dc-prose

권장:

.dc-prose{
  word-break:keep-all;
  overflow-wrap:break-word;
  hyphens:none;
}

중요한 주의점🔗

전체 body에 무조건 word-break:keep-all을 걸기보다는 본문처럼 사람이 읽는 영역 중심으로 적용하는 편이 안전합니다.

URL, 코드, 매우 긴 영문 문자열까지 같은 규칙을 적용하면 다른 문제가 생길 수 있습니다.

10. 게시글 자체를 카드처럼 만들기🔗

게시글 콘텐츠 영역을 더 명확하게 배경과 분리하고 싶다면 .dc-prose에 직접 스타일을 줄 수 있습니다.

예:

.dc-prose{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:32px;
  padding:42px 48px;
  box-shadow:var(--shadow);
}

모바일:

@media (max-width:650px){
  .dc-prose{
    padding:26px 20px;
    border-radius:24px;
  }
}

결과🔗

사이트 배경

┌──────────────────────────────┐
│                              │
│  게시글                       │
│                              │
│  사진                         │
│                              │
│  본문                         │
│                              │
└──────────────────────────────┘

사이트 배경

이 구조가 Soolog의 클레이모피즘과 가장 잘 맞는 핵심 포인트입니다.

11. 게시글 사진🔗

검색:

.dc-prose img

현재:

.dc-prose img{
  border-radius:24px;
  box-shadow:var(--shadow-sm);
  cursor:zoom-in;
  margin:24px auto;
}

사진을 더 자연스럽게🔗

.dc-prose img{
  width:auto;
  border-radius:20px;
  box-shadow:0 8px 22px rgba(65,70,76,.10);
  margin:30px auto;
}

사진에 그림자가 너무 강하면 여행 사진보다 UI가 먼저 보이므로 var(--shadow-sm) 대신 더 약한 그림자를 직접 지정하는 방법도 있습니다.

12. 인용문🔗

검색:

.dc-prose blockquote

현재는 왼쪽 컬러 바 + 카드형 배경입니다.

더 부드럽게:

.dc-prose blockquote{
  margin:28px 0;
  padding:18px 22px;
  border-left:4px solid var(--blue);
  background:var(--surface-2);
  border-radius:0 18px 18px 0;
  box-shadow:var(--shadow-sm);
  color:var(--muted);
}

13. 코드 블록🔗

검색:

.dc-prose pre

현재 어두운 코드 블록은 그대로 유지하는 편이 좋습니다.

여행 블로그에서 코드를 거의 사용하지 않는다면 이 부분은 우선순위가 낮습니다.

14. 표🔗

검색:

.dc-prose table
.dc-prose th
.dc-prose td

여행 비용표는 표가 중요한 역할을 하므로 아래처럼 조금 더 카드화할 수 있습니다.

.dc-prose table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}

단, 현재 테마의 table 기본 구조와 충돌할 수 있으므로 실제 적용 후 모바일에서 확인합니다.

15. Callout을 여행 블로그처럼 만들기🔗

검색:

.dc-callout

현재는 왼쪽 컬러 바 방식입니다.

여행용 팁 카드처럼 보이게 하려면:

.dc-callout{
  margin:28px 0;
  padding:18px 20px;
  border:1px solid var(--line);
  border-left:5px solid var(--blue);
  border-radius:20px;
  background:var(--surface-2);
  box-shadow:var(--shadow-sm);
}

16. 카드의 높이🔗

검색:

.dc-card{

현재:

height:450px;

카드가 너무 길면:

height:420px;

짧게:

height:400px;

사진이 중요하면 .dc-card-cover의 높이도 함께 봐야 합니다.

.dc-card-cover{
  height:215px;
  flex:0 0 215px;
}

17. 카드 그림자가 너무 강할 때🔗

현재 카드 hover에 별도의 강한 그림자가 있습니다.

검색:

.dc-card:hover

강한 입체감을 줄이고 싶다면:

.dc-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(76,70,64,.12),-4px -4px 12px rgba(255,255,255,.45);
}

여행 사진이 많은 사이트는 hover 효과가 과한 것보다 사진 자체가 강조되는 정도가 더 안정적입니다.

18. 헤더🔗

검색:

.dc-header

주요 항목:

padding       내부 여백
border-radius 모서리
background    헤더 배경
box-shadow    입체감
backdrop-filter 투명/블러 효과

헤더가 너무 유리처럼 보이면:

.dc-header{
  background:var(--surface);
  backdrop-filter:none;
  box-shadow:var(--shadow-sm);
}

19. 버튼🔗

검색:

.dc-button

기본 버튼 크기:

padding:12px 16px;

조금 작게:

padding:10px 14px;

둥글기를 줄이려면:

border-radius:14px;

20. 링크 스타일🔗

검색:

.dc-prose a

현재는 밑줄이 있습니다.

더 차분하게:

.dc-prose a{
  color:#5b78a5;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}

여기서는 본문 색상과 너무 강하게 충돌하지 않는 중간 블루를 사용하는 것이 좋습니다.

21. 다크모드🔗

검색:

html[data-theme=dark]

여기서 다음을 바꿉니다.

--bg
--surface
--surface-2
--ink
--muted
--line
--shadow
--shadow-sm

예:

html[data-theme=dark{
  --bg:#25272b;
  --surface:#30343a;
  --surface-2:#3a3f46;
  --ink:#e6e4df;
  --muted:#a8a9aa;
  --line:rgba(255,255,255,.08);
}

실제 셀렉터는 반드시 현재 파일의 html[data-theme=dark] 표기 그대로 사용합니다.

22. 모바일에서만 바꾸는 법🔗

Soolog는 다음 구조를 사용합니다.

@media (max-width:900px){
  ...
}

@media (max-width:650px){
  ...
}

900px🔗

태블릿/작은 데스크톱 대응입니다.

650px🔗

휴대폰 대응입니다.

예:

@media (max-width:650px){
  .dc-prose{
    padding:24px 18px;
    font-size:1rem;
  }

  .dc-article-head h1{
    font-size:2.2rem;
  }
}

23. CSS를 수정할 때 가장 많이 건드릴 15개🔗

원하는 변화	찾을 문자열
전체 배경	`--bg:`
카드 배경	`--surface:`
안쪽 배경	`--surface-2:`
본문 글자	`--ink:`
보조 글자	`--muted:`
기본 포인트	`--pink:`
블루	`--blue:`
민트	`--mint:`
그림자	`--shadow:`
작은 그림자	`--shadow-sm:`
큰 둥근 모서리	`--radius:`
사이트 폭	`--max:`
본문 전체	`.dc-prose`
본문 제목	`.dc-prose h2`, `.dc-prose h3`
게시글 제목	`.dc-article-head h1`

24. 여행 블로그에 추천하는 기본 방향🔗

Soolog가 여행 블로그로 사용될 때는 다음 우선순위를 권장합니다.

사진
  ↓
본문 가독성
  ↓
배경과 카드의 구분
  ↓
부드러운 입체감
  ↓
포인트 색상
  ↓
장식

따라서 다음은 피하는 편이 좋습니다.

순백색 배경 + 강한 흰색 그림자
강한 glow
높은 채도의 포인트 색상
너무 두꺼운 외곽선
본문보다 큰 장식
과도한 hover 효과

25. 추천 여행 블로그 프리셋🔗

현재 Soolog의 클레이모피즘을 유지하면서 조금 더 차분한 여행 블로그로 만들고 싶을 때 시작점으로 사용할 수 있는 값입니다.

:root{
  --bg:#edf2f6;
  --surface:#f8fafc;
  --surface-2:#e8eef3;
  --ink:#3f454b;
  --muted:#78828b;
  --line:rgba(76,86,96,.12);

  --pink:#e7cbd4;
  --blue:#c7d9e9;
  --mint:#cce0d5;
  --yellow:#eadcaf;
  --lav:#dbd6e9;
  --peach:#ead0bd;

  --accent:var(--blue);

  --shadow:
    10px 12px 28px rgba(76,86,96,.12),
    -5px -5px 14px rgba(255,255,255,.48);

  --shadow-sm:
    4px 5px 13px rgba(76,86,96,.09),
    -3px -3px 8px rgba(255,255,255,.42);

  --radius:30px;
  --radius-sm:18px;
  --max:1180px;
}

이 값은 완성된 정답이 아니라 스타일 조정의 시작점입니다. 사진의 밝기와 배경에 따라 실제 체감이 달라질 수 있습니다.

26. 수정 순서🔗

처음 CSS를 수정한다면 다음 순서가 가장 안전합니다.

1. --bg
2. --surface
3. --surface-2
4. --ink
5. --muted
6. --shadow
7. --shadow-sm
8. --radius
9. .dc-prose
10. .dc-article-head h1
11. .dc-prose h2 / h3
12. .dc-prose img
13. .dc-callout
14. 모바일
15. 다크모드

한 번에 여러 값을 바꾸지 말고 한 번 변경 → hugo server -D로 확인 → 다음 변경 순서로 진행합니다.

27. 문제가 생겼을 때🔗

글자가 너무 하얗다🔗

먼저 검색:

color:#fff
color:white
rgba(255,255,255,

그 다음 해당 요소가 실제로 어두운 카드인지 확인합니다.

화면 전체가 너무 반짝인다🔗

먼저:

--shadow:
--shadow-sm:

의 두 번째 밝은 그림자 값을 낮춥니다.

예:

rgba(255,255,255,.85)

→

rgba(255,255,255,.45)

카드와 배경이 구분되지 않는다🔗

--bg
--surface
--surface-2

이 세 가지를 서로 충분히 다른 밝기/색조로 만듭니다.

한글이 글자 단위로 깨진다🔗

.dc-prose{
  word-break:keep-all;
  overflow-wrap:break-word;
  hyphens:none;
}

모바일만 이상하다🔗

@media (max-width:650px)를 먼저 확인합니다.

28. 변경 전 백업🔗

CSS를 크게 수정하기 전에는 파일을 복사합니다.

main.css
main.backup.css

또는 Git을 사용한다면:

git add .
git commit -m "before css redesign"

수정 후 문제가 생기면 이전 커밋으로 되돌릴 수 있습니다.

29. 마지막 체크리스트🔗

[ ] 전체 배경이 너무 밝지 않은가?
[ ] 게시글과 사이트 배경이 확실히 구분되는가?
[ ] 본문 글자가 회색/검정 계열로 편안한가?
[ ] 보조 글자가 너무 옅지 않은가?
[ ] 흰색 glow가 과하지 않은가?
[ ] 여행 사진보다 UI가 먼저 눈에 들어오지 않는가?
[ ] 제목이 모바일에서 이상하게 줄바꿈하지 않는가?
[ ] 한글 단어가 음절 단위로 깨지지 않는가?
[ ] 모바일에서 게시글 카드 안쪽 여백이 너무 크지 않은가?
[ ] 다크모드에서도 본문과 배경의 대비가 충분한가?

15. 2026-09-24 최종 게시글 레이아웃🔗

이번 버전의 게시글은 왼쪽 TOC + 오른쪽 제목/본문을 하나의 그리드로 사용합니다. 그래서 제목의 왼쪽 시작점이 실제 본문 카드와 정확히 맞습니다.

.dc-article-layout{
  grid-template-columns:minmax(210px,236px) minmax(0,1fr);
  gap:34px;
}

`.dc-article-head h1`🔗

게시글 최상단 제목입니다. 데스크톱에서는 한 줄을 우선하고, 너무 길면 시각적으로 잘리지 않고 title 속성에서 전체 제목을 확인할 수 있습니다. 모바일에서는 자연스럽게 줄바꿈합니다.

`.dc-prose`🔗

실제 Markdown 본문 박스입니다. background, box-shadow, border-radius, padding을 조정하면 포스트 카드의 독립적인 느낌을 바꿀 수 있습니다.

`.dc-toc`🔗

왼쪽 목차입니다. position: sticky, max-height, overflow-y:auto가 핵심입니다. 목차가 길어져도 목차 내부만 스크롤합니다.

`.dc-toc a.is-active`🔗

현재 읽는 섹션입니다. main.js가 현재 H2/H3 위치를 감지해 자동으로 클래스를 붙이고, TOC 내부 스크롤도 현재 항목을 보여주도록 조정합니다.

16. 모바일에서 바뀌는 점🔗

900px 이하에서는 데스크톱의 좌측 TOC를 본문 아래의 작은 목차 박스로 바꿉니다. 휴대폰에서 화면을 가로로 밀어버리는 sticky TOC를 피하기 위한 의도적인 반응형 동작입니다.

17. 긴 URL과 코드🔗

한국어 일반 문장은 word-break: keep-all을 적용하지만, URL과 코드에는 별도 규칙을 적용합니다.

.dc-prose pre{overflow:auto;white-space:pre;}
.dc-prose code{overflow-wrap:anywhere;}
.dc-prose pre code{overflow-wrap:normal;}

이 조합으로 여행 준비물 추천처럼 한국어가 한 음절씩 끊기는 문제는 줄이고, 긴 URL/코드는 화면 밖으로 튀어나오는 문제를 막습니다.

0 불러오는 중…