🙊 AI 디자인 실전 콘텐츠 제작(Firefly + Photoshop 활용)

01. 이미지 생성 원리 이해하기

AI는 어떻게 이미지를 만들까?

 

😺  이해를 돕기 위한 핵심 흐름

 

1. Prompt(지시, 명령) 입력

 

2. AI 모델이 단어, 문맥, 스타일 해석

 

3. 이미지 생성

 

AI가 이미지를 만든다는 건 결국 ‘언어를 시각화’하는 과정이에요.

우리가 텍스트로 무엇을 만들고 싶은지 입력하면(Prompt),

AI가 그 말을 해석해서 시각적으로 구현합니다.

 

Diffusion Model(확산 모델) 개념

확산 모델은 생성형 모델의 한 종류로 비지도학습 방식으로 데이터 분포를 학습하며 새로운 데이터 생성에 사용된다. 특히 이미지나 오디오 같은 복잡한 데이터 생성 분야에서 뛰어난 성능을 보여준다.

 

최근 인공지능 분야에서 가장 주목받는 기술 중 하나로 데이터에 점진적으로 노이즈를 추가하는 확산 과정(Forward Process)와 노이즈로부터 원본 데이터를 복원하는 역확산 과정(Reverse Process)을 통해 학습하는 것이 핵심 원리다. 출처: 위키피디아(Wikipedia)

 

Diffusion Model 쉽게 이해하기

 

AI는 그림을 처음부터 그리는 게 아니라 노이즈(잡음) 속에서 이미지를 찾아내는 방식으로 작동해요.

 

먼저 깨끗한 이미지를 점점 흐리게 만들며 ‘이미지가 어떻게 망가지는지’를 배우고(Forward process),

 

그다음에는 완전히 랜덤한 노이즈에서 시작해 ‘어떻게 다시 선명하게 만들 수 있는지’를 거꾸로 학습합니다 (Reverse process)

 

Firefly 시작하기 .

Adobe에서 직접 만든 공식 생성형 AI 서비스, 상업적 사용이 가능해요.

인터페이스가 심플해서 처음 사용하는 분들도 금방 익숙해질 수 있어요.

같은 Adobe 프로그램인 Photoshop, Illustrator랑 쉽게 연결이 가능해요.

 

01. 레퍼런스 시각적 분석하기

💕 브랜드의 시각적인 요소를 분석하는 방법을 배워볼거에요 .

이미지 생성 AI 를 사용할 때 ' 예쁘게 만들어줘 ', ' 고급스럽게 해줘 ' 같은 단순한 말만 해서는 원하는 결과가 절대 나오지 않아요 . 지난 시간에 배운 것처럼 , AI 는 언어를 분석해 이미지를 만들어요 . 그래서 감각적인 표현을 구체적인 키워드로 바꾸는 과정이 매우 중요해요 .

 

1)

이 웹사이트를 분석해서 브랜드의 디자인 특징을 정리해 주세요 .

레이아웃 , 컬러 팔레트 , 이미지 스타일 , 무드로 나누고 , 각항목을 한 줄 설명 + 핵심 키워드 5~8 개로 뽑아주세요 .

웹사이트 : [URL 붙여넣기 ]

 

 

ChatGPT 대화창에 프롬프트를 입력하고 , 결과를 확인해 주세요

 

2)

아래 브랜드 웹사이트를 분석해서 이미지 생성에 활용 가능한 구체적인 프롬 프트 키워드를 뽑아주세요 .

조건 : 1) 레이아웃 , 컬러 팔레트 , 이미지 스타일 , 무드로 나누기

2) 각 항목은 ' 한 줄 요약 ' + ' 이미지 생성용 키워드 ' 로 구성

3) 키워드는 Midjourney, Firefly 에서 바로 사용할 수 있을 정도로 구체적으 로제시

4) 추상적 단어는 최소화하고 , 아래 요소들을 포함해서 키워드 생성- 카메라 종류 (DSLR, 50mm lens, zoom, wide-angle 등 )- 라이팅 기법 (soft light, hard shadow, rim light, spotlight 등 )- 색감 (temperature, saturation, monochrome 등 )- 질감 (texture)- 구체적 장면 , 오브젝트 , 배경 요소- 구성 (Layout) 관련 상세 키워드 (full-bleed hero image, extreme whit espace 등 )

5) 영어 키워드 기준으로 작성 웹사이트 : [URL 붙여넣기 ]

 

 

 

3)

아래 이미지 생성 키워드들의 의미를 ,

1) 일반적인 영어 뜻 2) 디자인 / 사진 · 영상 업계에서의 실무적 의미 3) Midjourney, Firefly 등 이미지 생성 모델에 입력했을 때 어떤 효과가 나 타나는지 4) 가능한 경우 시각적 예시 설명 ( 구도 , 빛 , 질감 등 ) 이 4 가지 기준으로 아주 쉽게 설명해 주세요 . 한글로 설명해 주세요 . 키워드 : [ 여기에 내가 이해하고 싶은 키워드들 붙여넣기 ] 계속 이러한 과정을 거치다 보면 , 다양한 키워드에 점점 익숙해질 수 있어요

 

4) 2번에서 4번으로의 연결

추출한 이미지 생성 키워드들을 간단하고 깔끔하게 정리해 주세요 . 요구사항 : 1) 레이아웃 / 컬러 / 이미지 스타일 / 무드 정도의 큰 카테고리로만 분류 2) 중복되거나 비슷한 단어는 하나로 정리 3) 각 카테고리별 핵심 키워드만 5~10 개 정도로 요약 4) 설명은 최소화하고 , 목록 형태로 간결하게 정리 5) 나중에 프롬프트로 조합하기 쉬운 형태로 정돈 6) 초보자도 이해할 수 있도록 한글 설명 간단히 추가 ChatGPT 대화창에 프롬프트를 입력하고 , 결과를 확인해 주세요 . 너무 깔끔하고 체계적으로 정리한 내용을 만나볼 수 있어요 . 키워드 정리본은 이후에 계속 사용할 수 있도록 노션에 정리해 두면 좋겠죠

 

ChatGPT 로 브랜드 가이드만들기 

 01. 브랜드 가이드가 왜 중요할까요 ? 친구랑 대화할 때 , 친구 말투가 갑자기 바뀌면 낯설겠죠 ? 무슨 일 있나 ? 걱정도 되고요 . 브랜드도 똑같아요 . 고객이 접하는 모든 터치포인트 ( 홈페이지 , SNS, 광고 , 이벤트 등 ) 에서 말투와 분위기가 들쭉날쭉하면 신뢰도가 떨어져요 .

브랜드는 결국 ‘ 이미지 ʼ 로 기억되기 때문에 ,

이이미지가 흔들리지 않도록 기준을 잡아주는 문서가 바로 브랜드 가이드입니다 .

 

<브랜드 가이드가 있으면 좋은 점>

팀원이 바뀌어도 브랜드가 흔들리지 않아요 .

디자인 결과물의 통일성을 유지해요 .

외주 디자이너와 협업이 쉬워져요 .

콘텐츠 제작 속도가 빨라져요 .

브랜드가 전문적으로 보여요 .

브랜드 가이드의 5 요소

브랜드 가이드의 핵심은 브랜드를 항상 같은 모습으로 보여주는 법을 잘 정리하는 것입니다 .

브랜드 가이드의 요소를 크게 다섯 가지로 정리해 볼게요 .

로고 사용 가이드

로고는 브랜드의 얼굴입니다 .

로고는 마음대로 늘렸다 줄였다 하면 품격이 무너져요 .

로고 사용 가이드에는 아래 내용이 포함돼요 .

최소 크기

보호 여백 ( 로고 주변 공간 )

사용 금지 규칙 ( 늘이기 , 회전 , 그림자 추가 등 )

컬러 시스템

브랜드를 떠올리면 먼저 떠오르는 게 ‘ 색 ʼ 이에요 .

예를 들어 , 유튜브 = 빨강 / 스타벅스 = 녹색

컬러 시스템은 브랜드의 전체 분위기를 결정하며 아래 내용이 포함돼요 .

Primary color( 대표 색 ) 브랜드를 가장 상징하는 대표 색상

Secondary color( 보조 색 ) Primary 를 보완하고 다양한 UI/ 콘텐츠에 활용되는 확장 컬러

Accent color( 포인트 색 ) 핵심 요소를 강조할 때 사용하는 포인트 컬러

색상 조합 , 대비 규칙

타이포그래피

글꼴 선택만으로도 브랜드의 분위기가 크게 달라집니다 .

예를 들어 , 고딕은 단단하고 모던한 느낌 , 명조는 클래식하고 정제된 느낌을 줘요 .

타이포그래피에는 아래 내용이 포함돼요 .

제목용 / 본문용 폰트

자간 규칙

줄간격 영문 / 국문 병행 시 규칙

이미지 스타일

사진 느낌도 규칙이 있어야 합니다 . .

따뜻한 브랜드는 밝은 톤의 사진 , 전문적인 브랜드는 간결하고 여백 있는 사진을 사용하죠

일러스트라면 굵은 선인지 , 파스텔 톤인지까지 규칙을 둡니다 .

톤앤매너

브랜드가 ‘ 어떤 성격으로 말할지 ʼ 를 결정하는 요소입니다 .

예 ) 친근한 톤 말 끝이 부드럽고 감탄사 사용 / 오늘도 편안한 하루 보내세요 :)

전문적인 톤 명확하고 간결한 문장 / 안정성과 효율성을 제공하는 서비스입니다 .

프리미엄 톤 군더더기 없고 단정한 문장 / 불필요한 요소 없이 본질에 집중합니다 .

 

브랜드 성격 정의하기 (Persona 설정 )

브랜드의 기반이 되는 핵심 페르소나를 정하는 단계입니다

 

당신은 전문 브랜드 전략 컨설턴트입니다 .

20 대 직장인을 타깃으로 한 신규 카페 브랜드를 기획 중입니다 .

고객이 ‘ 잠시 쉬어가는 느낌 ʼ 을 받을 수 있는 브랜드 성격을 정의해 주세요 .

요청사항 :

1) 브랜드 성격을 3 줄로 요약해 주세요 .

2) 핵심 감정 키워드도 3 개만 함께 제시해 주세요

톤앤매너 만들기 브랜드의 말투와 성격을 구체화하는 단계에요

당신은 브랜드 카피라이터입니다 .

앞서 정의한 카페 브랜드의 톤앤매너를 ‘ 친근함 + 차분함 ʼ 조합으로 설정해 주 세요 .

요청사항 :

1) 톤앤매너 설명을 3 줄로 작성해 주세요 .

2) 해당 말투를 활용한 문장 예시 5 개를 만들어 주세요 .

ChatGPT 는 실제 말투 문장까지 함께 생성해 주기 때문에 이후 카피라이터가 작업할 때도 훨씬 빠르게 진행할 수 있어요

 

컬러 시스템 추천 요청하기 색상 조합을 추천받아 방향성을 잡는 단계입니다

당신은 브랜드 디자이너입니다 .

해당 카페 브랜드와 어울리는 컬러 팔레트를 3 가지 조합으로 추천해 주세요 .

요청사항 :

1) 각 컬러 조합은 3~5 개의 색으로 구성해 주세요 .

2) 각 컬러의 HEX 코드를 포함해 주세요 .

3) 해당 조합을 추천하는 이유를 2 줄 이내로 설명해 주세요 .

4) 표 형태로 정리해 주세요 .

 

미니 브랜드 가이드 완성하기 지금까지 만든 내용을 하나로 정리하는 단계에요

당신은 전문 브랜드 디자이너입니다 .

지금까지 정의한 내용을 기반으로 미니 브랜드 가이드를 한 페이지 분량으로 작성해 주세요 .

구성 :

1) 브랜드 소개 (2~3 줄 )

2) 핵심 메시지 ( 핵심 문구 1 개 + 설명 2 줄 )

3) 톤 앤 매너 ( 요약 3 줄 )

4) 컬러 시스템 ( 표 포함 )

5) 이미지 스타일 요약 ( 키워드 5 개 + 2 줄 설명 ) 요청사항 :- 실제 브랜드 가이드 문서처럼 깔끔한 형식으로 정리해 주세요

 

피드백 요청하기 (Self-Check) ChatGPT 에게 스스로 개선시켜 달라고 하는 단계에요

마지막으로 , 지금 작성하신 답안을 스스로 검토하고

명확성 · 일관성 · 브랜드 이미지 적합성 기준으로

수정이 필요한 부분이 있다면 손봐서 최종 버전을 제시해 주세요

 

이과정은 ChatGPT 가 스스로 더 나은 버전을 만들어주는 매우 강력한 방법입니다

 

Firefly 로 브랜드 이미지만들기

01. 키워드부터 이미지 제작까지 이미지 키워드 도출하기

지난 시간에 만든 미니 브랜드 가이드를 기반으로 이미지 키워드를 뽑아볼게요

 

Firefly 로 이미지 만들기 Firefly 로 브랜드의 사진 스타일을 빠르게 잡아볼 수 있어요

 

이미지 검토하기 Firefly 가 자동으로 4 장의 시안 이미지를 생성해 줍니다

 

브랜드 톤앤매너와 잘 맞는 이미지인지 체크

형태에 오류가 있는 이미지는 빠르게 탈락시켜주세요

 

02. 브랜드 가이드 정리하기

대표 이미지 선택 Firefly 에서 만든 이미지 중 , 가장 브랜드에 어울리는 이미지를 선정해 주세요

 

 

 

01. 디자인에서 가장 먼저 보이는 건 ?

사람은 형태보다 색을 먼저 인식하기 때문이에요 .

사람 눈은 배경과 확 다른 색을 보면 자동으로 먼저 보게 돼요 .

그래서 UX Design 에서는 중요한 버튼이나 경고 메시지를 색으로 강조해서 시선 을끌어요 .

 

02. 실전에 바로 쓰는 색 조합법

 

60:30:10 법칙은 화면에 쓰는 색의 비율을 정해주는 색 조합 방법이에요 .

색을 아무렇게나 쓰면 쉽게 혼란스럽고 지저분해 보입니다

. 하지만 60:30:10 법칙을 적용하면 ,

색구성만으로도 디자인의 완성도가 훨씬 올라 갈 수 있어요 .

 

바탕색 60% - 디자인의 기반을 만드는 색

주로 넓게 깔리는 전체 배경 ,

큰 영역 , 카드 바탕에 사용돼요 .

눈에 자극적이지 않고 다른 색을 돋보이게 하는 기본 톤이에요 .

예 ) #F2F2E4 아이보리

보조 색 30% - 흐름을 나누는 구조적 색

섹션 구분 , 카드 , 강조 영역의 조직화 역할을 해요 . 바탕색과 조화를 이루면서도 살짝 대비를 줘야 해요 .

예 ) #F2EA7E 레몬색

포인트 색 10% - 시선이 머무는 집중 색

 

버튼 , 중요한 숫자 , 알림 , CTA 등에 사용돼요 .

사용자 행동을 끌어내는 가장 강한 색이에요 .

예) #15038C 짙은 블루 포인트 색을 10% 정도만 쓰면 ,

과하지 않으면서도 시선을 강하게 끌 수 있어요 .

바탕과 보조 색으로 전체 분위기를 잡고 ,

포인트 색으로 주목이 필요한 부분만 강조해 주는 거예요

 

03. 색 조합 사이트 활용하기

컬러 팔레트를 직접 만들기 어려울 때는 ,

전문가들이 이미 만들어 둔 색 조합을 참고하는 것이 큰 도움이 돼요 .

이런 사이트들을 활용하면 디자인 감각이 자연스럽게 길러지고 ,

초보자도 실패 없이 안정적인 색 조합을 사용할 수 있어요 .

 

색상 팔레트 및 테마 | Adobe Express

색상 팔레트 및 테마 | Adobe Express

정민아 여기서는 색상 만든 다음 → 저장 버튼 → 라이브러리 선택 순서야.

1. Adobe Color 페이지에서 로그인 먼저 하기
2. 색상 휠에서 팔레트 만들기
3. 오른쪽/아래쪽에 있는 저장 Save 버튼 누르기
4. 라이브러리 Library 드롭다운에서 저장할 Creative Cloud 라이브러리 선택
   • 없으면 새 라이브러리 만들기 선택
5. 색상 테마 이름 입력
6. 공개하고 싶지 않으면 Publish to Color / Color에 게시 옵션은 꺼두기
7. Save 저장 누르기

어 맞아, 그거 맞아.
지금 뜬 창이 바로 Creative Cloud Libraries에 색상 팔레트 저장하는 창이야.

지금 상태에서 하면 되는 건:

1. 팔레트 이름
   → 내 색상 테마 그대로 둬도 되고, 과제용이면 예를 들어
   카메라광 무드 팔레트 이런 식으로 바꿔도 됨.
2. 저장 위치
   → 지금 귀하의 라이브러리로 되어 있지?
   여기에 저장되는 거 맞아. 드롭다운 눌러서 다른 라이브러리 있으면 선택 가능.
3. 태그
   → 필수 아님.
   그냥 비워도 저장 가능해.
   아래에 있는 파란색, 녹색, 진한, 밝은, 갈색 이런 건 자동 추천 태그야.
4. 아래 보라색 버튼 “라이브러리에 저장” 누르면 끝.

저장 후 확인은:

포토샵 / 일러스트레이터 / 피그마 말고 Adobe 앱에서
창(Window) → 라이브러리(Libraries)
들어가면 저장한 색상 테마가 보여야 해.

안 보이면 거의 Creative Cloud 동기화가 조금 느린 것일 가능성이 커서, 앱 껐다 켜거나 같은 계정인지 확인하면 돼.

 

 

 

저장하면 포토샵/일러스트레이터에서 바로 보려면:

Photoshop / Illustrator → 창(Window) → 라이브러리(Libraries)
여기 들어가면 방금 저장한 색상 테마가 떠야 해.

어도비 공식 설명도 같은 흐름이야. 색상 테마를 만든 뒤 현재 라이브러리를 선택하거나 새 라이브러리를 만들고, 이름/태그를 넣은 다음 저장하면 선택한 라이브러리에서 사용할 수 있다고 되어 있어. 저장된 색상 테마는 Creative Cloud에 동기화되고 데스크톱 앱의 Libraries 패널에서 바로 사용할 수 있어.

안 보이면 거의 이 셋 중 하나야:

로그인 안 됨 / 다른 Adobe 계정으로 로그인함 / Creative Cloud 동기화가 늦음

그럴 땐 Adobe Color랑 포토샵/일러스트레이터가 같은 계정인지 먼저 확인해봐.

 

1. Create( 생성 ) 기능

색상 하나를 선택하면 <보색 , 유사색 , 삼원색> 등 다양한 규칙에 맞춰 팔레트를 자동 생성해줘요

유사 (Analogous) 색상환에서 이웃한 색으로 부드럽고 자연스러운 조합이에요 .

단색 (Monochromatic) 한 색을 기준으로 밝기 · 채도만 바꾼 통일감 있는 조합이에요 .

삼각형 (Triad) 색상환에서 120 도 간격의 세 색으로 균형 잡힌 대비를 만들어요 .

보색 (Complementary) 서로 반대편 색을 사용해 강한 대비와 강조를 줘요 .

분할 보색 (Split Complementary) 보색의 양옆 색을 써서 대비는 유지하되 더 부드럽게 만들어요

정사각형 (Square) 90 도 간격 네 색 조합으로 다채롭고 균형 있는 팔레트를 만들어요 .

혼합 (Compound) 보색 대비를 완화해 안정적이고 차분한 색 조합을 만들어요 .

음영 (Shades) 하나의 색을 기준으로 어둡게만 변화시켜 깊은 느낌을 줘요

 

2. Explore( 탐색 ) 기능

전세계 디자이너들이 만든 팔레트를 인기순 , 최신순 등으로 살펴볼 수 있어요 .

3.Trends( 트렌드 ) 기능

최신 디자인 트렌드를 반영한 분야별 컬러 팔레트를 확인할 수 있어요

 

Color Hunt - Color Palettes for Designers and Artists

Color Hunt - Color Palettes for Designers and Artists

 

 

 

 

💡 Reference( 레퍼런스 ) 란 ?

디자인을 만들 때 참고하는 모든 자료를 이야기해요 . 단순한 참고 자료를 넘어서 , 디자인 방향을 정하고 , 시각적 기준을 잡아주는 근거에 가까워요

 

미메시스 스터디.

핀터레스트 가서 포스터 검색 하면 포스터들이 나오는데 

따라하고 싶은 포스터들을 선택해서 오서택 튜터님한테 말하면 그중에 선택해서 만들어본다.

일주일에 1~2장

강제가 아니다