[배워보자 피그마] 4화. 카드뉴스 만들기

카드뉴스는 한 장으로 끝나지 않는다.

전달하고 싶은 정보가 조금만 더 많아져도 2장, 3장, 5장으로 늘어난다.

이럴 때 중요한 건 ‘센스’보다 일관성이다. 디자인의 구조를 반복할 수 있어야 읽는 사람도 편하고, 브랜드의 인상도 또렷해진다.

이번 실습에서는 두 장짜리 카드뉴스를 만들어본다.

앞면은 임팩트 있는 제목과 썸네일, 뒷면은 시선을 사로잡는 이미지 위에 정리된 텍스트가 올라간 구성이다.

두 장 모두 같은 브랜드 톤을 유지한 상태에서 레이아웃만 조금 변형된 형태다.

지금부터 하나씩 따라 해보자.

1. 피그마를 열고, 새로운 파일을 만든다.

하단 메뉴에서 Frame을 선택하고, 1080x1350 크기 Section을 2개 나란히 만든다.

이 두 Section이 카드뉴스의 1, 2페이지가 된다.

2. 프레임 안에 사용할 이미지를 삽입한다.

이 이미지는 흑백으로 바꿀 예정이니, 컬러 이미지여도 상관없다.

3. 이미지를 선택한 뒤, 상단 메뉴에서 Edit Image를 클릭한다.

오른쪽 속성 메뉴에서 Saturation(채도) 값을 0으로 조정하면 이미지가 흑백으로 바뀐다.

4. 하단 도형 툴에서 **Rectangle(사각형)**을 선택해

프레임 전체를 덮는 빨간색 사각형을 만든다.

Fill 색상은 브랜드 컬러 혹은 강렬한 #D92323처럼 눈에 띄는 빨강으로 지정한다.

5. 이어서 땅콩 모양의 도형을 하나 만든다.

• 이건 직접 Pen Tool로 그려도 되고,

• 두 개의 원(Circle)을 나란히 배치한 뒤 Union(합치기)로 연결해도 된다.

※ 이 땅콩 도형은 이미지가 드러날 ‘창’ 역할을 한다.

6. 땅콩 모양 도형을 빨간 사각형 위에 올린 뒤,

두 도형을 Shift로 함께 선택한다.

오른쪽 속성 메뉴에서 Combine > Exclude를 클릭하면, 겹친 부분이 뚫려서, 이미지가 그 부분 안으로 보이게 된다.

7. 이제 이 도형을 정중앙에 오도록 정렬한다.

둘 다 선택한 뒤, 툴바의 중앙 정렬 버튼(가로/세로 Center)을 눌러 위치를 맞춘다.

8. 드러난 땅콩 모양의 공백에 시각적 깊이를 주기 위해,

빨간 도형에 Drop Shadow를 추가한다.

Effects > Drop shadow에서 X=0, Y=15, Blur=30 정도로 설정하면 은은한 입체감이 생긴다.

9. 마지막으로 아래쪽에 텍스트가 잘 보이도록

검정색 Rectangle을 하나 추가하고, 그 위에 흰색 텍스트를 배치한다.

텍스트 스타일은 앞서 만든 카드뉴스와 일관되게 유지한다.

이렇게 하면, 이미지 위에 뚫린 땅콩 모양 배경과 흑백 효과, 그림자와 텍스트까지 들어간 완성도 높은 커버 이미지가 만들어진다.

2번째 이미지를  만들어보자 

1. 섹션을 만들어 이미지를 위아래로 나눠 배치한다

상/하단에 시선을 끄는 인물 컷 이미지를 올린다.

2. 하단은 이미지설명형 텍스트를 올린다.

텍스트는 왼쪽 정렬, 명도 대비가 충분하도록 배경 어둡게 or 텍스트 밝게 설정한다.

3. 텍스트가 올라가는 배경은 투명도 또는 그라디언트를 적용해 부드럽게 연결한다.

Fill > Linear로 위는 어둡게, 아래는 투명하게 처리하면 배경 이미지와 글자가 자연스럽게 어우러진다.

4. 완성된 두 장을 Export > PNG로 각각 저장하거나,

슬라이드처럼 묶어서 업로드할 경우엔 순서와 제목이 연결되도록 정리한다.

이렇게 하면 카드뉴스 1~2컷 시리즈가 완성된다.

앞면은 시선을 잡고, 뒷면은 내용을 정리한다.

중요한 건 각각의 역할을 명확히 하면서도, 전체적으로 하나의 브랜드 스타일로 묶여 있다는 점이다.

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