피그마를 통해 알아보는 스크롤뷰의 진실
모바일과 웹에서의 스크롤
피그마로 직접 그린 이미지우리가 디자인한 화면들은 개발이라는 과정을 통해 만들어 진다.
실제 유저가 사용하는 환경에 따라 화면의 비율이 달라진다.
일반적으로 화면 넓이기준 4가지 형태로 나누어 진다.
desktop : 넓이 (991px 이상)
pad : 넓이 (991px ~ 768px)
mobile-landscape : 넓이 (767px ~ 480px)
mobile-portrait : 넓이(480px 이하)
유저가 사용하는 디바이스에 따라 고유한 넓이와 높이가 존재한다.
제한된 화면 사이즈로 필요한 정보를 찾기 위해 유저는 화면을 상하, 좌우로 스크롤 하게된다.
피그마로 직접 그린 이미지우선 알아두어야 할 사항은 디바이스에 따른 사용환경이다.
데스크탑과 모바일만 비교해보면 각각 화면 비율이 가로 기준, 세로 기준으로 태생부터가 다르다.
이때문에 제품 목록을 유저가 사용하는 디바이스에 따라 세로 스크롤, 가로 스크롤 형태로 각각 다르게 선택하여 디자인을 하게 된다.
피그마 프로토타이핑 기능은 이부분을 실제 디바이스 사이즈로 시뮬레이션 할수 있게 지원하고 있다.
프로토 타입 우측의 오버프로우 설정을 통해 우리가 디자인한 프레임에 대해서 각각 가로 스크롤, 세로 스크롤등 적용할 수 있다.
피그마로 직접 그린 이미지첫번째로 모바일 디바이스에서 스크롤을 적용하는 방법을 살펴보자.
우측 이미지처럼 스크롤뷰를 우선하여 만들고 그안에 여러 컨텐츠를 삽입하여 구성하는것을 볼수 있다.
삽입된 컨텐츠는 스크롤을 통해 다음 컨텐츠가 있는 화면으로 이동을 할수 있다.
다음으로 데스크탑 디바이스에서 스크롤을 적용하는 방법을 살펴보자.
모바일과는 달리 <body>라는 태그안에 스크롤을 위한 별도의 뷰를 생성하지 않지 않고 여러 컨텐츠를 삽입한다.
스크롤을 통해 화면에 보이지 않는 화면으로 이동을 할수 있다.
두가지의 차이점이라면 웹기반에서는 그저 바디안에 컨텐츠를 삽인하면 된다는 점이고,
모바일의 경우는 스크롤뷰안에 컨텐츠를 삽입 한다는 점이다.
가로스크롤을 구성할때 이와는 다른 차이점이 생기게 된다.
우선 모바일의 경우는 피그마 오토레이아웃처럼 세로 방향을, 가로방향으로만 설정해 주면 된다.
웹의 경우는 모바일과 다르게 만들어야 한다.
피그마로 직접 그린 이미지우선 스크롤뷰에 해당하는 태그(ex: <div>)에 오버플로 설정값을 오토로 설정하고 스크롤뷰의 높이와 넓이를 설정한후 방향을 horizontal로 설정한다.
삽입하고자 하는 컨텐츠 태그에 사이즈 조절을 위한 설정값(flex: 0 0 auto)을 적용한다.
( 사이즈 조정 설정값이 없으면 스크롤뷰안에 모든 컨텐츠가 들어오게 된다. )
이를 통해 알수 있는점은 기본적으로 <body>는 세로 방향 스크롤에 대해 디폴트값을 가지고 있지만,
가로 방향 스크롤을 만들고자 할때에는 위에 설명한 설정값들을 적용해 주어야 한다.
마지막으로 모바일과 웹의 스크롤에 대한 차이점을 요약하면,
