잼킷으로 페이지를 넘기면서 이미지를 볼 수 있는 그림책 앱을 만들어 보겠습니다.
이번 수업을 통해서 단권으로 된 그림책 앱을 만들게 됩니다. 이 수업을 바탕으로 나중에는 매거진과 같은 형태의 앱도 만들 수 있습니다.
수업을 최대한 자세히 만드는 방향과 최대한 쉽게 앱을 직접 만드는 방향에서 고민을 많이 했어요. 그리고 누구나 자신의 이미지만 교체하면 바로 그림책 앱을 만들 수 있게 최대한 쉽게 앱을 직접 만드는 수업으로 결정했습니다.
수업에 필요한 샘플 이미지와 로컬 데이터를 담고 있는 엑셀 파일은 공개 구글 드라이브에 공유했습니다. 아래 링크에서 다운받으실 수 있습니다.
- 잼킷으로 그림책 만들기 자료 다운로드 링크
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는 상품을 진열해서 보여줄 수 있는 형태의 화면을 만들어줍니다.
=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
