인터랙티브 웹 애니메이션 (HTML, CSS, JavaScript 기본기부터 React, Three.js를 활용한 3D 애니메이션까지)

김영민

저자:김영민
출판교정업무를하던중우연히HTML코드로웹페이지디자인을변경해보면서개발의매력에빠져마크업개발자로첫발을딛었습니다.
웹에이전시에서다양한웹사이트론칭을경험하고,카카오계열사에서스프링웹개발자로근무했었고,현재프론트엔드개발자로10여년의경력을이어오고있습니다.
현재,온라인강의및멘토링을등을통해사용자관점의접근성과다양한웹개발기술을널리알리는데주력하고실무경험과교육경험을바탕으로초보자도쉽게이해할수있는개발콘텐츠제작에힘쓰고있습니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

저자의말

바야흐로AI시대입니다.우리는인공지능이인간의영역을빠르게대체하고,그누구도가보지못한미래를향해나아가는거대한전환점에서있습니다.이런시대에어쩌면프론트엔드개발의기초를굳이배워야할까하는의구심을가질수도있습니다.AI가코드를짜주고,디자인을제안하며,심지어서비스전체를구현하는데기여할수도있으니까요.
하지만저는이책을통해감히말씀드리고싶습니다.AI시대에도변치않는,아니오히려더중요해질프론트엔드개발의핵심가치가있다고말이죠.AI는도구일뿐,그도구를어떻게활용하여사용자에게최고의경험을제공할지는여전히우리인간개발자의몫입니다.기획자의의도를정확히이해하고,디자이너의비전을코드로구현하며,사용자의미묘한불편함까지찾아내개선하는능력은AI가쉽게넘볼수없는영역입니다.
이책은단순히코드를따라치는것을넘어,웹프론트엔드개발의본질적인재미와창의적인가능성을여러분께선사하고자합니다.복잡한이론보다는실제웹사이트를만들면서직접경험하고깨우칠수있도록친절하고직관적인방식으로구성했습니다.
1장에서는개발을위한든든한작업환경을구축하고,2장과3장에서는웹의뼈대인HTML과옷을입히는CSS의문법을익힙니다.4장에서는사용자경험을개선하는UI/UX요소를웹에녹여내는방법을배우고,5장에서는웹을동적으로움직이게하는JavaScript의문법을깊이있게다룹니다.
그리고이모든지식을바탕으로6장부터는실제프로젝트를만들어봅니다.반응형카드레이아웃,인터랙티브로그인,동적대시보드,페이지전환랜딩페이지등실제서비스에서볼수있는다양한웹컴포넌트들을직접구현하며프론트엔드개발의즐거움을만끽할수있을것입니다.나아가외부API를활용한날씨애플리케이션,스크롤인터랙션,WebGL을활용한웹게임만들기까지,여러분의상상력을자극할다채로운프로젝트들이기다리고있습니다.
이책을통해여러분이단순히기술을습득하는것을넘어,자신만의아이디어를웹이라는공간에자유롭게구현하고,사용자에게가치를전달하는프론트엔드개발자로성장할수있기를진심으로바랍니다.