개발 지식 없는 컴맹이 클로드 코드로 웹사이트 만들기
개발 지식이 없어도 클로드 코드(Claude Code)를 이용하면 간단한 웹사이트 제작을 시작할 수 있습니다. 원하는 화면과 기능을 한국어로 설명하면 AI가 필요한 코드를 작성하고 수정해 줍니다. 다만 완성된 사이트를 인터넷에 공개하려면 실행 확인과 배포 작업은 별도로 필요합니다.
📌 핵심 요약
클로드 코드는 말로 요청한 내용을 바탕으로 웹사이트 파일을 만들고 수정할 수 있습니다.
처음에는 로그인이나 결제 기능이 없는 한 페이지 소개 사이트가 적합합니다.
사용 전 지원 환경에서 설치하거나 실행 방법을 확인하고, 이용 가능한 유료 플랜 또는 API 결제 방식을 준비합니다.
AI가 만든 결과도 직접 열어 보고 모바일 화면과 버튼 작동을 점검해야 합니다.
💻 클로드 코드는 일반 AI 채팅과 무엇이 다를까요?
일반적인 AI 채팅은 코드를 답변으로 보여 주는 경우가 많습니다. 클로드 코드는 작업 폴더의 파일을 확인하고, 새 파일을 만들거나 기존 코드를 고치는 개발 도구입니다. 사용자는 코드 문법보다 어떤 사이트를 원하는지 설명하는 데 집중할 수 있습니다.
예를 들어 “작은 공방을 소개하는 홈페이지를 만들어 줘. 작품 사진 영역, 주문 안내, 문의 버튼을 넣어 줘”라고 요청할 수 있습니다. 그러면 AI는 페이지 구조와 디자인을 제안하고 필요한 파일을 작성하는 작업을 도울 수 있습니다.
🧰 시작 전에 준비할 것은 무엇일까요?
우선 컴퓨터와 인터넷 연결, 클로드 계정이 필요합니다. 클로드 코드의 실행 방식은 데스크톱 앱, 터미널, 개발 도구 등 선택한 환경에 따라 다릅니다. 초보자라면 공식 설치 안내에서 자신의 운영체제에 맞는 방법을 고르고, 실행 가능한 상태인지부터 확인하세요.
클로드 코드는 일반 무료 채팅과 이용 조건이 다릅니다. 구독 플랜에 포함된 사용량을 이용하거나 별도 API 과금 방식으로 사용할 수 있으며, 이용 한도와 비용은 계정 설정에 따라 달라집니다. 사이트 주소를 연결할 도메인과 호스팅 비용도 서비스에 따라 별도로 발생할 수 있습니다.
🛠️ 첫 웹사이트는 이 순서대로 만들어 보세요
새 작업 폴더를 하나 만들고 클로드 코드에서 해당 폴더를 엽니다.
사이트 목적, 메뉴, 색상, 필요한 문구를 한 번에 설명합니다.
먼저 HTML·CSS·JavaScript 중심의 간단한 정적 사이트를 만들어 달라고 요청합니다.
생성된 파일을 브라우저에서 열거나 AI가 안내한 로컬 실행 방법으로 화면을 확인합니다.
불편한 부분을 구체적으로 말해 수정하고, 정상 작동이 확인되면 배포 방법을 요청합니다.
여기서 정적 사이트란 회원가입이나 데이터베이스 없이 소개글과 사진, 메뉴 등을 보여 주는 형태입니다. 첫 프로젝트부터 쇼핑몰 결제나 회원정보 저장 기능을 넣으면 보안과 운영 난도가 크게 높아집니다.
✍️ 이렇게 요청하면 AI가 더 정확하게 만듭니다
막연히 “예쁜 사이트를 만들어 줘”라고 하기보다 목적과 구성 요소를 알려 주는 것이 좋습니다. 아래는 가상의 수제 소품 공방을 위한 요청 예시입니다.
“처음 만드는 사람도 관리하기 쉬운 공방 소개 웹사이트를 만들어 줘. 첫 화면에는 공방 이름과 소개 문구를 넣고, 아래에는 대표 작품 3개, 제작 과정, 주문 문의 영역을 배치해 줘. 모바일에서도 보기 편한 디자인으로 만들고, 필요한 파일과 실행 방법을 쉽게 설명해 줘. 외부 결제나 회원가입 기능은 넣지 마.”
결과가 마음에 들지 않을 때는 전체를 다시 만들기보다 “모바일에서 제목이 너무 크니 줄여 줘”, “문의 버튼을 화면 아래에 더 잘 보이게 배치해 줘”처럼 문제를 하나씩 설명하세요. 이렇게 하면 수정 결과를 비교하기 쉽습니다.
🔎 사이트를 공개하기 전에 꼭 확인하세요
컴퓨터 화면에서 보기 좋더라도 휴대전화에서는 글자가 잘리거나 버튼이 눌리지 않을 수 있습니다. 화면 크기를 바꾸어 확인하고, 메뉴 이동과 문의 연결이 실제로 작동하는지 테스트해야 합니다.
특히 AI가 임의로 만든 후기, 연락처, 가격, 이미지가 들어갔다면 실제 정보로 바꿔야 합니다. 저작권이 불분명한 사진을 그대로 사용하지 말고, 비밀번호나 API 키 같은 비밀정보를 공개 파일에 넣지 않도록 주의하세요.
🌐 완성한 파일을 인터넷에 공개하려면?
내 컴퓨터에서 웹사이트가 열리는 것과 다른 사람이 주소를 입력해 방문할 수 있는 것은 다릅니다. 외부에 공개하려면 정적 사이트 호스팅 서비스를 이용해 파일을 배포하고, 필요하다면 도메인을 연결해야 합니다. 배포 방법과 요금은 선택한 서비스에서 확인해야 합니다.
처음에는 화면 한 장이 정상적으로 표시되는지 확인하는 것만으로 충분합니다. 오늘은 새 폴더를 만들고 클로드 코드에 “모바일에서도 보이는 한 페이지 자기소개 웹사이트를 만들어 줘”라고 첫 요청을 입력해 보세요.