[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 1회 - 말 한마디로 내 자기소개 페이지 만들기: 아티팩트(Artifacts) 미리보기 설정, 정보와 분위기 프롬프트 작성법, HTML 설계도 저장 및 휴대폰 확인 가이드

[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 1회 - 말 한마디로 내 자기소개 페이지 만들기: 아티팩트(Artifacts) 미리보기 설정, 정보와 분위기 프롬프트 작성법, HTML 설계도 저장 및 휴대폰 확인 가이드

 

코딩을 단 한 번도 배워본 적이 없어도 괜찮습니다. 영어 알파벳으로 가득한 검은색 화면을 보며 외워야 했던 시절은 끝났습니다. 내가 원하는 화면의 모습과 기능을 일상적인 한국어 문장으로 설명하면, 인공지능이 즉석에서 코드를 짜고 눈에 보이는 웹사이트로 그려주는 '바이브 코딩(Vibe Coding)'의 시대가 열렸기 때문입니다.

이번 [바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 24회 연재의 목표는 단 하나입니다. 코딩 경험이 전혀 없는 분이 이 글을 옆에 띄워놓고 차근차근 따라 하기만 하면, 24회차가 끝날 때 회원가입·로그인과 데이터베이스 저장이 작동하는 나만의 웹 서비스를 인터넷에 정식 출시하고 운영할 수 있게 만드는 것입니다.

특히 1회부터 8회까지의 [초급편]에서는 컴퓨터에 그 어떤 프로그램도 설치하지 않습니다. 오직 인터넷 브라우저와 Claude(클로드) 공식 웹사이트의 채팅창 하나만 사용합니다. 첫 시간인 오늘 1회에서는 말 한마디로 내 자기소개 페이지 만들기를 실습하며, 아티팩트(Artifacts) 미리보기 설정, 정보와 분위기 프롬프트 작성법, 그리고 완성된 결과물을 내 컴퓨터와 스마트폰으로 가져오는 HTML 설계도 저장 및 휴대폰 확인 가이드까지 30분 만에 완주해 보겠습니다.

1. 말 한마디로 내 자기소개 페이지 만들기: 오늘 만들 결과물과 30분 실습 준비물

본격적인 실습을 시작하기 전에, 오늘 우리가 30분 뒤에 손에 쥐게 될 결과물이 무엇인지 먼저 확인해 보겠습니다.

(1) 오늘의 실습 요약표

항목	상세 내용
오늘 만들 결과물	내 이름(또는 닉네임), 하는 일(직업), 좋아하는 취미, 한 줄 소개와 연락처 카드가 예쁘게 배치된 한 페이지짜리 개인 프로필 웹사이트
소요 시간	약 30분 (천천히 읽으며 따라 하기 기준)
이번 회차 세팅	프로그램 설치 없음 (0개) / Claude(claude.ai) 무료 또는 유료 계정 로그인만 필요
핵심 실습 4단계	① 새 대화 열기 $\rightarrow$ ② 내 정보와 분위기를 담아 첫 요청 보내기 $\rightarrow$ ③ 오른쪽 화면에서 미리보기 확인 $\rightarrow$ ④ 파일로 저장 후 PC와 휴대폰에서 열기
오늘 깨우칠 핵심 원리	"웹페이지는 글자로 적힌 설계도(HTML)를 인터넷 브라우저가 예쁜 그림으로 번역해서 보여주는 것이다"

(2) 왜 첫 작품이 '자기소개 페이지'인가요?

처음 바이브 코딩을 배울 때 계산기나 복잡한 기능부터 만들려고 하면, 화면 구성과 계산 규칙이 머릿속에서 뒤엉켜 쉽게 지치게 됩니다. 반면 자기소개 페이지는 '내 이름, 내 직업, 내 취미'처럼 내가 세상에서 가장 잘 아는 내용을 재료로 사용합니다.

재료 고민 없이 내가 한 말이 어떻게 웹사이트의 제목이 되고, 카드 박스가 되고, 배경색으로 변하는지 '말과 화면의 연결 고리'를 가장 직관적으로 체험할 수 있는 최고의 첫걸음입니다.

2. 아티팩트(Artifacts) 미리보기 설정: 새 대화를 열고 오른쪽 도화지 화면 켜기

자, 이제 컴퓨터에서 크롬(Chrome), 엣지(Edge), 또는 사파리(Safari) 브라우저를 열고 화면의 절반은 이 매뉴얼을, 나머지 절반에는 클로드 화면을 나란히 띄워주세요.

Step 1. Claude 접속 및 새 대화 화면 열기

1. 주소창에 https://claude.ai를 입력해 접속하고 로그인합니다. (구글 계정으로 10초 만에 무료 가입 및 로그인이 가능합니다.)
2. 로그인 후 왼쪽 메뉴 상단에 있는 [+ 새 채팅(New Chat)] 버튼을 눌러 깨끗한 대화창을 준비합니다.
3. 채팅 입력창 아래에 모델 선택 메뉴가 보인다면, 요금제마다 기본 모델이 다를 수 있으니 기본으로 선택된 모델을 그대로 두세요.

Step 2. 아티팩트(Artifacts) 미리보기가 작동하는지 확인하기 (중요 체크포인트)

클로드가 다른 AI보다 바이브 코딩 입문자에게 압도적으로 유리한 이유는 바로 아티팩트(Artifacts)라는 실시간 미리보기 창 때문입니다. 왼쪽 채팅창에서 말을 걸면, 오른쪽 화면이 반으로 갈라지면서 만들어진 웹사이트를 그 자리에서 즉시 보여줍니다.

• 만약 나중에 코드를 달라고 했는데 오른쪽 미리보기 창이 나타나지 않는다면?:
  1. 왼쪽 아래 내 프로필 이름(이니셜 아이콘)을 클릭합니다.
  2. [설정(Settings)] $\rightarrow$ [기능(Capabilities)] 메뉴로 들어갑니다.
  3. '코드 실행 및 파일 생성(Code execution and file creation)' 스위치가 켜져 있는지 확인해 주세요. 현재 공식 도움말 기준으로 이 기능이 꺼져 있으면 아티팩트 미리보기 창이 나타나지 않습니다.

3. 정보와 분위기 프롬프트 작성법: 이름·직업·취미를 담아 첫 요청 보내기

이제 클로드에게 첫 번째 주문을 넣을 차례입니다. 코딩 용어는 단 한 단어도 쓸 필요가 없습니다. 마치 센스 있는 디자이너 친구에게 *"내 소개 페이지를 하나 만들어 줄래? 내 정보는 이렇고, 전체적인 느낌은 이랬으면 좋겠어"*라고 말하듯 적어주면 됩니다.

Step 1. 복사해서 바로 쓰는 첫 번째 프롬프트

아래 네모 박스 안의 글을 그대로 복사해서 클로드 채팅창에 붙여 넣으세요. 내용만 여러분의 닉네임, 직업, 취미로 살짝 바꿔서 엔터를 눌러보세요. (단, 처음 연습할 때는 개인정보 보호를 위해 실제 전화번호나 개인 이메일 대신 vibe@example.com 같은 가상의 연습용 정보를 그대로 사용하시는 것을 권장합니다.)

[복사해서 붙여 넣을 프롬프트]

나를 소개하는 깔끔한 한 페이지짜리 웹사이트를 만들어줘. 내가 화면에서 바로 결과를 볼 수 있도록 하나의 HTML 파일로 만들어서 미리보기로 띄워줘.

들어갈 내용은 다음과 같아:

1. 이름(닉네임): 김바이브 (일상 기록가 & 마케터)
2. 한 줄 소개: "복잡한 것을 단순하고 따뜻하게 정리하는 것을 좋아합니다."
3. 내가 하는 일: 브랜드 스토리 기획, 뉴스레터 발행, 새로운 AI 도구 실험하기
4. 내가 좋아하는 취미 3가지: 주말 아침 드립커피 내리기, 동네 독립서점 산책, 필름 카메라로 골목길 찍기
5. 하단 인사말: "가벼운 커피챗이나 협업 제안은 언제든 환영합니다!" (연습용 이메일 주소: vibe@example.com)

디자인 분위기 요청:

• 전체적으로 따뜻한 크림색 배경에 코랄 오렌지색으로 포인트를 줘.
• 글씨가 답답해 보이지 않게 여백을 넉넉하게 두고, 각 항목(하는 일, 취미)은 둥근 모서리의 카드 형태로 예쁘게 배치해 줘.
• 각 취미 옆에는 어울리는 귀여운 이모지(☕, 📚, 📷 등)를 붙여줘.

Step 2. 화면 변화 관찰하기 (미리보기 확인)

프롬프트를 입력하고 엔터를 누르면 놀라운 광경이 펼쳐집니다.

1. 클로드가 *"따뜻한 크림색과 코랄 오렌지 톤을 활용한 자기소개 웹페이지를 만들어 드리겠습니다"*라고 대답하면서, 화면 오른쪽에 새로운 창(아티팩트 창)을 엽니다.
2. 처음 5~10초 동안은 영어로 된 알 수 없는 코드(<!DOCTYPE html>, <style>, <div> 등)가 폭포수처럼 빠르게 내려갑니다. 겁먹지 마세요! 외우거나 읽을 필요가 전혀 없습니다. 클로드가 열심히 설계도를 그리는 중입니다.
3. 코드 작성이 끝나는 순간, 오른쪽 창이 스르륵 바뀌면서 따뜻한 크림색 배경 위에 내 이름과 이모지가 박힌 세련된 웹사이트 화면이 짠 하고 나타납니다!

Step 3. 오른쪽 미리보기 창 상단 버튼 익히기

오른쪽 미리보기 창 맨 위(우측 상단)를 보면 아주 중요한 스위치 두 개가 있습니다. 마우스로 한 번씩 눌러보세요.

• [미리보기(Preview) 또는 눈 모양 아이콘]: 완성된 웹사이트의 그림 화면을 보여줍니다. 마우스 스크롤을 내려보고, 카드 위에 마우스를 올려보세요.
• [코드(Code) 또는 </> 아이콘]: 방금 클로드가 작성한 글자 설계도(HTML 코드)를 보여줍니다.

이 두 버튼을 번갈아 눌러보는 것만으로도 오늘 배울 가장 중요한 원리를 눈으로 직접 확인하신 셈입니다. 똑같은 문서인데 '코드'를 누르면 글자(설계도)로 보이고, '미리보기'를 누르면 그림(웹사이트)으로 보입니다.

4. HTML 설계도 저장 및 휴대폰 확인 가이드: 내 컴퓨터에 파일로 다운로드하고 스마트폰으로 열어보기

지금까지 만든 페이지는 클로드 대화창 안에만 들어 있습니다. 이제 이 웹사이트를 내 컴퓨터 바탕화면으로 꺼내어 저장하고, 내 휴대폰 화면에서도 열어보는 실습을 진행하겠습니다. 이 단계를 직접 해봐야 *"아, 웹사이트라는 게 결국 파일 하나였구나!"*라는 감이 확실히 잡힙니다.

Step 1. 내 컴퓨터로 웹페이지 파일(.html) 저장하기

1. 클로드 오른쪽 미리보기 창 우측 상단(또는 하단 메뉴)을 보면 [다운로드(Download) 아이콘(아래 화살표 모양)]이 있습니다.
2. 이 다운로드 버튼을 클릭하면 내 컴퓨터의 다운로드(Downloads) 폴더에 index.html (또는 profile.html 등 끝이 .html로 끝나는 파일)이 저장됩니다.
3. 만약 다운로드 버튼 대신 [복사(Copy)] 버튼만 보인다면?
   • 클로드 채팅창에 이렇게 한 줄만 입력해 보세요: "방금 만든 페이지를 내 컴퓨터에 저장할 수 있게 단일 HTML 파일 형태로 다시 만들어줘."
   • 다운로드된 파일의 아이콘을 보면 한글이나 워드 아이콘이 아니라, 여러분이 평소 쓰는 크롬(Chrome)이나 엣지(Edge) 인터넷 브라우저 아이콘 모양으로 되어 있을 것입니다.

Step 2. 내 컴퓨터에서 더블클릭해서 열어보기 + 메모장으로 열어보기 (원리 체험)

1. 내 컴퓨터의 다운로드 폴더를 열고, 방금 받은 .html 파일을 마우스로 더블클릭해 보세요.
2. 클로드 사이트가 아닌 새 인터넷 창이 열리면서, 방금 만든 내 자기소개 웹사이트가 화면 가득 뜹니다!
3. [핵심 체험] 이번에는 그 .html 파일 위에서 마우스 오른쪽 클릭 $\rightarrow$ [연결 프로그램] $\rightarrow$ [메모장(Windows)] 또는 [텍스트 편집기(Mac)]를 눌러 열어보세요.
   • 메모장으로 열면 아까 봤던 <html>, <body>, 김바이브 같은 글자(설계도)가 나옵니다.
   • 크롬 브라우저로 열면 예쁜 웹사이트(그림)가 나옵니다.
   • 결론: 웹페이지는 대단한 마법이 아니라, 메모장에 글자로 적은 설계도 파일을 브라우저가 읽어서 예쁜 화면으로 그려주는 것뿐입니다!

Step 3. 내 휴대폰에서 열어보는 2가지 방법 (주의사항 포함!)

컴퓨터에서 만든 내 자기소개 페이지를 휴대폰 화면에서도 확인해 볼까요? 스마트폰 기종(안드로이드/아이폰)과 앱 버전에 따라 .html 파일을 직접 여는 동작 방식이 다르므로, 아래 두 가지 방법 중 편한 방법을 선택해 보세요.

방법 A (가장 간편·기종 무관): Claude의 '공개 링크' 기능 쓰기

1. 클로드 오른쪽 미리보기 창 상단(또는 하단)에 있는 공유 버튼을 클릭합니다. 요금제에 따라 Free·Pro·Max 요금제에서는 [Publish(게시)], Team·Enterprise 요금제에서는 [Share & copy link(공유 및 링크 복사)]로 표시됩니다. 본인 화면에 보이는 버튼을 눌러주세요.
2. 링크 복사 버튼을 누르면 https://claude.ai/public/artifacts/ 형태의 인터넷 주소가 복사됩니다.
3. 이 주소를 카카오톡 '나와의 채팅'에 붙여 넣고 휴대폰에서 클릭해 보세요! 기종에 상관없이 내 휴대폰 화면에 딱 맞게 자기소개 페이지가 열립니다.

주의: 공개 링크(claude.ai/public/artifacts/...)는 만료 기한이나 비밀번호 설정이 없으며, 주소를 아는 누구나 볼 수 있고 검색엔진에 노출될 수 있습니다. 실제 전화번호나 개인 이메일은 넣지 말고, 연습용 정보로 만들어 보세요.

방법 B (파일 직접 전달): 내 휴대폰으로 .html 파일을 보내서 열기

1. 컴퓨터에 저장한 .html 파일을 카카오톡 '나와의 채팅'이나 이메일 등으로 내 휴대폰에 보냅니다.
2. 휴대폰 기기나 OS·앱 버전에 따라 카카오톡 안에서 파일을 눌렀을 때 바로 웹페이지로 열리는 경우도 있고, HTML 뷰어나 텍스트(코드) 화면으로 열리는 경우도 있습니다.
3. 만약 내 기기에서 화면이 바로 보이지 않는다면, 파일을 휴대폰에 저장한 뒤 파일 관리 앱(안드로이드 '내 파일' 등)에서 크롬(Chrome) 등 브라우저 앱으로 연결해 열어보세요. (아이폰 등 기기 보안 정책상 로컬 .html 파일의 브라우저 실행이 까다로운 환경이라면 위의 방법 A나 모바일 클로드 앱을 이용하는 것이 가장 빠릅니다.)

5. 1회 핵심 원리 정리 및 다음 회차 예고: 웹페이지는 글로 쓴 설계도(HTML)를 브라우저가 그림으로 보여주는 것

축하합니다! 여러분은 방금 코딩 문법을 단 한 줄도 배우지 않고, 설치 프로그램도 하나 없이 생애 첫 번째 웹페이지를 만들고 PC와 스마트폰에서 확인하는 데 성공하셨습니다.

오늘 실습을 통해 몸으로 익힌 3가지 핵심 원리를 머릿속에 가볍게 챙겨두세요.

(1) 오늘 배운 것 3줄 요약

1. 웹페이지의 정체: 우리가 매일 보는 웹사이트는 사실 글자로 적힌 문서(HTML 설계도)이며, 크롬이나 사파리 같은 브라우저가 이 설계도를 읽어서 우리 눈에 예쁜 그림과 카드 박스로 번역해 보여주는 것입니다.
2. 바이브 코딩의 역할 분담: 예전에는 사람이 직접 HTML 설계도 문법을 외워서 타이핑해야 했지만, 이제는 사람이 '들어갈 내용과 분위기'를 말하고 클로드가 'HTML 설계도'를 작성합니다.
3. 내 컴퓨터 속 파일 vs 공개 링크: 오늘 다운로드한 .html 파일은 내 기기 안에만 있는 파일이며, 내가 원하는 고유 도메인 주소로 진짜 웹 서비스를 배포하는 방법은 중급편 13회에서 단계별로 배웁니다.

(2) 1회 완료 셀프 체크리스트

다음 회차로 넘어가기 전에 아래 3가지를 모두 해봤는지 체크해 보세요.

• [x] 클로드 채팅창에 내 이름(닉네임)·직업·취미와 원하는 분위기를 넣어 자기소개 페이지를 만들었다.
• [x] 오른쪽 미리보기 창에서 [미리보기]와 [코드] 버튼을 번갈아 눌러보며 설계도와 화면의 차이를 확인했다.
• [x] 만든 페이지를 .html 파일로 저장해 내 컴퓨터에서 열어보고, 휴대폰에서도 확인했다.

(3) 다음 2회 예고: 원하는 대로 고치는 요청법

오늘 만든 자기소개 페이지, 첫 작품치고는 꽤 근사하지만 자세히 보면 아쉬운 점이 눈에 띌 겁니다. "글씨 크기가 조금만 더 컸으면 좋겠는데...", "배경색은 마음에 드는데 취미 박스 색깔만 바꿀 순 없을까?", "내 사진이 들어갈 동그란 자리랑 연락처 버튼도 넣고 싶은데!"

이럴 때 초보자들이 *"좀 더 예쁘게 고쳐줘"*라고 말하면, 클로드가 원래 마음에 들었던 부분까지 싹 다 갈아엎어 버리는 대참사가 일어납니다. 다음 2회 [원하는 대로 고치는 요청법]에서는 마음에 드는 부분은 그대로 고정해 두고 내가 원하는 부분만 외과 수술하듯 정확하게 고치는 프롬프트 비법을 배워, 오늘 만든 자기소개 페이지의 완성도를 200% 끌어올려 보겠습니다!