오늘 배운 피그마 강의
- 오토레이아웃의 개념
레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 핵심 기능
> 우리는 모두 다양한 크기의 핸드폰과 모니터를 사용한다. 따라서 앱과 웹을 만들 때 이 크기가 바뀌어도 유연하게 대응할 수 있도록 만들어야 한다. 레이아웃에 유연함을 만들어주는 가장 중요한 기능이 바로 오토레이아웃이다.
- 코드 블록의 구조
우리가 보는 화면의 디자인들은 모두 코드 블록으로 이루어져 있다. 이 코드 블록은 피그마에선 프레임으로 만들 수 있다. 이를 컨테이너라고 부른다.
> 패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
> 보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
> 마진(Margin): 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격 - 컨테이너가 만들어지는 원리
오토레이아웃은 개체를 패딩으로 감싸 컨테이너를 만들 때 사용한다.
> 모든 코드 블록은 내부에 들어있는 개체와, 개체를 둘러싼 패딩(내부 여백)으로 만들어진다.
> 우리가 만드는 UI의 크기는 개체의 크기 + 패딩 이다. - 오토레이아웃의 활용
오토레이아웃은 컨테이너를 간격에 맞게 규칙적으로 정렬해주는 기능도 있다.
> 컨테이너를 하나의 객체라고 본다면, 이 개체를 또 패딩으로 감싸서 컨테이너 안에 넣을 수 있다.
> 이 컨테이너들을 여러 개 쌓을 때, 얼마만큼의 간격으로 몇 개 쌓을 건지를 오토레이아웃으로 편하게 만들어 낼 수 있다.
- 프레임과 컨스트레인트
컨스트레인트의 뜻
컨스트레인트(Consrtraint)는 제약(조건), 제한이라는 뜻.
> 오토레이아웃 안에 있는 개체들(자식 개체들)이 움직이는 방식을 제한한다는 뜻이다.
> 부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?를 정할 수 있다.
- 프레임 리사이징
리사이징의 개념
프레임은 기본적으로 가로와 세로 길이가 고정이다. 이 상태를 Fixed(고정된)라고 부른다.
프레임을 오토레이아웃으로 감싸는 순간, Fixed 외의 다른 사이즈값이 생긴다.
> 이것을 리사이징(Re-sizing)이라고 부른다. 사이즈가 변경된다는 뜻
부모 리사이징 값에 따라 자식의 리사이징 값이 영향을 받는다. 반대로 자식의 리사이징 값에 따라 부모의 리사이징 값도 영향을 받는다.
| 값 | 설명 | 유형 |
| Fixed | 고정값 | 공통 |
| Hug | 자식 컨테이너 크기에 맞춰 조정 | 부모만 쓸 수 있음 |
| Fill | 부모 컨테이너 크기에 맞춰 조정 | 자식만 쓸 수 있음 |
- 포지션(Position)
앱과 웹사이트에 있는 모든 요소들은 스크롤하게 되면 스크롤을 따라 같이 움직인다. 하지만 웹사이트의 헤더나 앱의 하단 버튼처럼 위치가 고정된 요소들이 있다. 이렇게 요소의 위치를 고정하거나 스크롤에 따른 위치를 조정할 때, 개발에서 포지션이라는 속성을 조정해서 만든다.
포지션의 종류
- Static(스태틱): 일반적인 요소들이 가지고 있는 포지션이다. 기본값이자 스크롤을 하면 같이 따라 움직인다.
- Fixed(픽스드): 화면 전체를 기준으로 스크롤하더라도 항상 고정된 위치에 있는다. 우리가 아는 웹사이트의 헤더나 앱 하단 버튼 등이 Fixed Position이다.
- Absolute(앱솔루트): Fixed와 유사하지만, 고정되는 기준이 컨테이너 안이다. 즉, Fixed는 화면 전체를 기준으로 하지만, Absolute는 본인이 담겨 있는 부모 컨테이너를 기준으로 한다.
- Sticky(스티키): 스크롤에 따라서 기본값과 Fixed를 전환하는 포지션이다. 스크롤을 따라 움직이다가, 특정 위치로부터 상단에 고정되는 것을 뜻한다.
오늘은 개인과제로 나를 타겟으로 한 광고 찾아보기와 마케팅 용어집 정리를 했다.
사실 수업 전 피그마 2강 숙제를 하면서 완전 멘붕이 와버렸다...아니 강의 들으면서 강사님이랑 할 때는 알겠다 싶은데 숙제로 혼자하면 이게뭐지? 싶다....ㅎ 내맘처럼 안되는 피그마 너란 존재 흑..
어쨌든 멘탈 탈탈 털린채로 수업 시작했는데 개인 과제는 딱히 안어려워서 다행이였다...
마케팅 용어집 정리는... 해도해도 안끝나는 무한 작업... 용어 너무 많구여... 지금 제가 잘 정리하는 건지도 모르겠구여... 이걸 다 외울수 있을지 허허허ㅎㅎㅎ 계속 보다 보면 익숙해질거라 믿는다...!
'스파르타클럽 내일배움캠프' 카테고리의 다른 글
| 내일배움캠프_디지털마케터_3기 (사전캠프 12일차) (0) | 2025.12.23 |
|---|---|
| 내일배움캠프_디지털마케터_3기 (사전캠프 11일차) (0) | 2025.12.22 |
| 내일배움캠프_디지털마케터_3기 (사전캠프 9일차) (0) | 2025.12.18 |
| 내일배움캠프_디지털마케터_3기 (사전캠프 8일차) (0) | 2025.12.17 |
| 내일배움캠프_디지털마케터_3기 (사전캠프 7일차) (0) | 2025.12.16 |