프론트엔드 개발자를 위한 인터랙티브 웹 애니메이션
HTML, CSS, JavaScript 기본기부터 React, Three.js를 활용한 3D 애니메이션까지
- 베스트
- 웹사이트 52위 웹사이트 top20 1주
이미 소장하고 있다면 판매해 보세요.
- 해외배송 가능?
- 분철옵션 선택 시, 배송일이 변경될 수 있습니다.
- 분철상품은 해외배송이 불가합니다.
- 문화비소득공제 가능
이 상품의 태그
상세 이미지
책소개
목차
|
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 이벤트를 통한 축구공 노출 구현 |
저자 소개 1
출판 교정 업무를 하던 중 우연히 HTML 코드로 웹페이지 디자인을 변경해 보면서 개발의 매력에 빠져 마크업 개발자로 첫 발을 딛었다. 웹 에이전시에서 다양한 웹사이트 론칭을 경험하고, 카카오 계열사에서 스프링 웹 개발자로 근무했었고, 현재 프론트엔드 개발자로 10여년의 경력을 이어오고 있다. 현재, 온라인 강의 및 멘토링을 등을 통해 사용자 관점의 접근성과 다양한 웹 개발 기술을 널리 알리는 데 주력하고 실무 경험과 교육 경험을 바탕으로 초보자도 쉽게 이해할 수 있는 개발 콘텐츠 제작에 힘쓰고 있다.
품목정보
- 발행일
- 2025년 07월 01일
- 쪽수, 무게, 크기
- 816쪽 | 1662g | 189*257*32mm
- ISBN13
- 9788931479393
출판사 리뷰
|
웹 프론트엔드 개발을 위한 준비를 꼼꼼하게 도와줍니다.
프론트엔드를 본격적으로 배우기 전에 꼭 알아야 할 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를 완성하여 사용자 경험 중심의 인터랙티브한 웹을 구현해 보시기 바랍니다. 【 대상 독자층 】 - UI 애니메이션 구현이 막막한 입문자 및 초급 개발자 - UI/UX를 깊이 이해하고 싶은 웹 기획자 및 디자이너 - 포트폴리오에 완성도 높은 프로젝트를 추가하고 싶은 취업 준비생 작가의 말 바야흐로 AI 시대입니다. 우리는 인공지능이 인간의 영역을 빠르게 대체하고, 그 누구도 가보지 못한 미래를 향해 나아가는 거대한 전환점에 서 있습니다. 이런 시대에 어쩌면 프론트엔드 개발의 기초를 굳이 배워야 할까 하는 의구심을 가질 수도 있습니다. AI가 코드를 짜주고, 디자인을 제안하며, 심지어 서비스 전체를 구현하는 데 기여할 수도 있으니까요. 하지만 저는 이 책을 통해 감히 말씀드리고 싶습니다. AI 시대에도 변치 않는, 아니 오히려 더 중요해질 프론트엔드 개발의 핵심 가치가 있다고 말이죠. AI는 도구일 뿐, 그 도구를 어떻게 활용하여 사용자에게 최고의 경험을 제공할지는 여전히 우리 인간 개발자의 몫입니다. 기획자의 의도를 정확히 이해하고, 디자이너의 비전을 코드로 구현하며, 사용자의 미묘한 불편함까지 찾아내 개선하는 능력은 AI가 쉽게 넘볼 수 없는 영역입니다. 이 책은 단순히 코드를 따라 치는 것을 넘어, 웹 프론트엔드 개발의 본질적인 재미와 창의적인 가능성을 여러분께 선사하고자 합니다. 복잡한 이론보다는 실제 웹사이트를 만들면서 직접 경험하고 깨우칠 수 있도록 친절하고 직관적인 방식으로 구성했습니다. 1장에서는 개발을 위한 든든한 작업 환경을 구축하고, 2장과 3장에서는 웹의 뼈대인 HTML과 옷을 입히는 CSS의 문법을 익힙니다. 4장에서는 사용자 경험을 개선하는 UI/UX 요소를 웹에 녹여내는 방법을 배우고, 5장에서는 웹을 동적으로 움직이게 하는 JavaScript의 문법을 깊이 있게 다룹니다. 그리고 이 모든 지식을 바탕으로 6장부터는 실제 프로젝트를 만들어 봅니다. 반응형 카드 레이아웃, 인터랙티브 로그인, 동적 대시보드, 페이지 전환 랜딩 페이지 등 실제 서비스에서 볼 수 있는 다양한 웹 컴포넌트들을 직접 구현하며 프론트엔드 개발의 즐거움을 만끽할 수 있을 것입니다. 나아가 외부 API를 활용한 날씨 애플리케이션, 스크롤 인터랙션, WebGL을 활용한 웹 게임 만들기까지, 여러분의 상상력을 자극할 다채로운 프로젝트들이 기다리고 있습니다. 이 책을 통해 여러분이 단순히 기술을 습득하는 것을 넘어, 자신만의 아이디어를 웹이라는 공간에 자유롭게 구현하고, 사용자에게 가치를 전달하는 프론트엔드 개발자로 성장할 수 있기를 진심으로 바랍니다. |
추천평
|
프론트엔드는 고객과 서비스가 처음 만나는 접점을 설계하는 일입니다. 겉으로 드러나는 화면을 넘어, 사용자의 흐름과 감각을 섬세하게 구축하는 과정이며 그 안에는 기술, 디자인, 그리고 사용자에 대한 깊은 이해가 유기적으로 녹아 있습니다. 눈앞에 펼쳐지는 UI 하나하나에는 기능을 넘어선 맥락과 설계 의도가 담겨 있습니다.
이 책은 그 복잡하고 정교한 과정을 실무자의 시선으로 현실감 있게 풀어낸, 밀도 높은 실전형 지침서입니다. - 김석민 (비쥬얼스토리 대표) |
|
마크업 웹 표준부터 시작해 10년 넘게 프론트엔드 개발 실무 경험을 쌓아온 저자의 전문성이 돋보이는 책입니다. 이 책은 이론에만 그치지 않고 현업에서 즉시 활용 가능한 실전 지식으로 가득합니다.
학원에서는 배울 수 없는 현장의 노하우, 문제 해결 방법, 최신 기술 트렌드까지 모두 담겨 있어, 개발자로서의 역량을 한 단계 높일 수 있습니다. 특히 취업 준비생들에게는 포트폴리오 구성 전략과 기술 인터뷰 대비법까지 제공해 실질적인 취업 경쟁력을 갖추는 데 큰 도움이 됩니다. 프론트엔드 개발의 실제 업무 프로세스와 핵심 기술을 체계적으로 배울 수 있는 이 책은 개발자로 성장하고자 하는 모든 분께 자신 있게 추천합니다. - 안병선 (상공 대표) |
|
프론트엔드 개발의 세계는 끊임없이 변하고 있고 새로운 기술과 도구가 매일 등장합니다. 그만큼 개발자에게 요구되는 역량도 높아지고 있습니다.
이 책은 저자가 초급부터 현재까지 성장하며 배운 실무의 경험을 토대로 일반인부터 실무자까지 프론트엔드 개발에 필요한 기술과 경험을 제공하고 있습니다. HTML 및 CSS 활용부터 REST API 사용 및 애니메이션 처리 기법까지 천천히 따라 익히다 보면, 실제 프로젝트에서 사용할 수 있는 개발 환경 및 기능들을 자연스럽게 습득되리라 생각됩니다. 프론트엔드 개발의 길을 걷고자 하는 모든 이에게 이 책을 강력히 추천합니다. - 이용천 (KT 계열사 프리랜서 개발자) |
|
웹 프론트엔드 개발에 필요한 필수 지식을 체계적이고 쉽게 전달하는 책입니다.
HTML, CSS, JavaScript의 기초부터 인터랙티브 웹 구현, 반응형 디자인, Three.js 및 WebGL 기반의 3D 인터랙션까지 풍성한 예제를 통해 실습 중심으로 구성되어 있습니다. 현직 개발자는 물론, 웹 기술에 관심 있는 모든 분들에게 자신 있게 추천합니다. - 김재신 (엔씨소프트) |
|
이 책은 프론트엔드 개발의 기본부터 실무에 바로 적용 가능한 기술까지 폭넓은 주제를 다루고 있습니다.
제가 생각하는 가장 큰 장점은 백엔드 개발자와의 협업을 고려한 내용을 포함하고 있다는 점입니다. 이를 통해 프론트엔드 기술을 배우는 것뿐만 아니라, 백엔드와의 협업을 원활하게 하는 데에도 도움을 줄 것입니다. 이는 실무에서 겪을 수 있는 여러 상황을 미리 이해하고, 효과적으로 소통하는 데 큰 도움이 될 것입니다. - 김준휘 (웨이커 CTO) |
|
함께 일할 때 웹 개발자로서 열정적이고 적극적인 자세로 어려운 문제도 척척 풀어간 인재로, 웹 프론트엔드 개발 실력, 내공이 상당히 풍부한 저자입니다.
현대 웹 프론트엔드 개발은 끊임없이 진화하는 분야입니다. 급속한 변화 속에서 초보자는 물론이고 현업 개발자들까지 기술의 흐름을 놓치지 않고 따라가기 위한 효과적인 안내서가 필요합니다. 이 책은 바로 그러한 요구를 완벽하게 충족시키는 교재입니다. 평범한 다른 책과 달리 인터랙티브에 집중하여 반응형 웹페이지에 관심있는 누구라도 금방 따라 할 수 있게 구성한 것은 이 책만의 독특한 점이라고 생각합니다. 웹의 동적인 기능을 구현하는 핵심 언어인 JavaScript의 기본적인 문법과 환경 설정부터 비동기 처리(Promise, async/await)까지 깊이 있게 설명하고, 실습 예제를 통해 자연스럽게 실력을 키울 수 있어 웹 프론트엔드 초보자, 경력자 모든 독자에게 추천할 만한 책입니다. - 권경열 (키워드로 완성하는 AI 아트 테크닉 with 미드저니, 니지저니 저자) |
|
프론트엔드 개발을 잘한다는 건 단순히 예쁜 화면을 만드는 게 아니라, 그 안에 숨은 ‘왜’를 끊임없이 고민하는 일이라고 생각합니다. 저자는 그런 질문을 놓치지 않는 사람이고, 실제로 함께 일하면서 그런 부분을 많이 느꼈습니다. 이 책엔 단순한 문법이나 코드 설명을 넘어서, 실무에서 직접 부딪히고 고민한 흔적들이 잘 담겨 있습니다. 하나하나 따라가다 보면 단순히 ‘어떻게’가 아니라 ‘왜 이렇게 만드는지’까지 자연스럽게 이해하게 될 것입니다. 프론트엔드를 제대로 배우고 싶은 분들께 이 책을 추천합니다. - 박선호 (ConnectWave)
|
|
사용자 경험을 설계하는 디자이너에게 프론트엔드는 단순한 개발 영역이 아닌, 표현의 확장입니다. 이 책은 TML, CSS, JavaScript부터 반응형 UI, 애니메이션, Three.js 기반 3D 구현까지 폭넓은 기술을 다루며, 정적인 디자인을 동적인 경험으로 전환하는 방법을 체계적으로 안내합니다. 구현력은 물론, 설계 사고와 기술적 소통 능력까지 한 단계 도약하게 될 것입니다. - 강태희 (웹디자이너)
|
