[240527] Figma 활용법(1) 1~3주차

[1~2주차]

Figma 활용법(1)의 1~2주차 강의는 사전캠프에서의 PPT보다 쉬운 피그마에서 배운 내용과 겹치는 부분이 많았다.

1주차 강의의 경우, 피그마의 기초에 가까운 내용이었는데도 몰랐던 부분들이 있어 정리해보려고 한다. 

 

1. Team Project 탭과 Draft 탭이 따로 있는데

개인 연습용으로는 생성파일 개수의 제한이 없는 Draft 탭에 새로운 파일을 형성하는 것이 좋다.

 

 

2. 피그마는 자동 저장 시스템이므로 이전 작업물을 남기기 위해서는

1) 컴퓨터에 직접 저장(Save local copy) 하거나

2) 피그마 서버에 기록을 저장(Save to version history)할 수 있다.

* 2)의 경우, 저장한 버전에 대한 기록을 남길 수 있으며, Show version history를 누르면 확인 가능하다.

 

 

---

 

 

2주차 강의의 경우, 프레임과 그룹, 오토레이아웃과 컨스트레인트에 관한 내용이었는데 

과제를 하면서 오토레이아웃과 컨스트레인트 개념들을 더 자세히 알아 볼 수 있었다. 

 

1. 오토레이아웃

1) Child Container의 변화가 Parent Container의 너비/높이 값에 영향을 준다면

Child Container는 Fixed Container/ Parent Container는 Hug Container로 설정

 

2) Parent Container의 변화가 Child Container의 너비/높이 값에 영향을 준다면

Child Container는 Fill Container/ Parent Container는 Fixed Container로 설정

 

2. 컨스트레인트

각 설정에 따라 Parent Container의 크기 변화에 따른 Child Container의 크기 및 위치 변화를 확인할 수 있음

Left = 왼쪽 간격 유지

Right = 오른쪽 간격 유지

Left and right = 좌우 간격 유지

Center = 가운데 고정

Scale = 비율에 맞게 변화

 

 

Top = 위쪽 간격 유지

Bottom = 아래쪽  간격 유지

Top and bottom = 위 아래 고정

Center = 가운데 고정

Scale = 비율에 맞게 변화

 

 

---

 

 

[3주차]

이전까지는 피그마 툴에 관련된 내용이었다면 3주차부터는 디스플레이의 원칙와 UI 디자인의 원칙과 관련된 내용으로 보여졌다.

디스플레이를 제외하고 새로운 개념이 많아 정리할 내용이 많다.

 

1. 분기점(Break Point)

해상도에 따라 서로 다른 화면을 보여주기 위한 기준점이라고 쓰여있는데

간단하게 말하자면, 데스크탑, 태블릿, 모바일 화면을 구분 짓기 위한 픽셀단위의 기준점이라고 할 수 있다.

 

2. 그리드 (8포인트, 4포인트 그리드)

레이아웃 디자인을 하기 위한 기준선.

8은 나누거나 곱해서 만들어지는 숫자들이 정수인 경우의 수가 많아, 8의 배수를 단위로 사용하는 일종의 약속과 같은 규칙.

* 최근에는 디자인이 세밀해져서 8포인트보다 4포인트를 사용하는 경우도 많다.

 

3. 반응형과 적응형

1) 반응형

해상도의 변화에 따라 실시간으로 변화하는 디자인.

 

2) 적응형

해상도의 변화에도 실시간으로 변하지 않는 고정된 디자인.

 

* 두 가지의 형태를 결합한 디자인이 많다.

 

4. 디자인 시스템 (파운데이션 + 컴포넌트)

UI를 효율적으로 관리하고 팀원들과 일관적인 방식으로 작업하기 위한 디자인적 시스템.

* UI 키트와는 다르다. UI 키트는 단순 UI 모음이라면 디자인 시스템은 UI 사용 방식까지 작성된 문서이다.

 

- 파운데이션은 컬러스타일과 폰트 스타일 등 기본 요소를 의미한다

 

 

---

 

 

부트캠프를 시작한 첫날이다. 아침부터 진행된 OT 이후에 가장 먼저 든 마음은 생각보다 일정이 널널하지 않을 것 같다는 우려였다. 그래서 일단은 빠르게 강의를 듣기 시작했다. 그 결과, 4주차의 절반 정도까지 강의를 들을 수 있었다. 1~2주차의 내용은 대부분 이전에 배웠던 내용과 겹치는 부분이 많아서 복습의 기회가 되었고 3주차는 UI 디자인에 대해 좀 더 심화된 내용을 배울 수 있었다. 그리고 4주차는 아직 전부 수강하지는 못했지만 이전에 사전캠프에서 컴포넌트 만들기를 하면서 어려웠던 부분을 이해하는데 도움이 되는 내용이었다. 오늘은 처음부터 계획 없이 강의를 들어서 제대로 집중을 못한 부분도 있었는데 내일은 분량을 정해두고 학습을 진행해야 할 것 같다.