UI 모작 연습 과제 10가지

이 글과 연결된 과정게임 UI·UX 과정 알아보기

UX는 화면의 생김새보다 플레이어가 겪는 흐름을 다룹니다. 처음 접속한 사람이 무엇을 눌러야 할지 헤매지 않는지, 원하는 메뉴까지 몇 번 만에 갈 수 있는지를…

모작 전에 정할 규칙: 해상도, 레이어, 출처

UI 모작은 시작 전에 원본 화면을 고해상도로 캡처하고, 같은 크기의 캔버스를 만드는 것부터 합니다. 해상도가 다르면 글자 크기와 여백을 비교할 수 없어서 모작의 의미가 줄어듭니다. 레이어는 배경, 패널, 버튼, 아이콘, 텍스트처럼 실제 게임에서 따로 쓰일 단위로 나눕니다. 이렇게 나눠 두면 나중에 화면을 고치거나 변형할 때 훨씬 편합니다.

모작은 공부용이므로 포트폴리오에 넣을 때는 원본 게임 이름을 밝히고 모작이라고 표시해야 합니다. 원본 그대로를 내 디자인처럼 쓰면 저작권 문제가 생길 수 있고, 평가자에게도 좋지 않은 인상을 줍니다. 포트폴리오의 중심은 모작에서 배운 것을 적용한 나만의 디자인이어야 합니다.

과제 1~3: 버튼, 아이콘, 게이지 같은 작은 요소

1. 버튼 상태 세트: 기본, 눌림, 비활성, 강조 상태를 한 세트로 모작하기
2. 아이콘 묶음: 같은 게임의 아이템 아이콘 여러 개를 골라 크기와 외곽선 규칙 맞추기
3. 체력·경험치 게이지: 바탕, 채움, 감소 연출 상태를 나눠서 그리기

작은 요소 과제에서 확인할 것은 일관성입니다. 버튼 네 가지 상태는 색과 밝기만 다르고 형태는 같아야 하며, 아이콘 묶음은 외곽선 두께와 빛 방향이 통일되어 있어야 합니다. 원본을 보며 이 규칙을 먼저 글로 적은 뒤 그리면, 단순히 비슷하게 그리는 것과 규칙을 이해하고 그리는 것의 차이를 체감할 수 있습니다. 게이지는 숫자가 줄어들 때 어떤 색이 잠깐 남는지까지 관찰해 보세요.

과제 4~6: 정보가 많은 화면 하나씩

1. 인벤토리 화면: 칸 크기, 간격, 등급 표시 방식 분석하며 모작
2. 상점 화면: 가격, 재화 아이콘, 구매 버튼의 시선 흐름 따라가기
3. 캐릭터 정보 화면: 능력치 숫자와 장비 칸의 정렬 기준 찾기

이 단계부터는 그래픽보다 정보 정리가 중요해집니다. 인벤토리라면 한 화면에 몇 칸이 보이는지, 칸 안에서 수량 숫자는 어디에 붙는지, 등급은 테두리 색인지 배경색인지를 확인합니다. 상점 화면은 사용자의 눈이 상품, 가격, 구매 버튼 순서로 움직이도록 크기와 대비가 짜여 있는 경우가 많습니다. 모작을 끝낸 뒤 화면 위에 시선이 움직이는 순서를 화살표로 그려 보면 설계 의도가 더 잘 보입니다.

정렬 기준을 찾을 때는 가이드 선을 적극적으로 쓰세요. 잘 만든 화면은 대부분 몇 개의 기준선에 요소가 맞춰져 있습니다. 기준선을 찾아 두면 다음 과제에서 화면을 직접 설계할 때 그대로 응용할 수 있습니다.

과제 7~8: 플레이 중 화면과 팝업

1. 전투 HUD: 체력, 스킬 버튼, 미니맵 등 플레이 중 고정 정보 배치 모작
2. 보상·확인 팝업: 결과 팝업과 재확인 팝업의 강조 방식 비교하기

HUD(헤드업 디스플레이, 플레이 화면 위에 떠 있는 정보)는 게임 화면을 가리지 않으면서도 필요한 정보를 바로 보여 줘야 합니다. 그래서 화면 가장자리에 배치되고, 투명도와 크기가 조심스럽게 정해져 있습니다. 모작할 때는 게임 장면 캡처 위에 그려서 실제 플레이 화면과 얼마나 잘 어울리는지 함께 확인하세요. 모바일 게임이라면 손가락이 닿는 위치에 버튼이 몰려 있는 이유도 생각해 볼 만합니다.

팝업은 보상처럼 기분 좋은 정보와, 재화 사용처럼 신중해야 하는 정보를 다르게 연출합니다. 두 종류를 나란히 모작해 보면 버튼 색, 문구 길이, 닫기 버튼 위치가 어떻게 달라지는지 비교할 수 있습니다.

모작이 끝나면 원본과 겹쳐서 차이를 기록합니다

모작을 끝냈다면 원본 캡처를 반투명하게 내 작업 위에 겹쳐 보세요. 눈으로 볼 때는 같아 보여도 겹치면 여백, 글자 크기, 모서리 둥글기가 조금씩 다른 것이 드러납니다. 이 작은 차이가 화면 전체의 완성도를 좌우합니다. 다른 부분을 찾으면 왜 원본이 그 값을 골랐을지 한 줄씩 적어 둡니다.

• 요소 사이 여백이 몇 가지 값으로 반복되는지
• 제목, 본문, 숫자 글자의 크기 단계가 몇 개인지
• 강조색이 화면에서 몇 군데에만 쓰였는지
• 작은 화면으로 줄였을 때도 버튼과 글자가 읽히는지

이렇게 모은 기록은 나만의 UI 규칙 노트가 됩니다. 과제가 쌓일수록 장르별로 자주 쓰는 규칙과 게임마다 다른 개성이 구분되기 시작합니다. 리디자인 과제를 할 때 이 노트를 펼쳐 놓고 시작하면 막연함이 크게 줄어듭니다.

과제 9~10: 흐름 전체와 나만의 변형

1. 화면 흐름 모작: 로비에서 상점, 구매, 결과까지 이어지는 화면 서너 장을 한 세트로
2. 리디자인: 모작한 화면 하나를 다른 장르나 콘셉트로 바꿔 새로 설계하기

9번 과제는 화면 한 장이 아니라 여러 화면 사이의 일관성을 보는 연습입니다. 같은 버튼이 화면마다 같은 위치와 모양으로 나오는지, 뒤로 가기가 어디에 있는지 확인하세요. 실무에서는 화면 하나를 예쁘게 만드는 것보다 이런 규칙을 지키는 일이 훨씬 많습니다.

10번 과제는 모작 연습의 마무리이자 포트폴리오의 출발점입니다. 예를 들어 판타지 게임의 인벤토리를 SF 콘셉트로 바꾸면, 정보 구조는 유지하면서 그래픽 언어만 새로 만들어야 합니다. 이 과정에서 무엇이 구조이고 무엇이 스타일인지가 분명히 구분됩니다. 10가지 과제를 마친 뒤 내 리디자인이 실무 UI 포트폴리오로 쓸 만한지 판단이 서지 않는다면, SBS아카데미게임학원 게임UIUX 과정 상담에서 작업물을 함께 보며 보완할 화면을 골라 드립니다.

자주 묻는 질문

가까운 캠퍼스에서 게임 UI·UX 알아보기

사는 곳과 가까운 캠퍼스를 고르면 수업 내용, 오시는 길, 상담 신청을 한 번에 볼 수 있습니다.

함께 읽으면 좋은 글