100가지 프롬프트로 배우는 AI 활용법: 입문편
소셜아카이브
생성형 AI 시대, 누구나 사용할 수는 있지만 잘 쓰는 사람은 다릅니다. GPT, Gemini, Claude를 처음 접하는 분들을 위해 실제로 입력하며 배우는 100가지 실습 프롬프트로 AI의 세계를 완전히 이해하게 됩니다.
Beginner
인공지능(AI), ChatGPT, AI 활용 (AX)
NEW
이야기로 배우는 JavaScript
HTML과 CSS로 아름답게 완성한 카페 홈페이지에 JavaScript로 인터랙티브한 기능을 추가하는 실전 프로젝트 강의입니다. 버튼 클릭, 메뉴 필터링, 예약 폼, 다크모드 토글부터 API 연동까지 JavaScript의 모든 기초를 민지와 코드 선생의 스토리를 따라가며 자연스럽게 배울 수 있습니다. 5시간의 학습으로 초보자도 동적인 웹 애플리케이션을 만들 수 있습니다.
이런 걸 배울 수 있어요
JavaScript의 모든 기본 문법을 실전 프로젝트를 통해 체득할 수 있습니다
DOM 조작으로 웹 페이지를 동적으로 제어할 수 있습니다
이벤트 처리로 사용자 인터랙션을 구현할 수 있습니다
실무에서 자주 쓰이는 JavaScript 패턴을 배울 수 있습니다
API를 연동해 실시간 데이터를 표시할 수 있습니다
이야기로 배우는 JavaScript - 민지의 카페 홈페이지에 생명 불어넣기
이 강의는 지루한 암기 대신, 살아 숨 쉬는 '민지의 카페'를 직접 만들면서 자바스크립트(javascript)를 마스터할 수 있게 해줍니다.
웹사이트를 클릭하고, 움직이고, 반응하게 만드는 '생명력'을 불어넣는 실전 경험을 통해, 취업 포트폴리오로 바로 쓸 수 있는 완성도 높은 프로젝트를 확보할 수 있습니다 .
html/css 기초만 있다면, 이 스토리텔링 기반의 과정이 당신을 '웹사이트 빌더'에서 '웹 개발자'로 확실히 업그레이드시켜 줄 것입니다 .
1. 지루한 '문법 암기' 대신 '카페 만들기'
대부분의 일반 자바스크립트 강의는 변수, 함수, 반복문 같은 문법을 따로따로 달달 외우게 해서 재미가 없고, 실전에서 어떻게 써야 할지 막막하게 만듭니다 .
마치 건축에 필요한 톱, 망치, 못의 이름과 정의만 배우고, 정작 집을 지어보지 않는 것과 같아요.
이 강의는 '민지의 카페 홈페이지를 완성하는' 하나의 큰 스토리를 따라가기 때문에, 문법을 배우자마자 바로 실습에 적용하고 결과를 눈으로 확인할 수 있습니다 .
이 방식을 통해 여러분은 "이걸 어디 쓰지?"라는 고민 대신, 바로 쓸 수 있는 실용적인 기능을 만드는 경험을 하게 됩니다 .
2. 살아있는 웹사이트란 무엇일까?
웹사이트가 '살아있다'는 것은 사용자(클라이언트)의 행동에 즉각적으로 반응하고 움직이는 능력을 말합니다 .
HTML과 CSS가 웹사이트의 뼈대와 외형(집의 구조와 인테리어)을 만든다면, 자바스크립트는 그 웹사이트에 생명을 불어넣는 역할(전기, 수도, 움직이는 문)을 합니다.
자바스크립트를 배우면 '클릭하고, 움직이고, 반응하는' 동적인 웹사이트를 만들 수 있게 됩니다 .
예를 들어, 버튼을 눌렀을 때 메뉴판이 바뀌거나, 예약 폼에 잘못된 정보를 입력하면 경고 메시지가 뜨는 모든 기능이 자바스크립트의 영역입니다 .
3. 5주 동안 배우는 핵심 로드맵: DOM 조작이 핵심입니다
이 강의는 총 5개 섹션, 15개 에피소드로 구성되어 있으며, 총 학습 시간은 약 5.3시간(320분)으로 짧고 집중적입니다 .
처음 2주(Section 1, 2)는 프로그래밍의 기초 문법을 다지며 자바스크립트 언어 자체를 이해합니다 .
진짜 웹사이트에 생명을 불어넣는 것은 DOM 조작(Document Object Model Manipulation) 섹션부터 시작됩니다 (Week 3, Section 3) .
DOM 조작은 웹페이지의 '요소 찾기', '스타일 변경하기', '요소 추가/삭제하기'를 배우는 과정으로, 웹페이지의 특정 부분을 마음대로 건드릴 수 있는 능력을 의미합니다.
graph TD
A["Section 1 & 2: 프로그래밍 기초 (Week 1-2)"] --> B["Section 3: DOM 조작 (Week 3)"];
B --> C["Section 4: 인터랙션 (Week 4)"];
C --> D["Section 5: 실전 기능 (Week 5)"];
style B fill:#f9f,stroke:#333,stroke-width:2px4. 실전에서 바로 통하는, '코드 브루 카페' 핵심 기능 5가지
강의를 완주하면 취업 포트폴리오에 자랑스럽게 넣을 수 있는 '코드 브루 카페 홈페이지'를 완성하게 됩니다 .
만드는 기능들은 단순한 예제가 아니라, 실제 운영되는 웹사이트에 필요한 실용적인 기능들입니다.
여러분은 메뉴 필터링 (커피만 보기, 디저트만 보기), 예약 폼 검증 (전화번호가 맞는지 체크), 다크모드 토글 등을 직접 구현해봅니다 .
특히 실시간 날씨 표시 기능은 외부 API(다른 서버의 정보)를 가져와 연동하는 고급 기술을 배우는 경험을 제공합니다 .
5. 완벽한 학습 사이클과 준비물 체크리스트
학습 효율을 극대화하기 위해 각 에피소드마다 3단계 미션이 주어집니다: 기초, 심화, 보너스 미션입니다 .
기초 미션은 강의 내용을 복습하고, 심화 미션은 배운 내용을 창의적으로 응용하며, 보너스 미션은 다음 내용을 살짝 예습해보는 구조입니다.
이 과정을 시작하기 위해 프로그래밍 경험은 필요 없지만, HTML/CSS 기초 지식은 필수적으로 알고 있어야 합니다 .
마치 그림을 그릴 때 캔버스(HTML)와 물감(CSS)은 준비되어 있어야, 붓놀림(JavaScript)을 배울 수 있는 것과 같아요.
이런 분들께
추천드려요
학습 대상은
누구일까요?
HTML/CSS로 웹사이트를 만들었지만 정적이라 아쉬운 분
버튼을 클릭하면 무언가 일어나게 만들고 싶은 분
사용자와 상호작용하는 웹사이트를 만들고 싶은 분
프로그래밍이 처음이지만 웹 개발로 시작하고 싶은 분
카페, 레스토랑 홈페이지에 예약 기능, 메뉴 필터 등을 추가하고 싶은 사장님
선수 지식,
필요할까요?
HTML/CSS 기초 지식이 필요합니다! HTML 태그의 기본 구조와 CSS 스타일링을 알고 있어야 해요. "이야기로 배우는 HTML"과 "이야기로 배우는 CSS" 강의를 먼저 수강하거나, 최소한 웹 페이지의 구조와 스타일링 방법을 알고 있으면 충분합니다.
111
명
수강생
9
개
수강평
3
개
답변
4.0
점
강의 평점
5
개
강의
안녕하세요. 소셜아카이브 입니다.
소셜 아카이브에서는 '장기 보존의 가치를 지닌 고품질 자료들의 보관소'를 운영하며, 여러분의 업무 방식을 혁신할 세 가지 역할을 수행합니다.
[소프트웨어 엔지니어]카카오 엔터프라이즈에서 백엔드 API를 개발하며 업무 시스템의 근본적인 효율화를 고민했습니다. 이 경험이 AI 자동화 프로세스를 가장 견고하게 설계하는 기반이 됩니다.
[AI 파일럿] 저는 GPT와 AI 툴을 활용하여 실무에서 가장 빠르고 정확한 성과를 도출하는 선행 사용자입니다. 검증된 노하우만을 선별하여 여러분에게 최적의 비행 경로를 제시합니다.
[전문 강사]KB국민은행 IT 아카데미와 구름에듀의 주강사로서, 복잡한 기술을 실무에 바로 적용 가능한 쉬운 지식으로 풀어내는 전달력을 갖추었습니다.
이 강의는 세 가지 페르소나의 최고 역량이 집약된 고품질의 업무 혁신 자료입니다. 저와 함께 AI를 단순한 도구가 아닌, 미래의 핵심 자산으로 만들어 갑시다.
커리큘럼
전체
15개 ∙ (2시간 49분)
해당 강의에서 제공:
수업자료
강의 게시일:
마지막 업데이트일:
수강평
아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!
얼리버드 할인 중
₩13,860
30%
₩19,800
소셜아카이브님의 다른 강의
지식공유자님의 다른 강의를 만나보세요!
비슷한 강의
같은 분야의 다른 강의를 만나보세요!
![[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS CoreCourse Thumbnail](https://cdn.inflearn.com/public/courses/331985/cover/f0501069-2139-4112-aafa-a9b3a2932860/331985-eng.png?f=avif&w=420)
