naro-kim / snowy-window

3D interaction web : winter wonderland / 항해+ 코딩 육상 대회 최우수상

⛄ Winter wonderland

Winter wonderland는 창밖으로 눈이 내리는 겨울 풍경을 구현한 인터랙티브 3d web입니다. 눈이 내려 어둑해지고 흐릿한 배경을 뒤로, 귀여운 눈사람과 겨울 분위기를 즐길 수 있어요. 사용자들은 음악을 듣거나 눈 내리는 풍경을 바라보며 눈을 치울수 도 있습니다. 모바일로도 접속 가능합니다.

Winter Wonderland is an interactive 3D web application that simulates the winter scenery with snow falling outside the window. As snow falls and the background becomes darker and hazy, users can enjoy a cute snowman and immerse themselves in the winter atmosphere. Users have the option to listen to music or clear the snow while observing the falling snowflakes. The application is accessible on mobile devices as well.

Description

1️⃣ ❄️ 눈송이 시뮬레이션 (Snowflake Simulation)

• 눈이 계속 내립니다.
• Snow continues to fall.

2️⃣ ☃️ 눈 쌓기 & 치우기 (Build & Clear Snow)

• 사용자는 창틀에 쌓인 눈을 치울 수 있습니다. 약 1분 정도의 시간이 지날 때마다 새로운 눈이 쌓여요.
• Users can clear the snow piled on the window sill. New snow accumulates approximately every minute.

3️⃣ 📻 음악 플레이어 (Music Player)

• 캐롤 음악을 재생할 수 있습니다.
• Users can play festive carol music.

4️⃣ 📕 방명록 (Guestbook)

• 선물을 눌러 방명록을 남길 수 있습니다.
• By clicking on a gift, users can leave comments in the guestbook.

Skills

Frontend

• Next.js (14.0.4)
• @react-three/drei (^9.92.5)
• @react-three/fiber (^8.15.12)
• @react-three/postprocessing (^2.15.11)
• tailwindcss (^3.3.0)
• typescript (^5)

Design

• Figma
• Blender3D

DB

• supabase

Get Started

1. .env 파일을 만들고, 환경변수를 작성합니다.
2. yarn 명령어로 패키지를 설치합니다.
3. yarn run dev 명령어로 로컬에서 프로젝트를 실행합니다.

프로젝트 회고록

snowy-window's Issues

[#01] 이 프로젝트를 통해 배운 점

간단 소개

'눈 치우기' 주제의 3D 인터랙티브 웹 개발 프로젝트
팀스파르타 항해+ 코딩육상대회 2회 최우수상 수상

담당 역할

웹 개발, 배포, 기획 및 홍보, 디자인 총괄

성과

• 3D asset export option을 glb + .bin + img -> gltf 리텍스쳐 방식으로 바꾸어 에셋 사이즈를 81% 압축

• 에셋 사이즈 압축과 preload로 LCP를 0.8s로 개선

• dynamic import를 활용하여 초기 페이지 로드 속도 개선

• Lighthouse 각 부문 별 점수를 95점 이상으로 개선

• 일주일 간 300명의 유저 확보

• 디바이스 스크린 크기에 따른 반응형 컴포넌트 제작

• useMemo를 활용해 draw call과 리렌더링 최소화

배운 점

• 아티클로 공부한 최적화 기법을 적용하며 끊임없이 이슈에 부딪히고 해결하며 지식과 성과를 얻을 수 있었습니다.
• 사용자의 피드백을 토대로 기능을 추가하고 서비스를 개선하는 경험을 할 수 있었습니다.
• 회고록을 작성하고 공유하여 사람들의 3D 인터랙티브 웹 개발 경험에 기여할 수 있음을 알게 되었습니다.
• 디스코드 커뮤니티에 개발물을 공유하여 새로운 사람들과 네트워킹하고 문제를 서로 도울 수 있음을 알게 되었습니다.

기술 스택

• Next.js13, React, Supabase, React three-fiber, TailwindCSS, contextAPI, Figma, Blender3D

"문서에 메타 설명이 없습니다" 해결

프로젝트가 정말 재미있네요 ^^ 잘보고 가용 ~~ 블로그보다가 아래 이슈 겪는거 같아 이슈 만들어봤어요

"문서에 메타 설명이 없습니다"를 해결하려면 아래 태그가 head에 들어가야 해요!
lighthouse docs 참고

<meta name="description" content="Put your description here.">

지금 배포 된거 보니까 name='desctiption' 인 meta 태그가 없어서 lighthouse에서 description이 없다고 하는 것 같습니다. 코드 보니 metadata에 description 필드가 없네요. og:description 이랑은 달라요

snowy-window/src/app/layout.tsx

Lines 8 to 31 in 1efd493

	export const metadata: Metadata = {
	metadataBase: new URL('https://snowy-winter-wonderland.vercel.app/'),
	title: 'Interactive Winter Wonderland: Three.js Snowscape Project',
	openGraph: {
	url: 'https://snowy-winter-wonderland.vercel.app/',
	title: 'Interactive Winter Wonderland: Three.js Snowscape Project',
	description: `Winter Wonderland by Ahhyun Kim :\n
	Immerse yourself in a mesmerizing winter landscape with our Three.js-based project.\n
	Experience the serene beauty of falling snowflakes as you engage in the interactive challenge to clear accumulated snow.\n
	Unleash the magic of the season and join us in the virtual realm where the snowy scenery comes to life.\n
	Bundle up and embark on a unique journey of 'Clear the Snow' interaction amid a picturesque winter wonderland.`,
	siteName: 'Interactive Winter Wonderland',
	images: [
	{
	url: '/opengraph-image.png',
	width: 285,
	height: 167,
	alt: 'Interactive Winter Wonderland',
	},
	],
	type: 'website',
	},
	};

이렇게 수정하면 description meta 태그 들어갈거에요~ Nextjs docs 참고

export const metadata: Metadata = {
  ...
  description: '설명 설명 설명',
  ...
}

그나저나 프로젝트 퀄리티 엄청나네요.. 👍 👍