분할 화면

분할 화면은 화면 하나를 여러 칸으로 나눠 칸마다 다른 장면을 보여 주는 일입니다. 게임에서는 한 화면 앞에 모인 여러 사람이 저마다 자기 시점으로 함께 플레이하게 해 줍니다. 휴대폰과 태블릿에서는 앱 두 개를 한 화면에 나란히 띄우는 기능을 같은 이름으로 부릅니다.

쉽고 빠른 이해

분할 화면은 화면 하나를 칸으로 나눠 칸마다 다른 장면을 보여 줍니다. 텔레비전 한 대에 게임기를 연결하고 두 사람이 앉았다고 합시다. 화면 왼쪽에는 첫째 사람이 보는 장면이 나옵니다. 오른쪽에는 둘째 사람이 보는 장면이 나옵니다.

이게 없으면 모든 사람이 장면 하나를 같이 봐야 합니다. 그러면 두 캐릭터가 한 그림에 함께 들어와야 합니다. 그래서 두 사람이 게임 속에서 멀리 떨어질 수 없습니다. 아니면 사람마다 화면을 따로 두어야 합니다.

도는 순서는 이렇습니다.

1. 화면을 사람 수만큼 칸으로 나눕니다
2. 한 사람의 칸을 골라 그 사람이 보는 장면을 그 칸에만 그립니다
3. 다음 사람의 칸으로 옮겨 같은 일을 되풀이합니다. 다 그리면 화면에 내보냅니다

대가는 두 가지입니다. 한 사람이 보는 그림이 작아집니다. 게임은 같은 게임 세계를 사람 수만큼 그려야 해서 일이 늘어납니다. 그래서 그릴 물체가 많은 게임은 분할 화면을 빼기도 합니다.

상세

한 화면을 여럿이 나눠 보는 일

신문 한 면에는 기사가 여러 개 실립니다. 면 한 장을 칸으로 나누고 칸마다 다른 기사를 싣습니다.

분할 화면은 화면 한 장을 이렇게 칸으로 나눠 씁니다. 게임에서는 칸 하나를 플레이어 한 명이 씁니다.

기기 하나와 화면 하나 앞에 여럿이 모여 함께 하는 방식을 로컬 멀티플레이라고 합니다. 거실 텔레비전 한 대에 게임기를 연결하고 두 사람이 나란히 앉아 하는 게임이 그렇습니다. 자동차 경주 게임이라면 화면 위 칸에서 첫째 사람의 차가 달리고 아래 칸에서 둘째 사람의 차가 달립니다. 분할 화면은 이 방식에서 흔히 씁니다.

게임 속 세계는 3차원 공간입니다. 이 글은 이것을 게임 세계라고 부릅니다. 화면에 보이는 것은 그 공간을 어느 한 곳에서 바라본 모습입니다. 바라보는 위치와 방향을 정하는 장치를 카메라라고 합니다. 플레이어마다 자기 캐릭터를 따라다니는 카메라가 하나씩 있습니다.

화면을 나누지 않으면 카메라도 하나뿐입니다. 두 사람의 캐릭터가 모두 들어오도록 카메라를 멀리 빼야 합니다. 두 캐릭터가 서로 반대쪽으로 가면 둘을 한 장면에 담을 수 없습니다. 나누지 않고 이 제약을 피하려면 사람마다 화면을 따로 두어야 합니다.

분할 화면은 이 제약을 칸으로 풉니다. 사람마다 카메라를 하나씩 주고 칸도 하나씩 줍니다. 두 캐릭터가 아무리 멀어져도 각자의 칸에는 각자의 캐릭터가 보입니다.

뷰포트를 바꿔 가며 여러 번 그리기

이 소절은 게임이 칸마다 다른 장면을 그리는 순서를 봅니다. 쓰는 도구는 뷰포트 하나입니다.

뷰포트는 그린 결과가 들어갈 사각형입니다. 사각형의 한 모서리 좌표와 너비·높이로 정합니다. 뷰포트를 정한 뒤에 그리는 장면은 그 사각형 크기로 맞춰져 그 안에 들어갑니다. 뷰포트를 화면 왼쪽 절반으로 잡으면 그린 장면이 통째로 왼쪽 절반에 들어갑니다.

게임은 화면에 내보낼 그림을 1초에 수십 장씩 새로 그립니다. 그 한 장을 프레임이라고 합니다.

분할 화면에서는 프레임 한 장을 그릴 때 플레이어마다 한 바퀴씩 돕니다. 뷰포트를 그 사람의 칸으로 잡습니다. 카메라를 그 사람의 카메라로 바꿉니다. 그 상태로 게임 세계를 그립니다. 마지막 사람까지 돌면 완성된 프레임을 화면에 내보냅니다.

flowchart TD
    A["프레임 시작"] --> B["다음 플레이어 고르기"]
    B --> C["뷰포트를 그 사람의 칸으로"]
    C --> D["카메라를 그 사람의 카메라로"]
    D --> E["게임 세계 그리기"]
    E --> F{"모든 플레이어를 다 그렸나"}
    F -->|아니오| B
    F -->|예| G["프레임을 화면에 내보내기"]

칸을 어떻게 나눌지는 사람 수와 화면 모양이 정합니다. 화면 모양은 화면비로 말합니다. 화면비는 가로 길이와 세로 길이의 비입니다. 가로 1920 픽셀, 세로 1080 픽셀 화면은 16:9 입니다.

이 화면을 나누는 흔한 방법은 셋입니다.

좌우로 가르면 세로로 긴 칸이 됩니다. 위아래로 가르면 가로로 긴 띠가 됩니다. 넷으로 가르면 칸마다 원래 화면과 같은 16:9 가 됩니다. 셋이 할 때는 네 칸 중 하나를 비워 두거나 다른 정보를 띄우기도 합니다.

칸마다 맞추는 화면비

이 소절은 칸 모양이 원래 화면과 다를 때 생기는 일을 봅니다. 좌우로 가른 8:9 칸이 예입니다.

카메라가 3차원 게임 세계를 평면 그림으로 옮기는 계산을 투영 행렬이라고 합니다. 이 계산에는 결과 그림의 화면비가 들어갑니다. 카메라가 16:9 그림을 가정한 채로 8:9 칸에 그리면 동그란 공이 세로로 긴 타원으로 보입니다.

그래서 칸마다 카메라의 화면비를 그 칸에 맞춰 줍니다. 그러면 모양은 제대로 나옵니다. 대신 보이는 범위가 달라집니다.

카메라가 한 번에 담는 각도를 시야각이라고 합니다. 세로 시야각을 그대로 두고 칸 폭이 좁아지면 가로 시야각이 좁아집니다. 좌우로 가른 칸에서는 옆이 덜 보입니다.

칸 하나는 원래 화면보다 작습니다. 한 사람이 보는 그림도 그만큼 작아집니다. 글자나 작은 표시는 칸에 맞춰 크게 다시 그려야 읽힙니다.

칸 밖으로 번지지 않게 막는 시저 테스트

칸 하나를 그리기 전에는 흔히 그 칸을 한 색으로 먼저 지웁니다. 앞 프레임에 그렸던 그림을 걷어 내고 새로 그리려는 것입니다.

뷰포트는 장면을 칸 크기로 맞춰 줍니다. 그래도 모든 그리기 명령이 칸 안에 갇히지는 않습니다. 방금 말한 지우기 명령이 대표적입니다. 그래픽스 라이브러리에 따라 이 명령은 뷰포트와 상관없이 화면 전체를 지웁니다.

둘째 사람의 칸을 그리기 전에 이 명령을 부르면 첫째 사람의 칸까지 지워집니다. 방금 그린 장면이 사라집니다.

시저 테스트는 화면에 사각형을 하나 걸고 그 밖의 픽셀은 칠하지 않게 막는 검사입니다. 뷰포트와 같은 사각형으로 시저 테스트를 걸면 지우기 명령도 그 칸 안에서만 일어납니다. 한 사람의 장면이 옆 사람 칸으로 번지지 않습니다.

사람 수만큼 늘어나는 그리기 비용

이 소절은 분할 화면에서 그리는 일이 왜 늘어나는지를 봅니다. 칠하는 픽셀 수는 거의 안 늘어납니다. 칸을 다 합하면 화면 한 장이기 때문입니다. 늘어나는 것은 칸마다 그릴 물체를 준비하는 일입니다.

GPU(Graphics Processing Unit, 그래픽 처리 장치)는 그림을 칠하는 일을 전담하는 처리 장치입니다. 프로그램은 픽셀을 직접 칠하지 않고 GPU 에 맡깁니다.

프로그램은 물체 하나를 그릴 때마다 GPU 에 그리기를 부탁합니다. 이 부탁 한 번을 드로 콜이라고 합니다. 물체가 많을수록 드로 콜도 많아집니다.

카메라마다 보이는 물체가 다릅니다. 그래서 프로그램은 카메라마다 보이는 물체를 따로 고릅니다. 안 보이는 물체를 이렇게 미리 걸러 내는 일을 컬링이라고 합니다.

이 고르기와 드로 콜이 앞에서 말한 준비하는 일입니다. 두 사람이면 두 벌입니다. 네 사람이면 네 벌입니다.

한 프레임을 그리는 데 쓸 수 있는 시간을 프레임 예산이라고 합니다. 1초에 60장을 그리려면 한 장에 1초의 60분의 1밖에 못 씁니다. 이 준비가 네 벌로 늘어도 이 예산은 그대로입니다. 한 벌에 쓸 수 있는 시간이 그만큼 줄어듭니다.

그래서 분할 화면에서는 칸마다 덜 그리는 방법을 함께 씁니다. 흔한 셋은 이렇습니다.

첫째 줄의 방법을 LOD(Level of Detail, 세부 수준)라고 부릅니다. 칸이 작아지면 먼 물체는 몇 픽셀밖에 안 됩니다. 그런 물체는 간단한 모형으로 바꿔도 눈에 잘 안 띕니다.

이렇게 줄여도 시간이 모자란 게임은 분할 화면을 빼기도 합니다. 그런 게임은 사람마다 자기 기기로 네트워크에 붙어 함께 하는 온라인 멀티플레이로 여럿이 즐기게 합니다.

운영체제가 나누는 분할 화면

휴대폰과 태블릿에서 말하는 분할 화면은 나누는 주체가 다릅니다. 이 소절은 그 차이를 게임의 분할 화면과 견줘 봅니다.

이 분할 화면에서는 운영체제가 화면을 나눕니다. 앱 두 개가 칸을 하나씩 받습니다. 한쪽에서 문서를 읽으며 다른 쪽에서 메모를 쓰는 식으로 씁니다.

여러 창의 그림을 모아 화면 한 장으로 합치는 프로그램을 컴포지터라고 합니다. 앱은 저마다 자기 창을 따로 그립니다. 컴포지터가 두 창의 그림을 받아 칸에 맞춰 한 화면으로 합칩니다.

앱을 만드는 쪽에서 달라지는 것은 창 크기입니다. 앱이 받는 창은 화면보다 작습니다. 두 칸 사이의 경계선을 사용자가 끌면 앱이 도는 중에 창 크기가 바뀝니다.

앱은 바뀐 크기에 맞춰 버튼과 목록을 다시 배치해야 합니다. 창 크기에 따라 배치를 바꾸는 방식을 반응형 레이아웃이라고 합니다. 화면 전체를 쓴다고 가정하고 만든 앱은 좁은 창에서 요소가 잘리거나 겹칩니다.

두 뜻을 나란히 놓으면 이렇습니다.

둘 다 화면 한 장을 칸으로 나눠 칸마다 다른 것을 보여 줍니다. 게임은 한 프로그램이 제 그림을 나눕니다. 운영체제는 여러 프로그램에 화면을 나눠 줍니다.

관련 항목

분할 화면이 칸을 나누는 데 쓰는 그래픽스 기능

뷰포트 · 시저 테스트 · 카메라 · 투영 행렬 · 렌더 타깃 · 프레임버퍼 · 화면비 · 시야각

한 화면에 여러 장면을 함께 보이는 다른 기법

미니맵 · 화면 속 화면 · 렌더 투 텍스처 · 멀티 모니터

칸 수만큼 늘어나는 그리기 비용과 그 절감 기법

프레임 · 프레임 예산 · 프레임률 · GPU · 드로 콜 · 컬링 · 절두체 컬링 · LOD

분할 화면을 쓰는 게임 방식

로컬 멀티플레이 · 카우치 코옵 · 온라인 멀티플레이 · 게임 루프

운영체제가 앱을 나란히 띄우는 기능

멀티 윈도 · 운영체제 · 컴포지터 · 창 관리자 · 반응형 레이아웃 · 적응형 레이아웃 · 화면 방향 · 폴더블 · 모바일 개발