해피 테크로그

Codex나 Claude Code가 웹사이트를 만들어 주었는데, 그다음 무엇을 해야 할지 모르겠다면 이 글만 천천히 따라오면 됩니다. Git을 처음 듣는 사람도 이해할 수 있도록, 내 컴퓨터에 있는 프로젝트가 실제 인터넷 주소가 되는 과정을 처음부터 설명합니다. 요즘은 코딩을 몰라도 자연어로 프로그램을 만들 수 있습니다. “이미지를 변환하는 웹사이트를 만들어줘”, “회원가입이 있는 예약 페이지를 만들어줘”라고 요청하면 AI가 파일을 만들고 화면까지 완성해 줍니다. 그런데 마지막에 예상하지 못한 벽을 만납니다. “그래서 이걸 다른 사람은 어떻게 접속하지?” 내 컴퓨터에서만 열리는 웹사이트는 아직 세상에 공개된 서비스가 아닙니다. 다른 사람이 주소를 입력해 접속할 수 있도록 인터넷에 올리는 과정이 필요한데, 이것을 배포(Deployment) 라고 합니다. 배포를 검색하면 Git, GitHub, Repository, Commit, Push, Build, Vercel, 환경변수 같은 단어가 한꺼번에 등장합니다. 비개발자에게는 코딩보다 이 용어들이 더 어렵게 느껴질 수 있습니다. 하지만 처음부터 모든 기술을 공부할 필요는 없습니다. 각 도구가 무슨 역할을 하는지만 생활 속 물건에 비유해 이해하면 됩니다. 이 글에서 다루는 내용 1. 배포란 무엇인가 2. Git은 무엇인가 3. GitHub는 무엇인가 4. Repository·Commit·Push 뜻 5. 내 프로젝트에 맞는 배포 방법 6. HTML 사이트를 Netlify로 배포하기 7. Next.js를 GitHub와 Vercel로 배포하기 8. 환경변수와 API 키 9. 배포 오류 해결하기 10. AI에게 배포 준비를 맡기는 프롬프트 1. 배포는 무엇인가? 배포는 어렵게 말하면 프로그램을 운영 환경에 공개하는 일입니다. 쉽게 말하면 내 컴퓨터 안에만 있던 웹사이트를 인터넷에 올려 누구나 주소로 접속할 수 있게 만...

NEXT.JS · CODEX · HARNESS TUTORIAL Codex로 무료 온라인 툴 사이트 만들기 하네스 적용부터 직접 따라 하기 오늘 적용한 AGENTS.md 하네스가 왜 필요한지 먼저 쉽게 설명하고, 이어서 프로젝트에 그대로 복사·붙여넣기 할 수 있는 문서와 Codex 요청문을 한 편에 정리했습니다. 이 글에서 다루는 내용 하네스를 적용한 이유 왜 문서를 나누나 폴더 구조 AGENTS.md docs 역할 Codex 사용 순서 먼저, 왜 Codex에 하네스를 적용했을까? 이번에 만들려는 것은 회원가입 없이 브라우저에서 바로 사용할 수 있는 무료 온라인 툴 사이트입니다. UUID 생성기, JSON Formatter, Base64, Timestamp Converter, QR Code Generator처럼 작은 도구를 하나씩 늘려 갈 계획입니다. 처음에는 “Codex에게 도구 하나씩 만들어 달라고 하면 되지 않을까?”라고 생각하기 쉽습니다. 그런데 도구가 늘어나면 기준도 함께 늘어납니다. 어떤 페이지는 오류 메시지가 영어이고, 어떤 페이지는 복사 버튼이 없을 수 있습니다. 어떤 기능은 입력값을 서버로 보내고, 어떤 기능은 브라우저 안에서 처리할 수도 있습니다. 이처럼 같은 사이트 안에서 규칙이 제각각이 되는 것을 막기 위해 하네스(harness) 를 적용했습니다. 하네스는 별도 프로그램이 아닙니다. Codex가 프로젝트를 작업할 때 먼저 읽고 지켜야 할 규칙, 안전 원칙, 확인 방법, 완료 기준을 적어 둔 프로젝트의 작업 안내서 입니다. 새 팀원에게 “우리는 이런 방식으로 일합니다”라고 알려 주는 짧은 온보딩 문서에 가깝습니다. 이 프로젝트에서는 그 중심 파일을 AGENTS.md 로 정했습니다. 코드와 파일명은 영어로, 사용자가 보는 문구와 오류 메시지는 한국어로 작성합니다. 가능한 기능은 브라우저에서 처리하고, 사용자 입력을 불필요하게 서버...