[Interactive Web] Ep.05 Advent Calendar 코드 구성

[코딩 👶의 Advent Calendar Interactive Web 제작 도전기]
아래 링크를 클릭하면 과정을 확인할 수 있어요! 피드백 환영입니다🪻🪻

2024.11.23 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.01 Advent Calendar 기획

2024.11.23 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.02 Advent Calendar 레퍼런스 조사

2024.11.24 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.03 Advent Calendar 디자인

2024.11.25 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.04 Advent Calendar Design (컴포넌트화)

 

프로젝트 이름: Advent Calendar Interactive Website

• 목적: 사용자가 매일 Advent Calendar의 창문을 클릭해 이벤트를 확인하고, 25일에는 특별한 서프라이즈를 제공.

• 목표: 반응형 웹으로 데스크톱, 태블릿, 모바일 환경에서 완벽하게 작동하며, 창문 및 문의 클릭 인터랙션과 상태 변경을 제공.

 

기본 구조:

• 창문과 문으로 구성된 빌딩 이미지.

• 창문은 클릭 시 색상이 변경되며 팝업 창이 나타남.

• 문은 클릭 시 상태가 변경되며 특별한 팝업이 나타남.

기능 목록:

• 창문/문 클릭 시 상태 변경 (이미지 변경).

• 클릭 시 팝업 창 표시.

• 팝업 내 편지와 봉투 애니메이션.

• 날짜별로 창문과 팝업 콘텐츠 매칭.

• 창문과 문의 클릭 상태 유지.

• 반응형 레이아웃으로 다양한 해상도 대응.

반응형 기준: (할 수 있다면)

• 1920px 이상 (데스크탑 전체 화면): 기본 디자인.

• 1366px~768px (노트북 화면): 빌딩 크기와 창문 크기 축소.

• 768px 이하 (모바일 화면): 레이아웃 재배치 및 축소.

기능명 설명 구현 상세 우선순위

1. 창문 상태 변경 창문을 클릭하면 색상이 Navy로 변경 - 초기 상태: WindowA/B_Lit_Yellow/Orange.svg - 클릭 후 상태: WindowA/B_Navy.svg 필수

2. 문 상태 변경 문을 클릭하면 문 이미지가 변경 - 초기 상태: Door_Brown.svg - 클릭 후 상태: Door_dday.svg 필수

3. 팝업 애니메이션 클릭 시 팝업으로 편지가 나타남 - Envelope_Closed.svg → Envelope_Opened.svg 애니메이션 - 편지(Letter.svg) 표시 필수

4. 클릭 이벤트 처리 창문 및 문 클릭 시 클릭 상태 저장 - LocalStorage에 클릭된 창문/문 상태 저장 선택

5. 반응형 디자인 다양한 해상도에 대응 - 빌딩 크기 및 위치를 % 또는 vw/vh로 설정 - 창문과 문의 위치를 빌딩을 기준으로 상대적으로 배치 필수

6. 팝업 종료 버튼 팝업 종료 버튼 클릭 시 팝업 닫기 - 팝업 종료 버튼 UI 제공 - 클릭 시 팝업 숨김 처리 필수

7. 날짜에 따른 컨텐츠 특정 날짜에 따라 다른 편지 또는 이미지 표시 - 날짜별로 다른 Letter 이미지 로드 선택

8. CSS 트랜지션 창문/문 상태 전환 시 부드러운 트랜지션 추가 - 클릭 시 이미지 변경이 부드럽게 전환되도록 CSS transition 적용 선택

9. 클릭 가능 상태 유지 클릭한 창문 및 문은 다시 클릭 가능 - 창문 및 문 클릭 상태는 유지하되, 다시 클릭 가능 필수

10. 반응형 레이아웃 모바일과 데스크톱에서 같은 경험 제공 - 브레이크포인트

 

기능별 상세 구현

1. 창문 상태 변경

• 클릭 시 창문의 색상이 변경.

• 데이터 속성 data-date를 활용하여 창문 번호 관리.

• LocalStorage를 활용하여 클릭 상태 유지.

2. 팝업 애니메이션

• 클릭 시 팝업 표시.

• 편지가 나타나는 애니메이션 처리.

• 팝업 내 닫기 버튼 제공.

3. 문 상태 변경

• 클릭 시 문 이미지를 변경.

• 문 클릭 시 특별 팝업 표시.

4. 반응형 디자인

• 다양한 화면 크기에 맞게 레이아웃 조정.

• Media Query를 활용하여 CSS에서 처리.

 

사용자 플로우

초기 화면 로드:

• Advent Calendar가 중앙에 표시되고, 창문(1~24)과 문(25)이 초기 이미지로 렌더링.

• 건물은 위치와 크기를 기준으로 정렬.

창문 클릭 이벤트:

• 클릭하면 모달 팝업이 표시되며, 봉투와 편지가 나타나는 애니메이션 실행.

• 모달 종료 시 창문 이미지가 Navy 상태로 변경.

25번 문 클릭 이벤트:

• 클릭 시 특별 모달 팝업이 표시되며, 문 이미지가 Door_dday.svg로 변경.

반응형 레이아웃:

• 데스크톱(1920x1080): 모든 창문이 제자리에서 정상 표시.

• 태블릿(768x1024): 건물 위치가 아래로 이동하며 창문 크기 축소.

• 모바일(360x640): 창문이 단일 열로 표시, 순차적으로 정렬.

 

예상 어려움 및 해결 방안

• 어려움: 창문/문 위치 조정 시 좌표 계산이 복잡할 수 있음.

• 해결 방안: 빌딩 크기를 기준으로 상대적인 위치 설정.

• 어려움: 반응형 디자인 시 레이아웃 유지 어려움.

• 해결 방안: Flexbox 또는 CSS Grid 활용.

 

요소	초기 이미지	클릭 후 이미지	위치 (X, Y)	크기 (Width, Height)
건물	building.svg	변경 없음	(482px, 249px)	(953.35px, 656px)
1	WindowA_Lit_Orange_1.svg	WindowA_Navy.svg	(87px, 32px)	(78px, 132px)
2	WindowA_Lit_Yellow_2.svg	WindowA_Navy.svg	(174.72px, 32px)	(78px, 132px)
3	WindowA_Lit_Orange_3.svg	WindowA_Navy.svg	(262.45px, 32px)	(78px, 132px)
4	WindowA_Lit_Yellow_4.svg	WindowA_Navy.svg	(350.17px, 32px)	(78px, 132px)
5	WindowA_Lit_Orange_5.svg	WindowA_Navy.svg	(437.89px, 32px)	(78px, 132px)
6	WindowA_Lit_Yellow_6.svg	WindowA_Navy.svg	(525.61px, 32px)	(78px, 132px)
7	WindowA_Lit_Orange_7.svg	WindowA_Navy.svg	(613.34px, 32px)	(78px, 132px)
8	WindowA_Lit_Yellow_8.svg	WindowA_Navy.svg	(701.06px, 32px)	(78px, 132px)
9	WindowA_Lit_Orange_9.svg	WindowA_Navy.svg	(788.78px, 32px)	(78px, 132px)
10	WindowA_Lit_Yellow_10.svg	WindowA_Navy.svg	(87px, 248px)	(78px, 132px)
11	WindowA_Lit_Orange_11.svg	WindowA_Navy.svg	(174.72px, 248px)	(78px, 132px)
12	WindowA_Lit_Yellow_12.svg	WindowA_Navy.svg	(262.45px, 248px)	(78px, 132px)
13	WindowA_Lit_Orange_13.svg	WindowA_Navy.svg	(350.17px, 248px)	(78px, 132px)
14	WindowA_Lit_Yellow_14.svg	WindowA_Navy.svg	(437.89px, 248px)	(78px, 132px)
15	WindowA_Lit_Orange_15.svg	WindowA_Navy.svg	(525.61px, 248px)	(78px, 132px)
16	WindowA_Lit_Yellow_16.svg	WindowA_Navy.svg	(613.34px, 248px)	(78px, 132px)
17	WindowA_Lit_Orange_17.svg	WindowA_Navy.svg	(701.06px, 248px)	(78px, 132px)
18	WindowA_Lit_Yellow_18.svg	WindowA_Navy.svg	(788.78px, 248px)	(78px, 132px)
19	WindowB_Lit_Orange_19.svg	WindowB_Navy.svg	(33px, 487px)	(96px, 157px)
20	WindowB_Lit_Yellow_20.svg	WindowB_Navy.svg	(164.79px, 487px)	(96px, 157px)
21	WindowB_Lit_Orange_21.svg	WindowB_Navy.svg	(296.57px, 487px)	(96px, 157px)
22	WindowB_Lit_Yellow_22.svg	WindowB_Navy.svg	(560px, 487px)	(96px, 157px)
23	WindowB_Lit_Orange_23.svg	WindowB_Navy.svg	(691.79px, 487px)	(96px, 157px)
24	WindowB_Lit_Yellow_24.svg	WindowB_Navy.svg	(823.57px, 487px)	(96px, 157px)
25	Door_Brown.svg	Door_dday.svg	(410px, 458px)	(134px, 197px)

 

adventcalendar, christmasdesign, cssanimation, holidayproject, html, interactiveweb, javascript, webdeisgn, css, coding, 개발기초, 인터랙티브 웹