[내일배움캠프_UX/UI] 3주차 목요일 TIL

TIL (Today I learned)

 

 

🙄 오늘 나는 무엇을 했나요

빡빡한 일정에 나도 같이 빡세게 움직인 하루

- 새로운 팀원들과의 만남

- 피그마 활용법 (1) 1,2강 수강완료

- 피그마 활용법 (1) 3강 - 5까지 수강완료

- 김소윤 튜터님 특강 

😰 오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요

오늘은 계획표대로 따라가려고 노력했는데 너무 힘들었다.

계획대로 하는게 아직도 여전히 어려운데,

해야할 것들을 어떻게 계획에 잘 넣을지 고민해봐야겠다.

 

🧐 오늘은 어떤 것을 배웠나요

피그마 강의를 두번째 보니 확실히 이해가 잘 되는 부분도 있었다.

다시 한번 더 정리를 할 수 있는 기회가 주어진 것 같아서

여전히 헷갈리거나 다시보니 새로웠던 내용들 위주로 정리해보았다.

 

[1주차]
UXUI디자이너에게 중요한 것
- 사용자의 문제를 해결하려는 끈기와 집요함
- 논리적으로 생각하고, 상대방을 설득할 수 있는, 수용할 수 있는 열린 사고
- 사용자들에 대한 관심, 애정

 

피그마

- 와이어프레임부터 핸드오프까지 과정을 한번에 할 수 있는 툴

- 디자이너부터 개발자까지 쓸 수 있는 협업툴
- 언제, 어디서나 인터넷만 되면 웹사이트로 가능, 맥, 윈도우 모두
- 강력한 커뮤니티, 플러그인과 디자인 자료가 많음
- 쉬운 학습

피그잼
- UX 기획 및 아이데이션에 특화
- 린캔버스, 더블다이아몬드, 사용자 여정 지도 등

피그마 데스크탑 앱
- 알림 바로 받을 수 있음
- 끊기거나 느려지는 것이 덜함

피그마 커뮤니티
- 서비스 제공자가 아닌 사람들이 자체적으로 만드는 서드파티(3rd-party, 제3자)
- 가격, 저작권 확인
- 문제 생겼을 경우 제작자에게 직접 문의

도형 만들기
사각형 + Shift : 정사각형
삼각형 만들고 count로 오각형, 육각형 ... 만들 수 있음

선 + Shift : 수직, 수평, 45도 각도로 움직임
도형 + shift : 15도 각도로 회전
도형 안에 fill로 이미지 넣을 수 있음
이미지 : 최대 사이즈 4096까지만 지원

 

왼쪽부터 : 파일 불러오기 - PC에 저장하기 - 클라우드에 저장하기

 

클라우드에 저장된 파일 보기

PC에 저장하기 : 피그마로고-file-save local file
불러오기 : import
클라우드에 저장 : file - save to version history ->제목과 설명 넣을 수 있음
클라우드 저장 보기 : file - show vershion history, 파일명 옆에 화살표 - show vershion history
이전 버전들 클릭해서 확인 가능
오른쪽 버튼 - restore this version으로 파일 되돌릴 수 있음


[2주차]
- 프레임은 코드 블록을 만듬, 그룹은 개체를 묶는 기능
- 레이어는 화면에 배치하는 규칙
- 오토레이아웃은 빠르고 편하게 만들 수 있도록 하는 기능
- 컨스트레인트은 정렬과 배치 규칙

프레임 : 코드 블록을 만드는 기능이자, 실제 UI로 인식되는 개체
그룹 : 디자인 정리, 편집할 때, 한번에 움직일 때 편의를 위해

fill 적용했을 때, 프레임: 밖에 프레임에 적용, 그룹 : 모든 프레임에 적용

프레임 안에 프레임과 전체 프레임은 별개의 프레임 > 밖에 프레임만 변경
그룹 안에 프레임은 하나로 묶여서 한번에 수정이 됨 > 안에 모든 프레임이 변경

레이어 : 블록처럼 화면 위에서 아래로, 앞뒤로도 쌓임
레이어의 높이 : 가로X세로X높이, width X height X z-index
레이어 접기 : alt + L
복제 : ctrl + D

오토레이아웃
레이어를 쌓고, 프레임을 배치하고 정렬하는 기능
다른 화면들에 대응할 수 있도록 레이아웃에 유연함을 만들어주는 기능
패딩 : 내부여백, 보더 : 가장자리, 마진 : 외부 여백

1) 프레임이 아닌 개체에 오토레이아웃으로 하면 
기본 패딩값을 가진 오토레이아웃 생성
2) 이미 만들어진 프레임에 오토레이아웃으로 하면 
프레임자체가 오토레이아웃으로 변경

 

감싸기 : 일정 길이가 되면 다음 줄로 넘어가게 하는 것
ctrl + enter : 글자 다썼을 때

- 오토레이어 안에서 레이어 순서는 반대로 됨

컨스트레인트

- 오토레이아웃이 움직일때 규칙을 만들어줘야함
- 부모 컨테이너 크기가 변할 때 자신 컨테이너는 어디를 기준으로 움직여야하는지
- 정렬 움직이면 컨스트레인트도 같이 변함

리사이징
- fixed : 고정값
- hug : 자식에게 맞춤, 부모만 쓸 수 있음 
- fill : 부모에게 맞춤, 자식만 쓸 수 있음
- 자식이 fixed면 자식을 움직일 때, 부모가 맞춰서 같이 변함
- 부모가 fixed면 부모를 움직일 때, 자식이 맞춰서 같이 변함
- 둘 다 고정일 수도 있음

 

* fixed란 영어 때문에 더 헷갈리는데

fixed가 변화를 주는 값이라고 생각하는 게 좋은 것 같다.
fixed를 움직여서 다른 값이 따라서 변하는 것

 

 

심각하게 열공모드