EmailJS로 백엔드 없이 문의 폼에서 이메일 보내기

1 – EmailJS 계정과 이메일 서비스 준비 1.1 – EmailJS 계정 만들기 브라우저 주소창에 https://dashboard.emailjs.com/sign-up을 입력하고 Enter를 누릅니다. 가입 화면이 열리면 이메일 주소와 비밀번호를 입력합니다. 구글 계정으로 가입하려면 [Sign up with Google]을 클릭합니다. [Sign Up] 버튼을 클릭합니다. 가입한 이메일로 인증 메일이 오면 메일 안의 확인 링크를 클릭합니다. 로그인하면 대시보드 화면이 열립니다. EmailJS는 브라우저에서 실행되는 자바스크립트만으로 … 더 읽기

03. PPT 생성스킬

1. PPT 생성스킬 .fig, .deck 파일을 전달하면 자동으로 디자인 토큰을 추출하여 ppt 템플릿을 생성하는 스킬이다. 피그마 에이전트로 생성한 결과 https://www.figma.com/design/uXT5LBiltvje3sjOrGh340/ppt%EC%8A%A4%ED%82%AC?node-id=0-1&t=Rfxra7bcydnCADUc-1 구글 스티치로 생성한 결과 https://stitch.withgoogle.com/projects/3056729482408387556

14. codex-cli

본 문서는 CLI(씨엘아이, Command Line Interface) 환경에서 사용하는 AI 코딩 도구의 설치와 활용법을 다룬다. 운영체제 환경별 설치 명령어와 공식 문서, 프롬프트 작성 가이드, 확장 기능 연동 문서를 단계별로 안내한다. 터미널 환경에서 도구를 안정적으로 구성하고 작업 흐름에 적용하는 방법을 설명한다. 1. 공식문서 도구의 전체 명령어 목록과 구성 파일 설정 방법은 공식 문서에서 제공된다. 도구의 세부 옵션과 … 더 읽기

02. W3C Validator+Lighthouse 한글보고서.skills

HTML, CSS 문법검사 + 구글 LightHouse 평가 결과를 한글로 보고하는 스킬입니다. 1. LightHouse API키 발급 Lighthouse란? 구글이 개발한 오픈소스 웹 품질 측정 도구 2. 스킬다운로드 모던 웹표준 검사 스킬입니다. HTML5,CSS3,ES6 웹표준/린트검사를 수행합니다 web-check-ko는 웹페이지 하나를 네 가지 도구로 검사해 한국어 보고서를 만드는 스킬입니다. 네 가지 도구가 보는 곳이 서로 다릅니다. 검사 도구 보는 것 HTML … 더 읽기

34. Ollama로 내 컴퓨터에서 AI 모델 실행하기

이 문서는 Ollama를 처음 설치하는 사람이 읽고 따라 하도록 썼다. 인공지능이나 명령어 창을 다뤄 본 적이 없어도 되고, 인터넷이 연결된 컴퓨터 한 대와 20GB 정도의 빈 저장 공간만 있으면 된다. 끝까지 따라 하면 내 컴퓨터에서 도는 AI 모델, 성격을 바꿔 만든 나만의 모델, 그리고 그 모델에 파이썬 코드로 말을 거는 스크립트가 남는다. Ollama 요금제는 3단계다. … 더 읽기

08. 디자인 핸드오프 QA

디자인 핸드오프 QA(Design HandOff Quality Assurance)란? 개발된 결과물이 원본 디자인 가이드와 일치하는지 확인하는 최종 점검 단계이다. 사용 방법 프롬프트 채워 넣을 값 변수 설명 예시 {점검 대상} 어떤 디자인시스템과 시안을 볼 것인지. 파일 이름이나 식별자 디자인시스템 파일 ESG_DesignSystem, 시안 파일 ESG_시안 (화면 3벌: 1440 / 768 / 390) {대상에 접근하는 방법} 도구로 직접 읽는지, 목록을 … 더 읽기

07. 검증된 작업을 배포용 프롬프트로 만들기

목표: 내가 직접 프롬프트를 시험해 결과가 만족스러우면, 그 과정을 도구를 가리지 않고 복사·붙여넣기만 하면 되는 프롬프트 한 벌로 바꿔 학생에게 나눠 준다. 전체 흐름은 네 단계다.1. 기록 → 2. 검증 → 3. 변환 → 4. 배포 (작업 중) (빈 대화) (메타 프롬프트) (버전 보관) 1. 기록 단계 — 작업하면서 무엇을 남길 것인가 프롬프트는 대화가 끝난 … 더 읽기

05. DesignSystem 스타일가이드 생성 단계

Tailwind 계열 디자인 토큰 킷(Figma)을 받아 스타일가이드와 tokens.css를 만드는 절차 문서다. 프로젝트가 바뀌어도 그대로 쓰고, { } 자리만 갈아 넣는다. 킷을 처음 열어 보는 사람도 이 순서대로 따라가면 세 가지가 남는다 — 선택표(남길 토큰 목록과 근거), tokens.css(Tailwind v4 @theme 블록), Figma Style Guide 페이지. 맨 뒤 8장에 실제 킷 하나를 이 절차로 진단한 결과를 붙였다. … 더 읽기

03. 산출물 저장 규칙 생성

이 글은 팀 프로젝트에서 중간·최종 산출물을 체계적으로 저장하기 위한 규칙을 AI로 만드는 프롬프트다. 아래 프롬프트의 입력란을 자기 프로젝트에 맞게 채워 Claude나 다른 AI에 붙여넣으면, 팀 전용 저장 규칙 문서가 만들어진다. 1 – 프롬프트 본문 아래 코드 블록 전체를 복사해 AI 대화창에 붙여넣는다. # 입력 섹션의 빈칸만 채우면 된다. 아래 원칙에 따라 우리 팀 프로젝트에 맞는 … 더 읽기

04. 개인지침

개인지침은 인공지능(AI) 도구가 답변을 생성할 때 일관되게 따라야 하는 기준과 행동 방식을 사전에 지정하는 설정이다. 대화를 시작할 때마다 반복해서 지시사항을 입력하지 않아도 모델의 말투, 분석 절차, 출력 형태, 사실 검증 방식을 고정할 수 있다. 본 교안에서는 코드 분석과 프로그래밍 학습 지도에 적합하게 작성된 개인지침 예시와 각 항목의 동작 방식을 설명한다. 개인지침 설정 예시 다음은 인공지능 … 더 읽기