블로그를 운영하며 디자인과 사용성(UX) 사이의 균형을 맞추는 것은 언제나 까다로운 과제다. 이번 개편은 단순한 심미적 업데이트를 넘어, ‘정보의 명확한 전달’과 ‘눈의 피로도 감소’라는 두 가지 핵심 목표를 달성하기 위해 분석적으로 접근했다.

1. 색채 심리학과 60:30:10 규칙의 적용

기존의 다크 모드는 단순히 ‘검은 배경에 흰 글씨’라는 1차원적인 접근이었다. 이는 대비가 너무 강해 장시간 독서 시 눈에 잔상을 남기는 문제가 있었다. 이를 해결하기 위해 Soft Modern Dark 테마를 도입했다.

인테리어 디자인에서 주로 쓰이는 60:30:10 규칙을 웹 UI에 적용해 보았다.

• 60% (배경): 완전한 검정(#000) 대신 깊이감 있는 다크 그레이(--gray-4, #1c1c1e)를 사용하여 눈의 긴장을 완화했다.
• 30% (컴포넌트): 카드와 버튼에는 조금 더 밝은 그레이(--gray-3, #2c2c2e)를 사용하여 배경과의 은은한 깊이 차이를 주었다.
• 10% (강조): 텍스트와 보더에는 밝은 그레이(--white-2, #aeaeb2)를 사용하여 정보의 위계를 명확히 했다.

이러한 계조의 세분화는 평면적인 웹 페이지에 공간감을 부여하는 효과가 있다.

2. 사용자 경험(UX) 관점에서의 카테고리 인터페이스

기존 카테고리 UI의 가장 큰 문제점은 ‘의미론적 불일치’였다. 카테고리 이름(a)과 게시글 수(div)가 별도의 태그로 분리되어 있어, 사용자는 이 둘을 서로 다른 요소로 인식할 가능성이 있었다. 또한, 클릭 영역이 텍스트에만 한정되어 조작성이 떨어졌다.

이를 해결하기 위해 HTML 구조를 의미론적으로 통합했다.

<a href="#!" class="category" data-category="">
   <span class="category_count"></span>
</a>

이제 사용자는 카테고리 영역 전체를 하나의 ‘버튼’으로 인식하게 되었으며, 이는 Fitts’s Law(피츠의 법칙)에 따라 사용성을 높이는 결과로 이어졌다.

3. 성능 최적화: 스크롤 이벤트의 비용

‘Back-to-Top’ 기능에서 발생하던 스크롤 잠김 현상은 과도한 연산 비용이 원인이었다. 기존의 requestAnimationFrame을 이용한 재귀적 호출은 프레임마다 스크롤 위치를 강제로 재조정하려 했고, 이는 브라우저의 렌더링 파이프라인에 부하를 주었다.

이를 브라우저 네이티브 API인 window.scrollTo({ behavior: 'smooth' })로 교체함으로써, JS 스레드의 부하를 없애고 브라우저 최적화에 맡기는 방식으로 리팩토링했다. 코드는 더 간결해졌고, 성능은 더 안정적으로 변했다.

결국 좋은 디자인이란 ‘보기 좋은 것’이 아니라 ‘쓰기 편하고 효율적인 것’임을 다시 한번 확인하는 계기였다.