1/1-1.구글 폼 신청 시 이메일 자동 응답 시스템 구축
- 실습 경로/파일: Make/Zapier/Solapi/Sheets
2.스프레드시트에서 배송 메시지 보내기
- 실습 경로/파일: Sheets/Slack/Apps script
2-1.구글 스프레드시트로 MMS 발신 시스템 만들기
- 실습 경로/파일: Sheets/Apps script/Solapi
3.스프레드시트에서 수능 성적표 생성하기
- 실습 경로/파일: Sheets/AppsScript/Docs/Slack
4.스프레드시트에서 새내기 시간표 생성하기
5.뉴스 요약 자동화
- 실습 경로/파일: 구글 알리미/Zapier/Sheets/ChatGPT/Slack
6.네이버 카페 API를 활용한 스프레드시트 자동 게시글 업로드
- 실습 경로/파일: Sheets/Naver Cafe/ChatGPT/네이버 개발자 센터/Apps Script/
네이버 카페 링크: https://cafe.naver.com/identihee?iframe_url_utf8=%2FArticleRead.nhn%253Fclubid%3D31665851%2526articleid%3D6%2526referrerAllArticles%3Dtrue
8.Google Forms API와 Apps Script를 활용한 웹 데이터 수집 자동화
- 실습 경로/파일: Google Cloud console/Apps Script
(html 화면은 google cloud console api key, version 만료로 실습 당시에는 정상 작동 되었으나, 현재 접속 불가)
8.Google Sheets API와 Apps Script를 활용한 웹 고객 리드 데이터 수집 자동화
- 실습 경로/파일: Google Cloud console/Apps Script
9.AI를 활용한 웹사이트 제작(튜토리얼 A~C)
A
배포된 페이지: https://identihee.github.io/my-profile/
B
vercel 배포: https://my-landing-page-three-rouge.vercel.app/
C
① 정적 웹페이지 vs 동적 웹 애플리케이션
튜토리얼 B (정적/단순 폼): 완성된 화면을 보여주고 정보를 수집하는 랜딩페이지. (HTML/CSS 중심)
튜토리얼 C (동적 웹앱): 사용자가 화면에서 글을 쓰고, 지우고, 체크표시를 하면 즉각적으로 화면이 변하는 진짜 '프로그램'. 이를 위해 React라는 최신 기술(컴포넌트 기반 UI 라이브러리)을 사용한다.
② AI 코딩 어시스턴트의 차이 (Copilot vs Claude Code)
GitHub Copilot: 에디터(VS Code) 안에서 코드를 추천해주면 사람이 직접 복사/붙여넣기를 해야 하는 '조수' 역할.
Claude Code: 터미널(검은 화면)에서 프로젝트 전체 구조를 파악하고, 사람의 명령을 받으면 스스로 파일을 만들고 코드를 수정하는 '수석 개발자' 역할. (비용이 발생하는 API 과금 방식)
③ 데이터 저장과 외부 연동
로컬 스토리지(Local Storage): 서버나 DB 없이도, 사용자의 웹 브라우저 자체에 데이터를 영구적으로 저장하여 새로고침해도 데이터가 날아가지 않게 하는 기술.
외부 API (Open-Meteo): 날씨, 지도 등 내가 갖지 못한 데이터를 다른 회사의 서버에서 실시간으로 빌려와 내 웹사이트에 띄워주는 기술.
🔄 3. 전체 작업 흐름 (Workflow)
AI 에이전트 세팅: 터미널에 npm install -g @anthropic-ai/claude-code로 Claude Code를 설치하고 인증(로그인) 진행.
React 프로젝트 초기화: Claude Code에게 "Vite를 사용해 React 프로젝트를 만들어줘"라고 지시하여 뼈대 생성.
핵심 기능(To-Do) 구현: 할 일 추가, 목록 표시, 완료 체크, 삭제 기능을 갖춘 앱을 App.jsx와 App.css에 구축하도록 AI에게 지시.
로컬 스토리지 연동: 페이지를 새로고침해도 할 일 목록이 유지되도록 브라우저 저장소 기능 추가 요청.
날씨 API 연동: 앱 상단에 Open-Meteo API를 호출하여 현재 서울의 날씨와 기온을 띄우는 Weather.jsx 컴포넌트 추가.
인터넷 배포 (Vercel): 코드를 Git으로 묶어 GitHub에 Push한 뒤, Vercel을 통해 전 세계에 배포.
1/1-1.구글 폼 신청 시 이메일 자동 응답 시스템 구축
2.스프레드시트에서 배송 메시지 보내기
2-1.구글 스프레드시트로 MMS 발신 시스템 만들기
3.스프레드시트에서 수능 성적표 생성하기
4.스프레드시트에서 새내기 시간표 생성하기
5.뉴스 요약 자동화
6.네이버 카페 API를 활용한 스프레드시트 자동 게시글 업로드
네이버 카페 링크: https://cafe.naver.com/identihee?iframe_url_utf8=%2FArticleRead.nhn%253Fclubid%3D31665851%2526articleid%3D6%2526referrerAllArticles%3Dtrue
8.Google Forms API와 Apps Script를 활용한 웹 데이터 수집 자동화
(html 화면은 google cloud console api key, version 만료로 실습 당시에는 정상 작동 되었으나, 현재 접속 불가)
8.Google Sheets API와 Apps Script를 활용한 웹 고객 리드 데이터 수집 자동화
9.AI를 활용한 웹사이트 제작(튜토리얼 A~C)
A
배포된 페이지: https://identihee.github.io/my-profile/
B
vercel 배포: https://my-landing-page-three-rouge.vercel.app/
C
① 정적 웹페이지 vs 동적 웹 애플리케이션
튜토리얼 B (정적/단순 폼): 완성된 화면을 보여주고 정보를 수집하는 랜딩페이지. (HTML/CSS 중심)
튜토리얼 C (동적 웹앱): 사용자가 화면에서 글을 쓰고, 지우고, 체크표시를 하면 즉각적으로 화면이 변하는 진짜 '프로그램'. 이를 위해 React라는 최신 기술(컴포넌트 기반 UI 라이브러리)을 사용한다.
② AI 코딩 어시스턴트의 차이 (Copilot vs Claude Code)
GitHub Copilot: 에디터(VS Code) 안에서 코드를 추천해주면 사람이 직접 복사/붙여넣기를 해야 하는 '조수' 역할.
Claude Code: 터미널(검은 화면)에서 프로젝트 전체 구조를 파악하고, 사람의 명령을 받으면 스스로 파일을 만들고 코드를 수정하는 '수석 개발자' 역할. (비용이 발생하는 API 과금 방식)
③ 데이터 저장과 외부 연동
로컬 스토리지(Local Storage): 서버나 DB 없이도, 사용자의 웹 브라우저 자체에 데이터를 영구적으로 저장하여 새로고침해도 데이터가 날아가지 않게 하는 기술.
외부 API (Open-Meteo): 날씨, 지도 등 내가 갖지 못한 데이터를 다른 회사의 서버에서 실시간으로 빌려와 내 웹사이트에 띄워주는 기술.
🔄 3. 전체 작업 흐름 (Workflow)
AI 에이전트 세팅: 터미널에
npm install -g @anthropic-ai/claude-code로 Claude Code를 설치하고 인증(로그인) 진행.React 프로젝트 초기화: Claude Code에게 "Vite를 사용해 React 프로젝트를 만들어줘"라고 지시하여 뼈대 생성.
핵심 기능(To-Do) 구현: 할 일 추가, 목록 표시, 완료 체크, 삭제 기능을 갖춘 앱을
App.jsx와App.css에 구축하도록 AI에게 지시.로컬 스토리지 연동: 페이지를 새로고침해도 할 일 목록이 유지되도록 브라우저 저장소 기능 추가 요청.
날씨 API 연동: 앱 상단에 Open-Meteo API를 호출하여 현재 서울의 날씨와 기온을 띄우는
Weather.jsx컴포넌트 추가.인터넷 배포 (Vercel): 코드를 Git으로 묶어 GitHub에 Push한 뒤, Vercel을 통해 전 세계에 배포.