015. UI 디자인 잘하는 방법

“UI요?”

“User interface. 전에 가르쳐 줬잖아?”

“버튼이나 메뉴 같은 걸 말하는 거죠?”

“응.”

이전에 작업할 때 자신이 어떤 것을 작업해야하는지를 설명하면서 상혁은 서연에게 UI의 기초적인 내용을 가르친 적이 있었다.

그러나 그것은 어디까지나 기초적인 개념만 가르친 것이고 좋은 UI를 만들기 위한 내용은 가르친 적이 없었기에, 서연은 상혁을 보며 조금 당황하고 있었다.

“어, 음···. 제가 뭘 하면 되는데요?”

“별거 아니야. 그냥 게임에 들어갈 메뉴랑 상태창 같은 거 만드는 거니까.”

“전처럼 오빠가 잡아주고 저는 그림만 그리면 안 돼요?”

“그건 안 돼.”

그 말을 옆에서 들은 민준은 피식 하고 웃음을 지었다.

상혁이 서연에게 어떤 기대를 하고 있는 것인지 알 것 같아서였다.

“부득이한 경우가 아니면 내가 이제 꼼꼼하게 일일이 지시하는 경우는 이번 프로젝트에는 없을 거야. 캐릭터 디자인도 마찬가지고. 이번엔 확실하게 서연이 네가 네 파트에 대해서 책임감을 가지고 작업을 해줬으면 좋겠어.”

상혁의 입에서 ‘책임감’이라는 말이 나오자 서연이 조금 겁먹은 표정을 지었다.

결국 아무리 재능이 있다지만 아직 고1.

여리고 여린 17살 여고생에 불과한 것이다.

그것을 잘 아는 상혁은 부드럽게 미소 지으며 오해를 풀어주었다.

“책임감을 가지라는 거지 책임지라는 이야기가 아니야. 최종적으로 내가 검수도 할 거고.”

UI를 디자인하면서 어떤 버튼은 왜 어디에 배치되어야하는지, 크기는 어때야하는지, 색은 어떤 것이 적당한지, 버튼 모양은 어떤 식이 좋은지, 움직임은 어떻게 표현할건지.

“그런 것들을 하나하나 같이 공부해가면서 배워보자는 거야.”

물론 상혁은 15년차 기획자로써 UI 디자인에 대한 기본적인 지식은 꽤 가지고 있었다.

그러나 일부러 ‘함께 공부하자’라는 단어를 쓴 것은 서연이 상혁과는 다른 자신만의 UI 디자인 철학을 찾아가길 원해서였다.

마치 자신과 오래 손발을 맞추었던 민준에게 딱히 시스템의 알고리즘을 하나하나 설명할 필요가 없듯이, 상혁은 서연도 완벽하게 혼자서 동작할 수 있는 팀의 한 파트가 되길 원했다.

그리고 그것은 상혁이 생각하는 이상적인 협업의 모습이기도 했다.

그런 상혁의 생각을, 서연은 기쁘게도 굳은 의지로 따라와 주었다.

“한번 해볼게요. 잘 모르는 부분이지만, 최선을 다해서 공부해볼게요.”

“그래.”

상혁은 웃으며 서연의 머리를 슥슥 쓰다듬고는 기획서를 펴서 옆에 앉았다.

그리고는 게임 UI의 기본적인 사항에 대해서 알려주기 시작했다.

“우선 기획서에서 파악 가능한 부분부터 보자. 일단 각 화면 별로 필요한 버튼 리스트는 전부 있지?”

“네.”

“그 버튼 박스마다 숫자가 적혀 있을 거야. 그건 내가 예상하는 버튼 중요 순서야. 낮은 숫자일수록 더 자주 쓸 것 같다는 의미지.”

“그건 어떻게 예상하신 거예요?”

“간단하지. 대체로 화면 설계할 때 플레이를 시뮬레이트 해보면 제일 먼저 클릭할만한 버튼이 떠오를 거잖아? 그리고 예외적으로 잘 누르지는 않는데 필요한 버튼들이 나중에 떠오를 거고.”

“아항···. 떠오른 순서대로 잡으신 거군요?”

“일단 기본은 그런데 나중에 생각난 것 중에 중요한건 숫자를 올려서 재조정하기도 해.”

“흠···. 그럼 이 숫자 순서대로 버튼을 배치하면 될까요?”

“아니.”

“엥? 아니에요?”

“그렇게 쉬운 거면 좋겠지만 안타깝게도 그렇지는 않거든. 23페이지 펴봐.”

“이건 다른 화면이네요?”

“근데 버튼 구성은 비슷하잖아? 근데 숫자는 다르지?”

“어? 그렇네요?”

“같은 기능 버튼이라도 어느 메뉴에 있느냐에 따라서 순서가 달라. 근데 그때마다 우선순위 맞춰서 버튼을 계속 재배치하면 유저는 메뉴가 바뀔 때마다 버튼 위치를 새로 찾아야 하잖아?”

“아, 그렇네요?”

“그러니까 기본적으로는 이 버튼들을 카테고리 단위로 묶고, 카테고리의 우선순위에 따라서 각각 고정적으로 자리를 잡아야하는 버튼인지, 아니면 위치를 바꿔도 되는지를 판단하는 거야.”

“오···. 재밌다···.”

“그치? 생각보다 게임 UI도 재밌는 게 많다니까?”

“다른 건요?”

“4:3비율 게임화면에서 UI배치하는 거랑 16:9 게임화면에서 배치하는 것도 요령이 좀 다르지. 아이콘같은경우도 좀 다르고.”

“아이콘도요?”

“예를 들면 요즘 게임에서 자주 쓰는 세이브 아이콘은 디스켓 모양이지?”

상혁이 기획서 여백에 작은 디스켓 모양을 그리자 서연이 고개를 끄덕였다.

“근데 이거 지금도 이제 게임 용량이 슬슬 커지면서 게임하나 담으려면 수십 장씩 필요한데 20년 후에도 이걸 쓸까?”

“아···. 안 쓰겠죠?”

“그래. 20년쯤 지나서 게임하는 애들은 이게 무슨 모양인지도 모르게 돼버리는 거야.”

“그렇게 돼요?”

“그렇게 돼···겠지?”

이미 2020년에 어떻게 되었는지 알고 있던 상혁은 ‘그렇게 된다’라고 확언을 하려다가 급하게 말을 바꾸었다.

애당초 세이브 아이콘을 디스켓 모양으로 디자인한 사람들도, 미래에 디스켓이 아예 쓰이지 않게 될 거라고는 생각 못했을 테니까.

“그럼 어떻게 디자인하는 게 좋을까요?”

“기본적으로 세이브란 단어는 저장한다라는 이미지가 있지. 그걸 아이콘으로 표현하면 어떤 모양일까?”

“흠. 창고, 책···.”

“딱히 이거다 하는 이미지가 없으면 비슷한 의미로 기록한다는 표현도 있지.”

“기록···. 아!”

서연은 작은 사각형을 그리더니 안에 3개의 선을 그려 메모장 모양을 만들었다. 그리고는 선을 그리고 있는 펜 모양의 그림을 추가해 저장 아이콘을 만들어냈다.

“그래. 그런 이미지면 잘 맞지. 근데 우리 게임 세계관은 18세기 궁전이잖아? 그럼 메모지를···.”

“메모지를 양피지로, 볼펜을 깃펜으로 바꾸면 되겠네요?”

“그래. 그런 식으로 게임 안에 필요한 버튼들을 하나하나 아이콘화 시키는 거야.”

“그럼 로드는요?”

상혁은 서연이 그린 세이브 아이콘 밑에 안쪽으로 향하는 화살표를 그렸다.

그러자 서연은 바로 이해하더니 같은 그림을 그리고는 바깥쪽 화살표를 넣었다.

“맞아.”

“오, 신기해.”

“당분간은 이런 식으로 UI 기초부터 차근차근 공부하자고.”

“좋아요! 재밌을 거 같아요!”

그렇게 상혁의 맨투맨 강의를 시작으로 본격적인 개발이 시작되었다.

그리고 그렇게 상혁이 서연에게 게임 UI 디자인의 기초를 가르치기 위해 분투하는 동안, 민준은 상혁의 기획서를 바탕으로 기본적인 개발을 위한 툴을 만들기 시작했다.

서연의 준비가 끝나는 대로, 바로 개발에 속도를 붙여도 문제가 없을 수 있도록.

서연이 상혁의 가르침이 없어도 알아서 상혁의 기준에 맞는 UI 디자인을 잡아오게 되는데 약 한 달여의 시간이 필요했다.

물론 그렇다고 한 달만에 십 몇 년차 경력자 수준의 UI 설계가 가능하게 된 것은 아니다.

아직도 몇몇 부분에서는 상혁의 가르침이 필요했고 어떤 부분에서는 빼먹는 것도 꽤 있었지만 중요한건 그녀가 스스로 UI에 대해 생각할 수 있는 능력을 얻었다는 것이었다.

상혁이 바란 것은 그것이 전부였다.

서연을 포함해서 앞으로 합류할 팀원들까지 각자가 자신의 업무에 있어서 전문성을 발휘할 수 있게 만드는 것.

상혁은 자신의 미래에 대한 지식을 그것에 사용할 생각이었다.

＊＊＊

기획서를 받은지 일주일만에 알파버전을 민준이 만들어왔던 ‘익스트림 발리볼’때와는 다르게, 이번 프로젝트는 볼륨이 큰 만큼 이전보다는 알파버전 개발에 시간이 좀 더 소요되었다.

서연이 UI에 대해 기본적인 실력을 갖추기 위해 노력하는 중간 중간 개발 진도를 뽑았음에도, 알파버전 개발에만 두 달 정도 시간이 소요된 것이다.

그것도 게임의 아주 기본적인 부분만을 엄청나게 간단한 그래픽으로 구현하는 테스트 버전을 개발하는데 걸린 시간이 그 정도였다.

그나마도 상혁이 중간에서 극도로 효율적으로 개발 일정을 조율해서 가능한 스케줄이었지만.

상혁은 개발 속도를 조정하기 위해 서연에게 모든 리소스를 명암 없는 흑백으로 작업할 것을 지시했고 서연은 덕분에 빠른 속도로 기초 시스템에 필요한 리소스를 제작할 수 있었다.

단 한 사람에게도 여유가 있는 일정은 아니었지만 자신들이 만들고 싶은 게임을 만드는 과정이었기에 3명다 즐거운 기분으로 일할 수 있었다.

그리고 그렇게 두 달을 풀로 작업한 세 사람은 대망의 프로토 타입 버전을 플레이하게 되었다.

물론 한 달만에 급조한 버전이었기에 상혁이 강조했던 게임의 3가지 핵심 시스템인 ‘스케줄’ ‘영지 경영’ ‘측근영입’의 시스템을 모두 구현할 수 는 없었다.

단지 게임의 전반적인 분위기를 전달할 수 있는 오프닝과 도입부, 그리고 공주 키우기 2의 기본 시스템이었던 ‘스케줄’과 신규 시스템인 ‘영지 경영’ 의 일부 파트만을 플레이할 수 있었을 뿐이었다.

그럼에도 이 타이밍에 좀 더 완성도를 올리는 대신 테스트 플레이를 감행한 것은, ‘개발 과정이 눈에 보이는 편이 작업 의욕 고취에 도움이 된다.’라는 상혁의 주장 때문이었다.

“그럼 테스트 할 테니까 각자 자리에서 플레이해보고 감상을 이야기해보자.”

테스트 분량은 그리 길지 않았지만, 채색 없이 선화만으로 이루어진 리소스만으로도 완성된 게임의 모습을 상상할 수 있는 퀄리티였다.

이미 내부 테스트 전 버그 체크를 위해 프로토 타입 버전을 플레이했던 상혁은 이번 테스트에는 참가하지 않고 다른 팀원들이 게임을 플레이하는 것을 뒤에서 지켜보았다.

플레이하는 유저의 모습을 보면서 느낄 수 있는 것도 있지 않을까 해서였다.

사실, 아무리 개발과정을 잘 통제한다고 해도 초기에 기획한 것이 그대로 출시까지 이어지는 경우는 흔하지 않다.

구현의 난이도라던가, 혹은 개발기간이나 개발인원의 실력부족, 혹은 실제로 구현했더니 아이디어때와 다르게 재미가 없어 중간에 변경되는 경우가 많은데 상혁은 그것을 최소화하기 위해서 프로토 타입 테스트를 감행한 것이다.

물론 처음부터 완성된 리소스를 만드는 것에 비해서 임시로 필요한 리소스를 만들어야하는 추가작업이 필요하기 때문에 일이 총량은 늘어나지만, 적어도 초기 기획의 아이디어가 얼마나 재미를 전달해줄 수 있는지는 확실히 확인할 수 있었다.

그리고 그것은 상혁의 생각에 개발기간을 추가로 소모하더라도 충분히 가치 있는 일이라고 판단되었다.

과연 생각처럼 재미있는 게임이 만들어졌을까.

그게 아니라면 너무 어렵거나 복잡하지는 않을까.

긴장된 상혁과는 반대로, 테스트를 수행하는 민준과 서연의 표정은 평화로웠다.

민준의 경우는 단순하게 자신이 만든 구조가 잘 돌아가는지를 확인하고 있었기 때문이었고, 서연의 경우에는 이러한 게임 제작 자체가 신기한 경험이었기 때문에 흥미롭게 테스트를 수행할 수 있었던 것이다.

그렇기에 두 시간의 테스트를 수행하며, 민준은 자신이 구축한 각 모듈이 문제없이 돌아가는 것을 보며 만족하는 표정을 지었고 서연은 자신이 만든 리소스가 실제로 게임에 들어가서 동작하는 것을 체험하며 즐거운 시간을 보냈다.

그렇게 약 두 시간의 테스트 버전 플레이가 끝난 후, 상혁은 화이트 보드 앞에 두 사람을 모아놓고 회의를 시작했다.

개발의 첫 계단을 올랐으니, 이제는 결과를 봐야할 시간이다.