다크 테마를 버렸다 — karnellabs.com 라이트 리디자인기

이 사이트는 원래 다크 테마였다. 개발자 도구 사이트들의 문법 — 근검은 배경, 네온 액센트, 모노스페이스 분위기 — 을 따랐고, 그 자체로는 나쁘지 않았다. 문제는 콘텐츠였다. 홈에 폴도쿠의 파스텔 종이, 토닥의 수채화 신수, 타이디 트로브의 민트색 너구리를 올려놓고 보니 — 코지한 스크린샷들이 검은 배경 위에서 죽어 있었다.

참조를 다시 고르다

Raycast류의 다크 dev-tools 미학은 프레임워크·CLI엔 맞지만, 게임이 주인공인 사이트엔 아니었다. 다시 참조로 삼은 건 둘이다:

• Panic — 개발자 도구와 게임을 한 지붕에서 파는 회사. 밝은 배경, 넉넉한 여백, 과장 없는 카피. 구조의 교과서.
• ustwo games — 배경은 중립으로 조용히, 색은 게임 아트워크가 낸다. “작업물이 주인공”의 교과서.

방향은 정해졌다. 웜 페이퍼 라이트 — 크림(#FAF7F2) 캔버스, 잉크(#3A3545) 텍스트, 딥 teal(#0D9373) 액센트. 게임들의 종이 톤과 같은 결의 배경 위에서 스크린샷이 산다.

기술적으로는 Tailwind v4 @theme 토큰 교체가 전부였다 — 컴포넌트가 전부 토큰을 참조하고 있어서 페이지 구조는 안 건드렸다. 대신 복병이 둘 있었다.

복병 1: 로고가 다크 전용이었다

로고가 흰 아웃라인 PNG였다. 라이트 배경에선 보이지 않는다. sharp로 픽셀을 순회하며 흰색 계열 → 잉크, teal 계열 → 딥 teal로 재채색하는 스크립트를 짜서 라이트 변형을 만들었다.

그런데 배포하고 보니 로고가 깨져 보였다. 원인은 색이 아니라 해상도 — 원본이 473px짜리 작은 래스터라서, 크게 + 고해상도 화면에서 두 배로 늘려 그리니 픽셀이 드러난 거다. 결국 로고를 새로 만들어(1363px 원본) 항상 표시 크기보다 큰 원본에서 다운스케일하도록 바꿨다. 래스터 로고는 “표시 크기 × 최대 DPR”보다 커야 한다 — 당연한 규칙인데 당해보고 알았다.

복병 2: 마퀴가 띡띡 끊겼다

히어로 아래에 작업물 썸네일이 왼쪽으로 흐르는 무한 스트립을 넣었는데, 부드럽지 않고 띡, 띡 끊겼다. 원인은 둘 다 렌더링 쪽이었다:

1. 컴포지터 레이어 미승격. 초당 43px짜리 느린 이동은 프레임당 1px 미만의 서브픽셀 이동인데, 브라우저가 이걸 CPU 리페인트로 처리하면서 정수 픽셀로 스냅됐다. will-change: transform + translateZ(0)로 트랙을 GPU 레이어로 올리자 서브픽셀 보간이 걸리며 미끄러지듯 흘렀다.
2. 원본 대형 이미지. 카드 하나가 1080×2400 원본 PNG를 실시간 축소 렌더링하고 있었다. 마퀴 전용 400×236 webp 썸네일을 미리 잘라두니(8장 합쳐 73KB) 래스터 비용이 사라졌다.

느린 CSS 애니메이션이 끊길 때 의심할 곳: 레이어 승격 여부, 그리고 텍스처 크기.

카피에서 배운 것

리디자인 중 제일 여러 번 고친 건 코드가 아니라 문장이었다. “한국의 이야기를 담은 게임” → 일부 게임엔 사실이 아님. “캐주얼 모바일 게임” → 목표를 멋대로 규정함. 결국 남은 문장은 이거다:

만들고 싶은 게임을, 직접 만들어 출시합니다.

장르도 플랫폼도 안 박은, 사실만 있는 문장. 소개 카피는 사실의 최대 교집합까지만 말해야 한다. 하나라도 예외가 있는 수식어는 언젠가 거짓말이 된다.

정리

• 테마는 콘텐츠를 따라야 한다. 코지 게임 스튜디오에 다크 dev-tools 프레임은 부조화였다
• 래스터 에셋은 표시 크기보다 큰 원본에서 다운스케일 — 반대 방향은 반드시 깨진다
• 느린 애니메이션 끊김 = 레이어 승격 + 텍스처 경량화로 해결
• 카피는 교집합만. 나머지는 각 프로젝트 페이지가 말하게 둔다

바뀐 사이트는 지금 보고 있는 이 페이지다.