아이디어만 들고 오세요.
첫 웹사이트를 함께 만들어요.
설치부터 막막했다면, 그 전 단계부터 함께 해요.
Claude Code와 Codex를 준비하고 첫 페이지를 만들어봐요.
웹사이트를 만들고 싶어.
좋아요! 하나씩 만들어볼까요?
당신의 아이디어를 페이지로 옮기는 중…
만드는 사람입니다✦
첫 작업, 어디서 시작할까요?
지금 내게 필요한 가이드부터 골라보세요.
하나씩 읽다 보면, 어느새 한 걸음.
지금 필요한 내용을 검색하거나 골라 읽어보세요.
35개의 가이드
설치 전 01. 내 컴퓨터와 계정부터 확인하기
Mac인지 Windows인지, 칩과 운영체제 버전은 무엇인지 확인하고 내게 맞는 설치 파일을 고릅니다.
읽어보기 ↗↗시작 전 준비 · 7분 읽기설치 전 02. 계정·구독·API 비용 구분하기
프로그램 설치와 AI 사용 권한은 다릅니다. 계정, 구독, API 결제를 구분하고 불필요한 결제를 피합니다.
읽어보기 ↗↗시작 전 준비 · 9분 읽기터미널 처음 열기: 입력할 곳부터 구분하기
Mac 터미널과 Windows PowerShell을 열고, 명령어를 한 줄씩 실행하며 현재 위치를 확인합니다.
읽어보기 ↗↗시작 전 준비 · 8분 읽기내 첫 작업 폴더 만들고 정확하게 열기
홈 폴더 안에 실습 전용 폴더를 만들고, 파일 탐색기와 AI 도구에서 같은 위치를 여는 방법입니다.
읽어보기 ↗↗Claude Code · 10분 읽기Claude Code 설치하기: Mac 터미널 편
터미널 열기부터 공식 네이티브 설치, 버전 확인까지. Node.js를 먼저 설치하는 경로와 구분합니다.
읽어보기 ↗↗Claude Code · 10분 읽기Claude Code 설치하기: Windows PowerShell 편
PowerShell과 CMD를 구분하고 Windows용 공식 명령으로 설치한 뒤 실행을 확인합니다.
읽어보기 ↗↗Claude Code · 8분 읽기Claude Code 로그인하고 첫 대화 확인하기
설치 후 계정 로그인, 작업 폴더 신뢰 확인, 변경 없는 첫 요청으로 준비 상태를 확인합니다.
읽어보기 ↗↗Codex · 10분 읽기Codex 처음 준비하기: 앱 설치부터 폴더 선택까지
공식 데스크톱 안내에서 설치 파일을 찾고 ChatGPT 계정 로그인과 로컬 작업 폴더 선택을 진행합니다.
읽어보기 ↗↗시작 전 준비 · 7분 읽기처음 뜨는 권한 요청, 무엇을 허용해야 하나요?
파일 읽기·수정·명령 실행·외부 접속을 구분하고 요청의 대상과 범위를 확인하는 연습입니다.
읽어보기 ↗↗개발 기초 · 10분 읽기설치 다음 첫 성공: HTML 파일 하나 열어보기
로그인·설정이 끝났다면 서버와 데이터베이스 없이 파일 하나를 만들고 브라우저에서 직접 확인합니다.
읽어보기 ↗↗시작 전 준비 · 7분 읽기끄면 사라지나요? 종료하고 다음 날 이어 하기
대화·파일·실행 서버를 구분하고 같은 폴더를 다시 여는 습관을 익힙니다.
읽어보기 ↗↗개발 기초 · 8분 읽기설치했는데 command not found가 나올 때
재설치 전에 터미널 재시작·실행 파일 위치·PATH를 구분해 확인합니다. Claude Code 사례로 설명합니다.
읽어보기 ↗⌘Antigravity · 12분 읽기Antigravity 설정하기: 설치·로그인·첫 작업 폴더
App·IDE·CLI를 구분하고, 개발 화면이 있는 Antigravity IDE에서 첫 요청까지 준비합니다.
읽어보기 ↗⌘Cursor · 12분 읽기Cursor 처음 사용하기: 설치부터 첫 변경 확인까지
Mac·Windows 설치와 로그인, 폴더 열기, Agent에게 질문하고 변경 내용을 확인하는 순서입니다.
읽어보기 ↗⌘VS Code · 10분 읽기VS Code 준비하기: 설치·한국어 설정·폴더 열기
VS Code와 AI 확장을 구분하고, 한국어 화면으로 바꾼 뒤 실습 폴더를 엽니다.
읽어보기 ↗⌘VS Code · 9분 읽기VS Code에 Claude Code 연결하기
공식 확장을 설치하고 Claude 계정으로 로그인한 뒤 AI 입력칸에서 첫 요청을 보냅니다.
읽어보기 ↗⌘VS Code · 9분 읽기VS Code에 Codex 연결하기
공식 Codex 확장과 ChatGPT 계정을 연결하고 폴더·파일 맥락을 확인한 뒤 작은 작업부터 시작합니다.
읽어보기 ↗↗시작 전 준비 · 6분 읽기바이브 코딩 입문: 처음 시작하는 순서와 확인 방법
바이브 코딩의 뜻부터 도구 준비, 첫 요청, HTML 파일 확인과 수정까지 완전 초보자의 시작 순서를 안내합니다.
읽어보기 ↗⌘시작 전 준비 · 5분 읽기내게 맞는 AI 코딩 도구 고르기
브라우저에서 시작할지, 내 컴퓨터에서 개발할지부터 정해보세요.
읽어보기 ↗◇개발 기초 · 10분 읽기첫 프로젝트: 나만의 소개 페이지
한 페이지로 작게 시작하고, 직접 확인하면서 완성하는 실습입니다.
읽어보기 ↗✳개발 기초 · 5분 읽기에러가 났을 때 AI에게 질문하는 법
에러 메시지, 재현 순서, 기대한 결과를 함께 전달해보세요.
읽어보기 ↗↗사이트 운영 · 5분 읽기웹사이트 공개 14편: 백업·복구와 안전한 업데이트
> 웹사이트 공개 실습 14/14 · 가상 프로젝트 작은 작업실 기준입니다. example.com은 설명용 예약 도메인이며 실제 연결에는 본인 소유 도메인을 사용합니다. 이번 편의 목표 파일이 있다는 것뿐 아니라 복구 가능한지 확인합니다. 이 예제의 저장 데이터는
읽어보기 ↗↗사이트 운영 · 4분 읽기웹사이트 공개 13편: AdSense 연결 준비하기
> 웹사이트 공개 실습 13/14 · 가상 프로젝트 작은 작업실 기준입니다. example.com은 설명용 예약 도메인이며 실제 연결에는 본인 소유 도메인을 사용합니다. 이번 편의 목표 AdSense의 사이트 연결을 준비합니다. 사이트 연결·검토 요청·승인·실제
읽어보기 ↗↗사이트 운영 · 5분 읽기웹사이트 공개 12편: GTM으로 GA4 연결하기
> 웹사이트 공개 실습 12/14 · 가상 프로젝트 작은 작업실 기준입니다. example.com은 설명용 예약 도메인이며 실제 연결에는 본인 소유 도메인을 사용합니다. 이번 편의 목표 사이트에 GTM을 연결하고, 그 안에서 GA4 Google 태그를 게시해 수집
읽어보기 ↗↗웹사이트 공개 · 5분 읽기웹사이트 공개 11편: 검색엔진·사이트맵·RSS 등록
> 웹사이트 공개 실습 11/14 · 가상 프로젝트 작은 작업실 기준입니다. example.com은 설명용 예약 도메인이며 실제 연결에는 본인 소유 도메인을 사용합니다. 이번 편의 목표와 공개 설정 웹사이트가 열린다는 것과 검색엔진에 등록되는 것은 다릅니다. 대표
읽어보기 ↗↗사이트 운영 · 5분 읽기웹사이트 공개 10편: Google 로그인 연결하기
> 웹사이트 공개 실습 10/14 · 가상 프로젝트 작은 작업실 기준입니다. example.com은 설명용 예약 도메인이며 실제 연결에는 본인 소유 도메인을 사용합니다. 이번 편의 목표 로그인 버튼을 누르면 Google 인증 후 본인 확인 화면으로 돌아오게 합니다
읽어보기 ↗↗웹사이트 공개 · 5분 읽기웹사이트 공개 9편: 접속 오류를 구분하는 순서
> 웹사이트 공개 실습 9/14 · 가상 프로젝트 작은 작업실 기준입니다. example.com은 설명용 예약 도메인입니다. 실제 연결에는 본인 소유 도메인을 사용하세요. 이번 편의 목표 “안 열린다”를 하나의 문제로 보지 않고 DNS·Tunnel·앱·브라우저 문
읽어보기 ↗↗웹사이트 공개 · 5분 읽기웹사이트 공개 8편: HTTPS와 www 정리
> 웹사이트 공개 실습 8/14 · 가상 프로젝트 작은 작업실 기준입니다. example.com은 설명용 예약 도메인입니다. 실제 연결에는 본인 소유 도메인을 사용하세요. 이번 편의 목표 대표 주소를 https://example.com 형태로 정하고 HTTP·ww
읽어보기 ↗↗웹사이트 공개 · 5분 읽기웹사이트 공개 7편: Tunnel로 컨테이너 연결
> 웹사이트 공개 실습 7/14 · 가상 프로젝트 작은 작업실 기준입니다. example.com은 설명용 예약 도메인입니다. 실제 연결에는 본인 소유 도메인을 사용하세요. 이번 편의 목표와 사전 확인 6편의 도메인이 Active이고 http://localhost:
읽어보기 ↗↗도메인·DNS · 4분 읽기웹사이트 공개 6편: Cloudflare 네임서버 연결
> 웹사이트 공개 실습 6/14 · 가상 프로젝트 작은 작업실 기준입니다. example.com은 설명용 예약 도메인입니다. 실제 연결에는 본인 소유 도메인을 사용하세요. 이번 편의 목표 도메인의 DNS 관리 주체를 Cloudflare로 연결합니다. 등록업체에서
읽어보기 ↗↗도메인·DNS · 4분 읽기웹사이트 공개 5편: 도메인 구매와 관리 화면
> 웹사이트 공개 실습 5/14 · 가상 프로젝트 작은 작업실 기준입니다. example.com은 설명용 예약 도메인입니다. 실제 연결에는 본인 소유 도메인을 사용하세요. 이번 편의 목표 4편까지 로컬 실행을 마쳤다면 방문자가 입력할 주소를 준비합니다. 도메인 구
읽어보기 ↗↗서버 관리 · 4분 읽기웹사이트 공개 4편: 개발과 운영을 분리하기
> 웹사이트 공개 실습 4/14 · 가상 프로젝트 작은 작업실 기준입니다. example.com은 설명용 예약 도메인입니다. 외부 설정에는 반드시 본인 소유 도메인을 사용하세요. 이번 편의 목표 운영용 4100 화면을 유지하면서 개발용 4101 화면을 따로 실행합
읽어보기 ↗↗서버 관리 · 5분 읽기웹사이트 공개 3편: Docker 컨테이너로 실행하기
> 웹사이트 공개 실습 3/14 · 가상 프로젝트 작은 작업실 기준입니다. example.com은 설명용 예약 도메인입니다. 외부 설정에는 반드시 본인 소유 도메인을 사용하세요. 이번 편의 목표 2편의 사이트를 독립된 컨테이너에서 실행합니다. Mac은 [OrbSt
읽어보기 ↗↗앱 만들기 · 5분 읽기웹사이트 공개 2편: AI와 로컬 사이트 만들기
> 웹사이트 공개 실습 2/14 · 가상 프로젝트 작은 작업실 기준입니다. example.com은 설명용 예약 도메인입니다. 외부 설정에는 반드시 본인 소유 도메인을 사용하세요. 이번 편의 목표와 파일 내 브라우저에서 소개·기록 목록·기록 상세 화면을 엽니다. [
읽어보기 ↗↗웹사이트 공개 · 4분 읽기웹사이트 공개 1편: 전체 구조와 준비물
> 웹사이트 공개 실습 1/14 · 가상 프로젝트 작은 작업실 기준입니다. example.com은 설명용 예약 도메인입니다. 외부 설정에는 반드시 본인 소유 도메인을 사용하세요. 이번 편의 목표 도메인을 사기 전에 무엇을 만들고 어디서 실행할지 정합니다. 이 시리
읽어보기 ↗시작 전에 궁금한 것들
코딩을 전혀 몰라도 시작할 수 있나요?+
네. 원하는 것을 문장으로 설명하면서 작은 페이지부터 시작할 수 있어요. 다만 AI가 만든 결과를 직접 확인하고 수정하는 과정은 꼭 필요해요.
처음부터 유료 도구가 필요한가요?+
아니요. 도구의 무료 이용 범위로 작은 실습부터 해보고, 사용량과 필요한 기능을 확인한 뒤 결정하세요. 요금과 무료 범위는 각 도구의 공식 안내에서 확인해주세요.
AI가 만든 코드는 그대로 공개해도 되나요?+
공개 전에 개인정보 노출, 비밀키 포함 여부, 저작권과 주요 기능을 확인하세요. 로그인이나 결제 기능이 있다면 별도의 보안 검토가 필요해요.