[내일배움캠프 사전캠프] 7일차 - 폰트 스타일, 마스터 컴포넌트, 디자인 시스템, 프롬프트

🌱 TIL (Today I Learned)

 

피그마(Figma) 강의 수강

 

[폰트 스타일]
- 개념
 : 컬러 스타일과 같이 사용할 폰트를 모아둔 목록
 : 폰트 스케일(일정한 규칙에 따라 정렬된 세트)

 

** 연습하기 전에는 폰트 1가지로만 사용하기 !
(이미 배너 디자인할때 2~3개 썼는데 ㅠ)

- 구성(총 5가지)
 1) 패밀리(Family): 폰트 종류(이름)
 2) 굵기(=무게감, Weight): Thin, Light, Regular 등

더 먼저, 중요하게 읽어야 하는 부분을 굵게 사용 (디자이너는 굵기 이름으로, 개발자는 100, 200 등 할당된 크기로)

 3) 크기(Size): 폰트의 크기

일반적으로 16px 시작, 2px -+ (20px 이상일 때는 4px -+, 20px 미만 폰트는 본문, 이상은 제목) ** 10px 미만으로는 사용하지 않는 것을 권장 **

4) 행간(Line-height): 글자의 크기와 그 사이 간격을 합친 값

폰트 높이 조절 시 행간(=글자 줄 사이의 간격) 이용 %(상대적), px(고정) 단위로 나타낼 수 있음 서체마다 기본 여백값이 모두 다름 (프리텐다드, 노토산스, 애플산돌고딕 등)

** 적당한 행간을 적용해야 하는 이유 **
 - 절대적인 값 없음, 적당한 행간 값은 가독성에 큰 영향
 (많은 공부를 통해 적절한 주관적인 값을 찾아내야 함)

* 일반적인 행간 값
 - 제목처럼 굵고 큰 폰트: 120~135%
 - 본문: 135~170% (150이 가장 좋다고 알려짐 - 규칙만들기 간편, 계산도 용이함)

 

★ 주변 모든 것을 보고 인사이트를 만들어라! ★

 5) 자간(Letter-spacing): 글자와 글자 사이의 간격
ㄴ 행간과 마찬가지로 상대/고정 단위 모두 사용 가능

** 역량이 충분할 때 왠만하면 건들지 말기!
(이미.. 배너 디자인 하면서 건들였는데 ㅠ.. 앞으론 노터치!)

 

[폰트 스타일 실습] // 실무에서 폰트 스타일을 다루는 예시 자료 읽어보기 !
1. 제목(Title)
2. 본문(Body)

전일 배운 Styler 플러그인을 사용하여 폰트스타일을 만들었다.

 

 

[마스터 컴포넌트와 인스턴스]
ㄴ 컴포넌트는 파운데이션 요소를 조합해서 만든다.

1. 마스터 컴포넌트: '원본'
 - 피그마에서 쓸 수 있는 컴포넌트 핵심 기능
 - 반복 디자인을 빠르게 사용하기 위해 디자인 복사, 사용 기능
 - 복제하면 복제본인 '인스턴스'가 생김

2. 인스턴스
 - 마스터 컴포넌트의 복제본
 - 컴포넌트의 속성을 그대로 이어받음
 - ◇ 아이콘이 붙어있음 (무언가의 복제본 이라는 뜻)
 - 연결 해제(디패치)

 

[디자인 시스템의 이해]

- 필요 이유: UI는 다른 디자이너도 똑같은 방법으로 만들고 쓸 수 있도록, 개발자도 동일한 생각을 해야함

- 목적: 반복적 UI -> 효율적 관리

ㄴ 팀 전체가 같은 제품을 똑같이 이해하도록!

ex) 디자이너가 '버튼'을 만들 때 "화면 하단에 붙게 한다." 라는 가이드 라인을 만들면 개발자가 보고도 이해할 수 있게

* UI 키트와 디자인 시스템

ex1) 단어 | 문법 -> 단어를 쓰는 규칙이 없다면 괴상한 문장이 생길 수 있음

ㄴ 규칙이 있으면 누가 써도 하나의 문장으로 통일할 수 있음

ex2) 재료 | 레시피 -> 레시피가 없으면 재료만 보고 만드는 사람에 따라 다른 요리가 나옴

ㄴ 디자인 시스템은 상세하게 나와있는 요리책

 

- UI 키트 -> 단어만 있는 느낌

ㄴ 각 UI의 사용법은 없고 UI만 있는 것.

 

[요약]

- UI 키트: 사용 규칙, 방법 존재 X, 단순 UI만 모여있음

- 디자인 시스템: UI 구조, 사용 방법, 유의점까지 상세히 적혀있는 '문서'

ㄴ 구조, 각 상태 정의값, 색상값, 사용 사례 등

-> 디자인 시스템은 UI 자체 뿐만 아니라 UI 규격, 스펙, 사용 사례, 주의 사항 등 총정리 된 종합적인 제품 가이드라인

(만드는 데 몇개월은 소요될 수 있음)

 

※ 유의할 점 ※

- 디자인 시스템이 아니라 UI 키트라고 해서 무조건 나쁜 것은 아님

- 서로 합이 잘 맞고, 팀 인원이 소수라면 디자인 시스템은 비효율적일 수 있음

- 팀과 제품의 발전 단계에 따라 유연하게 선택할 것!

 

[디자인 시스템의 장·단점]

- 장점

 : 디자인을 반복해서 사용할 수 있어 시간, 비용 절감

 : 누가 만들어도 동일한 품질의 제품 설계 가능

 

- 단점

 : 다양한 형태의 UI를 모아 하나로 통일하는 과정이 매우 오래 걸림

 : 필요한 건 소수지만, 그에 비해 UI가 과하게 많아질 수 있음 -> 업데이트 시 노동력이 너무 커질 수 있음

 : 신규 디자인이 필요할 때 디자인 시스템을 활용하면 혁신이 줄어듬

 

[디자인 시스템의 구성요소와 원리]

* UI 구성 요소

- '버튼'  -> 버튼 하나를 뜯어 보면 Color, radius, spacing, font, icon 등 다양한 요소로 구성되어 있음

ㄴ 이 요소 자체로는 기능 X -> 모아서 '버튼'이라는 UI로 결합해야 '눌러서 작동시킨다' 라는 기능이 생김

ㄴ 아토믹 디자인 시스템(원자를 모아서 분자로)

 

 ex) '강아지' -> ㄱ ㅏ ㅇ ㅇ ㅏ ㅈ ㅣ

 

** 디자인 시스템은 너무나 방대하여 강의를 통해 이해하기 어려울 수 있음

!! 디자인 시스템 참고자료 제공해주신 것 꼭 보기 !! - 즐겨찾기 완료

1. 머티리얼 디자인 Material Design -> 머리속에 걍 집어 넣자. 달달 외우기, 영어,,,

2. 라인 디자인 시스템 Line Design System -> 한글 good

3. 밀리의서재 디자인 시스템 millie Design Library 2.0 -> 브런치 글 하단 피그마 파일 링크

4. 라이트닝 디자인 시스템 Lightning Design System -> 슬랙 개발사(세일즈포스) 운영, 분량이 방대하고 복잡

5. 디자인 시스템 DB Design System Database ->  일리야 그레벤이 만든 디자인 시스템 디렉토리, 대부분 해외 서비스

★ 항상 다양한 자료, 소식 볼 수 있는 [채널] 확보해두기★

// 원래 인스타그램이나 sns 잘 안하고.. 팔로우도 안했는데 이런 정보 채널을 많이 찾아서 내가 보기 쉽게 정리해봐야겠다 !

 

 

---

 

 

AI 강의 수강

 

1. 프롬프트란?

ㄴ 하기 요소들이 항상 적용되지는 않음

 

- 지시 (Instruction)  : LLM이 수행해야 하는 명령 - 입력 값 (Input Data)  : LLM이 받아들일 값, 그림, 글 등 - 문맥(Context)  : 추가적인 정보, 어조, 말투 - 출력 지시자(Output Indicator)  : 출력 틀, 양식 - 예시(Example)  : 사용자가 원하는 추가적인 예시

 

* 프롬프트 요소와 매개변수 온도는 상이함 !

- 자유도(temperature: 온도)

 : LLM의 답변 자유도를 설정하는 값

자유도가 너무 높으면 환각 발생, 너무 낮으면 추론 능력이 낮아질 수 있음

 

- 최대 **토큰 수 (LLM 용량이 클 수록 토큰 수 증가 가능)

 : LLM이 소화할 수 있는 최대 토큰 수

**토큰: LLM이 문장을 나누는, 자르는 기준 => GPU 부담이 있어, 제한 필요

 

* 프롬프트는 어떻게 사용할까?

 

- messages 안에 들어가 있는 내용이 프롬프트.

- max_tokens 토큰 제한 300 // 보통 한글은 200~250글자 내외 정도(gpt 기준), 영어는 200~220글자 내외

- 코딩을 해야지만 프롬프트 엔지니어링을 할 수 있는 것은 아님

 

 

2. 프롬프트 기법의 종류

ㄴ 프롬프트 조정 활동: Prompt Engineering

 

 1) Zero-Shot Prompting (직관적)

 : 모델에 예시 없이 원하는 작업 지시, 사전 학습된 일반 지식만으로 문제 해결하는 방법

- 장점: 별도 학습 수행 필요 X, 지시문만 명료하게 작성해도 사용 가능, 사용자 입장에서 직관적이고 간편

- 단점: LLM의 기존 학습 내용에 의존(성능에 오로지 의존하게 됨)

 

 2) Few-Shot Prompting

 : 프롬프트 내에 소수(약간)의 예시를 포함시켜 AI 모델의 성능을 향상시키는 기법

- 장점: 예시를 포함하여 다음 출력 결과 예상 가능

- 단점: 예시가 명확해야하고 정확한 답변을 원할수록 더 많은 예시, 예외 처리가 필요
('Few' 와 거리와 멀어지게 됨)

 

 3) Chain-of-Thought Prompting (생각의 사슬)

 : 복잡한 문제 해결 시, 사고 과정을 단계별로 거쳐 추론하도록 유도하는 방식

- 장점: LLM이 추론해가는 과정을 볼 수 있어, 잘못 추론한 부분 피드백하기 쉬움

- 단점: 필요 없는 내용까지 포함되어 다소 과해질 수 있으며, 답변에 후처리 가공이 필요할 수 있음

 

 4) Tree of Thought (생각의 나무)

 : 복잡한 문제에 대한 해결 과정을 '나무'처럼 여러 가능성을 탐색하고, 최적의 경로를 찾는 방식

- 장점: 여러 해결책을 구할 수 있음

- 단점: 어떤 답이 가장 적절한지, 환각은 없는지에 대한 검증이 필요하거나, 검증하기 어려움

ㄴ 답변 가지 수를 제한하거나, 비용/시간이 가장 적게 드는 법을 설명해줘 라는 문구를 추가하는 것이 좋음

 

 5) Structured Prompting (구조화 지시)

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

ㄴ API 느낌

** 제이슨 형태: key, value로 되어 있는 출력 형식

- 장점: LLM이 절차를 수행하는데 가장 직관적인 방법(왠만해서 이상한 대답 안함)

- 단점: 사람이 이해하는데 초점을 두기보다 '기계'의 입장에서 프롬프트를 이해하도록 작성하는데 초점을 둬야 함

ㄴ 코딩과 유사

 

 6) Generated Knowledge Prompting (지식 생성)

 : 응답 정확도와 추론 능력을 향상시키기 위한 프롬프트 - '엔지니어링 기법' (LLM이 지식을 습득하면서 답변하도록 도와주는 기법)

- 장점: 정확도와 추론력 향상에 도움 -> '모델'이 지식을 정리하고, 사고 기반을 만들기 때문

- 단점: 생성된 지식이 부정확할 시, 오답률이 증가함

 

 

3. 퀴즈

Q1. 다음 중 생성형 LLM의 추론 능력을 이용하는 프롬프트 기법은?

1. Structured prompt

2. Grok

3. RAG

4. CoT (Chain of Thought)

정답 !! 4번 생각의 사슬

 

Q2. 다음 정의를 말해주세요.

1. (단답형) 구조화 된 프롬프트 엔지니어링 방법은?

정답 !! Structured prompt

2. (단답형) LLM이 문장을 나누는 기본 단위는?

정답 !! 토큰

3. (서술형) 프롬프트 엔지니어링이란?

내 대답: LLM의 추론력을 향상시키고 정체성을 부여시켜서 사용자의 적합성을 이끌어내는 기법 !

 

[당일 과제]

오늘 배운 프롬프트 기법들의 예시들을 내 직무 관련 업무와 연관지어서 TIL 내 작성하기

ㄴ 보고서 만들기, 의약품 관련 회사 조사, 코딩, sql 쿼리문 만들기 등

(직접 프롬프트 엔지니어링 진행하기!)

 

 

 > 디자인 관련 지식 조사하기 <

1) Zero-Shot Prompting (직관적)

 

2) Few-Shot Prompting

 

 

3) Chain-of-Thought Prompting (생각의 사슬)

 

 

 

 

 

4) Tree of Thought (생각의 나무)

 

 

  5) Generated Knowledge Prompting (지식 생성)

 

 

 

 

어제 제작한 피그마 광고 디자인 배너를 피드백 받을 수 있을 줄 알았는데

조 별로 일정이 나눠지게 되어 오늘은 자습에 온전히 집중할 수 있었다.

내일 빨리 피드백 받고 싶고.. 디자인 관련 지식이 0.1%라도 점점 쌓이게 되면서

아예 0이었을 때와는 또 다른 느낌을 받고 있는 중이다.

 

오늘도 고생했다~