소개
스크롤은 정보를 한 페이지에 간결하게 정리하는 데 도움이 되는 일반적인 UI 기법입니다. 이를 통해 사용자의 클릭 수를 줄이고 UI 성능을 높일 수 있습니다. ProtoPie에서는 스크롤 컨테이너를 사용해 스크롤을 쉽게 구현할 수 있습니다. 오늘은 정보를 가로와 세로로 스크롤하는 방법을 다뤄보겠습니다. 또한 이 효과를 매끄럽게 구현하는 팁도 배워보겠습니다.
배울 내용
가로 스크롤 뷰를 만드는 방법
세로 스크롤 뷰를 만드는 방법
UI 일관성을 유지하기 위해 스크롤 뷰에 마진을 추가하는 방법
마지막에는 이런 것까지 만들 수 있게 됩니다!
단계별 안내
1. 가로 스크롤 뷰 만들기
1. Scroll Container를 만들고, 너비를 현재 작업 중인 화면 너비(375, 이 경우)로, 높이를 Story List 레이어의 높이로 설정합니다.
💡 스크롤 컨테이너는 어떻게 작동하나요?
스크롤 컨테이너를 작동시키려면 가로 스크롤에서는 컨테이너의 너비를, 세로 스크롤에서는 컨테이너의 높이를 조정해야 합니다. 이 경우에는 화면 너비 제한 안에서만 콘텐츠를 볼 수 있으므로 컨테이너의 너비를 화면 너비(375)에 맞춥니다. 가로 스크롤을 작동시키려면 콘텐츠가 컨테이너 한계를 넘어 가로로 이어지도록 해야 하며, 그래야 콘텐츠를 컨테이너 안팎으로 가로 스크롤할 수 있습니다.
2. 방금 만든 컨테이너에 Story List 레이어를 드래그합니다. 그리고 이 컨테이너의 이름을 Horizontal Scroll로 변경합니다.
💡 참고:
스크롤 컨테이너는 내부의 콘텐츠를 스크롤할 수 있게 만듭니다.
이름 지정은 특히 프로젝트가 커지고 복잡해질수록 중요합니다
3. Horizontal Scroll의 속성 패널에서 방향을 가로로 변경하세요. 컨테이너 안의 콘텐츠가 가로로 흐르도록 해야 하기 때문입니다(스크롤의 기본 선택 방향은 세로입니다.)
4. 이제 다음과 같아야 합니다(가로 스크롤):
2. 세로 스크롤 뷰 만들기(중첩 스크롤)
1. 화면 전체를 덮는 스크롤 컨테이너를 만듭니다. 그리고 이름을 "Vertical Scroll"로 변경합니다. 이 스크롤 아래의 콘텐츠를 세로로 이동시키는 데 사용할 것입니다.
2. Horizontal Scroll, Card1, Card2, Card3를 Vertical Scroll로 드래그합니다. 세로로 스크롤할 콘텐츠만 포함시키고 싶기 때문입니다.
💡 참고: 헤더와 하단 내비게이션 바는 고정되도록 해야 하므로, 이 요소들이 컨테이너 항목 밖에 배치되어 있는지 확인하세요. 또한 이 요소들은 모든 레이어의 맨 위에 배치되어 있어야 합니다. 이렇게 하면 콘텐츠가 헤더와 내비게이션 바 위로 겹쳐 보이는 것을 방지할 수 있습니다.
3. 이제 다음과 같아야 합니다(세로 스크롤):
3. 두 스크롤 뷰에 마진 추가하기
💡 Scroll Container에 마진을 추가하는 논리는 무엇인가요?
왜 마진을 추가해야 하나요? 더 읽기 쉬운 콘텐츠를 만들고, UI의 접근성과 일관성을 높이기 위해서입니다.
스크롤 컨테이너의 끝에 마진을 추가하려면, 스크롤 컨테이너 내부 콘텐츠의 크기만 조정하면 됩니다(가로 스크롤 컨테이너의 경우 콘텐츠 너비, 세로 스크롤 컨테이너의 경우 콘텐츠 높이). 다시 말해, 스크롤 컨테이너 안의 콘텐츠에 여백/네거티브 스페이스를 추가하는 것입니다. 이를 구현하는 방법은 두 가지가 있습니다:
자식 레이어의 컨테이너 크기 조정 - 이 방법에서는 제약 조건이 올바르게 설정되어 있는지 확인하세요
사각형 추가 - 컨테이너 내 목록의 끝에 사각형을 추가하고 불투명도를 0으로 설정합니다
가로 스크롤에는 첫 번째 방법을, 세로 스크롤에는 두 번째 방법을 사용하겠습니다.
가로 스크롤에 마진 추가하기(자식 레이어의 컨테이너 크기 조정으로)
1. Horizontal Scroll 레이어 안에 있는 Story List 레이어의 너비를 432에서 448로 변경합니다.
💡 왜 값을 432에서 448로 변경하나요?
두 숫자의 차이는 16이며, 이는 스토리 리스트 레이어에서 두 스토리 사이의 간격과도 같습니다. 따라서 원래 컨테이너 레이어 끝에 16을 추가해 간격의 일관성을 유지합니다. 이 숫자는 프로토타입에 따라 달라질 수 있습니다.
2. 이제 다음과 같아야 합니다(마진 16이 적용된 가로 스크롤):
세로 스크롤에 마진 추가하기(보이지 않는 사각형 사용)
1. Vertical Scroll 레이어 안에 사각형을 만들고 이름을 Margin으로 변경합니다. 그런 다음 위치를 Card3 레이어의 아래쪽으로 옮깁니다(사각형이 세로 컨테이너의 끝에 있어야 합니다).
💡 왜 사각형인가요?
사각형을 추가하는 아이디어는 컨테이너 자체의 크기를 조정하지 않고도 끝부분에 공간을 추가하는 것입니다. 단지 사각형은 만들기 쉽기 때문입니다. 원이나 이미지 같은 다른 오브젝트도 사용할 수 있습니다.
2. Margin 오브젝트의 높이를 100과 같은 값으로 설정합니다. 마지막으로, 사각형이 프로토타입에서 보이면 안 되므로 사각형의 불투명도를 0으로 설정합니다.
💡 왜 100인가요?
이 숫자는 프로토타입에 따라 달라질 수 있습니다. 추가하려는 공간에 따라 사각형의 크기를 더 크게 또는 더 작게 조정할 수 있습니다.
3. 이제 다음과 같아야 합니다(원래 컨테이너 크기를 조정하지 않은 세로 스크롤 마진):
축하합니다!
이제 중첩된 스크롤 컨테이너를 만드는 방법과 스크롤 컨테이너에 마진을 설정하는 방법을 배웠습니다. 또한 ProtoPie에서 이 효과를 구현하는 데 유용한 팁과 요령도 익혔습니다. 정말 잘하셨습니다. 이 튜토리얼의 마지막까지 도달하셨네요!
이 배운 내용을 자유롭게 응용해 보세요. 더 흥미로운 인터랙션도 만들 수 있을 것입니다! 여러분의 멋진 실험을 꼭 보고 싶습니다. 직접 프로토타입을 만들어 Twitter 또는 Instagram에 #MadeWithProtoPie.와 함께 공유해 주세요.
