전체 글1214 2026년 AI 웹제작 학습 가이드 7일차 7일차 — AGENTS.md 만들기오늘은 개발 시작 전 마지막 준비 단계입니다.1~6일차에서 무엇을 만들지, 화면은 어떻게 구성할지, 디자인은 어떻게 할지 결정했습니다. 이제 Codex에게 “이 프로젝트에서는 이런 방식으로 작업하라”는 규칙을 만들어줍니다.오늘의 핵심: AI에게 코드를 부탁하기 전에 AI가 지켜야 할 작업 규칙부터 만든다.1. 초보자에게 AGENTS.md를 어떻게 설명할까?어렵게 설명할 필요 없습니다.AGENTS.md = AI 개발자에게 주는 프로젝트 작업 설명서예를 들어 사람 개발자에게 일을 맡긴다고 생각해봅니다.그냥:홈페이지 만들어주세요.보다,Next.js를 사용하고, 기존 디자인은 바꾸지 말고, 모바일에서도 잘 보이게 하고, 작업이 끝나면 오류를 확인해주세요.라고 설명하는 것이 결과.. 2026. 9. 26. 2026년 AI 웹제작 학습 가이드 6일차 6일차 — DESIGN.md 디자인 시스템 만들기5일차까지 무엇을 만들지와 화면 구조가 결정됐습니다. 오늘은 처음으로 사이트의 실제 분위기를 정합니다.오늘 목표: Codex가 자기 마음대로 디자인하지 않도록 디자인 규칙을 문서로 확정한다.오늘도 아직 본격적인 코딩은 하지 않습니다.1. 디자인 방향이 사이트는 개발자용 문서 사이트처럼 딱딱하면 안 되고, 어린이 교육 사이트처럼 보여도 안 됩니다.핵심 키워드를 이렇게 잡겠습니다.쉽다 · 친절하다 · 깔끔하다 · 단계가 보인다 · 성취감이 있다스타일은 Modern Learning + Soft Tech 방향을 추천합니다.2. 전체적인 느낌밝은 배경+큰 제목+넉넉한 여백+둥근 카드+명확한 STEP 번호+부드러운 그림자+최소한의 애니메이션 학생이 사이트에 들어왔을 .. 2026. 9. 26. 2026년 AI 웹제작 학습 가이드 5일차 5일차 — STEP 학습화면 공통 템플릿 설계오늘은 이 교육 사이트에서 가장 중요한 화면을 설계합니다.4일차까지 HOME을 설계했다면, 5일차에는 학생이 실제로 공부하는 STEP 01~10 화면을 하나의 공통 구조로 만듭니다.핵심 목표: 10개의 페이지를 따로 설계하지 않고, 하나의 학습 템플릿으로 운영한다.이렇게 해야 학생도 사용하기 쉽고, 나중에 Codex 개발량도 크게 줄어듭니다.1. 오늘 결정할 핵심STEP 페이지는 항상 같은 순서로 보여줍니다.현재 위치 ↓오늘 무엇을 배우나요? ↓왜 필요한가요? ↓쉬운 설명 ↓실제 사례 ↓AI에게 요청하기 ↓직접 해보기 ↓결과물 확인 ↓완료 체크 ↓다음 STEP 학생은 STEP 1에서 화면 사용법을 한 번 익히면 STEP 10까지.. 2026. 9. 25. 2026년 AI 웹제작 학습 가이드 4일차 4일차 — 메인페이지 화면 설계1~3일차까지 교육 목적 → 10 STEP → 사이트 구조와 사용자 흐름을 정했습니다.오늘은 처음 방문한 초보자가 보게 될 HOME 화면을 위에서 아래까지 설계합니다.오늘의 목표: 코딩하기 전에 메인페이지가 어떻게 생길지 결정한다.오늘도 Codex 개발은 하지 않습니다.1. 메인페이지의 역할HOME에서 모든 것을 가르치려고 하면 안 됩니다.메인의 역할은 딱 세 가지입니다.① 무엇을 배우는 사이트인지 이해한다.② 어렵지 않겠다는 느낌을 받는다.③ STEP 01을 시작한다.따라서 첫 화면의 핵심 메시지는:코딩부터 시작하지 않습니다.아이디어부터 인터넷 배포까지10단계로 첫 웹사이트를 만들어봅니다.2. 전체 화면 구조메인페이지는 8개 영역으로 구성합니다.HEADER ↓01 HE.. 2026. 9. 25. 2026년 AI 웹제작 학습 가이드 3일차 3일차 — 사이트맵과 사용자 흐름 설계1일차에는 교육 목적, 2일차에는 10 STEP 교육 내용을 정했습니다.오늘은 이 내용을 실제 웹사이트의 구조로 바꿉니다.오늘의 핵심 질문: 학생이 사이트에 들어와서 어디를 누르고, 어떤 순서로 공부하게 할 것인가?오늘도 Codex 개발은 하지 않습니다.1. 오늘 완성할 것3일차가 끝나면 세 가지가 결정되어야 합니다.① 사이트 전체 메뉴② 각 페이지의 역할③ 교육생이 이동하는 순서 쉽게 말하면 사이트의 건물 구조를 만드는 날입니다.2. 사이트 전체 구조초보자 교육 사이트이므로 메뉴를 많이 만들지 않습니다.처음 만드는 AI 웹사이트HOME│├── 시작하기│├── 10 STEP│ ││ ├── STEP 01 아이디어│ ├── STEP 02 기획│ ├── ST.. 2026. 9. 24. 2026년 AI 웹제작 학습 가이드 2일차 2일차 — 10 STEP 교육 콘텐츠 설계1일차에 “누구에게 무엇을 가르칠 것인가”를 정했다면, 2일차에는 사이트에 들어갈 실제 교육 내용의 뼈대를 만듭니다.오늘도 Codex로 개발하지 않습니다.이번 프로젝트 자체가 학생들에게 보여줄 모범 사례이므로 기획을 충분히 한 뒤 개발합니다.오늘의 목표10개 STEP 모두를 같은 교육 구조로 통일합니다.학생이 어느 STEP에 들어가더라도 다음 순서만 보면 됩니다.① 이번 단계에서 무엇을 하나요? ↓② 왜 필요한가요? ↓③ 쉬운 설명 ↓④ 실제 사례 ↓⑤ AI에게 어떻게 요청하나요? ↓⑥ 직접 해보기 ↓⑦ 완료 체크 ↓⑧ 다음 STEP 이 구조가 교육 사이트의 핵심입니다.STEP.. 2026. 9. 24. 이전 1 2 3 4 ··· 203 다음
