본문 바로가기
앱인벤터/Tips

앱인벤터 Tips ::: 구글 드라이브 이미지 사용하기

by 이지이지(EGEasy) 2021. 12. 18.

앱인벤터에서 구글 드라이브 이미지 사용의 예

 

안녕하세요. 이지이지입니다.

오늘 제 블로그 카테고리를 조금 변경했습니다.

 

기존에 앱인벤터와 관련된 게시글들이 모두 앱인벤터 카테고리 안에 들어있었는데...

이를 좀 세분하여 강좌, Tips, 실전 앱 세 가지로 분류하게 되었습니다.

 

그동안 앱인벤터 글을 작성하면서 좀 난이도 있는 것만 올리지 않았나 생각이 들어...

사소하지만 유용하게 사용할 수 있는 팁에 대해 올리고자 Tips 카테고리를 특별히 추가하게 되었습니다.

 

첫 번째 글로 앱인벤터에서 구글 드라이브의 이미지를 사용하는 방법에 대해 알려드리도록 하겠습니다.

 

 

    왜 구글 드라이브의 이미지를 사용해야 할까?

 

먼저 왜 구글 드라이브의 이미지를 사용해야 하는지 말씀드리자면...

 

앱인벤터는 실제 앱으로 빌드할 경우 용량이 30MB를 초과할 수 없습니다.

그리고 앱인벤터에서 미디어(애셋) 파일로 이미지를 올릴 경우 하나의 미디어 파일은 5MB를 넘을 수 없습니다.

 

이런 경우 구글 드라이브에 이미지를 올려두고 링크를 걸어 가져오는 방법을 사용할 수 있습니다.

 

 

    앱인벤터에서 구글 드라이브의 이미지 적용하기

 

앱인벤터에서 구글 드라이브의 이미지를 사용하기는 매우 쉽습니다.

 

1. 구글 드라이브에 이미지를 올리고, 파일명 위에 마우스 오른쪽 버튼을 눌러 [공유]를 선택합니다.

 

공유 선택

 

2. [링크보기]-[링크가 있는 모든 사용자에게 공개]-[뷰어]로 설정한 다음, 링크를 복사합니다.

 

링크 설정

 

3. 앱인벤터의 디자이너창에서 예로 사용해 볼 이미지 컴포넌트를 하나 추가해둡니다.

 

4. 블록 코딩 창에서 다음과 같이 블록을 구성합니다.

 

블록 코딩

 

→ Screen1이 시작될 때, Image1 컴포넌트의 이미지를 오른쪽 주소로 설정하는 것입니다.

→ 구글 드라이브에서 복사해두었던 링크를 활용하는데 약간의 수정이 필요합니다.

→ 주소는 다음과 같이 구성합니다.

 

드라이브에서 복사한 원본 링크 예:

https://drive.google.com/file/d/19tz7bDsi1EPUnBXIFmB4p9prg4mO7b58/view?usp=sharing 

 

앱인벤터에서 사용해야 할 링크 예:

https://drive.google.com/uc?export=view&id=19tz7bDsi1EPUnBXIFmB4p9prg4mO7b58 

 

→ 원본 링크에서 /d/와 /view?~ 사이의 빨간색 부분만 복사하여 앱인벤터에서 사용할 주소에 붙여 넣습니다. 앱인벤터에서 사용해야 할 주소의 파란색 부분은 수정하면 안됩니다.

 

제가 예로 사용한 이미지 파일은 사자 이미지로 용량이 무려 12.1M나 되지만 아무 문제없이 앱인벤터에서 잘 표시가 됩니다.

 

 

사소하지만 유용하겠죠??? 이제 앱인벤터에서 이미지 크기 때문에 생긴 용량 걱정은 덜어버리세요~~~

댓글