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

또는 Fluid Plugin을 사용하여 UI 디자인을 자동으로 콘텐츠 크기로 변경하는 방법 ...

소개

모두 다음과 같은 상황을 알고 있습니다. 하나의 pager 또는 app에 대한 디자인을 만들고 텍스트 또는 요소를 추가했으므로 두 번째 모듈의 Height를 변경해야 합니다. 그 위에 header 이미지 크기를 변경하려고 합니다. 무슨 일일까요? 각 모듈 사이의 모든 여백(margin) 값을 염두에 두고 선택하고 조정된 모듈 Height에 따라 위아래로 이동해야 합니다.
presentation
이것은 귀찮을 수 있습니다.
아니, 저는 그것을 좋아하지 않습니다! "Update"를 누르고 모든 요소가 변경 사항에 따라 자동으로 이동하기를 원합니다. 이것을 Fluid 플러그인으로 할 수 있습니다.
그냥 이렇게 :
presentation
매직 :)

Fluid Plugin에 대하여

Fluid는 매우 멋진 플러그인이며 저는 이것에 대해 많은 글 또는 튜토리얼을 찾을 수 없기 때문에 매우 과소평가 된 느낌을 가지고 있습니다. 그러나 저는 이것을 매우 좋아하며 이것은 저의 워크 플로우에 필수적입니다. 이것은 자동 레이아웃(Auto Layout) 전에도 있었고, 실제로 꽤 비슷하지만 다른 UI가 다르고 자동 업데이트 기능이 없어서 괜찮습니다.
그러나 Fluid는 AutoLayout(자동 레이아웃)에 비해 큰 장점을 가지고 있습니다. 수학적 표현식을 사용하여 요소 사이의 상대적인 여백(relative margins)을 만들 수 있습니다. 즉, 텍스트의 길이 또는 이미지의 높이가 설정되더라도 모든 요소는 변경 사항에 따라 수직으로 이동합니다.
처음에는 조용한 기술처럼 들릴 수도 있는 놀라운 기술입니다. 하지만 저를 믿으세요. 생각보다 복잡하지 않고 이 기능으로 많은 시간을 절약할 수 있습니다.

출발점

시작 지점이 있습니다 : 이 Sketch 예제 파일을 다운로드하십시오. Fluid Plugin을 여기서 다운로드하거나 Sketch Toolbox를 사용하여 검색하십시오.

1 단계 : 레이어 정렬

가장 중요한 것은 레이어의 배열입니다. 이 접근 방식은 모두 소위 "Previous Sibling"를 기반으로 합니다. 레이어를 위에서 아래로 배열해야 합니다. Layers Inspector의 Sketch (및 Photoshop의 레이어)는 위에서 아래로 배치되기 때문에 시각적 디자인이 위에서 아래로 배열되어 있으면 약간 혼란스럽지만 익숙해질 것입니다.
presentation
레이어 정렬
따라서 레이어를 맨 아래에서 맨 위로 정렬 한 후 (레이아웃에서 보여준 대로 반전되어 나타납니다.) 몇 가지 규칙을 만들 수 있습니다.

2 단계 : 요소의 위치가 서로 종속되도록 만듭니다.

처음에는 유연한 이미지 height를 원하기 때문에 이미지 아래의 모든 것이 이미지 height에 따라 위아래로 움직입니다. 이러한 요소가 위의 이미지 (= Previous Sibling)에 상대적 margin을 필요로 합니다. 따라서 "Text"그룹을 선택하고 Fluid Window를 열고 "Text"그룹에 다음과 같은 pinning을 지정하십시오 :
presentation
Previous Sibling에 대한 상대적 margin 정의
즉, "Text"그룹이 정확히 "Header"그룹 (100%)과 + margin 24 아래로 정확하게 이동한다는 의미입니다. 그냥 값을 좀 만져 보면 이해할 수 있을 겁니다.
그런 다음, Fluid Window에서 Copy를 누르고 아래의 레이어 그룹에 대해 동일한 작업을 수행하십시오. 다음과 같이 그룹 내의 모든 요소에 대해서도 이 과정을 반복하십시오.
presentation
relative margins 정의
다음으로 날짜가 있는 Bar (독일 날짜, 죄송~합니다~:)를 이미지의 높이와 상관없이 맨 아래에 붙입니다. 이 작업을 수행하려면 해당 Bar에 다음 pinning을 지정해야 합니다.
presentation
그룹의 맨 아래에 요소를 붙이기
위 또는 아래의 변경으로 인해 영향을 받을 수 있는 모든 레이어와 그룹을 설정하면 수직적으로 매우 유연한 레이아웃을 갖게 됩니다. 즉, 클릭 수가 줄어들고 반복 계층 이동을 사용하는 시간이 줄어듭니다.
참고: 이 튜토리얼에서는 모든 작은 레이어에 대한 margins을 정의하여 세계에서 가장 유연한 레이아웃을 만듭니다.^^ 분명히 매우 복잡하고 혼란스러울 수 있습니다. 그래서 제가 주로 하는 일은 주 그룹이나 모듈 사이에 연결을 만드는 것입니다. 이는 매우 빠르고 쉽습니다. 시간을 절약할 수 있고 전혀 복잡하지 않습니다.

짜짠~ : 완성된 레이아웃은 다음과 같이 동작해야 합니다.

presentation

결론

Fluid는 매우 놀랍고 강력한 플러그인이지만 여기저기에 작은 버그와 혼란스러운 행동을 가지고 있습니다. 그래서 저는 수직적으로 반응(vertically responsive)하기 위해 주로 Fluid를 사용합니다. 콘텐츠 기반 크기 조정이 가능하며 요소를 수동으로 이동하지 않고도 텍스트 길이와 높이로 작업할 수 있습니다. 화면 너비(widths)에 따라 Auto Layout을 유지하는 것이 좋습니다. 두 가지를 결합하는 작업은 2편(곧 번역합니다.)에서 다룹니다.
이 튜토리얼이 좋았다면 2편은 Fluid and Auto-Layout : "Fluid and Auto-Layout을 구성하여 수직 및 수평으로 반응하는 UI 디자인을 만드는 방법" 이 되겠습니다.
이 튜토리얼이 영감을 얻거나 도움이 되기를 바랍니다.
고맙습니다

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



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



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