5분만에 비포 애프터 이미지 만들기

물건을 팔려면 역시 비교를 해 줘야지...

길 가다보면 성형외과, 탈모샴푸 등 비포, 애프터를 극적으로(!) 비교해서 보여주는 광고들이 많이 눈에 띈다. 이런 광고 말고도 온라인 아티클을 보면 이미지 두 개를 겹쳐놓고 마우스로 축을 드래그하면 마치 여닫이 문처럼 보여주는 이미지도 있다.

킴 카다시안의 저번 시즌과 이번 시즌 번갈아 보기

단순히 이미지 두 개를 나란히 놓는 게 아니라 여닫이 효과를 주면 지면도 반으로 절약할 수 있고 독자가 스크롤만 내리는 게 아니라 가끔 드래그도 하면서 지루함을 덜어주는 효과도 있는 것 같다. 블로그를 하거나 웹사이트로 광고를 하는 분들이라면 요런 기능 하나 넣으면 심심한 아티클에 재미와 강조 효과를 줄 수 있을 것이다. 그런데 이런 기능 하나 넣는데 얼마나 들까?

정답은 무료. 그리고 내 블로그의 '한시간 마스터 스킬셋'보다 더 짦게 5분이면 된다! 

요 Juxtapose라는 웹서비스를 사용하면 된다. (참고로 '적스타포즈'라고 읽는다고. 병치, 병렬이란 뜻) 

Juxtapose 사용하기

https://juxtapose.knightlab.com

요게 내가 juxtapose를 써서 만든 따봉, 눈물 프로도이다. 

만드는 방법은 정말 쉽다. 

1. 우선 내가 쓰고 싶은 이미지를 드롭박스에 올려둔 상태에서 시작한다

2. juxtapose에서 내 드롭박스 이미지를 하나씩 선택해 준다

3. Label은 왼쪽, 오른쪽에 각각 보여줄 이미지 제목을, Credit은 필요하면 그 이미지 출처를 보여준다

4. Vertical을 체크하면 위아래로 이미지를 자르고, 체크하지 않으면 왼쪽오른쪽으로 잘라진다

5. Make responsive는 이미지 폭 사이즈를 웹사이트에 맞춰서 그때그때 변하게 하는 기능이다

6. Animate는 부드럽게 움직이는지, 한 번 끊고 보여주는 지 조절해준다고 하는데 차이는 못느끼겠다

7. 세팅한 설정을 preview한 후 마음에 들면 publish를 눌러서 코드나 링크를 복붙해서 쓴다 

나는 요렇게 설정해서 블로그 외부컨텐츠 입력 창에 코드를 embed해줬다. 아래 코드를 보면 사이즈를 138x151로 만들어 줬는데 좀 작은 것 같아서 블로그에 넣을 땐 300x300으로 바꿔주기만 했다. 원래 갖고 있는 아무 이미지 올려서 만든 것 치곤 괜찮은 것 같다! 

 잘 읽어봐 주셨다면 '공감' 꾸욱 부탁드려요♡ 다음 포스팅 때 힘이 됩니다!