AI가 코드를 만들어 줬어요. 내 PC에서는 화면도 떠요. 그런데 “그래서 어디서 써?”라는 질문에 줄 링크가 없다면, 아직 한 단계가 남았어요.

첫 목표는 기능이 잔뜩 있는 앱보다, 한 가지 일을 하는 페이지를 다른 사람도 열고 쓸 수 있게 만드는 거예요. 기획부터 배포까지 여섯 칸 중 어디에서 멈췄는지 고르고, 그 칸의 결과물 하나를 만들어 보세요.

이 글에서는 섭씨를 화씨로 바꾸는 작은 웹페이지를 예로 들게요. 로그인·결제·회사 자료·AI API 연결 없이 브라우저에서 계산만 하는 연습용이에요. 회사 업무용 서비스라면 회사에서 허용한 도구와 게시 경로를 먼저 써 주세요.

지금 멈춘 칸부터 골라보세요

지금 상태 다음에 할 일 이게 남으면 다음 칸으로 가요
뭘 만들지 계속 묻고 있어요 쓸 사람과 할 일 하나를 정해요 한 문장짜리 기획
화면은 상상되는데 규칙이 없어요 입력과 결과, 빈칸 처리를 적어요 짧은 동작 규칙
화면에 뭘 넣을지 모르겠어요 입력칸·버튼·결과를 그려요 휴대폰에서도 읽히는 화면
코드 조각만 쌓여요 한 기능을 처음부터 끝까지 연결해요 열어서 눌러 볼 파일
돌아가는 것 같긴 해요 정상값·빈칸·경계값을 넣어요 예상값과 실제값 기록
내 PC에서만 열려요 허용된 곳에 올리고 링크를 열어요 다른 기기에서도 동작하는 주소

여섯 단계가 폭포처럼 한 번씩만 흐르지는 않아요. 테스트하다 규칙을 바꿔도 괜찮아요. 다만 버튼을 누르면 무엇이 나와야 하는지는 정해 두는 편이 덜 헤매요.

1. 기획: 누구의 무슨 일을 줄일 건가요?

“쓸 만한 앱 만들어 줘”보다 이렇게 작게 잡아보세요.

섭씨 기온을 화씨로 전달해야 하는 사람이, 숫자 하나를 넣어 바뀐 값을 바로 볼 수 있게 한다.

이번 예시는 섭씨에서 화씨로 가는 한 방향만 만들어요. 날씨 조회, 위치 권한, 회원 가입은 나중 일이에요. 첫 화면이 안 나오는데 기능 목록부터 늘어나면 끝내기 어려워지거든요.

완료 기준: 누가, 무엇을 넣고, 무엇을 얻는지 한 문장으로 설명할 수 있어요.

2. 설계: 빈칸을 넣으면 어떻게 되나요?

화면을 그리기 전에 동작 세 가지만 적어두세요.

  • 숫자를 넣고 버튼을 누르면 화씨 = 섭씨 × 9 ÷ 5 + 32로 계산해요.
  • 아무것도 안 넣으면 계산하지 않고 “섭씨 온도를 입력해 주세요”라고 알려요.
  • 음수와 소수도 받아요. 소수는 최대 한 자리까지 표시해요.

빈칸을 숫자 0으로 바꾸는 코드는 의외로 만들기 쉬워요. 0℃의 결과인 32℉가 나오면, 빈칸 오류를 정상 결과로 착각할 수도 있죠. 입력이 없는 것과 0을 입력한 것은 달라요.

완료 기준: 정상 입력뿐 아니라 안 되는 입력에 어떻게 답할지도 적혀 있어요.

3. 디자인: 휴대폰에서 누를 수 있나요?

예쁜 대시보드보다 입력칸 하나, “화씨로 바꾸기” 버튼 하나, 결과 한 줄이면 충분해요. 입력칸 위에 “섭씨 온도(℃)”를 붙이고, 결과에도 단위를 써 주세요. 설명을 지워도 무슨 칸인지 보여야 해요.

브라우저 폭을 휴대폰처럼 줄여 보세요. 버튼이 화면 밖으로 밀리지 않는지, 결과가 나오면 바로 보이는지 확인해요. 색만 바뀌는 오류 표시보다 짧은 문장을 함께 보여주는 편이 알아보기 쉬워요.

완료 기준: 좁은 화면에서도 입력 → 버튼 → 결과를 따라갈 수 있어요.

4. 개발: AI에게 이렇게 요청해 보세요

아래 요청문을 복사하고, 첫 줄의 만들 것을 자기 주제로 바꿔보세요. 개발 도구마다 파일을 만드는 방법은 다르지만, 결과물과 동작 규칙은 같이 쓸 수 있어요.

섭씨를 화씨로 바꾸는 연습용 웹페이지를 만들어 줘.
HTML·CSS·JavaScript를 index.html 한 파일에 넣어 줘.
외부 라이브러리·서버·로그인·AI API는 쓰지 마.

입력: 섭씨 숫자 하나. 음수와 소수를 허용해.
숫자 입력칸은 step="any"로 설정해 12.5 같은 소수도 제출되게 해.
버튼: 화씨로 바꾸기.
빈칸이나 올바르지 않은 숫자는 계산하지 말고 안내해.
결과: 섭씨 × 9 / 5 + 32. 소수는 최대 한 자리.
휴대폰에서 가로로 넘치지 않게 만들고 단위를 표시해.

완성 파일을 저장한 뒤 직접 확인할 방법도 알려 줘.
예상 결과는 0→32, 100→212, -40→-40, 12.5→54.5야.
파일·계정·게시 권한은 확인 없이 바꾸지 마.

AI가 코드를 대화창에만 써 줬다면, 빈 텍스트 파일에 복사해 index.html로 저장해 보세요. 파일 확장자를 숨기는 환경에서는 index.html.txt가 되지 않았는지도 확인해요. 파일을 브라우저로 열어 버튼을 눌러 보면 돼요.

여기서 말하는 한 파일 방식은 계산·텍스트 변환 같은 작은 정적 페이지에 맞아요. 비밀 API 키를 넣거나 데이터베이스를 붙여야 한다면 그대로 공개하면 안 돼요. 서버와 보관할 자료, 권한부터 따로 정해야 해요.

5. 테스트: “잘 됐어” 대신 이 다섯 번을 눌러보세요

2026년 10월 24일, 나노플레이데이즈의 AI 직원 하린이 이 규칙으로 만든 한 파일 예시를 Windows의 Chromium 브라우저에서 확인했어요. 작은 화면은 실제 휴대폰 대신 가로 390px 크기로 시험했어요.

넣은 값 나와야 할 결과
0 32℉
100 212℉
-40 -40℉
12.5 54.5℉
빈칸 계산 결과 대신 입력 안내

처음 네 값이 맞아도 빈칸은 따로 눌러보세요. 정상값만 넣으면 “문제가 없는 것처럼 보이는” 페이지를 통과시키기 쉬워요.

다른 앱을 만들었다면 이 표의 값만 바꾸면 돼요. 할 일 목록이면 추가·완료·삭제·빈 제목, 할인 계산기면 0%·100%·음수·빈칸을 넣는 식이에요. 결과가 예상과 다르면 AI에게 “안 돼” 대신 넣은 값 / 예상 결과 / 실제 결과를 같이 보내 주세요.

6. 배포: 링크를 줄 수 있어야 끝나요

이미 쓰도록 허용된 게시 공간이 있으면 그곳이 먼저예요. 개인 연습용 정적 페이지이고 공개해도 되는 코드라면 GitHub Pages도 한 방법이에요. GitHub 계정이 필요하고, GitHub Free에서는 공개 저장소로 사용할 수 있어요. 이 경로는 HTML 같은 정적 파일용이라 서버 프로그램이나 비밀 키를 숨겨 주지는 않아요.

처음 공개하는 개인 연습 파일 기준으로는 이렇게 진행해요.

  1. GitHub에서 공개 저장소를 하나 만들어요. 예를 들어 이름을 temperature-demo로 정해요. 회사 자료·계정 정보·키를 올리지 않아요.
  2. 저장소의 Add file → Upload files에서 index.html을 올리고 저장해요. 다른 폴더에 넣지 않고 저장소 첫 화면에서 파일이 보이게 해요.
  3. Settings → Pages → Build and deployment에서 Source: Deploy from a branch를 골라요. **main / (root)**를 선택하고 Save를 눌러요. 실제 파일이 다른 브랜치에 있다면 그 브랜치를 선택해야 해요.
  4. 게시가 끝나면 Pages 화면의 Visit site로 열어요. 보통 프로젝트 주소는 https://사용자이름.github.io/저장소이름/ 형태예요. 공식 안내상 반영에 최대 10분 걸릴 수 있어요.
  5. 그 주소를 다른 기기에서도 열고 위 다섯 입력을 다시 확인해요. 내 컴퓨터의 file:// 주소나 localhost 주소를 전달한 건 아닌지도 봐 주세요.

404가 나오면 Pages가 배포 완료인지, 선택한 브랜치·폴더에 index.html이 있는지부터 봐요. 페이지는 열리는데 그림이나 기능만 안 되면 파일명 대소문자와 경로, 브라우저 오류를 확인해요. 이 예시는 한 파일로 묶어 경로 문제를 줄였어요.

회사 자료가 있거나 비공개가 필요한 도구는 이 공개 저장소 연습 경로에 올리지 마세요. 회사의 게시·보안 기준을 따르는 별도 경로가 필요해요. GitHub Pages의 제공 조건은 2026년 10월 24일 공식 문서 기준이고, 한국에서도 같은 계정·저장소 조건이 적용돼요. 회사 계정의 허용 여부는 별개예요.

한 파일보다 커지면: AI에게 이 순서로 맡겨 보세요

온도 변환기처럼 작은 페이지는 요청 한 번으로도 끝나요. 화면이 여러 개이거나 저장 기능이 붙으면 “만들어 줘” 한 번에 맡기기보다 순서를 나누는 편이 덜 헤매요. Claude Code·Codex 같은 코딩 도구에 그대로 써 볼 수 있는 말이에요.

  1. 질문부터 받기. “바로 만들지 말고, 필요한 걸 한 번에 하나씩 물어봐 줘. 기술 선택은 네가 정하고 내 결정이 꼭 필요한 것만 물어봐.” 무엇을 만들지 내 머릿속에만 있던 조건이 이 단계에서 나와요.
  2. 계획을 파일로 남기기. “정리한 기능·화면·동작 순서를 계획 문서로 저장하고 쉬운 말로 요약해 줘.” 대화가 길어지거나 새로 시작해도 이 문서를 기준으로 이어갈 수 있어요.
  3. 지킬 규칙 적어 두기. “설명은 쉬운 말로, 작업 전엔 계획 문서를 먼저 읽기” 같은 규칙을 프로젝트 규칙 파일에 적게 하세요. Claude Code는 CLAUDE.md, Codex는 AGENTS.md를 읽어요.
  4. 빈 화면부터 띄우기. 기능 없이 제목만 보이는 첫 화면을 먼저 열어 보세요. 여기서 안 열리면 기능을 붙여도 안 열려요.
  5. 한 기능씩 붙이기. 저장·로그인처럼 계정이나 개인 정보가 걸리는 기능은 “무엇을 바꾸는지 쉬운 말로 먼저 알려 줘”를 붙여요. 비밀 키는 브라우저로 내려가는 코드·설정 파일이나 공개 저장소에 넣지 마세요. 키가 필요한 기능은 서버 쪽 비밀 저장과 접근 권한부터 정한 뒤 붙이고, 공개 게시판이나 대화에도 붙여 넣지 마세요.
  6. 깐깐한 검수자로 다시 보기. “만든 사람 말고 깐깐한 검수자 입장에서, 계획 문서의 순서대로 실제로 도는지 점검하고 깨질 곳을 번호로 정리해 줘.” 만든 직후의 AI는 자기 결과를 좋게 보기 쉬워요.
  7. 고를 번호만 고치기. “그중 2번과 4번만 고쳐 줘. 나머지는 그대로 둬.” 한꺼번에 고치게 하면 멀쩡하던 곳까지 바뀌기 쉬워요.
  8. 배포하고 링크로 다시 확인하기. 앞의 「6. 배포」처럼 공개 주소를 다른 기기에서 열고, 「5. 테스트」의 표에 적은 입력을 다시 넣어 보세요.

복사해서 남겨둘 첫 배포 체크리스트

[ ] 기획: 누가 무엇을 넣고 무엇을 얻는지 한 문장
[ ] 설계: 정상 입력·빈칸·안 되는 값 처리
[ ] 디자인: 좁은 화면에서 입력·버튼·결과 확인
[ ] 개발: 한 가지 기능이 끝까지 이어지는 파일
[ ] 테스트: 입력 / 예상 결과 / 실제 결과 기록
[ ] 배포: 공개 가능한 자료만, 허용된 곳에 올리기
[ ] 공개 후: 다른 기기에서 링크와 기능 다시 확인

여섯 칸을 다 채우려고 기능부터 크게 잡을 필요는 없어요. 오늘은 숫자 하나를 바꾸는 페이지라도 좋아요. 다른 사람이 링크를 열고 실제로 써 볼 수 있는 것 하나. 거기까지 끝내면 다음에 어디서 막힐지도 훨씬 구체적으로 물을 수 있어요.

참고한 공식 안내