No Coding 으로 넷플릭스처럼 이미지 스크롤 UI 만들기

넷플릭스, 디즈니+, 쿠팡플레이 등 OTT 영화앱을 보면 대부분

좌우 스크롤 형태의 이미지 검색 UI 형태로 많이 보실수 있습니다.

​

스마트메이커로 업무규칙(코딩) 한줄 없이 비슷한 형태의 UI 를 만들어 보도록 하겠습니다.

동영상 화면은 스마트메이커로 앱패킹을 통해 안드로이드 상에서 만들어진 결과물 입니다.

디자인 요소등은 셈플을 활용해서 기능을 확장해 보시면 좋을 듯 합니다.

​

일단 간단하게 영화 이미지 정보를 저장할 수 있도록 입력화면을 구성합니다.

실제 이 입력화면은 사용자 앱에서는 사용하지 않겠지만, 관리자 앱에서 영화정보를 입력하는 용도로 사용하게 됩니다.

 

셈플 영화포스터 이미지를 이용해 데이터베이스에 저장할 수 있도록 합니다.

맛집 기본 동영상 강의를 통해 구현하는 방식과 동일 합니다.

 

각각 이미지 파일과 기본 정보인 제목 및 등록일자를 입력하고 저장할 수 있도록 합니다.

 

이렇게 저장된 데이터는 영화정보 라는 테이블 구조를 가지게 되고

 

영화정보 테이블의 사진 필드항목에 영화 포스터 이미지 파일이 저장하게 됩니다.

​

스크롤 묶기를 이용해 이미지 검색이 이루어 저야 하기 때문에 기본키 검색동작을 할수 있도록

등록번호 입력란 (기본검색키 + 자동검색) 을 설정 할 수 있도록 합니다.

 

사진 입력란을 넣고, 사진 클릭시 상세폼이 띄어 질수 있도록 동일한 위치에 상세폼 버튼을 넣을 수 있도록 합니다.

UI 구성을 위해 등록번호 입력란은 화면감춤 처리 하시고,

상세폼 버튼은 투명처리 될수 있도록 배경색 / 테두리 속성을 채움 없음으로 설정 할수 있도록 합니다.

​

하나의 작은 스크롤 영역에 등록번호, 사진, 버튼 3개의 아톰이 겹치기 때문에 속성설정 하기 어려울 경우,

그림처럼 상단의 아톰편집도우미 기능을 통해 속성을 설정하시면 쉽게 편집이 가능합니다.

​

상세폼 버튼 클릭시 현재 선택된 스크롤의 등록번호 값을 상세폼에 전달할 수 있도록

참조아톰명을 등록번호 입력란으로 설정할수 있도록 합니다.

 

좌우 스크롤 처리를 위해 수평스크롤로 설정합니다.

표시행수/전체행수 1, 표시열수:4, 전체열수 : 10 으로 설정하게 합니다. 빈행감춤을 통해 이미지 데이터가 없을 경우 표시하지 않도록 합니다.

 

두번째 스크롤도 동일한 방식으로 설정할 수 있도록 합니다.

​

여기서 주의할 점은 두번째 스크롤의 등록번호1 입력란값이 참조아톰명을 통해 상세폼으로 등록번호 입력란으로 전달되기 때문에, 즉 부모폼과 상세폼의 입력란 아톰명이 다를 경우에는 아래처럼 설정해야 합니다.

부모폼아톰명=상세폼아톰명

 

하나의 영화정보 테이블에서 2개의 스크롤을 만들었기 때문에

스크롤 검색에 해당하는 DB처리객체는 각각 "영화정보_찾아오기", "영화정보_찾아오기1" 가 만들어 지게 됩니다.

 

각각의 DB처리객체에 정렬설정을 통해 하나는 제목순, 다른 하나는 등록일자 순으로 정렬할수 있도록 설정합니다.

​

이렇게 하시면 가각 좌우 수평스크롤 형태로 동작을 하게 되고 사진 클릭시,

해당하는 영화의 상세폼이 띄어지게 됩니다.

 

추가로 전체영화 검색을 위해서 검색화면을 만들어 보겠습니다.

​

전체 항목이 나올수 있도록 바둑판 형태의 스크롤을 만들수 있도록 합니다.

수직스크롤로 설정하고 표시행수 : 4, 표시열수 : 3 으로 설정 합니다.

 

제목을 조건으로 검색동작이 이루어 질수 있도록 조건설정에 제목을 포함하는 문자로 검색될수 있도록 설정합니다.

 

이렇게 설정할 경우 제목 LIKE 구문으로 SQL 동작이 이루어 지게 됩니다.

 

진행관리자를 통해 검색버튼(확인) 을 눌렀을 경우,

스크롤이 다시 검색을 할수 있도록 스크롤의 다시보기를 실행할 수 있도록 합니다.

 

제목에 빈값이기 때문에 전체 검색이 동작하게 되고,

 

제목을 조건으로 검색을 하게 되면 해당 이미지만 검색이 됩니다.