장바구니 담기 close

장바구니에 상품을 담았습니다.

장바구니로 계속쇼핑하기
프론트엔드 개발자를 위한 인터랙티브 웹 애니메이션
미리보기

프론트엔드 개발자를 위한 인터랙티브 웹 애니메이션

  • 김영민
  • |
  • 영진닷컴
  • |
  • 2025-07-01 출간
  • |
  • 816페이지
  • |
  • 188 X 257 X 45mm
  • |
  • ISBN 9788931479393
판매가

38,000원

즉시할인가

34,200 원

배송비

무료배송

(제주/도서산간 배송 추가비용:3,000원)

추가상품
상품선택
독서대 7,900원 독서대 선택안함 0원
수량
+ -
총주문금액
34,200원
장바구니 구매하기

※ 스프링제본 상품은 반품/교환/환불이 불가능하므로 신중하게 선택하여 주시기 바랍니다.

북스크린영상으로 만나보는 한 권의 책 이야기

출판사서평

웹 프론트엔드 개발을 위한 준비를 꼼꼼하게 도와줍니다.
프론트엔드를 본격적으로 배우기 전에 꼭 알아야 할 HTML, CSS, JavaScript 문법을 차근차근 알려줍니다. 그래서 웹을 몰랐던 사람들도 이 책으로 시작할 수 있습니다.

웹사이트 UI를 구현해 보세요
이 책은 단순히 문법을 배우는 데서 멈추지 않고, 실제로 웹사이트에 적용되는 로딩 화면, 카드 리스트, 반응형 레이아웃 같은 실무에서 자주 쓰이는 UI 구성 요소를 직접 구현해보며 애니메이션 개념을 익히도록 구성되어 있습니다.

사용자의 행동에 반응하는 인터랙티브 웹을 만들어보세요
스크롤 위치에 따라 콘텐츠가 자연스럽게 나타나고, 특정 요소가 화면에 들어오면 애니메이션이 시작되는 등, 사용자와 소통하는 동적인 웹페이지를 만드는 다양한 기법을 배울 수 있습니다.

데이터와 연결된 애니메이션 기능 구현
날씨 API, 미세먼지 API와 같은 실시간 데이터를 연동해 현재 날씨나 환경 정보를 기반으로 UI가 바뀌는 웹앱을 제작합니다. 기능적인 데이터 처리와 함께 시각적 반응까지 고려한 UI 설계를 연습할 수 있어, 서비스 기획 감각까지 함께 키울 수 있습니다.

저자 유튜브 강의, 깃허브 등 학습 지원
영진닷컴 IT 유튜브 강의를 통해 저자 직강 동영상으로 책을 끝까지 실습해 보시기 바랍니다.
영진닷컴 IT 유튜브 채널: https://www.youtube.com/@IT-Youngjin
깃허브 주소: https://github.com/Youngjin-com/interactive_web

웹 프론트엔드의 기초와 구조를 배우고 웹 UI를 완성하여 사용자 경험 중심의 인터랙티브한 웹을 구현해 보시기 바랍니다.

목차

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 태그와 브라우저 작동 원리
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 이벤트를 통한 축구공 노출 구현

도서소개


 

추천포스트

교환 및 환불안내

도서교환 및 환불
  • ㆍ배송기간은 평일 기준 1~3일 정도 소요됩니다.(스프링 분철은 1일 정도 시간이 더 소요됩니다.)
  • ㆍ상품불량 및 오배송등의 이유로 반품하실 경우, 반품배송비는 무료입니다.
  • ㆍ고객님의 변심에 의한 반품,환불,교환시 택배비는 본인 부담입니다.
  • ㆍ상담원과의 상담없이 교환 및 반품으로 반송된 물품은 책임지지 않습니다.
  • ㆍ이미 발송된 상품의 취소 및 반품, 교환요청시 배송비가 발생할 수 있습니다.
  • ㆍ반품신청시 반송된 상품의 수령후 환불처리됩니다.(카드사 사정에 따라 카드취소는 시일이 3~5일이 소요될 수 있습니다.)
  • ㆍ주문하신 상품의 반품,교환은 상품수령일로 부터 7일이내에 신청하실 수 있습니다.
  • ㆍ상품이 훼손된 경우 반품 및 교환,환불이 불가능합니다.
  • ㆍ반품/교환시 고객님 귀책사유로 인해 수거가 지연될 경우에는 반품이 제한될 수 있습니다.
  • ㆍ스프링제본 상품은 교환 및 환불이 불가능 합니다.
  • ㆍ군부대(사서함) 및 해외배송은 불가능합니다.
  • ㆍ오후 3시 이후 상담원과 통화되지 않은 취소건에 대해서는 고객 반품비용이 발생할 수 있습니다.
반품안내
  • 마이페이지 > 나의상담 > 1 : 1 문의하기 게시판 또는 고객센터 1800-7327
교환/반품주소
  • 경기도 파주시 문발로 211 1층 / (주)북채널 / 전화 : 1800-7327
  • 택배안내 : CJ대한통운(1588-1255)
  • 고객님 변심으로 인한 교환 또는 반품시 왕복 배송비 5,000원을 부담하셔야 하며, 제품 불량 또는 오 배송시에는 전액을 당사에서부담 합니다.