[Day 6] 이미지 사용하기

30일간의 Framer.js 스터디

프레이머에서는 대부분의 웹용 이미지 포맷을 지원하고 SVG포맷을 사용한 애니메이션이나 여러 재미있는 연출도 가능합니다. 

이미지 불러오는 방법

프레이머에서 이미지를 불러오는 방법은 몇 가지가 있습니다. 어떤 방법으로 만들어도 기본적으로 이미지는 레이어에 담아서 보여주게 됩니다. 

(1) 이미지 파일을 프레이머로 드래그 앤 드롭하기

<그림. 드래그 앤 드롭으로 이미지를 가져오기>

파인더에 있는 이미지 파일을 직관적으로 이미지 파일을 프레이머로 드래그 앤 드롭하면 이미지를 가져올 수 있습니다. 이미지를 가져오게 되면 새로운 레이어가 이미지 파일명과 동일한 레이어 이름으로 생성되는 걸 볼 수 있습니다. 그리고 소스코드의 image: "이미지 경로/이미지 파일명" 이 구문이 레이어에 이미지를 추가하는 부분입니다. 이미지 파일의 경로는 생성한 프로젝트 폴더 하위에 있는 images 폴더가 됩니다. 

또한 이미지 파일이 웹상에 존재한다면 모든 경로를 적어주면 적용이 됩니다. 예를 들어 "http://www.내사이트.com/images/ IMG_0151_2.jpg" 파일이라면 이 경로를 프레이머에도 동일하게 image:"http://www.내사이트.com/images/IMG_0151_2.jpg"라고 모두 적어줍니다. 



<그림. 파인더에서 확인한 이미지 폴더 위치>

(2) 메뉴탭의 'Insert' 메뉴 사용하기

<그림. 메뉴탭의 이미지 메뉴>

메뉴탭의 'Insert' 메뉴를 이용하여 이미지를 불러와 보겠습니다. 메뉴탭의 'Insert'에 커서를 올리면 'Image' 메뉴가 나타납니다. 이 메뉴를 클릭하고 이미지를 선택하면 드래그 앤 드롭을 할 때와 마찬가지로 레이어가 하나 생성되고 이미지를 추가하게 됩니다. 소스코드도 드래그 앤 드롭과 동일하게 적용됩니다.

(3) 소스코드로 직접 이미지 추가하기

이번에는 마지막으로 이미지를 소스코드로 직접 입력해보겠습니다. 먼저 이미지 파일을 프로젝트 경로의 'images' 폴더에 복사해 넣습니다. 이미지 파일명은 자유롭게 해도 되지만 여기서는 img1.jpg라고 하겠습니다. 



<그림. images 폴더에 이미지를 복사>

이 상태에서 images 폴더에 추가한 이미지를 소스코드에 작성해 보겠습니다. 'Insert' - 'Layer'를 클릭해서 레이어를 하나 만들어줍니다. 그러면 빈 레이어가 하나 만들어집니다.

이 빈 레이어의 이름을 imageContainer라고 변경하겠습니다. 레이어 이름은 수행하는 기능에 따라 잘 지어주는 게 작업의 편의를 위해 좋습니다. 



<그림. 레이어 이름 변경>

그리고 레이어에 image: "images/img1.jpg"라고 적어줍니다. 만약 이미지 파일명이 다르다면 해당 이름을 입력하시면 됩니다. 이미지가 추가된 걸 확인할 수 있습니다. 크기는 레이어의 크기가 지정되지 않았기 때문에 작게 보이는 것이고 조절할 수 있습니다. width 값과 height값을 추가해서 화면을 꽉 채우도록 하겠습니다. 



<그림. 이미지를 꽉 채운 화면>