[Interactive Web] Ep.04 Advent Calendar Design (컴포넌트화)

[코딩 👶의 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 디자인

 

 

 

지난번 게시글에서 일러스트를 완성했고 대략 코드 구성을 짰다. 위 2번째 이미지처럼 위치랑 창문, 문 클릭했을 때 모달팝업 뜨는 것까지 생각했던 게 되긴 되는걸 live viewer로 💨 확인했다. 근데, 가만보니 클릭한 뒤에는 표시를 해줘야할 것 같은데 (창문 💡이 꺼진다던지?)

그리고 그러려면 불꺼진 창문은 다 똑같을테니 이미지 export를 좀 더 효율적으로 해야 코드 짤때도 비효율적인 시간을 줄일 수 있을 것 같았다. 

 

컴포넌트는 해도 해도 익숙하지 않은 거 하지만 하면 편안한 거.. 

디자인하면서 몇번의 클릭으로 손쉽게 디자인이 바뀌는 단계라면 컴포넌트화를 아예 생각하지 않는다. 하지만 이제 디자인이 얼추 완성됐으니 정리해서 요소를 하나씩 구분해보자. 

 

시간이 있다면 먼저 figma 프로토타입으로 확인하고 진행하면 좋긴 하겠다.

컴포넌트 계층 구조를 세워보면 이렇다.

Scene (최상위)
│
├── Background (배경)
│   └── Background.svg
│
├── BuildingWrapper (건물 컨테이너)
│   ├── Building (건물 이미지)
│   │   └── Building.svg
│   ├── Windows (창문 컨테이너)
│   │   ├── WindowA_Lit_Yellow.svg (9개) (beforclick)
│   │   ├── WindowA_Lit_Orange.svg (9개) (beforclick)
│   │   ├── WindowA_Navy.svg (18개) (clickafter)
│   │   ├── WindowB_Lit_Yellow.svg (2개) (beforclick)
│   │   ├── WindowB_Lit_Orange.svg (4개) (beforclick)
│   │   └── WindowB_Navy.svg (6개) (clickafter)
│   └── Door
│       ├── Door_Brown.svg (beforclick)
│       └── Door_dday.svg (clickafter)
│
└── Modal (모달 팝업)
    ├── Envelope
    │   ├── Envelope_Closed.svg
    │   └── Envelope_Opened.svg
    ├── Letter
    │   └── Letter_$letter.svg (총 25개)
    └── CloseButton

 

1. Windows 컴포넌트 베리언츠

• 창문 유형 (Type): WindowA, WindowB

• 상태 (State):

• Lit_Yellow (노란색, 클릭 전)

• Lit_Orange (주황색, 클릭 전)

• Navy (남색, 클릭 후)

 

2. Door 컴포넌트 베리언츠

• 상태 (State):

• Brown (브라운, 클릭 전)

• Dday (특정 날 클릭 후)

 

3. Modal 컴포넌트 베리언츠

• Envelope (봉투):

• 상태 (State):

• Closed

• Opened

• Letter (편지):

• 날짜 (Date): 1 ~ 25 (날짜별 베리언츠)

• CloseButton:

• 단일 상태 (별도 베리언츠 없음).

 

이렇게 정하고 시작했다.

 

 

 

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