update post

Author: lazy-dinosaur

content/posts/프로젝트/Youtube로 피그마 배우기/Youtube로 피그마 배우기-Day1.md

@@ -4,7 +4,7 @@ tags:
   - figma
   - study
 createdAt: 2025-07-01 14:25:50
-modifiedAt: 2025-07-01 15:37:34
+modifiedAt: 2025-07-01 15:57:34
 publish: 프로젝트/Youtube로 피그마 배우기
 related:
   - "[[Youtube로 피그마 배우기]]"
@@ -13,14 +13,20 @@ series: ""
 
 # Youtube로 피그마 배우기-Day1
 
+![피그마 툴바](_assets/attachments/Youtube로%20피그마%20배우기/figma-toolbar.png)
+
 기본 도형및 선은 툴팁을 통해 간편하게 선택하여 그릴 수 있다.
 
 직관적으로 메뉴를 읽어보면 할수 있는것들이 많지만 알아두면 좋은 기능이 몇가지 있다.
 
 ## 벡터 선택 모드
 
+![기본 선택 옵션](_assets/attachments/Youtube로%20피그마%20배우기/figma-normal-select.png)
+
 일반적으로 생성한 물체를 선택하면 레이아웃과 위치 등 옵션을 변경할 수 있다. 여기서 더 나아가서 모형의 구체적인 생김새를 변형시킬 수 있는 모드가 바로 벡터 선택 모드이다.
 
+![벡터 선택 옵션](_assets/attachments/Youtube로%20피그마%20배우기/figma-vector-select.png)
+
 벡터 선택 모드는 도형을 선택한 이후 `엔터`를 누르거나 `더블클릭`을 통해 진입할 수 있다.
 
 ### 벡터모드에서 할 수 있는것

content/posts/프로젝트/Youtube로 피그마 배우기/Youtube로 피그마 배우기.md

@@ -4,14 +4,16 @@ tags:
   - figma
   - study
 createdAt: 2025-07-01 14:01:49
-modifiedAt: 2025-07-01 15:37:39
+modifiedAt: 2025-07-01 15:52:43
 publish: 프로젝트/Youtube로 피그마 배우기
 related: ""
 series: ""
 ---
 
 # Youtube로 피그마 배우기
 
+![피그마 로고](_assets/attachments//Youtube로%20피그마%20배우기/figma-landing.png)
+
 > 미래의 개인프로젝트에 날개를 달아주자
 
 ## 프로젝트 정의

public/meta-data.json

@@ -18,7 +18,7 @@
                             "tags": ["project", "figma", "study"],
                             "series": "",
                             "createdAt": "2025-07-01 14:25:50",
-                            "modifiedAt": "2025-07-01 15:37:34",
+                            "modifiedAt": "2025-07-01 15:57:34",
                             "publish": "프로젝트/Youtube로 피그마 배우기"
                         },
   {
@@ -557,7 +557,7 @@
                             "tags": ["project", "figma", "study"],
                             "series": "",
                             "createdAt": "2025-07-01 14:01:49",
-                            "modifiedAt": "2025-07-01 15:37:39",
+                            "modifiedAt": "2025-07-01 15:52:43",
                             "publish": "프로젝트/Youtube로 피그마 배우기"
                         },
   {

public/post-contents/프로젝트/Youtube로 피그마 배우기/Youtube로 피그마 배우기-Day1.json

@@ -1,4 +1,4 @@
 {
-  "content": "\n# Youtube로 피그마 배우기-Day1\n\n기본 도형및 선은 툴팁을 통해 간편하게 선택하여 그릴 수 있다.\n\n직관적으로 메뉴를 읽어보면 할수 있는것들이 많지만 알아두면 좋은 기능이 몇가지 있다.\n\n## 벡터 선택 모드\n\n일반적으로 생성한 물체를 선택하면 레이아웃과 위치 등 옵션을 변경할 수 있다. 여기서 더 나아가서 모형의 구체적인 생김새를 변형시킬 수 있는 모드가 바로 벡터 선택 모드이다.\n\n벡터 선택 모드는 도형을 선택한 이후 `엔터`를 누르거나 `더블클릭`을 통해 진입할 수 있다.\n\n### 벡터모드에서 할 수 있는것\n\n- 각 포인터들을 움직여 도형의 모습을 바꿀 수 있다.\n- 각 포인터들의 곡률과 각도를 변경시킬 수 있다.\n- 도형의 테두리에 포인터를 추가하여 조작할 수 있다.\n",
+  "content": "\n# Youtube로 피그마 배우기-Day1\n\n![피그마 툴바](_assets/attachments/Youtube로%20피그마%20배우기/figma-toolbar.png)\n\n기본 도형및 선은 툴팁을 통해 간편하게 선택하여 그릴 수 있다.\n\n직관적으로 메뉴를 읽어보면 할수 있는것들이 많지만 알아두면 좋은 기능이 몇가지 있다.\n\n## 벡터 선택 모드\n\n![기본 선택 옵션](_assets/attachments/Youtube로%20피그마%20배우기/figma-normal-select.png)\n\n일반적으로 생성한 물체를 선택하면 레이아웃과 위치 등 옵션을 변경할 수 있다. 여기서 더 나아가서 모형의 구체적인 생김새를 변형시킬 수 있는 모드가 바로 벡터 선택 모드이다.\n\n![벡터 선택 옵션](_assets/attachments/Youtube로%20피그마%20배우기/figma-vector-select.png)\n\n벡터 선택 모드는 도형을 선택한 이후 `엔터`를 누르거나 `더블클릭`을 통해 진입할 수 있다.\n\n### 벡터모드에서 할 수 있는것\n\n- 각 포인터들을 움직여 도형의 모습을 바꿀 수 있다.\n- 각 포인터들의 곡률과 각도를 변경시킬 수 있다.\n- 도형의 테두리에 포인터를 추가하여 조작할 수 있다.\n",
   "plainContent": "기본 도형및 선은 툴팁을 통해 간편하게 선택하여 그릴 수 있다.\n직관적으로 메뉴를 읽어보면 할수 있는것들이 많지만 알아두면 좋은 기능이 몇가지 있다.\n일반적으로 생성한 물체를 선택하면 레이아웃과 위치 등 옵션을 변경할 수 있다. 여기서 더 나아가서 모형의 구체적인 생김새를 변형시킬 수 있는 모드가 바로 벡터 선택 모드이다.\n벡터 선택 모드는 도형을 선택한 이후 엔터를 누르거나 더블클릭을 통해 진입할 수 있다.\n각 포인터들을 움직여 도형의 모습을 바꿀 수 있다.\n각 포인터들의 곡률과 각도를 변경시킬 수 있다.\n도형의 테두리에 포인터를 추가하여 조작할 수 있다."
 }

public/post-contents/프로젝트/Youtube로 피그마 배우기/Youtube로 피그마 배우기.json

@@ -1,4 +1,4 @@
 {
-  "content": "\n# Youtube로 피그마 배우기\n\n> 미래의 개인프로젝트에 날개를 달아주자\n\n## 프로젝트 정의\n\n- 강의 링크: https://www.youtube.com/watch?v=jwCmIBJ8Jtc&ab_channel=freeCodeCamp.org\n\n개인 프로젝트를 진행하면서 디자인 기획의 부재로 프로젝트의 개발 시간이 너무 길어진다. 이를 해결하기 위해 Figma를 배워 빠르게 여러 디자인을 접목해보고 눈으로 확인해 보면서 기획을 완성해 보도록 하자.\n\n### 해결하려는 문제\n\n- 개인 프로젝트를 진행하면서의 디자인 기획의 어려움\n- 취업 활동을 할 때 Figma 경험의 부재\n\n### 핵심 목표\n\n- 피그마의 전반적인 사용법을 공부하도록 한다.\n- 피그마를 활용하여 목업 디자인을 개발할 수 있도록 한다.\n\n## 계획 및 할일\n\n총 10시간 분량의 강의이기 때문에 계획적으로 잘 분량을 나누어서 진행한다.\n\n- [x] (0:00:00) Introduction\n- [x] (0:00:55) Creating A Figma Account\n- [x] (0:02:32) Creating & Naming A Figma Design File\n- [x] (0:04:47) Creating Shapes In Figma\n- [x] (0:07:16) Selection In Figma\n- [x] (0:12:02) Editing Shapes In Figma\n- [x] (0:36:14) Introduction To Typography In Figma\n- [~] (1:01:41) Design Tree In Figma\n- [ ] (1:06:43) First Design Task\n- [ ] (1:20:44) Colors In Figma\n- [ ] (1:44:22) Drawing Tools In Figma\n- [ ] (1:49:20) Margin And Padding In UI UX Design\n- [ ] (1:56:08) Figma AutoLayout\n- [ ] (2:13:48) Formatting Principles In Figma\n- [ ] (2:34:32) Figma Constraints And Resizing\n- [ ] (2:51:11) Website Design in Figma\n- [ ] (2:55:52) Jakob's Principle Of Design\n- [ ] (3:00:25) Introduction to Styles and components\n- [ ] (3:25:29) Figma Component Variants\n- [ ] (3:36:18) Layout Design & Configuration For Websites in Figma\n- [ ] (3:40:07) Layout Grids In Figma\n- [ ] (4:01:22) Introduction To Responsive Design\n- [ ] (4:07:32) Material Design Guide\n- [ ] (6:26:24) Introduction To Tailwind UI\n- [ ] (6:28:24) Tailwind UI Design Project\n- [ ] (7:25:45) Responsive Landing Page Design Project\n- [ ] (8:45:54) Designing Mobile Apps\n- [ ] (8:56:47) Iconography In Figma\n- [ ] (9:02:32) Boolean Groups\n- [ ] (9:09:52) Figma Tokens\n- [ ] (9:18:29) Animation In Figma With Figmotion\n- [ ] (9:36:29) Mobile Design Project\n\n## 핵심 노트 및 자료\n\n### 내부노트\n\n- [[Youtube로 피그마 배우기-Day1]]\n\n### 외부 자료\n\n## 아이디어 및 메모\n\n- 텍스트와 만들어진 도형 모든것들이 svg로 export 가 가능하기에 랜딩페이지의 타이틀처럼 중요한 부분을 코드로 에니메이션을 적용하면 효과적일 것이라고 생각이 든다.\n",
+  "content": "\n# Youtube로 피그마 배우기\n\n![피그마 로고](_assets/attachments//Youtube로%20피그마%20배우기/figma-landing.png)\n\n> 미래의 개인프로젝트에 날개를 달아주자\n\n## 프로젝트 정의\n\n- 강의 링크: https://www.youtube.com/watch?v=jwCmIBJ8Jtc&ab_channel=freeCodeCamp.org\n\n개인 프로젝트를 진행하면서 디자인 기획의 부재로 프로젝트의 개발 시간이 너무 길어진다. 이를 해결하기 위해 Figma를 배워 빠르게 여러 디자인을 접목해보고 눈으로 확인해 보면서 기획을 완성해 보도록 하자.\n\n### 해결하려는 문제\n\n- 개인 프로젝트를 진행하면서의 디자인 기획의 어려움\n- 취업 활동을 할 때 Figma 경험의 부재\n\n### 핵심 목표\n\n- 피그마의 전반적인 사용법을 공부하도록 한다.\n- 피그마를 활용하여 목업 디자인을 개발할 수 있도록 한다.\n\n## 계획 및 할일\n\n총 10시간 분량의 강의이기 때문에 계획적으로 잘 분량을 나누어서 진행한다.\n\n- [x] (0:00:00) Introduction\n- [x] (0:00:55) Creating A Figma Account\n- [x] (0:02:32) Creating & Naming A Figma Design File\n- [x] (0:04:47) Creating Shapes In Figma\n- [x] (0:07:16) Selection In Figma\n- [x] (0:12:02) Editing Shapes In Figma\n- [x] (0:36:14) Introduction To Typography In Figma\n- [~] (1:01:41) Design Tree In Figma\n- [ ] (1:06:43) First Design Task\n- [ ] (1:20:44) Colors In Figma\n- [ ] (1:44:22) Drawing Tools In Figma\n- [ ] (1:49:20) Margin And Padding In UI UX Design\n- [ ] (1:56:08) Figma AutoLayout\n- [ ] (2:13:48) Formatting Principles In Figma\n- [ ] (2:34:32) Figma Constraints And Resizing\n- [ ] (2:51:11) Website Design in Figma\n- [ ] (2:55:52) Jakob's Principle Of Design\n- [ ] (3:00:25) Introduction to Styles and components\n- [ ] (3:25:29) Figma Component Variants\n- [ ] (3:36:18) Layout Design & Configuration For Websites in Figma\n- [ ] (3:40:07) Layout Grids In Figma\n- [ ] (4:01:22) Introduction To Responsive Design\n- [ ] (4:07:32) Material Design Guide\n- [ ] (6:26:24) Introduction To Tailwind UI\n- [ ] (6:28:24) Tailwind UI Design Project\n- [ ] (7:25:45) Responsive Landing Page Design Project\n- [ ] (8:45:54) Designing Mobile Apps\n- [ ] (8:56:47) Iconography In Figma\n- [ ] (9:02:32) Boolean Groups\n- [ ] (9:09:52) Figma Tokens\n- [ ] (9:18:29) Animation In Figma With Figmotion\n- [ ] (9:36:29) Mobile Design Project\n\n## 핵심 노트 및 자료\n\n### 내부노트\n\n- [[Youtube로 피그마 배우기-Day1]]\n\n### 외부 자료\n\n## 아이디어 및 메모\n\n- 텍스트와 만들어진 도형 모든것들이 svg로 export 가 가능하기에 랜딩페이지의 타이틀처럼 중요한 부분을 코드로 에니메이션을 적용하면 효과적일 것이라고 생각이 든다.\n",
   "plainContent": "> 미래의 개인프로젝트에 날개를 달아주자\n강의 링크: https://www.youtube.com/watch?v=jwCmIBJ8Jtc&ab_channel=freeCodeCamp.org\n개인 프로젝트를 진행하면서 디자인 기획의 부재로 프로젝트의 개발 시간이 너무 길어진다. 이를 해결하기 위해 Figma를 배워 빠르게 여러 디자인을 접목해보고 눈으로 확인해 보면서 기획을 완성해 보도록 하자.\n개인 프로젝트를 진행하면서의 디자인 기획의 어려움\n취업 활동을 할 때 Figma 경험의 부재\n피그마의 전반적인 사용법을 공부하도록 한다.\n피그마를 활용하여 목업 디자인을 개발할 수 있도록 한다.\n총 10시간 분량의 강의이기 때문에 계획적으로 잘 분량을 나누어서 진행한다.\n[x] (0:00:00) Introduction\n[x] (0:00:55) Creating A Figma Account\n[x] (0:02:32) Creating & Naming A Figma Design File\n[x] (0:04:47) Creating Shapes In Figma\n[x] (0:07:16) Selection In Figma\n[x] (0:12:02) Editing Shapes In Figma\n[x] (0:36:14) Introduction To Typography In Figma\n[~] (1:01:41) Design Tree In Figma\n[ ] (1:06:43) First Design Task\n[ ] (1:20:44) Colors In Figma\n[ ] (1:44:22) Drawing Tools In Figma\n[ ] (1:49:20) Margin And Padding In UI UX Design\n[ ] (1:56:08) Figma AutoLayout\n[ ] (2:13:48) Formatting Principles In Figma\n[ ] (2:34:32) Figma Constraints And Resizing\n[ ] (2:51:11) Website Design in Figma\n[ ] (2:55:52) Jakob's Principle Of Design\n[ ] (3:00:25) Introduction to Styles and components\n[ ] (3:25:29) Figma Component Variants\n[ ] (3:36:18) Layout Design & Configuration For Websites in Figma\n[ ] (3:40:07) Layout Grids In Figma\n[ ] (4:01:22) Introduction To Responsive Design\n[ ] (4:07:32) Material Design Guide\n[ ] (6:26:24) Introduction To Tailwind UI\n[ ] (6:28:24) Tailwind UI Design Project\n[ ] (7:25:45) Responsive Landing Page Design Project\n[ ] (8:45:54) Designing Mobile Apps\n[ ] (8:56:47) Iconography In Figma\n[ ] (9:02:32) Boolean Groups\n[ ] (9:09:52) Figma Tokens\n[ ] (9:18:29) Animation In Figma With Figmotion\n[ ] (9:36:29) Mobile Design Project\nYoutube로 피그마 배우기-Day1\n텍스트와 만들어진 도형 모든것들이 svg로 export 가 가능하기에 랜딩페이지의 타이틀처럼 중요한 부분을 코드로 에니메이션을 적용하면 효과적일 것이라고 생각이 든다."
 }