oee

Day 3 _ 그래픽 포스터 벤치마킹, 디자이너 JD 분석

s0_heee_ — Wed, 10 Jun 2026 20:51:58 +0900

27/06/10 ai 컨텐츠 디자이너 본캠프 3일차

목차

- 오늘의 회고
- 포스터 벤치마킹

- JD 분석

오늘의 회고

오늘 학습한 내용

1. 디자인 감각 훈련 _ 포스터 벤치마킹

2. 디자이너 JD 분석

회고

내일 학습할 내용

디자인 감각 훈련 _ 로고 스타일 리서치

개인 학습 _ 미드저니 사용 방법, JD 분석 마무리

강의 _ Photoshop 기초 강의

포스터 벤치마킹

JD 분석

공고 1	잭슨카멜레온 비주얼 디렉터	https://www.wanted.co.kr/wd/342711
공고 2	파이브스페이스 AI 디지털 컨텐츠 디자이너	https://recruit.fivespace.kr/brand
공고 3	유토26 2D 아크웍 및 그래픽 디자이너	https://www.jobkorea.co.kr/Recruit/GI_Read/49234554?rPageCode=SL&logpath=21&sn=6&sc=611

Day 2 _ 디자인 개론, 폰트 레퍼런스 리서치

s0_heee_ — Tue, 9 Jun 2026 19:48:39 +0900

27/06/09 ai 컨텐츠 디자이너 본캠프 2일차

목차

- 오늘의 회고
- 디자인 개론 강의 정리
- 폰트 레퍼런스 리서치

오늘의 회고

오늘 학습한 내용

1. 디자인 개론 _ 타이포그래피, 레이아웃 개념
2. 디자인 감각 훈련 _ 폰트 레퍼런스 리서치

회고

폰트는 글자를 표현하는 도구를 넘어서 메세지의 분위기와 감정을 전달하는 중요한 요소라는 것을 이해하게 되었다. 같은 문장이어도 폰트에 따라서 다른 느낌이 들었다. 디자인에서 매우 중요한 시각 언어라는 것을 느꼈다.

가독성과 개성은 서로 반대되는 성향을 가질 수 있다는 것을 알게 되었다. 개성이 강한 폰트는 분위기를 효과적으로 전달하지만 가독성이 떨어질 수 있었고, 반대로 가독성이 높은 폰트는 안정적이지만 개성이 부족할 수 있었다. 가독성이 높은 폰트는 대체로 신뢰감, 안정감을 주기도 했다. 따라서 목적과 사용에 따라서 적절한 폰트를 선택하는 것이 매우 중요하게 느껴졌다.

개인적으로 선호하는 폰트들은 직선적이고 구조적인 폰트보다는 곡선이 많고 비정형적인 폰트가 많았다. 여백과 리듬감이 있으며, 인간적으로 느껴지는 서체에 끌린다는 공통점이 있었다.

앞으로는 폰트의 구조와 특징을 분석하고, 전달하려는 메세지에 맞는 서체를 선택하는 시각을 기르고 싶다.

내일 학습할 내용

디자인 개론 _ 디자인 프로세스
디자인 감각 훈련 _ 포스터 벤치마킹

개인 학습 _ 미드저니 사용 방법,

면접 예상 질문 읽고 역량 강화가 필요한 내용 정리,

실무 유용 사이트 정리

폰트 레퍼런스 리서치

학습 목표 : 다양한 폰트의 특징을 관찰하고, 폰트가 주는 분위기를 언어로 표현한다.

디자인 개론 - 타이포그래피

타이포그래피란?

글자의 형태, 배열, 크기, 긴격 등을 조절하여 텍스트를 효과적으로 표현하고 전달하는 예술적, 기술적 표현

활판술 또는 활자 서체의 배열

* 활자 : 특정하게 디자인된 글자

좋아보이는 디자인의 비결

목적, 느낌이 명확하게 드러나는 폰트, 행 간격, 글자 간격 그리고 그 타이포그래피와 어우러지는 디자인

타이포그래피의 중요성

정보 전달 : 좋은 타이포그래피는 가독성이 높다.

브랜드 정체성 강화 : 일관된 서체를 사용하여 브랜드의 정체성을 확립하고, 소비자의 기억에 남도록 할 수 있다.

사용자 경험 향상 : 디지털 미디어 환경에서 직관적인 탐색과 콘텐츠 접근성을 제공한다.

> 가독성, 통일성

느낌을 전달하고, 감정을 유발하는 시각적 언어로서의 기능이 포함된다.

글자가 어떻게 시각적으로 전달될지 고민하는 과정이 필요하다.

타이포그래피의 역사

- 인쇄술의 역사

팔만대장경 (1200년대) : 최초의 금속 활자

직지심체요절 (1300년대) : 현존하는 가장 오래된 금속활자본

요하네스 구텐베르크 (1400년대) : 금속활자 인쇄술의 대중화, 성경 인쇄물, 독일

* 인쇄술의 발달로 정보의 홍수, 산업 혁명, 중세에서 근대로의 이동

- 서체의 역사

블랙레터체 : 초기 인쇄술에는 필사체와 흡사한 서체를 사용, 중세 시대, 고딕 건물, 전통과 권위를 상징

로만체 : 인문주의적, 클래식, 그리스 로마 정신 (대표 서체 : 벰보, 가라몬드)

트렌지셔널 : 18세기 신고전주의 서체, 섬세한 표현 (대표 서체 : 바스커빌)

모더니스트 서체 : 정제된 미학, 디스플레이용 서체에 가까움 (대표 서체 : 보더니)

산세리프 서체 : 산업혁명, 인쇄물 수요 폭증, 실용성과 명확성

모더니즘 타이포그래피 : 논리, 질서, 보편성 (대표 서체 : 헬리티카)

디지털 서체 혁명

타이포그래피의 기본

영문 서체의 구성 요소

베이스라인 (소문자의 하단 라인, 잘 맞추는게 중요함), 어센더라인, 엑스라인, 엑스하이트, 디센더

국문 서체의 구성 요소

밑선, 윗선, 무게중심선

세리프 vs 산세리프

세리프 : 필기체 흔적이 남는 서체, 클래식

산세리프 : 산업혁명 이후 생겨난 실용성 중심 서체

자간,어간,행간

글자 사이 : 커닝, 밝은 면적이 동일해 보이도록 설계하여 하나의 폰트에서도 한글의 자간은 다르다

단어 사이 : 어간

행간 : 레딩

네거티브 스페이스

글자 내부, 글자 사이 등 글자 자체의 모양을 제외한 공간. (*글자 자체의 모양 : 포지티브 스페이스)

빈 공간 즉 네거티브 스페이스가 가독성을 높인다.

이 네거티브 스페이스 관점으로 바라보는 게 중요하다.

디자인 개론 - 레이아웃

레이아웃이란?

문자, 이미지 등의 구성 요소를 보기 쉽게 효과적으로 배치하는 작업

시각적으로 균형과 조화를 이루고, 사용자가 효과적으로 정보를 인식할 수 있도록 배치하는 것

정보 전달력 향상

시선의 흐름이 명확하도록 이미지와 텍스트 배치 등이 잘 되어 있는 레이아웃

시각적 위계 형성

여백, 통일성, 중요도에 따른 무게감이 잘 되어 있어 우선순위에 따라 시선이 흐르는 레이아웃

일관성으로 브랜드 이미지 제고

규칙성을 적용하여 일관성과 신뢰감, 아이덴티티가 될 수 있는 레이아웃

사용자 경험 (UX)

> 여백, 배치, 통일성, 하이퍼라키

레이아웃의 핵심 원칙

여백 만들기 : 여백을 적절하면 가독성을 높이고 정보에 집중이 된다.

콘텐츠 그룹화 : 통일성, 근접의 원리. 카테고리가 같은 컨텐츠끼리 그룹화.

핵심 요소의 반복 사용

대비와 강조

정렬, 그리드 : 수평선, 수직선

초점 만들기 : 레이아웃의 시작점

계층 구조 형성

디자인 개론 - 기본 색채학

색상이란?

빛의 반사에 의해 인식되는 시각적 속성

물체가 반사하는 빛의 파장 특성에 따라 다르며 인간의 감각과 심리에 영향을 미치는 요소

색상, 명도, 채도

색상환

3원색 : 프라이머리, 색의 3원색

2차색 : 세컨더리, 색의 3원색을 섞은 색

3차색 : 터시어리, 2차색을 섞은 색

보색 대비

유사색 조화

명도 대비

RGB : 빛의 3원색

CMYK : 인쇄물에 적합함

마케팅과 색채 심리학

색이 주는 감정을 이해하는 것.

잘 선택된 컬러는 브랜드의 아이덴티티가 된다.

Day 1 _ 디자인 개론 / 컬러 팔레트 리서치

s0_heee_ — Mon, 8 Jun 2026 20:28:33 +0900

27/06/08 ai 컨텐츠 디자이너 본캠프 1일차

목차

- 오늘의 회고
- 디자인개론 강의 정리 및 레퍼런스 분석
- 컬러 팔레트 리서치

오늘의 회고

오늘 학습한 내용

1. 디자인 개론 _ 디자인의 정의와 원칙
2. 디자인 감각 훈련 _ 컬러 팔레트 리서치

회고

디자인은 단순히 예쁜 것을 창작하는 것이 아니라, 목적에 따른 설계를 하고 시각적인 문제를 해결하는 역할이라는 것을 다시 한번 느꼈다.

디자인 6가지 원칙에 대해 학습했다. 사용자의 감정에 따라 전략적으로 사고할 수 있도록 해당 원칙들에 대해 숙지하고 분석했다.

원칙을 학습하며 디자인이 단순히 요소를 예쁘게 배치하는 것이 아니라 사용자가 안정감을 느끼도록 시각적 무게를 조절하는 과정이라는 것을 알게 되었다. 특히 대칭 균형과 비대칭 균형의 차이를 비교하며 같은 정보라도 전달되는 분위기가 달라진다는 점이 흥미로웠다.

이러한 원칙에 대해 배우고 나니 분명 며칠 전에 봤던 디자인이 오늘 보니 다른 느낌이었다.
분석하는 습관을 일상에서 적용시키면 재밌을 것 같다. 앞으로 더 많은 것을 보고 배워 보는 눈을 더욱 키우고 싶다.

컬러 팔레트 리서치를 위해 여러 이미지를 분석하며 색상 자체보다 색상의 비율, 명도 차이, 질감, 배경색이 분위기에 큰 영향을 준다는 점을 알게 되었다.

같은 베이지라도 어두운 배경에서는 고급스럽게 보이고 푸른 배경에서는 더 차갑고 깨끗하게 느껴지는 것이 인상적이었다.

학습하며 겪었던 문제점과 해결 과정

문제 : 컬러 팔레트를 분석할 때 어려움을 겪었다. 컬러 팔레트를 보고 어떤 감정이 느껴지고, 왜 컬러 배치가 안정적인지 말로 설명하기가 어려웠다. 보는 눈보다, 설명하는 언어가 부족하다는 것을 알게 되었다.
시도 : 챗지피티에 내가 선택한 이미지를 업로드하여 분석을 지시했다.
해결 : 챗지피티가 분석한 내용을 통해 언어로 인지하고, 나의 방식으로 다시 정리했다.
다시 만나면 : 여러번 반복을 통해 ai 없이도 말로 설명하는 능력을 키워야겠다.
오늘 새롭게 배운 툴 : https://coolors.co

* 이미지에서 색상을 추출하는 사이트.
피그마로도 추출이 가능하지만 해당 사이트도 유용하게 쓸 수 있을 것 같아 기록해본다.

내일 학습할 내용

디자인 개론 _ 타이포그래피, 레이아웃
디자인 감각 훈련 _ 폰트 레퍼런스 리서치

디자인의 정의

목접에 부합하는 설계를 통해 문제를 해결하고 기능성과 심미성을 조화롭게 구현하는 창의적 활동
단순히 예쁘게 만드는 것이 아니라, 사용자의 감정과 감정에 영향을 미치는 전략적 사고 과정

첨언 : ai의 발전으로 기술적인 부분에 대해 도움을 받을 수 있게 되어
디자이너는 더욱 기획, 설계, 사용자 중심의 사고 과정이 중요해졌다.

디자인의 원칙

1. 균형 (balance)
영역을 구성하는 디자인 요소의 시각적 무게를 어느 한 쪽에 치우침 없이 안정적인 구도를 가지도록 배치하는 원리

* 대칭 균형

화면을 가로로 분할하여 대칭 균형을 이룸 비교적 밋밋한 하단에 텍스트를 배치하여 균형을 높임

과일의 요소 자체의 모양은 다르지만 화면에서 차지하는 면적을 거의 동일하게 만들어 안정감이 느껴짐

* 비대칭 균형

비대칭적인 대각선 컬러 분할, 기울어진 이미지 등을 통해 더욱 역동감을 증가시켰다.

움직이는 물고기를 각각 다른 형태와 비대칭적인 위치에 배치. 제목에 시선이 가게끔 배치했다.

2. 대비 (contrast)
서로 상반되는 요소를 함께 배치하려 구성하는 요소들의 대립으로 흥미, 긴장감, 강조 등을 표현하는 원리

크기 대비
색상 대비
형태 대비
* 바우하우스 ?

* 색상 대비

퍼플 / 그린의 보색 대비

이미지 하이라이트에 보라 계열의 보정을 하여 더욱 보색인 그린 컬러에 시선이 가게 되는 효과가 있다. 보라색이라 비교적 강조가 덜 되는 글씨는 크기를 강조하여 전체적으로 안정감이 느껴진다.

블루 / 레드의 보색 대비 마찬가지로 이미지 보정을 통해 컬러 대비를 완성함

화면 상하단의 핑크/블랙 대비와 인물 사진에 대해 색 대비를 적용하여 몽환적이고 예술적인 느낌을 준다.

이미지의 횡단보도를 활용해 흑백의 대비를 주었으며 강렬한 레드 컬러의 타이포를 통해 시선을 끈다.

3. 계층구조 (hierarchy)
시각적 우선순위, 디자인 요소들의 중요도에 따라 계층 구조를 형성하여, 사용자의 주의를 유도하고 정보 전달의 우선순위를 정하는 원리

반복, 리듬감을 사용한 그래픽을 통해 음악이라는 정보를 나타냈으며 가장 중요한 제목은 폰트의 변화 및 굵기로 강조, 그 외의 우선순위에 대해서는 폰트의 크기에 차이를 주었음

폰트 크기와 굵기에 따른 중요도를 표현. 위에서 아래로, 아래에서는 왼쪽에서 오른쪽으로 시야가 이동된다.

4. 통일성 (unity)
일정한 양식과 질서를 통해 다양한 디자인 요소끼지 서로 조화를 이루면서 일관된 메세지를 표현하는 원리

여러가지 정보가 있는데 비슷해 보이게 끔 하여 통일감을 주는 것,
반드시 형태적인 것 뿐만이 아니라, 인포그래피 혹은 시리즈로 제작할 때도 중요한 요소

* 반복

바탕과 대비되는 레드 컬러의 크기가 같은 원을 반복적으로 바용하여 시선을 끈다.

* 근접

사각형 요소의 크기는 다르지만 컬러가 통일감이 있어 안정적으로 느껴진다. 이음풀이라는 제목과 맞게 식물을 나타내는 그린 컬러를 사용했다.

카메라 셔터를 누르는 듯한 역동감을 주는 이미지 배치. 해당 카메라로 찍은 결과물을 말해주는 듯한 직관적인 레이아웃. 이미지는 모두 다르지만 영역이 비슷하게 배치되어 조화롭다.

.

* 정렬

블루/옐로우 컬러가 화면에 차지하는 비율이 비슷하고 원형을 반복적으로 사용하여 균형이 있으며 통일감이 느껴진다.

5. 리듬 (rhythm)
여러가지 디자인 요소들을 규칙적으로 반복하거나, 점진적으로 변화시킴으로써 시각적 율동감을 느끼게 만드는 원리

바탕의 세로 그라데이션 스트라이프와 하단의 원의 반복 등이 리듬감을 느껴지게 한다.

빗방울이 떨어지며 소리가 나는 듯한 느낌을 원형을 반복한 그패픽을 통해 시각적으로 표현하고 있다. 소리의 몸짓이라는 제목에 대해 잘 어우러지는 디자인 요소라고 느껴진다.

중앙의 원이 세로로 반복되며, 강렬한 레드 컬러를 사용해 시선을 집중시킨다. 그 외 요소도 나이키라는 스포츠 브랜드에 맞게 역동성이 느껴지는 그래픽이라고 생각된다.

6. 강조 (emphasis)
특정 요소나 영역을 형태, 색, 크기 등을 강화하여 시선을 집중시키고 주목도를 높여 메시지를 효과적으로 전달하는 원리

본질이라는 키워드를 강조하기 위해 강한 폰트와 굵기를 사용하여 시선을 집중시켰다. 또한 이미지 중앙에 다각형의 별을 배치하여 주목도를 높였다.

사진 출처 : 핀터레스트

컬러 팔레트 리서치

목표 : 좋아하는 디자인의 색상 조합을 분석하고, 색이 주는 분위기를 언어로 표현해본다.

사진 출처 : 핀터레스트

영화 포스터 리디자인 _ 라라랜드

s0_heee_ — Thu, 4 Jun 2026 17:45:47 +0900

기존 포스터에서 아쉬운 점

1. 영화 제목의 존재감이 상대적으로 약하다.

기존 포스터는 인물과 배경 이미지가 중심이 되어 영화 제목이 상대적으로 눈에 잘 들어오지 않는다.
처음 보는 사람은 로맨스 영화라는 느낌은 받을 수 있지만, 작품명을 빠르게 인지하기는 어렵다.

2. 인물과 배경에 시선이 분산된다.

주인공, 가로등, 도시 야경 등 다양한 요소가 한 화면 안에 배치되어 있어 시선이 여러 곳으로 분산된다.
영화의 감성은 잘 전달되지만 핵심 메시지가 즉각적으로 전달되지는 않는다.

3. 현대적인 인상이 부족하다.

기존 포스터는 전형적인 영화 포스터 형식에 가까워 최근 독립영화나 아트포스터에서 볼 수 있는
타이포 중심의 실험적인 느낌은 부족하다.

4. 인물의 감정에 집중하기 어렵다.

전신이 작게 배치되어 있어 두 인물의 표정이나 관계성보다는 전체 풍경이 먼저 보인다.

참고 레퍼런스

포스터 1
폰트의 효과가 몽환적인 느낌이 들어 라라랜드라는 로맨스 뮤직 영화와 잘 어울린다고 생각하여 참고했다.
포스터 2
노을이 질 무렵 익은 핑크빛 배경과 청록색의 색감이 잘 어울린다고 느껴져 컬러 팔레트를 참고했다.
포스터 3
찰나의 감정이 느껴지는 두 인물과 영화 대사 한 줄. 주황색 버스와 초록색 글씨 등 포스터가 감각적이라고 느껴지며 두 인물의 서사도 사진 한 장으로 느껴져 감명받아 해당 이미지를 참고했다.

이미지 선택

이미지FX를 사용하여 이미지 제작
핀터레스트에 검색하여 원하는 이미지 다운로드

개선 사항

개선 1
타이포그래피의 크기와 비중을 확대하여 제목 자체가 시각적 중심 요소가 되도록 재구성하였다.
개선 2
불필요한 시각 요소를 줄이고 핵심 요소만 남겨 미니멀한 레이아웃으로 재구성하였다.
개선 3
참고 포스터의 타이포그래피 스타일을 적용하여 보다 현대적이고 감각적인 분위기를 표현하고자 하였다.
개선 4
인물을 확대하여 배치함으로써 두 사람의 감정과 관계에 더욱 집중할 수 있도록 구성하였다.

최종 선택 시안

1. 이미지 보정
기존 핀터레스트 이미지가 파란 색감이 강조되어 차가운 느낌이었으나 로맨스 영화라는 장르에도 맞지 않고
해당 공간에도 어울리지 않는다고 판단하여 따뜻하고 로맨틱한 무드가 잘 남기도록 이미지 색감 보정
필름 느낌을 내고 싶고 글씨가 덜 선명했으면 해서 이미지에 그래인 이펙트를 적용함

2. 제목 폰트 이펙트
레이어블러 효과를 넣어 몽글몽글한 분위기를 살림

3. 폰트
굵은 서강대 명조체 폰트로 "이 영화는 마법이다" 작성
얇은 프리텐다드 폰트로 수상 이력 작성
기존 라라랜드 포스터의 제목과 유사한 폰트를 사용

4. 컬러
보라색/초록색/아이보리색 사용
보라색과 초록색의 보색 효과
보라색은 이미지와 비슷한 색감이라고 느껴져 자연스럽게 보여짐
아이보리색에 블러 이펙트로 밝은 톤의 제목을 상단에 제목을 배치하여 안정감을 주려고 함

결과에 대한 챗지피티의 피드백

타이포의 비중이 커지면서 인물의 감정선이 상대적으로 약해졌다.
참고 포스터의 미니멀한 무드는 반영했지만, 원작 영화의 상징적인 색감과 분위기가 일부 희석되었다.
제목과 이미지가 분리되어 보여 시각적 결합력이 다소 부족했다.

회고

작업을 진행하며 제목, 카피, 수상 이력 등 모든 요소에 서로 다른 폰트를 사용해 전체적으로 통일감이 부족하다는 점을 느꼈다. 정보를 구분하려는 의도였지만 오히려 시선이 분산될 수 있다는 것을 알게 되었다. 앞으로는 최소한의 폰트만 사용하여 위계를 만들고, 영어와 한글이 함께 사용되는 경우 어떤 폰트 조합이 자연스러운지 추가로 학습해보고자 한다.

[내일배움캠프 사전캠프] AI디자이너 5기 _ Figma 강의, 엔드 픽처

s0_heee_ — Tue, 2 Jun 2026 17:47:27 +0900

피그마 강의

버튼 컴포넌트랑 탭 컨포넌트를 만들었다.

그동안 컴포넌트를 배운 이유.
무한 재사용 정말 간편하다

처음 만들어본 UI인데 결과물은 허접하지만,,
하루에 3,4시간 강의만 들으니 요즘 살짝 힘들었는데
오랜만에 이런 무언가(?)를 만들어보니 뿌듯

계속 연습해야 익숙해질 것 같은데,,
이렇게 오래 공부한게 아까워서라도,,

나의 디자인 엔드픽처

나의 강점

관찰력 > 호기심 > 공감력

작은 차이도 지나치지 않고 발견하고 분석하는 능력
이유를 파고드는 능력
사람의 취향과 감정을 관찰하고 해석하는 능력

내가 관심있는 분야

브랜드 디자인, 컨텐츠 디자인, 그래픽 디자인

미래에 내가 되고 싶은 AI 디자이너

ai를 활용해 높은 감도로 시각적인 경험을 담아내는 독보적인 디자이너
브랜드의 고유의 결을 발견하고 감도있게 확장하는 디자이너
사람들의 감정에 남는 분위기로 재해석하는 디자이너

앞으로 그려가는 나의 모습

저는 왜 어떤 것은 오래 기억에 남고, 어떤 것은 사람의 마음을 움직이게 하는지 궁금합니다.
사람들의 취향과 감정, 그리고 그 안에 담긴 이야기를 관찰하고 분석하는 것을 좋아합니다.
이러한 관찰을 시각적으로 표현하고, 누군가의 기억에 남는 경험을 만드는 디자이너가 되고 싶습니다.

[내일배움캠프 사전캠프] AI디자이너 5기 _ 배너 디자인 제작

s0_heee_ — Fri, 29 May 2026 17:32:22 +0900

어제 했던 기획 되돌아보기

배너 기획안 작성

주제 : 지그재그 앱 내 브랜드 홍보 배너 제작

* 1안

주제	지그재그 _ 어텀 브랜드 소개
배경	지그재그의 구매 고객층을 늘린다
목표	클릭 유도 및 구매
타깃	눈이 높은 20대 젊은 소비자
메세지	에디터가 추천하는 브랜드 눈에 보이지 않은 디테일까지 신경쓴 어텀의 이야기
CTA	핀터레스트 무드가 취향이라면

레퍼런스 이미지

기존 이미지

> 개인적인 의견

오프 더 레코드가 브랜드 이름인지, 어텀이 브랜드 이름인지 헷갈린다. 나도 클릭을 해보고 나서야 브랜드 이름이 뭔지 알았다.
이미지 하단부가 블러 처리 되어 있어 시선을 뺏고 있다. 어디에 집중을 해야하는거지?
해당 배너를 클릭하면 사장님의 스토리가 나오는데, 읽어보니 옷에 진심인 사람이다.
그런데 세일이라는 문구만 배너에 있으니 앞뒤가 안맞는 느낌이다.
할인을 중점에 두기 보다는 상품에 대한 디테일이나 감도를 중점으로 두면 좋을 것 같음.

인스타그램 카드 뉴스처럼 사진 한 장을 보고도 클릭하고 싶도록,
불필요한 요소는 제거하고 감도 높은 이미지 중심으로 수정
주제는 브랜드의 이야기가 궁금하도록 설정하고 할인은 부가적인 설명으로 제작해볼 예정

* 2안

주제	지그재그 _ 마뗑킴 입점 특가
배경	지그재그의 구매 고객층을 늘린다
목표	클릭 유도 및 구매
타깃	눈이 높은 20대 젊은 소비자
메세지	마뗑킴 입점, 30% 할인 쿠폰
CTA	지금 확인하기

레퍼런스 이미지

기존 이미지

> 개인적인 의견

중앙 이미지가 쿠폰인데, 몇 퍼센트 할인인지 안나와있어서 하단 글씨까지 읽어야 하는 한 단계 번거로움 발생하고 있다.
마뗑킴 브랜드는 로고가 시그니처인데, 이미지에 강렬한 컬러와 함께 쿠폰 박스만 나와있어서 이게 전 상품 쿠폰인지, 마뗑킴 쿠폰인지 또 시선이 번거롭다.
바로가기만 버튼을 두고 닫기 버튼은 x 상단에 작게 두면 좋을 것 같다. 구매에 있어서 강조하지 않아도 될 부정적인 요소는 빼기.
NEW 라는 폰트만 다른데, 굳이? 뒤에 입점 기념이라는 말이 있어서 그냥 아예 빼도 될 것 같다.

브랜드가 돋보이는 이미지로 표현하여 마뗑킴을 우선 순위로,
30% 할인과 무료 배송은 부가적인 설명으로 재작성할 계획.

# 어려웠던 점
현재 상태에서 아쉬운 점을 발견하고 수정하는 방향이 더 재밌게 느껴지기도 하고
레퍼런스를 찾는 좋은 방법을 모르다보니 많은 레퍼런스를 찾아보지는 않았다.
사실 어떻게 적합한 레퍼런스를 수집하는지,
수집한 레퍼런스는 어떻게 활용하는지 막막하고 어렵다.
앞으로 어떻게 해결해 나가야 할 지 모르겠다.

배너 디자인 제작

1. GPT로 ImageFX 프롬포트 사용하기

1안

요소	예시
콘셉트/목적	커머스 입점 브랜드 소개 (여성복 브랜드: 어텀)
스타일	인스타그램 카드뉴스, 미니멀, 감성 중심
색상 톤	화이트 폰트, 감각적이고 내추럴한 인물의 이미지
대상 고객	가성비를 중요하게 생각하면서도 감도 높은 20대 여성
구체적 요소	미니멀한 배경, 이미지 중심, 메세지 [에디터가 추천하는 브랜드 눈에 보이지 않은 디테일까지 신경쓴 어텀의 이야기. 핀터레스트 무드를 좋아한다면] 오프더레코드는 제거, 이미지 하단 블러 처리도 제거

2안

요소	예시
콘셉트/목적	커머스 입점 브랜드 할인 정보 (여성복 브랜드: 마뗑킴)
스타일	브랜드를 돋보이게 하는 감성있는 화보 이미지와 간결한 텍스트
색상 톤	브라운, 블랙, 화이트 톤
대상 고객	저렴한 가격을 지향하면서 힙한 무드를 추구하는 20대 여성
구체적 요소	사진은 보그 같은 화보 이미지, 마뗑킴 브랜드 로고 삽입, 30% 할인+무료 배송은 컬러 버튼 같은 쿠폰 아이콘 형식으로 컬러 포인트, 지금 확인하기 라는 버튼 요소를 통해 심리 자극하기, 닫기 버튼은 없애고 우측 상단에 닫기를 의미하는 X 버튼만 삽입

해당 내용을 작성하고 챗지피티에 복사 붙여넣기해서 프롬프트를 만들어 달라고 지시했다.

배너 디자인 제작을 위한 이미지 생성

1안 : 지그재그 어텀 브랜드 홍보 배너

지피티로 만든 프롬프트로 이미지FX가 생성한 이미지

이미지FX 어떻게 쓰는건가요? 진짜 밤티 그 자체인데,,
진짜 이건 아닌 것 같아서
기존 이미지에서 텍스트랑 효과만 빼봤다.

근데 다리를 세개나 만들어놔서 또 수정.

근데 이렇게 기존 이미지를 사용하면
저작권 문제가 있을 것 같아
다시 만들었다.

여전히 완벽히 마음에 들지는 않지만
1안의 이미지 생성은 여기서 끝내기로 했다.

2안 : 마뗑킴 브랜드 홍보 배너

이미지FX로 만든 이미지

보그 화보 이미지, 마뗑킴 로고 이미지를 참고 자료로 첨부하여 지시했다.
두번째 시안을 작성하면서 느낀 건,
참고 이미지를 보내야 더 마음에 드는 결과물이 나온다.
다만, 지금처럼 참고 이미지를 그대로 사용하는 경우가 많은 것 같다.
저작권 문제가 있을거라 다시 수정했다.

완벽하게 마음에 들지는 않지만
그래도 첫 시도와 비교했을 때 많이 나아졌다.

이제 만든 이미지를 바탕으로 피그마에서 텍스트를 작성한다.

피그마를 사용하여 배너 제작하기

1안

2안

[내일배움캠프 사전캠프] AI디자이너 5기 _ 배너 디자인 기획, Figma 강의 요약

s0_heee_ — Thu, 28 May 2026 18:30:12 +0900

배너 디자인 기획 및 제작

1. 디자인 기초 개념

# 배너 디자인?

심미적인 완성도에서 그치는 것이 아닌, 고객의 다음 행동을 이끌어내야 하는 목적이 있다.

그렇기 때문에 고객의 흥미를 일으킬 수 있는 카피라이팅 / 이벤트 이미지 / 제품이 포함된,

마케팅 영역과 디자인 영역이 공존하는 분야이다.

디자인 기초 이론

* 컬러

메인 컬러 : 브랜드의 대표 색, 회사의 정체성이 드러남

포인트 컬러 : 눈길을 끌고 싶을 때 쓰는 색,

메인 컬러와 같이 사용하는 경우 메인 컬러와 잘 어울리게 혹은 강조될 수 있게 사용한다

보조 컬러 : 배경이나 부가적인 요소에 쓰는 색

한 배너에서 색은 2~3개만 쓰는 게 깔끔함

강조하는 부분은 눈에 확 띄는 색으로 사용

* 폰트

굵고 큰 글씨 : 제목이나 강조할 메세지

얇고 작은 글씨 : 설명 문구

특별한 글씨 : 이벤트 배너 혹은 포인트용

한 배너에 폰트는 2개까지만

제목은 크게, 본문은 작게

줄 간격은 120% 정도

* 여백

제목, 이미지, 버튼 사이의 간격은 일정하게

바깥쪽 여백(마진)은 최소한 16px 이상

CTA 주변 공간은 넓게 두어 시선이 잘 가도록 한다

2. Image FX + Chat GPT _ 프롬프트 작성

# Image FX를 사용하는 이유

무료, 스톡 이미지 검색없이 그리고 유료 이미지 구매 없이 바로 생성

여러 스타일을 빠르게 시물레이션 하여 컨셉 테스트 가능

아이디어 스케치 도구로 사용하여 최종 배너는 피그마에서 편집

[목적] + [스타일] + [색감] + [대상] + [구체 요소] 를 프롬프트에 입력

3. 배너 기획안 작성

* 1안

주제 : 지그재그 _ 어텀 브랜드 소개

배경 : 지그재그의 구매 고객층을 늘린다

목표 : 클릭 유도 및 구매

타깃 : 눈이 높은 20대 젊은 소비자

메세지 : 에디터가 추천하는 브랜드

눈에 보이지 않은 디테일까지 신경쓴 어텀의 이야기

CTA : 핀터레스트 무드가 취향이라면

레퍼런스 이미지

기존 이미지

> 개인적인 의견

오프 더 레코드가 브랜드 이름인지, 어텀이 브랜드 이름인지 헷갈린다. 나도 클릭을 해보고 나서야 브랜드 이름이 뭔지 알았다.

이미지 하단부가 블러 처리 되어 있어 시선을 뺏고 있다. 어디에 집중을 해야하는거지?

해당 배너를 클릭하면 사장님의 스토리가 나오는데, 읽어보니 옷에 진심인 사람이다.

그런데 세일이라는 문구만 배너에 있으니 앞뒤가 안맞는 느낌이다.

할인을 중점에 두기 보다는 상품에 대한 디테일이나 감도를 중점으로 두면 좋을 것 같음.

인스타그램 카드 뉴스처럼 사진 한 장을 보고도 클릭하고 싶도록,

불필요한 요소는 제거하고 감도 높은 이미지 중심으로 수정

주제는 브랜드의 이야기가 궁금하도록 설정하고 할인은 부가적인 설명으로 제작해볼 예정

* 2안

주제 : 지그재그 - 마뗑킴 입점 특가

배경 : 지그재그의 구매 고객층을 늘린다

목표 : 클릭 유도 및 구매

타깃 : 눈이 높은 20대 젊은 소비자

메세지 : 마뗑킴 입점, 30% 할인 쿠폰

CTA : 지금 확인하기

레퍼런스 이미지

기존 이미지

> 개인적인 의견

중앙 이미지가 쿠폰이라고 나와있는데, 몇 퍼센트 할인인지 안나와있어서 하단 글씨까지 읽어야 하는 한 단계 번거로움 발생하고 있다.

마뗑킴 브랜드는 로고가 시그니처인데, 이미지에는 강렬한 컬러와 함께 쿠폰 박스만 나와있어서 이게 전 상품 쿠폰인지, 마뗑킴 쿠폰인지 또 시선이 번거롭다.

바로가기만 버튼을 두고 닫기 버튼은 x 상단에 작게 두면 좋을 것 같다. 구매에 있어서 강조하지 않아도 될 부정적인 요소는 빼기.

NEW 라는 폰트만 다른데, 굳이? 뒤에 입점 기념이라는 말이 있어서 그냥 아예 빼도 될 것 같다.

브랜드가 돋보이는 이미지로 표현하여 마뗑킴을 우선 순위로,

30% 할인과 무료 배송은 부가적인 설명으로 재작성할 계획.

피그마 강의 정리

- 디자인 시스템 : 효율성과 디자인의 일관성을 갖추는 것이 중요할 때 사용하는 기능

만드는데 시간이 오래 걸리지만 누가 만들어도 동일한 품질의 디자인이 가능

- UI 키트 : 디자인의 변화가 잦을 때 사용하기 좋은 기능

만드는데 시간이 비교적 적게 걸리지만 효율성과 일관성이 부족해질 가능성이 있음

- 아토믹 디자인 시스템 : 디자인 요소 (원자)를 결합해 만드는 UI

- 마스터 컴포넌트 : 여러개의 개체를 한번에 수정할 때 하나의 개체로 여러개를 수정할 수 있게 만드는 기능

- 인스턴스 : 마스터 컴포넌트를 복제하면 생기는 것. 마스터 컴포넌트를 수정할 때 수정되는 개체

- UI 디자인의 기본

액션 : 버튼

인풋 : 텍스트 박스

인포메이션 : 안내 사항

컨테이너 : 카드

네비게이션 : 페이지를 이동할 때 사용

컨트롤 : 사용자가 값을 수정

- 의사 상태 (Pseudo)

실제로 개체의 속성이 변하게 하는 것이 아니라, 가상의 상태로 바뀌는 것

ex) 버튼에 마우스를 올릴 때 색깔이 바뀌는 건 속성이 바뀐게 아니라 가상의 상태로 바뀐 것임

- 버튼 컴포넌트

누름으로써 중요한 동작을 수행한다.

행동 유도성이 있어야 함. (Affordance)

컨테이너 : 프레임

라벨(레이블) : 사용자에게 안내하는 글씨. 사용자가 글씨를 입력하는 텍스트와는 다름

리딩 엘리먼트 : 버튼 앞에 있는 것

트레일링 엘리먼트 : 버튼 뒤에 있는 것

. . .

* 버튼의 종류

박스 버튼 : 가장 중요한 버튼, 일반 버튼이다.

아웃라인 버튼 : 고스트 버튼, 엠티 버튼. 프라이머리 버튼 (박스 버튼)의 하위 버튼

스플릿 버튼 : 보조 액션 버튼

텍스트 버튼 : 중요도가 낮은 버튼

- 텍스트 필드 컴포넌트

인풋 컨테이너

라벨

리딩 엘리먼트

트레일링 엘리먼트

텍스트

헬퍼 텍스트

* 플레이스 홀더 : 입력 예시 (ex : 이름을 입력하는 칸에 예. 홍길동 이런식으로 써 있는 것)

* 유효성 검사 : 벨리데이션. 지켜야하는 것을 안내

- 컨트롤 컴포넌트

* 기능주의적 관점 : 심미적인 것보다 기능을 수행하는데 불편함이 없는 것을 중요하게 바라보는 관점.

컴포넌트 프로퍼티 : 컴포넌트의 의사 상태를 쉽게 하는 기능

베리언츠 : 프로퍼티의 한 종류. 파운데이션 요소를 변경할 때 주로 사용함

불리언 : 보였다가 안보였다가 하는 기능

인스턴스 스왑 : 인스턴스를 다른 인스턴스로 교체하는 기능

텍스트 : 컴포넌트의 텍스트를 수정하는 기능

수업을 들으면서 노트에 정리, 그리고 블로그로 2차 정리를 하니 이해가 안가던 부분이 뭔지 알게 된다.

이해가 잘 안 가던 부분은 회색으로 표시했다. 남는 시간에 다시 정리 해야겠다.

* 이번주에 할 일 ~5/31

1 피그마 3주차 강의 아티클 정독

2 타이포그래피, 색에 관련된 디자인 서적 읽기

* 사전 캠프가 끝나기 전 할 일 ~6/7

1 AI Literacy TIL 작성

2 디자이너 AX 리서치 퀘스트

3 개인 프로젝트 완성

과연 다 할 수 있을까

[내일배움캠프 사전캠프] AI디자이너 5기 _ Figma 강의 요약 (3-1강~3-5강)

s0_heee_ — Wed, 27 May 2026 18:55:13 +0900

Figma 강의 요약

# 파운데이션

- 파운데이션 : 컴포넌트를 만들기 위해 필요한 재료
- 구성 : 컬러, 폰트, 간격, 여백, 곡률, 그리드, 고도, 아이콘

# 컬러 스타일

- RGB
레드, 그린, 블루

- CMYK
시안, 마젠타, 옐로우, 블랙

- Hex code
컴퓨터에서 R,G,B 색상이 각각 256가지가 보여지는데, 이를 16진법의 코드로 표기함

- 컬러스타일
디자인에서 사용할 컬러 팔레트. 일반적으로 2~3가지를 사용한다.
정했다면 색상의 단계를 만드는 규칙을 만든다. (컬러 팔레트, 쉐이드)

- 컬러 프로파일 (컬러 프로필)
디스플레이가 헥사 코드를 해석할 때 사용하는 색 기준표, 프로그램에 따라 보여지는게 다름

- 컬러스타일의 종류
1) 포인트 컬러 : 프라이머리 컬러 or 악센트 컬러라고도 부름, 가장 중요한 곳에 사용
2) 백그라운드 컬러 : 보통 흰색 (FFFFFF) 사용
3) 세컨더리 컬러 : 서브 컬러, 포인트 컬러를 더 돋보이는 용도로 사용

- 컬러팔레트 (쉐이드)
* 색상의 확장성
컬러 스타일을 정했다면 다양한 상황에 대응할 수 있도록 하기 위해
가장 밝은 단계부터 가장 어두운 단계까지 추가로 만들어 사용한다.
보통은 10단계를 만드는데 이유는 컬러의 명도를 0~100%로 할 때,
10의 단위씩 끊어서 보면 직관적인 판단이 쉬워 커뮤니케이션을 원활하게 할 수 있기 때문이다.
* 1:3:6의 법칙
표준적으로 이상적인 색의 밸런스
포인트 컬러(1) : 세컨더리 컬러(3) : 백그라운드 컬러(6)

* 추가 정보
빛의 3원색 : 가산혼합
색의 3원색 : 감산혼합
가장 어두울 때 : 0%
가장 밝을 때 : 100%

# 컬러 _ 실습

1) 컬러스타일 정하기
피그마 홈 커뮤니티 > coolors > 북마크 및 실행 > 피그마 실행 >
바탕에서 마우스 우측 클릭 > 플러그인 > coolors 선택 >
원하는 컬러팔레트 코드 선택 > 코드 복사 및 개체 컬러에 붙여넣기

2) 컬러팔레트 설정하기
컬러스타일의 컬러를 사각형 개체에 입력 > 사각형 개체 복사 및 붙여넣기 10개 >
첫번째 개체의 Fill Custom 선택 > Hex를 HSL로 변경 >
10개의 각 개체 당 L값(3번째 칸)을 10씩 늘린다 >
각 개체의 이름을 Primary/900,800,700... 으로 설정한다 >
** 피그마 홈 커뮤니티로 가서 > Styler > 북마크 및 실행 >
전체선택 후 바탕 오른쪽 커서 클릭 > 플러그인 > Generate styler 실행 >
우측 바에 컬러 폴더 생성됨

* HSL : 색조/채도/명도의 약자
* / 를 넣는 이유 : 피그마에서 폴더를 생성하라는 명령어

# 폰트 스타일

- 구성 : 패밀리, 굵기, 사이즈, 행간, 자간

* 사이즈 : 16px를 기준으로 2px 늘리거나 줄임
일반적으로 20px 이상의 폰트는 4px씩 늘리거나 줄임
일반적으로 10px 이하로는 사용하지 않음
일반적으로 20px 미만은 본문, 20px이상은 제목에 사용함
* 행간 : Line-height, % 혹은 픽셀 단위. 글자의 크기와 그 사이의 간격.
일반적으로 제목은 120%~135%, 본문은 135%~170%가 표준임
그 중에서도 본문은 150%가 가장 표준적임.
다만 폰트마다 폰트 자체의 여백이 다르기 때문에 서체마다 이상적인 행간도 다름

- 폰트 _ 실습
폰트 설정 > Body/14px,16,18... 으로 이름 변경 >
전체선택 후 바탕 오른쪽 커서 클릭 > 플러그인 >
Generate styler 실행 > 우측 바에 폰트 폴더 생성됨

- 컴포넌트와 인스턴스
- 컴포넌트 : 구성품
- 마스터 컴포넌트 : 하나의 마스터 컴포넌트로 전체 인스턴스의 수정 및 편집이 가능함
- 인스턴스 : 마스터 컴포넌트를 복제하면 인스턴스가 생김
인스턴스 한 개체를 수정하면, 이후에 마스터 컴포넌트의 수정을 해도 적용되지 않음
인스턴스와 마스터 컴포넌트는 분리가 가능 (디태치)
마스터 컴포넌트를 업애도 인스턴스는 사라지지 않음

[내일배움캠프 사전캠프] AI디자이너 5기 _ canva로 내일배움캠프 광고 기획안 작성

s0_heee_ — Tue, 26 May 2026 17:59:06 +0900

오늘의 과제는 캔바를 이용해 광고 기획안 작성하기.

먼저 기획안 작성을 위해 타깃/목적/메세지/카피/톤앤매너를 설정한다.

CTA : 행동을 유도하는 문장

* 좋은 CTA

1. 행동을 유도함 (ex : 지금 신청하기, 포트폴리오 완성, 디자이너 시작하기)

2. 손해 보기 싫게 만듦 (ex : 선착순 모집 마감, 마지막 모집, 국비지원 마감 임박)

3. 미래를 상상하게 함 (ex : ai 시대 이후에도 살아남는 디자이너)

* 포스터 구조에서 CTA의 위치

HOOK | 관심끌기 ⬇️ (ex : ai 디자이너)

VALUE | 왜 좋은지 설명 ⬇️ (ex : 기획부터 편집까지, 전 과정 ai 실습)

CTA | 그래서 지금 뭐할건데? (ex : 97% 국비지원, 지금 신청하기)

# 캔바 작업

챗지피티의 피드백 : 모든 사람이 동시에 소리지르는 느낌이다. 어디서부터 읽어야 할지, 뭐가 핵심인지 흐려지고 있다.

챗지피티의 피드백 : 메인 타이포가 답답함, 글씨는 왼쪽 정렬이 더 세련됨, 상단과 하단 문구가 촌스러움

챗지피티의 피드백 : 시선의 중심이 애매함, 회색, 빨간색, 제목 중에서 어디서부터 어디로 읽어야할지 모르겠음

무한 피드백 굴레에 지쳐 챗지피티 이미지로 만들기.

# 챗지피티 작업

후킹 멘트를 바꿨고, 컬러 방향을 잡으니 그럴듯 해졌다.

1. 오늘 학습 키워드

캔바로 광고 기획안 작성하기

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

광고는 단순히 예쁘게 만드는 게 아니라

사람이 어디를 먼저 보게 할지

설계하는 작업이라는 것을 느꼈다. (feat. CTA)

3. 학습하며 겪었던 문제점 & 에러

- 문제&에러 :

1) 처음에는 핀터레스트에서 본 감각적인 포스터 느낌만 따라가려고 했다.

근데 지금 보니 광고 포스터보다는 정보 전달형 포스터 레퍼런스를 많이 참고한 듯

2) 전달하고 싶은 내용을 전부 강조하려다보니

핵심이 보이지 않고 시선이 분산됐다.

3) 처음에는 예쁜 포스터를 만드는데 집중했는데,

수정할수록 사람의 시선을 멈추게 만드는 게 더 중요하다는 걸 느꼈다.

4) CTA라는 개념을 잘 몰랐다.

- 내가 한 시도

1) 어떤 요소가 먼저 보이는지 수정했다.

2) CTA가 왜 필요한지 따로 찾아보고 공부했다.

- 해결 방법

단순히 정보를 나열하고 많이 보여주는게 아니라,

가장 먼저 보게 만들 문장을 정하고 그 외 요소는 덜어내야 한다.

- 새롭게 알게 된 점

후킹의 중요성을 가장 크게 느꼈다.

[내일배움캠프 사전캠프] AI디자이너 5기 _ 브랜드 광고 분석 / AI Literacy 강의 1-4 / Figma 강의 ~2-8강

s0_heee_ — Fri, 22 May 2026 16:49:58 +0900

# 브랜드 콘텐츠 디자인 _ 브랜드 광고 분석

1. 디자이너가 기획을 알아야 하는 이유

디자인의 어원은 '설계하다'

<지적자본론>-마스다 무네아키

"모든 사람이 디자이너가 되어야 한다."

잘 설계된 디자인이 구매로 이어지고, 기업의 이익이 된다.

즉, 좋은 광고는 화려한 이미지가 아니라, 타깃이 나를 위한 광고네? 라고 느끼게 하는

잘 설계된 광고이다. 그 핵심이 바로 기획이다.

2. 광고 기획의 3단계

* 타깃 / 목적 / 메세지

즉, 누구에게 어떤 행동을 유발하게 할지 정하고,

어떤 문장이나 이미지로 마음을 흔들지 기획하는 것.

타겟을 정하면 > 목적이 결정되고 > 목적이 정해지면 > 메세지가 결정되는 흐름.

이는 순서대로 연결되어야 한다.

* 광고 분석 tip

브랜드명 : 브랜드의 정체성과 톤앤매너

타깃 : 누구에게 말하느냐에 따라 문법이 달라진다

광고 목적 : 광고의 목적에 따라 구성 요소가 달라진다. 목적 중심 콘텐츠 기획력을 강화한다.

핵심 메세지 : 3초 안에 핵심을 전달한다. 짧은 문장, 명확한 표현력, 메세지 중심 사고

시각적 특징 : 콘텐츠 비주얼의 톤앤매너를 분석한다. 감성적 접근이 필요하다. 스타일 가이드를 설정하는 기준.

한줄평 : 이게 맞는지 모르겠습니다. 늘,. 네 늘.

과제에 대한 피드백이 있었으면 하는데 사전 캠프라 그런지 지금까지 피드백이 없어서 아쉽다.

피드백이 정말 중요하다고 생각한단 말입니다,,

# AI Literacy 강의 1-3

1. LLM이란?

- 거대 언어 모델 (large language model)

- 보통 생성형 ai에 포함됨

- 언어를 먹고 언어를 뱉는다.

- 언어를 수치화하여 이해한다.

- 문장을 나누는 기본 단위는 '토큰'

> 인간의 언어를 이해하고 답변하는 ai 모델

2. 파인 튜닝 : ai 모델을 최적화하기 위해 매개변수를 조정하는 활동

미세조정, 새로운 학습, 답변 최대 길이를 수정, 답변 자유도 값 수정

(장단점 - 결과를 예측하기 힘듦, 민감함, 작업 속도가 빠르다. 결과까지 오래 걸린다. 마음에 들지 않으면 새로 조정해야함)

3. LAG(검색증강생성) : LLM의 답변을 최적화하기 위해 외부 지식 베이스를 활용하는 기술

스스로 가공을 해서 보여주는 것, 크래핑을 하는 것을 넘어 활용하여 가공하는 것

(장단점 - 별도 학습이 필요없음, 많은 작업이 필요, 많은 비용, 데이터를 직접 관리해야함)

* 과제 < LLM을 활용하여 내 직무 관련 업무의 문서 만들어 보기 >

예시 상황) 웨딩 1인 기업 개업으로 고객에게 견적서를 작성해야 하는 상황

# AI Literacy 강의 1-4

1. 프롬프트란?

- 프롬프트를 통해서 LLM에게 정체성을 부여하고 명령하는 것

- 지시, 입력값, 문맥, 출력 지시자, 예시

- 자유도(temperature) : 너무 높으면 환각이 발생하고 너무 낮으면 추론 능력이 낮아진다.

- 최대 토큰수 : 너무 많으면 부담이 커지고, 너무 적으면 답변이 짧아진다.

2. 프롬프트 기법 종류

- 제로샷 프롬프트 : 예시 없이 작업을 지시, 사전에 학습된 일반적인 지식에 대해 답변하는 것

예) 평소에 LLM에게 사용할 때 흔히 쓰는 방식. LLM이 뭐야?

장단점 : 별도의 학습을 수행하지 않고 명료허게 지시문만 작성하면 되어 사용자가 입장에서 직관적이고 간편함

기존의 학습된 내용에 오로지 의존함

- 퓨샷 프롬프트 : 소수의 관련 예시를 포함시켜서 성능을 향상시키는 프롬프트 엔지니어링 기법

예) 원문: 나는 오늘 기분이 좋다. 예시: 기분 좋은 하루 / 예시를 참고하여 내 질문에 답변해줘

장단점 : 예시를 포함하기 때문에 다음 출력 결과를 예상할 수 있음.

예시가 명확해야 하며 정확한 답변을 원할수록 더 많은 예시와 에외 처리가 필요함

- Chain-of-Thought Prompting (COT, 생각의 사슬) : 복잡한 문제를 해결할 때 정답을 바로 제시하는 대신,

사고 과정을 단계별로 거쳐 추론하도록 유도하는 방식

예) ~ 질문에 대해 생각의 흐름을 단게별로 적은 후 결론을 말하라.

장단점 : 추론해나가는 과정을 볼 수 있어서 잘못 추론한 부분이 있으면 피드백하기 쉬움

필요없는 내용까지 발대해질 수 있고, 답변 후처리 가공이 필요할 수 있음

_ Tree of Thought (TOT, 생각의 나무) : 복잡한 문제를 나무처럼 여러 가능성을 탐색하여 최적의 경로를 찾는 방식

예) 다음을 tot 방식으로 해결하라. 최소 3가지 대안을 생각하여 각각 평가한 뒤 가장 적절한 것을 선택해 최종 답을 도출하라

장단점 : 어떤 답이 제일 적절한지, 환각은 없는지 검증을 해야하거나 검증이 어려움, 제한을 하는게 좋음

- 구조화 지시 : 구조를 갖춰서 절차지향적으로 프롬프트를 작성하는 방법

장단점 : 절차를 수행하는데 가장 직관적인 방법 (ai가 이해하기 쉬움)

기계의 입장에서 프롬프트를 이해하도록 작성하는 것에 초점을 맞춰야함

- 지식 생성 : 응답 정확도와 추론 능력을 향상시키기 위한 프롬프트 엔지니어링 기법

예) 질문에 답하기 전에 먼저 배경지식을 3~5개 생성하라.

그 지식을 기반으로 최종 답을 작성하라.

장단점 : 정확도와 추론력 향상에 도움이 된다.

답변하기 전에 한번 더 검토할 수 있음, 지식을 습득하면서 답변한다.

생성된 지식이 부정확할 경우 잘못된 정보를 기반으로 하여 답변이 더 크게 틀릴 위험이 있다.

* 과제 < 프롬프트 기법을 사용해 내 직무 관련 업무와 연관지어서 작성한다. >

예시 상황) 웨딩 1인 기업 개업으로 브랜드 디자인을 해야하는 상황

# Figma 강의 ~2-8강

컨스트레인트

- 자식이 부모의 어디를 고정값으로 (기준으로) 변할지 설정하는 것이다.

- 개체에는 파란색 점선으로 표시되어 있다.

- position 안에서 확인 가능하다.

- 가로축, 세로축을 설정하는 것이며 위아래, 스케일 등의 설정이 가능하다.

프레임 리사이징

- 오토 레이아웃 안에서의 변화 설정이다.

- fixed, hug, fill이 있다.

fixed = 고정값

hug = 자식 컨테이너에게 맞춰 부모 컨테이너가 감싸는 형태, 부모만 쓸 수 있다.

예) 자식이 고정일 경우 부모가 축소되면 자식은 잘림

fill = 자식 컨테이너가 부모에게 맞추는 형태, 자식만 쓸 수 있다.

예) 부모가 늘어나면 자식도 늘어남

한줄평 : 강의 3번 복습했는데 진짜 모르겠습니다.. 예.. 리사이징 이해를 못하겠어요;; 누가 멱살 잡고 알려줬으면 좋겠다 ㅜ