빠른 화면은 기능이 아니라 기본값입니다
시장은 밀리초로 움직입니다. 그래서 Merini는 화면이 먼저 준비되어 있도록 만들었습니다. 가볍게 열리고, 즉시 반응하고, 오래 봐도 눈이 편하게.
지어낸 숫자가 아닙니다. 지금 이 화면이 실제로 렌더링되는 프레임 시간을 그대로 그립니다. 기기와 브라우저에 따라 달라집니다.
왜 속도에 신경 쓰나
느린 화면은 불편한 데서 끝나지 않습니다. 가격이 끊기고 버튼이 늦게 반응하면, 초보일수록 지금 무슨 일이 일어나는지를 놓칩니다. 우리가 속도로 사려는 건 수익이 아니라 판단할 시간입니다. 화면이 기다리게 만들지 않으면, 사용자는 서두르지 않아도 됩니다. 실거래 자금을 다루는 도구에서 지연은 UX 문제이기 이전에 신뢰 문제입니다.
무엇이 화면을 빠르게 만드나
기다림 없는 반응
React 19와 Vite 8 위에 올렸습니다. 탭 전환과 주문 패널이 멈칫하지 않고 열리고, 시세는 새로고침 없이 100ms 간격 실시간 푸시로 도착합니다. 가격을 보려고 기다리거나 화면을 다시 부를 일이 없습니다.
숫자 옆에서 튀지 않는 색
TailwindCSS v4로 옮기면서 색을 OKLCH 색 공간에서 다시 정의했습니다. 최신 디스플레이에서 더 선명하면서도 밝기가 고르게 유지돼, 상승·하락처럼 의미가 다른 색이 서로 헷갈리지 않습니다. 차트 옆에 붙는 색일수록 이게 중요합니다.
라이트와 다크, 양쪽 다 제대로
테마는 색을 하나씩 바꾸는 게 아니라 토큰을 통째로 갈아끼우는 구조입니다(Tailwind v4의 @theme). 그래서 한쪽 테마만 잘 보이고 다른 쪽은 대충인 일이 없습니다. 새벽에도 낮에도 같은 기준의 대비를 유지합니다.
지어내지 않는 화면
보기 좋으라고 데이터를 만들지 않습니다. 신뢰할 수 없는 호가 잔량은 가짜 숫자 대신 "—"로 비워 둡니다. 위에 있는 프레임 계기의 수치도 마찬가지로 실제 측정값입니다. 체감을 좋게 만드는 일은 CSS와 모션으로 하고, 숫자는 건드리지 않습니다.
무엇으로 지었나
유행이라서가 아니라, 실거래 화면에서 지연과 색 정확도가 실제로 중요해서 고른 스택입니다.
- TailwindCSSv4 CSS-first @theme 설정, Rust 기반 새 엔진, OKLCH 기본 팔레트
- React19 수백 개 가격 셀이 흔들림 없이 갱신되는 최신 렌더러
- Vite8 즉각적인 빌드와 배포. 고치면 바로 반영됩니다
- TypeScript 돈을 다루는 코드일수록, 타입 안전은 선택이 아닙니다
- WebSocket 폴링이 아니라 밀어주는 100ms 실시간 스트림
- lightweight-charts 가볍고 스크롤이 매끄러운 캔들 차트 렌더링
Tailwind CSS v4의 성능 수치(증분 빌드 100배 이상, 전체 빌드 최대 5배)는 Tailwind 공식 발표 기준이며 우리가 측정한 값이 아닙니다. 이 페이지의 프레임 계기는 방문자의 브라우저에서 실제 측정된 값으로, 기기와 브라우저, 동시에 실행 중인 작업에 따라 달라집니다. 화면이 빠르다고 해서 투자 수익이나 원금이 보장되지는 않습니다.