[내일배움캠프 사전캠프 3주차] 마지막 날의 발표 & 피그마 2주차 강의

 

내배캠 사전캠프 3주차, 15일입니다!

 

그리고 사전캠프의 마지막 날입니다!!!!

사전캠프 끝!!!!

 

 

3주 내내 함께한 팀원들과 헤어진다고 생각하니 아쉽네요. 3주간 함께 채워 넣은 팀노션이 그리울 것 같아요.

파라오 안녕...ㅠㅠ

 

 

그럼 오늘의 Today I Learned 시작하겠습니다. 

 

오늘은 마케팅 용어집을 발표하는 날! 먼저 매니저님의 안내에 따라 ZEP 발표장으로 갔습니다. 

너무 신기하고 귀엽습니다ㅎㅎ

 

그리고 팀 파라오의 마케팅 용어집을 발표하고 왔습니다! 

팀 파라오의 파워포인트

 

첫 번째 순서로 발표를 마친 후, 편하게 다른 팀의 발표를 들었습니다. 마케팅 용어집 발표는 각자 발표하고 싶은 용어를 선택해 진행한 만큼, 저희가 다루지 않은 단어들에 대한 설명도 들을 수 있어 유익했습니다. 또한, Gamma.ai의 다양한 파워포인트 테마를 볼 수 있어서 흥미로웠습니다. 이번 발표 시간을 통해 다른 팀이 어떤 주제로 마케팅 용어집을 구성했고, 어떤 스타일의 파워포인트를 사용했는지를 다양하게 경험할 수 있어 좋았습니다. 

 

 

이렇게 3주간 마케팅 아티클을 읽고 공부한 과정이 마무리되었습니다. 혼자 마케팅 아티클을 읽을 때는 정보가 너무 많아 무엇을 읽어야 할지 헤맨 적이 있었는데, 이번 사전 캠프를 통해 정리된 마케팅 용어와 아티클을 체계적으로 공부할 수 있었습니다 (아티클 사이트도 얻었고요). 😊

---

 

돌아온 피그마_2

 

남은 시간은 피그마 2주차 강의를 들었습니다. 

 

2.5 프레임 리사이징

리사이징(Resizing): 프레임은 기본적으로 가로와 세로 길이기 고정된 상태(Fixed)이지만, 오토레이아웃으로 감싸는 순간 Fixed 외의 다른 사이즈값이 생긴다. 이런 크기 조절 방식이 바로 리사이징, 사이즈가 변경된다는 뜻이다.

• 부모의 리사이징 값에 따라 자식의 리사이징 값이 영향을 받는다.
• 반대로, 자식의 리사이징 값에 따라 부모의 리사이징 값도 영향을 받는다.

리사이징의 종류

값	설명	유형
Fixed	고정값	공통
Hug	자식 컨테이너의 크기에 맞춰 조정	부모만 쓸 수 있음
Fill	부모 컨테이너의 크기에 맞춰 조정	자식만 쓸 수 있음

 

그럼 실습으로 리사이징 값을 확인해 보겠습니다!

 

Parent Container를 누르고 오토레이아웃으로 바꿔줍니다. 

오토레이아웃 속성인 Parent Container

 

 

우측 디자인 패널의 오토레이아웃 패널에 있는 너비와 높이를 확인해 주세요. 너비 위에 "Resizing"이라는 속성이 보입니다. 

 

Parent container는 Fixed (W) x Hug (H) 상태입니다. 

 

Child container는 Fill (W) x Fixed (H) 상태입니다. 

 

Child container의 너비를 Fixed 옵션으로 바꾸면 그림과 같이 Resizing이 없어지고 "Dimensions"이 나온다는 걸 확인할 수 있습니다. 

 

 

Child container이 Resizing 옵션이 왜 Dimensions로 바뀌었을까요? 

 

이유는 간단합니다. 

원래 Child container의 너비는 Fill 옵션이어서, 부모 컨테이너의 너비에 맞춰 자동으로 크기가 조절됩니다. 그래서 이 상태에서는 Resizing 옵션이 표시되죠. 왜냐하면 Resizing = 부모/자식 관계에서 자동으로 크기가 변하는 상태이니까요.

 

그러나 Child container의 너비를 Fixed, 즉 고정으로 바꾸면 부모 컨테이너 크기에 따라 자동으로 변하지 않게 됩니다. 이때 Child container의 자동 조절 기능이 사라지기 때문에 피그마는 Resizing 대신 Dimensions, 즉 고정 크기로 표시를 바꾸는 것입니다.

 

 

예시를 볼까요? 

 

Parent container: W = Hug, Child container: W = Fixed로 설정해주세요. Child container만 늘려도 Parent container의 사이즈는 자동으로 따라옵니다.

 

반대로 Parent container: W = Fixed, Child container: W = Fill로 설정해도 결과는 똑같습니다. Parent container만 늘려도 Child container가 자동으로 Parent container 안을 Fill하기 때문이죠.

좌: Child container 늘린 것, 우: Parent container 늘린 것

 

 

2.6 포지션 이해하기 

앱과 웹사이트에 있는 모든 요소들은 스크롤을 따라 같이 움직입니다. 하지만 웹사이트의 헤더나, 앱의 하단 버튼처럼 위치가 고정된 요소들이 있습니다.이렇게 요소의 위치를 고정하거나 스크롤에 따른 위치를 조정할 때, 포지션이라는 속성을 이용합니다.

 

포지션 종류 

• Static(스태틱): 일반적인 요소들이 가지고 있는 포지션. 기본값이자 스크롤을 하면 같이 따라 같이 움직인다.
• Fixed(픽스드;고정된): 화면 전체를 기준으로 스크롤하더라도 항상 고정된 위치에 있다. 우리가 아는 웹사이트의 헤더나 앱 하단의 버튼 등이 Fixed Position 이다.
• Absolute(앱솔루트): Fixed와 유사하지만, 고정되는 기준이 컨테이너 안이다. 즉, Fixed는 화면 전체를 기준으로 하고, Absolute는 본인이 담겨 있는 부모 컨테이너를 기준으로 한다.
• Sticky(스티키): 스크롤에 따라서 기본값과 Fixed를 전환하는 포지션이다. 스크롤을 따라 움직이다가, 특정 위치부터는 상단에 고정되는 것을 뜻한다.

포지션 설정하는 방법 - 우측 상단의 프로토타입 패널에서 설정할 수 있다.

• Scroll with parent(기본값) : 부모 컨테이너의 스크롤을 따라 간다는 뜻으로, 스태틱을 의미한다.
• Fixed(stay in place) : 현재 위치에 머무른다는 뜻으로, 픽스드을 의미한다.Sticky(stop at top edge) : 맨 위 모서리에서 멈춘다는 뜻으로, 스티키를 의미한다.

 

Absolute의 경우, 포지션 패널 안에서 찾을 수 있다.

• 오토레이아웃 프레임 안에 있을 때만 사용 가능.
• 오토레이아웃에 영향받지 않고, 일반 프레임 안에 있는 것처럼 자유롭게 배치할 수 있음.
  
  

 

 

 

 

마무리

 

 

오늘은 이렇게 사전캠프의 마지막 날을 보냈습니다. 발표를 마무리하고 피그마 강의까지 잘 마무리 했네요. 지금까지 Canva, Gamma.ai, Figma까지 다양한 툴을 경험할 수 있었습니다. 광고 문구 작성(카피라이팅)과 A/B 테스트 실습을 통해 실습도 할 수 있었고요. 

 

3주간 잘 적응했으니 다음 주부터 시작하는 본캠프도 잘 적응해보겠습니다. 

 

그럼 다음 주 월요일에 본캠프로 뵙겠습니다!