[배워보자 피그마] 5화. 시선강탈 섬네일 만들기

한눈에 클릭을 유도하는 디자인엔 몇 가지 공통점이 있다. 선명한 이미지, 대비 있는 컬러, 강렬한 메시지, 그리고 적당한 여백. 이번 회차에서는 바로 그런 요소들을 활용해 썸네일 디자인을 완성해본다.

토끼와 VR기기를 쓴 남자, 그 사이에 놓인 의문의 텍스트. 그 어떤 설명보다 궁금증을 자극하는 구성이 바로 이 디자인의 핵심이다.

지금부터 피그마에서 이 썸네일을 직접 만들어보자.

1. 새 파일을 열고, 프레임 사이즈를 1080x1350으로 설정한다.

인스타그램 피드용 기본 비율이다. 흰색 배경으로 시작해도 좋지만,

더 입체감을 주기 위해 구겨진 종이 텍스처 이미지를 배경으로 삽입한다.

Unsplash나 프리픽 등 무료 사이트에서 ‘crumpled paper’로 검색하면 쉽게 구할 수 있다.

2. 토끼와 남자 이미지를 준비한다.

이 두 이미지는 배경이 제거된 PNG 형식이어야 한다.

피그마 내의 Remove BG 플러그인을 활용한다.

3. 두 이미지를 나란히 배치한다.

• 인물은 왼쪽, 토끼는 오른쪽

• 약간 겹치거나 시선이 마주치도록 위치를 조정

• 각각 이미지 뒤에 약간의 흰색 테두리(Stroke)를 추가하면 스티커처럼 튀어 나온다.

(Effects > Stroke → 색상 흰색, Outside, 6px 내외)

4. 텍스트 영역을 만든다.

상단에 빨간색 배경의 텍스트 박스를 두 개 겹쳐 배치한다.

도형(Rectangle)을 먼저 만들고, 텍스트를 가운데 정렬로 배치한 뒤

도형을 약간 기울여(회전 도구) 동적인 느낌을 준다.

• 텍스트 예시:

첫 줄 → ‘토끼가 벌’ (작고 좁게)

둘째 줄 → ‘○○○ 파티?’ (크고 넓게, 강조 폰트로)

5. 하단 텍스트는 정보 전달 영역이다.

작은 크기로 ‘다음장에서 XR 영상으로 확인’ 같은 문장을 넣고

‘XR’ 부분에는 강조 색상(빨간색)을 넣는다.

그리고 오른쪽 끝에 → 화살표 아이콘을 추가해 클릭 유도를 강화한다.

(아이콘은 플러그인 또는 텍스트로 대체 가능)

6. 우측 상단에는 브랜드 로고 또는 네임을 작게 배치한다.

기존 시리즈 톤을 맞추기 위해 위치와 컬러를 동일하게 유지하는 것이 좋다.

이 예시에서는 “XROMEDA”

7. 모든 요소가 들어가면 정렬과 간격을 체크한다.

Auto Layout은 굳이 안 써도 되지만,

중앙 정렬 및 텍스트 간격, 이미지 사이 공간만 잘 조절해도 완성도가 올라간다.

8. 마지막으로 Export > PNG로 저장한다.

이제 인스타그램이나 콘텐츠 타이틀에 활용할 수 있는 썸네일 이미지가 완성됐다.

이번 실습은 단순한 배치가 아닌, 컷아웃 이미지 + 컬러 포인트 + 텍스트 구성을 조합해서 사람의 시선을 붙잡는 시각적 리듬을 연습하는 데 초점이 있다.

감문전 칼럼니스트  art@kmjournal.net