내배캠 사전캠프 3주차, 14일입니다!
오늘은 내일 있을 발표를 위해 각자 파트의 대본을 작성하고 발표 리허설을 했습니다.
저희 팀 발표 순서는!
......1번입니다 😢
분명 처음에는 1번이 아닌 2번이라 다행이라고 생각했는데, 다른 팀의 사정으로 저희가 1번으로 가게 되었습니다...그래도 발표 준비가 안된 건 아니니까 괜찮을 것 같아요! 오히려 일찍 끝낼 수 있으니 좋죠! 하하하.
이제 발표 준비는 어느 정도 끝났으니 저는 피그마 2주차 강의를 이어서 학습하겠습니다.
어제 블로그에서 마무리 짓지 못한 정렬에 대한 이야기를 마저 하겠습니다.
2.2 레이어 패널
다중개체 정렬) 다중개체를 선택하고 오른쪽 상단의 Alignment 메뉴의 맨 끝에 있는 아이콘을 누르면 다양한 옵션이 나옵니다. 이제 차례대로 어떤 옵션인지 알아보겠습니다.
Tidy up: 정리하기. 선택된 개체들을 가로 세로를 딱 맞춰서 정렬한다.
Distribute vertical spacing: 수직 간격 균등 분배. 선택된 개체들 사이의 세로 간격을 균일하게 맞춘다.
Distribute horizontal spacing: 수평 간격 균등 분배. 선택된 개체들 사이의 가로 간격을 균일하게 맞춘다.
2.3 오토레이아웃
오토레이아웃: 레이아웃에 유연함을 만들어 주는 기능으로, 컨테이너 내의 요소들이 자동으로 정렬되고 반응형으로 크기가 조절된다.
2.3.1 코드 블록의 구조
패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백.
보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리.
마진(Margin): 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격
2.3.2 컨테이너가 만들어지는 원리
오토레이아웃은 개체를 패딩으로 감싸 컨테이너(틀)를 만들 때 사용된다. 모든 코드 블록은 내부에 들어있는 개체와, 개체를 둘러싼 패딩(내부 여백)으로 구성된다. 즉, 우리가 만드는 UI의 크기는 개체의 크기 + 패딩이다 (개체 = 내용물 크기 + 패딩 = 여백 크기)
컨테이너 = 개체 + 패딩
2.3.3 컨테이너를 쌓으려면?
컨테이너를 하나의 개체라고 본다면, 이 개체를 다시 패딩으로 감싸서 또 다른 컨테이너 안에 넣을 수 있다. 이 컨테이너들을 여러 개 쌓을 때, 얼마만큼의 간격으로 몇 개를 쌓을 건지를 오토레이아웃으로 편하게 만들어 낼 수 있다.
개념 정리
- 오토레이아웃 = 레이아웃을 자동으로 조정하는 기능.
- 오토레이아웃은 개체를 패딩(내부 여백)으로 감싸 컨테이너를 만든다
- 오토레이아웃은 설정한 간격에 맞춰 여러 컨테이너를 쌓을 수 있다 (레이아웃 위에 레이아웃)
그럼 한 번 실습으로 두 가지 방법으로 텍스트 레이아웃을 만들어 볼게요.
1번) 새 오토레이아웃 컨테이너 만들기
먼저 '컨테이너1'과 '컨테이너2'라는 이름의 텍스트를 입력합니다. 텍스트 하나를 오른쪽 클릭하고 메뉴에 있는 Add auto layout을 진행하면 오른쪽 사진처럼 프레임과 오토레이아웃이 생성됩니다.
2번) 기존 프레임 속성을 오토레이아웃으로 바꾸기
이미 텍스트가 프레임이면, 그 상태로 shift + a를 눌러서 오토레이아웃을 생성하는 것도 방법입니다. 사진에서 컨테이너2는 오른쪽 클릭>Frame selection>shift + a를 한 상태입니다.
참고로 오토레이아웃 텍스트를 클릭하면 오른쪽 상단에 Auto layout의 다양한 메뉴들을 찾아볼 수 있습니다. 사이즈, 정렬, 간격, 패딩 등을 조절할 수 있어요.
2.4 프레임과 컨스트레인트
컨스트레인트(Constraint): 오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한한다. 더 정확하게는, 부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?를 정할 수 있다.
실습으로 보겠습니다.
프레임으로 Parent container 이름의 박스 하나, Child container 이름의 박스 하나를 생성합니다. 그리고 Child container는 Parent container 안에 넣어주세요. 그러고 나서 Child container 박스를 누르면 오른쪽 상단 Position>Constraints에 기능이 보입니다. 현재 Constraints = Left, Top이네요.
오른쪽 상단을 쓰기 전에 먼저 Constraints의 특징을 보여드리겠습니다. Parent container 프레임만 누르고 사이즈를 왼쪽 방향으로 늘리면 왼쪽 사진처럼 Child container가 따라옵니다. 반대로 오른쪽 방향을 늘리면 프레임은 따라오지 않고 Parent container만 오른쪽으로 커집니다. 결국 Child container의 위치는 고정되어 있다는 뜻이죠.
이번에는 Child container 선택하고 오른쪽 상단에서 Alignment>오른쪽으로 바꿔보겠습니다. 그럼 사진처럼
Constraints = Right, Top으로 바뀝니다. 그리고 아까처럼 오른쪽, 왼쪽으로 늘리면 Child container 프레임은 무조건 오른쪽 방향으로만 따라갑니다.
마무리
오늘은 이렇게 발표 준비를 마무리하고 피그마 강의를 이어서 들었습니다. 오늘 배운 피그마 강의를 요약하면 정렬, 오토레이아웃, 컨스트레인트이겠네요. 처음에는 오토레이아웃 개념을 들었을 때 생소했는데, 블로그에 다시 한 번 정리하니 이해 되는 것 같습니다. 블로그에 강의 내용을 정리하면 혼자 강의를 듣는 것보다 오래 걸린다는 단점이 있지만 기억에 더 잘 남고 나중에 노트처럼 활용할 수 있어서 좋은 것 같아요. 지금은 피그마 기초를 배우는 만큼, 앞으로 다양한 실습을 통해 손에 익히는 것이 목표입니다. 이렇게 차근차근 익히면 나중에 더 복잡한 디자인도 부담 없이 다룰 수 있을 것 같아요.
내일은 사전캠프 마지막 날이네요. 3주동안 Gamma.ai, Canva, Figma 등 다양한 툴을 익힐 수 있어서 좋았어요. 다음 주 12시간 본캠프가 시작하는 만큼 이번 주는 체력 관리에 신경써야 할 것 같습니다.
그럼 마지막 날도 잘 마무리 해보겠습니다. 🙋♀️
'내배캠 TIL 기록일지' 카테고리의 다른 글
| [내배캠 D+1] 디지털 마케터 2기 OT + 커리어 스터디 (0) | 2025.11.03 |
|---|---|
| [내일배움캠프 사전캠프 3주차] 마지막 날의 발표 & 피그마 2주차 강의 (0) | 2025.10.31 |
| [내일배움캠프 사전캠프 3주차] 디지털 마케터 실무자 세션 + 피그마 강의 (0) | 2025.10.29 |
| [내일배움캠프 사전캠프 3주차] A/B 테스트 실습 (0) | 2025.10.28 |
| [내일배움캠프 사전캠프 3주차] 복습 + 피그마 2주차 강의 듣기 (0) | 2025.10.28 |