따뜻한 이야기 · 삶의 옵션
불편한 몸이
불편한 삶을 의미하지 않습니다
한 손으로도 세상을 바꿀 수 있다고 믿습니다.
인간의 존엄, 신앙, 그리고 기억 속에 피어난 이야기들을 전합니다.
최근 이야기
아하스, 고개를 들다 — 5부
왕은 오래된 궁전의 창가에 서서 밤하늘을 올려다보았다. 이사야의 말이 귓가에 맴돌았다. 젊은 여자가 아이를 낳을 것이고, 그 이름을 임마누엘이라 할 것이라는…
꺼지지 않는 불빛 — 성냥팔이 소녀 다시 읽기
추운 밤 혼자 남겨진 아이는 성냥 하나를 그었습니다. 잠깐의 따스함. 우리 삶도 그런 것이 아닐까요. 꺼져가는 불빛 앞에서도 다시 그어볼 수 있다는 것…
두려움을 모르는 사람
1983년, 경찰이 아이를 시설에 데려왔을 때 그 아이는 손가락 열 개를 펴 보였다고 했습니다. 세 살쯤 됐을 거라고. 그것이 그 아이의 나이가 되었고, 그것이 그 아이의 시작이었습니다…
📌 WordPress에 적용하는 방법
- 관리자 → 외모 → 사용자 정의하기(Customize)로 이동
- 추가 CSS(Additional CSS) 탭 클릭
- 아래 CSS를 복사해서 붙여넣기 — 포트폴리오
주바라기와 동일한 색상 팔레트 - 게시(Publish) 클릭하면 즉시 반영됩니다
- AWS Lightsail은
외모 → 테마 편집기 → style.css에 추가도 가능
🎨 색상 변수 — 주바라기 포트폴리오 완전 동일 필수
포트폴리오 사이트와 100% 같은 색상 팔레트입니다. 가장 먼저 적용하세요.
/* ══ 주바라기 × 내필션 — 공통 색상 팔레트 ══ */
:root {
--color-bg: #FAF7F2;
--color-text: #2C2420;
--color-text-light: #7A6E64;
--color-accent: #C4683C; /* 테라코타 포인트 */
--color-accent-light: #E8A87C;
--color-warm: #F5E6D3;
--color-card: #FFFFFF;
--color-border: #E8DDD0;
}
/* 배경 & 기본 폰트 */
body {
background-color: var(--color-bg) !important;
color: var(--color-text) !important;
font-family: 'Noto Sans KR', sans-serif !important;
}
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
🏠 헤더 필수
주바라기 포트폴리오의 반투명 스크롤 헤더 스타일을 WordPress에 적용합니다.
/* ══ 헤더 ══ */
#masthead, .site-header, header.site-header {
background: rgba(250,247,242,0.95) !important;
backdrop-filter: blur(12px) !important;
border-bottom: 1px solid var(--color-border) !important;
box-shadow: 0 2px 20px rgba(0,0,0,0.06) !important;
padding: 0 40px !important;
}
/* 사이트 타이틀 */
.site-title a, .site-title, #site-title {
font-family: 'Noto Serif KR', serif !important;
font-size: 22px !important; font-weight: 900 !important;
color: var(--color-accent) !important;
text-decoration: none !important;
letter-spacing: -0.02em !important;
}
/* 사이트 설명 */
.site-description, #site-description {
font-size: 12px !important; font-weight: 300 !important;
color: var(--color-text-light) !important;
}
/* 내비게이션 */
.main-navigation a, .nav-menu a {
color: var(--color-text-light) !important;
font-size: 14px !important; font-weight: 500 !important;
padding: 8px 14px !important; border-radius: 8px !important;
transition: all 0.2s ease !important;
text-decoration: none !important;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
color: var(--color-accent) !important;
background: rgba(196,104,60,0.08) !important;
}
📄 포스트 카드 & 본문 필수
/* ══ 포스트 카드 ══ */
.post, article.post, .hentry {
background: var(--color-card) !important;
border: 1px solid var(--color-border) !important;
border-radius: 20px !important;
padding: 28px !important;
margin-bottom: 20px !important;
transition: all 0.3s ease !important;
}
.post:hover, article.post:hover, .hentry:hover {
border-color: var(--color-accent-light) !important;
box-shadow: 0 8px 32px rgba(196,104,60,0.1) !important;
transform: translateY(-3px) !important;
}
/* 포스트 제목 */
.entry-title, h1.entry-title, h2.entry-title {
font-family: 'Noto Serif KR', serif !important;
font-size: 20px !important; font-weight: 700 !important;
color: var(--color-text) !important;
line-height: 1.5 !important; margin-bottom: 12px !important;
}
.entry-title a:hover { color: var(--color-accent) !important; }
/* 본문 텍스트 */
.entry-content {
font-size: 16px !important;
line-height: 1.9 !important;
color: var(--color-text) !important;
font-weight: 300 !important;
}
.entry-content p { margin-bottom: 1.5em !important; }
/* 카테고리 */
.cat-links, .category {
font-size: 10px !important; font-weight: 600 !important;
color: var(--color-accent) !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
}
/* 날짜 */
.posted-on, .entry-date {
font-size: 11px !important;
color: #A8A09A !important; font-weight: 300 !important;
}
/* 더 읽기 버튼 */
.more-link, a.more-link {
display: inline-flex !important;
align-items: center !important;
padding: 12px 28px !important;
background: var(--color-accent) !important;
color: #fff !important;
border-radius: 12px !important;
font-size: 14px !important; font-weight: 600 !important;
text-decoration: none !important;
box-shadow: 0 4px 16px rgba(196,104,60,0.3) !important;
transition: all 0.3s !important;
}
.more-link:hover, a.more-link:hover {
background: #b35d35 !important;
transform: translateY(-2px) !important;
}
📌 사이드바 위젯
/* ══ 사이드바 & 위젯 ══ */
.widget {
background: var(--color-card) !important;
border: 1px solid var(--color-border) !important;
border-radius: 16px !important;
padding: 22px !important;
margin-bottom: 20px !important;
}
.widget-title, .widgettitle {
font-size: 11px !important; font-weight: 600 !important;
color: var(--color-accent) !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
border-bottom: 1px solid var(--color-border) !important;
padding-bottom: 10px !important;
margin-bottom: 14px !important;
}
.widget ul li {
font-size: 13px !important;
color: var(--color-text-light) !important;
padding: 7px 0 !important;
border-bottom: 1px solid var(--color-border) !important;
font-weight: 400 !important;
}
.widget ul li:last-child { border: none !important; }
.widget a { color: var(--color-text-light) !important; }
.widget a:hover { color: var(--color-accent) !important; }
🦶 푸터
/* ══ 푸터 ══ */
#colophon, .site-footer, footer.site-footer {
background: var(--color-text) !important;
border-top: 3px solid var(--color-accent) !important;
padding: 48px 40px !important;
text-align: center !important;
}
#colophon .site-title a, .footer-site-title {
font-family: 'Noto Serif KR', serif !important;
font-size: 22px !important; font-weight: 900 !important;
color: var(--color-accent) !important;
}
.site-info, #colophon p {
font-size: 12px !important;
color: #5A4840 !important; font-weight: 300 !important;
}
.site-info a { color: #9A8880 !important; }
.site-info a:hover { color: var(--color-accent-light) !important; }
✨ 세부 꾸밈 (선택)
/* ══ 제목 강조 ══ */
.entry-content h2 {
font-family: 'Noto Serif KR', serif !important;
font-size: 20px !important; font-weight: 700 !important;
color: var(--color-text) !important;
position: relative !important;
padding-bottom: 6px !important;
margin: 2em 0 1em !important;
}
.entry-content h2::after {
content: '' !important;
position: absolute !important; bottom: 0 !important; left: 0 !important;
width: 40px !important; height: 3px !important;
background: var(--color-accent) !important;
border-radius: 2px !important;
}
/* 인용문 */
blockquote {
background: var(--color-warm) !important;
border-left: 4px solid var(--color-accent) !important;
border-radius: 0 12px 12px 0 !important;
padding: 20px 24px !important;
margin: 2em 0 !important;
font-style: italic !important;
}
/* 링크 */
a { color: var(--color-accent) !important; }
a:hover { color: #b35d35 !important; }
/* 텍스트 선택 */
::selection {
background: var(--color-accent-light) !important;
color: var(--color-text) !important;
}
/* 시니어 가독성 — 큰 글씨 */
body { font-size: 17px !important; line-height: 1.9 !important; }
.entry-content {
font-size: 17px !important;
max-width: 680px !important;
margin: 0 auto !important;
}
/* 모바일 */
@media (max-width: 768px) {
body { font-size: 16px !important; }
#masthead, .site-header { padding: 0 20px !important; }
.entry-title { font-size: 18px !important; }
}
주바라기 포트폴리오와 동일한 테라코타(#C4683C) + 크림(#FAF7F2) 감성에 맞는 테마를 추천합니다.
AWS Lightsail은 모든 테마 설치 가능 / WordPress.com 무료는 무료 테마만 사용 가능합니다.
AWS Lightsail은 모든 테마 설치 가능 / WordPress.com 무료는 무료 테마만 사용 가능합니다.
1
Astra
위 CSS와 가장 잘 맞습니다. CSS 변수 지원이 완벽하고 라운드 카드 스타일 구현이 쉽습니다. 시니어 독자를 위한 폰트 크기 조절도 간단합니다. 주바라기와 내필션 두 사이트 모두에 동일하게 적용 가능합니다.
2
Kadence
Noto Serif KR 폰트 설정이 테마 자체에서 가능해서 CSS 없이도 기본 설정만으로 포트폴리오와 비슷한 분위기를 낼 수 있습니다. 라운드 카드 레이아웃을 기본 지원합니다.
3
Neve
WordPress.com 무료 플랜에서도 사용 가능합니다. 감성적 블로그 레이아웃 프리셋 제공. 위 CSS를 추가 CSS에 붙여넣으면 주바라기와 통일된 느낌을 낼 수 있습니다.
🏠 홈페이지 레이아웃 구성 (Gutenberg 블록)
- 외모 → 사용자 정의하기 → 홈페이지 설정에서
정적 페이지선택 - 홈페이지용 페이지를 새로 만들고 Gutenberg 편집기로 열기
- 아래 구성대로 블록을 추가 — 주바라기 포트폴리오와 연결되는 구조로 설계
- 설정 → 읽기 → 홈페이지 표시도 함께 확인
📐 추천 블록 구조
┌────────────────────────────────────────────────┐ │ 헤더 (주바라기 · 내필션 + 내비게이션) │ │ 배경: rgba(250,247,242,0.95) + backdrop-blur │ ├────────────────────────────────────────────────┤ │ 히어로 [커버 블록] │ │ 배경: linear-gradient(#FAF7F2 → #F5E6D3) │ │ 제목: "불편한 몸이 불편한 삶을 의미하지 않습니다" │ │ 버튼: "최신 글 읽기" — 색상 #C4683C │ ├─────────────────────────┬──────────────────────┤ │ 최신 글 목록 (2/3) │ 사이드바 (1/3) │ │ → 최신 글 블록 │ → 소개 텍스트 위젯 │ │ → 발췌문 ON │ → 카테고리 위젯 │ │ → 카드형 스타일 │ → 오늘의 말씀 위젯 │ ├────────────────────────────────────────────────┤ │ 카테고리 4칸 그리드 │ │ [인간 드라마] [신앙 에세이] [소설 연재] [자서전] │ │ 배경색: #F5E6D3 / 포인트: #C4683C │ ├────────────────────────────────────────────────┤ │ 명언 섹션 [인용 블록] │ │ "불편한 몸이 불편한 삶을 의미하지 않습니다." │ │ 배경: #2C2420 / 텍스트: #FAF7F2 │ ├────────────────────────────────────────────────┤ │ 푸터 │ │ 주바라기 · 마우스 하나로 만든 공간 │ └────────────────────────────────────────────────┘
🔗 주바라기 ↔ 내필션 연결 팁
/* 포트폴리오 링크 배너 — 사이드바나 푸터에 추가 */
.portfolio-link-banner {
background: var(--color-warm);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 20px 24px;
text-align: center;
margin-bottom: 20px;
}
.portfolio-link-banner a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 24px;
background: var(--color-accent);
color: #fff !important;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
text-decoration: none !important;
transition: all 0.2s;
}
.portfolio-link-banner a:hover {
background: #b35d35 !important;
transform: translateY(-1px);
}