ohje.uk 디자인 컨셉 제안서

배경

ohje.uk 디자인 방향을 정하기 위해 실제 사이트(leerob.com, antfu.me, yceffort.kr, Vercel blog)와 2025 컬러/레이아웃 트렌드를 분석했다. 이를 바탕으로 3가지 컨셉을 구현했다.

컨셉 A: “Readable”

레퍼런스: leerob.com — 극한 미니멀, 텍스트 중심

컬러 팔레트

역할

라이트

다크

배경

#ffffff

#111111

본문

neutral-900

neutral-200

muted

neutral-500

neutral-400

액센트

없음 (순수 흑백)

없음

랜딩 페이지

Light

Dark

블로그 인덱스

Light

Dark

특징

장식 완전 제거. 버튼 없음. 모든 것이 텍스트 링크
max-w-xl 좁은 폭으로 독서 최적화
이름은 text-base font-normal — 의도적으로 작게
여백이 디자인. 콘텐츠만 남김

컨셉 B: “Structured”

레퍼런스: yceffort.kr (카드 그리드), Vercel blog (카테고리 필터)

컬러 팔레트

역할

라이트

다크

배경

#ffffff

slate-900 (#0f172a)

서피스

slate-50

slate-800

본문

slate-800

slate-200

액센트

blue-600

blue-400

랜딩 페이지

Light

Dark

블로그 인덱스

Light

Dark

특징

카드 그리드 (모바일 1열, 데스크톱 2열)
sticky 헤더 + backdrop-blur 효과
블루 액센트로 전문성 전달
태그를 rounded pill로 표시
정보 밀도가 높음

컨셉 C: “Warm”

레퍼런스: 2025 Pantone 트렌드 (Mocha Mousse), joshwcomeau.com

컬러 팔레트

역할

라이트

다크

배경

#faf9f7 (따뜻한 크림)

stone-900 (#1c1917)

서피스

#f5f0eb

stone-800

본문

stone-800

stone-200

액센트

orange-700 (#c2410c)

orange-400 (#fb923c)

랜딩 페이지

Light

Dark

블로그 인덱스

Light

Dark

특징

따뜻한 크림 배경 + 오렌지 액센트로 개성 전달
“안녕하세요, 오제욱입니다” — font-light + font-bold 조합
연도별 그룹화 + 모노폰트 날짜로 리듬감
차가운 기술 블로그와 확실한 차별화

상세 비교

A. 레이아웃 시스템

A: Readable

콘텐츠 폭: max-w-xl (36rem) — 한 줄 60~70자, 읽기 최적
헤더: 보더 없음, 본문과 동일 폭. 이름 + nav 텍스트만
푸터: 최소한의 텍스트 1줄
그리드: 없음. 단일 컬럼 플로우
모바일: 변화 거의 없음 — 이미 좁은 폭이라 자연스러운 반응형

B: Structured

콘텐츠 폭: max-w-3xl (48rem) — 카드 2열 배치에 적합
헤더: sticky + backdrop-blur, 전체 폭. 로고 + nav + 검색
푸터: 멀티 컬럼: 링크 그룹 + 소셜 + 저작권
그리드: 블로그: 2열 카드 그리드. 랜딩: hero + feature grid
모바일: 2열 → 1열 전환, 햄버거 메뉴, 카드 풀 와이드

C: Warm

콘텐츠 폭: max-w-2xl (42rem) — A와 B 사이의 균형
헤더: 얇은 하단 보더, 따뜻한 톤. 이름 + nav + 테마 토글
푸터: 심플한 중앙 정렬 텍스트 + 소셜 아이콘
그리드: 없음. 연도별 그룹 리스트가 자연스러운 시각 구분 제공
모바일: 리스트 구조라 자연스러운 반응형. 연도 헤딩이 스크롤 랜드마크 역할

B. 타이포그래피 시스템

모든 컨셉은 Pretendard (본문/헤딩) + JetBrains Mono (코드)를 공유한다. 차이는 스케일과 웨이트 사용 패턴에 있다.

A: Readable

h1: text-2xl font-semibold — 의도적으로 작게
h2: text-xl font-medium
body: text-base (16px), leading-relaxed
caption/date: text-sm text-neutral-500
전략: 웨이트 차이를 최소화해 시각적 “소음”을 줄임. 헤딩도 bold가 아닌 semibold/medium
한글 최적화: antialiased, leading-relaxed — 한글 행간이 넓어 가독성 좋음

B: Structured

h1: text-3xl font-bold — 명확한 위계
h2: text-2xl font-semibold
body: text-base (16px), leading-normal
caption/date: text-xs font-medium uppercase tracking-wide
전략: 강한 위계 — h1~h4 사이 사이즈/웨이트 차이가 뚜렷. 정보 스캐닝에 유리
한글 최적화: antialiased, 카드 내부 텍스트는 line-clamp-2로 말줄임

C: Warm

h1: text-3xl font-light — 이름은 light, 강조어만 bold
h2: text-xl font-medium
body: text-base (16px), leading-relaxed
caption/date: text-sm font-mono tabular-nums — 날짜를 모노로
전략: font-light를 전략적으로 활용해 우아한 인상. bold는 핵심 단어에만 사용
한글 최적화: antialiased, leading-relaxed, font-light가 한글에서 특히 세련됨

C. 컴포넌트 아이디어

A: Readable

ThemeToggle: 텍스트 버튼 “dark/light” — 아이콘 없이 텍스트만
Button: 존재하지 않음. 모든 액션은 텍스트 링크
Tag/Badge: 없음 — 태그 자체를 표시하지 않거나, 쉼표 구분 텍스트
Card: 없음. 포스트는 제목 + 날짜의 단순 리스트
BlogPostCard: 리스트 항목: 제목(링크) + 날짜(muted)
CodeBlock: Expressive Code — GitHub Dark/Light 테마. 최소 장식
Callout: 왼쪽 보더만 있는 blockquote. 배경색 없음
TOC: 불필요 — 글이 짧고 집중적일 때 가장 빛남

B: Structured

ThemeToggle: 아이콘 버튼(sun/moon) + 툴팁. 헤더 우측 고정
Button: primary(blue-600 filled), secondary(outlined), ghost
Tag/Badge: rounded-full pill. 클릭 시 필터링 동작
Card: 보더 + hover:shadow-md. 서피스 색상 배경
BlogPostCard: 카드형: 제목 + 요약 2줄 + 태그 pill + 날짜
CodeBlock: Expressive Code — 파일명 탭 + 복사 버튼 강조
Callout: 아이콘 + 배경색 변형 (info/warning/error)
TOC: 사이드바 또는 상단 드롭다운. 긴 글 탐색에 유용

C: Warm

ThemeToggle: sun/moon 아이콘 + 전환 시 부드러운 rotate 애니메이션
Button: primary(orange-700 filled, rounded-lg), secondary(ghost)
Tag/Badge: 밑줄 스타일 또는 subtle 배경. pill보다 텍스트 친화적
Card: 선택적. 사용 시 subtle 보더 + 따뜻한 서피스 배경
BlogPostCard: 리스트형: 연도 헤딩 아래 제목 + 모노 날짜
CodeBlock: Expressive Code — Monokai 계열 warm 테마
Callout: 왼쪽 보더(orange) + 연한 크림 배경
TOC: 인라인 목차 (글 상단). 사이드바보다 본문 흐름에 맞음

D. 인터랙션 & 마이크로 애니메이션

A: Readable

호버: 밑줄 등장/사라짐. underline-offset-4, transition-all
페이지 전환: 없음 또는 최소 fade. View Transitions 적용 시 crossfade만
스크롤: 자연 스크롤. sticky 요소 없음. 위로 가기 버튼 없음
다크모드 전환: 즉시 전환 (no animation). 깔끔하고 빠른 스위칭

B: Structured

호버: 카드: hover:shadow-md hover:ring-1. 링크: 블루 컬러 전환
페이지 전환: View Transitions API — slide + fade. 카드 → 포스트 모핑 가능
스크롤: sticky 헤더(scroll 시 축소). scroll-to-top 버튼(우하단)
다크모드 전환: 부드러운 transition-colors duration-300

C: Warm

호버: 링크: 오렌지 컬러 전환 + 밑줄 두께 변화. 부드러운 ease-out
페이지 전환: View Transitions API — crossfade. 따뜻한 톤에 맞는 부드러운 전환
스크롤: 헤더 보더가 스크롤 시 미묘하게 진해짐. scroll-to-top은 선택적
다크모드 전환: transition-colors duration-500 + 아이콘 rotate. 느긋한 전환이 따뜻한 톤과 어울림

E. 확장성 & 향후 로드맵

A: Readable

포트폴리오: 프로젝트 목록도 텍스트 리스트. 미니멀 유지하되 확장 시 제약 가능
시리즈/카테고리: 카테고리는 필터 없이 URL 경로로 구분 (/blog/dev, /blog/life)
OG 이미지: 흰 배경 + 검은 텍스트. 폰트만으로 승부
RSS/뉴스레터: 텍스트 중심이라 RSS/이메일 변환이 자연스러움

B: Structured

포트폴리오: 카드 그리드가 프로젝트 쇼케이스에 가장 적합. 썸네일 + 기술 스택 태그
시리즈/카테고리: 상단 탭/필터 UI. 태그 클릭으로 동적 필터링. 확장성 최고
OG 이미지: 블루 그라데이션 배경 + 제목 + 태그. 구조화된 레이아웃
RSS/뉴스레터: 카드 구조를 이메일 템플릿으로 변환 가능하나 복잡도 높음

C: Warm

포트폴리오: 타임라인형 프로젝트 목록. 연도별 그룹과 일관된 패턴
시리즈/카테고리: 연도별 그룹 패턴을 카테고리별로 확장 가능. 중간 수준의 확장성
OG 이미지: 크림 배경 + 오렌지 액센트 라인 + 제목. 따뜻한 톤이 소셜에서 눈에 띔
RSS/뉴스레터: 리스트 구조라 변환 쉬움. 오렌지 액센트가 이메일에서도 개성 유지

종합 비교

항목

A: Readable

B: Structured

C: Warm

컬러 톤

순수 흑백 (neutral)

차가운 블루 (slate)

따뜻한 크림 (stone)

콘텐츠 폭

max-w-xl (좁음)

max-w-3xl (넓음)

max-w-2xl (중간)

블로그 스타일

제목+날짜 리스트

카드 그리드

연도별 그룹 리스트

헤더

보더 없음

sticky + blur

얇은 보더

액센트

없음

블루

오렌지

정보 밀도

최소

최대

중간

인상

글 중심, 작가적

전문적, 체계적

개성적, 따뜻함

타이포 전략

낮은 위계 차이

강한 위계

light+bold 대비

컴포넌트 수

최소 (링크만)

최다 (버튼, 카드, 필터)

중간 (선택적 카드)

애니메이션

거의 없음

적극적

부드럽고 느긋함

확장성

제한적

가장 높음

중간

구현 난이도

낮음

높음

중간

브랜치

각 컨셉은 별도 브랜치에서 확인할 수 있다:

concept/readable — 컨셉 A
concept/structured — 컨셉 B
concept/warm — 컨셉 C