제목

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자 및 웹 디자이너

• 난이도: 중급 이상. CSS 애니메이션, 접근성 구현, 퍼스널 프로젝트 개발 기술 이해 필요*

핵심 요약

• CSS와 JavaScript 활용한 인터랙티브 스토리텔링: linear-gradient 기반 캐릭터 생성, box-shadow 애니메이션 사용
• 접근성 강화 기술: role="img", aria-label 적용 및 prefers-reduced-motion 미디어 쿼리 사용
• 기본 원리: 단순한 요소와 CSS만으로 복잡한 애니메이션 구현 가능

섹션별 세부 요약

1. 프로젝트 개요

• 주제: "The Gift That Sparked the Dream" – 아버지의 선물로 시작된 프로그래밍 여정
• 구조: 3단계 스토리(선물, 학습, 직업)로 구성된 인터랙티브 웹 아트
• 기술적 접근: CSS 중심, JavaScript로 상태 전환 처리

2. 기술 구현

• 캐릭터 설계:

- 요소에 linear-gradient 적용하여 의상(셔츠, 바지) 생성

- background 속성 하나로 계층 구조 관리

• 애니메이션 기법:

- box-shadow를 활용한 폭죽 효과: ::after 의사요소로 20개 이상의 쉐도우 값 애니메이션

- steps() 타이밍 함수로 타이핑 효과 구현

• 인터랙티브 요소:

- data-active-scene 속성으로 JavaScript가 상태 전환 제어

3. 접근성 고려사항

• 스크린 리더 지원:

- role="img"와 aria-label로 시각 장애 사용자에게 스토리 설명 제공

• 사용자 선호 존중:

- prefers-reduced-motion 미디어 쿼리로 애니메이션 자동 비활성화

4. 개발 과정에서의 학습

• 애니메이션 버그 해결:

- 팔의 "분리" 현상 해결: CSS로 팔과 몸의 겹침 조정

• 기술적 균형:

- 복잡한 HTML 구조 대신 CSS 기술로 시각적 세부사항 추가

결론

• 핵심 팁: linear-gradient와 box-shadow 애니메이션으로 복잡한 효과 구현 가능
• 실무 적용: 접근성 고려사항(prefers-reduced-motion, aria-label)을 프로젝트 초기부터 반영
• 결론: CSS 기술로 감정을 전달할 수 있는 인터랙티브 웹 아트 개발 가능