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

윈도우 98 디자인 9종 — crt 모니터 효과까지 복붙

· Godrich · 9종 · 14분 읽기

디자인 트렌드SCSS바닐라 JSReact클릭내비게이션랜딩 페이지

윈도우 98 디자인은 지금 웹에서도 가장 알아보기 쉬운 레트로 문법입니다. 여기 아홉 개는 그 시절 책상 위 화면을 통째로 옮긴 부품인데, 창을 끌고 최소화까지 진짜로 됩니다.

끌어 옮기는 창과 최소화01 os-window-titlebar-minimize CRT 스캔라인과 곡면 비네트02 os-crt-scanline-curve 픽셀 커서 세 종류03 os-pixel-cursor-set 부팅 점검 줄 출력04 os-boot-sequence-lines 두 번 눌러 여는 바탕화면 아이콘05 os-desktop-icon-doubleclick 시작 메뉴 펼침06 os-start-menu-accordion 작업표시줄 시계와 알림 칸07 os-taskbar-clock-tray 설치 진행 막대와 단계 문구08 os-install-progress-steps 파란 오류 화면과 재시작09 os-bluescreen-reboot

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

아홉 개를 이 순서로 늘어놓은 기준은 옛 컴퓨터의 하루 순서입니다. 앞의 셋은 켜기 전의 부품 — 손으로 잡는 창(01), 눈으로 보는 브라운관(02), 화면을 따라다니는 커서(03)입니다. 전원을 누르면 점검 줄이 올라가고(04) 바탕화면의 아이콘(05), 시작 메뉴(06), 작업표시줄 시계(07)가 차례로 살아나며, 설치를 기다리는 시간(08)을 지나 파란 오류 화면과 재시작(09)으로 하루가 닫힙니다. 무대색도 이 흐름을 따라 잉크·옐로·오렌지·페이퍼가 두 바퀴 돌고 잉크로 끝납니다. 손끝 질감을 더 살린 이웃은 실물 스위치 버튼 9종이고, 같은 시대의 화려한 쪽은 Y2K 크롬·홀로그램 랜딩입니다. 04 가 타이핑 커서와 아스키 진행바를 일부러 안 쓴 것은 터미널 UI 9종과 CSS 타이핑 효과 9종과 겹치지 않게 하려는 것이니, 글자가 한 자씩 찍히는 쪽이 필요하면 그 두 편으로 가면 됩니다.

01끌어 옮기는 창과 최소화

타이틀바를 잡으면 창이 손끝을 따라옵니다

타이틀바를 잡아 끌면 setPointerCapture 가 손가락이 창 밖으로 나가도 놓치지 않게 잡아 주고, pointermove 가 올 때마다 translate 로 창을 옮깁니다(MDN Pointer Events). 빗나가는 양은 영역과 창의 폭 차이의 절반까지로 묶어 화면 밖으로 새지 않으니, 창 여러 개를 겹쳐 보여 주는 소개 화면에 얹으면 슬라이드가 아니라 만질 수 있는 판이 됩니다.

끌어 옮기는 창과 최소화
새 창에서 열기

01 · 끌어 옮기는 창과 최소화 — 측정 누적면적 28.026% · 움직인 프레임 15/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

setPointerCapturebox-shadowtranslate
// 접기/펴기 — 접힐 때 칸 중심으로 translate 를 옮기고 scale 을 줄인다. 원래 자리는 saved 에 둔다
function setMin(on) {
  min = on;
  win.classList.toggle('is-min', on);
  slot.classList.toggle('is-min', on);
  win.classList.add('is-flying');
  if (on) {
    savedX = px; savedY = py;
    var wr = win.getBoundingClientRect(), sr = slot.getBoundingClientRect();
    px += (sr.left + sr.width / 2) - (wr.left + wr.width / 2);
    py += (sr.top + sr.height / 2) - (wr.top + wr.height / 2);
  } else {
    px = savedX; py = savedY;
  }
  place();
  window.setTimeout(function () { win.classList.remove('is-flying'); }, 320);
}

접힐 때 칸 중심을 다시 계산하는 까닭

최소화를 누르면 창 중심과 작업표시줄 칸 중심의 차이를 그 순간 다시 계산해 그 칸으로 scale .12 로 빨려 들어가듯 접히고, 칸을 누르면 저장해 둔 자리로 돌아오며, 테두리는 밝은 면과 어두운 면을 네 겹 겹친 box-shadow 로 튀어나와 보입니다.

02CRT 스캔라인과 곡면 비네트

줄무늬 타일 하나와 타원 그림자 한 장

가로 줄무늬는 repeating-linear-gradient 타일 하나(2px 줄 + 2px 건너뜀)가 전부이고 background-size 100% 4px 로 화면 전체에 반복됩니다. 그 위에 가장자리로 갈수록 어두워지는 타원 radial-gradient 를 얹어 브라운관처럼 굽은 유리를 흉내 내고, 밝은 띠 하나가 위에서 아래로 흐르는데 시작과 끝이 모두 화면 밖이라 루프가 닫히는 이음새가 보이지 않습니다.

CRT 스캔라인과 곡면 비네트
새 창에서 열기

02 · CRT 스캔라인과 곡면 비네트 — 측정 누적면적 37.75% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

repeating-linear-gradientradial-gradientbackground-size
// ── 스캔라인 — 타일(4px)을 background-size 로 정의하고 그 안에 줄 위치를 둔다
.crt__lines {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom,
    rgba($subject-ink, .38) 0 2px,
    transparent 2px 4px);
  background-size: 100% 4px;
}

// ── 곡면 비네트 — 타원으로 가장자리가 감아 들어가는 유리
.crt__vig {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse 130% 105% at 50% 46%,
    transparent 40%,
    rgba($subject-ink, .18) 64%,
    rgba($subject-ink, .55) 100%);
}

가장 넓게 움직이지만 가장 조용한 판

측정값은 누적면적 37.75% 로 아홉 개 중 가장 넓지만 강도 평균 16.3 으로 가장 조용해서, 레트로 톤을 깔아야 하는 히어로 배경으로 써도 앞에 놓은 글자를 침범하지 않습니다.

03픽셀 커서 세 종류

box-shadow 로 그린 픽셀 도화

화살표·모래시계·손가락 세 커서가 체커보드 격자 위에서 steps(1, end) 컷으로 차례로 바뀌며, 모래시계는 제자리에서 180도 뒤집힙니다. 그림은 pxRuns 함수가 가로줄 좌표(x y 폭)를 box-shadow 그림자로 펼친 픽셀 도화인데, 확대를 정수배(scale 6)로만 하고 image-rendering 를 pixelated 로 심어 두어 픽셀 마우스 커서가 커져도 경계가 흐려지지 않습니다.

픽셀 커서 세 종류
새 창에서 열기

03 · 픽셀 커서 세 종류 — 측정 누적면적 9.179% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

image-renderingconic-gradientsteps(1, end)
// ── 픽셀 그림 — 가로 줄 runs (x y 폭). K 는 검은 외곽선, W 는 흰 채움, S 는 모래
@function pxRuns($runs, $c) {
  $s: ();
  @each $r in $runs {
    @for $i from 0 through list.nth($r, 3) - 1 {
      $s: list.append($s, ((list.nth($r, 1) + $i) * 1px) (list.nth($r, 2) * 1px) 0 0 $c, comma);
    }
  }
  @return $s;
}

가장 촘촘하게 움직이는 교체

단추마다 실제 크기 두 배 미리보기를 갖추고, 움직인 프레임 22/24 로 아홉 개 중 가장 촘촘하니, 커서까지 갈아 끼우는 테마 페이지에 그대로 씁니다.

04부팅 점검 줄 출력

한 줄씩 쌓이고 한 박자 늦게 결과가 붙는 점검

ms dos 화면을 연상시키는 장치 점검 줄 다섯 개가 clip-path 오른쪽 밀기로 한 줄씩 쌓이고, 각 줄 오른쪽 끝에는 결과 글자가 한 박자 늦게 컷으로 붙은 뒤 8px 옆에서 제자리로 미끄러집니다. 마지막 줄까지 차면 화면이 한 번 비워지고 로고가 다시 나타나며 처음부터 셉니다.

부팅 점검 줄 출력
새 창에서 열기

04 · 부팅 점검 줄 출력 — 측정 누적면적 9.339% · 움직인 프레임 19/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

animation-fill-modeclip-pathmonospace
@keyframes blLogo {
  0% { clip-path: inset(0 100% 0 0); }
  6%, 8% { clip-path: inset(0 0 0 0); }
  14%, 75% { clip-path: inset(0 0 0 100%); }
  76%, 88% { clip-path: inset(0 0 0 0); }
  90%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes blRow1 {
  0%, 12% { clip-path: inset(0 100% 0 0); }
  17%, 75% { clip-path: inset(0 0 0 0); }
  76%, 100% { clip-path: inset(0 100% 0 0); }
}

점검 줄이 곧 로딩 문구인 판

화면을 누르거나 Enter·Space 로 아무 때나 다시 셀 수 있어, 로딩 시간을 이야기로 채우는 대기 화면에 그대로 얹습니다.

05두 번 눌러 여는 바탕화면 아이콘

한 번은 선택, 짧은 사이 두 번은 열기

한 번 누르면 이름표만 선택 색으로 바뀌고, 짧은 사이에 두 번 누르면 아이콘이 자기 중심에서 한 번 커졌다가 창이 열립니다. 두 번 누르기는 click 이벤트의 e.detail(같은 자리 연달아 누른 횟수)로 판정하는데, 터치에서는 이 값이 항상 1 이라 400ms 안에 같은 아이콘을 다시 눌렀는지로 대신 판정합니다.

두 번 눌러 여는 바탕화면 아이콘
새 창에서 열기

05 · 두 번 눌러 여는 바탕화면 아이콘 — 측정 누적면적 12.865% · 움직인 프레임 8/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

detailaria-selectedtransform-origin
icons.forEach(function (b, i) {
  b.addEventListener('click', function (e) {
    dt.classList.remove('is-demo');
    select(i, false);
    // e.detail 은 같은 자리에서 연달아 누른 횟수 — 2 이상이면 두 번 누르기다.
    // 터치는 detail 이 항상 1 이라 시간차(400ms)로 판정한다
    if (e.detail >= 2 || (i === lastIdx && Date.now() - lastTap < 400)) openWin(i);
    lastTap = Date.now();
    lastIdx = i;
  });
});

방향키로도 옮겨 다니는 아이콘 격자

방향키로 선택이 옮겨 다니고 aria-selected 로 상태가 읽혀, 항목을 아이콘 격자로 고르는 화면에 그대로 씁니다.

06시작 메뉴 펼침

아래에서 위로 열리고 옆으로 이어지는 메뉴

왼쪽 세로 띠(writing-mode 로 세로 쓰기)가 붙은 메뉴가 작업표시줄 위에서 아래변을 원점으로 열리고, 화살표가 있는 줄에 마우스를 올리면 하위 메뉴가 오른쪽으로 이어 열립니다. 하위 메뉴를 펼친 뒤 getBoundingClientRect 로 실측해 오른쪽이 화면 밖으로 나갈 방향이면 왼쪽으로 접어 넣고, 왼쪽마저 잘리면 원래 방향을 지킵니다.

시작 메뉴 펼침
새 창에서 열기

06 · 시작 메뉴 펼침 — 측정 누적면적 11.544% · 움직인 프레임 10/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

aria-expandedwriting-modetransform-origin
// 하위 메뉴를 펼친 뒤 실측해 오른쪽이 화면 밖으로 나가면 왼쪽으로 접어 넣는다.
// 왼쪽마저 잘리면 원래 방향을 지킨다(양쪽 다 못 채우는 좁이는 없다고 본다)
function showSub(sub) {
  hideSubs();
  sub.classList.add('is-on');
  var r = sub.getBoundingClientRect();
  if (r.right > window.innerWidth - 8) {
    sub.classList.add('is-flip');
    if (sub.getBoundingClientRect().left < 8) sub.classList.remove('is-flip');
  }
}

접힘 방향까지 스스로 고르는 구조

하위 메뉴가 화면 밖으로 새지 않게 방향을 스스로 고르니, 항목이 많은 관리 화면의 메뉴에 얹어도 좁은 창에서 무너지지 않습니다.

07작업표시줄 시계와 알림 칸

실제 시각을 분 단위로 세는 시계

시계는 toLocaleTimeString 이 페이지 언어로 실제 시각을 분 단위로 찍고 5초마다 다시 잽니다. 창 단추는 눌림과 올라옴에서 border-color 의 밝은 면과 어두운 면 방향이 서로 반대로 뒤집히고 translateY(1px) 로 한 칸 내려앉아, 그림 없이도 오목·볼록이 읽힙니다.

작업표시줄 시계와 알림 칸
새 창에서 열기

07 · 작업표시줄 시계와 알림 칸 — 측정 누적면적 5.797% · 움직인 프레임 8/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

toLocaleTimeStringinsetborder-color
// 시계 — 페이지 언어를 따라가는 toLocaleTimeString 으로 실제 시각을 분 단위로 찍는다
function tick() {
  var lang = document.documentElement.lang || 'ko';
  var text = new Date().toLocaleTimeString(lang, { hour: 'numeric', minute: '2-digit' });
  if (clockReal.textContent !== text) clockReal.textContent = text;
}
tick();
setInterval(tick, 5000);

형제 선택자 하나로 뜨는 말풍선

알림 종이 켜지면 말풍선이 트레이 위로 떠오르는 것까지 CSS 형제 선택자 하나로 되어 있어 상태를 늘 보여 줘야 하는 하단 바에 그대로 옮겨 붙이고, 바늘 각도까지 세는 시계는 자바스크립트 아날로그 시계 9종이 맡습니다.

08설치 진행 막대와 단계 문구

매끄럽게 늘지 않는 열두 칸

진행 막대는 칸 도안 — linear-gradient 하나를 80% 칸 + 20% 줄 비율로 정의해 background-size 20px 타일로 박은 뒤 — 트랙색 덮개를 steps(12, end) 로 줄여 네모 칸이 왼쪽부터 하나씩 드러납니다. 칸 박자마다 아래 문구 다섯 장과 남은 용량 숫자 열두 장이 같은 박자로 컷 갈아 끼워지고, 다 차면 완료 표시가 한 번 튀어오릅니다.

설치 진행 막대와 단계 문구
새 창에서 열기

08 · 설치 진행 막대와 단계 문구 — 측정 누적면적 2.866% · 움직인 프레임 20/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

steps(12, end)linear-gradientbackground-size
.ip__fill {
  position: absolute; inset: 0;
  background-image: linear-gradient(90deg, $color 0 80%, transparent 80% 100%);
  background-size: $tile 100%;
  background-repeat: repeat-x;
}
// 트랙색 덮개 — 오른쪽에 붙어 scaleX 로 줄어들며 칸을 왼쪽부터 드러낸다.
// 채움 시작 변에 붙어야 하므로 transform-origin 을 오른쪽 가운데로 둔다(중심 아님의 이유)
.ip__cover {
  position: absolute; inset: 0;
  background: $stage-paper;
  transform-origin: right center;
  transform: scaleX(0);
}

한 키프레임을 열일곱 장이 나눠 쓰는 음수 지연

문구와 숫자 장들은 같은 키프레임을 음수 animation-delay 로 위상만 달리해 쓰는데, 이 짜임이 오래 걸리는 작업의 대기 화면에 얹어도 박자가 어긋나지 않게 합니다.

09파란 오류 화면과 재시작

한 프레임에 통째로 뜨는 파란 오류

오류 문구는 전환 없이 steps(1, end) 컷으로 한 프레임에 통째로 나타나고, 안내 줄의 점 세 개가 차례로 켜진 채 남습니다. 재시작을 누르면 clip-path 위프로 화면이 위에서 아래로 쓸려 나가 원래 창이 드러나고, transitionend 뒤에 상태가 정리됩니다.

파란 오류 화면과 재시작
새 창에서 열기

09 · 파란 오류 화면과 재시작 — 측정 누적면적 36.953% · 움직인 프레임 8/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

steps(1, end)clip-pathanimation-delay
// 등장 컷 — 중간 키프레임(7%)을 둬야 8% 지점에서 한 프레임에 바뀐다
@keyframes bsCut {
  0%, 7% { opacity: 0; }
  8%, 100% { opacity: 1; }
}
// 퇴장 위프 — steps 가 아니라 이징으로 보간되는 짝 애니메이션이다
@keyframes bsWipe {
  0%, 58% { clip-path: inset(0 0 0 0); }
  70%, 100% { clip-path: inset(100% 0 0 0); }
}

측정에서도 가장 무거운 판

누적면적 36.953% 와 면적 최대 36.953% 가 같은 숫자라는 것은 움직임 전부가 파란 면이 창을 덮는 한 번의 전환에서 왔다는 뜻이니, 치명적 오류를 크게 알리는 화면으로는 아홉 개 중 가장 무겁습니다.

crt 모니터 효과는 CSS 만으로 어디까지 되나?

줄무늬는 타일 하나가 전부입니다

스캔라인의 두께·간격·색은 4px 타일 하나가 전부 정하고, background-size 로 타일 크기를 박아 두면 화면이 아무리 커져도 무늬가 늘지 않고 칸 수만 늘어납니다. 08 의 칸 막대 도안도 같은 법칙인데, 그라디언트 정지점은 픽셀이 아니라 타일 안 비율로 주어야 합니다 — 픽셀로 주면 타일이 아니라 요소 전체 폭을 한 번에 까는 그라디언트가 되어 칸무늬가 사라집니다.

굽은 유리는 어둠의 겹침으로 접습니다

볼록한 유리는 실제로 화면을 왜곡하지 않습니다. radial-gradient 타원으로 가장자리를 어둡게 깔면 눈이 스스로 곡면이라 읽고(02), 형광체의 빛 번짐은 그림이 아니라 text-shadow 한 줄, 위에서 내려오는 역광은 반투명 띠의 세로 흐름으로 흉내 냈습니다. 실제 브라운관의 배럴 왜곡처럼 화면 끝이 휘어 보이는 기하 왜곡까지 내려면 CSS 만으로는 부족해 SVG 필터나 캔버스가 필요한데, 이 아홉 개는 그 지점 전의 질감까지만 노립니다.

그림 파일이 한 장도 없습니다

아홉 개를 통틀어 이미지 파일은 0장입니다. 픽셀 커서(03)는 box-shadow 픽셀 도화, 체커보드 격자는 conic-gradient, 모니터 껍데기는 색면과 그림자라서, 그림이 필요한 자리를 전부 값으로 바꿨습니다. 받은 폴더를 열면 코드만 있고 픽셀 도화는 배율을 바꿔도 다시 그려 흐려지지 않으며, 화면 바탕의 짙은 남색(#0d1220)만 토큰 밖의 색인데 브라운관 형광면 바탕은 기존 팔레트에 없는 색이라 한 곳에 직접 지정했습니다.

어디서 깨지는가 — 함정

두 키프레임짜리 컷은 보이지 않습니다

steps(1, end) 컷에 0%{숨김} 100%{보임} 두 키프레임만 넣으면 값이 구간의 맨 끝에서만 바뀌어 2초 내내 숨김 장만 보입니다. 컷이 루프가 닫히는 바로 그 순간에 일어나 화면 안에서는 볼 수 없는 것이라, 09 의 파란 화면은 컷 지점을 7%·8% 중간 키프레임 쌍으로 두어야 한 프레임에 떴습니다. 상태가 둘뿐인 다른 판도 같은 이유로 중간 키프레임을 두었습니다 — 01 의 작업표시줄 칸은 50%·51%·85%·86% 지점에, 07 의 알림 종은 15%·16%·79%·80% 에 컷을 걸었습니다.

짧아서 편한 단축이 지연을 지웁니다

animation 단축 속성을 쓰는 순간 animation-delay 는 0 으로 되돌아갑니다. 줄마다 박자가 다른 04 같은 판에서 단축을 다시 쓰면 지연이 사라져 다섯 줄이 한꺼번에 쏟아지므로, 이 아홉 개에서 지연을 쓰는 곳(08 의 숫자 장, 09 의 점 세 개)은 이름·길이·타이밍을 전부 낱개 속성으로 적습니다. 여기 아홉 개의 완결본과 React 판을 묶은 zip 은 sqx22eqz 를 암호로 열고, 편집기 없이 브라우저에서 바로 열어 쓸 수 있습니다.

변형 세 가지와 접근성

변수 세 개로 아홉 개를 함께 바꾸기

각 데모의 SCSS 맨 위에 있는 변수 몇 개만 바꾸면 무대 전체가 따라옵니다. 변수는 데모마다 한 벌씩이라 파일 하나만 손대고 나머지 여덟은 그대로 두고 비교해 볼 수 있습니다.

이름 바꾸는 값 느낌
duration $dur-loop 2s → 1s 부팅 줄과 설치 칸의 박자가 두 배 빨라집니다
easing $ease-spring → $ease-pop 창이 접히고 오류 화면이 쓸릴 때 한 번 더 튑니다
color $color $subject-blue-deep → $subject-orange-deep 선택 색과 타이틀바가 파란 계열에서 주황 계열로 갑니다

움직임을 줄이면 남는 것들

prefers-reduced-motion: reduce 에서는 아홉 개가 각각 다른 한 장을 남깁니다. 01 은 접히지 않은 창 한 장, 02 는 줄무늬와 비네트(띠만 멈춥니다), 03 은 화살표 커서, 04 는 점검 줄이 다 찬 화면, 05 는 첫 아이콘이 선택되고 창이 열린 모습, 06 은 메뉴가 열린 채 하위를 감춘 모습, 07 은 실제 시각을 보여 주는 시계, 08 은 막대가 다 찬 완료 상태, 09 는 오류 화면을 지운 원래 창입니다. 그 블록의 선언마다 !important 를 단 것은 .is-demo 가 붙은 선택자가 특이도에서 먼저 이기기 때문입니다. 07 의 시계는 루프를 꺼도 tick 이 실제 시각을 계속 갱신해 멈춘 화면이 낡은 시각을 보여 주는 일이 없습니다.

키보드와 색 이외의 신호

마우스 없이도 씁니다 — 01 타이틀바는 방향키로 옮기고(Shift 를 함께 누르면 16px) Escape 로 접고, 05 는 listbox 안에서 방향키와 Enter, 06 은 방향키로 줄을 옮기고 Escape 로 닫으며, 09 는 오류 화면이 뜨는 순간 재시작 단추에 초점을 옮겨 둡니다. 색도 유일한 신호가 아닙니다 — 07 의 눌림은 테두리 방향 뒤집힘과 글자 굵기·한 칸 내려앉음이 함께 오고, 05 의 선택은 aria-selected 와 이름표 배경이 같이 바뀌며, 03 은 커서 모양 옆에 이름표를 적어 둡니다.

FAQ

crt 모니터 효과를 실제 사진이나 영상 위에 얹어도 되나요

됩니다. 줄무늬·비네트·흐르는 띠는 position: absolute; inset: 0 에 pointer-events: none 인 겹침층이라 아래에 깔리는 콘텐츠를 가리지도 누르지도 않습니다. 02 의 화면 상자처럼 overflow: hidden 인 껍데기 하나만 만들어 주면 사진·영상·캔버스 위에도 그대로 얹히고, 질감이 강하다면 그림자 색의 불투명도부터 낮춰 보세요. 줄무늬가 진하다고 느껴지면 스캔라인 첫 색의 .38 부터 내리면 눈의 부담이 바로 줄어듭니다.

모바일에서도 창 끌기와 두 번 누르기가 되나요

둘 다 됩니다. 01 의 타이틀바는 touch-action: none 을 두고 pointer 이벤트로 끌기를 잡아 손가락이 창 밖으로 나가도 놓치지 않으며, 05 의 두 번 누르기는 터치에서 e.detail 이 항상 1 이라 400ms 안에 같은 아이콘을 다시 누르는지로 판정합니다. 340px 보다 좁은 화면에서는 각 데모가 스스로 줄어들고, 05 는 세로로 늘어선 아이콘 줄이 가로로 눕습니다.

픽셀 폰트를 따로 내려받아야 하나요

아니요. 아홉 개 전부 시스템의 모노스페이스 스택(ui-monospace 계열) 하나로 짰고 웹폰트는 한 벌도 쓰지 않습니다. 픽셀 느낌이 필요한 자리(03 의 커서)는 글꼴이 아니라 box-shadow 픽셀 도화라서 확대해도 흐려지지 않고, 시스템 글꼴이라 첫 화면이 그려지기까지 기다림도 짧아서 대기 화면에 알맞습니다. 모노스페이스를 고른 까닭은 점검 줄·남은 용량·시계처럼 자릿수가 어긋나면 안 되는 글자가 많아서인데, 가변 폭 글꼴로 바꾸면 숫자가 흔들려 옛 화면의 정돈된 느낌이 사라집니다.

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

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