형광 녹색과의 이별 : 웹게임 혼자 만들기(7)
처음 새 게임을 만들었을 때 화면은 검은 바탕에 형광 녹색이었다. 옛날 컴퓨터 같은 느낌. 글자로 하는 게임이니까 이게 맞다고 생각했다. 나름 이게 우리 게임 정체성이라고 믿었다.
너무 난잡했다
근데 기능이 하나씩 붙을수록 화면이 점점 정신없어졌다. 형광 녹색 글자, 회색 칸, 격자, 테두리가 다 따로 놀고. 내 정보 화면은 한 줄에 정보 하나씩 쭉 내려가서 스크롤이 끝도 없었다. 다른 게임 화면들이랑 나란히 놓고 보니까 더 확실히 보였다. 우리 게임만 너무 난잡했다.
그래서 버리기로 했다. 로고만 남기고 화면 스타일을 전부 다 뒤엎기로. 4화에서 코드를 버렸는데 이번엔 얼굴을 버린 거다.
대신 한 번에 하나를 정하지 않고 시안을 여러 개 만들어서 비교해보기로 했다. 같은 홈 화면을 다섯 가지 스타일로 만들었다.
시안 다섯 개
미니멀 시안이 제일 조용한 스타일. 무채색 바탕에 아주 옅은 선만 있고 강조는 인디고 한 색. 깔끔한데 게임이 아니라 무슨 관리 앱 같았다.
게임 카드 시안은 금색 제목에 값 칸마다 세로선을 붙였다. 게임 같긴 한데 선이 세 겹이라 또 복잡했다.
다크 판타지 시안은 남색 도는 먹색 바탕에 청동 선, 제목만 명조체. 분위기는 제일 좋았는데 명조체가 기기마다 다르게 보였다.
데이터 밀도 시안은 표처럼 빽빽하다. 라벨은 왼쪽에 옅게, 값은 오른쪽에. 세로 길이는 제일 많이 줄었는데 게임이 아니라 대시보드 같았다.
요즘 앱 시안은 둥근 카드에 굵은 흰 제목. 제일 세련됐는데 판타지 느낌은 제일 약했다.
하나만 고를 수가 없었다
다섯 개를 다 보고 나니까 하나만 고를 수가 없었다. 다 마음에 드는 부분이 하나씩 있고, 다 걸리는 부분이 하나씩 있었다.
그래서 요소별로 골랐다. 옷 고르듯이. 바탕은 3번, 카드 모서리는 5번, 칩 모양은 다시 3번, 제목이랑 라벨 배치는 4번, 버튼이랑 강조색은 1번 인디고, 값 칸 세로선은 2번. 그렇게 섞어서 다시 만들고, 또 고치고, 또 섞었다. 마지막엔 로고 색도 인디고로 바꿨다.
이것저것 섞으면 누더기가 될 줄 알았는데 의외로 잘 붙었다. 각자 잘하는 부분만 가져와서 그런 것 같다.
정한 원칙 몇 개
스타일을 바꾸면서 원칙도 몇 개 생겼다.
- 배경은 한 가지 색. 칸마다 다른 회색을 깔지 않는다.
- 구분은 외곽선으로, 강조는 색으로만.
- 한 줄에 정보 하나가 아니라 두세 개씩. 빈 공간을 줄인다.
- 한 묶음 안에서 색깔 세로선은 하나까지만. 나머지는 글자 색으로.
그리고 이참에 말도 정리했다. 전직경험치는 그냥 경험치, 수련점수는 포인트. 화면에서 기획용 말을 다 걷어냈다. 만드는 사람한테만 익숙한 말이 화면에 너무 많았다.
새 얼굴
새 스타일을 게임 전체에 입히고 홈을 처음 열었을 때, 솔직히 좀 감동했다. 같은 게임인데 완전히 다른 게임 같았다. 이제야 남한테 보여줘도 되겠다는 생각이 처음 들었다.
형광 녹색이 좀 그립긴 하다. 그래도 그건 로고에 조금 남겨뒀으니까 됐다.
다음엔 그림 얘기를 하려고 한다. 글자로 하는 게임인데 그림이 수천 장 필요해진 얘기다.