쇼핑몰 상품 이미지, 부동산 매물 사진, 포트폴리오 갤러리처럼 하나의 대상에 여러 장의 이미지를 연결해 보여주는 UI는 실무에서 자주 쓰이는 패턴입니다. 이번 시리즈에서는 호스팅 폴더에 이미지를 올리고, 컬렉션과 DataSource 커스텀 필터를 활용해 다중 이미지 슬라이드 뷰를 구현하는 방법을 실습을 통해 단계별로 다룹니다. 1편에서는 실습앱의 전체 구조를 이해하고 호스팅 폴더 세팅과 시나리오 템플릿 적용까지 진행합니다.
이번 강의에서 학습할 실습 예시 : 숙소 예약 앱
이번 시리즈에서 완성할 앱은 숙소 예약 앱을 예시로 구성했습니다. 첫 번째 화면에는 숙소 목록이 카드 형태로 나열되고, 각 카드에는 대표 이미지가 한 장씩 표시됩니다. 카드를 클릭하면 상세 화면으로 이동하고 상세 화면에서는 해당 숙소의 이미지가 슬라이드로 여러 장 보입니다. 디럭스룸을 클릭하면 디럭스룸 이미지만, 카라반을 클릭하면 카라반 이미지만 나오는 구조입니다.
전체 구조 세 가지 핵심 개념
본격적으로 실습을 시작하기 전에 앱이 어떤 원리로 동작하는지 먼저 이해해두는 것이 중요합니다.
① 호스팅 폴더 이미지 파일 업로드
각 워크스페이스의 호스팅 폴더에 이미지 파일을 업로드하면 폴더 경로를 기반으로 URL이 자동 생성됩니다. 이 URL이 이미지의 고유 주소가 됩니다. 호스팅 폴더는 워크스페이스별로 제공되는 파일 저장 공간으로, 업로드된 파일에 고유 URL이 부여됩니다.
② 컬렉션 적재 URL + type 키
업로드한 이미지 URL들을 컬렉션 카테고리에 데이터로 등록합니다. 이때 URL만 넣는 것이 아니라, 나중에 필터링할 때 사용할 type 키도 함께 넣는 것이 핵심입니다.
③ DataSource 필터 선택 숙소 매칭 & ImageBox 다중 이미지 슬라이드
사용자가 숙소를 선택하면 DataSource가 컬렉션에서 해당 숙소 이미지만 필터링하여 ImageBox 컨트롤에 전달합니다.
%20%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%94/%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%94_%EC%9E%90%EB%A3%8C1.jpg?width=800&height=450&name=%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%94_%EC%9E%90%EB%A3%8C1.jpg)
1단계 : 호스팅 폴더 세팅 방법
- 워크스페이스 콘솔 → 데이터 → 호스팅 메뉴로 이동
- 최상위 폴더를 선택한 뒤 New Folder 버튼으로 edu_images/rooms/ 폴더 생성
- rooms/ 하위에 숙소 타입명으로 폴더 4개 생성 (디럭스룸, 싱글룸, 카라반, 펜션동)
%20%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%94/%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%941_1.jpg?width=800&height=450&name=%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%941_1.jpg)
폴더명을 나중에 사용할 roomType 값과 똑같이 맞추는 것이 관리에 훨씬 편리합니다. ‘디럭스룸’이라는 이름 하나로 폴더 - 데이터 - 필터 키가 전부 일치하게 되어 키 불일치로 인한 오류를 원천 방지할 수 있습니다.
폴더 구조를 완성한 뒤, 제공된 샘플 이미지를 각 폴더에 업로드합니다. 업로드가 끝나면 각 파일의 URL이 자동으로 생성됩니다. URL 패턴은 https://ws.flextudio.com/.../rooms/디럭스룸/디럭스룸_1.avif처럼 폴더 경로 그대로 만들어집니다. 브라우저 주소창에 URL을 붙여넣어 이미지가 정상적으로 열리는지 테스트해보시면 좋습니다.
%20%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%94/%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%941_2.jpg?width=800&height=450&name=%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%941_2.jpg)
2단계 : 시나리오 템플릿 적용 방법
실습 앱 내에 새 시나리오를 하나 생성합니다. 이어서 좌측 상단 툴바의 템플릿 버튼을 눌러 레이아웃 템플릿에서 ‘숙소’를 검색한 뒤, Step1과 Step2 모두에 템플릿을 적용합니다.
%20%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%94/%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%941_3.jpg?width=800&height=450&name=%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%941_3.jpg)
템플릿을 적용하면 UI는 이미 모두 완성된 상태입니다. Step1의 숙소 목록 카드, Step2의 이미지박스와 상세 정보, 하단 예약하기 버튼까지 전부 포함되어 있습니다. 컨트롤에는 이미 컬렉션키가 설정되어 있으며, 그룹의 데이터 연결만 아직 비어있는 상태입니다.
%20%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%94/%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%94_%EC%9E%90%EB%A3%8C2.png?width=600&height=292&name=%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%94_%EC%9E%90%EB%A3%8C2.png)
따라서 우리가 직접 해야 할 작업은 크게 세 가지입니다.
① 그룹 데이터 연결 설정
② 컬렉션 데이터 세팅을 포함한 이벤트 작성
③ DataSource 생성
%20%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%94/%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%94_%EC%9E%90%EB%A3%8C3.jpg?width=800&height=450&name=%ED%98%B8%EC%8A%A4%ED%8C%85%ED%8F%B4%EB%8D%94_%EC%9E%90%EB%A3%8C3.jpg)
3단계 : 그룹 데이터 연결 설정
이번 실습에서 가장 먼저 해야 할 설정입니다. 템플릿의 카테고리를 각 그룹에 연결해서 데이터가 흘러갈 통로를 열어주는 작업입니다. 설정해야 할 그룹은 총 3곳입니다.
① Step1 반복 그룹 (roomCard → roomListWrap)
탐색기에서 Step1의 roomCard 그룹을 선택하고 속성 패널에서 아래와 같이 설정합니다.
이 설정이 들어가야 roomList에 적재한 섹터 개수만큼 roomCard가 자동 복제됩니다.
| 속성 | 값 |
|---|---|
| 데이터 연결 사용 | 체크 |
| 카테고리명 | roomList |
| 데이터용도 | 조회 |
② Step2 상세 스크롤 그룹 (detailScrollWrap)
Step2의 detailScrollWrap 그룹을 선택하고 아래와 같이 설정합니다.
데이터용도 기본(default)는 반복 없이 활성 섹터 1건만 내부 컨트롤에 공급하는 모드입니다. 2편에서 다룰 .activate()가 바로 이 설정과 짝을 이루게 됩니다.
| 속성 | 값 |
|---|---|
| 데이터 연결 사용 | 체크 |
| 카테고리명 | roomDetail |
| 데이터용도 | 기본 |
③ Step2 편의시설 그룹 (amenityListWrap)
Step2의 amenityListWrap 그룹을 선택하고 아래와 같이 설정합니다. 여기까지 설정하면 데이터가 화면으로 흘러갈 통로가 전부 완성됩니다.
아직 데이터 자체는 없어서 화면은 빈 상태로 보이는데, 2편에서 이벤트로 데이터를 채워주면 비로소 화면이 완성됩니다.
| 속성 | 값 |
|---|---|
| 데이터 연결 사용 | 체크 |
| 카테고리명 | amenityList |
| 데이터용도 | 조회 |
다음 강의 : 컬렉션에 데이터 적재하기
1편에서는 전체 구조를 파악하고 호스팅 폴더 세팅과 시나리오 템플릿 적용, 그룹 데이터 연결 설정까지 완료했습니다.
다음 편에서는 Step1의 Init 이벤트와 카드 클릭 이벤트를 작성해서 컬렉션에 실제 데이터를 채워 넣는 과정을 다루겠습니다.