블로그 UI를 픽셀 스타일로 바꾸면서 손본 것들

처음 만든 화면은 둥근 카드와 흐린 그림자가 많은 일반적인 블로그 형태였습니다. 글을 읽는 데 문제는 없었지만 기억에 남는 모습도 아니었습니다. 색상은 그대로 두고 모서리, 그림자, 움직임만 픽셀 게임처럼 바꿔보기로 했습니다.

모서리는 토큰에서 한 번에 바꾸기

컴포넌트마다 rounded-* 클래스를 지우는 대신 Tailwind의 반경 토큰을 0으로 덮었습니다. 기존 마크업을 거의 건드리지 않고 카드, 버튼, 입력창을 한꺼번에 각지게 만들 수 있었습니다.

@theme inline {
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
}

이 방법은 간단하지만 사이트 전체에 적용됩니다. 둥근 모양이 꼭 필요한 요소가 생기면 별도 CSS로 반경을 다시 지정해야 합니다.

잘린 모서리에는 drop-shadow

카드 모서리는 clip-path로 두 픽셀씩 잘라 계단 모양을 냈습니다. 이때 box-shadow를 사용하면 잘린 모양을 따라가지 않고 사각형 그림자가 남습니다. filter: drop-shadow()는 요소의 외곽선을 따라가므로 이 경우에 더 잘 맞았습니다.

.card {
  clip-path: var(--notch);
  filter: drop-shadow(4px 4px 0 var(--pixel-shadow));
  transition: filter 0.1s steps(2, end);
}

.card:hover {
  filter: drop-shadow(6px 6px 0 var(--pixel-shadow-accent));
}

그림자의 blur 값은 0으로 두었습니다. 흐린 그림자가 섞이면 픽셀 스타일이 금방 무너지기 때문입니다.

마스코트 움직임 나누기

하단 마스코트는 JavaScript 없이 CSS 애니메이션으로 움직입니다. 좌우 이동, 방향 전환, 다리 동작을 한 요소에 넣으면 transform 속성이 서로 덮어씁니다. 그래서 이동하는 컨테이너와 방향을 바꾸는 몸통, 두 상태를 번갈아 보여주는 다리를 각각 다른 레이어로 나눴습니다.

@keyframes mascot-stroll {
  0% { left: 0%; }
  46% { left: calc(100% - var(--mascot-size)); }
  96% { left: 0%; }
}

@keyframes mascot-legcycle {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

두 장짜리 다리 모양만 번갈아 표시해도 작은 크기에서는 걷는 동작으로 보입니다.

움직임을 끌 수 있게 하기

장식 애니메이션은 prefers-reduced-motion 설정을 따릅니다. 이 설정이 켜진 환경에서는 배경 장식과 레트로 화면 효과를 줄이고, 마스코트 움직임은 유지합니다.

@media (prefers-reduced-motion: reduce) {
  .crt-overlay,
  .tw-caret,
  .mascot-walker.is-jumping .mascot-bob {
    animation: none !important;
  }
}

결과적으로 색상과 글 구조는 유지하고 표면의 질감만 바꿀 수 있었습니다. 이후 화면을 추가할 때도 같은 토큰과 그림자 규칙을 사용하면 기존 분위기에서 크게 벗어나지 않습니다.