Good Bye, Adios2024
소원을 적은 풍선을 가상의 하늘로 날려 보내는 연말의 작은 웹 프로젝트
Overview
2024년의 마지막, 한 해를 보내며 작은 웹사이트를 하나 만들었습니다.
어릴 때 새해 일출을 보러 가면 소원을 적은 풍선을 하늘로 날리곤 했습니다. 좋아했던 풍경이지만 환경 문제로 더 이상 보기 어려워진 이 경험을 웹에서는 다시 만들어볼 수 있지 않을까 생각했습니다.
Adios 2024에서는 누구나 익명으로 새해의 소원이나 지난 한 해의 자신에게 남기고 싶은 말을 적고, 하나의 풍선에 담아 가상의 하늘로 날려 보낼 수 있습니다.
Making a Balloon
메시지를 3D 풍선 위에 올리기
사용자는 메시지와 함께 글꼴, 굵기, 크기, 색상을 직접 선택할 수 있습니다. 선택한 값이 바로 풍선에 반영되도록 텍스트를 RenderTexture로 동적으로 생성하고, Decal을 이용해 3D 풍선의 곡면에 투영했습니다.
한글 폰트는 FontFace API를 통해 비동기로 불러오고, 이미 불러온 폰트는 다시 요청하지 않도록 캐싱했습니다. 곡면과 텍스트가 겹치며 발생하는 Z-fighting은 polygonOffset을 적용해 해결했습니다.
풍선이 정해진 애니메이션을 반복하기보다 매번 조금씩 다르게 날아가도록 물리 시뮬레이션을 사용했습니다.
메시지가 저장되면 Rapier의 impulse로 처음 떠오르는 힘을 주고, 이후에는 지속적인 부력과 랜덤한 횡풍을 적용했습니다. 풍선의 높이를 추적해 일정 높이에 도달하면 완료 화면으로 전환되도록 하여, 3D 공간의 물리 상태와 UI의 흐름을 하나의 인터랙션으로 연결했습니다.
Shared Sky
날려 보낸 풍선에는 메시지뿐 아니라 글꼴, 색상, 크기 등 사용자가 선택한 시각적 속성도 함께 저장됩니다. 다른 사용자가 날린 풍선도 처음 만들어진 모습 그대로 다시 불러와 하나의 공간에 모이도록 했습니다.
여러 풍선이 지나치게 겹치지 않도록 최소 거리를 기준으로 위치를 배치하고, 적절한 위치를 찾기 어려운 경우에는 그리드 배치로 전환하도록 구성했습니다.
Result
아이디어부터 디자인과 개발까지 혼자 진행한 짧은 토이 프로젝트입니다. 실제로는 더 이상 하기 어려워진 작은 의식을 웹이라는 공간에서 다시 만들어보고, 사용자의 입력이 3D 오브젝트와 물리 인터랙션으로 이어지는 경험을 실험했습니다.
Goodbye 2024, Hello 2025.
https://adios2024.vercel.app/
