ㅅㅈㅍ ㅈㅂㅈㅇ (신제품 정보좀요)

Spline은 무한한 창의성을 부여할 수 있는 3D 디자인 도구이며, 3D UI 상호작용 무료 강좌가 있어요.

직관적인 사용법을 지닌 Spline으로 3D 디자인 스킬을 개선할 수 있으며, 인터랙션과 쉬운 코드 내보내기 기능을 제공합니다.

Spline은 맥, 윈도우와 태블릿과 완벽하게 호환되며, 브라우저에서 실행됩니다.

Spline는 3D 설계 영역에서 상호작용, 조명, 재료, 그림자부터 3D 월드, 아이콘, 캐릭터 디자인까지 다루는 다양한 튜토리얼을 제공해요.

Spline 문서를 통해 핵심 기능을 자세히 알아볼 수 있고, 3D 디자인 상호작용, 재료, 카메라에 대한 자세한 내용도 찾아볼 수 있어요.

또한 Spline을 사용하여 상호작용 3D 에셋을 사용한 디자인 및 코드 랜딩 페이지를 설계하는 입문 과정과 ReactJS 사이트에 구현된 상호작용 3D 장면 구축 방법을 배울 수 있어요.

Spline 커뮤니티에서는 디자이너들과 연결되어 프로젝트에 영감을 얻을 수 있으며, 디자인을 수정하여 선호에 맞게 변형할 수도 있어요.

Spline을 사용해 3D 아이콘을 만들려면 원형을 생성하고 회전시킵니다.

다음으로 사각형을 만들고 꾸며서 깊이를 추가하고, 모든 도형을 그룹화하여 처리를 용이하게 합니다.

마지막으로, 각 도형에 재질을 적용하여 색상과 조명 효과를 정의합니다.

원의 재질은 소프트하고 매력적인 색으로, 조명 모드는 오버레이로 변경해요.

그리고 원 형상에 적용한 재질을 다른 세 개의 원에도 동일하게 적용해요.

사각형의 재질은 그라디언트 색으로 깊이 설정하고, 그림자 설정을 램버트로 변경하여 3D 효과를 부여해요.

원의 재질 설정을 만들면 디자인 일관성을 유지할 수 있어요.

마지막으로, 해시아이콘이 출시될 때 Play Mode를 통해 디자인을 미리 확인하고 상호작용할 수 있어요.

Spline 3D에서 그룹화된 객체를 작업할 때 피벗 위치가 예상대로 중앙에 정렬되지 않을 수 있어요.

그룹화된 레이어를 언그룹핑하고, 병합 도구를 사용하여 원하는 위치로 피벗을 재조정할 수 있어요.

중심에 선을 정렬하기 위해 각 축의 위치를 x0, y0, z0으로 설정하고, 스타일리시한 경사면 효과를 위해 평행면 갯수를 네 개로 설정해야 해요.

디자인에 개성을 더하기 위해 화면 배경색을 변경할 수 있어요.

Spline을 사용하여 다이나믹한 3D 아이콘을 만들 수 있고, 이러한 기술은 앱 디자인이나 데이터 시각화와 같은 다양한 프로젝트에 활용될 수 있어요.

재료 속성에서 구체를 선택하고, 'depth'로 색상을 변경해요.

새로운 레이어를 추가하여 'mat cap'을 선택하여 원하는 텍스처를 적용해요.

구름을 만들기 위해 3개의 구체를 하나로 합치고, 스칼핑 브러시를 사용하여 모양을 잡아요.

구름에 물방울을 추가하기 위해 실린더를 선택하고, 크기와 위치를 조정해요.

Spline 라이브러리를 사용하여 재료를 선택해서 3D 아이콘에 적용하는 방법을 설명했어요.

파란색 빗방울 아이콘을 만들기 위해서는 재료를 수정하고 depth layer를 추가해야 해요.

다음으로, 3D 아이콘에 배경 카드를 추가하기 위해 사각형 모양을 만들고, 필요한 속성을 설정하였어요.

Spline 라이브러리에서 특별한 재료를 선택하여 배경 카드를 꾸몼다.

그룹을 만들고, 카메라 각도와 그림자를 조정하여 3D 장면을 개선했어요.

마지막으로, 온도 텍스트를 추가하고 필요한 조정과 설정을 진행하여 아이콘을 더욱 정보성있게 꾸몼어요.

텍스트를 중복해서 생성해서 날씨 조건에 사용해요.

폰트 사이즈를 24로 변경하고, 정규 폰트 스타일을 사용하죠.

X100, Y30 위치에 날씨 텍스트를 배치해요.

Y축은 -130Z-5로 조절하면서, 수평 중앙에 위치시킵니다.

내용을 '소나기'로 바꾸고 투명도를 60으로 설정해요.

날씨 카드를 완성했어요.

태양에 애니메이션을 추가해서 회전시키죠.

States 패널에서 기본 상태와 State를 왔다갔다하며 변경사항을 확인할 수 있어요.

애니메이션을 실행하기 위해 이벤트 패널로 이동하고, '시작' 이벤트를 선택하고, 대상을 'sphere'로 설정해요.

4초 동안 ease-in-out 애니메이션을 설정해요.

미리보기 모드에서 회전을 확인할 수 있어요.

Sunbeam에 애니메이션을 추가해서 빛 바랜 광선 같은 움직임을 만들어요.

Cloner 패널에서 end 값 설정해요.

transition과 delay를 사용한 애니메이션을 추가해요.

Cylinder를 대상으로 설정하면 애니메이션을 미리볼 수 있어요.

구름에 부드러운 움직임을 추가해요.

offset 값을 설정해서 움직임을 생성해요.

이벤트 패널에 들어가서 '+' 아이콘을 클릭하여 이벤트를 추가해요.

시작 이벤트를 선택하고, 액션으로 전환을 선택하면 됩니다.

대상을 'Cloud'로 설정하고, transitions 1은 Base State, transitions 2는 State로 설정합니다.

6초 동안의 선형 애니메이션을 사용하고, 순서를 Loop infinity로 설정하여 애니메이션을 순방향 및 역방향으로 반복 재생합니다.

Raindrop 내부에 비가 대각선으로 떨어지고 사라지는 애니메이션을 만들기 위해 Raindrop의 색상을 진한 파란색으로 변경해요.

합성 모드를 'multiply'로 설정하여 빛깔 효과를 줍니다.

Raindrop을 비 내부로 위치시키기 위해 레이어를 선택한 후, Z 축을 따라 20도 회전시키고, X 위치는 -90, Y 위치는 20, Z 위치는 100으로 설정합니다.

그 후, State 패널로 이동하여 '+' 아이콘을 클릭하여 새로운 상태를 추가하고, Green Arrow를 선택하여 50단위로 아래로 이동시킵니다.

마지막으로 이벤트 패널에서 '+' 아이콘을 클릭하여 이벤트를 추가하면 더운 날씨에 재미있고 시원한 비 내리는 애니메이션 Raindrop이 만들어집니다

Spline에서 만든 멋진 3D 아이콘을 세상에 자랑해 보세요.

이제부터는 프로젝트에 창의성을 추가하는 기술에 대해 알아보겠습니다.

3D 경로를 생성하고 해당 경로에 애니메이션을 추가하는 기본을 탐색합니다.

경로를 씬에 추가하는 방법을 알아보겠습니다.

여러 가지 방법으로 동일한 결과를 얻을 수 있습니다.

직사각형에서 경로를 생성하기 위해 모양에 있는 '경로로 변환'을 선택하세요.

포인트를 이용해 경로를 수정하고, 해당 경로에 따라 애니메이션을 추가하세요.

이제 비가 더욱 현실적으로 표현되며, 파일 이름을 지정하는 것을 잊지 마세요.

패스 포인트가 모두 보라색이면 경로값을 증가시켜 모든 포인트를 동시에 조정할 수 있어요요.

보라색 점들로 좌우로 연결된 경로 포인트만 편집할 수 있어요요.

타원 도구를 사용해 새로운 경로를 생성하고 이미지를 흉내내는 것도 가능하죠.

경로를 편집하고 점과 베지어 곡선을 조정하여 복잡한 디자인을 만들 수 있어요요.

SVG 파일을 직접 가져와서 패스 툴로 작업하거나 커스텀 디자인을 만들 수 있어요요.

경로의 교차점이 부드럽게 나오지 않으므로 핸들을 조절하여 부드러운 움직임을 얻을 수 있어요요.

경로에 그래디언트를 추가한 후에도 몇 가지 작은 문제가 남아있습니다.

첫 번째와 마지막 컬러가 다르더라도 극단부 끝에는 같은 색상이 나오게 하기 위해서는 첫 번째와 마지막 컬러 스탑에 같은 색상을 사용해야 해요요.

경로가 교차하는 부분에서 색상이 이상하게 섞이는 현상이 있다면 카메라 뷰를 조정하여 해결할 수 있어요요.

Option 키를 누른 상태로 마우스를 드래그하여 겹쳐지는 효과를 줄 수 있어요요.

경로 애니메이션이 완료되면 경로에 인터렉티브한 상태를 추가하여 멋진 애니메이션을 만들 수 있어요요.

애니메이션 간에 간격을 주기 위해 경로 사이에 지연 시간을 추가하도록 하죠.

경로 1에 애니메이션의 시작 이벤트에 경로 2로의 전환을 추가합니다.

이로 인해 두 번째 애니메이션은 첫 번째 애니메이션이 완료된 후 시작됩니다요.

Spline를 사용하여 웹 디자인, 제품 프레젠테이션 등을 높여주는 매력적인 3D 파도 애니메이션 제작 방법을 배울 수 있어요.

파도 애니메이션은 웹사이트의 주요 섹션에 매력적인 배경으로 사용되며, 방문자의 주의를 끄는 데 도움이 된대요.

또한 간단하고 우아한 제품 프레젠테이션에 사용하여 시각적인 매력을 더하는 것도 가능합니다.

wave를 처음부터 창조하는 과정은 튜토리얼에서 안내하고 있으며, Spline를 브라우저나 데스크톱 앱에서 열고 새 파일을 만들면 됩니다.

마감 효과를 위해 그래디언트를 사용하여 파도를 더욱 눈길 끄는 디자인으로 만들었어요.

첫번째 그래디언트에는 세 가지 색상을 추가하여 사용했고, 두번째와 세번째 그래디언트는 기존 그래디언트를 복제하여 색상을 수정했어요.

파도에 깊이감을 추가하기 위해 색상 램프를 사용하고, 각 그래디언트마다 적절한 블렌딩 모드를 설정해 시각적인 매력을 높였어요.

그리고 유리 파도 효과를 추가하여 파도에 신비로움을 더했어요.

Glass 타입을 선택하고 깊이 설정을 변경한 후, 유리 형태의 이미지를 적용시켰어요.

유리 물결은 투명해야 하는데 검은 색으로 보였기 때문에 블렌딩 모드를 적용하여 투명도와 밝기를 높였어요.

물처럼 생생한 외형을 만들기 위해 세세한 효과 조절을 실시하고, 소재의 효과 순서를 재정렬하여 더 어둡고 균일한 외관을 만들어냈어요.

또한 유리 모양을 조정하여 배경이 잘 보이도록 하고, 애니메이션을 적용하여 파도를 부드럽게 움직이도록 효과를 주었답니다.

3D 파랄랙스 효과를 사용하여 디자인에 깊이와 독특한 시각적 경험을 더할 수 있어요.

3D 카드를 만들기 위해서는 개별 요소들을 다른 깊이로 배열하고, 유리 레이어를 사용하여 숨겨진 배경으로 한 줄기 창문을 생성해야 해요.

이 섹션에서는 메인 카드를 만들고 유리 레이어를 사용하여 창문을 생성하는 방법을 알려드릴게요.

배경 이미지를 추가하고, 외부 공간의 3D 카드를 만들고, 조명과 유리 레이어 등을 적용해요.

또한, 텍스트 내용을 넣을 유리 레이어와, 유리 레이어 내부의 다른 요소들을 숨기기 위한 큐브도 추가할 수 있어요.

마지막으로, 사용자 상호작용을 향상시키기 위해 다양한 설정을 사용할 수 있어요.

원하는 크기로 조절하고, 꼭짓점을 20으로 설정해 크기를 조정합니다.

광원, 물질, 경계선을 레이어로 구성하고, 적절한 설정값을 적용합니다.

Portal 효과를 위해 배경 유리 레이어와 색상 레이어를 추가하고 3D 아이콘 디자인을 완성합니다.

레이어 목록에서 방향성 라이트를 제일 위로 이동하여 강도를 1로 설정하고, 도구 모음에서 + 아이콘을 클릭하여 카메라를 추가해요.

3D 카드 앞에 카메라를 배치하고 위치를 250, 50, 100으로 설정하고, 플레이 설정으로 이동하면 자동으로 적용되지 않으므로, 카메라로 설정해야 해요.

또한, 오비트 제한을 활성화하고 상하좌우 값(15, 30)을 변경해줘요.

이제 3D 카드를 시각화하면 완성되었어요!

지난 섹션에서 사용한 3D 카드 파일을 Spline에서 열어요.

텍스트를 생성하려면 툴바에서 T를 클릭하고 25나 다른 숫자를 입력해요.

크기를 260과 50으로 조정하고, 폰트 크기를 80으로 설정해요.

텍스트에는 현재 사용 중인 산세리프 폰트를 선택하고, 세미 볼드로 설정해요.

수평 및 수직 정렬은 Center로 설정해요.

소재 패널로 이동하여 현재는 조명을 숨기고, 색상을 흰색으로 변경해요.

이제 가격 옆에 통화 기호를 추가해요.

크기는 260과 30으로 조정하고, 폰트 크기는 40으로 설정해요.

웨이트는 세미 볼드로 설정하고, 가로와 세로 정렬은 다시 Center로 설정해요.

이번에는 색상을 흰색으로 하지만, 투명도를 30%로 줄여요.

동일한 단계를 반복하지 않기 위해 그냥 복제하기로 해요.

명령 키를 드래그하여 복제하고, 텍스트를 'Pro'로 변경하고 크기를 20으로 변경해요.

다시 복제하고 'per month build monthly'라고 텍스트를 변경해요.

크기는 17로 변경하고 규칙적인 웨이트로 설정해요.

3D 아이콘을 위로 이동시켜 공간을 확보한 다음, 모든 텍스트를 위로 이동시킵니다.

이제 레이어에 이름을 붙여요.

이제 아이콘이 필요해요.

SVG 아이콘을 찾아서 가져와요.

이제 불러온 아이콘을 씬에 끌어다 놓고, 카드에 아이콘을 배치해요.

일시적으로 아이콘을 보이지 않도록 색상을 흰색으로 변경하고 위치를 조정해요.

'per month build monthly' 아래에 텍스트를 복제하여 아이콘 옆에 배치하고, 텍스트를 'all courses and videos'로 변경해요.

수평 정렬은 왼쪽으로 설정하고, 색상의 투명도를 50으로 설정해요.

그런 다음 레이어에 이름을 붙여요.

아이콘과 텍스트를 선택하고 함께 컴포넌트로 만들어요.

주요 컴포넌트를 복제하여 두 개의 인스턴스를 만들어요.

'Type Course designs, source files and CER certificates and tests.'로 텍스트를 변경해요.

이제 버튼을 만들 차례에요.

툴바에서 직사각형을 클릭하여 시작하고, 기능 아래에 배치해요.

크기를 338x64로 설정하고, 모서리를 16으로 설정하고, extrusion은 12로 설정한 다음, bevel은 1로 설정해요.

3D 버튼을 만들기 위해 다양한 재질을 사용하고 불투명도와 블렌딩 모드를 조정했어요.

'Subscribe'라는 텍스트를 추가하고 크기와 폰트, 색상을 조정하여 디자인을 완성했어요.

다른 배경을 선택할 때 버튼에 반사 효과가 나타나지 않을 수 있다는 부분도 고려해야 해요.

또한, 가격 카드를 만들기 위해 버튼 컴포넌트를 생성하여 일괄적으로 수정이 가능하도록 했어요.

버튼에 다양한 변형을 적용할 수 있으며, 이는 메인 컴포넌트를 수정함으로써 일괄 적용됩니다.

마지막으로 텍스트 라벨을 'Create Account'로 수정하고, 컴포넌트를 체크하고 관리했어요.

버튼에 더 많은 변형을 추가하여 디자인을 더욱 다채롭게 할 수 있죠.

컴포넌트를 사용하면 텍스트 정렬 문제 같은 수정사항을 한 번에 모든 카드에 적용할 수 있다는 장점이 있어요.

스플라인은 3D 씬 생성, 디자인 시스템, 아이콘 디자인 등에서 유연하게 사용되는 다재다능한 도구이에요.

스플라인과 컴포넌트는 3D 프로젝트에서 효율성, 일관성, 창의적 탐구를 촉진해줘요.

스크린 리사이즈 이벤트를 활용하여 다양한 스크린 크기에 적응하는 레이아웃을 만들 수 있는 유용한 도구이죠.

캔버스 크기가 설정된 픽셀 값보다 작을 때는 'Less than' 액션이 작동해요.

캔버스 크기가 설정된 픽셀 값보다 클 때는 'More than' 액션이 작동하죠.

캔버스 크기가 지정된 범위 내에 있을 때는 'Between' 액션이 작동합니다.

모바일, 태블릿 및 데스크탑 각각에 대해 중단점을 생성해야 하며, iPad의 경우 세 번째 중단점 설정은 기본적으로 'between'으로 하고 값은 768과 1200 사이로 유지합니다.

전이의 외관을 선택하거나 지속 시간을 설정할 수 있고, 전이가 시작하기 전의 지연 시간을 정할 수도 있습니다.

각 전이 부분에 대해 속성을 조정하여 원하는 레이아웃을 높일 수 있어요.

Figma에서 디자인을 가져와서 아이콘을 애니메이션화시키고, Spline을 사용해 투명한 대리석처럼 떠다니는 플로팅 액션 버튼을 만들 거예요.

탭 바를 생생하게 보이도록 애니메이션을 적용하며, 상단부의 신용카드 디자인은 다루지 않지만 전체 디자인에 접근할 수 있어요.

그리고 Spline으로 인포트한 탭 바의 디자인을 조정하고 원하는 대로 정렬한 뒤, 파일에서 남은 부분은 삭제하고 남은 모양의 이름을 '탭 바 베이스'로 변경할 거예요.

윤곽에 유리 재질을 추가하고 블러 값을 20으로 설정하여 약간 흐릿한 또는 인화된 외관을 만들었어요.

두께를 20으로 조정하여 유리 재질이 상당한 두께를 가지도록 했구요.

굴절 값을 3으로 설정하여 이 유리 재질을 통과하는 빛이 약간 구부러지거나 왜곡되는 정도를 나타내요.

맷캡 재질을 추가하고, 맷캡 재질 선택의 왼쪽 상단 모서리에서 초기 옵션을 선택하여 재질의 외관을 세팅했어요.

재료의 불투명도를 30%로 조정하여 투명도 수준을 제어하고 다른 요소들을 부분적으로 표시하도록 했어요.

'스크린' 블렌딩 모드를 선택하여, 밝은 백그라운드 요소를 고조시키고 특정한 시각적 효과를 만들었어요.

어두운 셰이드인 이 칼라 코드를 가진 컬러 재질을 추가하고, 이 컬러에 30%의 투명도와 '오버레이' 블렌딩 모드를 적용했어요.

시각 효과를 향상시키기 위해 다양한 배경을 도입하였으며, 윤곽 효과로 언더바이의 요소와 조화를 이루게 했어요.

3차원 효과를 만드는 층감을 추가하였으며, 디자인에 맞게 Extrusion 값을 10으로 설정했어요.

SF 심볼에서 가져온 아이콘을 아웃라인 스트로크로 변환하여 경로 애니메이션에 사용해야 해요.

이때, 아이콘을 다른 플랫폼에서도 사용할 수 있도록 스트로크로 변환하는 것이 중요해요.

프로젝트에 아이콘을 통합하고, 모든 아이콘을 패스로 변환해야 하는데, 아이콘 크기가 커질 수 있으므로 수동으로 크기를 조절해야 합니다.

탭이 제대로 위치되도록 전체 탭 바 이미지를 참조해야 하며, 아이콘과 텍스트를 그룹화하여 작업하면 편합니다.

또한 붙여넣기 옵션을 이용해서 대상 아이콘과 정확히 일치하게 새 아이콘을 위치시킬 수 있고, 탭 바 모서리를 둥글게 처리하여 이를 백그라운드와 시각적으로 조화롭게 만들 수 있습니다.

최종적으로 아웃라인 스트로크 생성과 매레리얼 블렌딩 모드와 불투명도를 조정하여 플로팅 액션 버튼을 효과적으로 디자인하는 것이 좋습니다.

기존 구의 복제본을 만들고 재질을 조정하여 두 번째 구를 생성하고, 세 번째 재질인 '깊이(depth)'는 수평 그라데이션 효과를 위해 Y 위치를 조절하면요.

두 개의 구를 선택하여 하나의 그룹으로 묶은 다음 이름을 변경하고, 선택된 모양에 대해 네 가지 상태를 추가하여 교감성을 높입니다.

그리고 레이어 순서의 중요성과 디자인의 재질 속성에 대해 설명하며, 뒷 배경을 삭제하고 선택된 모양을 배치하고 회전시키고, 전체 요소를 애니메이션화하면서 아이콘 경로에도 경로 애니메이션을 적용합니다.

탭 바, 아이콘, 아웃라인 등 다양한 요소들에 애니메이션을 적용해요.

각 탭의 아이콘 경로 애니메이션을 설정하는 반복적인 단계를 따라야 하며, 이벤트를 추가하고, 트리거를 선택하고, 액션을 트랜지션으로 설정해야 해요.

세 개의 탭에도 동일한 이벤트를 적용해야 하고, 각 트랜지션의 대상을 수동으로 조정해야 합니다.

아웃라인 형태에도 애니메이션을 적용할 수 있으며, 구체의 투명도를 설정해 변경을 나타낼 수 있습니다.

마지막으로 두 개의 구체에도 애니메이션을 적용하여 반복적인 움직임을 구현합니다.

탭 바 그룹을 선택하여 전체 탭 바를 애니메이션화하고, 각각의 탭에 해당하는 아이콘을 표시할 때 경로 애니메이션을 설정해요.

첫 번째 전환의 대상을 '홈' 탭의 'play' 아이콘으로 설정하고, 두 번째 전환에서는 대상을 두 번째 탭인 '검색'으로 설정해요.

이와 같은 패턴으로 딜레이를 0.20초씩 늘려가며 각 전환을 설정하는데, 설정 탭의 경로는 '설정 1'과 '설정 2'를 포함하여 두 개의 경로로 이루어져 있어요.

마지막으로 '효과' 스위치를 켜서 장면에 다양한 효과를 적용하는데, 경로 애니메이션, 플로팅 액션 버튼 애니메이션, 그리고 탭 바의 선택된 상태가 원활하게 작동하는 것을 확인할 수 있어요.

Spline에서 상호작용적인 경험을 구현하기 위해 변수에 대해 자세히 알아보고, 숫자, 텍스트, 부울 값 등의 종류와 사용법을 배우며, 세 가지 연습을 진행해요.

변수는 값이 변경되거나 수정될 수 있는 기반이며, 객체에 할당할 수 있는 자산으로 생각할 수 있어요.

또한, 이벤트와 결합하여 액션을 트리거하고 수학식으로 작동하는 조건부 로직을 구현할 수 있어요.

주어진 프로젝트에서는 변수 테이블을 열어 다양한 유형의 변수를 사용하여 객체를 관리하고 애니메이션을 적용해요.

시간 변수를 사용하여 동적인 애니메이션과 전환 효과를 만들 수 있어요.

랜덤 변수를 활용하여 프로젝트에 무작위성과 예측 불가능성을 부여할 수 있어요.

카운터 변수를 사용하여 동적인 순서나 반복을 구현하는데 유용하며, 진행상황 표시줄에 적용할 수 있어요.

각 변수를 객체에 할당하고 애니메이션을 추가하여 더욱 생동감 있는 결과물을 만들 수 있어요.

변수 값이 변경될 때마다 액션이나 애니메이션을 트리거하기 위해 변수 변경 이벤트를 사용할 수 있어요.

실습 2에서는 디자인과 카메라 설정은 되어 있고, 변수에만 집중해요.

첫 번째 열을 설정하고 나면, 나머지 세 열도 동일하게 설정해요.

변수 테이블에서 변수를 생성해요.

숫자 변수와 문자열 변수를 추가하고 값을 설정해요.

변수를 객체에 할당해요.

텍스트 레이어와 컬럼 레이어에 각각 변수를 할당해요.

롤오버 시 열과 숫자가 일정 비율로 증가하는 애니메이션을 추가해요.

이 때, 조건부 액션을 사용해요.

Spline에서는 텍스트를 설정하고 변수 변경 이벤트를 추가해야 해요.

시간 변수를 사용하여 동적 애니메이션과 부드러운 전환을 만들 수 있어요.

시계, 타이머, 스톱워치로 분류되고 각각의 유형에 대한 속성 옵션을 선택할 수 있어요.

시간 변수를 텍스트에 할당하여 가변적인 웹 콘텐츠를 만들 수 있어요.

스크롤 기반 상호작용 및 씬 전환에 대한 지침을 학습하여 웹 디자인 프로젝트를 향상시킬 수 있어요.

스크롤 이벤트를 통해 추가한 전환들이 진행돼요.

'스크롤 인터랙션 및 씬 연습'과 '스크롤 인터랙션 및 씬 데모 2 연습' 파일이 필요하다고 해요.

스크롤 인터랙션을 생성하려면 애니메이션을 적용할 요소가 필요해요.

카메라 위치 애니메이션과 상태 및 이벤트에 집중하는데, 카메라를 재설정하고 새로운 상태 'Screen Two'와 'Screen Three'를 추가해야해요.

카메라 속성은 그대로 유지하고, 스크롤 이벤트를 추가해야 해요.

스크롤 이벤트를 통해 웹 페이지를 스크롤할 때 전환과 애니메이션을 정의할 수 있습니다.

스크롤 이벤트에서는 전환을 트리거할 수 있는 액션 종류가 한 가지뿐입니다.

스크롤 이벤트는 특정 스텝 수를 스크롤하는 사용자에게 일어나는 이벤트를 정의합니다.

씬 전환을 구현하기 위해 오브젝트를 선택하고, 마우스 다운 이벤트를 추가해야 합니다.

Spline은 강력한 3D 디자인 도구로서, 쉽게 3D 모델을 USDZ 형식으로 내보낼 수 있게 해줘요.

이 섹션에서는 Spline에서 3D 객체를 내보내는 과정을 자세히 알아보며, iOS에 최적화된 AR 경험을 만들어볼게요.

트릭을 배워 AR을 위한 내보내기를 하기 전에, Spline의 직관적인 디자인 도구를 이용해 3D 모델을 만들어보세요.

원하는 디자인을 달성한 후, AR을 위한 내보내기를 진행할 차례에요.

내보내기 탭을 클릭하여 다양한 형식으로 내보내기를 할 수 있는 기능을 이용해보세요.

이 중에는 퍼블릭 URL 링크로의 내보내기, 코드 형태로의 내보내기, 이미지 형태로의 내보내기, 비디오 녹화 형태로의 내보내기, GLTF 형식으로의 내보내기 등이 있어요.

특히 iOSR Universal Scene Description은 애플이 개발한 파일 형식으로, 쉽게 iOS 기기의 AR 앱에서 볼 수 있는 3D 에셋을 생성할 수 있어요.

STL은 3D 프린팅이나 CAD에 일반적으로 사용되는 3D 형식이에요.

3D 모델의 성능을 평가하고 필요한 경우 최적화하는 것이 수출하기 전에 중요해요.

퍼포먼스 패널과 기타 기법을 사용하여 스플라인 장면을 최적화하는 방법을 안내하며, 톱니 모양을 사용하여 성능을 높이거나 로딩 시간을 줄이는 등 최적화할 수 있는 기회와 지침을 제공해요.

모델을 USDZ 형식으로 내보낼 때 최적화 및 제거 작업을 수행하는 방법도 알려줘요.

USDZ는 일부 기능만 지원하며, 고급 요소 및 기능은 지원하지 않아요.

상호작용, 애셋, 레이어 등을 사용할 수 없고, 간단한 재질과 텍스처만 지원해요.

다른 형식인 SCN, FBX 등을 사용하고 싶다면 압축 설정을 사용하고, 장면에 많은 객체를 추가하지 않도록 주의해야 해요.

이제 USDZ 파일을 내 iPhone 또는 iPad에서 열 수 있게 되었어요.

자동으로 실행되는 AR 뷰어를 통해 모델을 실제 환경에 배치하고 상호작용할 수 있답니다.

직관적인 Spline 도구와 내보내기 옵션으로 웹사이트에 3D 모델을 가져올 수도 있구요, Framer로 Spline 3D 에셋을 웹사이트에 통합할 수도 있습니다.

코드를 활용해 3D 사이트를 출판하는 방법도 있답니다.