디지털 가든

탭으로 호버에: 터치에도 같은 하늘을

2026-09-17 · 약 4분 · frontend · design · essay

서장: 차단된 절반의 방문자

점검에서 발견된 것은 스타일 문제가 아니라 더 근본적인 사실이었다: 터치 기기에서는, 이 행성의 모든 상호작용이 차단되어 있었다.

태양 상태 카드, ISS 플라이오버 카드, 오로라 소개, 유성우 역사, 별자리 이름, 문 위스퍼, 소망의 별 버블——모두 pointer: coarse 문 뒤에 있었다. iPhone, 안드로이드, iPad 방문자가 볼 수 있었던 것은 정적인 행성뿐. 하늘은 마ウス에만 열려 있었고, 방문자의 절반 이상은 손가락을 쓴다.

탭으로 호버에: 하나의 파이프라인, 두 세대의 입력

수정의 사고는 하나뿐이다: 터치에 호버가 없다면, 호버의 의미는 탭이 상속해야 한다.

씬에 터치 파이프라인이 추가되었다: 누르고 떼기까지의 변위가 12픽셀 미만이면 탭으로 판정——스크롤과 드래그는 오발하지 않는다. 터치 지점에서 레이를 쏘고, 히트 우선순위는 정밀에서 퍼짐으로: 태양 원반과 ISS 지점은 정확한 히트, 오로라 대역과 유성우는 방향 각도, 별자리는 별의 점, 소망의 별은 탭 선택. 히트하면 데스크톱과 같은 이벤트를 발행하고, DOM은 같은 카드를 렌더링한다.

데스크톱은 한 줄도 바뀌지 않았다. 두 세대의 입력 기기, 하나의 파이프라인, 하나의 하늘.

3단 퍼포먼스: 모든 기기에 각자의 조화

입자 수가 셋으로 나뉘었다: 폰 4,500, 태블릿과 소형 노트북 6,500, 데스크톱 9,000. 픽셀 비율 상한도 기기별로——DPR 3의 폰 화면이 전속으로 렌더링되는 것이 페이지의 최대 발열원이며, 합리적인 필 레이트로 억제하면 iPhone에서도 매끄럽게 회전한다.

퍼포먼스는 일괄적인 양보가 아니다. 기기의 윤곽별 분寸이다. 태블릿은 줄곧 데스크톱의 전체 입자를 돌리고 있었다. 이제 자신의 단계를 갖게 되었다.

세부 속의 백 가지 작은 일들

진정한 심층 적응은 세부에 있다: 작은 화면에서 팝업 카드를 뷰포트 안에 넣고 가장자리에 여백을 남긴다. 성운의 빛을 뷰포트에 맞춰 수렴시켜 화면 밖으로 떠다니지 않게 한다. 좁은 내비에서 온라인 배지가 줄바꿈되지 않게 한다. 햄버거 메뉴는 내비 아래에서 시작되고 내부에서 스크롤되어 한 화면에 완전히 들어간다. 터치로 띄운 카드에는 ‘벗어나서 닫기’가 없다——6초 자동 페이드가 안전망이다.

적응은 브레이크포인트에서 글자를 줄이는 것이 아니다——또 한 세대의 입력이 존재함을 인정하고, 세계 전체를 다시 내밀는 것이다.

결론

마ウス에만 열려 있는 하늘은, 진짜 하늘이라 불릴 자격이 없다. 이번 업데이트 이후, 태양을, 달을, 어떤 별을 가리켜도, 손가락은 같은 응답을 받는다.

하늘은, 그것을 가리키는 모든 사람의 것이다.

댓글

← 디지털 가든