UI는 디자인으로 끝나지 않고 엔진에 적용되어야 완성됩니다. 수업에서는 디자인한 화면을 개발팀이 쓸 수 있게 이미지 조각으로 나누고, 엔진에 올려 실제로 동작…
그냥 늘리면 테두리가 찌그러집니다
둥근 모서리와 장식 테두리가 있는 작은 창 이미지를 가로로 두 배 늘려 보면 문제가 바로 보입니다. 둥근 모서리는 납작한 타원이 되고, 테두리 선은 위아래는 그대로인데 양옆만 두꺼워집니다. 장식 무늬가 있다면 옆으로 길게 늘어져 뭉개집니다.
게임 화면에는 크기가 다른 창이 아주 많습니다. 짧은 알림창, 긴 설명창, 넓은 상점 화면이 모두 같은 디자인의 테두리를 써야 하는데, 크기마다 이미지를 따로 그리면 작업량도 많고 게임 용량도 커집니다. 9슬라이스는 이미지 하나로 이 문제를 해결하기 위해 나온 방법입니다.
원리는 늘어나도 되는 부분과 늘어나면 안 되는 부분을 나누는 것입니다. 모서리처럼 모양이 중요한 곳은 고정하고, 단순한 선이나 면처럼 늘어나도 티가 나지 않는 곳만 늘이는 것입니다.
아홉 조각은 각자 다르게 움직입니다
| 조각 위치 | 개수 | 크기를 바꿀 때 |
|---|---|---|
| 네 모서리 | 4 | 늘어나지 않고 원래 모양 유지 |
| 위·아래 가장자리 | 2 | 가로로만 늘어남 |
| 왼쪽·오른쪽 가장자리 | 2 | 세로로만 늘어남 |
| 가운데 | 1 | 가로세로 모두 늘어남 |
이렇게 나누면 창이 아무리 넓어져도 모서리의 둥근 모양과 장식은 그대로 남고, 테두리 선의 두께도 일정하게 유지됩니다. 늘어나는 것은 단순한 선과 가운데 면뿐이라 눈으로 보기에는 처음부터 그 크기로 그린 것처럼 보입니다.
게임 엔진과 UI 도구에서는 보통 이미지에 위, 아래, 왼쪽, 오른쪽 테두리 두께를 지정해 아홉 조각의 경계를 정합니다. 경계를 어디에 둘지는 디자이너와 개발자가 함께 확인하는 경우가 많아서, UI 디자이너도 이 값의 의미를 알고 있어야 합니다.
액자 틀을 떠올리면 이해가 쉽습니다
목공소에서 액자 틀을 만드는 장면을 생각해 보세요. 네 모서리에는 장식이 들어간 모서리 조각을 붙이고, 그 사이는 같은 모양의 긴 막대를 원하는 길이만큼 잘라 이어 붙입니다. 액자가 커지면 막대만 길어질 뿐 모서리 장식은 그대로입니다. 가운데에는 원하는 크기의 그림이나 유리가 들어갑니다.
9슬라이스는 이 액자 만드는 방식을 이미지로 옮긴 것입니다. 모서리 조각은 고정, 막대는 길이만 조절, 가운데는 자유롭게 채우기. 이 감각으로 UI 이미지를 보면 어디에 장식을 넣어도 되고 어디는 단순하게 두어야 하는지 자연스럽게 판단할 수 있습니다.
액자에서 막대의 단면 모양이 처음부터 끝까지 같아야 이어 붙인 자국이 보이지 않듯, 9슬라이스의 가장자리도 늘어나는 방향으로 같은 모양이 유지되어야 합니다. 가장자리 중간에 보석 장식 하나를 넣고 싶다면 그것은 늘어나는 조각에 그리지 말고 별도 이미지로 위에 얹는 방식을 쓰는 것이 일반적입니다. 이렇게 하면 창이 커져도 장식은 한가운데에 원래 크기로 남습니다.
게임 UI에서 9슬라이스가 쓰이는 곳
- 팝업창과 대화창: 내용 길이에 따라 크기가 달라지는 창
- 버튼: 글자 길이가 다른 여러 버튼을 같은 디자인으로 만들 때
- 말풍선: 대사 길이에 맞춰 늘어나는 풍선
- 게이지와 바: 체력, 경험치처럼 길이가 변하는 막대의 틀
- 목록 칸과 슬롯 배경: 화면 해상도에 따라 크기가 바뀌는 칸
특히 여러 기기에서 돌아가는 모바일 게임에서 중요합니다. 화면 비율과 해상도가 기기마다 달라서 같은 창도 기기에 따라 다른 크기로 그려져야 합니다. 9슬라이스로 만들어 두면 어떤 화면에서도 테두리가 깨지지 않습니다.
다국어 지원에서도 쓸모가 큽니다. 같은 버튼이라도 언어에 따라 글자 길이가 달라지는데, 9슬라이스 버튼은 글자에 맞춰 늘어나므로 언어마다 이미지를 따로 만들 필요가 줄어듭니다.
9슬라이스용 이미지를 그릴 때 주의할 점
가장 중요한 원칙은 늘어나는 부분을 단순하게 두는 것입니다. 가장자리와 가운데에 그라데이션, 무늬, 질감이 강하게 들어가면 늘어나면서 모양이 흐트러집니다. 장식은 모서리에 모으고, 가장자리는 같은 모양이 반복되는 단순한 선으로, 가운데는 단색이나 아주 약한 질감으로 그리는 것이 기본입니다.
모서리 크기도 생각해야 합니다. 모서리를 너무 크게 그리면 작은 창을 만들 때 모서리끼리 겹쳐 버립니다. 이 창이 가장 작아질 때의 크기를 먼저 정하고, 그 안에 모서리 네 개가 들어갈 수 있도록 설계해야 합니다.
가운데에 넓은 무늬가 꼭 필요하다면 늘리는 대신 같은 무늬를 반복해 채우는 타일 방식을 함께 검토할 수 있습니다. 엔진과 도구에 따라 지원하는 방식이 다르니 개발자와 미리 확인하세요.
직접 만들어 보며 익히기
좋아하는 게임의 팝업창을 캡처해 아홉 조각의 경계가 어디일지 선을 그어 보세요. 모서리 장식이 어디까지인지, 가장자리가 단순하게 반복되는지 확인하면 9슬라이스를 고려한 디자인이 어떤 모습인지 감이 옵니다. 그다음 직접 작은 창 이미지를 하나 그리고, 그림 프로그램에서 조각을 나눠 크기를 바꿔 보며 깨지는 곳이 없는지 시험해 봅니다.
작업한 창 이미지를 포트폴리오에 넣을 때는 작은 크기와 큰 크기로 늘린 예시를 함께 보여 주면, 실무에서 바로 쓸 수 있는 UI를 만든다는 점이 드러납니다. 만들어 본 창 이미지를 실제 엔진 화면에 올려 해상도별로 확인하는 과정까지 경험해 보고 싶다면, 게임UIUX 과정 상담에서 그 이미지 파일을 놓고 어떤 실습으로 이어질 수 있는지 물어보세요.
자주 묻는 질문
9슬라이스는 UI 디자이너와 개발자 중 누가 설정하나요?
이미지는 디자이너가 만들고, 엔진에서 조각 경계를 설정하는 일은 프로젝트에 따라 디자이너나 개발자가 맡습니다. 어느 쪽이든 경계 값을 함께 확인하는 것이 좋습니다.
둥근 버튼도 9슬라이스로 만들 수 있나요?
양 끝이 둥근 알약 모양 버튼은 모서리 부분에 둥근 끝을 넣어 만들 수 있습니다. 완전한 원형 버튼은 늘릴 필요가 없어 보통 9슬라이스를 쓰지 않습니다.
가까운 캠퍼스에서 게임 UI·UX 알아보기
사는 곳과 가까운 캠퍼스를 고르면 수업 내용, 오시는 길, 상담 신청을 한 번에 볼 수 있습니다.