[내일배움캠프 사전캠프] 6일차 - 피그마 프라이머리, Coolors | Styler 플러그인, 디자인 실습

🌱 TIL (Today I Learned)

 

이전 주 AI 과제

LLM을 활용해서 내 직무 관련 업무의 문서 만들어보기

 

- 직무: 디자인
- 업무 문서: 기획서

- 과제 제출: 하기 기획서 참고

 

[디자인 광고 배너 기획서]

① 1080×1080 (메인 정사각 배너)

컨셉: 🎄 카운트다운 출석 파티 / 산타는 다 알고 있음

이미지 프롬프트

배달의민족 스타일의 네온 파티 감성 앱 배너,
배민 민트색(#2AC1BC)을 메인으로 크리스마스 레드와 그린 원색 조합,
배민 캐릭터 BBI가 산타 모자와 하얀 수염을 쓰고 스마트폰을 들고 있으며,
스마트폰 화면에는 ‘출석 도장’ 아이콘들이 카운트다운 형태로 반짝임
(루돌프 코, 붕어빵, 눈사람, 산타모자 모양의 도장),
배경은 눈이 살짝 내리는 질감 + 종이 질감,
네온사인 효과의 전구들이 프레임을 감싸며 파티 분위기 연출,
3D 선물 상자가 주변에 떠 있고,
위트 있는 표정의 산타 BBI가 “다 알고 있음”이라는 눈빛,
전체 톤은 밝고 유쾌하지만 따뜻한 연말 감성

텍스트 배치 가이드

• 메인:
  👉 “산타는 알고 계신대, 누가 알림 켰는지 🎅”
• 서브:
  👉 “지금 알림을 켜고 크리스마스 깜짝 쿠폰 알림을 가장 먼저 받으세요 🎄”
• CTA 버튼:
  👉 [혜택 알림 켜기] (네온 버튼, 살짝 깜빡이는 효과)

---

② 1200×675 (가로형 / 이벤트 강조 배너)

컨셉: ⏰ 오늘 안 하면 후회 / 마지막 행운 강조

 

이미지 프롬프트

가로형 앱 배너, 네온 & 파티 스타일의 배달의민족 디자인,
배민 민트색 배경 위에 크리스마스 레드/그린 네온 텍스트,
산타 모자를 쓴 BBI가 알림 벨을 흔들며 놀라는 표정,
알림 벨에서 별과 눈꽃이 터져 나오는 연출,
한쪽에는 ‘2025 LAST LUCKY’ 느낌의 네온 사인,
3D 선물 상자와 샴페인 글래스 아이콘이 파티처럼 배치,
바닥에는 눈이 쌓인 듯한 질감,
전체적으로 “지금 안 누르면 끝”이라는 긴급한 무드

텍스트 배치 가이드

• 메인:
  👉 “오늘 출석 안 하면 내일 후회할지도 ?”
• 서브:
  👉 “2025년 마지막 행운이 기다리고 있어요 🍀”
• CTA 버튼:
  👉 [행운 확인하러 가기] / [알림 받고 선물 받기]

---

③ 512×512 (아이콘형 / 주문 전환용)

컨셉: 🎁 나에게 주는 연말 선물 / 홈파티 유도

 

이미지 프롬프트

작은 정사각형 앱 배너, 배달의민족 위트 있는 일러스트 스타일,
산타 모자를 쓴 BBI가 식탁 위에서 음식 선물 상자를 열고 웃는 모습,
상자 안에는 따뜻한 홈파티 음식과 쿠폰 티켓이 반짝이며 등장,
배민 민트 컬러를 베이스로 크리스마스 레드 포인트,
네온 전구가 프레임을 둥글게 감싸는 디자인,
눈 내리는 효과와 종이 질감 배경,
아기자기하지만 클릭하고 싶게 만드는 강한 대비

텍스트 배치 가이드

• 메인:
  👉 “올해 수고한 나에게 주는 가장 맛있는 선물 🍴”
• 서브:
  👉 “출석 혜택으로 연말 홈파티 메뉴 고민 끝 !! 😋”
• CTA 버튼:
  👉 [쿠폰 써서 주문하기] / [홈파티 메뉴 보러가기]

 

---

피그마(Figma) 강의 수강

색: 디자인을 할 때 가장 먼저 정하게 되는 핵심 요소

[RGB와 Hex Code]
 > 디스플레이: 빛의 3원색(빨강, 초록, 파랑)으로 구현되는 화면
 > 빛은 모일수록 밝아짐. ** 가산혼합 **

1. RGB: Red Green Blue
 - 각 색상별로 0부터 255까지 256가지 값
 ㄴ 255, 255, 255 처럼 작성하는 이유

2. Hex Code
 - 컴퓨터는 위 숫자를 16진수(Hexadecimal)로 변환해서 읽음
 ㄴ FF -> #FFFFFF = 헥스코드

3. 컬러 프로파일
 - 디스플레이는 색상을 자기만의 기준으로 해석
 (빛의 색상에는 절대적인 기준이 없기 때문)
 ㄴ 해석할 때 사용하는 색 기준표 = '컬러 프로파일'

★ 디지털 화면은 빛으로 되어있기 때문에 화면과 프로그램에 따라 차이가 생길 수 있음 ★

 

** 색의 3원색은? - 빨강, 노랑, 파랑 => 모두 섞으면 검정  > 덜어내야 하기 때문에 ** 감산혼합 **

[컬러 스타일]  : 디자인에서 사용할 색상을 모아두는 팔레트
- 음영: 쉐이드 (쉐이드가 진한쪽, 밝은쪽)
ㄴ 쉐이드를 만드는데도 규칙이 존재함
- 기본적으로 2~3가지 색상으로 만듬
 * 포인트 컬러 1개 지정
 * 글자 및 배경은 흑백 조합으로 조합
 (이때 흑색 계열은 회색빛으로 많이 사용함)

1. 포인트 컬러 = ★ 프라이머리 컬러 ★(정말 중요하고 핵심적인 부분에만 사용해야 함)
2. 백그라운드 컬러 = 일반적으로 흰색(#FFFFFF)
3. 세컨더리 컬러 = 포인트 컬러가 더 돋보이게 하는 컬러(잘 안씀)

** 색상을 정했다면 가장 밝은 단계부터 가장 어두운 단계까지 총 10단계 생성하기 ** => 색상의 확장성 필요

★ 1:3:6 법칙 ★ 색상의 비율을 1:3:6으로 써라
- 포인트 컬러 화면 비율의 10%만 씀
- 전체 배경인 흰색이 60%정도 차지하도록
- 세컨더리 컬러로 나머지 30% 사용

 

[Coolors 플러그인]

- 피그마에서 실습하는 시간 ~

- 포인트 색상 지정, 락, Generate

 

(이 강의 듣기 전에 디자인 과제를 수행해서.. 알고했으면 좋았을걸 ㅠㅠ)

 

- HSL / 색조, 채도, 밝기(명도)

(명도 + - 10 하여 밝기 조정하기 실습)

 

[Styler 플러그인]

 

- 플러그인 추가하려는데 다짜고짜 오류 발생

 

This profile is already public

뭐냐 이건 ? 싶어서 구글링해봤더니 피그마 재시작해보란다

 

 

 

재시작하니까 바로 저장 항목에 추가 완료 ㅎㅎ..

 

 

/ 는 피그마에서 폴더를 구분하는 용도

 

 

색 조합 플러그인으로 팔레트 만들기

 

 

 

성공 문구

 

 

 

우측 패널에서 이동시킬 때 꼭 까만선이 나오게 하기 / 회색선이 뜨면 안에 넣는다는 의미

---

 

 

피그마 배너 디자인 과제 수행

- 피그마 링크 : [LINK]

 

전주에 작성한 기획서를 기반으로 디자인을 직접하는 시간을 가졌다.

 

시각적 계층 구조가 잘 반영되었는지?  * 크기 - 중요한 건 크게  * 색상 - 강한 색상으로 강조 / CTA 버튼은 브랜드 메인 컬러  * 여백 - 요소 간 숨 쉴 공간 / 텍스트, 이미지 사이 간격  * 정렬 - 눈의 흐름을 정돈 / 좌측 정렬로 자연스러운 시선 유도 !!!! "중요한 메시지 -> 설명 -> CTA 버튼" 순서로 구성하기!!!!

 

위 내용을 최대한 반영하려고 했는데 ..

기획서를 아무리 꼼꼼히 쓰면 뭐하는지 ㅠㅠㅠ 마음에 안들어서 계속 수정하게 되었다..

총 3가지 디자인을 해보려고 했는데 시간이 부족해도 너무 부족해서

 

1. 가로형 / 이벤트 강조 배너

2. 메인 정사각 배너

 

이렇게 2가지 종류만 일단 완성을 했다...... (근데 마음에 안듬 ㅎ)

제출해두면 내일 튜터님께서 피드백 주신다고 하니, 재수정을 하고 마지막 알람형 배너까지 만들 수 있으면 좋겠다.

 

 

---

 

 

피그마 강의를 들으면 들을수록 더 많이 들어놔야 도움이 되는 것 같은데

각 챕터 별 강의 시간이 조금 길어서 진도를 따라가기 힘들었다 ㅠㅠ 개인 시간을 투자해야 할 듯 !

오늘도 집중하느라 시간 가는줄 모르는 신기한 경험을 ㅎㅎ..

고생했다 ~ !!!!!!!