[Interactive Web] Ep.01 Advent Calendar 기획

어드벤트 캘린더 디자인 1차 초안

 

1. 컨셉

• 크리스마스 마을 테마의 단일 건물:

• 한 건물에 창문 25개를 배치하여 어드벤트 캘린더 구현.

• 각 창문은 독특한 SVG 디자인으로 제작.

• 사용자가 날짜별 창문을 클릭하면 문이 열리는 애니메이션과 함께 모달 팝업으로 콘텐츠를 표시.

 

2. 주요 디자인 요소

1. 건물:

• 크리스마스 분위기를 강조한 따뜻한 톤의 건물 외관.

• 벽돌 질감 또는 아트 스타일로 제작.

2. 창문 (SVG):

• 각 창문은 서로 다른 모양과 크기(원, 사각형, 다각형 등)로 구성.

• 창문 내부에 날짜를 표시하며, 숫자는 중앙에 배치.

• 창문이 문처럼 열리도록 애니메이션 추가.

3. 컬러 팔레트:

• 기본 톤: 빨강(#D32F2F), 초록(#388E3C), 금색(#FFD700), 흰색(#FFFFFF).

• 보조 톤: 따뜻한 베이지(#F5E3C3)와 갈색(#8D6E63)으로 안정감 있는 배경 표현.

4. 눈 내림 효과:

• 화면 전체에 눈송이가 부드럽게 떨어지는 애니메이션 추가.

• 크기, 속도, 시작 위치를 랜덤으로 설정해 자연스러운 눈 내림 구현.

5. 날짜별 콘텐츠:

• 창문을 클릭하면 산타, 선물, 크리스마스 메시지 등 날짜별 콘텐츠가 모달 팝업으로 표시.

• 이미지: 귀여운 산타, 루돌프, 트리, 캔디 케인 등의 크리스마스 테마 일러스트.

• 텍스트: “Day 1: Merry Christmas!”, “Day 2: Let’s prepare for the holiday!” 같은 메시지.

 

3. 상호작용 (Interaction)

1. 창문 애니메이션:

• 클릭 시:

• 창문이 회전하거나 슬라이드되며 열림.

• 열림 효과 이후, 배경이 살짝 밝아지며 모달 팝업이 나타남.

2. 모달 팝업:

• 창문 뒤에서 날짜별 콘텐츠가 팝업 형태로 나타남.

• 모달 닫기 버튼을 누르면 창문이 열린 상태를 유지한 채 팝업이 닫힘.

3. 열림 상태 저장:

• 클릭한 창문은 열림 상태를 유지하도록 표시.

• 새로고침 후에도 열림 상태를 유지(LocalStorage 활용).

 

4. 화면 구성 (레이아웃)

1. 배경 (Background):

• 눈이 내리는 크리스마스 마을 풍경을 사용.

• 건물을 중심에 배치하고, 위쪽에는 간단한 로고 또는 제목 배치(예: “Christmas Advent Calendar”).

2. 건물 내 창문 배치:

• 25개의 창문을 랜덤 또는 유기적으로 배치.

• 창문 간의 간격과 크기를 조정하여 가독성과 조화를 유지.

3. 하단 섹션:

• 간단한 크리스마스 메시지 또는 푸터 추가(예: “Enjoy the Holiday Season!”).

 

5. 기술 스펙

1. HTML:

• SVG 창문과 날짜 정보를 data-day 속성으로 관리.

• 기본적인 레이아웃 구조.

2. CSS:

• 눈 내림 효과(@keyframes snow-fall).

• 창문 애니메이션(회전, 슬라이드 등).

• 모달 팝업 스타일.

3. JavaScript:

• 날짜별 콘텐츠 로딩.

• 창문 열림/닫힘 애니메이션.

• 모달 팝업 로직.

 

6. 추가 아이디어

• 특별 날짜 이벤트:

• 12월 24일(크리스마스 이브) 또는 25일(크리스마스)에 산타 애니메이션을 추가.

• 해당 날짜의 창문을 더 크거나 화려하게 표시.

• 음악 추가:

• 백그라운드에서 부드러운 크리스마스 캐롤이 재생되도록 설정.

 

1차 목표

• 건물과 창문 25개 레이아웃 완성.

• SVG 창문 디자인 반영.

• 눈 내림 효과와 창문 열림 애니메이션 추가.

• 간단한 모달 팝업 구현.