08글자 렌더링 보정 — 환경마다 다르게 보이는 글자 두께를 맞추는 보정

<main class="stage">
<div class="wrap is-demo" id="wrap">
  <div class="compareBox" id="compareBox">
    <div class="textLayer is-raw">Aa 본문 글자</div>
    <div class="textLayer is-fixed" id="fixedLayer">Aa 본문 글자</div>
    <div class="handle" id="handle" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></div>
  </div>
  <div class="foot">
    <span class="modeLabel" id="modeLabel">보정 적용판</span>
    <button class="simToggle" id="simToggle" type="button" aria-pressed="false">폴백 흉내내기</button>
  </div>
</div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 계산 겹은 index.html 의 setSplit() 에 있다 — 실제 포인터 clientX 를 박스 폭 비율로 바꿔 --split
// 커스텀 속성에 넣는다. 여기는 그 비율을 clip-path 로 반영하는 규칙과 두 글자층의 대비만 맡는다.
// 실제 서브픽셀 렌더 차이는 이 크기에서 육안 판별이 어려워, 보정 없는 쪽은 번짐(text-shadow)으로
// 과장해 보여준다 — 진짜 보정(.is-fixed)은 폰트 굵기·자간의 수동 교정이 핵심이다.
@include stage($stage-paper);

.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-3;
}

.compareBox {
  --split: 50%;
  position: relative;
  width: 220px;
  height: 70px;
  border-radius: $r-card;
  overflow: hidden;
  background: $subject-cream;
}

.textLayer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: $subject-ink;
}

.textLayer.is-raw {
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: 0 0 1.4px rgba($subject-ink, .55), 0 0 .5px rgba($subject-ink, .4);
}

// 폴백: 벤더 스무딩을 몰라도 굵기·자간만으로 또렷하게 보정한다 — 항상 선언, 아래 @supports 는 보조
.textLayer.is-fixed {
  font-weight: 600;
  letter-spacing: .01em;
  text-shadow: none;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
  transition: clip-path $dur-instant $ease-out;
}

@supports (-webkit-font-smoothing: antialiased) or (font-smoothing: antialiased) {
  .wrap:not(.force-fallback) .textLayer.is-fixed {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

.handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 3px;
  margin-left: -1.5px;
  background: $subject-orange-deep;
  cursor: ew-resize;
  transition: left $dur-instant $ease-out;

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border-radius: $r-pill;
    background: $subject-orange-deep;
    transform: translate(-50%, -50%);
  }

  &:focus-visible { outline: 2px solid $subject-blue-light; outline-offset: 2px; }
}

.foot {
  display: flex;
  align-items: center;
  gap: $sp-2;
}

.modeLabel {
  color: $subject-ink;
  font-size: 10px;
  font-weight: 700;
}

.simToggle {
  appearance: none;
  border: none;
  border-radius: $r-pill;
  background: $subject-ink;
  color: $subject-cream;
  padding: $sp-1 $sp-3;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: transform $dur-instant $ease-out;

  &:active { transform: scale(.96); }
  &[aria-pressed="true"] { background: $subject-orange-deep; }
  &:focus-visible { outline: 2px solid $subject-blue-light; outline-offset: 2px; }
}

@media (max-width: 340px) {
  .compareBox { width: 190px; height: 62px; }
  .textLayer { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .textLayer.is-fixed { transition: none; }
  .handle { transition: none; }
  .simToggle { transition: none; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.compareBox {
  --split: 50%;
  position: relative;
  width: 220px;
  height: 70px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff7e6;
}

.textLayer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #17141a;
}

.textLayer.is-raw {
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: 0 0 1.4px rgba(23, 20, 26, 0.55), 0 0 0.5px rgba(23, 20, 26, 0.4);
}

.textLayer.is-fixed {
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: none;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
  transition: clip-path 140ms ease-out;
}

@supports (-webkit-font-smoothing: antialiased) or (font-smoothing: antialiased) {
  .wrap:not(.force-fallback) .textLayer.is-fixed {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
.handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 3px;
  margin-left: -1.5px;
  background: #c93000;
  cursor: ew-resize;
  transition: left 140ms ease-out;
}
.handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #c93000;
  transform: translate(-50%, -50%);
}
.handle:focus-visible {
  outline: 2px solid #5b8cf8;
  outline-offset: 2px;
}

.foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modeLabel {
  color: #17141a;
  font-size: 10px;
  font-weight: 700;
}

.simToggle {
  appearance: none;
  border: none;
  border-radius: 999px;
  background: #17141a;
  color: #fff7e6;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 140ms ease-out;
}
.simToggle:active {
  transform: scale(0.96);
}
.simToggle[aria-pressed=true] {
  background: #c93000;
}
.simToggle:focus-visible {
  outline: 2px solid #5b8cf8;
  outline-offset: 2px;
}

@media (max-width: 340px) {
  .compareBox {
    width: 190px;
    height: 62px;
  }
  .textLayer {
    font-size: 19px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .textLayer.is-fixed {
    transition: none;
  }
  .handle {
    transition: none;
  }
  .simToggle {
    transition: none;
  }
}

(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  var wrap = document.getElementById('wrap');
  var compareBox = document.getElementById('compareBox');
  var handle = document.getElementById('handle');
  var simToggle = document.getElementById('simToggle');
  var modeLabel = document.getElementById('modeLabel');
  var isDemo = true;

  function human() { if (isDemo) { wrap.classList.remove('is-demo'); isDemo = false; } }

  var split = 50;
  function setSplit(v) {
    split = Math.max(0, Math.min(100, v));
    compareBox.style.setProperty('--split', split + '%');
    handle.setAttribute('aria-valuenow', String(Math.round(split)));
  }
  setSplit(split);

  var dragging = false;
  handle.addEventListener('pointerdown', function (e) {
    human();
    dragging = true;
    handle.setPointerCapture(e.pointerId);
  });
  handle.addEventListener('pointermove', function (e) {
    if (!dragging) return;
    var rect = compareBox.getBoundingClientRect();
    setSplit(((e.clientX - rect.left) / rect.width) * 100);
  });
  handle.addEventListener('pointerup', function () { dragging = false; });
  handle.addEventListener('keydown', function (e) {
    human();
    if (e.key === 'ArrowLeft') setSplit(split - 5);
    else if (e.key === 'ArrowRight') setSplit(split + 5);
  });

  var simOn = false;
  function setSim(on) {
    simOn = on;
    wrap.classList.toggle('force-fallback', on);
    simToggle.setAttribute('aria-pressed', String(on));
    modeLabel.textContent = on ? '보정 없는판' : '보정 적용판';
  }
  simToggle.addEventListener('click', function () { human(); setSim(!simOn); });

  // 자동 재생: 삼각파(사인이 아니라 선형 왕복)로 손잡이를 오간다 — 난수 없이 결정론적
  var last = 0;
  var STEP_MS = 40;
  var dir = 1;
  function loop(ts) {
    if (!last) last = ts;
    if (isDemo && !reduce && ts - last >= STEP_MS) {
      last = ts;
      var next = split + dir * 3.4;
      if (next >= 92) { next = 92; dir = -1; }
      else if (next <= 8) { next = 8; dir = 1; }
      setSplit(next);
    }
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
})();

// FontSmoothingFix — vanilla 판(run/375/demo/08-compat-font-smoothing-fix/index.html) 의 React 포트.
// 벤더 스무딩을 몰라도 폰트 굵기·자간 수동 교정으로 글자를 또렷하게 하고, 슬라이더로 두 판을 오간다.
import { useEffect, useRef } from "react";
import styles from "./FontSmoothingFix.module.scss";

type Box<T> = { current: T };

const STEP_MS = 40;

export default function FontSmoothingFix() {
  const rootRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const compareBoxRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const handleRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const simToggleRef = useRef(null) as unknown as Box<HTMLButtonElement>;
  const modeLabelRef = useRef(null) as unknown as Box<HTMLSpanElement>;
  const rafRef = useRef(0) as unknown as Box<number>;

  useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const wrap = rootRef.current;
    const compareBox = compareBoxRef.current;
    const handle = handleRef.current;
    const simToggle = simToggleRef.current;
    const modeLabel = modeLabelRef.current;
    if (!wrap || !compareBox || !handle || !simToggle || !modeLabel) return;

    let isDemo = true;

    function human() { if (isDemo) { wrap!.classList.remove(styles.isDemo); isDemo = false; } }

    let split = 50;
    function setSplit(v: number) {
      split = Math.max(0, Math.min(100, v));
      compareBox!.style.setProperty("--split", split + "%");
      handle!.setAttribute("aria-valuenow", String(Math.round(split)));
    }
    setSplit(split);

    let dragging = false;
    function onPointerDown(e: PointerEvent) {
      human();
      dragging = true;
      handle!.setPointerCapture(e.pointerId);
    }
    function onPointerMove(e: PointerEvent) {
      if (!dragging) return;
      const rect = compareBox!.getBoundingClientRect();
      setSplit(((e.clientX - rect.left) / rect.width) * 100);
    }
    function onPointerUp() { dragging = false; }
    function onKeyDown(e: KeyboardEvent) {
      human();
      if (e.key === "ArrowLeft") setSplit(split - 5);
      else if (e.key === "ArrowRight") setSplit(split + 5);
    }
    handle.addEventListener("pointerdown", onPointerDown);
    handle.addEventListener("pointermove", onPointerMove);
    handle.addEventListener("pointerup", onPointerUp);
    handle.addEventListener("keydown", onKeyDown);

    let simOn = false;
    function setSim(on: boolean) {
      simOn = on;
      wrap!.classList.toggle(styles.forceFallback, on);
      simToggle!.setAttribute("aria-pressed", String(on));
      modeLabel!.textContent = on ? "보정 없는판" : "보정 적용판";
    }
    function onSimClick() { human(); setSim(!simOn); }
    simToggle.addEventListener("click", onSimClick);

    // 자동 재생: 삼각파(사인이 아니라 선형 왕복)로 손잡이를 오간다 — 난수 없이 결정론적
    let last = 0;
    let dir = 1;
    function loop(ts: number) {
      if (!last) last = ts;
      if (isDemo && !reduce && ts - last >= STEP_MS) {
        last = ts;
        let next = split + dir * 3.4;
        if (next >= 92) { next = 92; dir = -1; }
        else if (next <= 8) { next = 8; dir = 1; }
        setSplit(next);
      }
      rafRef.current = requestAnimationFrame(loop);
    }
    rafRef.current = requestAnimationFrame(loop);

    return () => {
      handle!.removeEventListener("pointerdown", onPointerDown);
      handle!.removeEventListener("pointermove", onPointerMove);
      handle!.removeEventListener("pointerup", onPointerUp);
      handle!.removeEventListener("keydown", onKeyDown);
      simToggle!.removeEventListener("click", onSimClick);
      cancelAnimationFrame(rafRef.current);
    };
  }, []);

  return (
    <main className={styles.stage}>
      <div className={styles.wrap + " " + styles.isDemo} ref={rootRef}>
        <div className={styles.compareBox} ref={compareBoxRef}>
          <div className={styles.textLayer + " " + styles.isRaw}>Aa 본문 글자</div>
          <div className={styles.textLayer + " " + styles.isFixed}>Aa 본문 글자</div>
          <div className={styles.handle} ref={handleRef} tabIndex={0} role="slider" aria-valuemin={0} aria-valuemax={100} aria-valuenow={50}></div>
        </div>
        <div className={styles.foot}>
          <span className={styles.modeLabel} ref={modeLabelRef}>보정 적용판</span>
          <button className={styles.simToggle} ref={simToggleRef} type="button" aria-pressed="false">폴백 흉내내기</button>
        </div>
      </div>
    </main>
  );
}