루프 소개

Introduction to Loops

레이어를 자동으로 반복하여 격자, 표 등을 만들기

루프를 사용하면 프로토타입의 복잡성을 줄이고 공통 요소를 반복할 때 시간을 절약할 수 있습니다. Facebook 알림 프로토타입은 편집 가능한 프로필 이미지, 텍스트, 타임 스탬프 및 글리프가 포함된 하나의 반복된 알림으로 구성됩니다.

수동으로 복제하기

위에서 언급한 모든 레이어는 튜토리얼 파일에서는 하나의 알림만 준비되어 있습니다. 루프 없이 다수의 알림을 만들고 싶다면 그룹을 복사하고(C) 붙여넣기(V)를 할 수 있습니다. 그러나 이 과정은 나중에 편집하고 변경할 때 쉽지 않을 수 있습니다.

대신 루핑하기

루프를 사용하면 하나의 알림을 인스턴스로 사용하여 반복할 수 있습니다. 모든 알림에서 한 가지를 변경하고 싶다면 한 번 해보고 각 알림에 반영하도록 할 수 있습니다. 루프를 만들려면 패치 편집기를 두 번 클릭하고 입력하여 Loop를 찾아 리턴키()를 누릅니다.

Loop 패치를 삽입했는지 확인하세요.

위치 루프하기

우리는 이러한 알림이 6개 정도 필요하다는 것을 알고 있으므로 Loop 패치 Count 입력을 6으로 변경합니다. 이 6개의 알림을 세로로 쌓아두기를 원하므로 Loop 패치의 Index 출력을 Notification 그룹의 Position Y에 연결합니다.

Chrome 그룹을 숨기면 6개의 알림 인스턴스가 서로 쌓인 것처럼 보입니다. 실제로 위치 Y가 0부터 시작하여 서로 수직으로 1 포인트 떨어진 위치에 있습니다. 이는 Loop 패치가 알림의 Y 위치에 직접 연결되어 0에서 시작하는 6개의 값과 숫자들을 제공하기 때문입니다.

예를 들어 Loop의 Index 아웃풋에서 여섯 번째이자 마지막 알림 (Loop Index에서 ‘5’)은 맨 위에서 ‘5’ 지점입니다.

반복된 위치에 공간 추가하기

6개의 알림 인스턴스의 Height 값은 80입니다. 인덱스 값은 0에서 5까지 입니다. 그러므로 각 인덱스를 80에서 수직으로 80 포인트씩 배치해야 합니다.

패치 편집기에서 더블 클릭하고 * 패치를 찾아 리턴키()를 누릅니다. Loop 패치의 Index 아웃풋을 * 패치의 인풋에 입력에 연결하고 나머지 입력을 80으로 만듭니다. 마지막으로 * 패치 아웃풋을 Notification 그룹의 Position Y 레이어 속성 패치에 연결하세요.

패치 사이의 녹색 연결은 루프라고 알려주는 색입니다. 모든 녹색 노드를 탭해서 루프 값을 검사할 수 있습니다.

Index 값을 80으로 곱하면 Notification 인스턴스가 세로로 배치됩니다. 이 값이 어떻게 작동하는지 더 잘 이해하려면 값을 80에서 더 높거나 낮게 변경해보세요.

루프 간격 띄우기

6개의 알림 인스턴스는 아래로 동일하게 Chrome 바로 아래에 위치해야 합니다. 패치 편집기 두 번 클릭하고 + 패치를 찾습니다. 패치 에디터에서 * 패치와 + 패치의 최상단 입력 사이에 + 패치를 위치시킵니다. 마지막으로, + 패치 아웃풋을 Notification Position Y Layer Property 패치에 연결하세요.

이미 연결이 되어있는 곳에 새로운 연결을 하면 이전 연결을 대체합니다.

레이어 패널에서 Chrome을 다시 사용하도록 설정합니다. + 패치의 두 번째 입력을 선택하고 제거하여 Notification 인스턴스가 Chrome 아래에 같은 높이가 되는 지점 값을 찾습니다 (약 116 정도)

이 값을 시각적으로 계산하려면 Chrome을 다시 사용하는걸로 설정하세요.

개별 속성 변경하기

지금까지는 Notification 인스턴스의 Position 속성에만 영향을 주었습니다. 프로필 사진 이미지와 같은 각 알림 인스턴스에서는 어떻게 변경해야 할까요? 튜토리얼 파일 내에 Profile Pictures 이미지 폴더가 있습니다. 해당 폴더를 오리가미로 끌어다 놓습니다.

오리가미는 이러한 이미지를 가져와서 모든 이미지를 인풋으로하는 Loop Builder 패치를 만듭니다.

자동 생성된 Loop Builder 패치

Loop Builder 패치에 있는 이미지들의 아웃풋을 Layers 패널의 Profile Picture 이미지 인풋에 연결합니다. 이 때 뷰어에서 어떤 일이 일어나는지 지켜보세요.

Loop Builder 패치는 Notification의 각 인스턴스를 반복하고 각각에 이미지를 할당합니다. Timestamp Glyph를 사용하여 동일한 작업을 수행할 수 있으므로 시작 튜토리얼 파일에서 Icons 폴더를 오리가미로 드래그 합니다.

생성된 Loop Builder 패치로 아웃풋을 Timestamp Glyph Image 인풋에 연결합니다. 프로토타입의 모든 문자 모양이 프로필 그림의 모양과 비슷하게 업데이트되는 것을 확인합니다.

Loop Builder와 Loop 패치의 차이점은 Loop Builder 패치가 인덱스와 레이어 유형을 제공한다는 것입니다. 이 경우에는 Images가 되겠습니다.

이미지를 너머

패치 편집기에서 더블 클릭하고 Loop Builder를 찾아 리턴키()를 누릅니다. 이 Loop Builder 패치를 오른쪽 클릭하고 인풋 수를 6으로 변경합니다.  Loop Builder 패치에서 다시 마우스 우클릭하고 유형을 Text로 변경합니다.

Loop Builder 패치는 다양한 인풋 유형을 지원합니다.

이 새로운 Loop Builder 패치를 사용하여 각 인스턴스의 알림 텍스트를 대체합니다. 다음 단계로 넘어가기 전에 원하는 텍스트로 입력 내용을 입력하세요. 그런 다음 Loop Builder 패치의 Strings 아웃풋을 Notification Text 레이어의 Text 인풋에 연결합니다.

뷰어에서 변경 내용이 새 내용으로 프로토타입을 채우는지 확인합니다. 다음으로 다른 Loop Builder 패치를 추가하고 인풋 수와 유형을 편집하는 대신 이전 Loop Builder를 Option-클릭()하고 바로 아래로 드래그 합니다.

복사된 패치는 인풋 수와 유형을 유지합니다.

계속 진행하기 전에 이 패치의 인풋 값을 원하는 값으로 변경합니다. 다음으로,이 Loop Builder 패치의 String 아웃풋을 Timestamp Text 인풋에 연결합니다.

이제 6가지 알림으로 구성된 프로토타입을 만들어야 합니다. 이러한 각 알림에는 쉽게 편집할 수 있는 반복된 내용이 포함되어 있습니다.