본문 바로가기

시각 스타일과 조합해 사용하는 구성·상호작용 기법입니다.

W33 / 레이아웃 기법

분할 화면

Split-screen Layout

화면을 크게 두 영역으로 나누어 이미지와 설명, 또는 두 가지 선택지를 나란히 배치한다. 두 영역의 관계를 즉시 알아볼 수 있게 하는 것이 목적이다.

기존 배치 패턴

분할 화면 학습용 웹 화면. 관찰할 특징: 서로 마주한 두 영역, 화면을 가르는 명확한 축, 양쪽의 역할 또는 관점 대비.
구성·상호작용 기법을 설명하기 위해 직접 제작한 학습용 화면입니다.그림 원본 열기 ↗

어디에 적용할까요?

제품과 설명·서비스 비교·방문 목적 선택·포트폴리오 표지에 활용한다.

함께 살펴볼 점

각 영역이 서로 다른 스크롤을 강요하지 않게 한다. 휴대전화에서 먼저 읽힐 쪽을 명확히 정한다.

MAKE YOUR OWN

이 기법으로 만들어 보세요

목적과 콘텐츠를 내 작업에 맞게 바꿔 사용하세요.

출처와 확인일

확인일 2026-09-20. 정의와 자료 맥락의 근거이며, 위 그림은 이 도감을 위해 별도로 제작했습니다.

← 구성·상호작용 참고 보기