[내일배움캠프 사전캠프 2주차] 브랜드 배너 마무리 & 피그마 강의

 

내배캠 사전캠프 2주차, 8일입니다! 

 

오늘은 어제 미완성으로 남겼던 브랜드 배너 2개를 완성하고, 아티클을 복습한 뒤 피그마 강의를 수강했습니다.

 

먼저 Canva에서 첫번째 배너를 수정했어요. 어제 아쉽게 느꼈던 배경 색상과 이미지를 새롭게 교체했습니다. 현재 버전이 이전보다 더 깔끔하고 내용이 눈에 잘 들어오는 것 같네요. 

왼쪽 사진: 수정 전, 오른쪽 사진: 수정 후

 

 

두 번째 배너는 새로 제작했습니다. 이번 배너는 친근한 톤으로 클릭을 유도했어요.

 

첫 번째 배너가 무료 교육과 수료 후 취업 등의 정보와 혜택 중심으로 구성되었다면, 두 번째 배너는 공감과 호기심을 자극하는 데 초점을 두었습니다.

 

이렇게 배너 두 개를 완성했습니다! 슬랙의 디지털마케터 2기 잡담방에 배너를 제출하며 다른 사람들의 배너도 구경했는데, 다들 고퀄이더라고요. 다양한 스타일과 문구의 배너를 보면서 저도 많이 배우는 시간이었습니다. 

 

이제 배너를 완성했으니 아티클 복습으로 넘어갈 차례네요! 

제가 이전에 꼼꼼히 읽지 못했던 퍼포먼스 마케팅, 성과 측정 지표, 소구점(Appeal point) 등 다양한 아티클을 읽었습니다. 아티클 내용은 내배캠 사전캠프 1주차와 2주차에서 충분히 “마케팅 용어집”으로 언급했으므로, 자세한 설명은 생략하겠습니다.

 .

.

.

드디어 피그마 강의에 대해 이야기할 차례입니다!

 

배너 제작과 아티클 복습은 이전에 경험했던 내용이지만, 이번에 완전히 새롭게 배우는 건 피그마 강의였어요.

(물론 배너랑 아티클 복습이 싫었던 건 아니고, 새로운 걸 배운다는 점이 좋았어요. :D) 

 

그래서 피그마가 뭔데?

 

간단히 말하면, 피그마는 디자인 툴이자 협업 도구입니다.

 

 

피그마의 특징

• 언제나 어디서나 사용 가능 - 웹 기반이라 인터넷만 있으면 돼요 
• 디자인부터 개발까지 올인원
• 강력한 커뮤니티 
• 쉬운 학습 

피그마 웹 vs. 앱?

강사님은 앱을 추천하셨어요! 웹 버전은 글꼴 설치 프로그램을 따로 설치해야 한다고 하셔서, 저도 앱을 설치했습니다.

 

아래 사진은 구글 계정으로 로그인한 후, 피그마 앱을 오픈한 모습입니다!

Figma 앱 (Window ver.)

 

이론 파트: 강의의 이론 부분입니다. 

 

1-3: 디스플레이와 배수 

디스플레이(Display) - 디지털 화면
픽셀(Pixel) - 디스플레이를 이루고 있는 작은 칸들. 
해상도(Resolution) - 디스플레이의 선명한 정도를 나타내는 말. 디스플레이 안에 있는 픽셀의 개수를 의미함. 
픽셀의 갯수는 가로 줄의 픽셀 개수 * 세로 줄의 픽셀 개수로 나타낸다 
예) 1920 * 1080 = 가로 줄 픽셀이 1920, 세로줄이 1080

해상도와 픽셀의 관계

• 해상도가 같은 경우 = 화면이 클수록 픽셀 한 칸의 크기가 커짐
• 화면 크기가 같은 경우 = 해상도가 높을수록 픽셀 한 칸의 크기가 작아짐
• 일반적으로 화면이 클수록 해상도도 높음
• 면적 당 픽셀 갯수가 많다 = 세밀한 묘사 가능 

1배수 디자인 
1) 모바일 앱의 사이즈  -  스마트폰 크기와 상관없이 같은 앱이라면 모두 화면 크기는 동일하다 
2)1배수 디자인의 개념 - 우리가 디자인을 할 때 기준이 되는 하나의 사이즈 
3) 1배수 디자인을 정하는 방법
사람들이 가장 많이 쓰는 사이즈를 사용하다 → "내가 만들 앱을 쓸 사람들"

예) 안드로이드 기기 사용자가 많다면 디자인은 안드로이드 기기 기준이다. 

4) 디자인 사이즈와 실제 사이즈의 원리 - 기기마다 정해진 픽셀 배율이 있다. 이 배율이 1배수 디자인을 몇 배로 확대/축소할지 결정한다. 구현 과정:

1. 1배수 사이즈를 디자인 + 개발
2. 기기가 코드를 읽고, 디자인으로 바꾼다음 자기 배율만큼 확대/축소
3. 기기 실제 해상도에 맞게 미세 조정 후 화면에 띄운다

1-4: 이미지 표현 방식 (래스터 & 벡터)

컴퓨터가 그림을 그리는 방법: 데이터를 채운다 
래스터(Raster) - 비트맵(Bitmap) 형식이라고도 부르며, 픽셀 칸에 색깔 칩을 하나씩 담는다 (예: 포토샵).

벡터(Vector) - 그림을 수식으로 표현함. 이미지보다 코드 파일에 가까움 (예: 피그마 툴)

래스터 특징
1) 해상도가 높을 수록 화질이 좋아요
2) 해상도가 낮은 이미지를 크게 만든다고 화질이 좋아지지 않아요
3) 확대와 축소를 반복하면 색상 정보가 사라져요
4) 단순한 방식이라 고해상도 이미지를 표현하기 좋아요
 
벡터 특징
1) 확대 및 축소 등 크기 변형이 자유로워요
2) 이미지가 크고 복잡하면 수식도 복잡해져요
 

1-5: 8포인트 그리드
8포인트 그리드 디자인의 개념 

• UI를 8의 배수에 맞춰 배치하는 레이아웃 규칙이에요.
• UI 사이의 간격, 요소의 여백, 크기 등을 8의 배수 단위로 조정해서 사용해요.

8포인트 그리드, 왜 쓰는걸까?

• UI 디자인에 일정한 규칙이 있다면 다른 디자이너와 함께 일할 때도, 개발자가 디자인을 보고 개발할 때도 서로 물어보는 번거로움과 비효율성이 사라져요. 
• 아래와 같은 버튼 3개를 디자인한다고 가정해봅시다.
  → 폰트 사이즈는 2씩 움직이고, 여백은 4씩 움직여요!  

  

• 이러한 규칙이 있기 때문에 다른 디자이너나 개발자는 처음 보는 디자인을 보더라도 그 규칙을 적용하기만 하면 돼요.
• 따라서 사전에 서로 약속을 맺는답니다! 그 약속을 8포인트 그리드, 또는 8포인트 그리드 디자인이라고 한답니다.
  • 왜 8이냐? → 8은 1, 2, 4, 8로 나눌 수 있어요. 즉, 2로 3번이나 쪼갤 수 있고 나눈 숫자도 다시 짝수에요. 8은 1.5배, 2배, 3배, 4배 하더라도 깔끔하게 떨어져요! (심지어 0.75배를 해도 정수, 1.25배를 해도 정수에요….!)

 

 

마무리

 

오늘은 배너 2개를 완성하고, 아티클도 복습한 뒤 피그마 강의를 들었어요. 어제 시간이 부족해서 배너 제작에 아쉬움이 남았는데, 오늘 수정하고 두 번째 배너까지 완성할 수 있어서 좋았습니다. 그리고 다시 한 번 시간 효율의 중요성을 깨닫는 시간이었습니다...앞으로는 제 역량과 시간을 계산하면서 더 유용하게 활용해야겠다는 생각이 들었어요. 오늘은 특히 피그마 강의를 다른 사람들보다 늦게 들은 것 같아서 좀 걱정되었는데, 강의는 1-10 중 절반 정도인 1-5까지 들었어요. 이론 부분이지만 강사님이 설명을 잘 해주셔서 다행히 문제없이 따라갈 수 있었어요.

 

그럼 내일도 학습 화이팅!