잼킷으로 미니앱 만들기

잼킷으로 그림책 미니앱 만들기

 

 

 

 


 

 

잼킷으로 페이지를 넘기면서 이미지를 볼 수 있는 그림책 앱을 만들어 보겠습니다.

 

이번 수업을 통해서 단권으로 된 그림책 앱을 만들게 됩니다. 이 수업을 바탕으로 나중에는 매거진과 같은 형태의 앱도 만들 수 있습니다. 

 

수업을 최대한 자세히 만드는 방향과 최대한 쉽게 앱을 직접 만드는 방향에서 고민을 많이 했어요. 그리고 누구나 자신의 이미지만 교체하면 바로 그림책 앱을 만들 수 있게 최대한 쉽게 앱을 직접 만드는 수업으로 결정했습니다.

 

수업에 필요한 샘플 이미지와 로컬 데이터를 담고 있는 엑셀 파일은 공개 구글 드라이브에 공유했습니다. 아래 링크에서 다운받으실 수 있습니다.

 

 

- 잼킷으로 그림책 만들기 자료 다운로드 링크

https://drive.google.com/drive/folders/1KvIlB3BQq1KadAaCO38d7BZJw0OXawQ2?usp=sharing

 


 

 

1. 터미널 창에 jamkit create BookSample 을 입력하고 새로운 잼킷 앱을 만듭니다.

 

2. 비주얼 스튜디오 코드에서 Open Folder를 클릭하고 만들어진 BookSample 폴더를 선택합니다.

 

3. New File 을 클릭해서 catalog_book.sbml 파일과 catalog_book.sbss 파일을 만듭니다.

 

4. catalog_home.sbml 에서 기존에 입력된 Hello, World! 텍스트를 삭제합니다.

 

5. catalog_book.sbml 에서 showcase 라는 object를 생성합니다. showcase는 상품을 진열해서 보여줄 수 있는 형태의 화면을 만들어줍니다. 

 

=begin catalog

=object showcase: name="book",  style=showcase_main

 

=end catalog

 

 

 

6. catalog_book.sbss 파일에서 아래와 같이 showcase의 스타일을 입력합니다.

 

import themes.sbss

 

#showcase_main: position=abs, gravity=center, width=1pw, height=1ph, \ column-count=0, row-count=1, cell-size="1pw 1ph", page-enabled=yes


7. 구글 드라이브에서 잼킷으로 그림책 만들기 자료들을 다운로드 받습니다.

8. 다운로드 받은 이미지들을 Images 에 추가합니다.

 

9. showcase_book_cell.sbml 파일과 showcase_book_cell.sbss 파일을 만듭니다.

 

10. showcase_book_cell.sbml 파일에 object image 를 만들고, 아래와 같이 입력합니다.

 

 

=begin cell

 

=object image: filename="${image}", style=img_page

 

=end cell

 


11. showcase_book_cell.sbss 파일에 img_page 스타일을 아래와 같이 입력합니다.

import themes.sbss

 

#img_page: scale-mode=fit, content-gravity=center, position=abs,\ width=1pw

 

12. 이전에 다운로드 받은 book.xlsx 파일이 저장된 위치 주소를 확인하고 jamkit generate 를 실행하고, jamkit run 을 실행합니다.

 

PS C:\Users\Owner\booksample> jamkit generate c:\Users\Owner\Desktop\jamkit\book.xlsx

PS C:\Users\Owner\booksample> jamkit run

 

 

 

댓글

댓글 본문
버전 관리
Sansol Park
현재 버전
선택 버전
graphittie 자세히 보기