오늘의 큐브는 두 페이지로 되어 있다. 하나는 매일 한 문제씩 나오는 퍼즐이고, 하나는 루빅스 큐브를 처음 맞추는 사람을 위한 7단계 해법 안내다. 둘 다 play.ghmun.com/cube 아래에 있고, 큐브 계산과 입체 화면은 cube.js 파일 하나를 같이 쓴다. 시작은 아인매스(ainmath.com)의 루빅스 큐브 실험실이었다. 같은 동작을 되풀이하면 왜 처음 상태로 돌아오는지 최소공배수로 설명하는 수학 페이지를 만들고 나니, 그 큐브로 놀 거리도 만들 수 있겠다 싶었다.
큐브를 스티커 54개의 순열로 계산한다
큐브는 스티커 54개가 자리를 바꾸는 것으로 계산한다. 스티커마다 조각의 좌표와 바깥을 향한 방향을 붙여 두고, 한 면을 돌리면 그 층에 있는 스티커의 좌표와 방향을 90° 회전시켜 새 자리를 찾는다. 이렇게 면 여섯 개의 회전을 자리 바꿈 표로 한 번 만들어 두면 나머지는 표를 따라가기만 하면 된다. 이 계산이 맞는지는 이미 알려진 값으로 확인했다. R U를 되풀이하면 105번, R U R' U'는 6번, R U2 D' B D'는 1260번 만에 처음 상태로 돌아와야 하는데 모두 그대로 나왔다.
입체 화면은 라이브러리 없이 CSS 3D 변환만 썼다. 스티커 하나가 정사각형 하나이고, 면을 돌릴 때는 그 층의 정사각형들만 0.2초 동안 회전시켰다가 색을 새 상태로 바꿔 칠한다. 애니메이션이 끝나는 위치가 실제 계산 결과와 같은지는 눈으로 보지 않고 회전 행렬로 여섯 면 모두 대조했다. 다만 면이 돌아가는 0.2초 동안에는 큐브 속이 비어 있는 게 잠깐 보인다. 속을 채우려면 코드가 꽤 늘어서 그대로 뒀다.
매일 같은 문제, 최소 정확히 4수
문제는 한국 시간 날짜를 씨앗값으로 만든다. 같은 날에 들어온 사람은 모두 같은 큐브를 받는다. 처음에는 무작위로 네 번 돌리면 4수짜리 문제가 된다고 생각했다. 그런데 R L R'처럼 돌리면 R과 R'가 서로 지워져서 사실상 L 한 번이다. 그래서 섞은 다음에 최소 풀이를 직접 계산해서, 최소가 정확히 4수가 아니면 같은 난수열에서 다시 뽑는다.
최소 풀이는 18가지 동작(면 6개 × 시계·반시계·180°)을 깊이 순서대로 전부 시도해서 찾는다. 같은 면을 연달아 돌리는 경우와, 마주 보는 두 면을 순서만 바꿔 돌리는 경우는 결과가 겹치므로 건너뛴다. 원래는 5수 문제로 하려고 했다. 그런데 5수짜리는 계산이 데스크톱에서도 최대 1.6초가 걸렸고, 휴대폰에서는 더 느리다. 4수는 0.25초 안팎이면 끝나서 4수로 정했다. 4수여도 공식을 모르는 사람에게는 충분히 어렵다.
힌트를 누르면 최소 풀이를 앞에서부터 한 수씩 보여 준다. 지금 상태에서 다시 계산하는 게 아니라, 처음 문제에서부터 적용하는 풀이다. 이미 엉뚱하게 여러 번 돌린 뒤에는 최소 풀이가 4수보다 훨씬 길어져서 계산이 오래 걸리기 때문이다. 결과 복사 버튼은 문제 번호, 최소 수, 내 기록, 힌트 사용 횟수를 글자로 복사한다.
해법 안내의 규칙은 3000개 상태로 확인했다
해법 안내는 아래층부터 한 층씩 맞추는 층별 해법이다. 흰 십자, 흰 코너, 가운데 층, 노란 십자, 노란 면, 노란 코너, 노란 모서리의 7단계이고 공식은 7개다. 단계마다 예시 큐브가 있어서 재생을 누르면 공식이 한 수씩 움직인다. 예시의 시작 상태는 손으로 만들지 않았다. 맞춰진 큐브에 공식을 거꾸로 적용해서 만든다. 그러면 공식을 한 번 하면 반드시 맞춰진다.
문제는 공식보다 "이럴 때 이렇게 잡고 하라"는 규칙 문장이었다. 공식 자체는 유명하지만, 내가 쓴 문장대로 따라 했을 때 정말 끝나는지는 별개다. 그래서 실제로 나올 수 있는 마지막 층 상태를 무작위로 3000개 만들고, 4~7단계 규칙을 문장 그대로 코드로 옮겨서 따라 하게 했다.
처음 규칙은 3000개 중 2464개에서 실패했다. 6단계에서 "제자리 코너가 가장 많아지게 윗면을 돌린 뒤 공식을 하라"고 썼는데, 그렇게 하면 코너 두 개가 서로 바뀐 상태가 남을 수 있다. 이 공식은 코너 세 개를 돌리는 공식이라, 두 개만 바뀐 상태는 몇 번을 해도 풀리지 않는다. 옆면에서 위층 코너 두 개의 색이 같은 면(헤드라이트)을 찾아 뒤에 두라는 표준 규칙으로 바꾸자 3000개 모두 풀렸다. 단계별로 공식을 몇 번까지 하는지도 이 시뮬레이션에서 나온 최댓값(3번, 3번, 2번, 3번)을 그대로 적었다.
그 앞에 한 번 더 헛발질이 있었다. 5단계 규칙을 처음 검사할 때는 코너를 제멋대로 비틀어서 상태를 만들었다. 실제 큐브에서는 나올 수 없는 상태까지 섞여 들어가서, 검사 결과가 규칙이 틀렸다는 건지 테스트가 틀렸다는 건지 알 수 없었다. 그래서 공식을 무작위로 이어 붙여 상태를 만드는 방식으로 바꿨다. 이렇게 만든 상태는 전부 실제로 나올 수 있는 상태다.
화면에서 틀렸던 것
1단계 예시는 흰 면이 아래에 있으니 큐브를 아래에서 올려다보게 해 두었다. 그런데 이 예시는 윗층에 있는 흰 모서리를 아래로 내리는 장면이라, 정작 흰색이 윗면에 있어서 안 보였다. 기본 시점으로 바꿨다. 첫 문단에 "외울 공식은 6개"라고 쓴 것도 틀렸다. 가운데 층의 왼쪽 넣기를 빼먹고 셌다. 이 글을 쓰면서 다시 세어 보고 7개로 고쳤다.
사용법
오늘의 큐브에서는 18개 버튼으로 면을 돌린다. R은 오른쪽 면을 시계 방향으로 90°, R'는 반시계 방향, R2는 180°이고 셋 다 1수로 센다. 큐브를 끌면 이리저리 돌려 볼 수 있다. 한 수 무르기와 처음부터 버튼이 있고, 푼 결과는 이 브라우저에 저장돼서 같은 날 다시 들어오면 기록이 남아 있다. 오늘 문제를 다 풀었으면 연습 문제로 3~4수짜리 무작위 문제를 계속 풀 수 있다. 해법 안내는 위에서부터 순서대로 읽으면서 단계마다 예시를 재생해 보면 된다.