데이터 기반 모바일 앱을 위한 스크롤 테이블

모바일 기기 사용자는 항상 가장 편리한 방식으로 최대한 많은 정보를 원하지만, 작은 화면 크기는 불가피하게 일부 기능을 포기해야 하는 상황을 초래할 수 있습니다. 모바일 앱 개발자들은 데이터를 표시하고, 탐색 기능을 제공하며, 유용한 정보를 모두 보기 좋게 구성해야 하는 어려움에 직면합니다. 그렇지 않으면 고객, 동료, 또는 최고 경영진과 같은 최종 사용자들이 불편을 느낄 수 있습니다. MobileTogether 2.1은 스크롤 가능한 테이블을 비롯한 다양한 기능을 제공합니다 새롭고 유용한 기능들 개발자들이 데이터를 보기 좋게 표현하고, 모든 기기에서 동일하게 작동하는 앱을 만들 수 있도록 지원합니다.

스크롤 가능한 테이블

MobileTogether 2.1은 개발자가 수평 또는 수직으로 스크롤할 수 있는 테이블을 정의할 수 있도록 합니다. 이때, 헤더와 푸터는 고정된 위치에 유지됩니다. 수평 스크롤 기능을 통해 개발자는 넓은 테이블의 더 많은 열을 표시할 수 있으며, 텍스트 크기를 줄여 가독성을 해치지 않습니다. 또한, 수직 스크롤 기능을 사용하면 중요한 정보가 항상 화면에 표시되도록 하여 가독성을 향상시킬 수 있습니다.

세로 스크롤 기능은 특히 반복되는 행을 가진 테이블에서 유용합니다. 왜냐하면 개발자는 디자인 단계에서 어떤 사용자의 화면에 최종적으로 몇 줄의 데이터가 표시될지 알 수 없기 때문입니다. 아래는 MobileTogether 디자이너에서 생성된 간단한 4개의 열을 가진 테이블로, 반복되는 행을 포함하고 있습니다

새 테이블 대화 상자에서 열의 개수, 동적 행, 그리고 머리글 및 바닥글 행을 정의한 후, 머리글 열에 레이블을 추가하고, 바닥글에 컨트롤을 추가했으며, 텍스트 크기와 색상에 대한 속성을 지정했습니다.

스타일 및 속성 도구 창에서 테이블의 최대 높이를 설정하면 수직 스크롤 기능을 구현할 수 있습니다. 이때, 전체 테이블이 스크롤되는지, 아니면 헤더와 푸터 사이에 있는 내부 행만 스크롤되는지를 선택할 수 있습니다. 최대 높이는 백분율, 특정 픽셀 수로 지정하거나, 화면의 나머지 부분을 자동으로 채우도록 설정할 수도 있습니다.

데이터를 표시할 때 화면의 활용도를 극대화하고자 하는 개발자를 위해, MobileTogether 2.1은 페이지 제목 표시줄을 숨길 수 있는 새로운 "페이지" 속성을 제공합니다

저희 테이블 하단의 연한 파란색 선에는 사용자가 다른 월이나 연을 선택할 수 있는 탐색 기능이 포함되어 있습니다. 하단 중앙의 "년도" 열은 MobileTogether 툴바의 "조인" 버튼을 사용하여 2번과 3번 열을 결합하여 더 넓은 컨트롤을 만들었습니다. 열을 가로 또는 세로로 결합할 수 있으며, 나중에 마음이 바뀌면 다시 분리할 수도 있습니다. 또한, 기존 셀 안에 완전히 새로운 테이블을 삽입하여 계층적인 테이블을 만들고, 복잡한 데이터를 위한 완벽한 레이아웃을 디자인할 수 있습니다.

수직선

MobileTogether 2.1에서는 새로운 수직 선 제어 기능이 추가되었습니다. 어떤 테이블의 열 사이에 수직선을 추가하려면, 컨트롤 도우미 창에서 수직선을 선택하여 원하는 위치로 드래그하면 됩니다. (아래 디자이너 화면에서와 같이) 수직선은 새로운 테이블 열에 추가되며, 열의 너비 속성을 "wrap_content"로 설정하면 최소한의 공간만 차지하도록 할 수 있습니다.

수직선 또한 수평선과 마찬가지로 다양한 속성을 조정할 수 있습니다. 각 수직선에 대한 "스타일 및 속성" 창을 통해 선의 두께, 스타일, 색상, 그리고 왼쪽 및 오른쪽 여백을 픽셀 단위로 설정할 수 있습니다.

MobileTogether를 사용하면 각 컴포넌트의 표시 여부를 화면 방향에 따라 설정할 수 있습니다. 위에 표시된 6개의 열로 구성된 표는 가로 모드에서만 표시되는 대체 버전이며, 왼쪽의 가로 모드 아이콘에서 확인할 수 있습니다. 원래 4개의 열로 구성된 표는 세로 모드에서만 표시되도록 설정할 수 있습니다.

아래 스크린샷은 가로 방향으로 잡힌 안드로이드 폰에서 실행되는 최종 배포된 스크롤 테이블 앱의 모습입니다. 사용자는 테이블 내에서 위아래로 스와이프하여 데이터 행을 스크롤할 수 있으며, 다른 요소들은 그대로 유지됩니다. 하단에 있는 "-" 및 "+" 컨트롤은 이전 또는 다음 달을 선택하기 위한 탐색 도구입니다.

화면 크기가 다른 장치에서는 데이터 행의 개수가 더 많거나 적을 수 있지만, 테이블은 여전히 우리가 백분율로 정의한 최대 높이를 채웁니다

MobileTogether Designer는 무료로 사용할 수 있으므로, 사본을 다운로드하세요 오늘 바로 시작하여, 여러분의 크로스 플랫폼 데이터 기반 모바일 앱에 스크롤 가능한 테이블 기능을 추가해 보세요!