[2편] Sketch를 사용하여 UI 디자인이 완전히 반응하도록 하는 방법 (How to Make Your UI Design Fully Responsive With Sketch — Part 2)

또는 수직 및 수평으로 반응하는 UI 디자인을 만들기 위해 Fluid 및 Auto-Layout을 구성하는 방법 ...

소개

[1편]에서는 콘텐츠에 수직으로 크기를 적용하는 UI 레이아웃을 만드는 방법을 배웠습니다. 내용 기반으로 반응형 UI를 만들어 요소들을 수동으로 이동하지 않고도 텍스트 길이와 요소 높이를 자동으로 할 수 있습니다. 이를 통해 다음과 같은 클라이언트 요청을 처리할 수 있습니다.
"영웅 이미지를 더 작게 만들고 아주 긴 텍스트로 레이아웃을 보여주세요. 인터넷에서 아무도 큰 이미지를 좋아하지 않으며 누구나 많은 텍스트를 읽고 싶어 한다는 것을 알기 때문입니다. 2분 안에 할 수 있습니다. "그리고 이 글을 읽은 후 대답할 수 있는 내용을 알고 있습니까?
"나는 이것을 한 번에 할 것입니다" ;)
튜토리얼의 두 번째 부분을 마치면 아래와 같은 새로운 고객의 요청을 준비하게 됩니다.
"iPhone 7 Plus에서 어떻게 작동하는지 보여 주실 수 있습니까? 그리고 그것은 iPad에서 어떻게 생겼습니까? 이를 위한 특정 레이아웃을 만들어야 합니까? "
그리고 몇 번의 클릭만으로 답을 얻을 수 있습니다.
이 튜토리얼에서는 Auto-Layout Plugin을 사용하여 다양한 화면 너비에 맞게 UI 디자인을 준비하는 방법을 보여줍니다. Fluid 플러그인과 함께 유연하고 완벽하게 반응하는 UI 디자인을 만들 수 있습니다.

Auto-Layout 플러그인

반응성 있는 디자인에 관해서라면 이 마을의 새로운 아이는 Auto-Layout라고 불립니다. 그것은 다른 화면 너비에 반응하는 방식으로 배치 요소를 정의할 수 있는 스케치용 플러그인입니다. 요소가 패딩 (padding) 기반 비율, 픽셀(pixel) 기반 패딩 또는 중심 정렬(centered alignment)을 사용하는지 여부와 관계없이 자동 업데이트(auto update) 기능으로 더욱 놀라운 기능을 제공합니다.
presentation
이것은 Auto-Layout입니다. 공식 가이드라인(guidelines)에서 GIF.
게다가 직관적인 인터페이스와 잘 만들어진 비디오 튜토리얼과 문서가 있습니다. 사실 이미 많은 정보와 문서가 있기 때문에 자세히 다루고 싶지는 않습니다. 따라서 자세한 내용은 the official anima Auto-Layout website를 참조하거나 the official Auto-Layout Medium page를 확인하십시오.

출발점

시작점은 다음과 같습니다. 이 Sketch 예제 파일을 다운로드하십시오. 그런 다음 여기에서 자동 레이아웃 플러그인을 다운로드하십시오. 또는 Sketch Toolbox를 사용하여 검색하는 것이 좋습니다.

1 단계 : Sketch의 크기 조정(Resize) 및 고정(Pinning) 옵션을 사용하여 디자인 설정

이 단계는 artboard 너비를 변경한 후에 요소를 파손하거나 압착하지 않고도 요소의 크기를 조정할 수 있도록 하는 데 필수적입니다. 이 주제에 대한 수많은 튜토리얼(예:Bohemian, Francesco Bertocci)이 이미 있으므로 중요한 것을 빨리 보여 드리겠습니다. 때로는 특히 symbols 내에서 symbols를 사용할 때 좀 까다로울 수 있습니다.
다음 스크린 샷은 group 또는 symbol 내 각 요소의 크기 조정 옵션(resizing option)을 정의하는 방법을 보여 줍니다. 이것은 두 번째 단계의 필수적인 기초입니다.
presentation

잘 하셨나요? 올바른 크기 조절 옵션(resizing option)을 모두 설정하면 요소가 다음과 같이 작동해야 합니다.
presentation
크기 조정 옵션 - Resizing options

2 단계 : Auto-Layout을 사용하여 다른 화면 너비(Different Screen Width)에 응답하는 레이아웃 만들기

레이아웃이 Auto-Layout을 사용하여 반응 형이 될 준비가 되었습니다. 이제 요소가 다른 화면 크기에서 어떻게 작동하는지 정의할 수 있습니다. header 이미지부터 시작해 보겠습니다. 이것은 width가 100%라고 가정합니다. "Header"그룹을 선택하고 백분율 아이콘을 클릭하여 100% wide로 만듭니다.
presentation
header 이미지의 너비(width)를 100%로 지정합니다.
다음은 "Text"그룹입니다. 이것은 24px의 좌우 margin을 가지고 있어야 합니다. 폴더를 선택하고 오른쪽 margin과 왼쪽 margin에 대한 checkbox를 클릭하고 24를 입력하십시오 (해당 위치가 이미 없는 경우).
presentation
"Text"그룹에 24px의 margin 제공
이제 "Text"그룹 내의 각 Text 레이어가 위치와 width를 100%로 유지하려고 합니다. 레이어는 항상 부모 레이어에 고정되어 있으므로 이 그룹 내부의 각 Text 레이어에 0의 margin을 부여해야 합니다.
presentation


이것이 모든 요소를 정의하는 원칙입니다. 다른 모든 그룹(groups) 및 계층(layers)에도 이 단계를 반복하십시오.
완료되면 다음과 같이 표시됩니다.
presentation
처음 보니까 꽤 멋져 보여요. 하지만 두 번째 화면에서는 최적화하고 싶은 것들을 보게 될 것입니다. 예를 들어 계층(layers) 위와 아래에 나타나는 빈 공간이 있습니다. 이것은 요소 간의 relative margins를 정의할 수 없기 때문입니다. 요소의 크기는 변경되지만 x위치는 유지됩니다.
또 다른 이상한 것은 밴드 이름 "Modeselektor"외에 chevron 모양입니다. 어떤 종류의 pinning 인지에 관계없이 정의하지 않아도 됩니다.
또한 경우에 artboard의 크기를 조정하는 동안 텍스트 레이블이 겹쳐지기도 합니다. 버그가 있는 것 같습니다, 저도 모르겠습니다. 제가 아는 바로는 그것을 고칠 수 있는 방법이 있습니다. 그 방법은 Fluid라고 부릅니다.
이것이 제가 튜토리얼을 만든 이유입니다. 그리고 [1편]을 통해 철저하게 작업했으므로 Fluid Toolbar에서 Update를 클릭하면 모든 것이 잘 될 것입니다.
presentation

이게 전부입니다. 가장 유연한 앱(Flexible App) 디자인을 만들었습니다. :)

이제 이미지 heights, text-lengths 및 artboard widths로 작업을 할 수 있습니다. 그것을 더 크게 만들고, 더 작게 만들고, 뭔가를 더하고, 뭔가를 제거하십시오. 더 이상 변경 요청을 두려워할 필요가 없습니다. :)
presentation

결론

Auto Layout은 놀라운 플러그인입니다. 아직도 당신은 몇몇 버그를 발견할 것이고 그것을 사용하는 동안 당신은 여기저기서 몇몇 특징을 놓칠 것이다. 자동 업데이트 기능으로 인해 그룹 순서 또는 레이어 속성을 변경하여 갑자기 레이아웃을 깨뜨릴 수 있습니다. 하지만 좋은 점은 Fluid가 있다는 것입니다. 또한 Fluid and Auto-Layout으로 팀을 구성하면 불만 없이 두 개의 플러그인을 결합하여 전체 반응 형 디자인 워크 플로우를 완성할 수 있습니다.

이 글은 번역 글입니다. 원본 링크입니다.



presentation
안녕하세요! Early adopter입니다.
제 번역 블로그를 자주 찾아 주셔서 감사드립니다.저를 위해서 시작한 블로그였는데 1년 넘게 하다 보니 욕심이 생기게 되었습니다. 해외 디자인 관련 좋은 콘텐츠를(영어 포함 다양한 언어) 가능한 한 모두 번역해보자!라는 목표를 새워보았습니다. 많이 도와주세요^^
페이스북의 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다. 아직은 너무 부족하지만 함께 좋은 방향으로 발전할 수 있기를 기대합니다.
다시 한번 제 블로그를 방문해 주셔서 진심으로 감사드립니다.
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
혹시나 저랑 함께 "보버"에서 디자인 번역 공장 연재를 해주실 유저분 계시면 리뷰나, 페북 어디에서든 메시지 주세요!!! 외롭습니다
함께 작업했으면 좋겠습니다^^ 연락 간절히 기다립니다.



번역 글 추천(신청) 받습니다.
안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일 정도 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.