수수랜드 플랫폼 리뉴얼

헤더 넣으려다가 카드 버튼에 욕심을 냈다

가족들이 디자인이 중요하다는 화제로 대화를 하다가 수수랜드 플랫폼으로 이야기가 흘러갔다.
막내가 수수랜드 플랫폼에 헤더를 넣으라고 말했다. 예를 든다면서 어떤 사이트를 보여줬는데, 화면 상단에 토글 버튼과 메뉴가 있었다. 구글처럼 어떤 페이지에서나 늘 보이는 그런 헤더였다.
그래서 수수랜드에도 헤더를 넣어볼까 생각했다. 토글 버튼까지 함께 넣으면 딱 좋겠다 싶었다. 하지만 막상 보니 게임마다 화면 사이즈도 다르고 배경색도 제각각이었다. 토글 버튼 아이디도 전부 달랐다. 인덱스 페이지에는 토글이 있지만, 어떤 게임 파일에는 있고 단일 언어 게임 파일에는 아예 없기도 했다.
게다가 헤더 색상이 게임 바탕색과 안 어울릴 수도 있고, 게임을 전체 화면으로 하고 싶은데 헤더가 상단 자리를 차지하면 답답할 것 같았다. 아무래도 수수랜드에 헤더를 넣는 건 무리였다. 모든 페이지가 동일한 스타일을 공유할 때나 가능한 구조였다. 게임을 하나씩 독립적으로 만들다 보니 통일된 스타일이 없었던 탓이다.
그래도 헤더를 넣을까 말까 고민하며 여러 게임 플랫폼을 돌아다니다 보니, 이번엔 수수랜드의 카드 버튼을 예쁘게 꾸미고 싶다는 욕심이 생겼다. 가로세로 비율을 2:1로 만들면 나중에 트위터 공유 이미지로 쓰기에도 딱 좋겠다 싶었다.
'가로세로 비율 2:1로 하기.' 잠들기 전 일기장에 잘 적어두었는데, 아침에 일어나자마자 깔끔하게 잊어버렸다. 아침부터 넷플릭스로 주말드라마를 보다가 느닷없이 영화 포스터 스타일인 2:3 비율로 작업을 시작해 버렸다.

영화 포스터 스타일, 멋진데?

아이패드에 저장해 둔 이미지 중 몇 개를 잘라 수수랜드에 넣어보고, 챗지피티(ChatGPT)에게 그려달라고 부탁해서 넣기도 했다. 이렇게 만드니 기존 버튼 위에 붙어 있던 뱃지가 어울리지 않아 아래로 옮겼다. '넘넘'과 '넘스톤' 이미지는 새로 그려 넣었더니 통일감이 전혀 없었다. 과거의 디자인과 현재의 디자인이 어지럽게 섞인 수수랜드 플랫폼은 마치 재개발 철거 지역처럼 보였다.

넘스톤 시리즈는 챗지피티가 그리는 중인데, 하나씩 떼어놓고 보면 잘 그렸지만 고양이 캐릭터를 빼면 전체적인 통일감이 없었다. 트링클 시리즈도 트링클은 제미나이(Gemini)가, 트리테라는 챗지피티가 그려서 서로 완전히 다른 게임처럼 보였다. 설상가상으로 제미나이가 그린 '워퍼즈 브리즈 라인'은 혼자 실사풍이라 또 혼자 겉돌았다.
이미 만들어둔 3장이 있으니, 비슷한 느낌으로 3장만 더 그리면 될 것 같았다. 챗지피티에게 3장만 더 그려달라며 글씨체와 글씨 크기도 똑같이 통일해 달라고 요청했다. 하지만 완성본의 폰트와 장평은 참고하라고 보낸 샘플과 미세하게 달랐다.
계획 없이 무작정 시작해서는 안 되겠다 싶어 컨셉을 먼저 정하기로 했다. 마트에 진열된 맥주캔들은 디자인이 제각각이어도 모아놓으면 알록달록 예쁜 것처럼 말이다.
1. 넷플릭스 영화 포스터 스타일
2. 맥주캔처럼 색상을 단순화하고 그림을 심플하게 가기
3. 가로세로 비율을 완전히 바꿔 미국 자동차 번호판 스타일로 가기
제미나이와 챗지피티 모두 2번 안이 좋다고 했다. 일단 내가 먼저 하나 그려서 보여주려고 작업을 시작했다. 처음 그린 거라 엉망이었지만 딸은 "괜찮네, 그냥 써!"라며 격려해 주었다. 그림은 어찌어찌 그리겠는데, 손글씨를 쓰니 자꾸 삐뚤빼뚤해졌다.
결국 클로드(Claude)에게 이미지 위에 깔끔하게 글씨를 올려주는 프로그램을 짜달라고 부탁했다. 내가 그린 그림 위에 폰트를 올리니 그럭저럭 봐줄 만은 한데, 앞으로 31장이나 더 그려야 한다니 까마득하고 막막했다.

노천광산 사진 위에 게임 이름을 썼다

클로드가 이미지에 글씨를 얹는 프로그램을 만들어주었으니, 실제 이미지 위에 게임 제목을 바로 올려보자는 생각이 떠올랐다. '워퍼즈'는 단어 찾기 게임인데, 컨셉이 노천광산이다. 진짜 노천광산 이미지를 찾아서 클로드의 프로그램으로 게임 이름을 얹어보았다. 씁쓸하고 황량한 분위기가 느껴지는 게 아주 마음에 쏙 들었다.
글씨체가 제각각이라 마음에 안 들었던 넘스톤 시리즈도 이 프로그램을 활용해 게임 제목 폰트를 말끔하게 통일했다.

그림만 봐도 무슨 게임인지 보여야지

내가 실사, 애니, 사진이 섞인 수수랜드 플랫폼을 보여주면서 무엇이 낫냐고 딸들에게 물어봤다.
막내가 한마디 던졌다.
“그림만 봐도 무슨 게임인지 직관적으로 알아야지. 영화 포스터 스타일은 안 돼!”
순간 절망했다.
‘우리가 영화 볼 때 줄거리 다 알고 보는 것도 아닌데, 게임은 왜 안 돼?’ 
하지만 그 말이 맞다.
게임 이름은 오목을 빼면 모두 낯설고, 그림으로 무슨 게임인지 보여줘야 한다.

결국 카드 버튼마다 한 줄 설명이 있는 디자인으로 7월초의 디자인으로 원상복구했다. 그리고 뱃지 위치, 줄 간격, 이모지 위치를 몇 픽셀 단위로 미세하게 이동하며 공들여 위치를 잡았다.

지난 3일 동안 재개발 구역 같았던 수수랜드에 방문했던 사용자분들은 참 어리둥절했을 것 같다. 그래도 배운 게 있다. 앞으로 디자인이 완전히 완성되기 전까지는 함부로 운영 서버에 올리지 말아야한다.
원상복귀하고 나는 다시 '워드마인'이라는 새 게임 개발에 착수했다. 모음퀴즈, 워퍼즈, 트링클의 메타태그 작업도 해야하는데 미뤄졌다. 수수랜드 플랫폼을 더 예쁘게 단장하고 싶은 욕심이 자꾸 넘치지만, 당분간은 꾹 참아야겠다.