초보자도 쉽게 따라 하는 AI 웹서비스 만들기
코딩을 잘 몰라도 ChatGPT와 Codex를 활용해 웹페이지부터 데이터베이스, 서버, 도메인까지 연결하는 AI 웹서비스 제작 과정을 소개합니다.
강의 읽기 →AI WEB SERVICE FOR BEGINNERS
MathGenix를 직접 구축하면서 배운 AI 코딩, 화면 제작, 데이터베이스, 서버·도메인·배포 과정을 처음 시작하는 사람도 이해할 수 있도록 하나씩 설명합니다.
RECENT UPDATE
MathGenix가 단순 문제 생성기에서 문제·학년·단원·개념의 관계를 기억하고 관리하는 서비스로 발전하면서 데이터베이스가 필요해진 이유를 설명합니다.
최신 글 읽기 →STEP 1 / AI BUILD
등록 글 7개AI와 함께 아이디어를 실제 기능으로 바꾸는 과정입니다. ChatGPT와 Codex를 사용해 MathGenix를 만들면서 겪은 경험을 바탕으로, 코딩을 처음 접하는 사람도 따라갈 수 있도록 설명합니다.
코딩을 잘 몰라도 ChatGPT와 Codex를 활용해 웹페이지부터 데이터베이스, 서버, 도메인까지 연결하는 AI 웹서비스 제작 과정을 소개합니다.
강의 읽기 →웹서비스를 이루는 화면, 기능, 데이터, 서버의 역할을 구분하고 앞으로 무엇을 어떤 순서로 배울지 이해할 수 있습니다.
강의 읽기 →HTML을 조금 알던 상태에서 Python을 배우고, AI가 만든 코드를 직접 복사해 파일을 만들었습니다. 작은 프로그램에서는 가능했지만 프로젝트가 커지자 한계가 분명해졌습니다.
강의 읽기 →AI가 만든 코드를 파일로 저장하고 작은 결과부터 실행하며, 오류가 생겼을 때 다시 질문하는 기본 흐름을 배웁니다.
강의 읽기 →파일과 기능이 늘어나면서 어느 코드를 어디에 넣어야 하는지, 한 수정이 다른 기능에 어떤 영향을 주는지 파악하기 어려워졌습니다.
강의 읽기 →코드 한 조각을 받는 방식에서 프로젝트 전체를 함께 살피고 수정·검증하는 방식으로 바뀌었습니다. 동시에 사람의 판단이 더 중요해졌습니다.
강의 읽기 →학생에게는 새로운 문제가 필요하지만, 강사가 양질의 문제를 계속 직접 만드는 데에는 많은 시간이 필요했습니다. MathGenix은 이 문제를 AI로 줄일 수 있을지 묻는 데서 시작했습니다.
강의 읽기 →STEP 2 / UI & WEB
등록 글 6개사용자가 실제로 보고 클릭하는 화면을 만드는 파트입니다. HTML, CSS, 기본 웹 구조부터 WordPress 블로그까지 눈에 보이는 웹 화면을 쉽게 만들어봅니다.
HTML이 웹페이지의 구조를 만드는 방식과 태그의 역할을 이해하고, 간단한 HTML 화면을 AI에게 요청할 수 있습니다.
강의 읽기 →CSS가 HTML에 색상, 크기, 간격과 배치를 적용하는 원리를 이해하고 원하는 디자인을 AI에게 구체적으로 요청할 수 있습니다.
강의 읽기 →JavaScript가 웹페이지에 행동과 반응을 더하는 원리, 이벤트와 DOM의 역할을 이해하고 간단한 기능을 AI에게 요청할 수 있습니다.
강의 읽기 →UI의 의미와 버튼·입력창·메뉴·카드·탭의 역할을 이해하고, 처음 방문한 사람도 쉽게 사용하는 화면을 AI에게 구체적으로 요청할 수 있습니다.
강의 읽기 →WordPress와 CMS의 의미, 서버·데이터베이스와의 관계를 이해하고 직접 개발하는 웹서비스와 WordPress 블로그의 차이를 구분할 수 있습니다.
강의 읽기 →WordPress가 서버와 데이터베이스 위에서 동작하는 구조를 이해하고, 설치 후 첫 글을 등록하는 순서를 알 수 있습니다.
강의 읽기 →STEP 3 / DATA & DB
등록 글 3개웹서비스가 정보를 기억하고 서로 연결하는 방법을 배우는 파트입니다. 데이터베이스의 기본 개념부터 Neo4j, Milvus, RAG와 GraphRAG까지 MathGenix 실제 사례를 통해 설명합니다.
데이터베이스를 웹서비스의 기억장치라는 관점에서 이해하고, 파일 저장·관계형 표·그래프 데이터베이스의 차이를 초보자 눈높이로 살펴봅니다.
강의 읽기 →MathGenix가 단순 문제 생성기에서 문제·학년·단원·개념의 관계를 기억하고 관리하는 서비스로 발전하면서 데이터베이스가 필요해진 이유를 설명합니다.
강의 읽기 →기술이 멋져 보여서가 아니라 문제 사이의 관계를 저장하고 탐색하는 일이 필요해지면서 그래프 데이터베이스를 검토하게 됐습니다.
강의 읽기 →STEP 4 / SERVER & DEPLOY
등록 글 4개내 PC에서 만든 서비스를 실제 인터넷에 공개하는 과정입니다. AWS 서버, IP, 도메인, DNS, A 레코드, SSL과 HTTPS를 처음 듣는 사람도 이해할 수 있도록 단계별로 설명합니다.
로컬 프로그램은 내 컴퓨터가 켜져 있을 때 나만 사용할 수 있습니다. 다른 사용자가 접속하는 서비스에는 도메인, 서버, 보안과 운영 구조가 필요했습니다.
강의 읽기 →내 PC와 서버의 차이를 이해하고, AWS EC2 인스턴스를 만들 때 확인할 기본 항목을 알 수 있습니다.
강의 읽기 →도메인을 구입한 뒤 사이트가 바로 열리지 않는 이유를 이해하고, DNS와 A 레코드가 서버를 연결하는 원리를 알 수 있습니다.
강의 읽기 →A 레코드에 서버 공인 IP를 연결하고, DNS·HTTP·HTTPS 문제를 나눠 확인하는 방법을 배웁니다.
강의 읽기 →