컴포넌트 & 오토레이아웃 실습

 

컴포넌트 

 

• 컴포넌트 등록 방법: 프레임 생성 후(직사각형+텍스트 둘다 선택 후 Option+command+G 눌러서 Frame 생성) 오른쪽 상단에 있는 Create component 문양 클릭
  * 컴포넌트 등록 단축키: Option+command+K

• 컴포넌트 등록이 되면 보라색으로 나타남 (레이어에 보면 바뀌어 있음)
  레이어명을 마스터 컴포넌트로 저장 = 원본 이라는 뜻

• Assets 패널에 들어가면 원본이 저장되어 있다.

• 텅빈 마름모골로 바뀌어있음 = 인스턴스라고 함
  1. 컴포넌트 - 원본
  2. 인스턴스 - 복제본
  
  
• 마스터 컴포넌트에 일어나는 변화는 인스턴스에 영향을 줌
  ex)텍스트 속성, 크기, 색상 다 변경됨
  별도로 저장해놓고 관리하기/ 인스턴스들을 일괄적으로 수정 가능하게 됨
  ↔
  인스턴스에 일어나는 변화는 마스터 컴포넌트에 영향을 주지 않음
  
  
• 인스턴스들은 수정이 안되나? NO
  인스턴스 요소를 수정하면 그 수정된 영역 한에서 오버라이드로 적용 됨

• 텍스트 오버라이드, 컬러 오버라이드 걸기
  마스터 컴포넌트에 텍스트 변경 -> 컬러 오버라이드는 변경 됨(텍스트 오버라이드는 오버라이드가 걸려있기 때문에 반영되지 않음)
  마스터 컴포넌트에 컬러 변경 -> 텍스트 오버라이드는 변경 됨(컬러 오버라이드는 오버라이드가 걸려있기 때문에 반영되지 않음)

 

• 컴포넌트 상태(원본상태로 돌리고싶으면 오버라이드 걸린 인스턴스 클릭 후 마우스 우클릭 후 Reset changes 클릭)

 

• 인스턴스는 컴포넌트 영향을 받을 수 밖에 없나? No
  아예 관계 해지 가능
  마우스 우클릭 후 Detach instance 클릭 (보라색이 아닌 파란색으로 바뀌고, 레이어 명에 모양도 없어지고 일반 프레임으로 돌아옴)별도의 레이어로 탄생(컴포넌트가 바뀌어도 전혀 영향받지 않음)

• 컴포넌트를 잘못 등록했을 경우
  마스터컴포넌트는 되돌릴 수 없음 삭제만 가능
  
  
• 마스터컴포넌트를 일반 레이어로 돌리고 싶을 경우
  마스터컴포넌트 복제(단축키:command+드래그) → 복제된 인스턴스를 Detach instance 시켜서 일반 프레임으로 돌리기 → 원본 컴포넌트 삭제 =그럼 일반 프레임으로 활용 가능

 

• 정리
  1. 마스터컴포넌트는 일반 프레임으로 돌릴 수 없다
  2. 인스턴스는 일반 프레임으로 돌릴 수 있다.

 

 

---

오토레이아웃

 

오토레이아웃은 인터페이스를 디자인할 때 아주 중요함!
카드같은 디자인의 경우 오토레이아웃을 반드시 활용해야 함

• 한가지 배운점
  → 내가 불러온 이모티콘이 Vactor이었는데 Vocter는 "하나의 도형"이라서 프레임처럼 사용x
  즉, 오토 레이아웃으로 변환 못함

• Vactor란? 편집 가능한 선/도형 아이콘이라는 뜻= 디자인에 맞게 수정 가능한 아이콘이다
  Vactor 자체를 프레임으로 변환하는 기능은 없지만 Warp(감싸기)방식으로 프레임처럼 활용가능
• 프레임처럼 활용하고 싶으면?
  Vactor 아이콘 선택 → 마우스 우 클릭 후 Frame Selection 선택(단축키: Option+Command+G) → 벡터가 프레임으로 감싸지게 된다.
  이제 그 프레임에 오토 레이아웃을 적용할 수 있음

 

• 정리
  그냥 Vactor : 도형 하나라서 오토 레이아웃이나 패딩 같은 걸 바로 못 씀
  Frame으로 감싼 Vactor: 버튼 카드, 오토 레이아웃 구조 안에 넣어서 편집 가능

오토레이아웃 버튼 만들기

1. 아이콘 가져오기

2. Button텍스트 만들기

3. Button텍스트 복제

4. 가운데 Button텍스트 지우기

 

5. 단축키 control+command+스페이스 누르면 이모티콘 나옴 -> 아이콘 추가

6. 아이콘-이모지-텍스트 순서로 만들기

7. 세개를 묶은 후 마우스 우 클릭해서 Add auto layout누르면 오토레이아웃 등록됨

근데 나는 영상과는 달리 오토레이아웃 아이콘이 2줄이다..

왜그런지 챗gpt한테 물어보니 

라는 답변이 왔고 정상적인 Auto Layout 상태라고 한다.

아마 집 모양 이모티콘을 불러 올 때 복붙해서 Vactor를 Warp(감싸기)을 해서 프레임으로 써서 그런거같다..ㅜㅜ

이거는 나중에 쌤한테 질문 좀 해봐야지.......

무튼 정상이라니 계속 이어가보자

8. 간격24, 좌우 패팅 36,상하 패딩 8 

9. fill값 원하는 컬러, 코너 라디어스 20, 셀렉션 컬러 블랙을 화이트로 변경하면 완성

10. 인터페이스를 제작하면 이름을 지어줘야함 

• 레이어 네이밍 팁 → 무엇인지 명칭해야함, 특징 기입
  ex) btn_large 또는 btn_l로 표기 = button_large 라는 뜻

나머지도 크기별로 베리에이션하기

하나씩 이름 바꿔준 후 전부 선택, Create multiple componets클릭하면 3개가 각자 컴포넌트 등록이 일괄적으로 됨 

• 인터페이스를 제작하는데 베리에이션 하는 방법
  1. 가장 기준이 되는 것을 먼저 만든다 (보통 큰 사이즈 먼저 만듦)
  2. 이름을 짓고 복제 후 사이즈 변경, 이름변경하고 컴포넌트 등록은 가장 마지막!

 

오토레이아웃을 등록하고, 컴포넌트 기능을 응용해서 사이즈를 베리에이션 하는 방법까지 끝!


아이고힘들다~

근데 재밌네..!