ohje.uk 디자인 회고: 제안서에서 구현까지
배경
개인 블로그의 디자인 방향을 정하기 위해 leerob.com, antfu.me, yceffort.kr, Vercel blog 등 기술 블로그들을 분석하고, 2025 컬러/레이아웃 트렌드를 조사했다. 8가지 축(컬러, 타이포, 스페이싱, 레이아웃, 장식, 모션, 정보 밀도, 컬러 모드)으로 분석한 결과를 바탕으로 3가지 컨셉을 각각 브랜치에서 구현해봤다.
3가지 컨셉
A: Readable
레퍼런스: leerob.com — 극한 미니멀, 텍스트 중심
Light
Dark
- 순수 흑백 (neutral 계열), 액센트 컬러 없음
max-w-xl좁은 폭, 장식 완전 제거, 모든 것이 텍스트 링크- 여백이 곧 디자인. 가장 글에 집중되지만 확장성이 제한적
B: Structured
레퍼런스: yceffort.kr, Vercel blog — 카드 그리드, 카테고리 필터
Light
Dark
- slate 계열 + blue 액센트,
max-w-3xl넓은 폭 - 카드 그리드, sticky 헤더 + backdrop-blur, 태그 pill 필터링
- 정보 밀도와 확장성이 가장 높지만 구현 복잡도도 높음
C: Warm
레퍼런스: 2025 Pantone (Mocha Mousse), joshwcomeau.com
Light
Dark
- stone 계열 + orange 액센트,
max-w-2xl중간 폭 - 따뜻한 크림 배경, 연도별 그룹 리스트, font-light + bold 조합
- A와 B 사이의 균형. 차가운 기술 블로그와 확실한 차별화
Warm을 선택한 이유
세 컨셉 모두 구현해보고 직접 비교한 결과, Warm(C)을 선택했다.
Readable은 너무 비었다. 글이 많지 않은 초기 블로그에서 극한 미니멀은 “미완성”으로 보일 수 있다. 포트폴리오나 프로젝트 페이지를 추가할 때 확장하기도 어렵다.
Structured는 과했다. 카드 그리드, 필터링, 멀티 컬럼 푸터까지 — 콘텐츠가 충분히 쌓이기 전에 이 정도 구조는 빈 서랍장을 보는 느낌이다. 구현 복잡도도 높아 유지보수 부담이 크다.
Warm은 딱 적당했다. 오렌지 액센트가 개성을 주면서도 과하지 않고, 리스트 기반 구조라 콘텐츠가 적을 때도 자연스럽다. 연도별 그룹이 시간 흐름을 보여주고, 나중에 카테고리나 시리즈로 확장하기에도 같은 패턴을 재활용할 수 있다.
제안서 vs 실제 구현: 달라진 것들
구현 과정에서 제안서의 계획과 꽤 달라진 부분이 있다. 실제로 써보면서 조정한 결과들이다.
헤더: “얇은 보더” → Direction-aware sticky
제안서에서는 Warm 헤더를 “얇은 하단 보더” 정도로 그렸다. 하지만 긴 글을 읽을 때 네비게이션 접근성이 떨어졌다.
결국 Structured 컨셉의 sticky 헤더를 가져왔는데, 단순 sticky가 아니라 스크롤 방향을 감지하는 패턴을 적용했다. 아래로 스크롤하면 헤더가 숨고, 위로 스크롤하면 다시 나타난다. Medium이나 dev.to에서 쓰는 방식이다. backdrop-blur도 함께 적용해서 콘텐츠 위에 자연스럽게 떠 있는 느낌을 줬다.
TOC: “인라인 목차” → 사이드바 sticky
제안서에서는 “글 상단 인라인 목차가 본문 흐름에 맞다”고 했는데, 긴 포스트에서는 현재 위치를 놓치기 쉬웠다. xl 이상 화면에서 사이드바 sticky TOC를 추가했다. h2-h3 수준 헤딩을 보여주고, 스크롤에 따라 현재 위치가 표시된다.
처음에는 max-h와 overflow-y-auto로 스크롤 영역을 만들었는데, 답답한 느낌이라 제거하고 그냥 sticky로만 두었다. 목차가 길어도 자연스럽게 보인다.
Scroll-to-top: “선택적” → 플랫폼별 분리
제안서에서는 scroll-to-top을 “선택적”이라고 가볍게 넘겼는데, 실제로 긴 글에서는 필수였다.
문제는 모바일이었다. floating 버튼이 모바일에서 본문 위에 겹치면서 실수로 탭하는 일이 잦았다. 여러 UX 패턴을 리서치한 끝에 플랫폼별 분리 전략을 택했다:
- 데스크톱: 우하단 floating 버튼 (400px 이상 스크롤 시 표시)
- 모바일: 푸터에 “맨 위로 ↑” 텍스트 링크
max-md:!hidden으로 모바일에서 floating 버튼을 완전히 숨기고, 푸터 링크가 그 역할을 대신한다.
다크 모드: 색상 튜닝
제안서에서는 다크 배경을 stone-900 (#1c1917)로 계획했다. 하지만 실제로 보니 stone 특유의 따뜻한 톤이 다크 모드에서는 탁하게 느껴졌다. 결국 #1a1a1a로 변경해서 더 중립적인 다크 배경을 만들었다.
본문 텍스트도 stone-200에서 stone-100으로 올렸다. 회색 끼가 가독성을 떨어뜨렸기 때문이다.
포스트 목록: description 추가
제안서에서는 “제목 + 모노 날짜”만 보여주는 미니멀 리스트였다. 하지만 제목만으로는 글 내용을 예측하기 어려웠다. line-clamp-2로 설명 2줄을 추가했다. 날짜 옆 제목, 그 아래 설명이라는 구조가 자연스럽게 잡혔다.
도메인: 이중 도메인 → 단일 도메인
원래 ohje.uk (메인)과 blog.ohje.uk (블로그)를 분리할 계획이었지만, 실제로 메인 페이지에 별도 콘텐츠가 없었다. ohje.uk 하나로 통합하고, 기존 blog.ohje.uk 요청은 301 리다이렉트로 처리했다.
기타 세부 조정
scrollbar-gutter: stable: 페이지 간 이동 시 스크롤바 유무에 따른 레이아웃 시프트 방지- View Transitions: Astro 6의
ClientRouter를 사용해 200ms crossfade 적용. 다크 모드 상태가 페이지 전환 시 리셋되는 문제를astro:before-swap이벤트로 해결 - max-width 통일: 헤더, 본문, 푸터 모두
max-w-2xl로 맞춰서 페이지 간 콘텐츠 정렬 불일치 제거
최종 디자인 시스템
구현이 완료된 현재 상태를 정리하면:
배운 것
제안서는 출발점이지 설계도가 아니다. 3가지 컨셉을 비교하는 건 방향을 잡는 데 도움이 됐지만, 실제 구현에서는 컨셉 간 경계가 흐려졌다. Warm을 선택했지만 헤더는 Structured에서 가져왔고, 스크롤 UX는 어떤 컨셉에서도 예상하지 못한 형태가 됐다.
써봐야 안다. 다크 모드 색상, 포스트 목록 구성, scroll-to-top 위치 — 스크린샷으로는 괜찮아 보였지만 실제로 쓰면서 전부 조정했다. 특히 모바일에서 직접 탭해보기 전까지 floating 버튼의 문제를 몰랐다.
과하지 않게 시작하는 게 맞았다. Structured의 카드 그리드와 필터링이 멋져 보였지만, 포스트가 적은 상태에서는 오히려 초라했을 것이다. 콘텐츠가 채워지면 그때 구조를 확장해도 늦지 않다.