아래부터 시작하는 스크롤 뷰 프로토타입하기
ProtoPie, ProtoPie 팁, 프로토타이핑
Free Your Ideas, ProtoPie
대부분의 메시지 앱들은 세로 스크롤 화면을 사용하고 있습니다. 스크롤은 유저가 대화의 최신 메시지를 쉽게 확인할 수 있도록 하는 것이 목적인데요. 아래쪽에서부터 위로 스크롤 하게 되면 가장 최신 메시지에서 시작해 이전 메시지까지 모두 볼 수 있죠.
ProtoPie에서는 scroll container를 사용해 스크롤 효과를 쉽게 제작할 수 있습니다.
무엇을 배우게 될까요?
아래 두 가지를 배우고 나면, 위와 같이 만들 수 있을 거예요.
1. 스크롤 가능한 화면을 만들기 위한 scroll container 만들기
2. 스크롤 화면의 초기 상태 설정하기
프로토타입 시작하기
완성된 프로토타입 확인하기
단계별 설명
1. 스크롤 가능한 화면을 위해 scroll container 만들기
① Header와 List 그룹 사이 Scroll Container를 추가하세요. Scroll Container는 레이어의 속성을 위아래로 동시에 움직이는 것을 통해 스크롤 효과가 나타나게 합니다. List 레이어가 스크롤 효과를 갖도록 Header와 List 사이에 scroll container를 두면 다른 그룹 레이어들을 순서대로 유지하면서 쉽게 드래그할 수 있습니다.
② align-to-top 버튼을 클릭하고, 폭(width)과 높이(height)를 모두 100%로 설정합니다. 전체 캔버스를 채울 수 있도록 scroll container의 크기를 조정하는 것입니다.
③ 정확한 연습을 위해 scroll container의 이름을 Scroll로 변경하세요.
④ scroll container 안으로 List 그룹을 드래그하세요. 스크롤 효과가 필요한 요소들만 scroll container 안에 들어가야 합니다. List 그룹을 scroll container 안으로 드래그하면, ProtoPie가 그 요소들을 위아래로 동시에 움직이게 할 것입니다. 이제 미리보기에서 List 레이어를 위아래로 스크롤 할 수 있습니다.
2. 스크롤 화면의 초기 상태 설정하기
미리보기에서는 스크롤 화면이 맨 위에서부터 시작되지만, 가장 최신 메시지를 볼 수 있는 아래에서부터 스크롤이 시작되게 만들어보겠습니다. Scroll container가 선택된 상태에서 scroll container의 속성 패널로 가 scroll 값을 250으로 설정하세요.
스크롤 속성 값은 scroll container 내부의 콘텐츠 위치를 설정합니다. 스크롤 속성 값을 늘리면 콘텐츠가 위로 이동하죠. 250의 속성 값을 가진다면 아래에 있는 가장 최신 메시지와 함께 올라갑니다.
팁
List container의 높이를 조절하면 원하는 위치에 list 요소들을 둘 수 있습니다. 알아차리셨겠지만, list가 위로 스크롤 되면, Add a comment 입력란 뒤에 마지막 메시지를 숨기는 위치를 재설정합니다. 이는 List가 캔버스의 스크롤 화면에 딱 맞도록 충분히 짧기 때문입니다. list container를 늘리는 것은 list의 끝에 여백을 더해 재설정 시 list를 올바른 위치에 고정할 것입니다.
이 방법을 사용할 때, container의 크기를 조정하면서 안쪽의 요소들이 왜곡되지 않도록 List의 constraints가 설정되어 있는지 확인하세요.
완성
오늘은 scroll container를 만들고 스크롤 화면을 초기 설정하는 방법에 대해 배웠습니다. 이 예제에서는 밑에서부터 스크롤하도록 설정하였지만, 어떻게 디자인하느냐에 따라 맨 위 또는 중간에서부터 스크롤 하게 만들 수도 있습니다. 이것은 ProtoPie의 툴키트를 여러 번 접해야 한다는 점에서 훌륭한 기술이 될 것입니다.
▼ 더 많은 ProtoPie 팁
