저는 최근 ProtoPie에서 3D 객체의 3D, 더 정확히는 360° 뷰를 생성해 보려고 했습니다. ProtoPie에서 스와이프하거나 버튼을 사용해 손쉽게 조작할 수 있도록 말이죠.
처음에 예상했던 것보다 과정은 훨씬 간단했지만, ProtoPie에서 이 효과를 구현하는 가장 효과적인 방법을 찾는 데는 시간이 조금 걸렸습니다. 단계가 길어 보일 수 있지만, 생각하시는 것보다 훨씬 간단합니다.
아래의 단계별 가이드를 따라 보세요. 다만 좋은 레시피처럼, 우리의 Pie를 만들기 전에 먼저 몇 가지 필수 재료가 필요합니다.
이 튜토리얼의 최종 결과입니다.
1단계: 재료
현재 ProtoPie Studio에 실제 3D 객체를 직접 통합하는 것은 불가능하므로, 3D 객체에서 24장의 이미지 또는 프레임을 생성해 이 효과를 시뮬레이션합니다.
**참고: **Connect 2.7 출시와 함께 ProtoPie Connect에서 3D 객체를 통합할 수 있습니다.
어떤 3D 소프트웨어에서든 객체 주위를 360° 회전하는 카메라를 만드세요. 다음으로 렌더링 설정을 24프레임으로 구성하면, 짜잔! 정적인 프레임이 준비됩니다.
2단계: 오븐을 준비하세요
ProtoPie Studio에서 첫 번째 단계는 새 프로젝트를 만들고 렌더링된 모든 이미지를 가져오는 것입니다. 이 이미지들을 정확히 겹치도록 정렬한 다음 함께 그룹화합니다. 이 그룹의 이름은 “frames”가 됩니다. 그룹 내 각 프레임의 불투명도는 0으로 설정하고, 프레임 1만 100으로 유지하세요.
그다음 variables 아래에 새 변수를 만들고 이름을 “xPos_var”로 지정합니다.
3단계: 열기를 올리세요
우선 Triggers 메뉴에서 Chain을 만들고 “xPos_var” 변수에 연결합니다.
다음으로 체인에 Opacity 응답을 추가하고 처음 프레임의 이름을 지정합니다. 이 과정을 계속해서 각 프레임에 대한 응답을 추가하여 Chain 트리거에 모든 프레임을 포함할 때까지 반복합니다. 저는 첫 번째 프레임을 복제하고, 복제본마다 새 레이어를 만들었습니다.
3D 렌더의 각 프레임에 Chain 트리거와 Opacity 응답을 사용하세요.
4단계: 현재 위치는 어디인가요?
이제 체인은 잠시 제쳐 두고 이 튜토리얼의 후반부에서 다시 살펴보겠습니다.
먼저 현재 위치를 확인해야 합니다. 시작하려면 사각형을 만들고 이름을 “xPos Dot”으로 지정한 뒤, 화면 왼쪽 어딘가에 배치하세요. 쉽게 식별할 수 있도록 밝은 색으로 지정했습니다.
마지막으로 이 “xPos Dot”을 그룹화합니다. 왜냐고요? 이렇게 하면 이 사각형의 시작 위치를 x = 0, y = 0으로 설정할 수 있기 때문입니다. 과정이 더 단순해집니다.
파노라마에서 위치를 추적하기 위해 X축에 트래킹 점을 만드세요.
5단계: 이제 드래그해 봅시다.
여기서 우리의 목표는 사각형의 위치를 마우스/터치 위치와 연결한 다음, 그 위치를 다시 체인에 전달하는 것입니다. 이렇게 하면 객체가 실제로 회전하는 듯한 느낌을 줄 수 있습니다.
시작해 봅시다!
드래그 트리거를 추가하고 프레임 그룹에 드래그를 적용합니다.
다음으로 Move 응답을 추가하고 xPos Dot에 연결합니다. 방향은 양방향으로 설정하고, 사용자 지정 최소값 = 0, 최대값 = 1201로 제한합니다.
Drag 트리거를 사용하면 xPos Dot을 화면 주위로 이동시킬 수 있습니다.
6단계: 우리의 위치를 완성하기
이제 xPos Dot을 움직일 수 있지만, 그 위치를 감지해야 합니다.
먼저 **Detect ** 트리거를 추가하고 xPos Dot = x로 설정합니다.
다음으로 Assign 응답을 추가하고, 이전 단계 2에서 만든 변수(xPos_var)에 할당합니다.
이 할당 트리거의 formula 섹션에서 xPos Dot을 추가한 다음 뒤에 .x를 붙입니다. “xPos Dot.x”와 비슷하게 표시되어야 합니다.
나중에 이 값을 Chain 트리거에 할당하기 위해 xPos Dot을 추적합니다.
미리보기를 누르면 이제 밝은 색의 사각형을 움직일 수 있습니다.
7단계: 주요 재료를 체인에 연결해 봅시다
목표는 변수에 추적해 둔 “xPos Dot” 위치 정보를 Chain이 어떻게 사용해야 하는지 알려 주는 것입니다. 이를 위해 앞서 만든 Chain 트리거에 들어가 첫 번째 opacity 레이어를 선택합니다.
여기서 범위를 조정해야 합니다.
먼저 range: 0 = opacity: 100 및 range: 50 = 100을 추가합니다.
이렇게 하면 xPos Dot이 값 0에서 50 범위에 있을 때 첫 번째 프레임이 표시되어야 한다는 것을 Chain에 알려 줍니다.
여기에는 보조 범위도 추가해야 합니다. 이 값은 51 = 0 및 51 = 0으로 설정합니다.
이렇게 하면 xPos Dot이 51 범위를 넘었을 때 이 프레임을 숨기도록 Chain에 지시합니다.
파노라마에서 각 프레임을 표시할 시점을 Chain에 알려 주기
8단계: 최종 굽기 대결
다음 단계는 이 Pie에서 가장 많은 작업이 필요한 부분입니다. 매우 반복적이지만, 결과는 정말 멋집니다!
이제 앞의 단계를 모든 프레임에 대해 반복하면서 동시에 각 프레임에 세 번째 범위를 추가해야 합니다.
범위를 매번 50씩 증가시키되, 첫 번째 범위에는 -1을, 세 번째 범위에는 +1을 더합니다. 이렇게 하면 특정 값의 위나 아래에 있는 프레임을 Chain이 숨기도록 지시합니다.
모든 프레임이 똑같이 만들어지는 것은 아닙니다. 각 프레임의 범위를 세심하게 살펴봐야 합니다.
참고: frame 2의 값은 100~150, frame 3은 150~200이며, 이후도 동일합니다.
우리의 Pie가 먹을 준비가 되었습니다!
각 프레임에 이러한 값을 적용하면 회전은 사실상 완료됩니다! “xPos Dot”의 불투명도를 0으로 조정해 숨기면 완료입니다!
참고: 버튼을 통한 수동 회전을 활성화하려면 Tap 트리거와 “xPos Dot, ”에 대한 Move 응답을 추가하고, 탭할 때마다 이를 101씩 이동시키면 됩니다.
읽어 주셔서 감사합니다!
ProtoPie에서 3D 객체로 프로토타이핑 시작하기
ProtoPie와 함께 프로토타이핑 여정을 시작하세요. 동적인 3D 객체를 디자인에 도입하여 창의적 가능성을 넓히고, 몰입형 인터랙티브 경험으로 사용자 참여를 향상시킬 수 있습니다.
저자 소개:
Evert Martin은 Inert와 Toyota에서 수상 경력을 가진 수석 HMI 디자이너로, 몰입감 있는 사용자 인터페이스를 만드는 전문성으로 잘 알려져 있습니다. 차량과 애플리케이션을 위한 글로벌 프로토타이핑 이니셔티브를 이끌며, 혁신과 실용성을 매끄럽게 결합합니다. 접근성 디자인에서의 탁월한 성과와 자동차 사용자 참여 방식을 재정립한 공로로 인정받는 Evert는 수상 경력에 빛나는 작업에서 특히 뛰어납니다.
