★ 220524(화) / UXUI프로젝트십 / 1회차수업

 

[피그마 대지]

 

피그마는 아주 큰 종이

자르지 않은 종이라고 생각하면 됨.

 

아주 무한히 넓어지는 페이지에 종이 쪼가리들을 올리면서 작업하는 것.

 

Frame = 종이

종이(프레임)를 만들 때마다 이름을 붙여주게 되어있다.

 

도형이 됬던, 문장(텍스트)를 만들던, 어떤걸 만들던지 이름을 붙여주어야 함.

**너무 바쁘다면, 프레임에는 꼭!! 명칭을 만들어주기.

 

도형과 종이쪼가리(=프레임=틀)를 잘 구분해야함.

 

 

 

 

[레이어]

 

피그마는 레이어 목록 관리가 굉장히 중요함.

#상단

#메인화면

이렇게 프레임이 따로 있을 땐 형제 관계.

 

 

순서도 중요하다.

#상단   -> 형 (위에 있으면)
#메인화면 -> 동생

 

 

만약,

#상단 을 #메인화면 안에 넣으면 #메인화면은 부모가 되고 #상단은 부모의 자식이 된다.

#메인화면 -> 부모
    #상단   -> 자식

 

 

 

 

 

 

[프레임과 도형 구분]

프레임과 도형은 각각 어떨 때 써야하는지,

둘중에 뭘로 써야하는가?

 

아이콘 만들 때 외에는 모두다 프레임으로 쓰는걸 추천!

프레임이 엄청 많아지게 되는게 정상.

 

 

 

 

[이미지]

피그마에서는 그냥 쌩 이미지는 없다. 

 

도형에 만들어 도형에 이미지를 끼던지.

프레임에 만들어 프레임에 이미지를 끼던지. 

 

그냥 JPG 자체가 독립적으로 존재하지 않다.

 

**도형이나 프레임 만든 후 이미지 가져올 때는 (Unplash 플러그인 사용할 때)

가져올 오브젝트 클릭후 플러그인에서 그냥 클릭해주면 됨.

 

도형을 만든 후 이미지를 가져오면 레이어목록에서 이미지아이콘으로 변함.

이미지를 뺄 때는 오른쪽 디자인 도구 Fill에서 "- 마이너스"를 눌러 빼줌.

 

만약, 바로 이미지를 드래그해서 가져오는 경우에도 도형과 함께 생김.

레이어목록에서 삭제할 경우엔 도형과 함께 삭제되지만, 오른쪽 도구에서 Fill 에서 마이너스로 없애주면 도형만 남음.

 

프레임을 만든 후 이미지를 가져오면 레이어목록에 아이콘이 프레임 그대로임.

하지만 이 안에서 도형을 만들 수 있고, 모든 작업을 할 수 있음.

프레임은 밑에 깔려있는 종이니까!

그리고 그 안에서 작업하면 저절로 그 요소들이 자식이 되므로

레이어들을 다 따로 그룹화하는 작업이 따로 필요없음.

 

 

 

 

 

 

[프레임]

사진과 글을 세트로 만들던가

어떤 오브젝트들을 세트로 만들 때

그룹 으로 하지 말고 프레임으로 묶어준다.

 

SET로 만들 때는 = FRAME

 

 

Frame Selection

도형, 텍스트 만들고 프레임에 집어 넣는 것보다 훨씬 간편한 방법.

프레임 안에 한꺼번에 넣고 싶을 때,

넣을 요소들 클릭해서 오른쪽마우스 -> Frame selection 해주기.

 

 

 

 

 

[텍스트 레이어 명칭]

텍스트 레이어 명칭은 작업하고 있는 공간과는 별개다.

텍스트 레이어 명칭을 바꿔줘도 실제 써져있는 글에는 영향을 끼치지 않음.

나중에 텍스트 레이어 명을 다 똑같이 해주고

한꺼번에 그 내용들을 바꿀 수도 있음.

 

 

 

 

[Constraints(컨스트레인츠)]

고정한 면에 붙어있는 것.

 

부모상자를 기준으로

해당 오브젝트를 왼쪽/오른쪽/위/아래/가운데 원하는 곳에 고정시킬 수 있음.

 

부모의 오른쪽 면에 해당오프젝트 오른쪽면에 고정핀을 꽃은것.

 

Left and right = 왼쪽,오른쪽 둘다 고정핀을 꽃음. = 부모상자를 사이즈를 늘리면 양쪽 넓이가 쭉 늘어남.

 

한마디로, 기준면 설정 이라고 할 수 있다.

 

scale은 비율로 늘림.

늘어나고 줄어들 때 부모상자 기준으로 비례를 늘려주고 줄여주는 것.

처음 딱 눌렀을 때 기준으로 비례가 좌지우지됨.

 

 

 

 

 

[Clip content(클립 컨텐츠)]

넘어가는 부분을 가위로 싹둑 오려주는 것.

안보이게 해주는 거지 실제로는 안에 있음.

히든 시켜주는 것.

overflow hidden과 같음.

 

 

 

 

 

[Overflow scolling(오버플로우 스크롤링)]

프로토타입에서 좌, 우, 아래스크롤링으로 실행해서 볼 수 있음.

 

스크롤 되는 것 안에서 또 스크롤을 만들 때

(아래로 스크롤 되는데 상단 롤링배너 같은걸 또 넣어야 할 때)

 

오버플로우 스크롤링은 디바이스에서 넘치는 화면들이 있을 경우에만 프로토타입 메뉴에서 설정할 수 있게 나옴.

 

 

 

 

 

 

[텍스트 정렬]

Auto width : 텍스트를 쓰면 가로가 계속 쓰는대로 쭈-욱 늘어남. 

줄바꾸기는 엔터쳐서 바꿔줘야함.

 

Auto height : 높이가 자동으로 늘어남. 가로사이즈를 조절하면 그 영역 안에서 글이 써지고, 줄바꾸기가 자동으로 됨. 아래로 계속 늘어남.

 

Fixed size : 영역 틀을 만들고 그 안에서 텍스트를 씀. 그 영역을 벗어나면 텍스트가 보이지 않음.

 

 

왼쪽 : Align top : 쓰면 쓸수록 아래로 영역이 늘어남. 

가운데 : Align middle :  쓰면 쓸수록 위아래로 영역이 늘어남. 

오른쪽 : Align bottom : 쓰면 쓸수록 위로 영역이 늘어남.