[Section 05] 인터페이스 설계하기

인터페이스 설계하기

🔮 와이어프레임에 빠르게 아이콘 넣기 - iconify 플러그인

🔮 와이어프레임 프롤우를 연결하는 autoflow 플러그인 사용하기

🔮 Auto Layout 이해하기

-> 자동으로 Layout의 크기를 원래의 디자인대로 적용시켜 준다.

🔮 Constraints & Resizing 이해하기

• Constraints 부분은 해당 부분에 핀을 꽂아 놓는다고 생각을 하면 된다.
• Resizing은 auto Layout 을 설정하고 나서 상세 속성으로 설정할 수 있는 기능이다. => 근데 지금은 우측 패널에 Frame 부분에서 조절할 수 있다.
  

🔮 실습 시 과정

1. 대략 손그림으로 디자인을 잡는다.
2. 프레임을 이용해서 해당 공간을 잡는다.
3. 많이 사용되거나 비슷한 용도(이미지, 텍스트 필드, 아이콘)를 위한 공간을 컴포넌트를 이용해서 잡는다.
4. 사용되는 아이콘을 만들거나 가져와서 컴포넌트로 만들어준다.
5. 이때 같은 공간이지만 다른 컴포넌트들인 경우에는 varients를 통해서 묶어주어서 효율적으로 디자인을 할 수 있도록 해준다.
6. 다른 버튼이 추가되거나 삭제되더라도 디자인이 유지될 수 있도록 auto Layout을 통해 Constraint와 Resizing을 활용하여 패딩 및 Fill size, Hug 등을 적극 활용하도록 한다.

📍 auto Layout을 사용하는 이유

auto Layout을 사용하는 이유는

1. 버튼이 추가되거나 삭제되더라도 다른 요소와의 간격을 걱정하지 않아도 된다.
2. 텍스트의 길이가 늘어나더라도 사이 간격을 걱정하지 않아도 된다.
3. 화면의 크기가 늘어나더라도 자동으로 Fill이 되도록 할 수 있다.
4. Constraint를 통해서 고정 위치를 수정할 수 있다. Center, Center로 하거나 top, left를 하면 화면의 크기가 바뀌어도 그 곳에 고정이 되어 있으므로!
   

📌 사실상 대부분 auto Layout 특히 텍스트이 경우는 반드시! 그리고 Varients를 잘 지정하여서 훨씬 효율적으로 디자인을 할 수 있다.

🔮 예제 실습 뮤직 플레이어 모바일, 태블릿 버전 세트 만들기

1. 디자인에 따른 프레임으로 영역 지정 -> 해당 지정에서의 디자인을 토대로 프레임 이름 수정, 크기가 정수값이 되도록 조정
2. 각 프레임에 디자인 넣기
3. auto Layout 지정 -> 전체 프레임의 사이즈를 변경하더라도 고정시켜놓고 싶은 위치를 고려
4. 1번 과정에서 지정해주었던 프레임을 지우는 대신 auto Layout으로 이름 변경

📍 auto Layout 지정을 할 때

1. 최대한 세분화할 때
2. 터치 및 클릭 영역 까지 고려해야 할 때
3. 위와 아래의 컴포넌트 또는 레이아웃이 같은 크기만큼 떨어져있어야 해도 사용할 때 => 코딩할 때처럼 다양한 경우를 고려
4. 다양한 디스플레이 화면 비율을 고려해야될 때