슬라이드에 올라가는 코드는 대부분 스크린샷입니다. 보기에는 괜찮지만 움직이지 않습니다. 완성된 결과만 보여주거나, 이미지 세 장을 늘어놓고 차이는 각자 따라와 주기를 바라는 수밖에 없습니다.
Keynote는 그보다 잘할 수 있습니다. 이동 마법사는 두 슬라이드 사이를 보간하는데, 코드가 이미지가 아니라 진짜 텍스트라면 단어 하나하나를 움직여 줍니다. 한 줄이 아래로 밀려나 자리를 내주고, 값이 바뀌고, 블록 하나가 통째로 나타나는 동안 주변이 그에 맞춰 자리를 옮깁니다.
슬라이드 두 장과 전환 하나가 전부입니다. After Effects도, 비디오 트랙도 없습니다.
스크린샷으로는 안 되는 이유
이동 마법사는 연속한 두 슬라이드의 대상체를 서로 짝지어 그 사이를 애니메이션합니다. 이미지는 대상체 하나입니다. Keynote는 그것을 옮기고, 크기를 바꾸고, 페이드할 수 있지만, 안으로 손을 넣어 네 번째 줄만 움직이지는 못합니다. Keynote가 보기에 네 번째 줄이라는 것은 없기 때문입니다.
텍스트는 다릅니다. 텍스트 상자는 단어를 담고 있고, 이동 마법사는 그것을 하나씩 짝지을 수 있습니다.
그래서 이 방법은 색이 입혀진 코드를 텍스트 그대로 Keynote에 가져올 수 있느냐에 전부 달려 있습니다. 직접 입력해서 손으로 색을 칠하는 건 고역입니다. 편집기에서 복사해 붙이면 강조가 사라지는데, 편집기가 클립보드에 올리는 것은 일반 텍스트이기 때문입니다.
색이 입혀진 코드를 텍스트로 꺼내기
Codeshot이 내보내는 것은 두 가지입니다. PNG는 배경, 윈도우 프레임, 그림자까지 합쳐진 완성된 그림입니다. RTF는 코드만 색이 입혀진 텍스트로 담은 것입니다.
형식을 RTF로 놓고 RTF 복사를 누릅니다. RTF에 배경이 들어 있지 않은 것은 의도한 것입니다. 배경은 슬라이드가 알아서 깔고, 그 뒤에 배경이 하나 더 있어 봐야 방해만 되기 때문입니다.
알아둘 만한 점이 하나 있습니다. 붙여넣은 코드를 망치는 원인은 보통 이것입니다. RTF는 서체를 이름으로 지정하는데, 시스템 고정폭 서체는 다른 앱이 해석하지 못하는 비공개 이름을 씁니다. 해석에 실패한 앱은 가변폭 서체로 대체하고, 코드를 코드처럼 읽히게 하던 열 정렬이 무너집니다. Codeshot은 내보내는 시점에 Menlo로 바꿔 넣어 이런 일이 생기지 않게 합니다. 서체를 직접 고른 경우라면 그 이름은 이미 공개된 것이라 그대로 지나갑니다.
슬라이드 두 장 만들기
슬라이드에 붙여넣습니다. ⌘V. 색도 함께 따라옵니다. 텍스트 상자 크기는 조절해도 되지만 다시 입력하지는 마십시오. 이동 마법사는 단어 자체를 기준으로 짝을 짓습니다.
슬라이드를 복제합니다. 네비게이터에서 선택하고 ⌘D를 누릅니다. 이제 똑같은 슬라이드가 두 장 있습니다.
둘 중 하나를 편집합니다. 두 번째 슬라이드에 아직 없던 줄을 더하거나, 아니면 — 대개 이쪽이 편합니다 — 완성된 조각을 붙여둔 뒤 첫 번째 슬라이드에서 줄을 지워 이전 상태로 되돌립니다. 손대지 않고 남겨둔 것이 이동 마법사가 움직일 대상이고, 더하거나 뺀 것이 페이드로 나타나거나 사라질 대상입니다.
거꾸로 작업하는 편이 낫습니다. 이동 마법사는 단어 자체로 짝을 짓기 때문에, 자리를 지켜야 하는 줄은 두 슬라이드에서 완전히 같아야 합니다. 복제본에서 지우는 방식은 그것을 보장합니다. 줄을 손으로 다시 입력하는 것은, 어느 단어가 조용히 짝짓기에 실패해 움직이는 대신 튀어버리게 만드는 지름길입니다.
순서가 중요합니다. 전환은 떠나는 쪽 슬라이드에 속하므로 이전 상태를 먼저 만들어야 합니다.
결과를 가르는 단 하나의 설정
첫 번째 슬라이드를 선택하고 애니메이션 사이드바를 연 다음 이동 마법사를 추가합니다.
그다음 일치를 기본값에서 단어별로 바꿉니다.
효과 전체가 이 설정에 걸려 있습니다. 그냥 두면 이동 마법사는 텍스트 상자를 하나의 대상체로 보고 크로스페이드합니다. 움직이는 코드가 아니라 두 상태 사이의 흐릿한 전환이 나온다는 뜻입니다. 단어별은 각 슬라이드의 단어를 서로 짝지어 하나씩 움직이라는 지시이고, 줄이 미끄러지고 값이 제자리에서 바뀌는 것은 여기서 나옵니다.
지속 시간은 코드라면 1.5~2초 정도가 읽기 좋습니다. 그보다 빠르면 어느 줄이 움직였는지 따라갈 수 없는데, 그걸 보여주는 것이 이 작업의 전부입니다.
일치하지 않는 대상체 페이드는 켜둔 채로 두십시오. 새로 생긴 줄이 나타나고 지운 줄이 사라지는 것이 툭 튀지 않고 페이드로 처리되는 이유가 이것입니다.
여러 단계로 잇기
슬라이드 세 장과 이동 마법사 두 개면 리팩터링을 한 단계씩 짚어가며 보여줄 수 있습니다. 소박한 버전, 함수로 뽑아낸 버전, 최종 형태. 변하지 않은 줄은 전환이 그대로 실어 나르므로, 보는 사람의 시선은 실제로 바뀐 곳에 머뭅니다.
각 단계는 작게 유지하십시오. 전환 하나에 두세 줄 차이면 충분합니다. 내용의 절반이 바뀌는 슬라이드는 애니메이션이 아니라 소음이 됩니다.
이미지가 나은 경우
모든 코드 슬라이드가 이걸 원하는 것은 아닙니다.
코드가 전혀 바뀌지 않는다면 PNG가 더 간단하고 더 선명하며, 디자인된 인상을 만들어 주는 윈도우 프레임과 배경까지 함께 옵니다. 2×로 내보내면 끝입니다. 그 길은 전체 흐름에서 다룹니다.
RTF와 이동 마법사는 변화 자체가 요점일 때 쓰십시오. 차이를 보여줄 때, 무언가를 차곡차곡 쌓아 보일 때, 왜 이 버전이 다음 버전이 되었는지 설명할 때입니다.
Keynote 너머
같은 RTF가 Pages에도, Word에도, 서식 있는 텍스트를 받는 어디에나 들어갑니다. 이미지가 아니라 색이 입혀진, 선택되고 검색되는 텍스트라는 뜻이고, 그래서 스크린 리더로도 읽히며 누군가 문서에서 한 줄을 복사해 그대로 실행해 볼 수도 있습니다.