소개
이 튜토리얼의 목표는 ProtoPie에서 컴포넌트, 변수, 그리고 send & receive를 사용하여 TV 컨트롤러의 동작을 시뮬레이션하는 것입니다. 또한 스크롤 컨트롤러를 사용하여 TV 콘텐츠를 전환하고 선택된 썸네일에 효과를 추가할 것입니다. 이 튜토리얼을 마치면 전문적으로 보이는 TV 컨트롤러 시뮬레이션을 만들 수 있습니다.
배울 내용
키보드 키(왼쪽 & 오른쪽 화살표 키)로 변수를 조작하기
각 인스턴트 컴포넌트에 고유한 식별을 위한 특별한 번호 부여하기
영화 카드와 썸네일에 선택 효과 만들기
선택한 콘텐츠를 씬으로 이동시키기
마지막에는 이런 것을 만들 수 있게 됩니다!
단계별 안내
1. 키보드 키(왼쪽 & 오른쪽 화살표 키)로 변수를 조작하기
이 단계에서는 오른쪽 화살표 키를 사용하여 변수를 1씩 증가시키거나 왼쪽 화살표 키를 사용하여 1씩 감소시키는 방법을 배웁니다. 이 변수는 화면의 영화 콘텐츠 목록에서 선택된 영화를 나타냅니다.
💡 왜 요소 자체와 상호작용하는 대신 변수를 사용할까요?
이 경우 씬에는 영화가 5개 있습니다. 그리고 각 영화에는 해당하는 카드 항목과 썸네일 이미지가 있습니다. 영화 간을 전환할 때 각 영화 인스턴스 카드와 썸네일 이미지는 동일한 동작을 갖게 됩니다. 모든 카드와 썸네일 이미지에 상호작용을 수동으로 추가할 수도 있지만, 그건 반복적이고 지루한 작업이 너무 많아질 뿐입니다.
그래서 이 경우에는 더 스마트한 방법을 사용할 것입니다. 화면에 현재 표시된 영화 수를 나타내는 하나의 변수만 설정할 것입니다. 그리고 모든 카드와 썸네일 이미지가 이 변수를 관찰하고 그에 맞게 동작하도록 할 것입니다.
1. 메인 씬에 새로운 변수를 만들고 이름을 selected_number로 지정합니다. 그런 다음 영화의 시작 값을 1로 설정합니다(영화 범위가 1부터 5까지이므로).
2. 키보드로 변수 값 증가시키기
a. Press trigger를 추가하고 눌릴 키를 키보드의 오른쪽 화살표 키로 설정합니다
b. 조건을 추가합니다. 그런 다음 조건을 selected_number가 5와 같지 않음으로 설정합니다
c. 영화는 5개뿐이므로, 변수가 5를 넘지 않도록 조건을 사용합니다
d. 조건 아래에 Assign response를 추가합니다. 그런 다음 수식 selected_number+1을 사용하여 selected_number에 Assign response를 설정합니다
3. 키보드로 변수 값 감소시키기
a. Press trigger를 추가하고 눌릴 키를 키보드의 왼쪽 화살표 키로 설정합니다
b. 조건을 추가합니다. 그런 다음 조건을 selected_number가 1과 같지 않음으로 설정합니다
c. 조건 아래에 Assign response를 추가합니다. 그런 다음 수식 selected_number-1을 사용하여 selected_number에 Assign response를 설정합니다
💡 변수가 1보다 아래로 내려가지 않도록 조건을 사용합니다
4. 이제 selected_number의 디버그 토글을 켜고 미리보기 모드로 이동합니다. 키보드의 오른쪽 및 왼쪽 화살표 키를 사용하여 selected_number의 값을 변경할 수 있어야 합니다. 그리고 값은 5를 넘거나 1보다 아래로 내려가지 않습니다.
2. 각 컴포넌트 인스턴스에 특별한 번호 부여하기
1. 각 Movie 인스턴스에 특별한 번호 부여하기
a. Movie 컴포넌트를 엽니다
b. Movie 컴포넌트에 새로운 변수를 만들고 이름을 movie_number로 지정합니다
c. movie_number 변수에 대해 Make Overridable 옵션을 체크합니다
d. 메인 씬으로 이동합니다. 그런 다음 (movie 1~5)의 movie_number 값을 각각 1, 2, 3, 4, 5로 설정합니다
2. 각 Thumbnail 인스턴스에 특별한 번호 부여하기 (Movie 인스턴스와 동일한 논리)
a. Thumbnail 컴포넌트를 엽니다
b. Thumbnail 컴포넌트에 새로운 변수를 만들고 이름을 thumbnail_number로 지정합니다
c. thumbnail_number 변수에 대해 Make Overridable 옵션을 체크합니다
d. 메인 씬으로 이동합니다. 그런 다음 (썸네일 1~5)의 값을 각각 1, 2, 3, 4, 5로 설정합니다
💡 왜 이 두 컴포넌트에 새 변수를 만들까요?
각 영화와 썸네일 인스턴스에 고유한 정체성을 부여하기 위해서입니다.
💡 왜 "Make Overridable" 옵션을 체크할까요?
메인 씬에서 영화와 썸네일 번호를 사용자 지정하기 위해서입니다.
3. 영화 카드와 썸네일에 선택 효과 만들기
1. 메인 씬의 selected_number 변수가 변경될 때 메시지를 보냅니다.
a. 메인 씬에서 Detect trigger를 추가하고 **selected_number **변수를 감지하도록 설정합니다.
b. Detect trigger 아래에 Send response를 추가합니다. 메시지를 selected로 설정합니다. 그런 다음 Send Value Together 옵션을 체크하고 값을 selected_number로 설정합니다.
💡 이 맥락에서 send 및 receive 트리거를 사용하는 이유는 무엇인가요?
컴포넌트를 사용하고 있으며, selected_number에 저장된 값을 다루는 동안 메인 씬에서 부모 컴포넌트를 직접 변경할 수 없기 때문에 send & receive를 사용할 것입니다.
2. 메인 씬에서 Movie 컴포넌트가 메시지를 받도록 합니다.
a. Movie 컴포넌트에서 새 변수를 만들고 이름을 selected_number로 지정합니다
💡 왜 같은 이름의 변수를 만들었을까요?
컴포넌트 내부에서는 메인 씬의 변수에 접근할 수 없기 때문입니다. 그래서 같은 이름의 변수를 만들고, 이를 사용하여 메인 씬의 selected_number 값을 받습니다.
b. Movie 컴포넌트에 Receive trigger를 추가합니다. 메시지를 selected로 설정합니다. Assign to Variable 옵션을 체크합니다. 그런 다음 할당할 변수를 selected_number로 설정합니다
c. Receive trigger 아래에 두 개의 조건을 추가합니다. 두 조건의 이름을 각각 unselected와 selected로 지정합니다
💡 이 맥락에서 unselected와 selected의 용도는 무엇인가요?
이를 사용해 선택된/선택되지 않은 영화 인스턴스를 강조합니다. 두 변수의 값이 일치하면 선택 효과를 볼 수 있습니다. 값이 일치하지 않으면 선택 해제 효과가 표시됩니다.
d. selected 조건을 selected_number = movie_number로 설정합니다.** **그런 다음 unselected 조건을 **selected_number ≠ movie_number **로 설정합니다
e. unselected 조건 아래에 unselected response를 추가합니다. 예를 들어 border stroke의 불투명도를 0으로 설정합니다. 그런 다음 selected 조건 아래에 selected response를 추가합니다. 예를 들어 border의 불투명도를 100으로 설정합니다. 필요한 효과를 추가하여 원하는 대로 selected 및 unselected response를 사용자 지정할 수 있습니다.
f. 이제 메인 씬으로 이동합니다. 미리보기 모드에서 오른쪽 및 왼쪽 화살표 키를 누르면 movie 인스턴스의 선택 및 선택 해제 효과를 볼 수 있어야 합니다. 하지만 씬이 시작될 때 movie 1 인스턴스는 자동으로 선택되지 않습니다.
g. 메인 씬에서 Start trigger를 추가합니다. 그런 다음 start trigger 아래에 detect trigger와 동일한 Send response를 추가합니다. 이제 씬을 미리 볼 때 movie 1 인스턴스가 자동으로 선택됩니다.
3. 메인 씬에서 Thumbnail 컴포넌트가 메시지를 받도록 합니다. (Movie 컴포넌트와 동일합니다)
a. Thumbnail 컴포넌트에서 새 변수를 만들고 이름을 selected_number로 지정합니다
b. Thumbnail 컴포넌트에 Receive trigger를 추가합니다. 메시지를 selected로 설정합니다. Assign to Variable 옵션을 체크합니다. 그런 다음 할당할 변수를 selected_number로 설정합니다
c. Receive trigger 아래에 두 개의 조건을 추가합니다. 두 조건의 이름을 각각 unselected와 selected로 지정합니다
d. **unselected **조건을 selected_number ≠ movie_number로 설정합니다. 그런 다음 selected 조건을 selected_number = movie_number로 설정합니다
e. unselected 조건 아래에 unselected response를 추가합니다. 예를 들어 Thumbnail 컴포넌트의 불투명도를 0으로 설정합니다. 그런 다음 selected 조건 아래에 selected response를 추가합니다. 예를 들어 Thumbnail 컴포넌트의 불투명도를 100으로 설정합니다.
4. 선택한 콘텐츠를 씬으로 스크롤하기
시작하기 전에 모든 movie 인스턴스가 스크롤 컨테이너 안에 있는지 확인하세요.
1. selected_number ≥ 3일 때 조건 추가하기
a. 메인 씬에서 Detect Trigger 아래에 새 조건을 추가합니다. 그런 다음 조건을 selected_number ≥ 3으로 설정합니다
💡 왜 ≥ 3인가요?
목록의 처음 두 movie 인스턴스는 화면에 완전히 보이기 때문에, 스크롤은 3번째 movie 인스턴스부터 발생하도록 하려는 것입니다.
b. 조건 아래에 **Scroll **트리거를 추가합니다. Scroll trigger가 메인 씬의 Scroll Container를 스크롤하도록 설정합니다
c. Scroll trigger의 스크롤 모드를 Scroll To로 설정합니다. 그런 다음 Scroll trigger의 값을 다음 수식으로 설정합니다: 686+(selected_number-3)*802
💡 수식 이해하기 686+(selected_number-3)*802
값은 프로토타입에 따라 달라질 수 있습니다.
이 맥락에서 값 **686 **은 스크롤 컨테이너 안에 있는 3번째 카드의 현재 X 위치와, 화면에 보여야 하는 여백이 있는 카드의 X 값 사이의 차이를 의미합니다.
이 686의 차이를 사용하여 3번째 영화 카드부터 얼마나 스크롤할지 알아냅니다.
하지만 이 값은 4번째와 5번째 카드에는 유효하지 않습니다. 이 카드들을 스크롤하려면 완전한 수식 686+(selected_number-3)*802를 사용합니다. 4번째와 5번째 카드를 스크롤하는 것은 일부만 안쪽에 있고 일부는 바깥쪽에 있는 3번째 카드보다 더 쉽습니다. 4번째와 5번째 카드를 스크롤하려면 카드의 너비 + 두 카드 사이의 여백 값만 있으면 됩니다. 여기서 카드의 너비(762) + 여백 값(40)은 802이며, 이것이 (selected_number-3)과 곱해집니다. 따라서 4번째 카드가 선택되면 스크롤될 값은 686+(4-3)*802가 됩니다.
요약하면, 여기서 값 **686 **은 **3번째 **카드의 스크롤 값을 의미하고, *(selected_number-3)802는 **4번째 **및 **5번째 **카드의 스크롤 값을 구하는 데 적용됩니다.
2. selected_number < 3일 때 조건 추가하기
a. 메인 씬에서 Detect Trigger 아래에 새 조건을 추가합니다. 그런 다음 조건을 selected_number < 3으로 설정합니다
b. 조건 아래에 Scroll trigger를 추가합니다. Scroll trigger가 메인 씬의 Scroll Container를 스크롤하도록 설정합니다
c. Scroll trigger의 스크롤 모드를 Scroll To로 설정합니다. 그런 다음 Scroll trigger의 값을 0으로 설정합니다
💡 왜 < 3인가요?
스크롤은 3번째 영화 카드부터 발생하므로, 이를 스크롤 컨테이너의 초기 상태로 다시 되돌려야 합니다. 스크롤의 초기 값은 0입니다. 그래서 트리거 값을 0으로 설정합니다.
축하합니다!
이제 이런 간단한 팁과 트릭으로 TV 컨트롤러를 시뮬레이션하는 방법을 배웠습니다. 직접 한 번 시도해 보세요!
여러분의 멋진 실험을 꼭 보고 싶습니다. 자신만의 프로토타입을 만들고 Twitter 또는 Instagram에 #MadeWithProtoPie와 함께 공유해 주세요
