[사전캠프 2주차] 금요일 WIL

10/11 일일 목표📝

3주차 1~5강 강의듣기

개인 과제

아티클 스터디

---

 

📖 오늘 배운 내용!

 

파운데이션 이란? UI를 구성하는 구성요소!

파운데이션

위의 사진처럼 버튼을 만들기 위해서는 그 안을 구성하는 색상, 폰트 등 기초 재료인 파운데이션이 필요하다

 

파운데이션의 구성

• 색상
• 서체
• 간격, 여백
• 곡률
• 그리드
• 고도
• 아이콘

 

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

UI에서는 미리 색상을 정해두고 그 안에서 색상들을 사용한다. 기본적으로 2~3가지 색상으로 10단계까지 만들어 사용한다.

1 : 3 : 6 법칙

 

가장중요한 색상인 포인트 컬러는 10% 비율로 사용한다. 전체적인 배경은 60%, 나머지를 30%로 채운다.

1:3:6 법칙으로 전체적으로 균형을 만들어주고, 사용자가 집중해야 할 부분을 잘 보여준다.

 

리디북스를 예시로 만들어본 컬러스타일

 

 

폰트스타일이란? 디자인 시스템에서 사용할 폰트를 모아둔 목록

 

폰트 스타일의 5가지

• 패밀리 : 폰트의 종류/이름
• 굵기 : 정확히는 무게감을 나타낸다. Thin, Light, Regular 등으로 이야기함
• 크기 : 폰트의 크기 (일반적으로 16px로 시작한다 > 웹사이트 기본폰트 사이즈가 16px이기 떄문에 기본값이 됨)
• 행간 : 글자 줄 사이의 간격
• 자간 : 글자 사이의 간격

 

---

 

👩‍🏫 오늘 진행하며 어려웠던 부분

어려웠던 부분은 폰트마다 가진 여백이 달라서, 각자 다르게 행간을 설정해야한다는 점이었다. 일반적이게 150%로 하면 되지만 노토산스처럼 여백이 넓거나 한 폰트가 있다면, 행간을 잘 조절해가면서 맞는행간을 찾아야겠다.

 

피그마에서 처음써보는 기능인 플러그인 coolors, styler 를 사용해보니 신기했다. 아직 적응이 덜 되었지만 앞으로도 여러 종류의 유용한 플러그인들을 사용하게 되면 피그마에서의 디자인이 편리해 지겠다는 생각을했다.

 

 

---

 

 

👀 어려웠던 부분을 어떻게 해결했을까?

강사님께서 말씀하신 노토산스나, 프리텐다드의 폰트들을 다운받아 피그마에서 이리저리 행간을 조절해보았다. 역시 말로 듣는 것보다는 직접 실습하는 편이 도움이 된다. 플러그인 기능들도 한번 더 연습해 컬러스타일, 폰트스타일을 이리저리 연습해보니 확실히 편리한 기능이라는 것을 깨달았다! 😊

 

 

---

📝2주차를 돌아보는 WIL

 

지난 일주일 동안 가장 인상 깊었던 배움에는 뭐가 있었지?

피그마에 대해서 열심히 듣는데, 역시 디자이너는 배움에는 끝이 없고, 정답이 없다는 것이다.😂

인상깊었던 건 목요일에 들었던 특강이 기억에 남는다. 디자이너라고 해서 무조건 디자인과 UIUX에 신경만 써야하는 것이 아니고 개발자와 소통하려면 리액트.. 즉 코딩도 할 줄 알아야 한다는 점이다.

 

그 과정에서 나는 무엇을 깨달았고, 어떤 감정/생각이 들었었지?

예전에 잠깐 일했을때도 간단한 코딩기능들을 나는 할 수 없어서 개발자에게 부탁했지만. 그런 것들을 내가 조금이라도 도와주면 개발자도 일하기 편할 것이라고 생각했다. 물론, 소통도 잘 할 수 있어서 코딩을 배워놓는 것이  내가 프로덕트 디자이너로써 일하는데 도움이 될 것 같다.

 

결과적으로, 현재 나의 상태는 어떻게 되었지?

일주일 동안 피그마에 대해서 열심히 강의를 듣다보니, 그래도 아예 피그마를 모르던 첫째주와는 달리 조금 툴 다루는 법을 배우게 된것같다. 그리고 프로덕트 디자이너라는 직무에 대해서도 여러 아티클과 개인과제를 통해 알게된 것같다. 내가 살짝 만만히 본 것 같다는 점도... 앞으로 열심히 해야겠다!!!!

이 상태에서 다음 일주일을 더 잘 보내려면 무엇이 필요할까?

피그마를 하루빨리 익숙해져 컴포넌트 과제를 하면서 본캠프 전에 피그마에 익숙해져야 겠다고 생각한다. 힘내자.......화이팅 🤗