AI 서재
책으로 읽는 AI서재
한 권을 고르고, 목차에서 차례대로 읽을 수 있게 정리했습니다.
PDF 다운로드 책
다국어로 읽는 대학생 교양 인공지능
한국어 원문과 외국어 번역을 함께 실은 유학생용 교재입니다. 각 책 소개 페이지에서 PDF를 받을 수 있습니다.
[AI서재] 16장. 웹사이트 만들기와 자동화
AI에게 맡기고 자리를 뜨다 - 욜로 모드 완전 입문
16장. 웹사이트 만들기와 자동화
김경진 변호사
사례 9) 개인 블로그, 아이디어부터 배포까지
장면
대학생 박지호 씨는 맥주 리뷰를 적는 블로그를 만들고 싶었습니다. 네이버 블로그나 티스토리를 쓸 수도 있지만, 자기만의 도메인(domain, 도메인, 인터넷 주소)을 갖고 싶었습니다. beerlog.kr 같은 주소요. 그런데 웹사이트를 직접 만들어본 적이 없습니다. HTML이라는 단어는 들어봤지만, 코드를 써본 적은 없습니다.
명령
mkdir ~/beerlog
cd ~/beerlog
git init
클로드 코드를 켜고 이렇게 시킵니다.
"맥주 리뷰 블로그를 만들어줘. 이름은 '맥주 한 잔의 기록'. 홈 페이지에는 글 목록이 나오고, 글을 클릭하면 리뷰 본문이 보이게 해줘. 리뷰에는 맥주 이름, 양조장, 별점(5점 만점), 사진 한 장, 본문이 들어가. 디자인은 깔끔하고 어두운 톤으로. 마크다운 파일로 글을 쓰면 자동으로 페이지가 만들어지게 해줘."
진행 과정
클로드 코드가 정적 사이트 생성기(Static Site Generator, 스태틱 사이트 제너레이터, 마크다운 파일을 웹페이지로 바꿔주는 도구)를 설정합니다. 여러 도구 중에 휴고(Hugo, 휴고)나 일레븐티(Eleventy, 일레븐티) 같은 걸 골라서 설치합니다.
폴더 구조를 만들고, 테마(theme, 테마, 디자인 틀)를 설정하고, 샘플 리뷰 글을 하나 만들어줍니다. 홈 페이지에 글 목록이 나오고, 글을 클릭하면 본문이 보이는 구조입니다.
로컬(local, 로컬, 내 컴퓨터)에서 미리보기를 띄워줍니다.
hugo server
이 명령을 치면 브라우저에서 http://localhost:1313 주소로 블로그를 볼 수 있습니다. 내 컴퓨터 안에서만 보이는 거라 다른 사람은 못 봅니다.
여기까지가 15분 정도입니다.
배포(deploy, 디플로이, 인터넷에 올리기)까지 하려면, 클로드 코드에게 이어서 시킵니다.
"이 블로그를 Vercel에 배포해줘."
버셀(Vercel, 버셀, 웹사이트를 인터넷에 올려주는 서비스)은 개인 프로젝트라면 무료로 쓸 수 있습니다. 클로드 코드가 깃허브(GitHub, 깃허브, 코드 저장소 서비스) 저장소를 만들고, 코드를 올리고, 버셀과 연결합니다.
배포까지 합치면 25분에서 30분 걸립니다.
결과
인터넷에 공개된 블로그. beerlog.vercel.app 같은 주소로 누구나 접속할 수 있습니다. 자기 도메인(beerlog.kr)을 연결하려면 도메인을 별도로 사들여야 하는데, 연간 15,000원 정도입니다.
비용
시간 30분, 비용 3,000원에서 5,000원. 서버 운영비는 무료(버셀 무료 플랜). 도메인을 사면 연간 15,000원 추가.
위험
배포, 그러니까 인터넷에 올리는 순간 위험이 생깁니다. 코드에 개인 정보가 들어 있으면 전 세계에 공개됩니다. API 키, 비밀번호, 개인 이메일이 코드 안에 하드코딩(hard-coding, 하드코딩, 코드에 직접 적어 넣기) 되어 있으면 큰 문제가 됩니다. 이 사례는 개인 블로그라서 비밀 정보가 들어갈 일이 적지만, 습관적으로 확인하세요.
배포 전에 클로드 코드에게 이렇게 시킵니다. "이 폴더 안의 모든 파일에서 비밀번호, API 키, 토큰 같은 민감한 정보가 노출된 곳이 없는지 확인해줘." 클로드 코드가 파일을 하나씩 뒤져서 password, secret, api_key, token 같은 단어가 들어간 줄을 찾아줍니다. 아무것도 안 나오면 안전합니다.
우리도 따라하려면
블로그의 목적과 디자인 톤을 구체적으로 알려주세요. "블로그 만들어줘"보다 "맥주 리뷰 블로그, 어두운 톤, 별점 포함"이 결과가 좋습니다. 배포는 버셀이나 넷리파이(Netlify, 넷리파이) 같은 무료 서비스를 쓰세요. 깃허브 계정이 필요합니다(무료입니다).
사례 10) 동네 모임 일정표 사이트
장면
아파트 단지 독서 모임을 이끄는 김영숙 씨. 매달 모임 날짜와 읽을 책을 카카오톡 단체방에 올리는데, 새 회원이 들어오면 이전 정보를 다시 보내줘야 합니다. 과거 기록도 찾기 어렵고요. 간단한 웹페이지에 일정을 올려두면 링크 하나로 해결될 텐데.
명령
"독서 모임 일정표 웹사이트를 만들어줘. 페이지 하나짜리면 돼. 위쪽에 모임 이름 '함께 읽는 오후', 그 아래에 다음 모임 정보(날짜, 장소, 읽을 책), 그 아래에 지난 모임 기록. 데이터는 JSON 파일에서 읽어오게 해줘. 내가 JSON 파일만 수정하면 웹페이지가 자동으로 바뀌게."
진행 과정
클로드 코드가 HTML과 CSS(씨에스에스, 웹페이지의 디자인을 정하는 언어)로 페이지를 만들고, schedule.json이라는 데이터 파일을 만듭니다. JSON(제이슨, JavaScript Object Notation, 데이터를 저장하는 형식) 파일은 사람이 읽을 수 있는 텍스트 파일이라서, 메모장으로 열어서 날짜와 책 이름을 바꿀 수 있습니다.
10분이면 완성됩니다. 버셀이나 깃허브 페이지에 올리면 인터넷 주소가 생깁니다. 이 주소를 카카오톡 단체방에 올리면 됩니다.
결과
한 페이지짜리 깔끔한 일정표 사이트. 다음 모임 정보가 눈에 띄게 위쪽에 있고, 아래로 스크롤하면 지난 기록이 나옵니다.
비용
시간 10분, 비용 500원, 서버 운영비 무료.
위험
사이트가 공개되어 있으니 모임 장소의 상세 주소(아파트 동호수 같은)를 적으면 안 됩니다. "단지 내 경로당"처럼 내부인만 아는 표현을 쓰세요.
우리도 따라하려면
모임 이름, 분위기, 필요한 정보(날짜, 장소, 주제 등)를 알려주세요. JSON 파일 수정법을 모르면 클로드 코드에게 물어보세요. "schedule.json에 7월 모임을 추가하려면 어떻게 해?"라고요.
사례 11) 작은 가게의 예약 시스템
장면
서울 연남동의 소규모 꽃집. 사장님이 인스타그램 DM으로 예약을 받고 있었습니다. "금요일 오후 3시에 꽃다발 하나 만들어주실 수 있나요?" 같은 메시지가 하루에 열 건 넘게 옵니다. 대답하고, 수첩에 적고, 겹치는 시간이 있는지 확인하고. DM이 밀리면 놓치는 예약도 생깁니다.
예약 시스템이 있으면 좋겠는데, 네이버 예약이나 카카오 예약은 수수료가 붙습니다. 직접 만들면 수수료가 없는데, 개발자를 고용하면 200만 원은 든다고 합니다.
명령
"꽃집 예약 시스템을 만들어줘. 고객이 웹페이지에서 날짜와 시간을 고르고, 이름과 전화번호를 입력하면 예약이 저장되게 해줘. 같은 시간에 두 명이 예약하면 '이미 예약된 시간입니다'라고 알려줘. 예약 목록은 관리자 페이지에서 볼 수 있게 해줘. 관리자 비밀번호는 flower2025로 설정해줘."
진행 과정
이 사례는 앞의 사례들보다 복잡합니다. 데이터를 저장하고 불러와야 하니까요. 클로드 코드가 프론트엔드(frontend, 프론트엔드, 사용자가 보는 화면)와 백엔드(backend, 백엔드, 데이터를 처리하는 뒷단)를 다 만듭니다.
프론트엔드: 캘린더에서 날짜를 고르고, 가능한 시간대를 보여주고, 이름과 전화번호를 입력하는 화면.
백엔드: 예약 정보를 데이터베이스에 저장하고, 같은 시간에 중복 예약을 막는 로직.
관리자 페이지: 비밀번호를 입력하면 오늘의 예약 목록이 나오는 화면.
클로드 코드가 넥스트제이에스(Next.js, 넥스트제이에스, 웹 프레임워크)와 수파베이스(Supabase, 수파베이스, 무료 데이터베이스 서비스)를 조합해서 만들 수 있습니다. 둘 다 무료 플랜이 있어서 소규모 가게에는 비용이 안 듭니다.
전체 과정에 40분에서 1시간 걸립니다. 다른 사례보다 오래 걸리지만, 개발자에게 외주를 맡기면 며칠은 걸리고 비용도 수십만 원에서 수백만 원 사이입니다.
결과
인터넷에 공개된 예약 페이지. 인스타그램 프로필에 이 링크를 걸어두면, 고객이 직접 예약합니다. 사장님은 관리자 페이지에서 예약 목록을 확인합니다.
비용
시간 1시간, API 비용 5,000원에서 8,000원. 서버 운영비 월 0원(무료 플랜 범위 내). 도메인을 사면 연간 15,000원.
위험
이 사례의 위험은 진짜 주의해야 합니다. 예약 시스템은 고객의 이름과 전화번호를 저장합니다. 개인 정보입니다. 이 데이터가 유출되면 법적 문제가 생길 수 있습니다.
수파베이스는 기본적으로 데이터를 암호화해서 저장하지만, 관리자 페이지의 비밀번호가 "flower2025"처럼 쉬우면 누군가 뚫을 수 있습니다. 비밀번호를 길고 복잡하게 바꾸세요. "Fl0w3r!2025#SeouL" 처럼요.
코드에 비밀번호가 직접 적혀 있지 않은지 확인하세요. 환경 변수(environment variable, 환경 변수, 비밀 정보를 코드 밖에 저장하는 방법)에 넣어야 합니다. 이건 16장 끝의 실패 사례에서 자세히 다룹니다.
우리도 따라하려면
예약 시스템을 만들 때는 수파베이스 같은 외부 서비스를 쓸 줄 몰라도 됩니다. 클로드 코드가 설정을 다 해줍니다. 다만 수파베이스 웹사이트에서 무료 계정을 먼저 만들어야 합니다. 계정을 만들면 API 키가 나오는데, 이 키를 클로드 코드에게 알려주면 연결을 해줍니다. 서비스를 운영하면서 예약이 하루 100건을 넘으면 유료 플랜으로 올라가야 할 수 있습니다.
사례 12) 브라우저를 열고 직접 테스트까지 하는 AI
장면
웹사이트를 만들었습니다. 잘 돌아가는 것 같은데, 버튼을 누르면 진짜 동작하는지, 스마트폰 화면에서 글자가 잘리지 않는지 확인하고 싶습니다. 사람이 하나하나 클릭해가며 확인하는 건 번거롭습니다.
명령
"방금 만든 웹사이트를 브라우저에서 열고, 모든 버튼과 링크를 클릭해봐. 오류가 나는 곳이 있으면 알려주고 고쳐줘. 모바일 화면 크기(375px)에서도 확인해줘."
진행 과정
여기서 브라우저 유즈(Browser Use, 브라우저 유즈, AI가 브라우저를 직접 조작하는 도구)라는 기능이 등장합니다. AI가 진짜 브라우저를 열고, 마치 사람처럼 마우스를 움직이고, 버튼을 클릭하고, 텍스트를 입력합니다.
클로드 코드가 플레이라이트(Playwright, 플레이라이트, 브라우저 자동화 도구)를 써서 브라우저를 엽니다. 웹페이지를 로드하고, 버튼을 하나씩 클릭합니다. 링크가 깨진 곳을 발견하면 보고합니다. "연락처 버튼을 누르면 404 에러가 납니다." 그리고 알아서 고칩니다.
모바일 크기로 화면을 줄여서도 확인합니다. 글자가 화면 밖으로 삐져나가면 CSS를 수정합니다.
전체 과정에 5분에서 10분.
결과
테스트가 끝난 웹사이트. 버튼이 다 동작하고, 모바일에서도 레이아웃이 깨지지 않습니다. AI가 수정한 내용 목록이 터미널에 표시됩니다.
비용
시간 10분, 비용 1,000원에서 2,000원.
위험
브라우저 유즈는 AI가 인터넷에 접속하는 기능입니다. 12장의 뉴스 요약 사례와 마찬가지로, 도커 안에서 돌리는 게 안전합니다. AI가 테스트 중에 외부 사이트에 접속하거나, 예상치 못한 페이지를 열 수 있습니다.
우리도 따라하려면
웹사이트를 만든 직후에 "브라우저에서 테스트해줘"라고 시키면 됩니다. 플레이라이트가 자동으로 설치됩니다. 테스트 범위를 구체적으로 알려주세요. "모든 버튼, 모든 링크, 모바일 크기"처럼요.
실패 사례: 배포했는데 비밀번호가 코드에 그대로 노출
꽃집 사장님의 이야기입니다(사례 11의 후일담). 예약 시스템을 만들고, 깃허브에 코드를 올리고, 버셀에 배포했습니다. 잘 돌아갔습니다. 2주 동안 문제없이 예약을 받았습니다.
그런데 어느 날 관리자 페이지에 들어가보니, 예약 목록이 비어 있었습니다. 누군가 관리자 페이지에 접속해서 예약 데이터를 전부 지운 겁니다.
원인은 이랬습니다. 코드 안에 관리자 비밀번호 "flower2025"가 그대로 적혀 있었습니다. 깃허브에 올린 코드는 누구나 볼 수 있습니다(공개 저장소였거든요). 누군가 깃허브에서 코드를 보고, 비밀번호를 찾고, 관리자 페이지에 들어간 겁니다.
AI에게 "관리자 비밀번호는 flower2025로 설정해줘"라고 시켰으니, AI는 그 비밀번호를 코드에 적었습니다. AI 잘못이 아닙니다. 시키는 대로 한 겁니다. 비밀번호를 코드 밖에 저장하라고 알려주지 않은 사람의 실수입니다.
이런 비밀 정보는 환경 변수 파일(.env 파일)에 저장하고, 이 파일을 깃허브에 올리지 않아야 합니다. .gitignore(깃이그노어, 깃이 무시할 파일 목록) 파일에 .env를 추가하면 됩니다.
방지법: AI에게 시킬 때 이 한 줄을 추가하세요. "비밀번호와 API 키는 .env 파일에 넣고, .gitignore에 .env를 추가해줘."