오늘 목표
- 수업 전 7시 기상 후 운동(O)
- 수업 내용 모르는 거 및 공부내용 정리(O)
- 프로젝트 진행 해보기(O)
배운내용
Auto Layout 단축키 shift+ a
케러셀 슬라이드
1.배경 박스 생성
Frame 또는 Rectangle을 사용하여 전체 캐러셀을 감싸는 배경 박스를 생성
크기는 원하는 캐러셀 영역에 맞게 조절
Auto Layout을 사용하면 내부 요소 배치가 쉬워짐
2.이미지 그룹화 및 정렬
여러 개의 이미지를 추가하고 그룹(Group) 또는 Frame으로 묶음
모든 이미지를 수평(→) 또는 수직(↓) 정렬
각 이미지의 위치를 맞춤.
3.하단 동그라미(페이지네이션) 추가
Ellipse 도구를 사용하여 동그라미 아이콘(●)을 만들고, 개수만큼 복사
Auto Layout을 활용해 일정한 간격 유지
현재 활성화된 이미지에 맞게 색상 변경(예: 현재 페이지는 진한 색, 나머지는 연한 색)
4.이미지 전환(드래그 기능) 추가
Component(컴포넌트) 로 변환하여 재사용 가능하게 설정
이미지 그룹을 Auto Animate와 함께 Prototype → Drag로 연결
5.동그라미 클릭 시 해당 이미지로 이동
각 동그라미(Ellipse)를 해당 이미지(Frame)와 연결
Prototype → On Click → Navigate To 설정
트랜지션 효과(예: Slide In/Out) 추가 가능
오버플로우 설정 방법
1.프레임 선택
2.Design 패널에서 "Clip Content" 체크 → 넘치는 콘텐츠 숨기기
3.Prototype 패널에서 "Overflow behavior" 설정
Vertical Scrolling → 세로 스크롤 가능
Horizontal Scrolling → 가로 스크롤 가능
Both → 가로+세로 스크롤 가능
모달 설정 방법
모달 UI 디자인
1.모달 배경(Frame) 생성
Frame 도구를 사용해 전체 화면을 덮을 수 있는 배경을 생성
색상을 반투명 검은색 (#000000, Opacity 50%) 으로 설정해 화면 뒤 배경을 가림
2.모달 박스 추가
Rectangle 또는 Frame을 사용해 모달 창 디자인
모달 크기 조정 (예: Width: 400px, Height: 300px)
모달 내부에 텍스트, 버튼, 아이콘 추가
Auto Layout을 적용해 내용 정리
3.Close 버튼 추가
Close 버튼을 모달 에 배치
닫기 버튼을 클릭 시 모달이 닫히도록 설정
모달 프로토타입 연결
1.모달을 숨긴 상태로 시작
기본 상태에서는 모달을 보이지 않게 설정
Clip Content 활성화하여 프레임 밖 요소 숨김
2.버튼 클릭 시 모달 열기
버튼을 선택하고 Prototype 탭으로 이동
Open 버튼 클릭 → 모달이 포함된 프레임과 연결
"On Click" → "Navigate To" 선택
3.Close 버튼 클릭 시 모달 닫기
Close 버튼을 선택하고 Prototype 탭 이동
Close 버튼 클릭 → 원래 화면(메인 화면)과 연결
"On Click" → "Navigate To" 설정
와이어 프레임
