소개
세로 스크롤 뷰는 메시징 앱에서 사용자 간의 대화를 보여줄 때 일반적으로 사용되는 패턴입니다. 스크롤 효과의 목적은 사용자가 대화의 최신 업데이트를 쉽게 확인할 수 있게 하는 것입니다. 아래쪽에서부터 스크롤을 시작하면 가장 최근 업데이트부터 보고, 위로 스크롤하여 이전 메시지들을 모두 확인할 수 있습니다.
ProtoPie에서는 스크롤 컨테이너와 해당 속성을 사용해 이 효과를 쉽게 만들 수 있습니다.
배울 내용
스크롤 가능한 뷰를 만들기 위해 스크롤 컨테이너 만들기
스크롤 뷰의 초기 상태 설정 방법
마지막에는 이런 결과물을 만들 수 있습니다!
단계별 안내
1. 스크롤 가능한 뷰를 만들기 위해 스크롤 컨테이너 만들기
Header와 List 그룹 사이에 Scroll Container를 추가합니다. 스크롤 컨테이너는 레이어의 속성을 동시에 위아래로 움직여 스크롤 효과를 만듭니다. List 레이어에 스크롤 효과를 적용하려면, Header와 List 사이에 스크롤 컨테이너를 배치하면 다른 그룹화된 레이어의 순서를 유지하면서 쉽게 드래그할 수 있습니다.
위쪽 정렬 버튼을 클릭하고 width와 height를 모두 100%로 설정합니다. 그러면 스크롤 컨테이너가 캔버스 전체를 채우도록 크기가 조정됩니다.
정리하기 좋도록 스크롤 컨테이너의 이름을 **스크롤 **로 변경합니다.
4. List 그룹을 scroll container 안으로 드래그합니다. 스크롤 효과가 필요한 요소만 스크롤 컨테이너 안에 배치해야 합니다. List 그룹을 스크롤 컨테이너 안으로 드래그하면 ProtoPie가 해당 요소들을 동시에 위아래로 움직이게 됩니다. 이제 미리보기 모드에서 List 레이어를 위아래로 스크롤할 수 있습니다. 아주 좋은 시작입니다!
2. 스크롤 뷰의 초기 상태 설정
미리보기에서 스크롤 뷰가 맨 위에서 시작하는 것을 볼 수 있지만, 가장 최근 메시지가 있는 맨 아래에서 시작하고 싶습니다. Scroll 컨테이너를 선택한 상태에서 스크롤 컨테이너의 속성 패널로 이동해 scroll 값을 250으로 설정합니다.
scroll 속성 값은 스크롤 컨테이너 안의 콘텐츠 위치를 결정합니다. scroll 속성 값을 높이면 콘텐츠가 위로 이동합니다. 값이 250이면 메시지가 위로 이동하면서 가장 최근 메시지가 아래쪽에 놓입니다.
💡 팁 & 요령
List 컨테이너의 높이를 조정하면 목록 요소를 원하는 위치에 유지할 수 있습니다. 보셨겠지만, 목록이 위로 스크롤되면 레이어가 초기화되면서 마지막 메시지가 Add a comment 입력창 뒤로 숨는 위치가 됩니다. 이는 List가 캔버스의 스크롤 뷰에 들어갈 만큼 짧기 때문입니다. 리스트 컨테이너의 길이를 늘리면 리스트 끝에 여백이 추가되어 초기화될 때도 리스트가 올바른 위치에 유지됩니다.
이 방법을 사용할 때는 컨테이너 크기를 조정해도 내부 요소가 왜곡되지 않도록 List의 constraints를 올바르게 설정해야 합니다.
끝입니다!
스크롤 컨테이너를 만들고 스크롤 뷰의 초기 상태를 설정하는 방법을 배웠습니다. 이 데모에서는 스크롤이 아래쪽에서 시작하도록 설정했지만, 디자인에 따라 위쪽이나 가운데에서 시작하도록 할 수도 있습니다. ProtoPie 툴킷에서 자주 활용하게 될 아주 유용한 기능입니다!
이 사용 사례 튜토리얼이 도움이 되었나요? 교육 콘텐츠를 개선할 수 있도록 이 1분 설문 에 참여해 주세요.
