10 Mar 2026,

Siku.name 블로그 레이아웃 설계

설계 목적

이 블로그는 기록 중심의 개인 사이트로 설계한다. 구조는 단순하지만 읽기 경험과 기록의 지속성을 최우선으로 둔다.

핵심 원칙은 다음과 같다.

레이아웃은 Header → Content → Footer
좌우 사이드바 없이 단일 중앙 컨테이너 구조
읽기 영역과 이미지 영역을 명확히 분리
페이지 종류마다 명확한 역할

기본 레이아웃

컨테이너 규칙

요소	폭
전체 콘텐츠 컨테이너	900px
글 읽기 영역	680px
커버 이미지 / 대표 이미지	화면 전체

텍스트는 항상 680px 안에서 읽히도록 한다. 이미지는 필요할 때 900px 또는 화면 전체 폭을 사용한다.

모바일에서는 폭이 자동으로 줄어들도록 한다.

전체 페이지 구조

Header (sticky)
Content
Footer

특징

좌우 사이드바 없음
중앙 컨테이너만 존재
단순하고 안정적인 읽기 구조

고정 헤더이며 항상 화면 상단에 유지된다.

메뉴 구성

Siku.name   Memos   Minis   Hej!

특징

흰색 배경
검은 글씨
모바일에서도 토글 없이 모두 표시
화면이 좁아지면 폰트 크기만 감소

푸터는 두 개의 영역으로 구성된다.

1단계

배경: 연한 회색

Stay updated!
RSS로 새 글을 확인해 보세요

[Subscribe RSS]

2단계

배경: 조금 더 어두운 회색

© siku.name

메인 페이지 (index)

구성

Hero
Search
PostList

Hero

화면 전체 폭 SVG 이미지.

이미지 위에 두 개의 텍스트가 겹쳐진다.

Moments        (왼쪽 위)
in progress    (오른쪽 아래)

텍스트는 이미지와 분리된 SVG로 유지하여 화면이 좁아져도 항상 보이도록 한다.

Search

폭 900px

검색 방식

/search/?q=검색어

Pagefind를 사용하지만 검색 결과는 별도 페이지에서 출력한다.

PostList

포스트 목록 구조

| 날짜 | 포스트 카드 |

날짜는 왼쪽에 위치하고 포스트 카드가 오른쪽 공간을 채운다.

특징

같은 월의 글은 월 표시를 한 번만 표시
스크롤 시 월이 sticky
다른 월이 나타나면 자연스럽게 교체

PostCard

포스트 카드 구성

[cover image]

tag tag tag

title
description

이미지는 날짜 영역을 제외한 공간을 꽉 채운다.

페이지네이션

한 페이지당 10개의 포스트.

페이지 이동은 URL 이동이 아니라 숨김 방식 페이지네이션으로 구현한다.

< 1 2 3 4 ... >

Tags 페이지

주소

/tags

역할

태그 설명 문서
주요 태그의 설명 글 목록

여기서는 type: tags 글만 표시한다.

개별 태그 페이지

주소

/tags/[tag]

구성

태그 헤더 (SVG)
PostList

태그 헤더는 세 가지 색 중 하나를 랜덤 사용한다.

red
blue
green

Memos 페이지

주소

/memos

특징

제목 없는 짧은 글
전문 표시
링크 없음

구성

| 날짜 | 메모 내용 |

날짜 표시 형식

01.Jan.2026

Minis 페이지

주소

/minis

여기는 글이 아니라 도구 페이지이다.

상단에는 도구 TOC 메뉴가 있다.

예

SVG Generator
YouTube Cut

페이지 내부에서 해당 위치로 이동한다.

Hej 페이지

주소

/hej

구성

Hero
소개 글
최신 hej 글 하나 출력

본문 폭은 680px.

포스트 페이지

주소

/blog/[id]

구성

풀폭 커버 이미지
스크롤 시 이미지 fade out
본문 등장

특징

스크롤 시 글로벌 헤더 숨김
포스트 전용 네비게이션 표시

older        back to index        newer

글 타입

Frontmatter에서 글의 성격을 구분한다.

type:
post
memo
hej
tags

생략하면 기본값은 post이다.

결론

이 블로그는 다음 철학을 따른다.

기록 중심
단순한 구조
읽기 중심 레이아웃
기능보다 지속성

Astro를 사용하지만 목표는 오래 유지되는 개인 기록 공간이다.