[제로베이스 콘텐츠 마케팅 스쿨] 스터디 노트 + 데일리 원미션 DAY7

[스터디 노트] Part 02. Figma 기초 및 실습 - Chapter 08~09
                     Part 03. 광고 콘텐츠 디자인 - Chapter 01~02

 

 

Part 02. - Chapter 08. 디자인 시스템

 

• 디자인 시스템

: 디지털 제품의 사용 기준을 명확하게 정의한 재사용 가능한 구성 요소의 모음

  제품을 만드는 방법을 다루는 결과물의 집합

- 목적 : 프로젝트 확장에 따라 생기는 혼란을 방지하고 표준 규칙을 세워 질서를 세우는 역할

- 장점 : 일관성 / 효율성 / 협업 / 향상성

- 구성 요소 : 컬러, 폰트, 아이콘 등 -> 컴포넌트 -> 페이지 -> 프로덕트

- 스타일 가이드 : 디자인 원칙이 정리된 문서, 기초 원칙을 정리하여 나침반 역할 (파운데이션 - 컬러, 폰트, 아이콘 등)

- 패턴 라이브러리 : 재사용이 가능하도록 기능적으로 설계한 컴포넌트의 모음 (타이틀, 사용법과 원리, 배리에이션)

- 시스템 가이드 : 디자인의 목적에 따라 디자인 시스템을 운영,관리하는 데 필요한 가이드 (목표, 담당자 표기)

Overview 예시 / Foundation 예시 : 그리드, 엘리베이션, 버튼 상태, 컬러, 폰트, 아이콘, 쉐이프

 

 

Part 02 - Chapter 09. 공유와 협업

 

• 핸드오프 : 디자이너가 구현한 결과물을 개발자에게 전달하는 것

- 유저플로우 : 사용자 경험 시각화 -> 기획 - 개발 간의 격차 해소 (화면에 대한 전체적 흐름 파악)

- 유즈케이스 : 사용자에게 발생할 수 있는 다양한 상황 고려, 잠재적 문제를 예측하여 해결

- 베리에이션 : 버튼에서 많이 사용

- 멀티 디바이스 : 크기/해상도가 다른 인터페이스에서 어떻게 작동할 것인지 보여줌

- OS : ios/안드로이드에서 각각 다른 인터페이스

 

• 에셋 내보내기

- Export -> 사이즈/파일 종류 선택

- 프레임 (x) 구성요소 선택 (o) -> 내보내기

- 파일명 규칙 : 소문자 사용, 첫글자 숫자 금지, 띄어쓰기 금지, 축약(ex. Button->btn), 합의된 규칙 만들기

 

• 토큰과 핸드오프

- 토큰 내보내기 : Tokens - Tools - All token sets - Export

- 토큰 불러오기 : Draft - New design file - Tokens - Tools - Load from file/folder - json 파일 열기

- json 코드 복사/붙여넣기 - save json

 

 

Part 03 - Chapter 01. 광고 콘텐츠 디자인 소개

 

• 광고 콘텐츠 제작 프로세스

1) 기획안 제작/확인 : 직접 기획안을 작성하거나 기획자가 만든 기획안 확인

2) 의견 교환 : 문제 상황, 타겟, 달성 목표를 기반으로 기획안 내용에 대한 논의 -> 수정

3) 러프스케치 : 본격적인 제작 전 간결한 오브젝트 배치를 통해 전체적인 느낌 확인

4) 소재 제작 : 컬러, 폰트, 그래픽 등을 사용하여 본격적으로 소재 제작

5) 피드백 + 릴리즈 : 기획자와 함께 논의하여 수정 후 광고 집행

6) 성과 분석 : 광고 소재의 성과 지표를 토대로 다음 액션 기

 

 

 

 

 

 

 

 

 

 

 

 

• 기획안 분석 방법 (의견 교환 단계)

좋은 기획안이란? 

- 문제 : 이 광고를 통해 해결하고자 하는 문제

- 타겟 고객 : 이 광고를 통해 설득하고자 하는 고객

- 목표 : 이 광고를 통해 달성하고자 하는 목표 (예 : 구매 전환, 신규 유저 획득, 이벤트 참여도 NN%)

소통 방법

- 현 소재의 부족한 부분에 대한 의견 전하기 (논리적인 근거 제시)

- 개선사항 의견 공유하기 (구체적인 개선 방안 제안)

 

• 마케팅 용어

- 노출 : 사용자가 광고를 본 횟수

- 총 지출액 : 일정 기간 동안 광고 캠페인에 사용된 비용의 총합

- CPM : Cost Per Mile 광고를 1,000번 노출시키기 위해 광고주가 지출한 비용

- 전환 : 광고를 통해 특정 행위(비즈니스에 따라 다르게 설정)를 완료한 사용자 수

- CTR : Click-Through Rate 광고 노출 대비 클릭률

- CPC : Cost Per Click 광고를 1회 클릭할 때마다 광고주가 지불하는 비용

- CVR : Conversion Rate 광고를 클릭한 사용자 중 실제 전환 행동을 완료한 사용자 비율

- ROAS : 총 지출액 대비 매출의 비율

- 리드 : 제품 구매나 이용으로 이어질 수 있는 잠재 고객, 전환에 가장 가까운 고객

효율이 좋은 소재 -> CTR/CVR이 높고 CPM/CPC가 낮음

'인지(노출과 클릭)'의 관점에서는 B의 성과가 더 좋지만 '전환'의 관점에서는 A의 성과가 더 좋음

실제로 지표를 해석할 때는 다양한 지표와 관계를 고려해야 함 -> 퍼포먼스 마케터, 기획자와 함께 분석

 

 

Part 03 - Chapter 02. 콘텐츠 마케터를 위한 피그마 실전편

 

• 피그마의 구조

 

 

- File : 하나의 프로젝트(주제), 플랫폼 별 소재 관리

- Page : 파일 안에서 나눠야 할 구간을 설정할 때 사용

- Section : 여러 프레임을 묶어주는 그룹 기능

- Frame : 가장 기본적인 소재 제작 단위

 

 

• 프레임 세팅법 (정방형 인스타그램 광고 소재)

- 540x540으로 설정 (용량 문제 방지) -> 프레임 선택 -> Export (2배수)

- command + R : 프레임 이름 변경 

- Effect 포함되지 않도록 주의 (파일 사이즈 오류 발생 가능성)

 

• 소재 제작 실무 과정

메인/서브 카피 및 CTA 배치 - 색상 설정 및 그래픽 삽입 - 소재 전체 선택 - Export

- 줌 인/아웃 하면서 전체적인 느낌 확인하면서 오브젝트 배치 조정

- 가운데 정렬 : 안정감, 신뢰감을 주는 배치

- 강조하고자 하는 것(카피, 로고 등)을 왼쪽 위에 배치

- 사진 사용하는 경우 먼저 배치해보기

- CTA : Call To Action 웹사이트, 랜딩페이지, 이메일, 광고 등에서 고객으로 하여금 원하는 작업을 수행하도록 유도하는 짧은 문구

* 많이 시도해보고 도전해보고, 시행착오를 겪어야 성장이 이루어진다 .ᐟ *

기획안에 따른 광고 소재 제작 예시

• CTA 만들기

- 오토 레이아웃 : 자동으로 여백/간격을 조정하는 기능 (Shift + A)

- CTA 수정 : 텍스트 더블 클릭 후 수정

- 버튼 속성 변경 : 오토 레이아웃 (Frame) 선택 후 수정

- Ignore auto layout : 레이어는 묶여 있지만 자유롭게 이동 가능

 

• 오토레이아웃 활용하기

- HUG 텍스트를 딱 맞게 감싸고 있음, 글자의 양에 따라 텍스트 박스 크기 조정

- FIXED 텍스트 박스 크기가 고정되어 있음

- 표 : 가장 데이터가 긴 내용을 먼저 제작

- command + ]/[ : 레이어 순서 변경

 

• 자주 쓰는 플러그인

Actions - Plugin

- Unsplash : 고퀄리티 무료 이미지 (키워드 검색하여 이미지 검색)

- Brandfetch : 브랜드 에셋 손쉽게 찾기 (로고, 컬러, 폰트 등)

- RemoveBG : 사진 배경 자동 제거 (사전 단계 : RemoveBG 로그인 - API Key 생성 - 복사/붙여넣기)

- Shaper : 도형 에셋

- Material Symbol : 아이콘 에셋

- Google Sheets Sync : 엑셀 데이터를 피그마로 연결해서 반영

                                        연동될 오브젝트의 레이어 이름과 엑셀의 열 이름을 통일 (ex: #Major = A1 Major) 

                                        반영할 부분 프레임 전체 선택 - 플러그인 선택

 

• 주요 협업 기능

1) 댓글 달기 : C - 텍스트 입력 - Enter - Mark resolved (댓글 숨김)

                     Shift + C 모든 댓글 숨기기

2) 실시간 대화 기능 : / - 텍스트 입력 (일정 시간이 지나면 자동으로 사라짐)

3) Spotlight Me : 현재 작업 중인 화면을 실시간으로 공유

4) 작업물 공유 : Share - Copy link / 특정 프레임 선택 - Share - Copy link

5) 미러링 : 모바일로 확인할 소재(프레임) 선택 - 컴포넌트 생성 - 모바일 화면에 크기 맞추기(K 누른채로)

                 모바일로 피그마 접속 - 웹에서 모바일로 확인할 프레임 선택 - 모바일에서 begin mirorring 선택

 

 

[데일리 원미션] 실습 결과물 캡쳐해서 올리기