5. 히어로 그림 선택하기

칸 가운데의 움직이는 그림을 히어로라고 부릅니다. 어느 그림을 선택해도 숫자와 판정 기준은 같습니다. 다른 것은 상태를 어떤 움직임으로 보여 주는가뿐입니다.

히어로 일곱 가지

이름	주소 값	어떻게 보이나	선택할 수 있는 칸
코어 리액터	`orb`	가운데 구(球)에서 입자가 돌고, 나빠지면 구 안에 지연이 수면처럼 차오릅니다	애플리케이션
오비탈 게이트	`gate`	요청이 고리를 지나 흘러가고, 막히면 고리가 밝아지며 지연이 아래에 호로 쌓입니다	애플리케이션
펄스 필드	`pulse`	점들이 처리량만큼 물결칩니다. 지연이 쌓이면 가운데부터 움직임이 멈추고, 바깥 물결은 빨라집니다	애플리케이션·서버
침수 필드	`flood`	지연이 늘면 바닥에서 수위가 올라오고 파도가 빨라집니다	애플리케이션·서버
펄스 코어	`pulsecore`	사방에서 중심으로 입자가 모입니다. 밀리면 둘레에 띠가 생깁니다	애플리케이션·서버
하트비트	`heartbeat`	일정한 박자로 뛰고, 박자에 맞춰 알갱이가 퍼져 나갑니다	애플리케이션·서버
벌집	`hive`	서버 한 대를 육각형 하나로 그립니다(7장)	서버(기본)

애플리케이션 칸의 기본은 코어 리액터, 서버 칸의 기본은 벌집입니다.
코어 리액터와 오비탈 게이트는 서버 칸에서 선택할 수 없습니다. 두 그림은 들어오는 요청을 입자로 그리는데, 서버 지표로는 무엇이 들어오는지 알 수 없기 때문입니다.
화면의 서버 칸이 모두 미니 칸(7장)이 되면 벌집만 선택할 수 있습니다. 선택한 이름은 지워지지 않아, 칸이 다시 커지면 원래 그림으로 돌아옵니다.

같은 그림이라도 상태에 따라 움직임이 다릅니다. 각 그림이 정상·주의·위험일 때의 모습은 다음 그림에서 볼 수 있습니다.

방법	바뀌는 범위
설정(톱니) ▸ 모양 ▸ 가운데 화면	전 칸
칸 제목 옆 순환 화살표 버튼 — 누를 때마다 다음 그림으로 바뀝니다	그 칸만
주소 `?hero=<이름>`	전 칸 (저장하지 않음)
주소 `?heroes=<이름1,이름2,…>`	칸 순서대로 (저장하지 않음)

이 화면에서 가장 중요한 읽는 법입니다. 나빠질수록 빨라지고, 커지고, 불규칙해집니다. 색은 마지막 확인일 뿐입니다.

색만으로 상태를 말하면 정상일 때도 화면이 화려해서 장애와 구분되지 않습니다. 3m 밖에서 지나가는 사람이 알아채야 하는 것은 "빨간색이 있다" 가 아니라 "평소와 다르다" 입니다. 그래서 정상 상태를 일부러 조용하게 만들었습니다.

날아오는 요청은 모두 같은 모양입니다. 아직 끝나지 않은 요청이 느릴지는 그 순간에 알 수 없기 때문입니다. 느림은 빠져나가지 못하고 쌓이는 것으로 드러납니다.
펄스 필드는 한 화면에서 가운데는 멈추고 바깥은 빨라집니다. 가운데가 멈추는 것은 요청이 밀려 쌓인 것, 바깥이 빨라지는 것은 지연 증가를 뜻하는 의도한 대비입니다.

트랜잭션 볼(요청이 날아가는 애니메이션)은 6분할 이상에서 자동으로 꺼집니다. 칸이 작아지면 볼이 보이지 않으면서 그리는 부담만 생기기 때문입니다. 자동으로 꺼진 상태는 저장하지 않아, 1칸으로 돌아오면 원래 설정대로 다시 나옵니다.
운영체제에서 움직임 줄이기(prefers-reduced-motion)를 켜면 움직임이 줄어듭니다.