[Thunkable] 썬커블로 코딩없이 만드는 이미지 인식 앱 - 02. 에셋(Assets) 패널 사용하기

지난시간에 이어 이미지 인식 앱 작업을 이어가 볼게요
오늘은 미디어 파일을 업로드하여 앱에 사용할 수 있는 에셋 기능에 대해 알아보겠습니다!

[Thunkable] 코딩없이 만드는 이미지 인식 앱 - 01. 프로젝트 생성, 디자인

[Thunkable] 코딩없이 만드는 이미지 인식 앱 - 01. 프로젝트 생성, 디자인

이전 포스팅에서 배치한 UI 컴포넌트의 Web Preview 화면입니다.
편집화면에서는 알 수 없던 문제가 생겼었죠? 이미지 컴포넌트에 표시할 사진이 없어 컴포넌트 자체가 보이지 않는 문제였습니다.
썬커블의 에셋(Assets) 패널 기능을 이용해 이 문제를 같이 해결해 볼게요.

썬커블의 사이드바

일단 썬커블 왼쪽에 위치한 사이드바를 살펴보도록 할게요. 사이드바의 각 아이콘을 누르면 해당하는 패널이 열립니다.

• 디자이너 패널은 우리에게 익숙한 앱트리와 UI 컴포넌트가 있는 곳이에요.
• 데이터 패널에서는 앱에 필요한 데이터파일을 업로드 하거나 직접 생성할 수 있습니다.
• 에셋 패널에서는 프로젝트에 쓰일 미디어 파일 등을 업로드하고 관리할 수 있습니다.
• 설정 패널에서는 앱 배포시 필요한 정보를 입력하고 설정을 변경할 수 있습니다.
• 도움말 패널은 썬커블의 튜토리얼이나 비디오 강의 등의 정보를 제공합니다.

이중, 오늘 작업에 필요한 에셋(Assets) 패널을 같이 보도록 하겠습니다.

에셋(Assets) 패널

📌 에셋(Assets)은 '자산'이라는 뜻으로, 썬커블에서는 프로젝트에 쓰이는 미디어 파일 등을 말합니다.

에셋 아이콘을 클릭하여 에셋패널을 열어주세요. 

여기에 미디어파일이나 디자인된 피그마^[각주:1] 파일을 올릴 수 있습니다.
Choose a File or Drag it here 부분에 파일을 선택하거나 드래그하여 바로 올릴 수도 있지만, 세부기능을 더 보기위하여 표시한 + 버튼을 눌러 창을 열어볼게요. 

이제 아래 파일을 다운받아 위에 보이는 Choose a File or Drag it here 박스를 이용해 업로드 하겠습니다.

noimg.png

0.01MB

요렇게 올라간게 보이시죠? 오른쪽의 아이콘들을 클릭하여 파일을 미리보거나, 파일명을 변경하거나 삭제할 수 있습니다.

무료 플랜에서는 200MB의 저장소를 이용할 수 있으며, 그 이상을 사용하시려면 상위 플랜으로의 결제가 필요합니다.
그러므로 무료 플랜을 사용하는 우리는 사용하지 않는 파일들은 삭제하고 최대한 용량을 줄여 업로드 해야 겠네요.

👉 Settings의 ACCOUNT STORAGE 섹션에서 내 계정에서 사용하고 있는 저장소 공간을 확인할 수 있습니다.

에셋을 업로드 한 후, 이미지  속성 패널의 Picture 입력창을 선택하니, 업로드한 noimg.png 에셋이 보이네요!
클릭하여 적용해 줍시다. 이제 Web Preview를 다시 볼게요.

이렇게, 비어있던 이미지 컴포넌트 자리에 에셋 noimg.png가 올라가 있는 모습을 볼 수 있습니다! 
다음 포스팅에서 블록코딩 작업 후 이미지 인식 앱 작업을 마무리해 보도록 할게요~

[Thunkable] 썬커블로 코딩없이 만드는 이미지 인식 앱 - 03. 완성!

[Thunkable] 썬커블로 코딩없이 만드는 이미지 인식 앱 - 03. 완성!

읽어주셔서 감사합니다!

1. 포토샵, 스케치, 어도비XD와 같이 UI를 디자인할 수 있는 툴입니다. [본문으로]