[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 3회 - 휴대폰으로 보는 모바일 초대장: 모바일 화면 기준 요청법, 창 크기 조절과 스마트폰 확인, 실시간 카운트다운 추가와 반응형 디자인 원리

[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 3회 - 휴대폰으로 보는 모바일 초대장: 모바일 화면 기준 요청법, 창 크기 조절과 스마트폰 확인, 실시간 카운트다운 추가와 반응형 디자인 원리

지난 1회와 2회에서 우리는 나를 소개하는 멋진 프로필 웹사이트를 만들고, 원하는 부분만 콕 집어 수정하는 법을 배웠습니다. 그런데 우리가 일상에서 주변 사람들에게 웹페이지 링크를 보낼 때, 상대방은 컴퓨터와 휴대폰 중 어느 쪽으로 열어볼 확률이 높을까요?

카카오톡이나 문자 메시지로 링크를 주고받는 요즘에는 열 명 중 아홉 명이 세로로 길쭉한 스마트폰 화면으로 페이지를 열어봅니다. 컴퓨터의 넓고 커다란 모니터 화면만 생각하고 웹페이지를 만들면, 정작 휴대폰에서 열었을 때 글씨가 개미만 하게 작아지거나 버튼이 화면 밖으로 삐져나가 누르기 힘든 일이 벌어집니다.

오늘 3회: 휴대폰으로 보는 모바일 초대장에서는 연말 모임, 생일 파티, 독서 모임, 집들이 등에 바로 써먹을 수 있는 모바일 초대장을 만들어 봅니다. 처음부터 모바일 화면 기준 요청법으로 깔끔한 카드형 초대장을 만들고, 창 크기 조절과 스마트폰 확인으로 화면 변화를 직접 테스트한 뒤, 모임 시간까지 1초 단위로 줄어드는 실시간 카운트다운 추가와 반응형 디자인 원리까지 45분 만에 마스터해 보겠습니다.

1. 휴대폰으로 보는 모바일 초대장: 오늘 만들 결과물과 45분 실습 준비

오늘 우리가 만들 초대장은 단순한 안내 이미지가 아닙니다. 손가락으로 터치하면 지도 앱으로 연결되고, 남은 시간이 실시간으로 똑딱거리며, 참석 메시지가 자동으로 복사되는 살아 움직이는 모바일 웹 초대장입니다.

(1) 오늘의 실습 요약표

항목	상세 내용
오늘 만들 결과물	모임 날짜·시간, 장소 안내, 길찾기 지도 링크, 참석 확인 버튼, 그리고 실시간 D-Day 카운트다운 시계가 들어간 모바일 최적화 초대장
소요 시간	약 45분
이번 회차 세팅	추가 설치 및 가입 없음 (Claude(claude.ai)에서 새 대화를 열어 시작)
핵심 실습 3단계	① 휴대폰 화면 기준으로 초대장 첫 요청 보내기 $\rightarrow$ ② PC 창 크기를 줄여보고 휴대폰으로 확인하기 $\rightarrow$ ③ 2회 복습 공식을 써서 실시간 카운트다운 시계 추가하기
오늘 깨우칠 핵심 원리	"반응형 디자인(Responsive Design): 컴퓨터에서 볼 때와 휴대폰에서 볼 때 화면 폭에 맞춰 알아서 크기와 배치를 바꾸는 웹페이지의 원리"

(2) 왜 1·2회 대화방이 아니라 '새 대화'에서 시작하나요?

2회에서는 1회 때 만든 자기소개 페이지를 이어서 고쳤기 때문에 같은 대화방을 썼습니다. 하지만 오늘 만들 모바일 초대장은 자기소개 페이지와 완전히 다른 새로운 작품입니다.

이전 대화방에서 계속 *"이번엔 초대장 만들어줘"*라고 말하면, 클로드가 예전 자기소개 페이지의 코드나 색상을 불필요하게 섞어버릴 수 있습니다. 새로운 주제의 작품을 만들 때는 항상 왼쪽 상단의 [+ 새 채팅(New Chat)]을 눌러 깨끗한 도화지에서 출발하는 것이 가장 정확합니다.

2. 모바일 화면 기준 요청법: 날짜·장소·지도 링크·참석 버튼이 있는 첫 초대장 만들기

클로드에게 별다른 말 없이 *"모임 초대장 만들어줘"*라고 하면, 가로로 넓은 컴퓨터 모니터 기준의 웹페이지를 만들어 줄 때가 많습니다. 처음부터 "스마트폰 화면에서 볼 모바일 초대장"이라는 기준을 명확히 알려주는 것이 오늘의 첫 번째 비결입니다.

Step 1. 모바일 화면 기준을 잡아주는 핵심 표현 3가지

프롬프트에 아래 세 가지 표현을 넣어주면, 클로드는 스마트폰 한 손 조작에 딱 맞는 레이아웃을 설계합니다.

1. "휴대폰 세로 화면(폭 420px 내외)에 꽉 차는 모바일 카드 형태로 만들어줘.": 컴퓨터에서 열어도 휴대폰 화면처럼 가운데에 예쁜 모바일 카드 모양으로 모아 보여달라는 뜻입니다.
2. "버튼은 엄지손가락으로 누르기 편하게 가로로 길고 큼직하게 만들어줘.": 모바일에서는 작은 글씨 링크보다 큼직한 터치 버튼이 훨씬 쓰기 편합니다.
3. "지도 보기는 복잡한 가입 없이 바로 열리는 지도 검색 링크로 연결해 줘.": 별도의 지도 개발자 키(API)를 발급받지 않아도, 클릭 즉시 네이버 지도나 카카오맵 검색 결과로 이동하는 실용적인 방법입니다.

Step 2. 복사해서 바로 쓰는 모바일 초대장 첫 요청 프롬프트

클로드에서 [+ 새 채팅]을 열고 아래 프롬프트를 복사해 붙여 넣으세요. 모임 이름이나 날짜, 장소는 여러분이 계획 중인 실제 모임으로 바꾸셔도 좋습니다.

주의 (1회 복습): 만약 완성된 초대장을 공개 링크(Publish)로 테스트할 예정이라면, 실제 집 주소나 개인 전화번호 대신 '강남역 인근 카페' 같은 공개된 장소 이름과 연습용 정보를 사용해 주세요.

[복사해서 붙여 넣을 프롬프트 1 - 모바일 초대장 기본 제작]

친구들에게 카카오톡으로 보낼 '연말 독서 & 커피 모임' 모바일 웹 초대장을 만들어줘. 내가 오른쪽 미리보기에서 바로 확인하고 파일로 저장할 수 있게 단일 HTML 파일로 만들어줘.

[화면 기준 요청]

• 휴대폰으로 열어보는 사람이 대부분이니, 스마트폰 세로 화면(최대 폭 420px) 기준으로 한눈에 들어오게 디자인해 줘.
• PC 화면에서 열었을 때도 옆으로 너무 퍼지지 않고, 화면 정중앙에 스마트폰 모양의 세련된 카드 형태로 보이게 해줘.

[초대장에 들어갈 내용]

1. 상단 배너: 반짝이는 작은 전구 느낌의 따뜻한 일러스트나 아이콘과 함께 "2026 겨울, 올해의 책 한 권 들고 만나요"라는 제목
2. 모임 일시: 2026년 12월 19일(토) 오후 3시 00분
3. 모임 장소: 서울 성수동 '카페 바이브' 2층 테라스룸 (지하철 성수역 3번 출구 도보 5분)
4. 준비물: 올해 가장 인상 깊게 읽은 책 1권, 가벼운 마음

[버튼 2개와 동작 기능]

• 엄지손가락으로 터치하기 편하게 가로로 꽉 차는 큼직한 버튼 2개를 만들어줘.
• 버튼 1 [📍 지도에서 위치 보기]: 클릭하면 새 창으로 네이버 지도에서 '성수역'을 검색한 결과 페이지(https://map.naver.com/p/search/성수역)가 열리게 해줘.
• 버튼 2 [🙋 참석 의사 전달하기]: 클릭하면 화면에 축하 폭죽(색종이) 애니메이션이 터지면서, "참석 확인 문구가 복사되었습니다! 카톡방에 붙여 넣어 주세요."라는 안내창이 뜨고, 클립보드에 "저 12월 19일 모임 참석합니다! 🙋"라는 문구가 자동 복사되게 만들어줘.

[디자인 분위기]

• 따뜻한 겨울 저녁 느낌이 나는 딥 그린(짙은 초록색)과 크림 화이트, 골드 포인트를 조합해 줘.

Step 3. 미리보기 창에서 지도 버튼과 참석 버튼 눌러보기

오른쪽 미리보기(아티팩트) 창에 초대장이 나타났나요? 눈으로만 보지 말고 마우스로 버튼 두 개를 직접 클릭해 보세요!

1. [📍 지도에서 위치 보기] 클릭: 새 탭이 열리면서 네이버 지도 '성수역' 화면으로 바로 이동하는지 확인합니다. (나중에 실제 모임을 할 때는 주소 끝의 성수역 글자만 실제 식당·카페 이름으로 바꾸면 어떤 장소든 1초 만에 연결됩니다!)
2. [🙋 참석 의사 전달하기] 클릭: 버튼을 누르는 순간 화면에 알록달록한 폭죽이 터지면서 안내 문구가 뜨는지 확인합니다. 그리고 클로드 채팅 입력창에 Ctrl + V(붙여넣기)를 해보세요. "저 12월 19일 모임 참석합니다! 🙋"라는 문구가 실제로 복사되어 붙여 넣어지는 것을 확인할 수 있습니다!

[잠깐! 왜 참석 버튼을 눌렀을 때 내 명단이 서버에 바로 저장되지 않고 '문구 복사' 방식을 썼을까요?] 아직 우리가 만든 초대장은 '앞면 화면(프론트엔드)'만 있고, 여러 사람의 응답을 한곳에 모아 저장하는 '뒷면 창고(데이터베이스)'가 없기 때문입니다. 다른 사람이 누른 참석 명단과 한 줄 메시지가 한 화면에 실시간으로 차곡차곡 쌓이는 기능은 **고급편 17회(백엔드와 데이터베이스: 함께 쓰는 방명록)**에서 배우게 됩니다. 그전까지는 지금처럼 클립보드 복사 기능을 쓰면 서버 없이도 카톡방에서 100% 실용적으로 쓸 수 있습니다!

3. 창 크기 조절과 스마트폰 확인: PC 브라우저 폭을 줄여보고 휴대폰에서 직접 열어보기

이제 오늘의 핵심 실험인 '화면 크기에 따라 웹페이지가 어떻게 변하는지' 직접 눈으로 확인해 보겠습니다.

Step 1. 클로드 미리보기 창의 경계선 잡고 좌우로 움직여 보기

1. 컴퓨터 화면에서 클로드의 왼쪽 채팅창과 오른쪽 미리보기 창 사이에 있는 세로 구분선(경계선)에 마우스 커서를 가져다 대세요.
2. 마우스 모양이 좌우 화살표(↔)로 바뀌면, 마우스를 누른 채로 오른쪽으로 쭉 밀어 미리보기 창을 좁게 만들어 보세요. 반대로 왼쪽으로 당겨 넓게도 만들어 보세요.
3. 또는1회 때 배운 대로 .html 파일을 다운로드해 크롬 브라우저로 연 다음, 브라우저 창의 오른쪽 끝 모서리를 마우스로 잡고 스마트폰처럼 폭을 좁혔다 넓혔다 해보세요.

무엇이 보이나요?

• 창이 넓을 때는 초대장 카드가 화면 한가운데에 예쁘게 자리 잡고 양옆에 여유 공간(배경)이 생깁니다.
• 창을 스마트폰처럼 좁히면 양옆 여백이 자연스럽게 사라지면서, 글씨와 버튼이 잘리지 않고 화면 폭에 딱 맞게 줄어듭니다.
• 이처럼 하나의 웹페이지가 모니터, 태블릿, 스마트폰 등 화면 크기에 맞춰 마치 고무줄처럼 유연하게 배치를 바꾸는 기술을 '반응형 디자인(Responsive Design)'이라고 부릅니다.

Step 2. 내 휴대폰으로 보내서 실제 그립감 확인하기

컴퓨터에서 창을 줄여보는 것과 실제로 내 손에 쥔 휴대폰으로 보는 것은 느낌이 또 다릅니다. 1회 때 배운 방법 중 가장 편한 방법으로 휴대폰에서 열어보세요.

1. 공개 링크로 확인하기: 미리보기 창 상단(또는 하단)의 [Publish(게시)] 또는 [Share & copy link] 버튼을 눌러 생성된 https://claude.ai/public/artifacts/ 주소를 카톡 '나와의 채팅'으로 보내 휴대폰에서 열어봅니다. (실제 개인정보가 없는 연습용 내용인지 한 번 더 확인하세요!)
2. 휴대폰 화면 체크리스트:
   • 휴대폰을 세로로 들었을 때 좌우로 화면이 흔들리거나 잘리는 글씨가 없는가?
   • 날짜와 장소 글씨가 눈을 찌푸리지 않고도 한눈에 읽히는 크기인가?
   • 엄지손가락으로 [참석 의사 전달하기] 버튼을 눌렀을 때 다른 버튼과 겹치지 않고 편하게 눌리는가?

4. 실시간 카운트다운 추가와 반응형 디자인 원리: 1초마다 움직이는 D-Day 시계 달기

초대장의 기본 뼈대가 완성되었으니, 이제 2회에서 배웠던 "다른 부분은 그대로 두고 ○○만 추가해 줘" 공식을 복습할 차례입니다.

모임 초대장에 "모임 시작까지 앞으로 며칠 몇 시간 몇 분 몇 초 남았습니다"라고 1초마다 숫자가 실시간으로 줄어드는 카운트다운 시계를 달아주면 초대장을 받는 사람들의 기대감이 확 살아납니다.

Step 1. 카운트다운 타이머 추가 프롬프트 보내기

방금 초대장을 만든 그 대화창에서 그대로 이어서 아래 프롬프트를 복사해 붙여 넣으세요.

[복사해서 붙여 넣을 프롬프트 2 - 실시간 카운트다운 추가]

지금 만든 초대장의 디자인과 지도·참석 버튼 기능은 전부 마음에 들어. 다른 부분은 그대로 두고, 상단 제목과 모임 일시 안내 사이에 '실시간 카운트다운 시계' 영역만 하나 추가해 줘.

1. 기준 시각인 '2026년 12월 19일 오후 3시 00분'까지 남은 시간을 계산해서 [남은 일수]일 : [시간]시간 : [분]분 : [초]초 형태의 네모난 숫자 카드 4개가 가로로 나란히 보이게 해줘.
2. 초 단위가 1초마다 실시간으로 줄어들면서 똑딱거리는 움직임이 보이게 해줘.
3. 휴대폰의 좁은 화면에서 봤을 때도 숫자 카드 4개가 두 줄로 깨지지 않고, 한 줄에 깔끔하게 들어오도록 크기를 자동으로 맞춰줘(반응형 적용).

Step 2. 1초마다 줄어드는 시계와 모바일 폭 확인하기

프롬프트를 보내고 몇 초 뒤 새롭게 바뀐 미리보기 화면을 보세요!

1. 초대장 상단에 00일 : 00시간 : 00분 : 00초 모양의 금빛(또는 포인트 색상) 디지털 시계 카드 4개가 나란히 생겼고, 맨 오른쪽 '초' 숫자가 1초마다 실시간으로 바뀌며 살아 움직이는 것을 볼 수 있습니다.
2. 마지막에 우리가 *"휴대폰의 좁은 화면에서도 숫자 카드 4개가 한 줄에 깔끔하게 들어오도록 맞춰줘"*라고 구체적으로 지시했기 때문에, 창 폭을 좁혀도 시계 박스가 아래로 밀려 내려가지 않고 예쁘게 크기를 줄이며 한 줄을 유지합니다.

Step 3. 만약 카운트다운 날짜를 내일이나 다음 주로 바꾸고 싶다면?

클로드에게 다시 말할 수도 있지만, 1회 때 배운 [코드(</>)] 보기 버튼을 눌러보면 우리 스스로도 5초 만에 고칠 수 있습니다!

1. 미리보기 창 상단의 [코드(Code) 또는 </>] 아이콘을 살짝 눌러보세요.
2. 아래쪽으로 스크롤을 내리다 보면 2026-12-19T15:00:00처럼 우리가 말한 날짜와 시간 숫자가 적힌 줄이 한눈에 보입니다.
3. 즉, 지금까지는 정지된 글자(HTML)와 색깔(CSS)만 있었다면, 오늘 추가한 카운트다운 시계와 참석 복사 버튼은 웹페이지에 시계 계산과 움직임을 불어넣는 역할(JavaScript)이 함께 들어간 것입니다. (이 세 가지 역할의 차이는 4회와 10회에서 더 재미있게 파헤쳐 봅니다!)

완성된 최종 초대장은 [다운로드] 버튼을 눌러 invitation.html로 내 컴퓨터에 꼭 저장해 두세요.

5. 3회 핵심 원리 정리 및 다음 회차 예고: 화면 크기에 맞춰 옷을 갈아입는 웹페이지(반응형 디자인)

오늘 45분 동안 여러분은 내 컴퓨터 안에서만 보던 웹페이지를 남들에게 카톡으로 보내줄 수 있는 진짜 모바일 초대장으로 발전시켰습니다.

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

1. 반응형 디자인(Responsive Design): 웹페이지가 열리는 기기(넓은 PC 모니터 vs 좁은 스마트폰 화면)의 가로 폭을 스스로 감지해서, 글씨 크기와 카드 배치를 화면에 딱 맞게 자동으로 조절하는 기술입니다.
2. 모바일 우선(Mobile-First) 요청법: 스마트폰 사용자가 주로 볼 페이지를 만들 때는 처음 요청할 때부터 "스마트폰 세로 화면 기준으로, 버튼은 엄지손가락으로 누르기 편하게"라고 기준을 잡아주어야 두 번 일하지 않습니다.
3. 정지된 화면에서 움직이는 화면으로: 단순히 글자만 보여주는 것을 넘어, 1초마다 줄어드는 카운트다운 시계와 버튼 클릭 시 문구를 복사해 주는 동작까지 말 한마디로 구현할 수 있습니다.

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

오늘 실습을 모두 마쳤는지 체크해 보세요.

• [x] 새 대화를 열고 스마트폰 세로 화면 기준의 모바일 초대장을 만들었다.
• [x] PC 브라우저(또는 미리보기 창)의 가로 폭을 넓혔다 좁혔다 하며 화면이 유연하게 변하는 반응형 동작을 확인했다.
• [x] 다른 부분은 그대로 두고 실시간 D-Day 카운트다운 시계를 추가한 뒤, 휴대폰에서도 한 줄로 예쁘게 나오는지 확인했다.

(3) 다음 4회 예고: 더치페이 계산기

지금까지 1~3회에서 만든 자기소개 페이지와 모바일 초대장은 주로 '내가 미리 적어둔 정보를 예쁘게 보여주는 웹페이지'였습니다.

그렇다면 사용자가 화면에 직접 숫자를 입력하면, 웹페이지가 복잡한 계산을 대신 해주는 '도구(앱)'도 말로 만들 수 있을까요? 예를 들어 모임이 끝난 뒤 "술 마신 사람 4명과 음료수만 마신 사람 2명의 회비를 공정하게 따로 나누고, 100원 단위 자투리 금액까지 깔끔하게 정리해 주는 더치페이 계산기" 같은 것 말입니다!

다음 4회 [더치페이 계산기]에서는 화면 모양이 아니라 '동작 규칙(입력 $\rightarrow$ 처리 $\rightarrow$ 출력)'을 클로드에게 설명하는 법을 배우고, AI가 만든 계산기가 정말로 1원도 틀리지 않는지 손계산과 비교 검증하는 실전 노하우를 배워보겠습니다!