[제로베이스 UIUX 파트타임 스쿨] 학습일지 - 2

 

①  2주차 수강한 분량

• 5-1 프레임과 레이어
• 5-2 정렬과 스마트 셀렉션
• 5-3 컨스트레인트
• 5-4 오토레이아웃

---

 

② 각 강의별 학습하며 새롭게 알게된 점

 

5-1. 프레임과 레이어

 

✅ 프레임(Frame)

• 정의: 디자인에서 화면 단위를 나누는 기본 구조
• 특징
  • 아트보드처럼 UI를 구성하는 컨테이너 역할
  • Frame 안에 또 다른 Frame을 중첩하여 구성 가능
  • 오브젝트를 그리고 Frame을 그리면, 자동으로 귀속됨
    • 단, Frame을 잠금(Lock) 처리하면 귀속되지 않음
  • 오토레이아웃, 마스크, 클립 콘텐츠(Clip Content) 기능 적용 가능
• 활용 예시: 모바일 앱 한 화면, 팝업창, 카드 UI 등

🔐 단축키 및 기능

• Ctrl + 0 (Win) / Cmd + 0 (Mac): 100% 화면 비율 보기
• Ctrl + Shift + L (Win) / Cmd + Shift + L (Mac): 전체 잠금
• Clip Content: 체크 시 프레임 밖의 오브젝트가 잘려서 보임

→ 구분 프레임 (Frame) 컴포넌트 (Component)

목적	레이아웃 구성	UI 요소 재사용
용도	화면 단위 구성	버튼, 아이콘 등 반복 요소
기능	오토레이아웃, 마스크, 제약조건 설정	인스턴스 생성 및 동기화
상호작용	드래그, 배치 정렬 등	수정 시 전체 인스턴스에 반영됨
대표 예시	페이지, 팝업, 카드 영역	버튼, 네비게이션 바, 체크박스, 아이콘 등

 

✅ 컴포넌트 만들기

• 단축키:
  • Windows: Ctrl + Alt + K
  • Mac: Cmd + Option + K
• 방법:
  • 우클릭 → Create Component
  • 또는 상단 툴바의 컴포넌트 아이콘 클릭
• 활용: Assets 패널에서 인스턴스로 드래그하여 재사용
  • 필요 시 Detach Instance 기능으로 연결 해제 후 개별 수정 가능

---

5-2. 정렬과 스마트 셀렉션

• Tidy Up: 선택된 오브젝트 간 간격을 자동으로 정리
• 정렬 단축키
  • 좌측, 가운데, 우측 / 상단, 중간, 하단 정렬 아이콘 활용
  • 정렬 후 스마트 셀렉션으로 그룹 간격 통일 가능

---

5-3. 컨스트레인트(Constraints)

• 정의: 프레임 크기 변경 시 요소의 위치/크기를 어떻게 유지할지 설정하는 기능
• 설정 위치: Design 패널 → Constraints 항목

✅ 가로 고정

• Left: 좌측 고정
• Right: 우측 고정
• Center: 가로 중앙 고정
• Left + Right: 여백 기준 양쪽 고정 → 가운데 요소가 가변

✅ 세로 고정

• Top: 상단 고정
• Bottom: 하단 고정
• Center: 세로 중앙 고정
• Top + Bottom: 여백 기준 위아래 고정 → 세로 방향으로 요소 확장

✅ Scale

• 가로 또는 세로 Scale 지정 시, 비율에 따라 크기 조절
• Frame 사이즈 변경 시 비율 유지하며 자동 확대/축소

📌 참고

• 요소 외의 빈 공간에 마우스를 올려두면 간격 확인 가능
• Scroll Behavior - Fixed 설정 시 스크롤 중에도 요소를 고정 가능
  👉 관련 참고 링크

---

5-4. 오토레이아웃 (Auto Layout)

 

✅ 정렬 방향 및 배치 설정

• 방향: 수평(→) / 수직(↓)
• 정렬: 시작점, 중앙, 끝점 등

✅ 크기 설정

• Width / Height 값 수동 조절 또는 Hug / Fill 옵션 사용

✅ 패딩 및 간격 설정

• Spacing between items: 자식 요소 간 간격
• Padding: 프레임 내부 여백 (상하/좌우 각각 설정 가능)

✅ Clip Content

• 체크 시, 프레임 영역을 넘어간 요소는 잘려서 표시

---

5-5. 레이아웃과 그리드

 

✅ 레이아웃 그리드 (Layout Grid)

• 프레임 내부에 눈금(Grid) 추가
• Column, Row, Grid 3가지 형태 지원
• 사용 예시: 12컬럼 그리드 웹 UI, 카드 정렬 등

✅ 주요 용어

• Column: 세로 줄
• Row: 가로 줄
• Gutter: 그리드 간 간격 (Gap과 유사)
• Margin: 가장자리 여백

---

③ 수강하면서 흥미로웠던 부분

그동안 궁금했던 자동 반응형 세팅(컨스트레인트), 오토 레이아웃, 레이아웃 그리드 설정 방법을 실제로 확인하고 적용해볼 수 있어 흥미로웠습니다. 특히, 실무에서도 자주 사용하는 기능들이라 바로 작업에 활용할 수 있어 유익했습니다.

 

👉 실습 링크

 

④ 수강하면서 어려웠던 부분

이번 강의를 통해 처음 접하는 개념들도 있어 다소 어렵게 느껴졌습니다. 특히, 오토 레이아웃과 컨스트레인트를 함께 적용할 때의 설정 방식이 아직은 익숙하지 않아 반복 학습이 필요하다고 느꼈습니다.

 

⑤ 다음 학습 계획

2주차 강의를 끝까지 듣지 못한 만큼, 3주차와 함께 병행하여 부지런히 복습할 예정입니다. 실습 위주로 따라하며 부족한 부분을 보완하고자 합니다.

 

※ 이 글은 제로베이스 UIUX 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.