2026.02.02(월) TIL

아티클 스터디 

 

https://zoey.day/blog?post=91kwev26838d62y46jpg

https://zoey.day/blog?post=91kwev26838d62y46jpg

프롬프트 : 서로 다른 관점을 가진 3명의 전문가로서 토론하고, 합의된 결론을 도출해.

 

https://somako.co.kr/2026%EB%85%84%EC%97%90%EB%8A%94-%EA%BC%AD-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-%EB%A7%88%EC%BC%80%ED%8C%85-%ED%8A%B8%EB%A0%8C%EB%93%9C-10/

2026년에 꼭 알아야 할 10개의 마케팅 트렌드 용어

 

https://www.folin.co/article/9198?utm_source=EMAIL_letter&utm_medium=owned

제일기획→카카오·메타·29CM, 3년 주기 이직 비결은?

 

① 아이데이션: 시작과 끝은 WHY

처음 아이디어를 떠올리고, 디벨롭하는 단계부터 WHY가 탄탄해야 해요. 그래야 내 PT에 자신이 붙어요. 말도 훨씬 잘 나오고요. 왜 이것이어야 하는지 설득되면 모든 건 쉽게 넘어가요.

그러려면 내 생각의 흐름을 정확히 정리할 수 있어야 해요. 멋진 카피, 멋진 시안이 떠오른다고 성급히 단계를 넘어가면 안됩니다.

② 전략: A, B, C안 만들기

내가 원하는 것이 B안이라고 해보죠. 그럼 그걸 어필하기 위해 2개 안을 더 만들어요. 그리고 전략적으로 배치합니다. A는 적절히 좋은 것, C안은 저 멀리 간 것으로요(웃음). 

대행사에서 일할 때 늘 이렇게 3개의 안을 준비했어요. 당연한 줄 알았는데, 바깥으로 나와보니 아니더군요. 비효율적이라 생각할 수 있지만, 설득을 위해서라면 이 정도 시간은 들일 수 있죠. 여기서 중요한 건, A, B, C안이 확실히 달라야 한단 거예요. A, A-1, A-2안이면 안됩니다. 그래야 상대방이 의사결정을 좀 더 수월하게 할 수 있어요.

③제안: PT 집중도를 끌어올리는 아이스 브레이킹 

프레젠테이션을 시작하며 아이스 브레이킹 시간을 2, 3분 정도 가져요. 툭툭 '썰'을 던지거나, 농담을 하거나. 그럼 집중도가 확 올라요. 발표에 대한 마음의 장벽을 낮추죠. 

대행사 시절에 PT 자리를 직간접적으로 경험하면서 어깨 너머 배운 스킬이에요. 공간의 공기를 휘어잡는 CD님들 PT는 일부러 따라다녔고요. 메타에서 외국 동료들의 발표도 유심히 지켜봤어요. 그들의 공통점이었죠. 분위기를 부드럽게 하며 시작한다. 처음엔 시덥잖은 농담을 던지는 것 같아도, 그게 발표 내용으로 연결되면서 '아니, 이게 이렇게 이어진다고?' 임팩트를 남기더라고요.

완벽한 표준어와 아나운서 화법으로 빈 틈 없이 이야기하지 않아도 돼요. 약간 더듬더라도 조곤조곤 말하듯이, 흥미로운 내용으로 접근하는 게 훨씬 효과적일 때가 많아요.

 

---

Ai 리터러시 강의

 

1-2 : Ai의 기본 개념 이해 

ai = 능동적으로 비선형 상황을 처리하는 소프트웨어 

 

기계학습(머신러닝) = 1. 지도학습(규칙기반) 2.비지도 학습(패턴기반) 3.강화 학습(보상기반) 

 

-지도학습 = 기술자의 의도대로 규칙기반, 정답 데이터를 알려주며 해당 로직을 수행하도록 학습시키는 방법 

장점 : 특정 상황을 빠르고 정확하게 처리 

단점 : 유연성이 다소 떨어지는 문제, 정답셋과 데이터를 준비해야 함 

예시 : 스팸 메일 분류, 질병 진단, 성별 예측 > 명확한 답이 있음! 

 

-비지도 학습 : 특정 군집, 패턴을 인식, 많은 정보 속에서 특정 공통점과 차이점 인식

장점 : 정답 데이터가 필요 없음

단점 : 명확한 정답이 없음 

예시 : 상품 추천, 범죄 위험 지역 예측, 고객 분류 > 명확한 답이 없음!

 

최근에는 복합 학습 방법을 많이 사용하는 추세, 그만큼 해결해야 하는 상황이 고도화되고 있음

 

1-3 : 생성형 ai와  LLM의 원리 

 

LLM = Large Language Model(거대 언어 모델) : 대부분 생성형 ai, 인간의 언어로 산출물 발생 

언어를 먹고 언어를 뱉는 ai, 사실 llm은 언어를 이해하지 못함. 단지 예측할 뿐 

 

llm이 어떤 문장을 들으면 모델이 알수 있는 벡터, 스칼라 값과 가장 유사한 값을 대조 

> 다음에 답변해야 하는 가장 적합한 값을 찾음 

>사용자가 만족할지 안 할지 모르지만, 그 값에 해당하는 답변을 함

그래서 llm은 사실 문장의 의미를 모른다! 

 

수치화할 수 있으니, 얼마든지 문장을 저장하고 이해할 수 있음

문장을 수치화(벡터화)하는 방법을 '임베딩'이라 함 

임베딩을 완료한 정보를 바탕으로 트랜스포머 연산을 통해 이해함 

트랜스포머 알고리즘은 실제 의미를 조합하기 위한 로직 

즉, llm이 문장을 이해하기 위한 첫번째 단계는 단어,문장 등 사람의 언어를 임베딩 작업을 통해 수치화하는 것 

 

하지만 이런 방법도 한계 존재, llm 성능을 높이고 싶은데 저 많은 문장들을 전부다 내가 직접 떠먹여줘?

그래서 고안한 방법! 1.fine-tuning(미세 조정) 2.RAG(검색증강생성) 활용 

 

1.fine-tuning(미세 조정) : 표현이 모호할 수 있음. 다만, 특정 매개변수를 수정하는 작업을 의미.

새로운 데이터셋을 학습 시키거나, 답변 자유도 값을 수정하거나, 답변 최대 길이를 수정하거나.. 

장점 : 비교적 작업 속도가 빠름. 매개변수만 조정하면 되는 거니까

단점 : 결과를 보는 데 까지 시간이 오래 걸리고, 결과가 마음에 들지 않으면 새로 미세조정을 해야함 

 

2.RAG(검색증강생성) 활용 : llm이 참고해서 답변을 만들 수 있는 새로운 정보의 장을 활용하는 방법 

쉽게 애기해서 기존의 학습된 내용 + 추가적인 정보

web에 있는 내용을 참고하게 하거나, 서버의 문서의 내용을 참고하게 하거나, 핸드폰의 그림들을 참고하게 하거나.. 

장점 : 별도의 학습을 시키지 않아도 됨. 그냥 새로운 정보들이 있는 밥상을 차려주면 됨 

단점 : RAG를 설계, 구축, 적용, 유지보수 작업 필요. 정말 많은 비용이 들음 

 

상황에 따라 다르지만, 기술자들은 두 방법 모두 사용. 

ai는 좋은 도구일 뿐, 결국은 사람의 손이 필요 

 

1-4 : 프롬프트 기초 - AI에게 잘 묻는법 

 

llm에게 입력하는 모든 문장이 프롬프트 

llm의 정체성, 주 임무, 사용자를 설정하기 위해 프롬프트 사용

쉽게 말하면, 프롬프트란 llm에게 던지는 지시문 

 

프롬프트 요소 :

지시 : llm이 수행해야 하는 명령 

입력 값 : llm이 받아 들일 값, 그림 글 등

문맥 : 추가적인 정보, 어조, 말투

출력 지시자 : 출력 틀, 양식 

예시 : 사용자가 원하는 추가적인 예시 

 

프롬프트 요소와 매개변수 요소는 다르다!

자유도(temperature) : llm의 답변 자유도를 설정하는 값 

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

(위에 매개변수들 말고도 더 많음!) 

자유도가 너무 높으면 환각이 발생하거나 너무 낮으면 추론 능력이 낮아질 수 있다

토큰은 문장을 자르는 기준. llm의 용량이 클 수록 토큰 수를 늘릴 수 있음

 

프롬프트를 더 잘하는 방법이 있을까? 

프롬프트를 조정하는 활동을 프롬프트 엔지니어링이라고 한다!

상황에 따라 다양하게 적욯라 수 있는 프롬프트 엔지니어링 기법이 다양하게 있음 

 

프롬프트 기법 종류 

-zero-shot prompting :모델에 에시 없이 원하는 작업을 지시하여, 사전 학습된 일반적인 지식만으로 문제를 해결하는 방법

예시 : 고양이와 개의 차이를 한 문장으로 설명해줘. 

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

단점 : llm의 기존의 학습된 내용에 오로지 의존 

 

-few-shot prompting : 프롬프트 내에 소수의 관련 예시를 포함시켜서 ai 모델의 성능을 향상시키는 프롬프트 엔지니어링 기법

예시 : 프롬프트에 예시 몇 개 포함

장점 : 에시를 포함하여 다음 출력 결과를 예상할 수 있음

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

 

- chain-of-thought prompting(생각의 사슬) : 복잡한 문제를 해결할 때, 정답을 바로 제시하는 대신 사고 과정을 단게별로 거쳐 추론하도록 유도하는 방식 

예시 : 문제를 단계별로 자세한 사고 과정을 써서 풀어라 ~ 아래 질문에 대해 생각의 흐름을 단계별로 적은 후 결론을 말하라~ 

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

단점 : 필요 없는 내용까지 방대해질 수 있으며, 답변을 후처리 가공이 필요할 수 있음 

 

-tree of thoughts(생각의 나무) : 복잡한 문제의 해결과정을 나무처럼 여러 가지 가능성을 탐색하고 최적의 경로를 찾는 방식 

예시 : 각 단게에서 최소 3가지 대안을 생성하고, 각 대안을 간단히 평가한 뒤, 가장 적절한 경로를 선택해 최종 답을 도출하라~

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

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

 

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

예시 : 다음 질문에 반드시 json 형태로만 답하라. 

장점 : llm이 절차를 수행하는데 가장 직관적인 방법 

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

 

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

예시 : 다음 질문에 답하기 전에 먼저 관련 배경지식을 3~5개 생성하라. 그 지식을 기반으로 최종 답을 작성해라. 

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

단점 : 생성된 지식이 부정확할 경우 잘못된 정보를 기반으로 답이 더크게 틀릴 위험 

 

1-5 실습 : ai와 함께 일하기 

 

챗지피티 

사고과정, 추론과정, 답변하는 과정을 알려줘

찾아라 vs 찾아줘 : 부탁어조보다, 찾아줘(명령조)에 대해서 ai가 더 직관적으로 수행함 

대화가 쌓일수록 답변은 느려지고, 정확도는 올라가고, 비용은 많이 들음 

 

근거는 cot > 근거를 첨부할 때는 너가 어떻게, 왜 그렇게 추론했는지 과정을 나한테 설명해라. 

 

structred prompting 아주 추천! 

 

1-6  : ai와 함께 사는 시대(윤리저작권) 

 

할루시네이션(환각) : 오작동, 오류가 아니라 확률과 예측의 특성때문에 발생하게 되는 현상.

환각을 줄일 수 있는 방법은 여러가지가 있지만, 온도값을 낮추거나 제한점 설계, 추가 학습 등 방법 적용! 

 

모든 생성형 ai가 환각에 대한 가능성을 가지고 있음 

그렇다면 환각이 왜 ai관련 윤리 문제에 있어서 치명적일까?

ㄴ 그릇된 내용이 그대로 사용자에게 전달될 수 있기 때문에 

 

환각에 대응하기 위한 방법 : ai가 생성한 답변을 꼭 검증해보기! 

 

#ai 리터러시 강의 회고 

첫 주차에 들었어야 했던 강의인데.. 미루고 미루다 드디어 완강!

튜터님의 전달력이 너무 좋아서, ai 문외한인 내가 쉽고 재밌게 후딱 들을 수 있었다

챗지피티 유료 구독해서 사용한지도 벌써 2년째..? 정도 되는 것 같은데 

내가 학교 과제나 일상생활에서 사용하면서 느꼈던 막연한 지점들을

딱딱 짚어주셔서 좋았다! 나도 튜터님or 개발자처럼 지피티를 고능하게 쓰고 싶다..

지피티야 미안해~.~

---

#피그마 3-3 

디지털 화면의 원리 : 빛의 3원색으로 구현. RGB= 빨강, 초록, 파랑, 모일수록 밝아짐! 가산혼합!

(전구 켜는 개념으로 이해하기, 모니터는 물감이 아니라 빛, 전구를 많이 켤수록 더 밝아짐!) 

색의 3원색 = 빨강, 노랑, 파랑, 색을 모두 섞으면 까만색, 덜어내야 하기 때문에 감산혼합!

(물감 섞는 개념으로 이해하기, 물감 다 섞으면 검정색!) 

컴퓨터는 빨강,초록,파랑을 각각 256가지 값으로 보여줄 수 있음 (0~255까지 밝기 조절 스위치 개념으로 이해하기)

> 각각의 숫자를 컴퓨터는 16진수로 변환해서 읽음 

> 00~FF (255-> FF / 0 -> 00) 

16진수의 값이 우리가 흔히 아는 헥스코드 #FFFFFF

 

헥스코드 : 빛의 3원색 정보를 16진수로 변환한 코드 

빛의 색상에는 절대적인 기준이 없음. 그래서 디스플레이는 색상을 자기만의 기준으로 해석함 

디스플레이가 코드를 해석할 때 사용하는 색 기준표를 컬러 프로파일이라고 함 

(전세계적으로 사용할 수 있어야 해서, 공신력 있는 기관이나 기업에서 만들어 배포) 

디스플레이 자체 뿐만 아니라, 프로그램 자체에도 컬러 프로파일이 조금씩 다름 

= 같은 pdf 파일이여도 크롬에서 열었을때, 어도비로 열었을 때 색상이 미묘하게 달라질 수 있음

DCI-P3는 Adobe RGB에 비해 초록색 부분이 적지만 대신 빨간색 쪽으로 더 넓게 분포되어 있다 그만큼 초록색보다는 빨간색을 더 정교하게 표현할 수 있다는 뜻.

즉, 디지털 화면은 빛으로 되어 있기 때문에 화면과 프로그램에 따라 차이가 생길 수 있다 ! 

 

컬러스타일 : 디자인에서 사용할 색상을 모아두는 팔레트 

색상을 아무렇게나 사용하는 것이 아니라, 사용할 색상들을 미리 정리해두고 그 안에서 사용

색상의 단게에도 다 규칙이 있음! ui 디자인은 규칙이 매우 중요한 개념!

 

컬러 스타일은 기본적으로 2~3가지 색상으로 만듦 : 포인트컬러와 배경색(흰색) + 회색조 

일반적으로 포인트 컬러 하나만 놓고, 글자와 배경은 흑백 조합으로 사용하는 것 추천

(검정색은 완전 검정보다, 회색조 사용 = 뉴트럴) 

1. 포인트 컬러 = 프라이머리컬러라고도 함. 정말 중요하고 핵심에만 사용 (다른 데에는 사용x) 

2. 백그라운드 컬러 = 배경색, 일반적으로 흰색 

3. 세컨더리 컬리 :  대부분 사용x, 배경색에서 포인트컬러를 뒷받침할 수 있도록 부분에만 사용 

 

색상의 개수는 제품에 따라 정해도 무방. 디자인에는 정해진 답이 없음 

색상을 정했다면, 가장 밝은 단게부터 가장 어두운 단게까지 총 10단계로 만들기

확장성 : 다양한 상황에 대응할 수 있도록, 유연하게 만들어야 함 (더 강조하거나, 덜 강조할 때) 

왜 10단계? 명도와 채도를 기준으로 10단계 > 0~100까지 10단위로 나눌 수 있음 

10 단위로 딱 떨어지기 때문에, 중간에 50단위의 색상을 더 추가하기 쉽고, 색상 간의 차이도 10단위라 알아보기 쉬움 

대부분 10단게로 만들지만, 필요와 목적에 따라 자유롭게 사용 가능! 정해진 답은 없다! 

 

ui 디자인에는 답이 없지만, 이후 커뮤니케이션/비용 발생 부분에 디자이너가 책임져아..

뭐가 최선일지 고민해가는 과정 

 

만들었다고 끝이 아니라, 계속해서 수정/개선해나가야 함. 디자인은 만든 순간 끝이 아니라 시작! 

 

1:3:6 법칙 

 

디자인이 아직 낯설다면 1:3:6법칙을 최대한 지키는 것이 좋음

전체적으로 균형을 만들어주고, 사용자가 집중해야 하는 부분을 더 쉽게 보여줄 수 있음 

포인트컬러의 비율을 화면 10%정도만 씀 ( 구매하기 같은 중요한 버튼에만..) 

배경색이 60%

세컨더리컬러가 30%

 

피그마에서 플러그인을 쓴다는 건 일종의 즐겨찾기 > 북마크하기 

HSL = 색조, 채도, 명도의 앞글자 따서 부르는 말 

젤 마지막에 있는 명도만 조절하면됨

예를 들어, 명도가 42 -> 42를 기준으로 -10씩 한 숫자 2, 12, 22, 32, 42, 52~92까지 

100이라 완전 흰색 나올 경우 99나 98로 맞춰줘야 (완전 흰색 안나오도록 유의) 

 

단축키 

control : 확대/축소

스페이스바 : 이동 

 

참고 자료 

시맨틱 컬러의 개념과 적용 방법

색상 팔레트를 만들 때 사용하는 방법인 시맨틱 컬러 개념을 잘 설명해준 글

https://ditoday.com/how-to-ui%C2%B7ux%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%9D%98-%EC%8B%9C%EB%A9%98%ED%8B%B1-%EC%BB%AC%EB%9F%AC%EB%A5%BC-%EC%95%84%EC%8B%9C%EB%82%98%EC%9A%94/

[HOW TO UI·UX]디자인 시스템의 시멘틱 컬러를 아시나요? - DIGITAL iNSIGHT 디지털 인사이트

 

UI 색상의 시각적인 원리

UI 색상을 정할 때 고려해야 하는 시각 원리들의 개념을 자세하게 설명해둔 글

https://brunch.co.kr/@blckschrl/41

06화 UI를 위한 색

 

UI 디자인 - 색상

UI 디자인에서 색상이란 무엇인지 전체적으로 잘 설명 되어있는 글

https://brunch.co.kr/@chulhochoiucj0/17

모바일 UI 디자인 기본 요소 - 색채 Color

---

#피그마 3-4 폰트 스타일 

 

폰트 스타일 : 사용할 폰트를 모아둔 목록, 폰트 스케일이라고도 함(=일정한 규칙에 따라 정렬된 하나의 세트) 

 

폰트 스타일은 일반적으로 5가지로 이루어짐

1. 패밀리 : 폰트 이름, 폰트의 종류 ex) 맑은 고딕, 프리텐다드

 

2. 굵기(=무게감, weight) : 일반적으로는 굵기라는 뜻이지만, 더 정확하게는 '무게감'을 나타냄(얼마나 더 중요한지) 

디자이너는 보통 Thin, Light, Regular로, 개발자는 100,200 등 굵기에 할당된 숫자로 이야기 

 

font weight 더 찾아보기

 

 

3. 크기 : 일반적으로 16px부터 시작해서 2px씩 줄이거나 늘림

왜? 웹사이트의 기본 폰트 사이즈가 16. 앱이 나오기 이전부터 기본 폰트를 16으로 사용 ~자연스럽게 기본값이 됨 

일반적으로 10 미만으로는 쓰지 않음(크기가 너무 작으면 읽기 힘들어서) 

폰트 크기가 20 이상일 때는 4씩 차이나게 하는 게 일반적

(크기가 커지면 2만큼 크기 차지는 육안으로 구분이 잘 안됨) 

20 미만인 폰트들은 본문에, 20 이상부터는 제목에 사용 

 

4. 행간(Line-height) : 글자 줄 사이의 간격 

%와 같은 상대적인 단위, px처럼 고정 단위로도 나타낼 수 있음

(피그마는 보통 %, 폰트 크기에 비례= 100%일 때, 폰트크기가 16일때는 행간도 16) 

행간 = 글자 크기와 그 사이 간격을 합친 값 

절대적인 값은 없지만, 적당한 행간 값은 가독성에 큰 영향! 

적당한 행간은 정해져 있지 않다. 디자이너가 꾸준히 글자를 쓰고 확인하면서 찾아내야 함.

그러기 위해선 끝없는 디자인 공부가 필요! 생활에서 디자인 유심히 보기! 주변의 모든 곳이 인사이트!

폰트는 폰트 자체가 가진 기본적인 여백이 있음. 이 여백은 우리가 바꿀 수 없는 기본값.

폰트마다 기본값이 다르기 때문에, 디자이너는 폰트에 대해서 잘 알아야 함! 

 

노토산스는 비교적 공간이 많은 편... 프리텐다드는 좁음

 

일반적인 행간 값 : 제목처럼 굵고 큰 폰트는 120~135%, 본문은 135~170% 사이 

본문의 경우 150%이 가장 좋다고 알려져 있음.

ㄴ왜? 150은 2배수로 움직일 수 있음. 규칙을 만들기 편하고, 계산도 쉬움 

처음 디자인에는 프리텐다드 추천!

 

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

일반적으로 ui 디자인에서는 자간 수정하지 않는다! 

 

 

추가 학습 자료 

 

UI 폰트 속성 소개

폰트 속성의 개념을 잘 설명해준 글

https://brunch.co.kr/@blckschrl/40

07화 UI를 위한 타이포그래피

 

폰트 스타일에 대한 실무 방법과 개념

실무적인 관점에서 폰트 스타일을 만드는 방법을 자세하게 설명한 글 

https://mesign.tistory.com/23

디자인 시스템 구축하기 - 폰트 스타일 가이드

 

머티리얼 디자인 - 폰트

머티리얼 디자인은 종합적인 디자인 시스템교과서

특히 폰트를 사용하는 부분이 매우 정교하게 구축되어 있음 

https://m3.material.io/styles/typography/overview

Typography – Material Design 3

 

---

#피그마 3-5 마스터 컴포넌트와 인스턴스 

 

파운데이션 = 기본 단위 

파운데이션을 조합해서 컴포넌트를 만든다!

컴포넌트 = 파운데이션을 조합해 만들어지는 구성품 

컴포넌트라는 표현은 디자인과 개발에서 모두 쓰이는 매우 넓은 개념의 표현 

특히 피그마를 다루는 디자이너들에게 컴포넌트는 '피그마로 만든 UI 블록'과 같은 말로 쓰임 

ui 디자인에서 컴포넌트는 파운데이션을 조합해 만든 디자인 단위의 개념 

but 개발에서는 다른 개념으로 쓰임 .. 맥락을 파악해야! 

 

마스터 컴포넌트(Master Component) 

피그마에서 쓸 수 있는 컴포넌트 기능의 핵심

반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용

복사된 디자인들을 한 번에 수정하거나 편집할 수 있도록 하는 중요한 기능!!

 

피그마에서 마스터 컴포넌트는 ❖ 아이콘이 붙어 있음 

마스터 컴포넌트는 원본임. 따라서 변하지 않음.

원본 그대로이기 때문에, 수정이 필요하면 그냥 수정하면 되고, 지우고 싶다면 그냥 지우면 됨 

마스터 컴포넌트를 복제하면 복제본, 인스턴스가 생김 

 

 

인스턴스 : 마스터 컴포넌트의 복제본 

마스터 컴포넌트를 복사하면 인스턴스가 생김. 컴포넌트의 속성을 그대로 이어받음 

인스턴스는 ◇ 아이콘이 붙어있음. 무언가의 복제본이라는 뜻.

마스터 컴포넌트를 수정하면 인스턴스에도 반영

but 인스턴스를 먼저 수정하면, 마스터 컴포넌트를 수정해도 반영되지 않음 

인스턴스를 수정하는 것이 마스터 컴포넌트 변경사항을 이어 받는 것보다 더 우선 적용됨

 

마스터 컴포넌트를 지우더라도, 인스턴스는 남아 있음 

다만, 인스턴스를 편집하거나 수정하려면 마스터 컴포넌트를 복구해야 함. 

 

연결을 해제하면 인스턴스는 마스터 컴포넌트와 분리되고, 일반 프레임으로 변경됨.

연결 해제는 Detach(디태치; 분리하다)라고 부름

---

3-6 디자인 시스템의 이해 

 

디자인 시스템

목적 :

반복적인 UI를 효율적으로 관리 - 반복적으로 사용하는 UI를 미리 만들어서 효율적으로 사용함 

팀 전체가 같은 정도로 이해 - 모든 디자이너, 개발자가 같은 UI를 이해 

 

UI키트와 디자인 시스템의 차이 

UI키트 = 사용하는 규칙과 방법은 없고, 단순히 UI를 모아둔 것에 지나지 않음 

디자인 시스템 = UI 구조, 쓰는 방법, 유의해야 하는 부분까지 상세하게 적혀 있는 문서 

즉! 디자인 시스템은 문서의 형태를 갖추고 있어야 함 

UI 자체뿐만 아니라, UI의 규격과 스펙, 사용 사레, 주의사항 등이 총망라된 종합적인 제품 가이드라인 

 

상황에 따라 UI키트와 디자인 시스템 중 선택해서 유연하게 사용할 수 있음!

 

요소들이 모여서 버튼이라는 UI로 결합해야, '눌러서 작동시킨다'는 기능이 생김

요소들은 기능을 가지고 있지 않지만, UI를 만드는 기초 재료들

파운데이션들이 모여서 버튼이라는 기능이 생김 

 

아토믹 디자인 시스템 : 기초 재료들을 원자에 비유. 원자를 모아서, 분자를 만드는 게 핵심 개념 

대부분의 디자인 시스템은 이 원리를 바탕으로 가장 작은 원자 요소들을 설게하고,

그 원자들을 모으고 결합하는 규칙을 만들어서 우리가 아는 버튼, 체크박스, 바텀시트, 모달 등을 만들어 냄

 

---

#오늘의 회고 

 

오늘도 일어나서 아티클을 읽다가 

토익 단어책을 오랜만에 펼쳐 보았다

진짜 해야되는데... 막막한 기분 

ㅎ.ㅎ 6월 전엔 하겠지.....?

오늘처럼  습관적으로 단어 책 펴서 읽는 것부터 시작해야겠다 

 

그 담엔 ai리터러시 강의가 오늘까지라고 해서 듣고, 

피그마 강의를 들었다 

UI 디자인에 대한 지식이 없어서 용어들이 낯설었음....

이제 공부하는 루틴에는 적응됐으니,

더 밀도높은 시간을 보내야겠다는 생각이 든다 

(뭔가 하루종일 컴퓨터 앞에 앉아있는데, 가시적으로 남는 게 크게 없는 기분이 든다)

이건 부트캠프랑 자격증 취득이랑 병행하는 게 방법일듯 

하루에 나름의 여유를 가지고 싶다가도, 

금새 초초해지는 게 일상이다 

벌써 이러면 진짜 취준때는 멘탈 관리 어쩌지? 

 

주말에 <마케터의 일> 완독했는데 인상깊은 부분은 따로 정리해둬야겠다 

어제는 일주일만에 외출을 했다 (운동빼고)

엄마아빠랑 안국을 갔는데, 오랜만에 세상 구경하니까 참 신기했다

전시도 보고, 맛있는 것도 먹고, 좋은 시간이었다!

이번주도 열심히 살아야지 화이팅!