GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

css receipt 9가지 — 한 줄씩 인쇄·절취선 찢기·바코드 스캔·나눠 내기

· Godrich · 9종 · 22분 읽기

목록·표 UI바닐라 JSSCSS클릭콘텐츠 파이프라인

css receipt 한 장 안에는 인쇄 머리의 떨림, 종이의 말림, 합계의 굴림이 겹쳐 있다 — 01번은 줄마다 밀리는 거리에 떨림을 얹고, 06번은 롤에서 풀리는 종이의 원통 음영을 픽셀마다 계산한다.

영수증 아홉 장을 화면에서 바로 찍고 찢어 본다

인쇄 머리가 한 줄씩 찍을 때마다 종이가 한 칸 밀리며 미세하게 떨리는 영수증 인쇄 장면01 rec-thermal-head-line-feed-jitter 절취선 아래 종이를 끌어 내렸다 놓으면 기준 거리를 넘었을 때 뜯겨 떨어지고 못 넘으면 스프링으로 돌아가는 장면02 rec-tear-off-perforation-drag-spring 톱니 모양 가장자리와 위로 말린 모서리에 열마다 다른 그림자가 지나가는 종이 질감 장면03 rec-zigzag-edge-paper-curl-shadow 시드로 만든 막대 폭이 줄지어 있고 빔이 훑으면 막대가 차례로 밝아지며 확인 표시가 켜지는 바코드 스캔04 rec-barcode-seeded-bars-scan-beam 품목이 추가될 때마다 합계 자릿수가 위아래로 굴러 올라가고 세금 줄이 한 박자 늦게 따라오는 합계 줄05 rec-total-odometer-roll-tax-tick 롤에서 풀려 나오는 종이의 원통 음영이 픽셀마다 계산되고 롤 반지름이 줄어드는 영수증 롤 장면06 rec-paper-roll-cylinder-shading-unwind 열이 닿은 곳만 짙어지고 시간이 지나면 노이즈 지도에 따라 얼룩덜룩 바래는 감열지 글자07 rec-thermal-fade-noise-burn-map 꽂이 막대에 나란히 걸린 영수증 아홉 장이 장마다 다른 길이의 진자로 흔들리다 짧은 장부터 가라앉는 보관 장면08 rec-spike-stack-pendulum-sway 품목을 사람 칸으로 끌어다 놓으면 칸별 합계가 감쇠하며 새 값을 따라 굴러가는 나눠 내기 목록09 rec-split-bill-item-drag-share-total

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

css receipt 9가지 — 한 줄 밀기·절취 판정·원통 음영으로 만드는 종이 장면

흰 바탕에 고정폭 글자를 놓으면 영수증처럼 보이기는 하지만, 영수증처럼 느껴지게 하는 건 종이가 나오고 끊기는 방식이다. 그래서 01~08 은 <canvas> 2D 위에 종이를 직접 계산해 그리고, 09 하나만 DOM 버튼을 transform 으로 옮긴다. 아홉 장면의 CSS 에는 transition 도 keyframes 애니메이션도 없고, 스타일시트는 무대 비율과 버튼 모양, 포커스 테두리, touch-action 같은 바깥 틀만 맡는다.

시간과 난수는 장면마다 같은 뼈대를 쓴다

requestAnimationFrame 이 넘겨주는 시각을 쌓아 두었다가 16ms 고정 스텝(FIXED_DT)으로 잘라 step() 을 돌리고, 그리기는 프레임마다 한 번이다. 한 프레임에 쌓는 시간은 100ms 에서 자르고 한 번에 도는 스텝은 6번이 상한이라, 버벅인 프레임 뒤에도 종이가 한꺼번에 튀어 오르지 않는다. 난수는 시드를 고정한 lcg 한 가지이고 실제로 부르는 곳은 02(절취 이의 끊김 문턱)와 04(막대 폭과 숫자) 두 장면이다. Math.random·Date.now·fetch·localStorage 는 아홉 index.html 어디에도 없어서, 새로고침할 때마다 같은 영수증이 같은 순서로 나온다.

영수증 글자와 세율은 지어낸 값이다

종이에 찍히는 가게 달빛 상점 과 품목 우유·식빵·사과·달걀·귤, 그 옆의 금액은 장면을 채우려고 정한 글자다. 세율 TAX_RATE 0.1 도 계산을 보여 주려는 숫자일 뿐 특정 나라의 세법과는 관계가 없다. 실제 결제 화면에 옮긴다면 금액과 세금 계산은 자기 서비스의 규칙으로 바꿔 넣어야 한다.

렌더로 잰 아홉 장면의 움직임

480×300 창에서 2초 동안 24장을 찍고 이웃한 두 장씩 비교한 값이라, 움직인 프레임은 23 을 분모로 센다.

장면 누적면적 강도 평균 움직인 프레임
01 한 줄 인쇄와 떨림 23.6% 35.6 23/23
02 절취선 찢기 26.9% 118.4 20/23
03 톱니 가장자리와 말림 36.5% 65.8 23/23
04 바코드 스캔 빔 15.1% 66.9 23/23
05 굴러가는 합계 8.6% 103.6 23/23
06 롤 원통 음영 32.6% 51.3 23/23
07 감열지 바램 40.5% 30.7 18/23
08 꽂이 진자 41.1% 83.4 23/23
09 나눠 내기 37.7% 138.5 23/23

10% 아래는 05 하나뿐인데, 화면에서 바뀌는 곳이 숫자판 몇 자리라서 생기는 크기다. 07 이 18/23 인 건 글자가 다 바랜 뒤 다음 인쇄를 기다리는 정지 구간이, 02 가 20/23 인 건 조각이 돌아오거나 떨어진 뒤 새 종이를 기다리는 구간이 2초 안에 들어갔기 때문이다.

이 장면을 붙일 만한 화면

receipt css template 이라고 하면 보통 종이 카드 한 장을 떠올리지만, 이 편은 그 종이가 움직이는 순간을 골랐다. 매장 결제가 끝난 화면에 주문 내역을 한 줄씩 뽑아 보이고 싶다면 01, 「영수증 받기」 를 손으로 뜯는 느낌으로 만들고 싶다면 02 가 출발점이다. 쿠폰이나 영수증 카드의 가장자리 장식은 03, 반품이나 환불을 확인했다는 신호는 04, 장바구니 합계와 결제 요약은 05 가 맞는다. 인쇄를 기다리는 화면은 06, 오래된 내역을 보여 주는 보관함은 07 과 08, 모임 비용을 사람별로 나누는 정산 화면은 09 에서 시작하면 된다.

css receipt design 의 계산 조각 — 항목마다 소스에서 이어진 줄 그대로

조각은 장면별 index.html 의 <script> 에서 끊기지 않고 이어진 8~25줄을 들여쓰기까지 옮긴 것이다. 함수와 상수 이름이 소스와 같으니, zip 을 연 뒤 같은 이름으로 검색하면 조각 앞뒤 맥락이 바로 나온다.

01인쇄 머리가 한 줄씩 찍을 때마다 종이가 한 칸 밀리며 미세하게 떨리는 영수증 인쇄 장면

한 줄은 180ms(LINE_MS) 동안 왼쪽부터 투명도 0.3 으로 드러나고 줄이 끝난 뒤 160ms 에 걸쳐 진해지며, 이어지는 140ms(FEED_MS) 동안 종이가 FEED_PX 14px 밀릴 때 shiverAt 의 가로 떨림이 얹힌다. 줄의 높이는 찍힌 순간의 밀림값과 지금 밀림값의 차이로만 정해지므로, 줄마다 따로 움직임을 걸지 않아도 아홉 줄이 한 덩어리로 올라간다. 떨림은 SHIVER_PX 2.4 에 (1 − k) 가 곱해져 실제 최댓값이 약 2.2px 에 머물고, 렌더에서는 누적면적 23.6%·강도 35.6 에 23/23 프레임이 움직였다.

인쇄 머리가 한 줄씩 찍을 때마다 종이가 한 칸 밀리며 미세하게 떨리는 영수증 인쇄 장면
새 창에서 열기

01 · 인쇄 머리가 한 줄씩 찍을 때마다 종이가 한 칸 밀리며 미세하게 떨리는 영수증 인쇄 장면 — 측정 누적면적 23.613% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

FEED_PXLINE_MSSHIVER_PXPAPER_W
    // 이어서 밀리는 동안의 가로 떨림 — 시작에 크고 끝으로 갈수록 잦아든다
    function shiverAt(k) {
        return SHIVER_PX * Math.sin(k * Math.PI * 7) * (1 - k);
    }
    // 줄 하나의 세로 위치 — 찍힌 순간의 밀림값과 지금 밀림값의 차이만큼 머리에서 멀어진다
    function rowY(printedScroll, scrollNow) {
        return HEAD_Y - 9 - (scrollNow - printedScroll);
    }

02절취선 아래 종이를 끌어 내렸다 놓으면 기준 거리를 넘었을 때 뜯겨 떨어지고 못 넘으면 스프링으로 돌아가는 장면

절취선의 이 21개(STRIP_W 210 ÷ TOOTH_PX 10)는 끊기는 거리가 저마다 TEAR_PX 의 0.45~1.0배로 시드 461 에서 정해져서, 끄는 동안 서로 다른 순간에 하나씩 끊어진다. 찢을지는 이와 상관없이 손을 놓는 순간 release() 가 pull ≥ TEAR_PX 한 번으로 정하고, 넘으면 GRAVITY 2600 으로 떨어뜨리고 못 넘으면 SPRING_K 190·감쇠 17 의 스프링으로 되감는다. 렌더 수치는 누적면적 26.9%·강도 118.4 이고, 되돌아온 뒤 새 종이를 기다리는 동안 멈춰 있어 움직인 프레임은 20/23 이다.

절취선 아래 종이를 끌어 내렸다 놓으면 기준 거리를 넘었을 때 뜯겨 떨어지고 못 넘으면 스프링으로 돌아가는 장면
새 창에서 열기

02 · 절취선 아래 종이를 끌어 내렸다 놓으면 기준 거리를 넘었을 때 뜯겨 떨어지고 못 넘으면 스프링으로 돌아가는 장면 — 측정 누적면적 26.888% · 움직인 프레임 20/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

TEAR_PXGRAVITYSPRING_KTOOTH_PX
    const rnd = lcg(461);
    for (let i = 0; i < 40; i += 1) {
        toothBreak.push(0.45 + 0.55 * rnd());
    }
    function teethCount() { return Math.floor(STRIP_W / TOOTH_PX); }
    // 끈 거리에 따라 이가 하나씩 끊긴다 — 이마다 끊기는 거리가 다르다
    function intactTeeth(d) {
        let n = 0;
        for (let i = 0; i < teethCount(); i += 1) {
            if (d < TEAR_PX * toothBreak[i % 40]) {
                n += 1;
            }
        }
        return n;
    }

03톱니 모양 가장자리와 위로 말린 모서리에 열마다 다른 그림자가 지나가는 종이 질감 장면

종이를 가운데는 평평하고 양 끝으로 갈수록 u × 0.62 만큼 기운 곡면으로 보고, 3px 폭의 열 100개마다 법선과 빛 방향의 내적으로 (1 − dot) × SHADE_MAX 를 칠한다. 빛은 LIGHT_DEG 38° 를 가운데 두고 SWAY_DEG 46° 씩 2.4초에 한 번 오가는데, 84° 끝에서는 맨 오른쪽 열 음영이 상한 0.46 까지 올라 말린 모서리의 그림자와 함께 한쪽이 가라앉는다. 측정으로는 누적면적 36.5%·강도 65.8, 23/23 프레임이 잡혔다.

톱니 모양 가장자리와 위로 말린 모서리에 열마다 다른 그림자가 지나가는 종이 질감 장면
새 창에서 열기

03 · 톱니 모양 가장자리와 위로 말린 모서리에 열마다 다른 그림자가 지나가는 종이 질감 장면 — 측정 누적면적 36.52% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

TOOTH_NCURL_PXLIGHT_DEGSHADE_MAX
    // 지금 빛이 오는 각도(도) — 자동이면 기준 각도를 중심으로 계속 흔든다
    function lightDeg() {
        if (manual) {
            return manualDeg;
        }
        return LIGHT_DEG + SWAY_DEG * Math.sin((clock / SWAY_MS) * Math.PI * 2);
    }
    // 가로 열 하나의 음영 세기 — 종이를 부드럽게 말린 곡면으로 보고 법선과 빛 방향의 내적을 쓴다
    function shadeAt(col, deg) {
        const u = col / SHEET_W * 2 - 1;
        const slope = u * 0.62;
        const nx = -slope;
        const nz = Math.sqrt(1 - Math.min(0.99, slope * slope));
        const rad = deg * Math.PI / 180;
        const lx = Math.sin(rad);
        const lz = Math.cos(rad);
        const dot = clamp(nx * lx + nz * lz, 0, 1);
        return (1 - dot) * SHADE_MAX;
    }

04시드로 만든 막대 폭이 줄지어 있고 빔이 훑으면 막대가 차례로 밝아지며 확인 표시가 켜지는 바코드 스캔

막대 46개(BAR_N)의 폭을 lcg(SEED) 가 1~4 단위에서 뽑고, 336×118 픽셀 버퍼의 점마다 빔과의 거리 d 로 exp(−d² / (2·GLOW_PX²)) 를 구해 먹줄은 분홍 쪽으로 최대 0.9, 종이는 흰색 쪽으로 최대 0.55 섞는다. 빔 위치에는 5·sin(y/15 + clock/140) 이 더해져 같은 열도 높이마다 밝기가 다르고, 빔이 끝에 닿으면 확인 점이 민트로 켜지며 반지름이 1.5배로 부풀었다가 곧 제 크기로 돌아온다. 버퍼를 프레임마다 putImageData 로 올리는 이 장면은 누적면적 15.1%·강도 66.9·23/23 프레임이다.

시드로 만든 막대 폭이 줄지어 있고 빔이 훑으면 막대가 차례로 밝아지며 확인 표시가 켜지는 바코드 스캔
새 창에서 열기

04 · 시드로 만든 막대 폭이 줄지어 있고 빔이 훑으면 막대가 차례로 밝아지며 확인 표시가 켜지는 바코드 스캔 — 측정 누적면적 15.149% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

BAR_NBEAM_MSGLOW_PXSEED
    function paintBars(t) {
        const data = img.data;
        const sig = 2 * GLOW_PX * GLOW_PX;
        for (let y = 0; y < BH; y += 1) {
            const bx = beamX(y, t);
            const fall = 1 - 0.18 * (y / BH);
            for (let x = 0; x < BW; x += 1) {
                const dx = x - bx;
                const g = Math.exp(-(dx * dx) / sig) * fall;
                const ink = inkAt[x] === 1;
                const base = ink ? INK : PAPER;
                const tint = ink ? PINK : [255, 255, 255];
                const m = ink ? g * 0.9 : g * 0.55;
                const i4 = (y * BW + x) * 4;
                data[i4] = base[0] + (tint[0] - base[0]) * m;
                data[i4 + 1] = base[1] + (tint[1] - base[1]) * m;
                data[i4 + 2] = base[2] + (tint[2] - base[2]) * m;
                data[i4 + 3] = 255;
            }
        }
        offCtx.putImageData(img, 0, 0);
    }

05품목이 추가될 때마다 합계 자릿수가 위아래로 굴러 올라가고 세금 줄이 한 박자 늦게 따라오는 합계 줄

합계는 틱마다 speed = speed × INERTIA + (target − shown) × PULL_K 로 목표를 쫓아 4.2% 지나쳤다가 돌아오고, digitPos 는 일의 자리만 값 그대로 돌리며 윗자리는 바로 아래 자리가 9.9 를 넘는 마지막 0.1 구간에서만 한 칸 굴린다. 세금 줄은 계산된 목표가 아니라 화면에 보이는 합계의 10% 를 DELAY_MS 260 을 시정수로 한 지연 필터로 받아서, 1,200 을 담으면 합계가 960 을 지나는 순간에도 세금은 96 이 아닌 52 언저리로 뒤처지지만 필터가 합계의 지나침을 눌러 ±0.5 안쪽에 머무는 시각은 세금 1,584ms·합계 2,368ms 로 오히려 세금이 먼저다. 움직이는 것이 숫자판뿐이라 누적면적은 8.6% 로 가장 작지만 강도는 103.6 이고 23/23 프레임에서 변화가 잡혔다.

품목이 추가될 때마다 합계 자릿수가 위아래로 굴러 올라가고 세금 줄이 한 박자 늦게 따라오는 합계 줄
새 창에서 열기

05 · 품목이 추가될 때마다 합계 자릿수가 위아래로 굴러 올라가고 세금 줄이 한 박자 늦게 따라오는 합계 줄 — 측정 누적면적 8.624% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

DIGIT_HINERTIATAX_RATEDELAY_MS
    // 숫자 판 하나가 놓이는 위치 — 올림이 일어나는 구간(바로 아래 자리가 9.9 를 넘길 때)에만 구른다
    function digitPos(value, d) {
        if (d === 0) {
            return value;
        }
        const scale = Math.pow(10, d);
        const base = Math.floor(value / scale);
        const f = value / scale - base;
        return base + smooth((f - 0.9) / 0.1);
    }

06롤에서 풀려 나오는 종이의 원통 음영이 픽셀마다 계산되고 롤 반지름이 줄어드는 영수증 롤 장면

롤 반지름은 radiusAt 가 반지름 제곱에서 THICK × 풀린 길이 를 빼서 구하므로 한 주기 2.6초가 끝날 때 58px 에서 40.2px 가 되고, 0.4 × ROLL_R² 하한에 닿으면 더 줄지 않는다. 340×118 버퍼의 픽셀마다 원통 법선 (0, ny, √(1 − ny²)) 과 광원의 내적에 반사광 0.25 × (N·H)^26 을 더해 밝기를 내는데, THICK 4.8 은 실제 종이 두께가 아니라 반지름 변화가 눈에 보이도록 키운 값이다. 이 롤 장면은 누적면적 32.6%·강도 51.3·23/23 프레임으로 측정됐다.

롤에서 풀려 나오는 종이의 원통 음영이 픽셀마다 계산되고 롤 반지름이 줄어드는 영수증 롤 장면
새 창에서 열기

06 · 롤에서 풀려 나오는 종이의 원통 음영이 픽셀마다 계산되고 롤 반지름이 줄어드는 영수증 롤 장면 — 측정 누적면적 32.6% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

ROLL_RLIGHT_VECUNWIND_PXSHADE_GAIN
    // 남은 종이 길이로 롤 반지름을 구한다 — 면적(반지름 제곱)이 길이에 비례해 줄어든다
    function radiusAt(len) {
        return Math.sqrt(Math.max(ROLL_R * ROLL_R * 0.4, ROLL_R * ROLL_R - THICK * len));
    }
    // 한 픽셀의 음영 — 원통의 법선(0, ny, nz)과 빛 방향의 내적
    function shadePixel(ny) {
        const nz = Math.sqrt(Math.max(0, 1 - ny * ny));
        const diff = Math.max(0, ny * ly + nz * lz);
        const hx = lx;
        const hy = ly;
        const hz = lz + 1;
        const hl = Math.sqrt(hx * hx + hy * hy + hz * hz);
        const spec = Math.pow(Math.max(0, (ny * hy + nz * hz) / hl), 26);
        return 0.42 + SHADE_GAIN * diff + spec * 0.25;
    }

07열이 닿은 곳만 짙어지고 시간이 지나면 노이즈 지도에 따라 얼룩덜룩 바래는 감열지 글자

인쇄 머리가 700ms 동안 위에서 아래로 지나가며 글자 자리에는 HEAT_GAIN 1 의 열을, 빈 종이에는 임계 CUTOFF 0.25 보다 낮은 HALO 0.24 만 쌓고, 그 뒤 점마다 decayAt(n) 만큼 열을 덜어 낸다. 지도 값 n 은 NOISE_SCALE 30 의 큰 덩이 0.7 과 잔 무늬 0.3 을 섞은 값 노이즈라서, 열 1.0 이 임계 아래로 가는 시간이 가장 빠른 자리 0.58초부터 가장 느린 자리 1.53초까지 벌어지며 얼룩이 생긴다. 280×300 점을 틱마다 도는 이 장면은 누적면적 40.5%·강도 30.7 이고, 다 바랜 뒤 쉬는 구간이 있어 움직인 프레임은 18/23 이다.

열이 닿은 곳만 짙어지고 시간이 지나면 노이즈 지도에 따라 얼룩덜룩 바래는 감열지 글자
새 창에서 열기

07 · 열이 닿은 곳만 짙어지고 시간이 지나면 노이즈 지도에 따라 얼룩덜룩 바래는 감열지 글자 — 측정 누적면적 40.473% · 움직인 프레임 18/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

HEAT_GAINFADE_RATENOISE_SCALECUTOFF
    // 값 노이즈 — 격자점 해시 네 개를 부드럽게 섞는다
    function noise2(x, y) {
        const xi = Math.floor(x);
        const yi = Math.floor(y);
        const fx = smooth(x - xi);
        const fy = smooth(y - yi);
        const a = hash2(xi, yi);
        const b = hash2(xi + 1, yi);
        const c = hash2(xi, yi + 1);
        const d = hash2(xi + 1, yi + 1);
        return lerp(lerp(a, b, fx), lerp(c, d, fx), fy);
    }
    // 한 자리의 바램 속도(초당 열 감소량) — 지도 값 n(0~1)이 클수록 빨리 바랜다
    function decayAt(n) {
        return FADE_RATE * (1 + SPREAD * n);
    }
    // 바램 속도 지도 — 위치마다 다른 값 (큰 덩이 + 잔 무늬)
    function buildRate() {
        for (let y = 0; y < H; y += 1) {
            for (let x = 0; x < PW; x += 1) {
                const n = 0.7 * noise2(x / NOISE_SCALE, y / NOISE_SCALE) + 0.3 * noise2(x / (NOISE_SCALE * 0.35) + 9, y / (NOISE_SCALE * 0.35) + 4);
                rate[y * PW + x] = n;
            }
        }
    }

08꽂이 막대에 나란히 걸린 영수증 아홉 장이 장마다 다른 길이의 진자로 흔들리다 짧은 장부터 가라앉는 보관 장면

판 아홉 장의 길이를 70px 에서 22px 씩 늘려 246px 까지 두고, 각가속도 −(GRAV / L)·sin θ − DAMP·(LEN_REF / L)·ω 로 흔들어 짧은 판일수록 빨리 흔들리고 빨리 잦아든다. 1,800ms 마다 방향을 바꾼 충격을 길이에 반비례해 주면 가장 짧은 판(주기 0.88초)은 약 3.2초, 가장 긴 판(주기 1.64초)은 약 8.3초가 지나야 멎으므로, 긴 판이 서기 전에 다음 충격이 들어온다. 누적면적 41.1% 로 아홉 장면 중 가장 넓게 움직였고 강도는 83.4, 프레임은 23/23 이다.

꽂이 막대에 나란히 걸린 영수증 아홉 장이 장마다 다른 길이의 진자로 흔들리다 짧은 장부터 가라앉는 보관 장면
새 창에서 열기

08 · 꽂이 막대에 나란히 걸린 영수증 아홉 장이 장마다 다른 길이의 진자로 흔들리다 짧은 장부터 가라앉는 보관 장면 — 측정 누적면적 41.086% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

SHEET_NLEN_MINDAMPKICK
    // 판 하나의 각도 가속 — 길이가 길수록 느리고, 짧은 판일수록 공기 저항이 크다
    function accel(i, a, v) {
        return -(GRAV / len[i]) * Math.sin(a) - DAMP * (LEN_REF / len[i]) * v;
    }
    function kick(dir) {
        for (let i = 0; i < SHEET_N; i += 1) {
            vel[i] += dir * KICK * (LEN_REF / len[i]);
        }
        barVel += dir * 60;
    }
    function step() {
        clock += FIXED_DT;
        const dt = FIXED_DT / 1000;
        if (clock >= nextKick) {
            kick(sign);
            sign = -sign;
            nextKick = clock + KICK_MS;
        }
        for (let i = 0; i < SHEET_N; i += 1) {
            vel[i] += accel(i, ang[i], vel[i]) * dt;
            ang[i] += vel[i] * dt;
        }
        barVel += (-90 * barShift - 9 * barVel) * dt;
        barShift += barVel * dt;
    }

09품목을 사람 칸으로 끌어다 놓으면 칸별 합계가 감쇠하며 새 값을 따라 굴러가는 나눠 내기 목록

칩을 놓으면 judge 가 칩 중심이 칸 세 개 중 어느 사각형 안에 있는지 보고, 안이면 그 칸으로, 밖이면 원래 소속으로 SPRING_K 240·감쇠 19 의 스프링을 걸어 transform 만으로 옮긴다. 칸 합계는 round(소계 × (1 + TAX_RATE)) 를 목표로 프레임마다 1 − exp(−EASE_RATE·dt) 비율만큼 다가가서, 식빵 하나를 받은 칸의 3,080 은 256ms 에 90%, 512ms 에 99% 까지 찬다. 캔버스 없이 버튼 다섯 개만 움직이는데도 누적면적 37.7%·강도 138.5·23/23 프레임이 나왔다.

품목을 사람 칸으로 끌어다 놓으면 칸별 합계가 감쇠하며 새 값을 따라 굴러가는 나눠 내기 목록
새 창에서 열기

09 · 품목을 사람 칸으로 끌어다 놓으면 칸별 합계가 감쇠하며 새 값을 따라 굴러가는 나눠 내기 목록 — 측정 누적면적 37.728% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

SLOT_NTAX_RATESPRING_KEASE_RATE
    // 놓을 때의 판정 — 칩 중심이 어느 칸 안에 있는가
    function judge(cx, cy) {
        for (let s = 0; s < SLOT_N; s += 1) {
            const r = slotRect(s);
            if (cx >= r[0] && cx <= r[0] + r[2] && cy >= r[1] && cy <= r[1] + r[3]) {
                return s;
            }
        }
        return -1;
    }
    function drop(i) {
        const s = judge(px[i] + CHIP_W / 2, py[i] + CHIP_H / 2);
        if (s < 0) {
            status.textContent = labelOf(i) + ' — ' + TXT_MISS;
            if (reduceQuery.matches) {
                snap();
            }
            return;
        }
        assign(i, s);
    }

밀림 거리·찢김 기준·바램 속도 — 값 하나가 종이의 느낌을 바꾸는 곳

이 절의 수치는 렌더 캡처가 아니라, 장면 소스에 있는 rowY·intactTeeth·decayAt·buildRate·buildBars 를 노드로 불러 계산한 결과다. 위 측정 표와는 재는 방법이 달라서 섞어 읽지 않는다.

FEED_PX 를 14 에서 30 으로 올리면 제목 줄이 종이 위로 빠져나간다

아홉 줄을 다 찍은 순간 첫 줄 y 는 101 에서 −43 으로, 마지막 줄 y 는 213 에서 197 로 옮겨 가고, 첫 줄과 마지막 줄의 거리는 112px 에서 240px 로 벌어진다. 화면 안에 남는 줄은 9줄에서 7줄이 되어 가게 이름과 첫 구분선이 위로 사라진다. 떨림 최댓값 약 2.2px 는 그대로라서 줄 간격에 견준 떨림의 비율은 14px 일 때보다 절반 아래로 작아진다.

TEAR_PX 를 60 에서 140 으로 올리면 96px 당김이 되돌아간다

자동 시연의 짝수 번째 당김인 96px 는 60 에서는 기준을 넘어 조각이 떨어지지만, 140 에서는 판정을 넘지 못해 스프링으로 돌아간다. 96px 에서 이어져 있는 이는 21개 중 0개에서 9개로 늘고 130px 까지 당겨도 3개가 남으며, 36px 당김에서 남는 이는 14개에서 21개 전부가 된다. 이의 끊김 문턱이 TEAR_PX 에 비례해서, 이 값 하나가 종이의 질김과 찢김 판정을 함께 옮긴다.

FADE_RATE 를 0.4 에서 1.6 으로 올리면 바램이 약 4배 빨라진다

열 1.0 이 CUTOFF 아래로 떨어지는 시간의 중앙값은 0.86초에서 0.22초, 가장 느린 자리는 1.53초에서 0.38초, 가장 빠른 자리는 0.58초에서 0.15초가 된다. 노이즈 지도 모양은 바뀌지 않아서 얼룩이 생기는 자리와 비율은 같고 시간 축만 4분의 1 로 접힌다. 자동 주기 CYCLE_MS 2.8초는 그대로이니, 같은 주기 안에서 다 바랜 빈 종이로 머무는 시간이 그만큼 길어진다.

바코드 시드를 461 에서 462 로 바꾸면 막대 수와 숫자가 함께 바뀐다

시드 461 은 먹줄 154열에 숫자 472925035412, 「다음 코드」 를 눌러 시드가 462 가 되면 149열에 489092530559 가 나온다. 같은 시드로 두 번 만들면 막대와 숫자가 똑같이 다시 나온다. 숫자는 lcg(seed + 7) 로 막대와 다른 수열에서 뽑기 때문에 막대 폭과 숫자는 서로 대응하지 않는다.

어디서 깨지는가 — 기준 바로 밑에서 놓을 때·목표를 지나칠 때·움직임 줄이기 설정

종이를 손으로 만지는 장면은 보이는 것과 판정이 어긋나는 틈이 생긴다. 아래는 소스의 식을 다시 계산하거나 입력 경로를 따라가 확인한 것이고, 기기마다 프레임 시간이 얼마나 걸리는지는 재지 않았다.

02 는 이가 거의 다 끊겨도 59px 에서 놓으면 돌아온다

이의 끊김은 당긴 거리에 따라 하나씩 계산되지만 찢김 판정은 손을 놓는 순간 pull ≥ TEAR_PX 한 번이다. 그래서 59px 에서 놓으면 종이가 거의 떨어져 보이는데도 스프링이 512ms 에 걸쳐 되감고, 반대쪽으로 3.6px 지나쳤다가 선다. 36px 에서 놓을 때는 496ms·2.2px 이고, 96px 에서 놓은 조각은 384ms 만에 화면 아래로 사라진다.

02 의 키보드는 Enter 를 눌러야 손을 놓는다

캔버스에 초점을 두고 ArrowDown 을 누르면 12px 씩 당겨지고 ArrowUp 은 12px 를 되돌리지만, 키를 떼는 것만으로는 놓이지 않고 Enter 를 눌러야 판정이 난다. 새 종이가 미끄러져 나오는 동안에는 잡히지 않는다. 사람이 한 번 만진 뒤로는 자동 시연이 새로고침 전까지 다시 돌지 않는데, 05 와 09 도 사람이 손을 대면 자동 진행이 멈춘다.

05 의 합계는 잠깐 목표보다 큰 숫자를 보여 준다

관성으로 따라가기 때문에 합계가 목표를 4.2% 넘긴다. 11,600 을 향할 때 최고 약 12,090 까지 올라갔다가 내려온다. 1,200 은 1,648ms 에 처음 ±0.5 안쪽에 들었다가 한 번 더 빠져나가 2,368ms 에야 머물고, 13,500 은 2,592ms 에 처음 들어 3,184ms 에 자리를 잡는다. 실제 금액을 보여 주는 자리라면 굴러가는 동안의 숫자도 화면에 찍힌다는 점을 계산에 넣어야 하고, 숫자판이 5자리라 99,999 를 넘으면 맨 앞 자리가 잘린다는 것도 알아 둔다.

05 의 세금 끝자리는 반쯤 걸친 채로 굴러간다

세금은 반올림하지 않은 보간값을 그대로 숫자판에 넘긴다. 그래서 값이 멈추기 직전까지 마지막 자리가 두 숫자 사이에 반쯤 걸쳐 보인다. 딱 떨어진 숫자로 멈춰 보이게 하려면 숫자판에 넘기기 전에 값을 정수로 맞추는 한 줄이 더 필요하다.

03 은 드래그와 방향키의 각도 범위가 다르다

자동으로 흔들릴 때 빛은 −8°~84° 를 오가지만, 캔버스를 끌어서 정하는 각도는 ±60° 로 잘리고 방향키는 6° 씩 ±90° 까지 간다. 그래서 끌어서는 자동 범위의 84° 쪽 끝을 다시 만들 수 없고, 방향키로는 자동에서 나오지 않는 −90° 까지 기울일 수 있다.

06 의 광원을 끝으로 밀면 어두운 쪽이 바닥에 붙는다

음영은 0.42 + SHADE_GAIN × max(0, N·L) 이라서 빛을 받지 못하는 면은 0.42 에서 더 내려가지 않고, 끝 마개 쪽은 거기에 0.55 까지 더 곱해진다. 광원을 한쪽 끝으로 몰면 반대쪽이 이 바닥값에 붙어 거의 검게 눌린다. 멈춤 을 눌러도 롤만 서고 포인터를 움직이면 광원은 계속 바뀐다.

07 의 빈 종이 열을 임계 위로 올리면 얼룩이 글자처럼 남는다

빈 종이에 쌓는 HALO 0.24 는 CUTOFF 0.25 바로 밑이라 옅게 달아오를 뿐 글자색이 되지 않는다. 이 값을 0.25 이상으로 올리면 글자가 없는 자리에도 글자색 얼룩이 생긴다. 픽셀 루프는 틱마다 84,000 점을 돌아서 04(336×118)·06(340×118) 버퍼의 두 배가 넘고, 느린 기기에서는 프레임을 놓칠 수 있다.

08 은 흔들리는 각도에 한계가 없다

복원력은 sin θ 뿐이고 각도를 묶는 clamp 가 없다. 툭 치기 버튼이나 캔버스를 누르면 userKick() 이 자동 충격과 같은 kick(sign) 을 부른 뒤 부호를 뒤집으므로, 연달아 눌러도 한쪽으로만 쌓이지 않고 좌우가 번갈아 들어간다. 대신 누를 때마다 다음 자동 충격이 그 시점에서 1.8초 뒤로 밀려서, 계속 누르는 동안에는 자동 일정이 오지 않는다.

화면이 좁으면 09 의 칩 글자도 함께 작아진다

09 는 480×300 판 전체에 transform: scale(부모 폭 / 480) 을 걸어 맞춘다. 캡처 창 480×300 에서는 무대 바깥 여백 때문에 무대가 약 418.6×261.6 px 로 그려져 배율이 약 0.872 이고, 12px 칩 글자는 약 10.5px 로 보인다. 폰처럼 폭이 더 좁으면 글자도 그 비율로 줄어들고, 340px 이하에서는 상태 알약과 버튼 글자도 10px 로 내려간다.

탭을 숨겼다 돌아오면 그 사이의 시간은 버려진다

탭이 숨으면 requestAnimationFrame 이 멈추고, 돌아온 첫 프레임에는 100ms 만 더해진다. 그래서 종이가 한 번에 몇 초어치를 따라잡으며 튀지는 않지만, 숨겨 둔 동안 진행됐어야 할 인쇄나 바램은 건너뛴 채 이어진다.

상수를 하나씩 바꿔 종이가 어디서 무너지는지 직접 보려면 zip 을 받아 fpfbfa6s 으로 풀면 된다. 압축 안에는 장면 아홉 개의 index.html 과 style.scss, 그리고 같은 계산을 옮긴 리액트 판이 함께 들어 있다.

줄 간격·찢김 기준·바램 속도의 세 변형과 영수증 장면의 접근성

이름 값 느낌
인쇄 줄 간격 바꾸기 01 FEED_PX 14 → 30 첫~마지막 줄 거리가 112px 에서 240px 로 벌어지고 제목 줄이 y −43 으로 밀려나 보이는 줄이 9줄에서 7줄이 된다. 떨림 최댓값 약 2.2px 는 같다.
찢김 기준 바꾸기 02 TEAR_PX 60 → 140 자동 시연의 96px 당김이 낙하에서 스프링 복귀로 바뀌고, 그 순간 이어진 이가 0/21 에서 9/21 로 늘어난다.
바램 속도 바꾸기 07 FADE_RATE 0.4 → 1.6 임계 아래로 가는 시간의 중앙값이 0.86초에서 0.22초가 되어 얼룩 모양은 같은 채로 약 4배 빨리 바랜다.

조작은 마우스나 손가락이 없어도 닿는다. 장면마다 진짜 <button> 이 있고(01 다시 인쇄, 02 찢기·살짝 당기기, 03 빛 고정, 04 다시 스캔·다음 코드, 05 품목 추가·비우기, 06 멈춤·새 롤, 07 다시 인쇄·햇빛 쬐기, 08 툭 치기, 09 처음으로), 03 빛 고정·06 멈춤·07 햇빛 쬐기는 aria-pressed 로 켜짐 상태를 알린다. 키를 직접 받는 캔버스는 02·03·06 세 개에만 tabindex="0" 이 있고, 09 는 품목 칩 다섯 개가 버튼이라 Tab 으로 차례로 닿는다. 09 칩에서 Enter·Space 를 누르면 원래 자리 → A → B → C 순으로 옮겨 가고, 숫자 1~3 은 해당 칸으로, 0 이나 Backspace 는 원래 자리로 보낸다. preventDefault 는 02 의 ArrowDown·ArrowUp·Enter, 03 의 좌우 방향키, 06 의 방향키, 09 의 숫자·지우기 키에만 걸려 있고 Tab 은 어느 장면에서도 막지 않는다.

화면 읽기 프로그램에 들려주는 문구는 장면마다 aria-live="polite" 인 상태 알약 하나이고, 일이 생길 때만 바뀐다. 01 은 인쇄 한 번에 인쇄 중 과 인쇄 완료 — 합계 11,600 두 번, 08 은 사람이 칠 때만 툭 쳤다 를 알리고 자동 충격은 알리지 않으며, 09 는 품목 → 칸, 합계 N 꼴로 어느 칸에 얼마가 됐는지 읽어 준다.

prefers-reduced-motion 이 켜져 있으면 01~08 은 시작할 때 이를 확인해 프레임 루프를 돌리지 않고 settle() 과 draw() 를 한 번씩만 불러 정지 화면을 남긴다. 01 은 다 찍힌 영수증, 04 는 확인 점이 켜진 읽음 상태, 07 은 글자가 다 진한 상태로 서 있다. 입력은 결과로 바로 건너뛴다. 02 는 finishNow() 로 스프링과 낙하 없이 끝 상태가 되고, 05 는 shown = target 으로 숫자를 곧장 놓으며, 08 은 흔들지 않고 상태 글자만 바꾸고, 09 는 snap() 으로 칩을 굴리지 않고 제자리에 앉힌다. 스타일시트 쪽 reduce 블록이 하는 일은 커서를 기본 모양으로 돌리는 것뿐이다.

css receipt effect 는 CSS 만으로 충분한가?

이 편에서 CSS 가 맡은 건 무대와 버튼이다. .rc 는 width: min(92vw, calc(160vh - 12.8vw)) 에 aspect-ratio: 480 / 300 으로 크기만 정하고, 02·03 캔버스와 09 칩에는 끌기가 페이지 스크롤로 새지 않도록 touch-action: none 을 건다. 그 안의 css receipt effect 는 놓는 순간의 판정(02), 목표를 쫓다 지나치는 숫자(05)와 칩(09), 점마다 속도가 다른 바램(07)처럼 입력과 앞 프레임에 따라 다음 값이 정해지는 것들이라, 키프레임에 미리 적어 둘 수 있는 움직임이 아니었다.

정지된 영수증 카드만 필요하다면 쿠폰 가장자리를 다룬 쿠폰 디자인 9종 이 가깝고, 결제 흐름 전체는 장바구니 UI 9종, 숫자가 올라가는 연출만 따로 보려면 CSS 숫자 증가 애니메이션 9종 으로 이어 보면 된다. 시간 처리와 끌기 입력은 requestAnimationFrame 과 Pointer events 문서를 기준으로 짰다.

html css receipt template 코드를 가져다 쓰기 전에 자주 묻는 질문

css receipt design 그대로 결제 화면에 넣으면 금액이 맞게 나오나?

금액 계산은 장면을 보여 주려는 예시다. 09 의 칸 합계는 round(소계 × (1 + TAX_RATE)) 로 한 번 반올림할 뿐이고, 05 의 세금 줄은 반올림 없이 굴러간다. 세율과 반올림 규칙은 쓰는 쪽 서비스의 규칙으로 바꿔야 한다.

영수증에 찍히는 글자는 어디서 바꾸나?

01 은 ROWS 배열, 06·07 은 TXT_LINES, 05 는 품목 가격 PRICES 를 고치면 된다. 07 은 시작할 때 글자 마스크를 한 번만 그려 읽으므로, 글자를 바꾼 뒤에는 새로 불러와야 바램 지도에도 반영된다.

장면 하나만 떼어 써도 되나?

된다. 장면 폴더마다 index.html 과 그 옆의 컴파일된 style.css 두 파일이면 돌아가고, 라이브러리나 CDN 은 부르지 않는다. style.scss 는 사이트 공용 토큰 파일을 @use 로 읽으므로 scss 로 다시 컴파일하려면 그 토큰 값도 함께 옮겨야 하고, 상태 알약과 버튼 묶음은 무대 .rc 를 기준으로 놓여 있어 무대 클래스와 비율도 같이 가져가는 편이 안전하다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.