소리꽃 KeyBloom TIL 26
파티클의 “폭”과 “높이” 슬라이더를 만들어 실제로 돌려 보며 나온 것들.
효과를 무엇으로 표현할 것인가
무엇을 흔드느냐가 형태를 정한다
“넓게 퍼지게”를 처음엔 좌우로 왔다 갔다 흔드는 움직임으로 냈다. 폭이 작을 땐 멀쩡했는데 크게 하니 파티클이 올라가면서 빙빙 도는 나선이 됐다. 좌우로 오가는 사인 운동에 위로 올라가는 등속 운동이 겹치면 궤적이 나선(헬릭스)이 되기 때문이다.
폭이 작을 땐 안 보이다가 크게 해야 드러난다는 게 함정이다. 슬라이더를 만들면 반드시 양 끝까지 밀어 보고 확인해야 한다. 기본값 근처에서만 보면 멀쩡해 보인다.
가져갈 건 이것이다 — 원하는 인상(“넓게”)을 어떤 움직임으로 표현할지 고르는 순간, 그 움직임이 다른 움직임과 겹쳐서 만들 형태까지 같이 고른 것이다. 넓게 퍼지는 인상은 흔드는 대신 시작 위치를 넓게 흩뿌리는 쪽이 맞았다. 흩뿌림은 다른 움직임과 겹쳐도 새 형태를 안 만든다.
같은 슬라이더가 대상마다 다르게 먹는다
폭을 “시작 위치 흩뿌림”으로만 냈더니, 사방으로 터지는 모션에서는 폭을 최대로 해도 좁게 갇혔다. 그 모션은 원래 자기 힘으로 크게 퍼지는데, 시작 위치를 조금 흩뿌린 것쯤은 거기 묻혀 안 보였다.
그래서 폭이 퍼지는 힘에도 곱해지게 했더니 이번엔 그 모션만 조금 올려도 과하게 퍼졌다. 원래 큰 값에 배율을 곱하니 증폭된 것이다. 반대로 잔잔한 모션은 곱해도 티가 안 났다.
하나의 슬라이더가 성격이 다른 여러 대상에 걸릴 때, “무엇을 곱할지”로 정의하면 대상마다 결과가 제각각이 된다. 정의는 결과 쪽에서 해야 한다 — “이 값이면 이만큼 퍼져 보인다”를 먼저 정하고, 대상마다 거기 닿는 계산을 따로 준다. 계산이 통일돼야 하는 게 아니라 보이는 결과가 통일돼야 한다.
슬라이더가 지켜야 할 약속
최대값은 실제로 닿을 수 있어야 한다
높이 슬라이더를 끝까지 올렸는데 파티클이 화면 위까지 안 올라갔다. 항력(속도에 비례해 감속시키는 저항)을 받으며 올라가는 것은 아무리 오래 살아도 어느 높이에서 멈춘다 — 속도가 줄다가 사실상 서 버려서, 수명을 늘려도 더는 안 올라간다. 시스템에 상한이 내장돼 있었던 것이다.
사용자는 슬라이더를 끝까지 올렸는데 반응이 없으면 고장으로 읽는다. 실제 상한이 슬라이더 최대보다 낮으면, 슬라이더 범위를 줄이든 상한을 걷어내든 둘을 맞춰야 한다. 여기서는 올라가는 구간의 항력을 없애 등속으로 올리는 쪽을 택했다.
슬라이더의 양 끝은 사용자에게 하는 약속이다. “여기까지 된다”고 그려 놓고 안 되면 그건 눈금이 거짓말을 한 것이다.
어디까지와 얼마나 빨리를 분리한다
높이와 속도가 엉켜 있었다. 속도를 올리면 더 높이 올라가서, 원하는 높이를 맞추려면 속도를 포기해야 했다.
앞선 TIL 15에서 나선 모션에 쓴 방식을 모든 모션으로 넓혀, 목표 높이에 닿는 순간을 수명으로 삼았다. 속도를 바꿔도 도달 높이는 그대로다.
“어디까지”와 “얼마나 빨리”는 사용자가 머릿속에서 이미 나눠서 생각하는 두 가지다. 코드에서 엉켜 있으면 사용자가 그 엉킴을 대신 풀어야 한다.
통일한다는 것
한 이름의 컨트롤을 대상마다 다르게 해석해도 된다
결국 “높이” 하나를 모션마다 다르게 적용했다. 위로 솟는 모션은 그 높이에 닿으면 사라지고, 분수는 포물선 꼭대기가 그 높이를 넘지 않게 눌러 담고, 사방으로 터지거나 떠도는 모션은 높이 개념이 잘 안 맞아 원래 수명을 유지한다.
통일이라고 하면 같은 계산을 쓰는 걸로 생각하기 쉬운데, 사용자가 느끼는 통일은 “높이를 올리면 다 위로 커진다”는 것이다. 성격이 다른 대상에 같은 계산을 억지로 씌우면 오히려 어떤 모션은 이상해진다. 이름과 방향만 같으면 속은 갈라도 된다.
요약
- 인상을 어떤 움직임으로 표현할지 고르면 그 움직임이 만들 형태까지 같이 고른 것이다
- 슬라이더는 양 끝까지 밀어 봐야 한다 — 기본값 근처에서는 문제가 안 보인다
- 하나의 슬라이더가 여러 대상에 걸리면 계산이 아니라 보이는 결과를 통일한다
- 슬라이더의 최대값은 실제로 닿을 수 있어야 한다. 못 닿으면 눈금이 거짓말이다
- “어디까지”와 “얼마나 빨리”는 사용자가 이미 나눠 생각한다 — 코드에서도 나눠 둔다
- 통일은 같은 계산이 아니라 같은 방향이다. 속은 대상마다 갈라도 된다