[내일배움캠프 TIL] DAY.29 ALESSI 베너 디자인 분석 / 일러스트레이터 강의 1주차 수강(인터페이스 학습)

TIL. 2025/12/11
AI 콘텐츠 그래픽 디자이너 양성 과정

 

1. 오늘의 학습 키워드

- [디자인 감각 훈련] 도메인 탐색 스터디 워크북 : 디테일 벤치마킹

-  [Illustrator 기초] 강의 발제 > 1주차 완료

 

To do List

오전 ( ~13시 )

- 데일리 스크럼 작성 (오전) / 팀원들과 공유

- 개인 과제 제출 건 해설 영상 > 어제 TIL에 추가 작성하기

- [디자인 감각 훈련] DAY 8 : 선정된 시각자료 분석 완료

 

오후  ( ~19시 )

- 디감훈 내용 보충(이어서)

- [Illustrator 기초] 1주차 : 일러스트레이터 첫걸음

- 데일리 스크럼 작성 (오후)

- 디자인 감각 훈련 내용 팀원들과 공유

- TIL 작성

 

 

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

-  [디자인 감각 훈련] DAY  8 : 선정된 시각자료 분석 완료

: 베너 디자인의 의도를 명확하게 분석해보며 학습한 하루였다.

 

- [Illustrator 기초] 1주차 일러스트레이터 첫걸음

: 일러스트의 기본적인 인터페이스에 대하여 학습한 하루였다.

 

3. 내일 학습 할 것은 무엇인지

- [디자인 감각훈련 Day9] 도메인 레퍼런스 맵핑 : 분석 이어서 진행

- [Illustrator 기초] 2주자 강의

 

---

[ 디자인 감각훈련 Day 8 ] 도메인 탐색 스터디 워크북

 

 [2주차] 디테일 벤치마킹

- 선택한 자료를 요소별로 분해 & 분석하기

- 각 요소별로 시각적 원리와 목적 정리

+ 왜 알레시는 이런 디자인 방식을 선택했을까?

---

 

베너 이미지

 

선택한 자료를 요소별로 분해 & 분석하기

위 분석 내용 표로 다시 한 번 정리해보기

너무 줄글로 정리 된 것 같아서 표로 다시 한 번 정리해 보았다,

레이아웃	- 3분할 구조 - 중앙 제품 집중 - 좌우 텍스트 밸런스 - 여유로운 여백
폰트 계층	- 강조 텍스트 블랙 박스로 처리 - 여백 넓게 사용 (자간이 넓음)
CTA	- 일반적인 버튼 CTA 사용하지 않음
이미지 처리	- 따듯한 조명, 분위기 & 연말 분위기 - 고급스러운 실버 하이라이트 - 배경 단순화 - 실사 사용

---

각 요소별로 시각적 원리와 목적 정리

위에 분석한 내용과 달리(디자인이 어떻게 보이는지), ‘왜 이렇게 디자인을 설계 했을까’ 에 초점을 두고, 시각적 원리와 디자인의 목적에 대해 생각해보기

 

 

왜 알레시는 이런 디자인 방식을 선택했을까?

1. 주방용품이 아닌 ‘디자인 오브제 브랜드’이기 때문에 기능보다 조형적 아름다움을 우선하기 때문에
2. 연말 파티를 직접적으로 보여주지 않음으로써 시즌성에 종속되지 않는 이미지를 유지하고자
3. 설명을 최소화한 절제된 구성으로 브랜드의 디자인 퀄리티에 대한 자신감을 드러내기 위함
4. 명확한 답을 주지 않는 연출을 통해 소비자에게 해석의 여지를 남기며 브랜드 경험을 확장하기 위해서
5. 대중적 호소력보다 브랜드를 이해하는 소수 고객층을 의도적으로 타깃팅하기 위한 전략

---

[ Illustrator 기초 ]

 일러스트레이터 첫걸음 

 

 

1-1. 일러스트레이터 이해하기
1-2. 일러스트레이터 작업 환경
1-3. 색상 시스템
1-4. 저장하기

---

1-1. 일러스트레이터 이해하기

포토샵
> 이미지 편집 프로그램 / 픽셀로 이루어진 비트맵 이미지를 다루는 프로그램 / 비트맵 기반= 목적 자체가 이미지를 편집하기 위해서이다.

사진 촬영, 인물 보정 > 복잡한 색상과 질감이 필요한 경우 : 비트맵 형식이 적절각각의 픽셀에 다른색이 적용될수있고, 이미지의 풍부한 색 표현 > 사실적 표현 가능

일러스트
> 드로잉 프로그램 / 로고, 아이콘, 캐릭터, 일러스트 등 새로운 이미지를 창조하고 디자인하는 것 / 벡터 기반
= 목적 자체가 드로잉, 즉 그림을 그리는 것이다.

대형 현수막, 건물 간판 > 크게 제작해야될 경우 : 무한 확대에도 영향을 받지 않는 벡터 형식이 적절

출처 : 내일배움캠프

 

 

도큐 생성 / 아트보드 생성 (사이즈를 정하는 과정)
> 디자인 작업 시작
> 판형이 어떻게 되나요? = 책자 크기를 의미함, 작업 사이즈(어떤 사이즈로 작업을 할 것인가)
> 판형이 구체적으로 정해져 있지 않다면, 디자이너가 가장 적합한 사이즈를 제안
(이러한 것들을 결정하고 판단하는 것도 디자이너의 몫)

 

사이즈 단위 
- 웹 = Pixel
- 인쇄 = Millimeters
+++디자인에서 사이즈를 말할때, 보통의~ 규칙(국룰) '가로사이즈'부터 말함.

 

Bleed(도련=재단선)
인쇄물을 재단할때, 디자인이 잘려나가는 것을 방지하기 위해서 재단선보다 더 넓게 설정하는 여유공간
재단할때, 오차 1~2mm 생길 수 있는 것을 감안하여 작업 
- 명함과 같이 작은 인쇄물 > 사방 2mm
- 일반 인쇄물 > 사방 3mm

---

1-2. 일러스트레이터 작업 환경

그리드 사이즈 변경하기

Edit > Preferences > Gides & Grid
그리드 값 (Gridline every) : 25.4mm
북미 : 인치, 야드 사이즈 사용함. 그 영향이 있을것으로 예상됨
>변경 : (Gridline every)10mm , (Subdivisions)10mm
그리드 한칸이 1mm임을 예측할 수 있음

 

스마트 가이드 알아보기!
단축키 : ctrl+U
(View - Smart Guides)
: 오브젝트를 이동하거나 정렬할때, 임시로 생성되는 안내선, 오브젝트 간의 정확한 위치, 간격, 중심점을 잡아줘서
디자인 작업을 효율적으로 할 수 있게 도와줌.

 

 

출처 : 내일배움캠프

---

1-3. 색상 시스템
디자인 작업을 할 때, 포토샵/일러스트 프로그램에 관계없이
시작하는 시점에서부터 인쇄용 디자인인가, 웹용 디자인인가 판단하고 시작하는 것이 좋음
> 처음 아트보드를 생성할 때, 그 판단에 맞는 컬러 모드를 설정하는 것이 원칙임.

CMYK / RGB

CMYK : 인쇄 및 출력 디자인 작업 = 인쇄용
>형광색 같은 휘도가 높은 컬러는 구현 가능 x
(인쇄할때, 펜톤컬러 지정+별색 특수인쇄 방법으로 구현은 가능함..but 일러스트레이터 화면상에서는 구현x)
>Cyan(청록), Magenta(자주), Yellow(노랑), blacK(검정)의 4가지 색상 잉크를 조합/ 색을 수치값으로 환산하여 색 구현

RGB : 스마트폰, 컴퓨터 등 디지털 미디어에 디스플레이 송출을 목적으로하는 디자인 작업 = 웹용
>빛을 내는 제품에 적합하도록 색을 구현해내는 모드, 휘도(눈부심의 정도를 나타내는 빛의 밝기 측정 단위)가
 높은 컬러들까지 폭넓게 표현 가능
>HEX코드 :  RGB 방식 디지털 색상 표기법
(참고 사이트(어도비):https://color.adobe.com/ko/create/color-wheel)

처음 생성이 아닌 작업 도중 설정 변경도 가능함
(File > Document Color Mode)

새로운 스와치 컬러 등록
- Process Color : CMYK 네가지 컬러 조합으로 만드는 색상 표현
- Spot Color : 별색, 미리 조색된 특정 잉크를 사용하는 경우 > 형광색 같은 컬러
> 위 두 내용은 인쇄용에서만 해당되는 이야기임. 별색 사용하는 경우는 특수함


팬톤 컬러를 사용하는 이유
: 우리는 컴퓨터 화면에서 컬러를 확인하게 되는데, 모니터 디스플레이가 사람마다 사용하는 제품이 다르기 때문에+정확히 색이 일치하지 않음
특히 인쇄할때 주의가 필요함. 내가 이해한 색과 클라이언트가 이해한 색의 차이가 크면 안됨. 
그래서 그 오해를 없애기 위해, 기준이 되어 주는 것이 팬톤 컬러칩
(일러스트레이터 2022ver. 에서는 팬톤 스와치가 제공됨. 버전을 낮춰서 사용하는 것도 방법임. 여러 컬러 칩 中 'PANTONE+ Solid Coated' 를 가장 일반적으로 씀)

DIC 컬러 가이드 창

팬톤 컬러칩 대신 사용할 수 있는 컬러 스와치 = Spot Color : 별색
Window > Swatch Libries > Color Book > DIC Color Guide

---

1-4. 저장하기
> 저장은 습관이다!!!!!

확장자 별 어떻게 다르고 쓰임이 있는지 분석
ai
>레이어/아트보드/효과/글꼴 정보 등 그대로 유지, PSD보다 상대적으로 가볍다는 장점, 편집가능한 원본파일을 제공해야할때 필요함,

ESP
>인쇄/출판산업에서 사용한 오랫동안 사용한 포멧, 거의 모든 디자인 인쇄 관련 회사 소프트 웨어에서 열수 있다는 것이 장점,
디자인 벡터와 비트맵을 모두 포함할 수 있는 저장 형식, 최신 효과는 구현이 안될 수 있음
> 인쇄소 납품용이다 라고 생각하면 됌

ait
>레이아웃, 색상팔레트, 가이드, 글꼴 스타일 등을 미리 세트로 지정해두고 사용하는 템플릿 : 별로 사용 안하는 파일 확장자

PDF
>어도비가 만든 범용 문서 포맷, 벡터/비트맵/글꼴 모두 포함 가능한 파일
한글이나 워드로 작성한 것들도 PDF로 전환 가능, 시안 전달할 때 가장 좋은 포멧, 인쇄용으로 최적화 가능

SVG
: 웹 표준 벡터 파일 포멧, 무한 확대 축소가 가능한 벡터의 특징을 유지하면서 웹용으로 사용할 수 있음 > CSS 자바 스크립트와 결합 가능 : 인터렉티브 그래픽 제작 가능
웹용 > 용량 가벼움, 웹 최적화 파일

- SVG Compressed : 압축된 SVG 파일, 웹 환경에서 더 가볍게 전달하기 위해 사용, SVG와 동일한 기능을 하지만 모바일에 적합한 형식

 

 

- 저장하기 & 내보내기

Export for Screens
: 다중 아트보드 배율 포멧으로 한꺼번에 내보낼 수 있는 저장 방식(여러개의 이미지를 동시에)
> UI&UX 디자이너들이 자주 활용하는 기능 : 웹/앱 아이콘 다양한 해상도 이미지 제작에 최적화된 내보내기

Save for Web
: 웹에서 바로 사용이 가능하도록 용량을 줄여 내보내는 저장 방식

---

오늘 하루 회고

3-1. 오늘 학습 중 성과

: 일러스트 강의 들을때, 메모하며 들은 것, 메모하면서 들으니 더 기억에 오래 남는 것 같다고 생각이 든다.

 

3-2. (학습하며 겪은 문제/해결방법) or 오늘 부족했던 부분 회고

: 디감훈 할때, 너무 틀에 짜여진 내용처럼 분석한것, 폭넓게 사고하고 분석하였으면 더 좋지 않았을까 생각이 든다.

 

▶ 오늘 하루요약

: 아쉬움이 남는 하루다. 매일매일 만족하는 하루를 보내기에는 어렵겠지만,, 분명 하루를 빈틈없이 채워서 보냈다고 생각하는데도 하루를 너무 아쉽게 썼다는 생각이 든다. 

팀원들과 내용을 공유하면서도 나의 부족한 점만 보이고.. 그래서 자꾸 부족한 부분이 크게 부각 되어 보인다.

말하는 과정, 사고의 과정을 어떻게 하면 논리적으로 풀어낼 수 있을지 공부하자! 기죽지말고 화이팅(운동을 안해서 그런것 같다)