모래게임 Sandrop TIL 6

이 글은 Today I Learn 시리즈의 59번째 기록입니다. (총 125개)

스킨과 콘텐츠

디자인 통일은 UI 이야기지 콘텐츠 이야기가 아니다

Claude에 Design 기능이 생겨서 디자인을 해보라고 시켰더니 꽤 괜찮아 보였다. 그래서 실제 코드에도 적용하고자 했다. 그 제안 중 하나가 화면 전체를 일곱 색 팔레트로 맞추자는 것이었다. 버튼·배지·아이콘은 색이 적을수록 또렷해지니 맞는 방향이다.

그런데 도안까지 그 일곱 색으로 밀어 보니 뱀이 오리처럼 보이고 촛불은 흰 덩어리가 됐다. 도안은 꾸미는 게 아니라 맞춰야 할 대상, 즉 이 게임의 콘텐츠다. 훼손하면 게임 자체가 망가진다.

팔레트를 둘로 나눴다. UI는 정해진 색을 쓰고, 도안은 원래 색을 그대로 두되 채도만 올려 화면 톤에 섞이게 했다. 색상(무슨 색인가)은 안 건드렸다. 구별은 색상이 지고 있고, 화면 분위기는 채도가 만들기 때문이다.

디자인 토큰을 앱 전체에 통일한다는 말은 UI에 한정했다.

인터넷 없이 켜져야 한다고 정하면 선택지가 줄어든다

이 게임은 인터넷 없이도 되어야 한다고 정했다. 퍼즐 게임이라 이동 중에 켜는 일이 많을 텐데 거기서 안 되면 안 쓴다.

그렇게 정하고 나니 글꼴을 앱에 넣어야 했다. 흔히 쓰는 방식은 처음 실행할 때 받아 오는 것인데, 그게 후보에서 빠진다.

넣으려니 한글 용량이 걸렸다. 굵기 하나에 2.2MB라 세 벌이면 6MB가 넘는다. 실제로 화면에 쓰는 글자는 몇백 자뿐이라 그것만 남기고 잘라내니 134KB가 됐다.

대신 제약이 하나 붙었다. 화면에 새 한글 문구를 넣으면 글꼴을 다시 잘라야 한다. 안 하면 그 글자만 네모로 나온다.

전제를 하나 정하면 그 뒤 선택지가 통째로 줄어든다. 나중에 정하면 이미 만든 것을 갈아엎게 된다
용량을 줄이면 대신 제약이 생긴다. 코드가 못 막아 주는 제약은 사람이 기억해야 하니 문서에 적어 둔다

도형 셋 때문에 라이브러리를 들이지 않는다

아이템 아이콘 세 개를 그리려고 벡터 이미지 라이브러리를 넣을 뻔했다. 도형 셋을 위해 의존성과 파일 관리 절차를 늘리는 건 손해다. 직접 그리니 몇십 줄이고, 색·크기·비활성 상태를 인자로 받아 오히려 다루기 쉬웠다.

하트와 코인도 같은 방식으로 그려서 이모지를 안 쓰게 됐다. 이모지는 기기마다 모양이 달라 화면 톤이 흔들린다.

라이브러리를 들일 때는 그것이 해 주는 일과 늘어나는 관리 대상을 같이 센다. 셋을 위해 하나를 들이는 건 대개 손해다
기기마다 다르게 보이는 요소는 브랜드가 필요한 자리에는 안 쓴다

규칙이 바뀔 자리는 슬롯으로 열어 둔다

게임오버 안내에 버튼이 둘이었는데 경제 규칙이 바뀌며 셋이 됐다. 공용 안내 위젯에 주 버튼·보조 버튼·나가기 자리를 미리 두고 각 자리가 아이콘·부제·색·비활성 사유까지 받게 해 뒀더니, 규칙이 바뀌어도 위젯을 안 건드리고 끝났다.

특히 비활성 사유를 자리마다 받게 한 게 좋았다. 화면이 “왜 안 눌리는지”를 스스로 설명한다.

바뀔 것 같은 축은 개수를 늘려 두는 게 아니라 자리를 열어 둔다
눌리지 않는 버튼은 왜 안 눌리는지 같이 보여 준다. 안 그러면 고장으로 읽힌다

목록과 진입

지금 할 것이 처음부터 보여야 한다

레벨이 200개가 되니 화면에 들어가는 것 자체가 느려졌다. 전부 읽어 놓고 시작했기 때문이다. 보이는 것만 읽게 바꿨다.

그리고 목록을 열면 지금 도전할 레벨이 화면 가운데 와야 한다. 끝까지 내리면 그 칸이 위로 밀리거나 아래 여백이 모자라 어긋난다. 그 칸을 가운데 두도록 맞췄다.

목록의 기본 위치는 “맨 위”도 “맨 아래”도 아니라 “지금 할 것”이다
길이가 늘어날 때 느려지는 자리는 대개 “미리 전부 준비하는” 부분이다

안 붙이는 것도 설계다

난이도가 다섯 단계인데 화면에는 어려움과 매우 어려움만 붙이기로 했다. 평범한 레벨에까지 라벨을 달면 경고의 무게가 사라진다.

표시할 수 있다고 다 표시하지 않는다. 강조는 안 하는 자리가 있어야 강조가 된다

앞으로 할 것은 숨긴다

아직 안 깬 레벨은 도안도 난이도도 가린다. 목록이 곧 앞으로 만들 그림의 목록이 되면 재미가 준다.

숨기는 것을 데이터가 아니라 그리는 단계에서 처리했다. 그래서 깨고 돌아오면 저절로 공개된다.

무엇을 숨길지는 규칙이지만, 숨기는 처리는 마지막 단계에 두는 편이 상태가 안 꼬인다

연출은 건너뛸 수 있어야 마찰이 안 된다

레벨에 들어가기 전에 완성할 그림을 1.6초 보여 준다. 순수한 연출이라 조금이라도 답답하면 바로 독이 된다. 아무 데나 누르면 즉시 넘어가게 했다.

정보를 주지 않는 연출에는 반드시 빠져나갈 길을 둔다. 두 번째 볼 때부터는 전부 기다림이다

두 재화의 역할

한 재화에 한 의미만 준다

처음 규칙에서는 하트가 입장료이면서 이어하기 값이었다. 그러니 게임오버 화면에 하트가 두 번 나오고, 플레이어는 “이 하트는 뭘 사는 하트지”를 매번 다시 생각해야 했다.

역할을 갈랐다. 코인은 진행을 산다. 이어하기, 즉 부어 놓은 모래를 지키고 이어 하는 것이다. 하트는 새 판에 들어간다. 레벨 진입과 처음부터 다시하기다.

한 재화에 한 의미가 되니 화면이 저절로 정리됐다. 주 버튼은 코인, 보조는 하트, 하트가 없으면 그 자리가 하트 구입으로 바뀐다.

화면이 복잡하면 화면을 정리하기 전에 개념이 겹쳤는지 본다. 개념이 갈리면 화면은 따라온다
재화를 여러 종류 두는 이유는 각자 다른 것을 사기 위해서다. 같은 걸 사면 하나만 있으면 된다

이어하기와 다시하기는 정반대 연산이다

같은 게임오버 극복이지만 다루는 것이 다르다. 이어하기는 진행을 유지한다. 벨트만 비워 놓을 자리를 만들고 캔버스는 그대로 둔다. 다시하기는 처음부터다.

다시하기를 넣고 보니 이전 판의 걷던 바스켓과 잔상이 새 판에 유령처럼 떠다녔다. 게임 상태만 새로 만들고 화면이 들고 있던 진행 중 연출은 안 지웠기 때문이다.

되돌리는 기능은 규칙과 화면을 같이 되돌려야 절반이 안 된다
화면이 들고 있는 “진행 중인 것들”을 한곳에 모아 두면 이런 누락이 준다

밸런싱할 값은 한 곳에 모은다

이어하기 900, 하트 묶음 900, 아이템 150·350·500 같은 값이 화면 곳곳에 박히면 조정이 불가능해진다. 한 파일에 모아 두고 화면·저장·테스트가 전부 그걸 본다. 결제 상품 이름도 같이 뒀다. 나중에 스토어에 등록할 때 그 파일만 보면 된다.

나중에 손댈 값인지 아닌지로 나눈다. 손댈 값이면 흩어 놓으면 안 된다
테스트가 숫자 대신 이름을 보게 해 두면 값을 바꿔도 테스트가 따라온다

결제 없이도 절반은 낼 수 있다

상점 화면에 상품을 다 그려 놓고 결제는 아직 안 붙였다. 살 수 있는 것은 코인으로 사는 아이템뿐이고 나머지는 가격만 보이며 준비 중이다.

이렇게 나누니 지금 당장 상점의 구성과 동선과 문구를 확인할 수 있고, 나중에 결제만 끼우면 된다.

기능을 세로로 자르면(다 되는 것 하나) 오래 걸리고, 가로로 자르면(전부 반쯤) 일찍 확인할 수 있다
확인하고 싶은 것이 동선인지 거래인지에 따라 자르는 방향이 갈린다

누르는 순간

늦게 띄우되 자리는 처음부터 잡아 둔다

승리 화면에서 “광고 보고 코인 두 배”를 먼저 읽히게 하려고 다음 레벨 버튼을 1초 뒤에 띄웠다.

그런데 버튼을 나중에 만들어 넣으면 그 순간 화면이 밀려 올라간다. 마침 그 자리를 누르려던 손가락이 엉뚱한 걸 누른다. 자리는 처음부터 잡아 두고 투명도만 바꾸되, 안 보이는 동안은 눌리지 않게 막았다.

늦게 등장하는 요소는 자리를 미리 잡아 둔다. 레이아웃이 밀리면 오조작이 난다
투명해도 눌린다. 안 보이는 것은 안 눌리게 따로 막아야 한다

내가 말한 숫자가 내가 원한 것은 아니었다

카드를 1.5배로 키워 달라고 했다. 그대로 곱해서 나온 화면은 작은 폰에서 카드가 밖으로 삐져나갔다.

내가 원한 건 “지금보다 눈에 띄게 크게”였지 정확히 1.5배가 아니었다. 숫자로 말하니 숫자대로 나온 것이다.

크기를 배수로 말하면 그 말이 그대로 실행된다. 내가 뜻한 건 대개 배수가 아니라 인상이다
화면처럼 상황에 따라 달라지는 축에서는 배수만 말하면 안 된다. 어디까지는 넘지 말라는 선을 같이 말해야 뜻이 유지된다

확인하는 법

무엇이 안 변했는지도 확인한다

게임오버 안내는 코인과 하트 보유에 따라 버튼이 달라진다. 그래서 원하는 상태를 만들어 놓고 들어가서 확인한다.

여기서 “이어하기를 눌렀을 때 코인이 줄었나”만 보면 부족하다. “하트는 그대로인가”를 같이 봐야 한다. 이어하기가 실수로 하트까지 깎는 문제는 뒤엣것으로만 잡힌다.

확인할 때 무엇이 변했는지와 무엇이 변하지 않았는지를 같이 적는다. 조용히 같이 깎이는 것이 제일 늦게 발견된다

이미 아는 것을 보여 주기

규칙을 화면이 숨기면 플레이어는 운으로 느낀다

플레이어가 지금 무엇을 부을 수 있는지 눈으로 알 수가 없었다. 그런데 게임은 이미 알고 있다. 다음에 채울 칸과 색이 정해져 있으니 부을 수 있는 색도 정해져 있다.

그 값을 화면 위 색 점으로 꺼내 놓고, 완성 목표 그림도 같이 뒀다. 새로 만든 기능은 없는데 게임이 훨씬 읽혔다.

규칙이 정해 놓은 것을 화면이 안 보여 주면 플레이어는 그것을 운으로 느낀다. 실력으로 느끼게 하려면 근거를 보여 줘야 한다
기능을 더하기 전에 이미 계산된 것 중 안 보여 주는 게 없는지 본다

Series: Today I Learn