[스케치] 스케치의 반응 형 디자인 - (1편)

그룹 크기 조정 기능(Group resizing)의 새로운 기능은 무엇일까?

Sketch (v.44)의 최신 버전에서는 그룹 크기 조정(Group resizing) 기능이 업데이트되었습니다.비록 근본적인 변화가 없지만, 이제 우리는 이 기능에 대해 좀 더 많은 설정을 할 수있습니다.
이전에 이 기능에 대해 자세히 설명했습니다. 이 글에서는 업데이트를 다루고 몇 가지 새로운 팁을 제공합니다. 이 글의 다음 부분에서는 그룹 크기 조정(Group resizing) 기능을 Anima’s Auto-layout plugin과 비교해 보겠습니다.

간단하게 : 그룹 크기 조정(Group resizing) 기능

변경되기 전에 초보자를위한 그룹 크기 조정(Group resizing) 기능을 신속하게 설명하고 싶습니다.
상위 그룹 또는 artboard의 크기 조정에 반응하는 레이어를 만들기위한 기능입니다. 그런 식으로 그룹의 크기를 조정하면 내부의 모든 레이어가 단순한 스트레칭과 변형 대신에 어떻게 반응하는지 보여줍니다

무엇이 바뀌었나?

능력면에서 볼 때 현저한 변화를 가져 오는 변화가 별로 없다. 이제 우리는 당신이 원하는 어떤 면으로 레이어를 고정하는 것과 같은 세부 사항에 대해 더 많은 관심을 가지고 있습니다. 다른 한편, 처음 사용자는 컨트롤이 명확하지 않을 수 있습니다. 특히 부동 및 확장 모드를 설정할 때 더욱 그렇습니다. 그러나 걱정하지 말자! 그것을 이해하는 것은 어렵지 않다!
이전 버전에서도 대부분의 작업을 수행 할 수 있다고 말할 수 있습니다. 어쩌면 보이지 않는 레이어를 사용하는 것과 같은 해킹이 필요할 수도 있지만 여전히 할 수 있습니다. 따라서이 업데이트는 반응 형 디자인 기능의 주요 발전으로 간주되어서는 안됩니다. 이건 처음부 있어야했던 방식입니다.

가능성의 대부분을 다루는 풍요로운 예제

이 예제에서 가장 중요한 세부 사항은 아래쪽에있는 갤러리 그룹입니다. 이 그리드 레이아웃을 수행하려면 그룹에서 보이지 않는 레이어를 사용해야합니다. 그렇지 않으면 크기가 변경 될 때 그리드 사이의 공백이 커지거나 작아집니다.
presentation
나는 몇 가지 사례를 설명하고 이전 버전에서 해당 설정을 보여주는 표를 만들었습니다. 물론 다섯 번째와 같이 여러 옵션을 동시에 선택할 수 없기 때문에 일부는 이전 버전에서는 적용되지 않습니다.
presentation

예제 다운로드

여기이 글에서 제시된 예제가 들어있는 스케치 파일.

팁과 트릭들

1. 모든면에 빠르게 고정


2. 그룹 크기 조정 설정(Group Resizing Settings) 재설정


3. 텍스트가 포함 된 그룹의 크기를 조정하는 방법

세로로 커지는 텍스트 변경의 경우 Sketch의 수학 입력 기능과 레이블의 줄 높이 값을 사용할 수 있습니다. 그룹을 선택하고 높이를 241 + 24 * 2로 변경하고 [Enter] 키를 누릅니다. 241은 현재 높이(current height), 24는 줄 높이(line-height), 2는 새로운 줄 수(new line count )입니다. 스케치는 결과를 계산하고 그룹의 높이(group’s height)를 올바른 값으로 설정할 수 있습니다.
버튼과 같이 가로로 커지는 텍스트 변경 사항의 경우 Relabel이라는 Sketch 플러그인을 사용할 수 있습니다 (Runner 플러그인을 함 사용하는 것이 더 효율적입니다).
나는 자동 크기 조정 기능이 곧 올 것이라고 기대한다. 수동으로 크기를 계산하는 것은 시대에 뒤 떨어진 것으로 느껴진다.

4. Symbols의 "자동 레이어 정렬(Auto Layer Aligning)"기능 탐색

Symbols에 크기가 작고 반응이 빠른 디자인 기능이 있으므로 Symbols 인스턴스 크기를 쉽게 조정할 수 있습니다. Symbols 인스턴스의 텍스트를 덮어 쓰면 스케치는 해당 텍스트 레이어 근처에있는 모든 레이어를 자동으로 이동합니다.
이 기능은 레이어의 근접성크기에 따라 작동합니다. 그래서 당신의 경우에 왜 작동하지 않는지 궁금하다면,이 값들을 확인해야합니다.

비평 : Criticism

그룹 크기 조정(group resizing) 기능이 도입 된 지 거의 1 년이되었습니다. 이것은 옳고 필요한 조치였습니다. 그러나이 업데이트는 처음부터에 있어야 했던 방식입니다. 따라서 저는 딱딱하게 만드는 대신 주요 개선점을 기대했지만 스태킹(stacking), 자동 크기 조정(auto-resizing), 레이어 간 제약(layer-to-layer constraints), 그리드 및 레이아웃(grids and layouts)과 같은 필수 기능을 추가하지 않았습니다.
보헤미안 코딩이 충분히주의를 기울이지 않은 것도 매우 중요하다고 생각합니다. 워크 플로가 변경되었습니다. 일부 핵심 기능에서 천천히 그리고 잘 검토되지 않은 업데이트로 인해 디자이너들은 일시적으로 지속 불가능한 워크 플로우를 발견하게되었습니다.
특히 레이어 스타일 및 심볼 기능. 디자이너와 팀을 처음부터 다시 설정하고 자주 다시 적용하도록하는 것은 바람직하지 않습니다. 나는 이것이 정말로 소모적이라고 생각합니다.
요약하자면, 보헤미안 코딩은 더 나은 로드맵을 가지고 있어야하며 핵심 기능을 개발할 때보다 신중해야합니다. 우리는 Sketch를 좋아하고 더 좋기를 원합니다!

다음은 글은 무엇일까?

이 글의 다음 부분에서는 Anima’s Auto-layout plugin에 대해 다룰 것입니다. 그것은 더 많은 기능을 가지고 있으며 더 유용 해 보입니다. 그것들을 함께 사용할 수 있으므로, 내가 자세히 설명하고 선택은 당신에게 맡길 것입니다.

다음편 글도 번역 기대해 주세요


원본 글입니다.
Responsive Design in Sketch — Part 1