이 웹사이트 한번 보세요. 정말 멋있죠?

이곳은 많은 사람들이 어린 시절을 함께했던 디즈니 음악의 작곡가인 알란 멘켄의 웹사이트입니다.

하지만 이 사이트를 정말 특별하게 만드는 건 색깔이나 글꼴이 아니에요. 상호작용 방식이죠.

패널 위로 마우스를 가져다 대면 부드럽게 확장됩니다. 영상과 음악이 레이어 안에 생생하게 담겨 있습니다.

인터페이스 자체가 마치 움직이도록 설계된 듯한 느낌을 받았습니다.

따라서, 제가 구글 스티치와 구글 안티그래비티를 활용하여 이와 똑같은 상호작용 방식을 재현해 보려고 합니다.

디즈니 테마 대신, 각 패널이 확장될 때마다 새로운 정보를 보여주는 여행 웹사이트로 만들어 보려고 합니다.

목적지도, 분리된 작업 영역은 하나씩 장소를 탐험할 수 있는 공간이 됩니다.

시각적인 요소를 그대로 복사하는 것이 목표가 아니라, 경험을 다시 구축하고, 우리가 얼마나 가까워질 수 있는지 확인하는 것입니다.

이 워크플로우에 대해서 말씀드리겠습니다. 계획은 다음과 같습니다. 먼저, 영감을 얻을 수 있는 참고 웹사이트를 선정하는 것부터 시작하겠습니다.

이것은 무엇인가요? 그리고 나서 스티치를 사용하여 디자인을 재현하고, 레이아웃을 조정하고, 시각적인 부분을 다듬을 예정입니다.

그 다음에는 스티치를 안티그래비티에 연결해서 실제 작동하는 웹사이트로 만들 예정입니다.

그런 다음, Antigravity 내에서 해당 프로젝트를 적절한 워드프레스 테마로 변환할 수 있습니다.

드디어 WordPress에서 테마를 활성화해서 사이트를 온라인으로 띄우는 거죠.

자, 시작해 볼까요. 도구를 만지기 전에 무엇을 재현하고 있는지 이해하는 게 중요합니다.

이런 사이트를 보면 레이아웃이 어떻게 반응하고 얼마나 빠르고 부드럽게 움직이는지가 핵심이라고 생각합니다.

패널 위로 마우스를 가져다 대시면, 기본적으로...

패널들이 부드럽게 확장되고, 각 패널 안에는 비디오가 재생됩니다. 또한, 굉장히 역동적이고 몰입감도 느껴지고요.

레이아웃에는 상단 드롭다운 메뉴와 왼쪽에 알림 표시줄이 포함되어 있어, 사용자 경험을 더욱 풍부하게 합니다.

전체 인터페이스 디자인입니다. 전체적으로 깔끔하고 미묘하지만 강력한 상호작용을 제공하여 재현하기에 적합합니다.

자, 이제 시작해 볼까요? 자, 이제 시작해 볼까요?