연수 흐름에 따른 준비 상황 체크

문자 공지 내용
[Web발신] 안녕하세요~ 새해 복 많이 받으세요. 전체 카톡방에는 몇차례 공지드렸습니다만, 내일 실시하는 귀한 연수에, 아직 자리가 남아 있어 다음과 같이 아주 귀한 연수 안내해드립니다.
일시: 2025.1.23(목) 오후 1시-4시
장소: 미래산업과학고등학교 미래상상실(서울시 노원구 소재)
주제: 교사 개발자로 거듭나다 - 직접 만든 앱으로 여는 교실 혁명
강사: 김준오 선생님(영신여고, AIEDAP 수도권역 인공지능 마스터 교원, 구글 제미나이 인공지능 교사 트레이너, 개발자, 인공지능 커뮤니케이터, 공식 한국 플러터 플로우 개발자 모임 부운영자)
신청(인원): https://forms.gle/CHLUh3jF3QR4svoJ7 (선착순 20명)
기타: (1)유료 강의. 회비 1만원(다과 등 실비) *입금 계좌: 3010309334391 농협 예금주. 손윤하 (2) 강의 형식: 오프라인 강의
관심있는 분들의 많은 참여 바랍니다.
AI융합교육연구회 드림

체크 리스트 및 연수에 필요한 프로그램

목차

Intro (필수)

개인 노트북 챙기기(현장에서 노트북 대여 불가)
개인 구글 계정 가입
개인 구글 계정 로그인 유무 확인
VS Code 다운로드 및 설치
구글 AI Studio 접속 유무 체크
딥시크 가입

Body(선택)

구글 제미나이 API Key 만들기(무료)
*구글 제미나이 API Key를 기본으로 해서 생성형 인공지능과 프로그래밍 협업을 진행 예정입니다.
*본인이 ChatGPT API Key, Claude API Key, DeepSeek API Key를 유료로 별도로 발급 받아서 오시면 개발하는 프로그램 결과물이 더 훌륭해집니다.
OpenRouter API Key 만들기(무료)
Mistral API Key 만들기(무료)

Outro(선택)

VS Code를 설치하고 실행을 하셨다면 확장 프로그램 중에 Roo Code 설치
Google Project IDX 소개

작품 전시관

크롬 확장프로그램

FancyGPT - Savy and share beautiful ChatGPT snippets as images, PDFs…

Reference

Zed AI - New AI IDE

PRD 작성에 필요한 기본 프롬프트

Loading PDF…

DeepSeek 프롬프트 치트 시트

n8n 자동화 예시

Freely available programming books

Building a Chrome Extension using FlutterFlow

[Theia] AI IDE

[Langflow] Building AI Agent

[국산] AI 웹문서 제작 도구

How AI will understand the real world

무료 설문 제작 도구 - 왈라

Run LLM locally on your computer

ChatGPT Canvas에서 크롬 확장 프로그램에 필요한 아이콘 만들기

플러터로 크롬 확장 프로그램 만들기 - 예시

무료 오픈 소스 AI 비서

Playwright 테스트 작성 가이드

내용이 좋아 “테스트 코드 직접 작성하지 마세요 | Cursor + Playwright” 의 영상 요약 노트를 공유합니다!
흥미로운 내용 3가지 :
AI 주도 개발에서는 코드 베이스가 커질수록 오류 발생 확률이 높아지며, 이를 해결하기 위해 테스트 코드 작성이 필요하다.
Playwright 프레임워크를 활용하면 E2E 테스트를 효율적으로 자동화할 수 있어, 서비스의 안정성을 높이고 버그 수정을 용이하게 한다.
AI와 테스트 자동화를 통해 개발 과정에서의 진입 장벽을 낮추고, 반복적인 오류를 줄여 개발 속도를 개선할 수 있다.

이미지 생성 도구

손문탁 박사님의 프롬프트

Manifest 단어의 어원

manifest는 라틴어 'manifestus'에서 시작되었어요[1]. 이 단어는 두 부분으로 나눌 수 있는데:
'manus': '손'이라는 뜻
'festus': '쳐다보다'라는 뜻
이 두 단어가 합쳐져서 '손으로 쳐다보이게 만든다', 즉 '무언가를 분명하게 보여준다'는 의미가 되었어요[1].

크롬 확장프로그램의 manifest

크롬 확장프로그램에서 manifest는 마치 책의 목차나 설명서 같은 역할을 해요[3][5]. manifest.json이라는 파일에는:
확장프로그램의 이름
버전
설명
아이콘
필요한 권한들
같은 중요한 정보들이 모두 적혀있어요[5]. 쉽게 말해서, 크롬이 이 확장프로그램이 무엇이고 어떻게 작동하는지 알 수 있도록 알려주는 안내서라고 생각하면 됩니다[4].
이 파일은 모든 크롬 확장프로그램에 반드시 있어야 하는 매우 중요한 파일이에요. 마치 새로운 장난감을 살 때 따라오는 설명서처럼, 크롬 브라우저가 확장프로그램을 올바르게 사용하기 위해 꼭 필요한 정보를 담고 있답니다[5].
Sources [1] Manifest 뜻,어원,동의어,유의어,반의어,관용구,예문 - LIFE is PAIN https://lifeispain0404.tistory.com/1009 [2] Etymology of manifest by etymonline https://www.etymonline.com/word/manifest [3] [Chrome Extension] manifast.json 파헤치기 - 반짝반짝 빈나는 https://beenlife.tistory.com/5 [4] Chrome Extensions - Manifest File - DEV Community https://dev.to/kjdowns/chrome-extensions-manifest-file-47he [5] Chrome Extension의 설정 파일, manifest - 지식물원 - 티스토리 https://ggarden.tistory.com/entry/Chrome-Extension의-설정-파일-manifest [6] manifest 뜻 - 영어 어원·etymonline https://www.etymonline.com/kr/word/manifest [7] Etymology of manifestation by etymonline https://www.etymonline.com/word/manifestation [8] manifestation 뜻 - 영어 어원 - Etymonline https://www.etymonline.com/kr/word/manifestation [9] The Vocabularist: Where did word 'manifesto' come from? - BBC News https://www.bbc.com/news/blogs-magazine-monitor-32302568 [10] 케임브리지 사전이 꼽은 올해의 단어는 '매니페스트' - KBS 뉴스 https://news.kbs.co.kr/news/pc/view/view.do?ncd=8112052 [11] manifest, adj. & adv. meanings, etymology and more https://www.oed.com/dictionary/manifest_adj [12] manifest, v. meanings, etymology and more | Oxford English Dictionary https://www.oed.com/dictionary/manifest_v?tl=true [13] manifest - Wiktionary, the free dictionary https://en.wiktionary.org/wiki/manifest [14] manifest.json - Mozilla - MDN Web Docs https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json [15] [Typescript] Chrome Extension manifest v3 - BetaMan의 공사장 https://blog.betaman.kr/104 [16] Manifest file format - Chrome for Developers https://developer.chrome.com/docs/extensions/reference/manifest [17] 확장 프로그램이란 무엇인가요? | Manifest V2 - Chrome for Developers https://developer.chrome.com/docs/extensions/mv2/overview?hl=ko [18] Manifest File Format | Apps - Chrome for Developers https://developer.chrome.com/docs/apps/manifest

Manifest와 Manual 어원의 차이

manualmanifest 모두 라틴어 'manus(손)'에서 시작되었지만, 발전 과정이 달랐어요.
manual은 '손으로 할 수 있는' 또는 '손에 들어갈 만한 크기'라는 의미로 시작되었어요[1]. 마치 손에 쏙 들어가는 작은 책자처럼요.
manifest는 '손으로 확실하게 짚어서 보여주다'라는 의미로 시작되었어요[2]. 무언가를 분명하게 드러내거나 보여준다는 뜻이죠.

상황별 의미 차이

manual은 이렇게 사용해요:
손으로 직접 하는 일: 수동 기어, 수작업
설명서나 안내서: 제품 사용설명서, 학습 안내서
손으로 조작하는: 수동 펌프, 수동 도구[3]
manifest는 이런 상황에서 써요:
분명히 보이는 것: 명백한 실수, 뚜렷한 증거
나타내거나 보여주는 것: 증상이 나타나다, 감정을 표현하다
목록이나 명세서: 화물 목록, 승객 명단[4]
쉽게 예를 들면:
manual은 '손'과 관련된 실제적인 일이나 물건을 가리켜요
manifest는 '보여주거나 드러내는 것'과 관련된 추상적인 개념을 나타내요[19]
Sources [1] Etymology of manual by etymonline https://www.etymonline.com/word/manual [2] Etymology of manifest by etymonline https://www.etymonline.com/word/manifest [3] Manual - definition of manual by The Free Dictionary https://www.thefreedictionary.com/manual [4] Manifest ~ Definition, Meaning & Use In A Sentence - BachelorPrint https://www.bachelorprint.com/definitions/manifest/ [5] What does manual mean? - AudioEnglish.org https://www.audioenglish.org/z/manual.htm [6] etymology - Why do we call an instruction book a "Manual"? https://english.stackexchange.com/questions/119574/why-do-we-call-an-instruction-book-a-manual [7] Manifest etymology in English - Cooljugator https://cooljugator.com/etymology/en/manifest [8] Manual etymology in English - Cooljugator https://cooljugator.com/etymology/en/manual [9] Etymology of manifestation by etymonline https://www.etymonline.com/word/manifestation [10] manual - Wiktionary, the free dictionary https://en.wiktionary.org/wiki/manual [11] The Vocabularist: Where did word 'manifesto' come from? - BBC News https://www.bbc.com/news/blogs-magazine-monitor-32302568 [12] manifest, v. meanings, etymology and more | Oxford English Dictionary https://www.oed.com/dictionary/manifest_v?tl=true [13] manifest - Wiktionary, the free dictionary https://en.wiktionary.org/wiki/manifest [14] manifest - WordReference.com Dictionary of English https://www.wordreference.com/definition/manifest [15] MANUAL 정의 및 의미 | Collins 영어 사전 https://www.collinsdictionary.com/ko/dictionary/english/manual [16] What does it mean? : r/EnglishLearning - Reddit https://www.reddit.com/r/EnglishLearning/comments/17citao/what_does_it_mean/ [17] manual - English Collocations - WordReference.com https://www.wordreference.com/englishcollocations/manual [18] 'Manifest' is Cambridge Dictionary Word of the Year https://www.cam.ac.uk/news/manifest-is-cambridge-dictionary-word-of-the-year [19] Does "manifest" mean the same as show and illustrate? https://english.stackexchange.com/questions/573544/does-manifest-mean-the-same-as-show-and-illustrate

아이패드에서 크롬 확장프로그램을 사용할 수 있는 대안

Chrome Extension with React, Tailwind CSS, and TypeSript

AI Assistant Chrome Extension

400만 토큰 지원 AI 등장

내용이 좋아 “세계 최대 4백만 토큰 지원하는 AI 등장. chatGPT의 32배. 대용량 파일 주고 대화 가능.” 의 영상 요약 노트를 공유합니다!
흥미로운 내용 3가지 :
미니맥스 AI는 400만 토큰의 컨텍스트 창을 지원하여 긴 시퀀스의 정보를 효율적으로 처리할 수 있다.
다양한 파일 업로드와 비디오 및 오디오 생성 기능을 통해 사용자에게 폭넓은 활용 가능성을 제공한다.
기존 GPT 모델에 비해 데이터 처리 능력이 뛰어나며, 특히 복잡한 구조 계산서의 정보 검색에서 우수성을 입증하고 있다.

피그마로 디자인해서 앱 만들기

내용이 좋아 “Just launched: turn Figma designs into full stack apps with AI” 의 영상 요약 노트를 공유합니다!
흥미로운 내용 3가지 :
Figma 디자인을 픽셀 단위 정확도로 풀 스택 애플리케이션으로 변환할 수 있으며, 코드 작성 없이도 가능하다.
AI와 전통적인 디자인 도구를 함께 활용하여 디자인 변경을 쉽게 적용하고, 실시간으로 데이터와 동기화할 수 있다.
새로운 CLI 도구를 통해 디자인 업데이트를 최소한의 코드 수정으로 반영할 수 있으며, 사용자 경험을 향상시킬 수 있다.

제미나이 관련 기사 및 유튜브 자료

Cursor와 같은 에디터 Trae(당분간 베타로 무료 사용-향후 당연히 유료) - 틱톡 회사, 바이트 댄스

ChatGPT 맞춤 설정 팁

확장프로그램 개발 문서

확장프로그램 아이콘

확장프로그램 샘플

애플 사파리에 크롬 확장프로그램을 변환하여 배포

개발자로 등록해서 크롬 웹스토어에 본인의 프로그램을 배포

*자신이 만든 프로그램을 자신만 사용하는 경우에는 개발자 등록하지 않아도 됩니다.
*개발자 등록을 위해서는 $5 등록비가 필요
원문
안녕하세요.
축하합니다. 검토를 위해 제출한 다음 항목이 Chrome 웹 스토어에 게시되었습니다.
항목 ID:
항목 이름: 학생 활동 기록기
항목 유형: 확장 프로그램
버전: 1.0
공개 상태: 공개
게시된 항목에 대한 링크: Link
이 항목에 대한 추가 정보는 Chrome 웹 스토어 개발자 대시보드에서 찾을 수 있습니다.

학생 활동 기록기 크롬 확장 프로그램

안녕하세요.
축하합니다. 검토를 위해 제출한 다음 항목이 Chrome 웹 스토어에 게시되었습니다.
항목 ID:
항목 이름: NEIS 글자수 계산기
항목 유형: 확장 프로그램
버전: 1.0.0
공개 상태: 공개
게시된 항목에 대한 링크: Link
이 항목에 대한 추가 정보는 Chrome 웹 스토어 개발자 대시보드에서 찾을 수 있습니다.

NEIS 글자 수 계산기 크롬 확장 프로그램

Hi there,
Congratulations! The following item that you submitted for review has been successfully published to the Chrome Web Store:
Item ID:
Item Name: 도장서명메이커 (DojangSign Maker)
Item Type: extension
Version: 1.0
Visibility: Public
Link to Published Item: Link
You can find additional information about this item on the Chrome Web Store Developer Dashboard.

도장서명메이커 크롬 확장 프로그램

후기는 사랑 - 후기는 저의 성장과 나눔의 동력

배포 이후의 이야기

NEIS Word Counter의 업데이트 소식(버전 1.0.0→1.0.2)

새글 버튼 추가 - 작성 창을 깨끗하게 비울 필요가 있음.

NEIS Word Counter의 업데이트 소식(버전 1.0.0→1.0.1)

NEIS 단어 카운터의 주요 업데이트 내용을 설명해드리겠습니다.

무엇이 바뀌었나요?

크롬 확장 프로그램의 백그라운드 스크립트가 개선되었습니다. 이제 모든 웹사이트에서 사이드 패널을 자유롭게 사용할 수 있게 되었습니다.

왜 이런 업데이트가 필요했나요?

1.
사용성 개선: 이전에는 특정 웹사이트에서만 작동했지만, 이제는 모든 웹사이트에서 사용할 수 있습니다.
2.
안정성 향상: 탭 전환이나 창 전환 시 사이드 패널이 사라지는 문제가 있었는데, 이제는 안정적으로 유지됩니다.
3.
오류 처리 강화: 클립보드 접근 등에서 발생할 수 있는 문제들에 대해 명확한 오류 메시지를 제공합니다.

주요 개선 사항은 무엇인가요?

1.
모든 도메인 지원: 이제 어떤 웹사이트에서든 사용 가능
2.
상태 관리 개선: 현재 활성화된 탭을 정확하게 추적
3.
안정적인 사이드 패널: 탭 전환 시에도 패널이 유지됨
4.
명확한 오류 안내: 문제 발생 시 사용자가 이해하기 쉬운 메시지 제공
이러한 변경으로 사용자들은 더 편리하고 안정적으로 NEIS 단어 카운터를 사용할 수 있게 되었습니다. 특히 여러 웹페이지를 오가며 작업하는 교사나 행정직원들에게 큰 도움이 될 것으로 기대됩니다.
업데이트 승인 완료
안녕하세요.
축하합니다. 검토를 위해 제출한 다음 항목이 Chrome 웹 스토어에 게시되었습니다.
항목 ID:
항목 이름: NEIS 글자수 계산기
항목 유형: 확장 프로그램
버전: 1.0.1
공개 상태: 공개
게시된 항목에 대한 링크: Link
이 항목에 대한 추가 정보는 Chrome 웹 스토어 개발자 대시보드에서 찾을 수 있습니다.