Build interfaces with style (wwdc21 xcode13)

[Youngminah]

Canvas

• Canvas Bottom bar 재디자인 되었다
• 드래그앤 드랍을 사용하여 하나 이상의 Scene을 선택하고 재 정렬할 수 있다
• Option 키를 누른 상태에서 드래그앤 드랍하여 전체 장면을 복사할 수 있다
• 개요 보기에서 제약 조건 그룹을 선택하면 그룹 내의 모든 제약 조건을 선택하는 것과 같다

Button Styles

• 핀치 투 줌을 사용하면 화면을 확대해서 볼 수 있다. (버튼말고도 됨)
• Filled 스타일을 선택하면 버튼을 보다 눈에 잘 띄도록 설정
• Corner 스타일을 선택하면 서리의 크기가 동적으로 결정되거나 고정된 크기로 결정되게 할 수 있음.
• 또한 동적 스타일을 지원하는 Small, Medium, Large, Capsule 등의 다양한 프리셋이 제공
• 스타일이 있는 버튼은 또한 Small, Medium, Large 등의 새로운 프리셋 크기를 사용할 수 있다.
• Tinted 스타일을 Check in, Check out버튼에 사용하여 덜 중요하지만 잘 보이도록 설정
• Interface Builder 사용의 장점 중 하나는 패딩을 설정하거나, 이미지를 변경하는 등의 변경 사항을 바로 적용하고 결과를 확인할 수 있다는 점
• iOS 15는 버튼을 클릭하면 항목들이 표시되는 팝업 버튼을 지원 (하나만 선택 가능)
• Mac Catalyst 15가 설치된 Mac에서 앱을 실행하는 경우 스타일이 있는 버튼이 macOS에 맞게 자동으로 변경
• iOS 팝업 버튼은 이제 Mac Catalyst 15에서도 지원되며, 마우스 커서가 컨트롤 위에 있을 때 툴팁도 표시
• 이 부분은 다른 이슈페이지에서 따로 또 정리

Table content styles

• Grouped header 가 스타일이 변화함
• 마지막으로 그룹화된 바닥글 생성가능
• 새로운 스타일은 이미지와도 잘 작동하며 동적인 타입 또한 지원
• Image Padding을 변경하면 이미지와 문자열 사이의 공간을 조절

Hierarchical symbols

• 해당 심벌에 계층적인 렌더 모드 사용하면 심벌의 기본 레이어에 대한 색상을 지정 가능
• 심벌의 다른 레이어에 대한 색상은 기본 레이어 색상의 감소된 알파 버전으로 만듦
• 팔레트 모드를 사용하면 각 계층의 색상을 직접 지정 가능
• 상황에 따라 기존 방식인 Monochrome모드보다 계층적인 모드가 보다 잘 맞을 수 있다

Accessibility

• Xcode 13의 Interface Builder에서 바로 접근성 설정에 따른 결과를 미리 볼 수 있다.
• 미리보기는 업무 효율에 있어서 매우 파워풀함
• 팝오버 메뉴에서 텍스트 크기, 프레임 값, 색상을 변경 가능

참고 동영상 wwdc21

[Youngminah]

• xcode13버전 이전에는 버튼부분에서 이미지와 텍스트를 같이 쓸 때, 상당히 불편하였는데 이번에 이런 부분이 뛰어나게 개선이 된 것 같다.
• 테이블뷰 섹션 부분에서 스타일 적용에 범위가 더 커진 것 같아 자주 사용할 것 같다.
• 접근성 부분은 아직 크게 체감은 안가는데, 폰트 크기를 클릭한번으로 미리 적용해볼수 있다는 점은 효율에 큰 도움이 될 것 같다.