고정 헤더가 있는 스크롤 프로토타입 만드는 방법

스크롤 프로토타입을 만들려면 화면에 보이는 영역을 프레임으로 정하고, 그 경계 밖까지 이어지는 콘텐츠를 넣은 뒤 필요한 방향의 스크롤을 설정합니다. 항상 보여야 하는 컨트롤만 고정하세요. 핵심은 화면에 보이는 영역의 높이와 콘텐츠 전체 높이를 구분하는 것입니다. 모든 내용을 담을 만큼 프레임 자체를 길게 만들면 그 안에는 스크롤할 여지가 남지 않습니다.

예제로 체험 예약 페이지를 만들어 보겠습니다. 간결한 헤더, 사진과 소개, 일정, 후기, 날짜 선택 기능이 있는 긴 페이지입니다. Pixso의 인터랙티브 프로토타이핑 기능으로 스크롤 영역과 고정 요소를 구성하면, 화면에 남겨 둘 내비게이션의 범위를 정하기 전에 페이지 전체의 이용 흐름을 확인할 수 있습니다.

페이지 전체가 아니라 화면에 보이는 영역부터 정하세요

검토하려는 화면 크기로 프레임을 만듭니다. 이 예제에서는 390 × 844 크기를 사용합니다. 모바일 디자인의 필수 규격이 아니라 연습을 위한 예시이므로, 실제 프로젝트에 필요한 화면 크기에서도 다시 확인하세요.

프레임 안에는 체험 정보를 읽는 순서대로 배치합니다. 사진, 제목, 이용 정보, 일정, 후기, 예약 정보 순서입니다. 콘텐츠가 화면에 보이는 영역 아래로 이어지도록 하세요. 페이지 길이를 판단할 수 있을 만큼 실제에 가까운 문구를 넣는 것이 중요합니다. 제목과 임시 사각형 세 개만으로는 일정을 편하게 읽을 수 있는지 알기 어렵습니다.

화면 역할을 하는 프레임의 높이는 처음 정한 크기로 유지합니다. 모든 섹션이 보일 때까지 프레임을 늘리면 콘텐츠가 넘치는 화면이 아니라 긴 캔버스가 됩니다. 미리보기에서 스크롤되는 대신 페이지 전체가 축소돼 글자가 작게 보일 수도 있습니다.

눈에 보이는 위치뿐 아니라 레이어 구조도 확인하세요. 일정과 후기는 스크롤할 컨테이너 안에 속해야 합니다. 캔버스에서 그 아래에 놓여 있는 것만으로는 충분하지 않습니다. 레이어가 프레임에 맞춰 정렬돼 보여도 실제로는 하위 레이어가 아닐 수 있습니다.

올바른 프레임에 스크롤 방향을 설정하세요

화면 역할을 하는 프레임을 선택한 뒤 Prototype 탭의 넘침 동작 설정에서 세로 스크롤을 지정합니다. Pixso의 공식 프레임 문서(영문)는 가로, 세로, 양방향, 스크롤 없음에 해당하는 동작을 구분합니다. 이 체험 예약 페이지에서는 세로 스크롤부터 설정하는 것이 적절합니다.

더 자유로워 보인다는 이유로 양방향 스크롤을 켜지는 마세요. 모바일 페이지가 옆으로 밀린다면 레이어가 잘못 놓였거나 텍스트 블록이 예상보다 넓다는 신호일 수 있습니다. 가로 이동을 의도한 동작으로 받아들이기 전에 콘텐츠의 오른쪽 경계를 살펴보세요.

선택한 흐름을 미리보기로 열고 페이지를 스크롤합니다. 첫 화면에 필요한 정보가 적절히 보이는지, 일정이 순서대로 나타나는지, 마지막 예약 정보까지 도달할 수 있는지 확인하세요. 페이지가 중간에서 멈춘다면 곧바로 다른 프레임으로 이동하는 링크를 추가하기보다 컨테이너의 경계와 마지막 섹션의 위치부터 점검합니다.

고정할 가치가 있는 헤더만 화면에 남기세요

예약 페이지에서는 간결한 헤더에 뒤로 가기와 체험 제목을 넣어 내용을 읽는 동안에도 이용할 수 있게 할 수 있습니다. 스크롤 프레임 안의 헤더를 선택하고 스크롤 중 위치가 고정되도록 설정하세요. 본문은 스크롤 영역에 남겨 둡니다. 큰 상위 그룹을 고정하면 실수로 페이지 전체가 움직이지 않게 될 수 있습니다.

고정 헤더에는 적절한 배경을 넣어 움직이는 콘텐츠와 글자가 겹쳐 보이지 않게 하세요. 레이어 순서도 명확히 정합니다. 일정은 헤더 뒤로 지나가야 하며 헤더의 컨트롤 위에 나타나서는 안 됩니다. 첫 제목이 처음부터 헤더 아래에 가려지지 않도록 페이지 시작 부분에 공간을 확보하세요.

하단의 ‘날짜 선택’ 고정 바에도 같은 원칙이 적용됩니다. 다음 행동을 언제든 실행할 수 있지만, 내용을 읽을 수 있는 영역은 줄어듭니다. 헤더만 고정한 경우와 위아래를 모두 고정한 경우를 비교하세요. 가운데 콘텐츠 영역이 좁은 틈처럼 남는다면 고정 영역 하나를 없애거나 간소화하는 편이 좋습니다.

마지막 콘텐츠 뒤에는 하단 작업 바 위로 충분히 스크롤해 올릴 수 있는 여백을 둡니다. 마지막 후기와 예약 정보까지 읽을 수 있어야 합니다. 페이지의 끝이 작업 바 뒤에 가려진 채 멈추는 문제는 캔버스에서 전체 화면만 보면 놓치기 쉽습니다.

고정 배치와 스티키 배치는 동작이 다릅니다

고정 헤더는 스크롤하는 내내 화면의 같은 위치에 머뭅니다. 반면 스티키 방식의 섹션 제목은 보통 문서와 함께 이동하다가 지정된 경계에 도달하면 컨테이너 범위 안에서 그 경계에 붙어 있습니다. 한 장의 화면에서는 비슷해 보여도 이동 과정은 다릅니다.

웹 구현에서는 MDN의 position 참고 문서(영문)에서 fixed와 sticky의 차이, 포함 요소와 스크롤 요소의 역할을 확인할 수 있습니다. 개발자에게 전달할 때 화면에 계속 남는 모든 컨트롤을 ‘스티키’라고 적기보다 의도한 동작을 정확히 설명하세요.

이 예제는 고정 헤더를 사용합니다. 페이지 중간부터 화면에 붙는 섹션 제목이 필요하다면 어느 지점에서 전환되는지 보여 주고, 이를 어떻게 표현하고 구현할지 확인해야 합니다. 프로토타입에서 요소를 고정했다고 해서 CSS의 sticky 동작까지 검증된 것은 아닙니다.

별도의 탐색 작업이 있을 때만 중첩 스크롤을 사용하세요

세로로 읽는 체험 페이지 안에 가로 사진 갤러리를 넣는 것은 자연스러울 수 있습니다. 가로 이동은 사진을 살펴보는 작업이고, 세로 이동은 체험 정보를 계속 읽는 작업이기 때문입니다. 갤러리의 경계를 드러내고 다음 사진의 일부를 보여 줘 더 많은 사진이 있다는 단서를 제공하세요.

세로 스크롤 영역을 하나 더 넣으면 상황이 복잡해집니다. 후기를 높이가 낮은 상자 안에 넣으면 같은 제스처가 시작 위치에 따라 후기 또는 페이지를 움직일 수 있습니다. 후기를 독립적으로 탐색해야 할 이유가 없다면 페이지의 흐름에 따라 이어지게 하세요.

독립 스크롤이 꼭 필요하다면 컨테이너 사이의 이동을 확인해야 합니다. 내부 영역 끝에 도달하면 어떻게 되는지, 키보드로 그 영역에 들어갔다가 나올 수 있는지, 어느 영역이 움직였는지 알아볼 수 있는지 살펴보세요. 의도한 결과를 기록하고 실제 구현 화면에서 검증해야 합니다. 스크롤바를 그리는 것만으로 중첩 스크롤 문제가 해결되지는 않습니다.

프로토타입이 예상대로 스크롤되지 않을 때

눈에 보이는 증상부터 살펴 문제의 범위를 좁히세요. 여러 설정을 한 번에 바꾸면 무엇으로 해결됐는지 파악하기 어렵습니다.

화면에서 보이는 증상	먼저 확인할 항목
미리보기에서 페이지 전체가 작게 축소됨	전체 페이지가 들어가도록 프레임을 늘렸는지 확인합니다. 의도한 화면 크기로 되돌리고 긴 콘텐츠는 그 안의 하위 요소로 유지하세요.
페이지가 움직이지 않음	콘텐츠가 선택한 프레임의 경계를 넘어가는지, 다른 컨테이너가 아니라 해당 프레임에 스크롤을 설정했는지 확인하세요.
헤더가 본문과 함께 움직임	고정 설정이 적용된 레이어와 헤더가 속한 스크롤 프레임이 올바른지 확인하세요.
예상과 달리 페이지가 옆으로 움직임	경계 밖 레이어와 스크롤 방향을 살펴보세요. 넓은 요소가 있다고 해서 반드시 의도한 가로 탐색 영역인 것은 아닙니다.
마지막 콘텐츠가 작업 바 아래로 가려짐	하단 여백을 확보하고 실제로 끝까지 스크롤해 확인하세요. 캔버스에 놓인 프레임만 보고 판단하지 마세요.

편집 중인 프레임에서 미리보기가 시작하는지도 확인하세요. 다른 흐름에 있는 복제 화면을 보고 있으면 올바르게 수정해도 바뀌지 않은 것처럼 느껴질 수 있습니다. 검토자가 같은 버전을 열 수 있도록 체험 화면과 미리보기 시작점을 구분하기 쉽게 이름 붙이세요.

실제로 정보를 찾는 과제로 스크롤을 검토하세요

검토자에게 체험의 집합 장소를 찾고, 후기를 읽고, 날짜를 고르도록 요청하세요. 각 섹션이 어디 있는지 미리 알려 주지는 않습니다. 헤더가 현재 위치를 이해하는 데 도움이 되는지, 마지막 행동을 알아차리는지, 결정에 필요한 정보가 고정 요소에 가려지지 않는지 관찰하세요.

체험 제목과 후기 문구를 더 길게 바꿔 다시 확인합니다. 기본 글자 크기에서 적절했던 고정 영역도 다른 언어로 바꾸거나 글자를 확대하면 훨씬 높아질 수 있습니다. 모바일 프레임을 단순 확대·축소하기보다 폭이 좁은 화면과 넓은 화면을 비교하세요.

구현 검토에는 키보드 동작도 포함합니다. WCAG의 포커스가 가려지지 않아야 한다는 기준(영문)은 작성자가 만든 콘텐츠 때문에 포커스를 받은 컨트롤이 완전히 숨겨지는 상황을 다룹니다. 고정 헤더나 예약 바 때문에 사용자가 Tab 키로 이동한 동작을 볼 수 없게 해서는 안 됩니다.

최종 프로토타입에는 무엇이 스크롤되고 무엇이 고정되는지, 콘텐츠가 어디에서 끝나는지, 날짜 선택 후 돌아왔을 때 페이지가 어떻게 동작하는지를 짧게 적어 함께 전달하세요. 개발자에게 필요한 것은 긴 프레임의 높이뿐 아니라 이런 동작 결정입니다.

Pixso에서 스크롤 프로토타입을 만들고 첫 화면부터 마지막 주요 행동까지 흐름을 확인해 보세요.