홈앤서비스 SK BROADBAND

웹 개발자부터 디자이너까지,
모두를 위한 실용적인 웹 인터랙티브 활용서!

『프론트엔드 개발자를 위한 인터랙티브 웹 애니메이션』은 웹 개발 책 중에서도 실무에서 즉시 활용 가능한 내용을 담고 있다. 실제로 사용되는 애니메이션 효과를 구현해 보면서, 구현 방법과 함께 기술적인 이해를 동시에 학습할 수 있다. 또한, 이 책은 사용자 경험(UX)을 중요하게 다루며 애니메이션을 적용하는 방법과 사용자 경험을 개선하는 방법에 대해 설명한다. 이러한 내용은 웹 개발자뿐만 아니라 UX 디자이너, 디자이너, 기획자 등 웹 서비스를 구축하는 모든 사람들에게 매우 유용하며, 이해를 도와준다.

이 책은 크게 12장으로 구성되어 있다. 1장부터 5장까지는 인터랙티브 웹 실습에 앞서 HTML, CSS, JavaScript 기본 개념에 대해서 알아본다. 세부적으로 1장은 프론트엔드 웹 개발을 위한 환경 설정, 2장은 HTML의 기본 개념, 3장은 CSS의 기본 개념, 4장은 인터랙티브 웹을 위한 추가적인 지식을 다룬다. 그리고 5장은 JavaScript의 기본 개념을 보충하고 6장부터 실제 현업에서 사용되는 다양한 인터랙티브 웹을 하나씩 구현하며 실습하게 된다. 11장부터는 React 프레임워크와 Three.js 라이브러리를 활용해서 고급 인터랙티브 웹 콘텐츠와 웹 게임을 제작하는 방법을 배운다. 실습 중심의 구성으로, 완성한 코드를 바로 포트폴리오에 활용할 수 있으며 인터랙티브 웹 개발을 이해하고 싶은 독자들에게 최적화된 책이다.

1장 웹 프론트엔드 개발, 작업 환경을 위한 준비
1-1 프론트엔드 개발 온보딩
1-2 작업 환경 구성 - 브라우저, Node.js
1-3 작업 환경 구성 - IDE
1-4 작업 환경 구성 - VS Code 확장 프로그램 설치 및 설정

2장 HTML 문법을 익히다
2-1 HTML(Hyper Text Markup Language)
2-2 〈meta〉 태그와 브라우저 작동 원리
2-3 HTML 요소의 종류와 HTML 디버깅
2-4 많이 사용되는 HTML 기본 요소 배우기

3장 CSS 문법을 익히다
3-1 CSS 파일과 기본 환경 설정
3-2 CSS 선택자 사용
3-3 CSS 레이아웃
3-4 웹 페이지 리소스 사용

4장 웹에 UI, UX를 첨가하다
4-1 인터랙티브 웹이란?
4-2 레이아웃이 서서히 노출되도록 하기
4-3 카드 목록에서의 애니메이션
4-4 SVG 활용하기
4-5 반응형 웹

5장 JavaScript 문법을 익히다
5-1 JavaScript 파일 생성하기
5-2 JavaScript를 위한 환경 설정
5-3 JavaScript DOM 사용하기
5-4 JavaScript 이벤트
5-5 JavaScript 함수
5-6 비동기 처리

6장 반응형 카드 레이아웃 로딩 UI 만들기
6-1 반응형 카드 레이아웃과 Spinner UI
6-2 SVG 로딩 UI
6-3 스켈레톤 UI

7장 눈길을 사로잡는 인터랙티브 로그인
7-1 로그인 폼 레이아웃
7-2 입력 필드를 따라다니는 눈을 구현하기

8장 그리드 레이아웃과 동적 UI를 활용한 반응형 대시보드
8-1 Grid를 사용하여 대시보드 만들기
8-2 하나의 HTML로 카드 UI와 리스트 UI 만들기
8-3 모바일 메뉴 만들기(position fixed)
8-4 다크 모드와 라이트 모드
8-5 좋아요 기능 구현하기
8-6 웹 페이지를 떠날 때 상태 저장하기
8-7 검색 기능 만들기

9장 페이지가 전환되는 랜딩 페이지 만들기
9-1 SEO를 고려한 마크업
9-2 scroll-snap-type, animation-timeline을 활용한 fullPage 애니메이션
9-3 반응형 환경을 위한 미디어 쿼리 작업을 최소화하기
9-4 지원하지 않는 브라우저를 위해 @supports 키워드 활용
9-5 JavaScript에서 setProperty를 활용한 테마 관리
9-6 proxy와 observer를 사용한 상태 관리
9-7 뒤로 가기 기능, 렌더링 최적화 및 콘텐츠 부드럽게 노출하기

10장 외부 API를 활용한 날씨 애플리케이션
10-1 REST API란?
10-2 API KEY 발급하기
10-3 날씨 애플리케이션 마크업
10-4 날씨 애플리케이션 스타일링
10-5 JavaScript 클래스 문법 알아보기
10-6 날씨 정보 가져와서 표시하기
10-7 날씨 단위 변경하기
10-8 날씨에 따른 비디오 전환 효과 만들기
10-9 날씨 검색 기능 만들기

11장 스크롤을 따라 회전하는 도넛(R3F)
11-1 React와 Three.js
11-2 Vite를 사용해 리액트 개발 환경 구성
11-3 R3F를 사용해 Three.js 개발 환경 구성
11-4 스크롤에 따라 회전하는 박스 만들기
11-5 GSAP 라이브러리 적용
11-6 스크롤에 따라 회전하는 도넛 만들기
11-7 스크롤 도넛 랜딩 페이지 만들기

12장 WebGL을 활용한 웹 게임 만들기
12-1 Game 프로젝트 생성 및 기본 설정
12-2 useGLTF 활용한 3D 캐릭터 로드
12-3 환경 조명 및 방향 조명 생성
12-4 카메라 위치 및 움직임 구성
12-5 TextureLoader를 사용한 바닥 생성
12-6 캐릭터 크기 조절 및 애니메이션 적용
12-7 마우스 인터랙션으로 캐릭터 이동 구현
12-8 키보드 인터랙션으로 캐릭터 점프 구현
12-9 이벤트를 통한 축구공 노출 구현