'전체카테고리'에 해당되는 글 320건
- 2025.04.08 :: [신간소개] AI 디자인 for e-커머스: 쏙쏙 골라 바로 써먹는 AI 디자인 따라하기 130개 2
- 2025.04.08 :: [오탈자 정보] AI 디자인 for e-커머스: 쏙쏙 골라 바로 써먹는 AI 디자인 따라하기 130개
- 2025.02.27 :: [신간소개] 챗대리의 따라하면 바로 되는 AI 마케팅 자동화: 클로드, 피그마, make.com
- 2025.02.27 :: [오탈자 정보] 챗대리의 따라하면 바로 되는 AI 마케팅 자동화: 클로드, 피그마, make.com
- 2025.02.27 :: [도서 자료] 챗대리의 따라하면 바로 되는 AI 마케팅 자동화: 클로드, 피그마, make.com
- 2024.12.03 :: [신간소개] 생성형 AI를 활용한 게임 개발: ChatGPT, Tensor.Art, Udio 1
- 2024.12.03 :: [오탈자 정보] 생성형 AI를 활용한 게임 개발: ChatGPT, Tensor.Art, Udio
- 2024.12.03 :: [도서 자료] 생성형 AI를 활용한 게임 개발: ChatGPT, Tensor.Art, Udio
- 2024.04.16 :: [신간안내] 백견불여일타(이젠 프로젝트다!)리액트 쇼핑몰 프로젝트
- 2024.04.16 :: [오탈자 정보] 백견불여일타(이젠 프로젝트다!)리액트 쇼핑몰 프로젝트 2

● 지은이: 지성민
● 페이지: 448
● 판형: 188 * 257
● 도수: 4도
● 정가: 27,000원
● 발행일: 2025년 4월 16일
● ISBN: 979-11-93229-33-0 93000
[오탈자정보]
[강컴] [교보] [반디] [알라딘] [예스24] [인터파크]
_도서 내용
아직까지 AI 디자인은 금나와라 뚝딱 하면 금이 나오는 마술 지팡이가 아니다. 셀 수 없이 많은 AI 툴 중에서 선택 장애가 생길 정도로 무엇을 써야 할지 골치가 아프다. 저자는 수많은 툴을 비교 분석해서 딱 8개의 툴을 선택하였다. 그리고 e-커머스에 꼭 필요한 예제를 분야 및 기능별로 나누고 130개의 예제를 만들어 디자인 레시피를 준비했다. 디자인을 모르는 1인 쇼핑몰 사장님도 따라할 수 있을 정도로 과정은 쉽고 단순하다. 디자이너라면 이 책으로 한 땀 한 땀 포토샵 리터칭에 투자하는 시간을 획기적으로 줄일 수 있다. 그대로 따라하면 되는 진짜 AI 디자인 레시피 북이다.
_대상 독자
피팅 모델을 구하지 못해 발만 동동 구르고 있는 쇼핑몰 사장님
AI로 몇 분이면 할 일을 포토샵으로 하루 종일 시름하고 있는 현업 디자이너
AI로 디자인을 해보고 싶지만 수많은 AI 툴에 질려 엄두가 나지 않은 독자
디자인을 꿈꾸는 지망생
_목차
프롤로그
추천의 글
이 책의 특징과 학습 방법
1장 저화질 이미지를 2 배수 고화질 이미지로 바꾸는 AI
Warming Up_Remini AI 소개
시작하기
1-1 저화질 이미지 개선하기
1-2 흐린 이미지 개선하기
1-3 모자이크 이미지 개선하기
마치며
2장 저화질 이미지를 4 배수 고화질 이미지로 바꾸는 AI
Warming Up_Hitpaw FotorPea 소개
시작하기
2-1 노이즈 이미지 개선하기
2-2 흐린 글씨 개선하기
2-3 흐린 질감 개선하기
마치며
3장 이미지의 불필요한 부분을 지우는 AI
Warming Up_Adobe Firefly 소개
시작하기
3-1 불필요한 요소 제거하기
3-2 불필요한 배경 제거하기
3-3 배경만 남겨보기
마치며
4장 이미지에 요소를 바꾸거나 추가하는 AI
Warming Up_Adobe Firefly 활용, 두 번째
4-1 제품 주변에 장식 요소 추가하기
4-2 제품 안에 빠진 요소 추가하기
4-3 이미지 안의 요소를 바꾸기
마치며
5장 이미지의 빈 공간을 채워주는 AI
Warming Up_Adobe Firefly 활용, 세 번째
5-1 간단한 배경 채우기
5-2 복잡한 배경 채우기
5-3 원근감이 느껴지는 배경 채우기
5-4 요소의 형태 연장하기, 첫 번째
5-5 요소의 형태 연장하기, 두 번째
마치며
6장 글을 쓰면 이미지를 만들어 주는 AI, 기초 편
Warming Up_Adobe Firefly 활용, 네 번째
6-1 코스메틱 분야에 유용한 이미지 만들기
6-2 반려동물 분야에 유용한 이미지 만들기
6-3 건강식품 분야에 유용한 이미지 만들기
6-4 주방 용품 분야에 유용한 이미지 만들기
6-5 가족, 건강 분야에 유용한 이미지 만들기
6-6 스포츠 용품 분야에 유용한 이미지 만들기
마치며
7장 글을 쓰면 이미지를 만들어 주는 AI, 응용 편
Warming Up_Adobe Firefly 활용, 다섯 번째
7-1 화려한 스타일 이미지 만들기
7-2 자연스러운 조명 적용하기
7-3 자연스러운 인물 이미지 만들기
7-4 실루엣 이미지 만들기
마치며
8장 제품 사진만 있으면 스튜디오 촬영처럼 연출해 주는 AI
Warming Up_Flair AI 소개
8-1 기본 제작 원리를 이해해보는 예제
마치며
9장 화장품 사진만 있으면 스튜디오 촬영처럼 연출해 주는 AI
Warming Up_Flair AI 활용, 첫 번째
9-1 담백하고 깨끗한 연출하기
9-2 크림 질감 구현하기
9-3 립스틱 2개 연출하기
9-4 자연과 하나되는 연출하기
9-5 제품을 기울여보기
9-6 떠 있는 구도 연출하기
마치며
10장 패션/잡화 제품 사진만 있으면 스튜디오 촬영처럼 연출해 주는 AI
Warming Up_Flair AI 활용, 두 번째
10-1 주얼리를 고급스럽게 연출하기
10-2 가방을 천으로 감아보기
10-3 신발 2개를 마주 보도록 연출하기
10-4 샌들을 해변에 놓아보기
10-5 귀걸이를 모델에게 착용해 보기
10-6 모자를 모델에게 착용해 보기
마치며
11장 음식 사진만 있으면 스튜디오 촬영처럼 연출해 주는 AI
Warming Up_Flair AI 활용, 세 번째
11-1 절인 올리브 병 주변에 올리브 배치하기
11-2 아이스크림 주변을 장식하기
11-3 빵을 접시에 담고 주변을 장식하기
11-4 투명한 찻잔 연출하기
11-5 원하는 배경을 적용하기
마치며
12장 전자제품 사진만 있으면 스튜디오 촬영처럼 연출해 주는 AI
Warming Up_Flair AI 활용, 네 번째
12-1 가습기에 스팀 효과 연출하기
12-2 콘크리트와 랩탑의 조화
12-3 뾰족한 돌과 스마트폰의 조화
12-4 스마트 워치를 몽환적으로 연출하기
12-5 핸디 선풍기를 손으로 잡은 연출하기
마치며
13장 인테리어/소품 사진만 있으면 스튜디오 촬영처럼 연출해 주는 AI
Warming Up_Flair AI 활용, 다섯 번째
13-1 석고상과 소품을 조화롭게 연출하기
13-2 펜던트 조명 연출하기
13-3 원형 테이블 연출하기
13-4 거실 장 연출하기
13-5 의자 연출하기
마치며
14장 야외 촬영처럼 연출해 주는 AI
Warming Up_Flair AI 활용, 여섯 번째
14-1 텀블러를 아웃도어 스타일로 연출하기
14-2 텐트를 바닷가에 놓아보기
14-3 자동차 이미지 연출하기
14-4 모델 이미지 연출하기
14-5 안경을 모델에게 착용해 보기
마치며
15장 옷 이미지만 있으면 피팅 모델이 착용한 이미지를 만들어 주는 AI, 기초 편
Warming Up_Flair AI 활용, 일곱 번째
15-1 옷에 맞는 가상의 피팅 모델 생성하기 1
15-2 옷에 맞는 가상의 피팅 모델 생성하기 2
마치며
16장 옷 이미지만 있으면 피팅 모델이 착용한 이미지를 만들어 주는 AI, 응용편
Warming Up_Flair AI 활용, 여덟 번째
16-1 블라우스 피팅 모델 만들기
16-2 가죽 재킷 피팅 모델 만들기
16-3 니트 카디건 피팅 모델 만들기
16-4 주름 스커트 피팅 모델 만들기
16-5 정장 피팅 모델 만들기
16-6 셔츠 피팅 모델 만들기
마치며
17장 Flair AI, 추가 팁 정리
Warming Up_Flair AI 활용, 아홉 번째
17-1 고급스럽게 연출하는 팁
17-2 글씨가 있는 제품 연출하기
17-3 투명한 제품 연출하기
17-4 검색 기능 활용하기
17-5 프롬프트 활용하기
마치며
18장 모델의 얼굴을 바꿔주는 AI, 기초 편
Warming Up_Deepswapper 소개
18-1 예제를 통해 따라하기
18-2 응용하기
마치며
19장 모델의 얼굴을 바꿔주는 AI, 응용 편
Warming Up_Deepswapper 활용, 두 번째
19-1 얼굴의 각도가 유사한 경우
19-2 눈을 감았을 경우
19-3 안경을 착용한 경우
19-4 수염이 있을 경우
19-5 얼굴 바꾸기가 구현되지 않는 경우
마치며
20장 이미지만 있으면 영상을 만들어 주는 AI
Warming Up_Runway ML 소개
20-1 이미지 두 장으로 10초짜리 영상 만들기 기초
마치며
21장 이미지 두 장으로 다양한 영상 만들기
Warming Up_Runway ML 활용, 첫 번째
21-1 데님 상하의를 입은 여성 영상 만들기
21-2 모델의 앞모습을 옆으로 90도 회전하는 영상 만들기
21-3 남성 모델 사진으로 벽을 짚는 자세의 영상으로 만들기
21-4 여성 모델의 카메라 줌 아웃 영상 만들기
21-5 스케이트 보드 모델의 역동적인 움직임 구현하기
21-6 키즈 모델의 상반신을 시작으로 전신을 부각하는 영상 만들기
마치며
22장 이미지 한 장으로 영상을 만들기
Warming Up
Runway ML 활용, 세 번째
22-1 패딩을 입은 여성
22-2 전신의 움직임 구현
22-3 앉은 자세의 모델
22-4 에코백의 움직임
22-5 클로즈업 상태의 토트백
22-6 모델 뒤로 지나가는 자동차
22-7 클로즈업과 로우 앵글, 머리카락의 움직임
마치며
23장 이미지 한 장과 프롬프트의 활용, 카메라 움직임
Warming Up_Runway ML 활용, 네 번째
23-1 카메라 줌인 연출하기
23-2 카메라 회전 연출하기
23-3 드론 촬영 움직임 연출하기
23-4 카메라 줌 아웃 연출하기
23-5 정적인 카메라 움직임 연출하기
23-6 동적인 카메라 움직임 연출하기
마치며
24장 이미지 한 장과 프롬프트의 활용, 모델의 움직임
Warming Up_Runway ML 활용, 다섯 번째
24-1 고개를 흔드는 연출하기
24-2 고개를 드는 연출하기
24-3 고개를 숙이는 연출하기
24-4 머리카락을 만지는 연출하기
24-5 V자 포즈를 취하는 연출하기
24-6 점프 동작 연출하기
24-7 달리는 움직임 연출하기
마치며
25장 제품의 색상을 바꾸어 주는 AI
Warming Up_Vmake 소개
시작하기
25-1 트레이닝복의 색상 바꾸기
25-2 바지의 색상 바꾸기
25-3 털모자의 색상 바꾸기
25-4 양말의 색상 바꾸기
25-5 의자의 색상 바꾸기
25-6 이어폰 케이스의 색상 바꾸기
마치며
26장 광고 배너를 만들어 주는 AI
Warming Up_Vmake 활용, 두 번째
26-1 니트 제품 광고 만들기
26-2 니삭스 제품 광고 만들기
26-3 헤드폰 광고 만들기
26-4 가방 광고 만들기
마치며
27장 제품에 자동으로 로고 목업을 적용해 주는 AI
Warming Up_Adobe Illustrator 소개
27-1 모자에 적용하기
27-2 운동화에 적용하기
27-3 화장품에 적용하기
27-4 티셔츠에 적용하기
마치며
28장 글씨에 다양한 질감을 주는 AI
Warming Up_Adobe Firefly 활용, 여섯 번째
28-1 네온 효과 적용하기
28-2 풍선 질감 적용하기
28-3 금속 질감 적용하기
28-4 얼음 질감 적용하기
28-5 불 효과 적용하기
28-6 털실 질감 적용하기
28-7 빵 질감 적용하기
마치며
29장 로고에 다양한 질감을 주는 AI
Warming Up_Adobe Firefly 활용, 일곱 번째
29-1 액체 질감 적용하기
29-2 사탕 질감 적용하기
29-3 풍선 질감 적용하기
마치며
30장 구독을 취소하는 방법
30-1 Remini 구독 취소하기
30-2 Hitpaw FotorPea 구독 취소하기
30-3 Adobe 구독 취소하기
30-4 Flair AI 구독 취소하기
30-5 Runway ML 구독 취소하기
30-6 Vmake 구독 취소하기
마치며
에필로그
AI로 디자인하라고 하는데, 막상 실무에서 써보려면 잘되던가요?
현업 디자이너가 발품 팔아 엄선한 AI 툴과 디자인 레시피 130개
여러분은 쏙쏙 골라서 바로 익히고 사용하면 됩니다!
<<<<이 책의 초간단 사용 설명서>>>>
책은 1장부터 전부 예제로 구성되어 있습니다.
1. 일단, 책장을 넘기면서 지금 당장 필요한 디자인 예제를 찾습니다.
2. 그리고, 해당 페이지의 AI 툴과 예제를 학습하고, 본인에게 맞는 디자인을 하면 끝입니다.
이 책에서 다루는 툴은 단 여덟 가지!
Remini, HitpawFotorPea, Adobe FireFly, Flair AI, Deepswapper, RunwayML, Vmake, Adobe Illustrator
여덟 가지 툴을 활용하여 e-커머스 분야에서 디자인에 꼭 필요한 분야 및 기능으로 나누어 총 130개의 예제 레시피를 만들었습니다.
1. 저화질 이미지를 고화질 이미지로 바꾸기
2. 불필요한 이미지를 지우기
3. 이미지에 요소를 추가하거나 바꾸기
4. 이미지의 빈 공간을 채우기
5. 글만 쓰면 이미지를 만드는 방법
6. 화장품 사진을 스튜디오 촬영처럼 연출하기
7. 패션/집화 사진을 스튜디오 촬영처럼 연출하기
8. 음식 사진을 스튜디오 촬영처럼 연출하기
9. 전자체품 사진을 스튜디오 촬영처럼 연출하기
10. 인테리어/소품 사진을 스튜디오 촬영처럼 연출하기
11. 야외 촬영처럼 연출하기
12. 옷 이미지만으로 피팅 모델이 착용한 이미지 만들기
13. 계약 기간이 끝난 모델의 얼굴 바꾸기
14. 이미지만으로 숏폼 동영상 만들기
15. 제품의 색상 바꾸기
16. 광고 배너 만들기
17. 로고 목업 작업하기
18. 글씨에 다양한 질감 주기
19. 로고에 다양한 질감 주기
_추천의 글
AI 기술의 발전으로 예술 창작의 문턱이 낮아지면서 이제는 누구나 AI 툴을 활용해 쉽고 빠르게 그림을 그릴 수 있으며, 창의적인 아이디어를 시각적으로 표현하는 것이 더욱 자유로워졌습니다. 그럼에도 불구하고 아직은 생소한, 그러나 안하고 있으면 어쩐지 불안한 AI 툴의 시대이기도 합니다. 이 책은 AI를 이용한 그림 그리기의 기초부터 실전 활용법까지, 그리고 스틸 이미지에서 동영상까지 체계적으로 안내함과 동시에 분명한 목표의식을 가질 수 있도록 구성되어 초보자도 포기하지 않고 쉽게 따라 할 수 있게 하였습니다.
김학민 _한양사이버대학교 디자인대학원 전임 교수
AI에 대한 이야기는 넘쳐나지만, 막상 실무에서 써 본 사람은 그 어려움을 압니다. 생각보다 어떻게 써먹어야 할지 막막하고, 기대했던 결과물을 얻어내는 것도 쉽지 않다는 사실 말입니다. 이 책은 그런 고민에 제대로 된 답을 보여줍니다. 이커머스 실무에서 마주하는 고민들을 정확히 짚고, 복잡한 설명 대신 쉽게 따라 할 수 있는 것들을 하나하나 풀어 놓습니다. 이 과정에서 누구나 멋진 브랜드 이미지를 만들어내고, 브랜드 성장을 이끄는 힘을 갖추게 됩니다.
김진욱 _커리어 플랫폼 Surfit Founder
이커머스 디자인 분야의 디자이너라면 반드시 한 번쯤 읽어봐야 할 책입니다. 특히 지금 하고 있는 업무에 AI를 어떻게 활용할지 고민 중이라면, 이 책은 꼭 읽어 보시기를 추천합니다. 비주얼 디자인에 AI를 결합하여 구체적인 결과물을 만들어내는 방법을 제시하고 있어, 레시피 북처럼 활용할 수 있습니다. 어떤 상황에서 어떤 AI 툴을 어떻게 사용해야 할지에 대한 구체적인 가이드를 제공하여, 디자인 프로세스를 개선하고 효율성을 높이는 데 큰 도움이 될 것입니다.
하이서 _피그마 튜터
생성형 AI를 활용한 디자인 기법들은 대체로 긴 프롬프트가 필요해 부담스러울 때가 많습니다. 하지만 이 책은 이미지와 영상 작업에 유용한 핵심 주제들을 쉽고 간결하게 정리해, 누구나 부담 없이 활용할 수 있도록 도와줍니다. 특히, 마지막 장에서 다룬 구독 취소 방법 안내는 다양한 AI 툴을 자유롭게 탐색할 수 있도록 배려한 저자의 세심한 센스를 보여줍니다.
최현희 _S금융 UI/UX Designe
이 책은 다양한 생성형 AI 서비스를 활용하여 손쉽게 이미지를 보정하는 방법을 소개합니다. 특히 초보자도 쉽게 따라할 수 있도록 단계별로 차근차근 방법을 제시하고 이미지 생성에 최적화된 프롬프트 예시를 통해 효과적인 프롬프트 엔지니어링 기술을 익힐 수 있습니다. AI는 점점 더 디자인 업무를 자동화하며 디자이너의 역할을 변화시킬 것입니다. 그러나 AI를 능숙하게 활용하는 디자이너는 작업 시간을 단축하는 것은 물론, 더 다양한 이미지를 창의적으로 만들어낼 수 있습니다. 실무에서 생성형 AI를 활용하고 싶지만 어디서부터 시작해야 할지 막막한 디자이너에게 이 책을 추천합니다.
고주희 _스켈터랩스 AI Product Designer
이 책은 AI를 이용해 아이디어에 현실감을 부여할 수 있는 구체적인 방안을 제시하는 실용적인 안내서입니다. 저자는 AI에 대한 추상적인 이야기가 아닌, 작은 단위로 체감할 수 있는 AI 디자인 사례를 소개함으로써 독자가 직접 적용해 볼 수 있도록 도와줍니다. 가장 인상적인 부분은 아이디어를 현실로 옮기는 과정이 AI를 통해 얼마나 빠르고 다채롭게 구현되는지를 보여주는 대목입니다. 이전에는 상상에 그쳤던 아이디어들이 AI의 도움으로 구체적인 형태를 갖추며, 경험의 아이디어가 더 넓고 깊게 확장되는 과정은 실로 경이롭습니다. 디자이너라면 이 책을 통해 AI를 활용한 실질적인 워크플로우를 익히고, 막연했던 아이디어를 손에 잡히는 결과물로 만들어 볼 수 있을 것입니다.
유지형 _SK C&C UX Manager
_저자 소개
지은이 지성민
- UI/UX 디자이너
- 신세계INC 플그림 재직 중
- 외부 강사 (한양사이버대학교 디자인 대학원)
대표 활동
- 카카오 브런치 스토리 커머스 분야 크리에이터(구독자 675명)
- Surfit 매거진 에디터(現)
- 위픽레터 에디터(現)
프로젝트 (APP/WEB)
- H사 프로젝트(진행 중)
- 탑텐, 굿웨어몰
- 현대자동차 Casper
- 롯데 하이마트
- 신세계 JAJU
- 신한은행
- 파고다어학원
- KB생명
- 삼성닷컴 외 다수
수상 이력
- A.N.D. AWARD 1회
- 아이어워즈 4회
- GDWEB Design Awards 3회
_상세 이미지

_끝
'신간소개' 카테고리의 다른 글
[신간소개] 챗대리의 따라하면 바로 되는 AI 마케팅 자동화: 클로드, 피그마, make.com (0) | 2025.02.27 |
---|---|
[신간소개] 생성형 AI를 활용한 게임 개발: ChatGPT, Tensor.Art, Udio (1) | 2024.12.03 |
[신간안내] 백견불여일타(이젠 프로젝트다!)리액트 쇼핑몰 프로젝트 (0) | 2024.04.16 |
[신간안내] 시작하는 개발자들을 위한 기술 여행 가이드: 개발 지식을 높은 곳에서 한눈에 조망할 수 있는 책 (0) | 2023.11.06 |
[신간 안내] 자바의 신 VOL.2 주요 API 응용편, 3rd Edition (0) | 2023.10.13 |
'오탈자 정보' 카테고리의 다른 글
[오탈자 정보] 챗대리의 따라하면 바로 되는 AI 마케팅 자동화: 클로드, 피그마, make.com (0) | 2025.02.27 |
---|---|
[오탈자 정보] 생성형 AI를 활용한 게임 개발: ChatGPT, Tensor.Art, Udio (0) | 2024.12.03 |
[오탈자 정보] 백견불여일타(이젠 프로젝트다!)리액트 쇼핑몰 프로젝트 (2) | 2024.04.16 |
[오탈자 정보] 시작하는 개발자들을 위한 기술 여행 가이드: 개발 지식을 높은 곳에서 한눈에 조망할 수 있는 책 (3) | 2023.11.06 |
[오탈자 정보] 자바의 신 VOL.2, 3rd Edition (4) | 2023.10.13 |
● 지은이: 챗대리(박진주)
● 페이지: 308
● 판형: 170 * 240
● 도수: 2도
● 정가: 24,000원
● 발행일: 2025년 3월 10일
● ISBN: 979-11-93229-31-6 93000
[강컴] [교보] [반디] [알라딘] [예스24] [인터파크]
_도서 내용
따라하면 바로 되는 AI 마케팅 자동화 실습서다. 저자가 실무에 활용할 수 있도록 수많은 학습과 시행착오를 거쳐 만들었다. 몇십 분이면 자동화가 가능할 것을 몇 시간, 하루 종일 시름하는 독자라면, 이 책으로 생산성 향상을 이뤄보기 바란다. 이 책의 내용을 하나하나 따라하며 학습하고 응용하여 여러분의 시간을 절약해주는 자신만의 자동화 프로세스를 만들어보기 바란다. 단순한 것은 AI에게 맡기고 창의적인 일에 집중하는 일잘러가 되어보자.










_대상 독자
AI를 활용하기 위해 챗GPT 유료 버전을 구독했지만 뭘 해야 할지 난감한 김대리
신제품 출시를 앞두고 광고 카피와 배너를 기획해야 하는 박대리
광고 기획에 사용할 적절한 이미지 때문에 머리 아픈 이너웨어 브랜드 마케팅팀 최매니저
생활용품 쇼핑몰을 운영 중인 온라인 셀러 A씨
최근 매출 정체로 고민이 많은 코딩 교육 플랫폼을 운영 중인 김대표
_목차
머리말
이 책에서 진행하는 실습 프로젝트 미리보기
프롤로그
일러두기
1장_마케팅 자동화의 핵심, 이것만은 꼭 알아두자
1.1 AI의 강점과 약점 이해하기
_ AI의 강점
_ AI의 약점
_ 맥락을 먼저 알려준 후 질문하세요
1.2 기본적인 프롬프팅 기술 익히기
_ 새로운 과제는 새 대화 창을 열어 물어보세요
_ AI가 참고할 수 있는 예시를 주며 질문하세요
_ 단계별로, 상세히 지시하세요
1.3 마케팅 업무별로 적합한 AI 도구 선택하기
2장_SNS 광고 제작 시간 90% 줄이기
2.1 AI 도구 소개: 클로드, 피그마, 브이캣.AI
_ 클로드
_ 피그마
_ 브이캣.AI
_ 데이터 수집하기
2.2 경쟁사 광고 분석하기
_ AI로 광고 데이터 분석하기
_ 경쟁사 광고 벤치마킹하기
_ 이미지를 바탕으로 벤치마킹하기
2.3 광고 카피 대량으로 생성하기
_ STEP 1. 확장 프로그램 설치 및 Claude API 키 발급하기
_ STEP 2. 타깃 목록 준비하기
_ STEP 3. 구글 시트에서 광고 카피 대량으로 생성하기
2.4 광고 배너 대량 생성하기
2.5 클릭 한 번으로 영상 광고 생성하기
3장_제작 비용 0원! AI로 맞춤형 광고 이미지 만들기
3.1 이미지 생성형 AI 종류와 개요
_ 미드저니
_ 달리
_ 이데오그램
_ 이마젠 3
3.2 AI 이미지 생성의 한계
3.3 AI 챗봇으로 이미지 프롬프트 만들기
_ STEP 1. 이미지 아이디어 구상하기
_ STEP 2. 프롬프트 생성하기
_ STEP 3. 프롬프트 다듬기
3.4 빙 이미지 크리에이터로 이미지 생성하기
3.5 AI 이미지로 광고 배너 만들기
_ 등산복 콘셉트의 배너 만들기
_ 골프복 콘셉트의 배너 만들기
4장_상세 페이지 제작, AI로 10배 빠르게 만들기
4.1 상세 페이지 제작 자동화 준비하기
4.2 상세 페이지 문안 자동 생성하기
4.3 상세 페이지 여러 개를 한 번에 만들기
5장_콘텐츠 마케팅 자동화로 1일 1포스팅하기
5.1 AI 도구 소개: make.com
_ 다양한 업무 자동화가 가능한 make.com
5.2 뉴스 스크랩 자동화하기
_ make.com 시작하기
5.3 뉴스레터 자동화하기
5.4 SNS 포스팅 자동화하기
6장_고객관리 자동화로 고객 만족도 300% 높이기
6.1 AI 도구 소개: 오픈AI 어시스턴트
6.2 고객 메일에 자동으로 답변 보내기
_ STEP 1. 메일 응답 챗봇 만들기
_ STEP 2. make.com으로 메일 자동 답변 시스템 만들기
6.3 인스타그램 댓글 자동으로 답변하기
_ STEP 1. 인스타그램 댓글 답변 봇 만들기
_ STEP 2. make.com으로 인스타그램 자동 답글 시스템 만들기
부록_마케팅 자동화를 위한 AI 도구 목록
_ n8n
_ Zapier
_ Manychat
_ 솔라피
_ 판다 AI
_ 타입캐스트
_ Notebook LM
찾아보기
************* 챗대리의 마케팅 자동화 2원칙 **************
1. 무조건 AI에게 맡기지 마라
문제의 본질을 먼저 파악한 후, AI가 효과적으로 해결할 수 있는 부분만 맡겨라.
2. 업무별로 최적의 도구 조합을 선택하라!
이 책으로 자신에게 맞는 도구들의 조합을 찾아 나만의 일잘러 AI 시스템을 구축하라.
꾸준히 자동화하면 여러분의 “퇴근이 빨라집니다.”
이 책에서 함께 만들어보는 AI 마케팅 자동화 시스템(당장 실무 적용 가능)
1. 클로드, 챗GPT 등 각종 AI 도구를 조합해 광고 제작을 자동화하는 예제
2. 이미지 생성형 AI를 활용해 수십 개, 수백 개의 광고 이미지를 손쉽게 생성하는 예제
3. 개발자, 마케터, 기획자가 총동원되어야 했던 프로모션 페이지 제작을 마케터 한 명이 10배 빨리 끝내는 시스템
4. SNS 포스팅부터 고객 관리까지, 자동화를 통해 속도와 생산성을 10배 높이는 시스템
5. 기타 각 업무 상황에 맞는 최적의 AI 도구의 추천 및 사용 방법
이 책에 나온 구체적인 사례를 따라하다 보면 AI를 실무에 어떻게 활용하면 될지 감이 잡히게 될 것이고, AI에 대한 막연한 두려움 대신 자신감을 얻을 것입니다.
_저자 서문 중에서
AI 시대에도, ‘내 일’에 집중하는 것이 먼저입니다
매일같이 쏟아지는 AI 관련 뉴스와 신제품 출시 소식, 끊임없이 변하는 기술 트렌드를 접하다 보면 이런 생각이 들 때가 있습니다.
‘나, 혹시 뒤처지고 있는 건 아닐까?’ ‘새로운 기능이 나왔는데 당장 써봐야 하나?’
결론부터 말씀드리면, 여러분은 결코 뒤처진 것이 아닙니다. 모든 기술을 일일이 따라잡을 필요는 없습니다. 중요한 것은 ‘내 업무’ ‘내 마케팅 목표’에 맞춰 정말 필요하고 유용한 것만 제대로 익히고, 그것들을 일상 업무나 프로젝트에 ‘효과적으로 접목’하는 것입니다.
이 책은 마케터들이 AI로 작업 방식을 효율화하고, 그 변화를 통해 ‘실질적인 생산성 향상’을 어떻게 이룰 수 있는지 알 수 있도록 기획되었습니다. 지난 몇 년간 AI는 엄청난 속도로 발전해왔고, 이제는 기업 규모나 업종, 개인의 전문 분야에 관계없이 누구나 손쉽게 이를 활용할 수 있는 시대가 되었습니다. 문제는 그 다양함이 ‘장점’이자 동시에 ‘혼란의 원인’이라는 사실입니다. 그 결과, 저는 많은 마케터들이 다음과 같은 고민을 안고 있다는 사실을 알게 되었습니다.
1. “AI 도구가 너무 많은데, 대체 뭘 써야 할까?”
다양한 도구 사이에서 무엇을 선택해야 할지 혼란스럽기만 합니다. 하지만 실제로 업무나 학습 과정에서 자주 쓰이는 도구는 극히 일부입니다. 그러므로 이 책에 서는 한국 마케팅 상황에 꼭 필요한 도구들을 엄선하여 추천합니다.
2. “AI를 마케팅 실무에 적용해서 정말 성과를 낼 수 있을까?”
예를 들어, AI 챗봇에게 종합적 사고를 요구하는 마케팅 전략 작성을 맡기면 실망스러운 결과를 얻을 수 있습니다. 하지만 다양한 타깃층에 맞춘 개인화 카피를 대량 작성하는 것은 사람보다 수십, 수백 배 빠른 속도로 가능하죠. 이 책에서는 이처럼 실무에 적용해서 효과를 볼 수 있는 AI 자동화 방식만 모아 설명합니다.
3. “새로운 도구가 나오면 지금 배운 게 소용없어지진 않을까?”
AI 분야는 끊임없이 진화하고 있습니다. 오늘 배운 도구가 내일이면 경쟁사의 새로운 모델에 밀려 구식이 될 수도 있습니다. 하지만 기술 발전의 방향은 ‘자동화’, ‘효율화’ 그리고 ‘개인화’라는 굵직한 축을 따라가고 있습니다. 이 책의 핵심은 어떤 상황에서, 어떤 지점에 이 기술을 결합해야 업무 효율이 극대화되는지 이해하고 응용하는 방법을 배우는 데 중점을 두고 있습니다. 즉, 도구 그 자체보다 그것을 실무에 적용하는 방식과 사고방식을 익히는 데 초점을 맞춘다고 보면 됩니다.
추가로 당부하고 싶은 점은 이 책 하나로 “AI 활용법을 섭렵하겠다”라기보다, 여러분만의 지속 가능한 학습 시스템을 구축하는 출발점으로 삼으라는 것입니다. 기술의 발전 속도를 따라잡기에 어려워 보입니다. 그렇더라도, 매주 5분에서 10분 정도만 투자해 신뢰할 만한 소수의 정보 출처를 통해 최신 정보를 확인하고, 매주 한 시간 정도만 할애해 내 업무에 적용해보세요. 그러면 어느새 새로운 도구가 나오더라도 당황하지 않고 유연하게 대처하는 능력을 갖추게 될 것입니다.
_저자 소개
지은이 챗대리(박진주)
이커머스 스타트업 마케팅팀에서 커리어를 시작으로, KT 계열 광고대행사인 플레이디에서 프로젝트 매니저(PM)로 활동하며 다양한 브랜드의 캠페인을 진행했다. 현재는 AI 활용 강사로 활동하며, AI 기술을 실무에 효과적으로 적용하는 방법을 전파하고 있다. 유튜브 채널 <챗대리의 Ai연구소>를 운영하며 누구나 AI를 친근하고 유용하게 사용할 수 있도록 돕는 콘텐츠를 제작 중이다.
PUBLY에 기고한 글로는 ‘챗GPT로 1시간 만에 마케팅 제안서 작성하는 법’, ‘일잘러가 제미나이를 데이터와 기획에 활용하는 6가지 방법’ 등이 있으며, 패스트캠퍼스에서 ‘ChatGPT for Business’ 강의의 멘토로도 활동하며 실질적이고 실무 중심의 교육을 제공했다.
AI를 통해 업무와 삶을 더 스마트하게 만드는 방법을 연구하고 공유하는 데 집중하고 있다.
_상세 이미지

_끝
'신간소개' 카테고리의 다른 글
[신간소개] AI 디자인 for e-커머스: 쏙쏙 골라 바로 써먹는 AI 디자인 따라하기 130개 (2) | 2025.04.08 |
---|---|
[신간소개] 생성형 AI를 활용한 게임 개발: ChatGPT, Tensor.Art, Udio (1) | 2024.12.03 |
[신간안내] 백견불여일타(이젠 프로젝트다!)리액트 쇼핑몰 프로젝트 (0) | 2024.04.16 |
[신간안내] 시작하는 개발자들을 위한 기술 여행 가이드: 개발 지식을 높은 곳에서 한눈에 조망할 수 있는 책 (0) | 2023.11.06 |
[신간 안내] 자바의 신 VOL.2 주요 API 응용편, 3rd Edition (0) | 2023.10.13 |
'오탈자 정보' 카테고리의 다른 글
[오탈자 정보] AI 디자인 for e-커머스: 쏙쏙 골라 바로 써먹는 AI 디자인 따라하기 130개 (0) | 2025.04.08 |
---|---|
[오탈자 정보] 생성형 AI를 활용한 게임 개발: ChatGPT, Tensor.Art, Udio (0) | 2024.12.03 |
[오탈자 정보] 백견불여일타(이젠 프로젝트다!)리액트 쇼핑몰 프로젝트 (2) | 2024.04.16 |
[오탈자 정보] 시작하는 개발자들을 위한 기술 여행 가이드: 개발 지식을 높은 곳에서 한눈에 조망할 수 있는 책 (3) | 2023.11.06 |
[오탈자 정보] 자바의 신 VOL.2, 3rd Edition (4) | 2023.10.13 |
'자료실' 카테고리의 다른 글
[도서 자료] 생성형 AI를 활용한 게임 개발: ChatGPT, Tensor.Art, Udio (0) | 2024.12.03 |
---|---|
[도서 자료] 백견불여일타(이젠 프로젝트다!)리액트 쇼핑몰 프로젝트 (0) | 2024.04.16 |
[도서 자료] 시작하는 개발자들을 위한 기술 여행 가이드 : 개발 지식을 높은 곳에서 한눈에 조망할 수 있는 책 (0) | 2023.11.06 |
[도서 자료] 자바의 신 VOL.2, 3rd Edition (0) | 2023.10.13 |
[도서 자료] 자바의 신 VOL.1, 3rd Edition (0) | 2023.10.13 |

● 지은이: 정금호
● 페이지: 424
● 판형: 172 * 225
● 도수: 2도
● 정가: 27,000원
● 발행일: 2024년 12월 12일
● ISBN: 979-11-93229-30-9 93000
[강컴] [교보] [반디] [알라딘] [예스24] [인터파크]
_도서 내용
ChatGPT, Tesor.Art, Udio 등의 생성형 AI를 활용하여 게임을 만들고 앱 스토어에 배포까지 따라하며 배울 수 있는 책이다. AI로 게임을 만들기 위해서는 많은 시행착오를 겪어야 하지만, 저자가 먼저 수많은 시도와 실패로 얻은 경험을 책에 녹여냈다. 출간 전에 이 책의 내용으로 2주 간의 특강을 진행하였는데, 10명의 수강생이 자신만의 게임을 만들어 앱을 성공적으로 배포할 수 있었다. 코딩을 잘 모르는 독자도 좋은 아이디어만 있다면 한번 도전하여 멋진 게임을 유료로 배포하는 성공의 기쁨을 맛보길 바란다.
_대상 독자
평소에 게임을 만들어보고 싶었던 누구나!
게임 프로그래머가 되기 위해 준비 중이며 경험과 포트폴리오가 필요한 독자!
앱을 만들어 배포하는 방법까지 알고 싶어하는 독자!
생성형 AI를 어디까지 활용할 수 있는지 미치도록 알고 싶은 누구나!








_목차
추천사
머리말
01장. 생성형 AI 소개
1.1 생성형 AI란 무엇인가
1.2 생성형 AI 종류
1.2.1 대규모 언어 모델
1.2.2 텍스트-이미지 모델
1.2.3 텍스트-음악 모델
1.2.4 텍스트-비디오 모델
1.3 생성형 AI의 현재
1.4 생성형 AI의 미래와 우리의 자세
1.5 저작권 이슈
02장. 생성형 AI를 이용해서 게임용 이미지 생성하기
2.1 Tensor.Art 소개
2.2 적당한 체크포인트, LoRA 선택 및 프롬프트 찾기
2.3 생성된 이미지를 게임에서 사용할 때의 문제점
2.3.1 생성된 이미지 후처리 이슈
2.3.2 일관성 유지 이슈
2.3.3 군중신 표현의 어려움
2.3.4 등급 분류의 이슈
2.3.5 남성 캐릭터 이미지 생성의 어려움
03장. 생성형 AI를 이용해서 게임용 BGM 생성하기
3.1 Udio.com 소개
3.2 가사가 있는 노래 만들기
3.3 가사가 없는 BGM 만들기
04장. 챗GPT를 이용해서 게임 시나리오 생성하기
4.1 챗GPT로 콘텐츠 만들기
4.2 게임의 캐릭터와 배경 설정하기
4.3 캐릭터별 이벤트 목록 작성하기
4.4 이벤트 스크립트 만들기
4.5 다국어 지원 테스트해보기
05장. 생성형 AI를 활용한 게임 프로젝트 사례 소개
5.1 20년 전에 출시한 게임의 리메이크 버전 개발
5.1.1 기존 CG를 대체하는 이미지 생성
5.1.2 새로운 캐릭터 설정 추가
5.1.3 콘텐츠 강화
5.1.4 프로그램 리뉴얼
5.1.5 등급 분류 신속 대응
5.2 생성형 AI를 활용한 오리지널 게임 개발
5.2.1 챗GPT를 활용한 시나리오 작업
5.2.2 음악 생성형 AI를 이용한 BGM 생성 작업
5.2.3 새로운 모델 및 LoRA 활용 방법
5.2.4 앱스토어 검수 이슈
5.3 개발 중인 게임 프로젝트 소개
5.3.1 판타지 육성 시뮬레이션 게임
5.3.2 판타지 연애 시뮬레이션 게임
5.3.3 일제 강점기 배경 전략 시뮬레이션 게임
5.3.4 SF 비주얼 노블 게임
06장. 생성형 AI를 활용한 게임 프로젝트 진행하기
6.1 게임 기획 및 시나리오 작업
6.1.1 게임에 등장하는 캐릭터 설정하기
6.1.2 게임 배경 설정하기
6.1.3 게임 이벤트 설정하기
6.1.4 게임 이벤트 스크립트 생성하기
6.1.5 게임 이벤트 CG 목록 생성하기
6.1.6 게임 인트로 및 엔딩 스크립트 생성하기
6.2 게임 리소스 생성하기
6.2.1 설정된 캐릭터에 맞는 모델 및 LoRA 선택하기
6.2.2 캐릭터별 이미지 생성하기
6.2.3 메인 화면, 아이콘용 이미지 생성하기
6.2.4 게임 배경 이미지 생성하기
6.2.5 김프를 이용해서 게임용 이미지 가공하기
6.2.6 게임용 음악 생성하기
6.2.7 캐릭터별 이벤트 스크립트 작업하기
6.2.8 Sqlite로 게임용 데이터베이스 파일 생성하기
07장. 게임 프로젝트 프로그래밍하기
7.1 게임 프로그래밍 하기
7.1.1 모바일 게임에 대한 이해
7.1.2 안드로이드 스튜디오 설치 및 실행
7.1.3 기본 프로그램 예제 불러오기
7.1.4 기본 프로그램 빌드 및 실행하기
7.1.5 생성한 게임 리소스를 프로그램에 적용하기
7.1.6 프로그램 테스트 및 마무리
08장. 게임 프로젝트 출시하기
8.1 게임 출시 준비하기
8.1.1 출시를 위한 패키지 빌드하기
8.1.2 게임 출시를 위한 추가 이미지 생성하기
8.1.3 스크린숏 캡쳐하기
8.1.4 게임 설명 작성하기
8.2 게임 출시하기
8.2.1 앱스토어 계정 만들기 및 로그인
8.2.2 상품 정보 생성 및 등록하기
8.2.3 앱스토어 규정에 맞게 추가 정보 등록하기
8.2.4 빌드된 최종 패키지 업로드하기
8.2.5 검수 요청하기
09장. 생성형 AI를 이용한 게임 개발의 장단점
9.1 생성형 AI를 이용한 게임 개발의 장점
9.1.1 높은 생산성
9.1.2 높은 품질
9.1.3 단점을 커버하는 물량 공세
9.1.4 다양한 실험과 시도가 가능
9.1.5 창고에 쌓아 두었던 기획서들을 다시 꺼내야 할 때
9.2 생성형 AI를 이용한 게임 개발의 단점
9.2.1 생성형 AI에 대한 사용자의 거부감
9.2.2 학습 데이터가 부족한 분야에 대한 제한
9.2.3 최종 결과물을 얻기 위한 수율이 낮음
9.2.4 높은 생산성으로 인한 지나친 욕심
9.2.5 결국 사람의 손으로 해야 하는 마무리
9.3 생성형 AI를 이용하여 개발한 게임 소개
찾아보기
생성형 AI의 힘을 빌어 게임 개발을 더 쉽고 빠르게!
생성형 AI가 있다면 혼자서 한 달에 하나씩 게임 앱 출시도 거뜬
이 책은 생성형 AI를 활용해 게임 개발에서 혼자서는 하기 힘든 시나리오와 캐릭터 선정부터 그리기, 이벤트 및 이벤트 스크립트, 배경 이미지와 음악, 주제가 등을 쉽게 개발하여 게임 개발을 획기적으로 단축할 수 있게끔 해주는 책이다.
저자는 이미 십 년 전에 개발한 게임 두 개를 불과 몇 개월 만에 생성형 AI를 활용하여 재론칭하였고, 이 책의 내용으로 국내에서 2주 특강을 열어, 수강생 10명 이상이 자신의 게임을 5일~2주 만에 앱스토어에 출시하고, 저자 자신도 이후 3개월 간 무려 22개의 게임을 출시하는 놀라운 성과를 냈다.
_주요 내용
1. 생성형 AI를 활용한 이미지 생성:
게임 개발에 필요한 캐릭터와 배경 이미지 등을 생성하는 방법. 이미지 생성 시 프롬프트 작성 요령과 생성형 AI의 한계, 저작권 문제 설명.
2. 게임용 BGM과 음악 생성:
게임 내에서 배경 음악(BGM)이나 주제가를 생성하는 방법. AI 도구를 사용해 다양한 음악을 자동 생성하고 수정하는 과정 수록.
3. 게임 시나리오 작성:
챗GPT를 활용하여 게임 시나리오를 자동 생성하는 방법. 캐릭터의 대사나 이벤트를 구성하는 구체적인 방법과 예시.
4. 생성형 AI를 활용한 게임 개발 실전 프로젝트:
게임 시나리오, 이벤트, 이벤트별 스크립트, 캐릭터 및 배경 이미지 개발, 배경음악 및 주제가 작곡, 게임 코드를 깃허브에서 개발 툴로 받아와 AI로 만든 리소스를 활용한 게임 완성하기.
5. 게임 개발 마무리 및 앱스토어 출시:
생성형 AI를 통해 제작한 게임을 앱스토어에 등록하는 과정. 게임의 등급 분류, 상품 정보 등록, 마케팅 자료 제작 등 실질적인 운영 방법 제시.
_저자 서문 중에서
이미지 생성형 AI를 사용해봄으로써, 예상치 못한 곳에서 내가 오랫동안 풀기 힘들었던 문제에 대한 힌트를 얻게 된 것이다. 그것이 현실적으로 가능한지 테스트해보기 위해서, 20년 전에 만들었던 게임의 리메이크REMAKE 버전을 이미지 생성형 AI를 이용해서 만들어 보기로 결정했다. 그리고 2개월 후인 2023년 12월 24일, 완성된 리메이크 버전을 구글 플레이 스토어와 원스토어에 출시함으로써 그것이 가능하다는 것을 입증할 수 있었다.
24년 전에는 5~6명의 게임 개발팀을 이끌고 3개월에 게임 하나씩 만들어 출시했는데, 지금은 나 혼자서 당시 만들었던 게임보다 더 풍부한 콘텐츠를 가진 게임을 2~3개월에 하나씩 만들 수 있게 된 것이다. 우여곡절이 있기는 했지만 2024년 5월말 두 번째 게임도 원스토어에 출시했다.
_추천글
이 책은 ChatGPT로 게임 시나리오를 만들고, Tensor.Art로 캐릭터를 디자인하며, Udio로 배경음악을 제작하는 전 과정을 담고 있다. 이렇게 하면 잘될 거라고 말하는 성공의 비결을 가르쳐주는 그런 책이 아니라, 새로운 분야에 처음으로 뛰어든 퍼스트 펭귄의 기록 같은 책이다.
게임 시나리오부터 캐릭터와 배경음악까지, 아직 사람이 다닌 흔적도 별로 없고 이정표도 제대로 없는 길을 가면서 겪었던 시행착오의 기록이기도 하다.
저자가 혼자서 생성형 AI로 게임을 만들어 보겠다고 용감하게 뛰어 들고, 개발부터 심의, 출 시까지 모든 과정에서 얻은 실전적인 노하우와 값진 시행착오의 경험들을 이 책을 통해 나누어 주는 것에 감사한다.
이 책을 통해 누구나 AI의 도움을 받아 자신만의 게임을 기획하고, 개발하고, 더 나아가 실제로 출시까지 할 수 있게 되기를 기대한다.
_김성완 - GenAI Korea 운영자, 전 펄어비스 AI 연구원
_저자 소개
지은이 정금호
1984년에 애플 Ⅱ+로 컴퓨터 프로그래밍을 시작하였고, 대학교 1학년이었던 1993년부터 PC 통신을 이용하여 여러 가지 공개 소프트웨어와 셰어웨어를 만들어 발표하였다. 1997년부터 다수의 윈도우즈용 상용 게임과 상용 애플리케이션 및 웹 애플리케이션, 임베디드 애플리케이션 등을 개발해왔으며, 2005년부터는 윈도우즈 모바일, 아이폰, 안드로이드용 애플리케이션 및 게임을 직접 개발하거나 모바일 앱 서비스 개발 총괄 등을 맡아왔다.
2018년부터는 가족들과 함께 독일로 이사했고, 베를린의 글로벌 스타트업에서 풀스택 개발자로 일하였으며, 현재는 인공지능 스타트업에서 일하고 있다. 2023년 10월부터 생성형 AI를 이용하여 22개 이상의 게임을 개발해서 구글 플레이 스토어와 원스토어에 출시했다.
저서로는 『이것이 진짜 안드로이드 프로그래밍이다』, 『스마트 TV 애플리케이션 프로그래밍』(2014년), 『벤츠 타는 프로그래머』(2013년), 『실전 아이폰 프로그래밍』, 『실전 안드로이드 프로그래밍』(2011년), 『애플리케이션 개발자, 윈도 모바일 매력에 빠지다』(2010년)가 있다.4o
_상세 이미지

_끝
'신간소개' 카테고리의 다른 글
[신간소개] AI 디자인 for e-커머스: 쏙쏙 골라 바로 써먹는 AI 디자인 따라하기 130개 (2) | 2025.04.08 |
---|---|
[신간소개] 챗대리의 따라하면 바로 되는 AI 마케팅 자동화: 클로드, 피그마, make.com (0) | 2025.02.27 |
[신간안내] 백견불여일타(이젠 프로젝트다!)리액트 쇼핑몰 프로젝트 (0) | 2024.04.16 |
[신간안내] 시작하는 개발자들을 위한 기술 여행 가이드: 개발 지식을 높은 곳에서 한눈에 조망할 수 있는 책 (0) | 2023.11.06 |
[신간 안내] 자바의 신 VOL.2 주요 API 응용편, 3rd Edition (0) | 2023.10.13 |
'오탈자 정보' 카테고리의 다른 글
[오탈자 정보] AI 디자인 for e-커머스: 쏙쏙 골라 바로 써먹는 AI 디자인 따라하기 130개 (0) | 2025.04.08 |
---|---|
[오탈자 정보] 챗대리의 따라하면 바로 되는 AI 마케팅 자동화: 클로드, 피그마, make.com (0) | 2025.02.27 |
[오탈자 정보] 백견불여일타(이젠 프로젝트다!)리액트 쇼핑몰 프로젝트 (2) | 2024.04.16 |
[오탈자 정보] 시작하는 개발자들을 위한 기술 여행 가이드: 개발 지식을 높은 곳에서 한눈에 조망할 수 있는 책 (3) | 2023.11.06 |
[오탈자 정보] 자바의 신 VOL.2, 3rd Edition (4) | 2023.10.13 |
● 안드로이드/아이폰 공용 예제 게임 리소스
https://github.com/nashorn74/GenAIGameResource
GitHub - nashorn74/GenAIGameResource
Contribute to nashorn74/GenAIGameResource development by creating an account on GitHub.
github.com
● 안드로이드용 예제 게임 소스
https://github.com/nashorn74/GenAIAndroidGameExam
GitHub - nashorn74/GenAIAndroidGameExam
Contribute to nashorn74/GenAIAndroidGameExam development by creating an account on GitHub.
github.com
● 안드로이드용 예제 게임 다운로드(원스토어) https://m.onestore.co.kr/mobilepoc/apps/appsDetail.omp?prodId=0000777279
하트비트 아이돌 - 원스토어
당신을 K-pop 아이돌 스타를 발굴하는 서바이벌 예능 프로그램의 주인공으로 초대합니다.
m.onestore.co.kr
'자료실' 카테고리의 다른 글
[도서 자료] 챗대리의 따라하면 바로 되는 AI 마케팅 자동화: 클로드, 피그마, make.com (0) | 2025.02.27 |
---|---|
[도서 자료] 백견불여일타(이젠 프로젝트다!)리액트 쇼핑몰 프로젝트 (0) | 2024.04.16 |
[도서 자료] 시작하는 개발자들을 위한 기술 여행 가이드 : 개발 지식을 높은 곳에서 한눈에 조망할 수 있는 책 (0) | 2023.11.06 |
[도서 자료] 자바의 신 VOL.2, 3rd Edition (0) | 2023.10.13 |
[도서 자료] 자바의 신 VOL.1, 3rd Edition (0) | 2023.10.13 |

● 지은이: 홍준혁
● 페이지: 412
● 판형: 188 * 257
● 도수: 2도
● 정가: 30,000원
● 발행일: 2024년 4월 12일
● ISBN: 979-11-93229-28-6 93000
[오탈자 사이트] [자료실] [강의교안 신청하기]
[강컴] [교보] [반디] [알라딘] [예스24] [인터파크]
_도서 내용
만들면서 리액트를 빠르게 배울 수 있는 책입니다. ‘쇼핑몰 서비스’를 만들어볼 주제로 택한 이유는 쇼핑몰의 CRUD(상품 등록, 조회, 수정, 삭제) 기능 구현을 통해 다른 주제로 쉽게 확장할 수 있기 때문입니다. 순수 리액트로만 쇼핑몰을 개발하며 서버는 다른 기능 없이 데이터만 주고받을 수 있게끔 최소한의 기능만 제공하고 있습니다. 이 책으로 프론트엔드 개발을 재밌고 빠르게 배울 수 있기를 바랍니다.
_대상 독자
1. 리액트 기본은 떼었는데, 다음 단계의 실습을 원하는 독자
2. 회사에서 다음 프로젝트에 리액트를 써야 하는데, 빠르게 기술 습득을 해야 하는 독자
_목차
지은이의 말
기획자의 말
일러두기
1장 쇼핑몰 서비스 완성본 미리보기
1.1 VSCode 설치하기
1.2 패키지 매니저 이해하기
1.3.1 패키지를 초기화하고 종속성 추가하기
1.3 Yarn 사용하기
1.3.2 패키지 업데이트하기
1.4.1 깃 설치
1.4 깃 이해하고 사용하기
1.4.2 깃 명령어
1.5 깃허브로 쇼핑몰 앱 접속하기
1.6 완성본 프로젝트 살펴보기
1.7 완성된 쇼핑몰 앱 둘러보기
2장 프로젝트 준비하기
2.1 간단한 리액트 프로젝트 만들기
2.2 모듈 분리해서 보기
2.3 Create-React-App 프로젝트 설정하기
2.4 API 서버 설정하기
2.5 클라이언트 사이드 렌더링
2.6 API 서버 테스트하기
[함께 해봐요 2-1] 기본적인 HTML 페이지 만들기
[함께 해봐요 2-2] React와 ReactDOM을 CDN으로 불러오는 HTML 파일
[함께 해봐요 2-3] 리액트 코드 작성하기
[함께 해봐요 2-4] 바벨로 변경한 전체 HTML 파일
[함께 해봐요 2-5] 루트 디렉터리에 App.js 파일 만들기
[함께 해봐요 2-6] App.js를 불러오는 index.html
[함께 해봐요 2-7] A.js와 B.js를 불러오는 index.html
[함께 해봐요 2-8] 모듈을 분리하기 위한 App.js 만들기
[함께 해봐요 2-9] 기본으로 제공되는 App.tsx 수정하기
[함께 해봐요 2-10] App 컴포넌트를 사용하기 위한 index.tsx 수정하기
[함께 해봐요 2-11] index.html 수정하기
3장 리액트는 어떻게 동작하는가
3.1 웹 서비스의 전반적인 흐름
3.2 컴포넌트를 알아보자(with JSX)
3.3 Props: 컴포넌트 간 데이터 전달을 위한 객체
3.4 리액트 앱의 렌더링 방식(with State)
3.5 훅 개념과 활용법
[함께 해봐요 3-1] 데이터 흐름을 파악하기 위한 리액트 App 컴포넌트
[함께 해봐요 3-2] 가상 DOM을 사용하는 이유를 알아보기 위해 App 컴포넌트 수정하기
4장 쇼핑몰 기본 구조 만들어보기
4.1 요구사항 살펴보기
4.2 상품 목록 렌더링하기
4.3 상품 추가하기
4.4 상품 목록 삭제하기
4.5 상품 목록 수정하기
4.6 React-Router-Dom 설정하기
4.7 상품 상세 페이지 나누기
4.8 Context API 설정하기
4.9 동기와 비동기 이해하기
4.10 API 서버에서 상품 목록 가져오기
4.11 상품 상세 데이터 가져오기
4.12 상품 수정과 삭제 요청하기
[함께 해봐요 4-1] interface 키워드로 ProdutType을 만들고 products 변수 선언하기
[함께 해봐요 4-2] products 변수의 초깃값으로 가짜 데이터 입력하기
[함께 해봐요 4-3] products 상태를 화면에 표시하기(오류 버전)
[함께 해봐요 4-4] products 상태를 화면에 표시하기(오류 수정 버전)
[함께 해봐요 4-5] products 상태를 화면에 표시하기(map 메서드 사용하기)
[함께 해봐요 4-6] products 상태를 화면에 표시하기(경고 문구 해결하기)
[함께 해봐요 4-7] 상품 목록을 렌더링하는 최종 App.js 코드
[함께 해봐요 4-8] 상품 추가하기를 위한 form 작성하기
[함께 해봐요 4-9] ‘상품 추가하기’를 위한 form 작성하기(수정 버전)
[함께 해봐요 4-10] 상태변경함수(useState)를 활용하여 데이터를 다시 선언하기
[함께 해봐요 4-11] 상품 데이터를 변경시키고 활용하기(onChange 속성)
[함께 해봐요 4-12] 상품 데이터를 변경시키고 활용하기(onChange 이벤트 핸들러 사용하기)
[함께 해봐요 4-13] 상품 데이터를 products state에 추가하기(타입 오류 버전)
[함께 해봐요 4-14] 상품 데이터를 products state에 추가하기(두 번째 상품 데이터 추가부터 오류 발생 버전)
[함께 해봐요 4-15] 상품 데이터를 products state에 추가하기(useRef 함수를 활용한 오류 수정 버전)
[함께 해봐요 4-16] 상품 추가하기 최종 소스
[함께 해봐요 4-17] 상품 렌더링 로직 수정하기(product를 분해하여 단일 속성값으로 접근할 수 있게 수정)
[함께 해봐요 4-18] [삭제하기] 버튼의 onClick 함수 작성하기
[함께 해봐요 4-19] [수정하기] 버튼 렌더링하기
[함께 해봐요 4-20] 컴포넌트를 분리하여 내부 상태를 선언 가능한 형태로 작성하기(ProductItem 컴포넌트 만들기)
[함께 해봐요 4-21] 컴포넌트를 분리한 후 기존 로직이 동작하지 않는 문제 수정하기(onDelete 함수로 행동 위임하기)
[함께 해봐요 4-22] isEditMode가 true일 때 조건부 Form 렌더링으로 수정하기
[함께 해봐요 4-23] 상품 수정 form에서 작성한 상품 정보를 객체로 전달하는 방식으로 수정하기
[함께 해봐요 4-24] 상품 정보 수정이 완료되도록 App 컴포넌트의 handleUpdate 함수 수정하기
[함께 해봐요 4-25] 상품 목록 수정하기 최종 코드
[함께 해봐요 4-26] index.tsx에서 BrowserRouter 컴포넌트로 App 컴포넌트 감싸주기
[함께 해봐요 4-27] HomePage.tsx를 만들고 App.tsx에서 소스 복사하기
[함께 해봐요 4-28] index.ts를 만들고 HomPage 컴포넌트 내보내기
[함께 해봐요 4-29] App.tsx 컴포넌트 수정하기
[함께 해봐요 4-30] 상품 상세 페이지 만들기(ProductPage.tsx)
[함께 해봐요 4-31] index.ts를 통해 내보내기
[함께 해봐요 4-32] App.tsx에 상세 페이지 추가하기
[함께 해봐요 4-33] path 속성을 알아보기 위해 상세 페이지 수정하기
[함께 해봐요 4-34] 데이터를 담을 수 있는 공간으로 Context 만들기(ProductContext.tsx)
[함께 해봐요 4-35] 하위 컴포넌트에 데이터 전송을 위한 Provider 정의하기
[함께 해봐요 4-36] 데이터 사용을 위해 Consumer를 선언하고, useContext 함수로 접근하기
[함께 해봐요 4-37] Context를 적용한 최종 코드
[함께 해봐요 4-38] 작성한 Context 사용하기(ProductPage.tsx 수정)
[함께 해봐요 4-39] 작성한 Context 사용해보기 2(index.tsx 수정)
[함께 해봐요 4-40] URL 매개변수 id 값을 받아 상품 정보를 보여주는 로직(ProductPage.tsx 수정)
[함께 해봐요 4-41] URL 매개변수 id 값을 받아 상품 정보를 보여주는 로직(undefined 시에 UX를 고려한 문자열 추가)
[함께 해봐요 4-42] 메인 페이지에서 상품 상세 페이지로 이동하기
[함께 해봐요 4-43] 상품을 새로 추가하고 해당 상품으로 이동할 때 아무런 결과 값이 나타나지 않는 현상 해결하기(타입 오류 발생)
[함께 해봐요 4-44] 상품을 새로 추가하고 해당 상품으로 이동할 때 아무런 결과 값이 나타나지 않는 현상 해결하기(타입 오류 수정)
[함께 해봐요 4-45] 메인 페이지의 product을 Context로 구현하기 1(HomePage.tsx 수정하기)
[함께 해봐요 4-46] 메인 페이지의 product을 Context로 구현하기 2(ProductPage.tsx 수정하기)
[함께 해봐요 4-47] fetch 함수로 상품 목록 데이터 가져오기(HomePage.tsx)
[함께 해봐요 4-48] 프록시 서버 설정하기(client/package.json 수정하기)
[함께 해봐요 4-49] 동기화 작업을 위한 fetch 함수 수정하기
[함께 해봐요 4-50] 필요 없게 된 기존의 Context 제거하기 1(index.ts에서 ProductProvider 제거하기)
[함께 해봐요 4-51] 필요 없게 된 기존의 컨텍스트 제거하기 2(Homepage.tsx에서 product 설정 코드 변경하기)
[함께 해봐요 4-52] 상품 상세 데이터 가져오기(ProductPage.tsx 수정하기)
[함께 해봐요 4-53] 상품 추가하기(Homepage.tsx의 handleCreate 함수 수정하기)
[함께 해봐요 4-54] 상품 삭제하기(Homepage.tsx의 handleDelete 함수 수정하기)
[함께 해봐요 4-55] 상품 수정하기(Homepage.tsx의 handleUpdate 함수 수정하기)
5장 쇼핑몰 설계를 어떻게 하면 좋을까(feat. 좋은 아키텍처란)
5.1 리액트 컴포넌트, 꼭 나눠야 할까
5.2 데이터를 기반으로 컴포넌트 분리하기
5.3 역할 중심으로 컴포넌트 분리하기
5.4 전체 구조는 어떻게 짤까
5.5 지금까지의 구조를 수정하자
[함께 살펴봐요 5-1] Cart에서 데이터를 분리하기 전의 코드(단순 예시 코드)
[함께 살펴봐요 5-2] 데이터 기반으로 컴포넌트 분리하기(단순 예시 코드)
[함께 살펴봐요 5-3] 역할 중심으로 컴포넌트 분리하기 1(단순 예시 코드)
[함께 살펴봐요 5-4] 역할 중심으로 컴포넌트 분리하기 2(단순 예시 코드)
[함께 살펴봐요 5-5] Cart 컴포넌트 구현(단순 예시 코드)
[함께 살펴봐요 5-6] CartList 컴포넌트 구현(단순 예시 코드)
[함께 살펴봐요 5-7] CarItem 컴포넌트 구현(단순 예시 코드)
[함께 살펴봐요 5-8] CartIncreaseButton 컴포넌트 구현(단순 예시 코드)
[함께 살펴봐요 5-9] CartDecreaseButton 컴포넌트 구현(단순 예시 코드)
[함께 살펴봐요 5-10] CartDeleteButton 컴포넌트 구현(단순 예시 코드)
[함께 살펴봐요 5-11] 분리하기 전 HomePage 코드
[함께 해봐요 5-1] HomePage에서 ProductList를 분리해서 구현하기
[함께 해봐요 5-2] 타입을 한 번에 모아서 관리하는 폴더를 만들고 불러오기(types 폴더와 index.ts)
[함께 해봐요 5-3] 타입 별칭들도 모듈처럼 지정하기(ProductItem이 정의되어 있지 않은 상태)
[함께 해봐요 5-4] ProductItem 컴포넌트 분리하기
[함께 해봐요 5-5] index.ts를 통해 내보내기
[함께 해봐요 5-6] ProductList 컴포넌트에서 ProductItem 불러오기
[함께 해봐요 5-7] 분리된 컴포넌트 기반으로 HomePage 수정하기
[함께 해봐요 5-8] ProductCreateForm 작성하기
[함께 해봐요 5-9] ProductCreateForm 내보내기
[함께 해봐요 5-10] ProductCreatePage 작성하기
[함께 해봐요 5-11] index.ts를 통해 내보내기
[함께 해봐요 5-12] Page 컴포넌트를 Route에 추가하기(App.tsx 수정)
6장 MUI UI 컴포넌트를 활용하여 쇼핑몰 개선하기
6.1 MUI 도입하기
6.2 CSS 정규화
6.3 MUI 그리드
6.4 레이아웃 구현하기
6.5 로딩 기능 추가하기
6.6 상품 생성 컴포넌트를 MUI로 마이그레이션하기
6.7 API를 이용한 섬네일 업로드 구현하기
6.8 섬네일이 나오지 않는 문제를 수정하기
6.9 상품 목록을 MUI로 마이그레이션하기
6.10 상품 아이템을 MUI로 마이그레이션하기
6.11 상품 상세보기 페이지를 MUI로 마이그레이션하기
6.12 구매 페이지 구현하기
6.13 상품 구매 모달 구현하기
6.14 상품 생성 모달 구현하기
6.15 장바구니 페이지 구현하기
6.16 404 페이지 구현하기
[함께 해봐요 6-1] MUI 테스트 예제 준비
[함께 해봐요 6-2] MUI 테스트: 스타일이 입혀진 버튼
[함께 해봐요 6-3] 옵션을 활용하여 다양한 버튼의 모양으로 렌더링 해보기
[함께 해봐요 6-4] MUI를 전역 공간에서 실행하기
[함께 해봐요 6-5] 그리드 컴포넌트 활용 예제
[함께 해봐요 6-6] 웹의 기초적인 구조를 그리드로 만들어보는 예제
[함께 해봐요 6-7] 테스트용으로 변경했던 앱 컴포넌트를 원래대로 되돌리기
[함께 해봐요 6-8] 레이아웃 작성하기(Layout.tsx)
[함께 해봐요 6-9] Layout 컴포넌트 내보내기(index.ts)
[함께 해봐요 6-10] Layout 컴포넌트를 App 컴퍼넌트 상단에 모두 묶기
[함께 해봐요 6-11] 각 버튼에 이벤트 핸들러를 연결하여 페이지를 이동하는 로직 추가하기
[함께 해봐요 6-12] HomePage에서 임시로 해당 컴포넌트 불러오기
[함께 해봐요 6-13] HomePage 컴포넌트 원상복구
[함께 해봐요 6-14] 로딩이 true, false에 따라 달라지는 렌더링 구현하기
[함께 해봐요 6-15] CreateIcon을 불러와서 Layout에 [추가하기] 버튼 바꾸기
[함께 해봐요 6-16] 쇼핑몰다운 UI로 수정하기(ProductCreateForm.tsx)
[함께 해봐요 6-17] 섬네일 업로더 컴포넌트 구현하기 1(ThumbnailUploader.tsx)
[함께 해봐요 6-18] 섬네일 업로더 컴포넌트 구현하기 2(ThumbnailUploader.tsx)
[함께 해봐요 6-19] ThumbnailUploader 컴포넌트 내보내기
[함께 해봐요 6-20] ProductCreateForm 수정하기
[함께 해봐요 6-21] ThumbnailUploader 컴포넌트에서 input에 hidden 속성 부여하기
[함께 해봐요 6-22] 섬네일 업로더 컴포넌트 구현하기 3(ThumbnailUploader.tsx)
[함께 해봐요 6-23] 파일 선택 후 섬네일을 화면에서 임시로 렌더링하는 로직(ThumbnailUploader.tsx)
[함께 해봐요 6-24] 2단계 섬네일 요청 구현하기(ProductCreateForm.tsx)
[함께 해봐요 6-25] thumbnail 속성 추가에 따른 ProductType 업데이트
[함께 해봐요 6-26] thumbnail 속성 추가에 따른 ProductItem 업데이트
[함께 해봐요 6-27] 상품 목록 디자인 1: Grid 컴포넌트로 ProductItem 묶어주기(ProductList.tsx)
[함께 해봐요 6-28] 상품 목록 디자인 2: Grid 컴포넌트로 ProductItem 묶어주기(ProductItem.tsx)
[함께 해봐요 6-29] 상품 아이템에 스타일 지정하기(ProductItem.tsx)
[함께 해봐요 6-30] 오류 제거를 위한 ProductList 컴포넌트 수정하기
[함께 해봐요 6-31] App.tsx에서 상품 상세 페이지 주소 수정하기
[함께 해봐요 6-32] ProductPage UI 수정하기
[함께 해봐요 6-33] 구매 페이지 구현하기(PurchasePage.tsx)
[함께 해봐요 6-34] PurchasePage 컴포넌트 내보내기
[함께 해봐요 6-35] PurchasePage를 Router와 연결하기
[함께 해봐요 6-36] form 코드를 별도 컴포넌트로 분리하기(PurchaseForm.tsx)
[함께 해봐요 6-37] PurchaseForm 컴포넌트 내보내기
[함께 해봐요 6-38] PurchasePage 수정하기
[함께 해봐요 6-39] createProductId와 isModalOpen 상태를 함께 구현한 코드
[함께 해봐요 6-40] handlePushProductPage에 대한 구현 코드
[함께 해봐요 6-41] 장바구니 페이지 만들기(CartPage.tsx)
[함께 해봐요 6-42] 장바구니 페이지 내보내기
[함께 해봐요 6-43] 장바구니 페이지 꾸미기
[함께 해봐요 6-44] 장바구니 페이지를 Router에 연결하기
[함께 해봐요 6-45] [장바구니 담기] 버튼을 클릭하면 쿠키에 상품값을 추가하는 로직 작성하기
[함께 해봐요 6-46] MUI를 이용하여 장바구니 페이지 스타일 꾸미기(CartPage.tsx)
[함께 해봐요 6-47] 장바구니 아이템 컴포넌트 코드를 작성하고 장바구니 페이지 완성하기
[함께 해봐요 6-48] CartItem 컴포넌트 내보내기
[함께 해봐요 6-49] 장바구니 페이지(CartPage)의 최종 코드
[함께 해봐요 6-50] 404 페이지 만들기(NotFoundPage.tsx)
[함께 해봐요 6-51] 404 페이지 만들기 컴포넌트 내보내기
[함께 해봐요 6-52] 404 페이지를 와일드카드에 연결하기(App.tsx)
[함께 살펴봐요 6-1] 기존에 구현한 ProductPage
[함께 살펴봐요 6-2] <Route> 컴포넌트 동작 예시
7장 코드 리뷰: 개선점 찾기와 더 나은 서비스 만들기
7.1 장바구니 관련 쿠키 정보를 쉽게 관리하기 위한 훅 만들기
7.2 ID 기반으로 변경해서 쿠키 용량 문제 해결하기
7.3 장바구니가 중복되는 현상 막기
7.4 HTTP 요청 부분을 Axios로 변경하기
7.5 useAsync 함수 만들기
7.6 concurrently를 사용하여 클라이언트와 서버를 동시에 실행하기
[함께 해봐요 7-1] 쿠키를 재활용하는 훅 만들기(useCart.ts)
[함께 해봐요 7-2] 만든 훅 내보내기
[함께 해봐요 7-3] 훅을 활용하기 위해 상품 페이지 수정하기(ProductPage.tsx)
[함께 해봐요 7-4] 훅을 활용하기 위해 장바구니 페이지 수정하기(CartPage.ts)
[생각 해봐요 7-1] useCart 훅에서 ID 기반 상품 로직으로 저장 방식을 수정하기
[함께 해봐요 7-5] productIds 변숫값 지정하기
[함께 해봐요 7-6] 장바구니 정보를 가져오기 위한 코드 작성하기
[함께 해봐요 7-7] useCart 훅을 다른 코드에 반영하기(ProductPage.tsx)
[함께 해봐요 7-8] useCart 훅을 다른 코드에 반영하기(CartPage.tsx)
[함께 해봐요 7-9] 장바구니에서 중복되는 현상 막기 코드(useCart 수정 코드)
[함께 해봐요 7-10] useCart를 사용하는 컴포넌트 수정하기(CartPage.tsx)
[함께 해봐요 7-11] API를 한곳에 묶어서 관리하기
[함께 해봐요 7-12] API를 한곳에 묶어서 관리하기(Axios를 활용한 버전)
[함께 해봐요 7-13] API를 한 곳에 묶어서 관리하기(Axios를 활용한 버전) - ProductPage 수정하기
[함께 해봐요 7-14] API를 한 곳에 묶어서 관리하기 (Axios를 활용한 버전) - PurchasePage 수정하기
[함께 해봐요 7-15] API를 한 곳에 묶어서 관리하기(Axios를 활용한 버전) - ProductList 수정하기
[함께 해봐요 7-16] API를 한 곳에 묶어서 관리하기(Axios를 활용한 버전) - ProductCreateForm 수정하기
[함께 해봐요 7-17] API를 한 곳에 묶어서 관리하기(Axios를 활용한 버전) - useCart 함수 수정하기
[함께 해봐요 7-18] useAsync 훅 만들기
[함께 해봐요 7-19] 기존의 레거시 코드를 useAsync로 적용하기(ProductList.tsx 수정)
[함께 해봐요 7-20] 상품 데이터를 가져오는 부분에 useAsync 도입할 때 수정/삭제 시 문제 해결하기
[함께 해봐요 7-21] 상품 페이지에 useAsync 적용하기
[함께 해봐요 7-22] 섬네일 업로드를 위해 useAsync 수정하기
[함께 해봐요 7-23] ProductCreateForm 수정하기
[함께 해봐요 7-24] PurchasePage 수정하기
[함께 살펴봐요 7-1] 장바구니에서 중복되는 현상 막기 코드(useCart의 기존 코드)
[함께 살펴봐요 7-2] 확장성을 위한 action 객체 사용
[함께 살펴봐요 7-3] useAsync 훅 살펴보기
에필로그
찾아보기
_주요 내용
만들어 보고!
수정하고!
응용하여 확장하기!
가장 빠른 코딩 학습 방법입니다.
당장 몇 주 후에 리액트 프로젝트를 시작해야 한다면, 클론 코딩을 해보는 게 가장 빠른 학습 방법입니다. 이 책은 클론 코딩의 주제로 쇼핑몰 서비스를 제시합니다. 쇼핑몰의 CRUD 기능이야말로 거의 모든 서비스에 응용할 수 있는 가장 보편적이기 때문입니다.
또한 리액트로만 클라이언트를 구현하기 때문에 웬만한 리액트 기능은 모두 학습해볼 수 있는 장점이 있습니다. 완성된 쇼핑몰을 먼저 실행해봄으로써 학습 동기 부여를 해주고, 이후에 단계별로 간단한 텍스트 표현부터 차근차근 만들어 가기 때문에 초보자도 쉽게 따라하며 배울 수 있습니다.
[프로젝트 개발 환경]
1. 운영체제: Mac OS, Windows10
2. 통합개발환경(IDE): VSCode
3. 사용 언어: 타입스크립트
4. 클라이언트 프레임워크: 리액트
5. 서버: 깃허브에서 API 서버 코드 기본 제공 (설정 방법은 책에서 자세히 설명합니다)
6. UI: MUI 컴포넌트
7. 패키지 매니저: Yarn
8. 버전 관리: 깃
9. Node 버전 : 18.17.0
[저자 에필로그 중에서]
이 책에서는 작은 쇼핑몰 서비스를 예로 들었지만 결국 여러분이 만들 거의 모든 서비스는 책에서 제시한 쇼핑몰의 CRUD 구조와 유사합니다. 거기에서 얼마나 고도화하였는지의 차이지 큰 틀은 바뀌지 않습니다. 하지만 클론 코딩은 여러분의 실력을 크게 늘려주지는 않습니다. 따라하며 쓴 코드를 이해하고 여러분만의 독자적인 프로젝트를 개발하여 여러분의 것으로 만들어 보는 데까지 꼭 나아가야 진짜 실력있는 개발자가 될 수 있다는 걸 명심하길 바랍니다.
[베타테스터겸 기획자 소감글 중에서]
변경사항을 저장하지 않고 실행하다가 왜 안 되지? 하며 하루를 꼬박 날려버린 적도 있었고, 리액트 앱을 껐다가 다시 실행해야 되는데, 책에 표시되지 않아 한참을 헤맨 후에 책 내용에 포함하게 되는 경우도 있었습니다. 이렇게 하다 보니 사소한 소스 오타는 금방 찾아낼 수 있게 된 것 같습니다. 그리고 오류가 났을 때 뒤로 갈수록 오류 메시지가 비슷한 경우가 많아 쉽게 해결해서 찾았던 것 같습니다. 사실, 기획자가 잘못한 경우가 훨씬 많았지만요.
개발 능력이 없은 기획자도 처음부터 끝까지 따라해보며 책을 학습했는데, 여러분은 저보다 충분히 더 잘 해낼 수 있을 겁니다.
예제 소스는 깃허브에서 별도로 제공됩니다.
https://github.com/Hong-JunHyeok/shopping_app_example
카페에서 저자와 소통하며 공부하세요
https://cafe.naver.com/codefirst
_저자 소개
안녕하세요 웹 프론트엔드 개발자 홍준혁입니다.
예전부터 코딩이라는 기술로 나만의 상상을 구현하는 것에 관심이 많았습니다. 그 때문인지 지금은 웹 프론트엔드 개발자로 일하고 있습니다.
현재는 웹에만 종속되는 것보다 다양한 플랫폼으로 구현하는 것(앱, 윈도우 등)에 관심이 있으며 주력으로 하고 있는 언어는 JavaScript입니다.
개발을 하면서 어려움이 있는 주변 사람들에게 알려주는 것을 즐기는 편이고 내가 알려준 것을 기반으로 좋은 프로젝트가 나왔을 때 성취감을 느낍니다.
이번 기회에 집필한 책에서도 그러한 효과가 있으면 저자로서 너무 행복할 것입니다. 책에서 다 담지 못한 정보들이 궁금한 경우나 필자와 얘기해보고 싶은 주제가 있다면 언제는 백견불여일타 독자 카페를 이용해주시기 바랍니다.
_상세 이미지

_끝
'신간소개' 카테고리의 다른 글
[신간소개] 챗대리의 따라하면 바로 되는 AI 마케팅 자동화: 클로드, 피그마, make.com (0) | 2025.02.27 |
---|---|
[신간소개] 생성형 AI를 활용한 게임 개발: ChatGPT, Tensor.Art, Udio (1) | 2024.12.03 |
[신간안내] 시작하는 개발자들을 위한 기술 여행 가이드: 개발 지식을 높은 곳에서 한눈에 조망할 수 있는 책 (0) | 2023.11.06 |
[신간 안내] 자바의 신 VOL.2 주요 API 응용편, 3rd Edition (0) | 2023.10.13 |
[신간 안내] 자바의 신 VOL.1 기초 문법편, 3rd Edition (0) | 2023.10.13 |
'오탈자 정보' 카테고리의 다른 글
[오탈자 정보] 챗대리의 따라하면 바로 되는 AI 마케팅 자동화: 클로드, 피그마, make.com (0) | 2025.02.27 |
---|---|
[오탈자 정보] 생성형 AI를 활용한 게임 개발: ChatGPT, Tensor.Art, Udio (0) | 2024.12.03 |
[오탈자 정보] 시작하는 개발자들을 위한 기술 여행 가이드: 개발 지식을 높은 곳에서 한눈에 조망할 수 있는 책 (3) | 2023.11.06 |
[오탈자 정보] 자바의 신 VOL.2, 3rd Edition (4) | 2023.10.13 |
[오탈자 정보] 자바의 신 VOL.1, 3rd Edition (4) | 2023.10.13 |