로그스톤 샵 LogStone Shop TIL 10
로그스톤 샵의 소리꽃 KeyBloom 페이지에는 모션마다 작은 데모 화면이 돈다. 앱을 실행하지 않아도 건반을 치면 파티클이 어떻게 피어나는지 보이게 하려는 것이다. 이 데모는 앱을 띄운 것이 아니라, 앱의 건반·파티클 그리기 코드를 웹페이지용으로 옮겨 온 사본이다. 사본이라서 생긴 일이 세 번 이어졌다.
받은 값에는 그 값이 전제한 화면이 들어 있다
09-07에 제품 페이지를 보다가 「파동」 칸의 데모가 파동이 아니라고 짚었다. 모션 이름 목록은 앱을 따라 순서가 바뀌었는데 데모 목록은 옛 순서대로라 이름과 데모가 한 칸씩 밀려 있었다. 순서를 맞추면서 파동 데모를 새로 넣었는데, 앱 값 없이 비슷하게 짜 넣은 것이라 앱과 달랐다. 파티클이 퍼지는 각도를 무작위로 뽑아 고리가 아니라 얼룩처럼 보였다.
09-12에 KeyBloom 세션이 앱에서 쓰는 값을 전부 보내 줬다. 각도는 반원에 고르게, 수명은 모두 같게, 퍼지는 속도는 점점 느려지게. 그대로 넣었더니 고리가 됐다. 그런데 한 값은 그대로 넣으면 안 됐다.
고리의 가로 반경은 「세로 반경 × 9/16」이었다. 앱 화면이 16:9(가로가 긴 와이드 화면)라서, 가로를 9/16만큼 줄여야 화면에서 정원으로 보인다. 샵 데모 타일은 16:9가 아니다. 4:3 타일을 건반 쪽으로 확대해 잘라 보여 준다. 여기에 9/16을 그대로 곱하면 고리가 옆으로 늘어난 타원이 된다. KeyBloom 세션도 값과 함께 「데모 화면이 16:9가 아니면 그 비율로 바꿔야 한다」고 적어 보냈다.
그래서 9/16을 숫자로 박지 않고, 데모가 그려지는 순간의 실제 화면 비율(세로 ÷ 가로)을 계산해 곱하게 했다. 타일 크기나 확대율이 바뀌어도 고리가 안 찌그러진다. 값이 맞춰진 뒤 화면을 보고 고리를 좀 더 넓게 해 달라고 했고, 개수를 늘려 마무리했다.
남이 준 숫자는 숫자만 오는 게 아니다. 그 숫자가 맞았던 화면·환경이 같이 들어 있다. 값을 받으면 「이 값은 어떤 조건에서 맞는 값인가」를 먼저 묻는다. 조건이 다르면 숫자가 아니라 숫자를 만든 규칙을 옮긴다.
사본은 원본이 바뀔 때 조용히 낡는다
09-16에 KeyBloom 0.1.8이 나왔다. 업데이트 내역을 샵에 붙여 달라는 요청에 「제품 페이지 문구·모션 목록은 바뀐 게 없다」는 말이 같이 왔다. 맞는 말이었다. 이번 버전에서 바뀐 것은 건반 모양이었다. 아래 모서리가 둥글어지고, 흰 건반 사이에 틈이 생기고, 검은 건반에 명암과 그림자가 들어갔다.
샵 데모는 옛 건반 그리기 코드의 사본이라 이 변화가 안 따라왔다. 문구도 모션 목록도 그대로인데 데모 속 건반만 앱보다 평평한 옛 모양으로 남았다. 샵 세션이 업데이트 내역을 반영하면서 이 차이를 알려 왔는데, 데모와 앱이 따로 그려지고 있다는 걸 그때 처음 알았다.
앞선 TIL 4에서 복제한 문장은 원본이 바뀌는 순간 거짓이 된다고 적었다. 이번엔 문장이 아니라 그림이 사본이었다. 「문구가 안 바뀌었다」는 확인은 문구에 대해서만 참이고, 앱이 그리는 방식을 바꾸면 데모는 아무 오류 없이 옛날이 된다. 깨지지 않으니 누가 보기 전까지 모른다. 사본을 두기로 했다면, 원본에서 무엇이 바뀌면 사본도 손봐야 하는지 목록으로 정해 둬야 한다. 여기서는 건반·파티클 그리기가 그 목록이다.
모양은 값보다 코드째 받는다
파동 때는 값을 받아 옮겼다. 건반 모양은 방식을 바꿨다. KeyBloom 세션이 「값만 옮기면 모양이 미묘하게 어긋나기 쉽다」며 앱의 건반 그리기 파일을 통째로 공유하겠다고 해서 그러라고 했다.
모양은 숫자 몇 개로 끝나지 않는다. 모서리를 어떤 곡선으로 깎는지, 그림자를 건반보다 먼저 그리는지 나중에 그리는지, 명암을 위에서 아래로 주는지 아래에서 위로 주는지 같은 순서와 방향이 모양을 만든다. 값만 받으면 이런 것은 받는 쪽이 짐작으로 채우고, 짐작한 만큼 어긋난다. 코드째 받으니 옮긴 뒤 원본과 한 줄씩 대조할 수 있었다.
옮겨 배포한 뒤 데모 건반이 앱과 같게 그려졌는지 화면으로 직접 확인했다. 앞으로 건반·파티클 그리기가 바뀌면 이번처럼 코드째 보내 달라고 KeyBloom 세션과 정해 뒀다.
동작의 크기(얼마나 빠르게·넓게)는 값으로 넘겨도 되지만, 모양과 그리는 순서는 코드로 넘겨야 같아진다. 무엇을 넘겨받을지 정할 때 「이게 숫자로 다 표현되나」를 먼저 본다.
요약
- 받은 값에는 그 값이 맞았던 환경이 들어 있다. 조건이 다르면 숫자 대신 숫자를 만든 규칙을 옮긴다
- 데모가 원본 코드의 사본이면 원본이 바뀔 때 오류 없이 낡는다. 무엇이 바뀌면 사본도 손볼지 정해 둔다
- 크기·속도는 값으로, 모양·그리는 순서는 코드로 넘겨받는다