어르신들 글씨 작아서 안 보인다는 전화 이제 완전히 해방! 카카오톡 링크 터치 한 번에 큼직한 글씨 안내문과 전화 연결 버튼이 나오는 모바일 전용 웹페이지를 5분 만에 만드는 백과사전식 가이드입니다.
⏱️ 작업시간 3시간 -> 5분포스터 인쇄비 0원 전액 절감카톡 터치 즉시 전화연결Netlify 무료 0원 배포법
🌿 1. 사복쌤, 이럴 때 꼭 쓰세요! (현장 비포 & 애프터 대화록)
사회복지관 홍보 담당자 김 대리와 사업 담당 이 팀장의 실제 업무 대화를 통해 왜 이 모바일 안내 페이지가 필요한지 알아봅니다.
이 팀장: "김 대리님, 다음 달 어르신 스마트폰 교실 홍보 포스터 디자인 다 나왔나요? 다음 주 월요일부터 신청받아야 하는데!"
김 대리: "팀장님, 디자이너 툴로 만들어서 인쇄소 발주 넣으려는데 100장 인쇄비만 15만 원이 넘어요. 게다가 어르신 단톡방에 사진 파일로 올리면 글자가 작아서 잘 안 보이신다고 매번 복지관으로 전화가 수십 통씩 오더라고요..."
이 팀장: "맞아! 지난번에도 포스터 전화번호가 작아서 다른 번호로 잘못 누르신 어르신이 계셨지. 카톡에 올렸을 때 어르신 휴대폰 화면 전체에 글자가 시원시원하게 큼직하게 보이고, 전화도 바로 걸리는 전용 링크 같은 건 못 만드나?"
김 대리: "안티그래비티 IDE로 5분 만에 어르신 전용 모바일 웹페이지를 만들 수 있어요! 인쇄비도 0원이고, 아래 녹색 버튼만 누르면 바로 복지관으로 전화가 걸립니다!"
❌ 기존 홍보 방식 (겪게 되는 5가지 고충)
1. 비용 지출: 종이 포스터/전단지 인쇄비 10만~20만 원 지출
2. 수정 불가: 장소나 일시가 갑자기 바뀌면 종이를 다 폐기하고 재인쇄
3. 가독성 저하: 카톡 사진 첨부 시 핀치 줌(손가락으로 확대) 해야 해서 어르신 불편
4. 전화 오타: 포스터의 번호를 보고 입력하다가 번호 오타 발생
5. 문의 폭주: "선생님 글씨 안 보여요" 전화 응대로 하루 업무 마비
✨ 안티그래비티 모바일 페이지 (도입 후 5가지 기적)
1. 비용 0원: 종이 없이 카카오톡 주소 링크 하나로 전달
2. 실시간 수정: 내용이 바뀌어도 파일만 수정하면 링크 그대로 반영
3. 왕눈이 글씨: 어르신 시력에 맞춘 22px 이상 큼직한 파스텔 폰트
4. 1초 전화연결: 하단 [📞 전화로 바로 신청하기] 대형 녹색 버튼
5. 업무 자동화: 단순 문의 전화 90% 감소, 접수 효율 300% 상승!
🖼️ 2. 완성된 모바일 안내 페이지의 5대 핵심 요소 분석 (미리보기)
AI 지시 후 내 컴퓨터에 생성되는 모바일 페이지의 시각적 요소와 설계 의도입니다.
📱 어르신 스마트폰 화면 실물 렌더링 예시
2026 청춘 스마트폰 교실
어르신을 위한 1:1 맞춤 디지털 교육
📅 일시: 매주 화요일 오전 10시 ~ 12시 📍 장소: 복지관 2층 정보화 교육실 👥 대상: 65세 이상 지역 어르신 (선착순 15명) 💰 수강료:전액 무료
💡 1회차: 카톡 사진 보내기 & 손주와 영상통화 💡 2회차: 버스 도착시간 미리 확인하기 💡 3회차: 병원 예약 및 장보기 앱 활용
· 1) 헤더 배경색 (파스텔 딥그린): 눈의 피로도를 낮춰주며 보건복지부/복지관을 상징하는 신뢰감을 주는 색상입니다.
· 2) 노란색 형광펜 강조: '전액 무료', '선착순 15명' 등 어르신들이 가장 궁금해하는 필수 정보를 시각적으로 1초 만에 인지하게 합니다.
· 3) 회차별 교육안 태그 상자: 딱딱한 글자 대신 연한 파란색 카드로 분리하여 읽기 쉽게 구성했습니다.
· 4) 대형 녹색 전화 버튼: 최소 터치 높이 48px 이상으로 제작하여 손 떨림이 있으신 어르신도 정확히 터치할 수 있습니다.
· 5) 메타 태그 세팅: 카톡에 주소를 올렸을 때 단순 영어 주소가 아닌 예쁜 섬네일 카드 상자가 자동으로 나타납니다.
📁 3. 폴더 준비하기 (1:1 유치원생 초밀착 세팅 가이드)
어려운 개발 환경설정 없이, 바탕화면에 폴더 하나만 만들어두면 준비 끝입니다!
1. 바탕화면에 새 폴더 만들기
바탕화면 빈 곳 우클릭 ➔ [새로 만들기] ➔ [폴더] ➔ 폴더 이름을 **`안티그래비티_연습`** 으로 만드세요.
2. 안티그래비티 IDE 실행 및 폴더 열기
안티그래비티 IDE 아이콘을 double-click 실행 ➔ 상단 메뉴 [File] ➔ [Open Folder] 누르고 방금 만든 `안티그래비티_연습` 폴더를 선택하세요.
3. 오른쪽 작업창 확인
화면 오른쪽에 채팅 패널(Chat Panel)이 열려 있는지 확인하세요. 만약 닫혀 있다면 `Ctrl + L` (맥은 `Cmd + L`)을 누르면 다시 열립니다.
🚨 사복쌤들이 실수하기 쉬운 5가지 방지 체크리스트!
1. 폴더명 띄어쓰기 금지: `안티그래비티 연습`처럼 띄어쓰기를 넣으면 에러가 날 수 있으니 `안티그래비티_연습` 언더바를 쓰세요.
2. 한글 파일명 주의: 만들어지는 코드 파일명은 반드시 `index.html` 소문자 영문으로 만들어야 인터넷 배포 시 정상 작동합니다.
3. 인터넷 연결 확인: AI 에이전트와 통신해야 하므로 와이파이/유선 랜이 연결되어 있어야 합니다.
4. 자동 저장 세팅: IDE 상단 메뉴 [File] ➔ [Auto Save]를 체크해 두면 코드가 자동으로 저장되어 편리합니다.
5. 기존 폴더와 혼동 주의: 바탕화면 외에 다른 깊은 폴더(C드라이브 등)에 만들지 말고 바탕화면에 만드세요!
💬 4. 5단계 연속 마스터 프롬프트 (줄별 상세 해설 포함)
채팅창에 한 줄씩 복사해 넣으면 AI가 알아서 완벽한 코드를 써줍니다. 각 줄이 무엇을 뜻하는지 해설도 읽어보세요!
STEP 1 1차 프롬프트 — 뼈대 모바일 안내 페이지 만들기
📋 아래 [복사] 버튼을 누르고 오른쪽 채팅창에 붙여넣고 엔터를 치세요
사회복지관 '2026 청춘 스마트폰 교실' 모집을 위한 모바일 안내 웹페이지(`index.html`)를 만들어줘.
[포함할 내용]
1. 상단 제목: "2026 청춘 스마트폰 교실" (파스텔 초록색 바탕)
2. 교육 정보: 일시(매주 화요일 10시), 장소(복지관 2층 컴퓨터실), 대상(65세 이상 15명 선착순), 수강료(무료)
3. 커리큘럼: 1회차 카톡 사진 공유, 2회차 버스 도착 확인, 3회차 병원 예약
4. 하단 버튼: "📞 전화로 바로 신청하기" (클릭 시 02-1234-5678 전화 연결되도록 tel: 링크 설정)
5. 한 개의 `index.html` 파일 안에 글자 크기를 어르신이 보기 쉽게 큼직하게 만들어줘.
🔍 1차 프롬프트 문장별 심층 해설
· **"모바일 안내 웹페이지(index.html)를 만들어줘":** AI에게 생성할 파일명을 명확히 지정하여 바탕화면 폴더에 자동으로 파일이 생기도록 합니다.
· **"tel: 링크 설정":** 스마트폰에서 버튼을 눌렀을 때 웹사이트 이동이 아닌, 휴대폰의 [전화 걸기 앱]이 자동으로 작동하게 하는 핵심 특수 명령입니다.
· **"글자 크기를 큼직하게 만들어줘":** 시력이 좋지 않은 어르신 이용자를 위해 font-size를 최소 18px 이상으로 세팅하도록 AI에 요구합니다.
관전 팁: 보라색 [Approve] 버튼이 뜨면 누르세요!
AI가 "index.html 파일 작성을 시작합니다"라고 하단에 승인 창을 띄우면 [Approve] 버튼을 클릭하세요. 왼쪽 에디터 창에 HTML 코드가 실시간으로 호다닥 작성되는 모습을 볼 수 있습니다!
STEP 2 2차 프롬프트 — 형광펜 강조 & 녹색 대형 전화 버튼 세팅
📋 1차 코드가 다 써진 후 채팅창에 이어서 입력하세요
방금 만든 `index.html`을 어르신들이 더 잘 볼 수 있게 디자인을 고급화해줘.
1. 중요 문구인 '전액 무료', '선착순 15명' 글자에 노란색 형광펜 강조 효과(background: #fef08a)를 줘.
2. 전화걸기 버튼을 화면 하단에 크고 눈에 잘 띄는 초록색 대형 버튼으로 만들어줘.
3. 스마트폰 화면 크기(모바일 리스폰시브 viewport)에 딱 맞게 정렬해줘.
STEP 3 3차 프롬프트 — 카톡 공유 시 예쁜 카드(OG 메타 태그) 추가
📋 카톡에 주소를 올렸을 때 예쁜 미리보기 썸네일 카드가 뜨게 만드는 명령
`index.html` 파일 상단 `` 안에 카카오톡 링크 전송용 오픈그래프(OG) 메타태그를 추가해줘.
- 카톡 제목: [모집안내] 2026 청춘 스마트폰 교실 (무료)
- 카톡 설명: 어르신을 위한 맞춤 디지털 교육! 지금 터치하여 신청하세요.
- og:image 메타 태그도 예시 템플릿 주소로 포함해줘.
STEP 4 4차 프롬프트 — 1:1 카카오톡 상담 채널 버튼 추가
📋 전화통화가 부담스럽거나 청각 장애가 있으신 어르신을 위한 카톡 상담 버튼
`index.html` 하단 전화 버튼 바로 아래에 "💬 카카오톡으로 1:1 문의하기" 노란색 버튼도 추가해줘.
STEP 5 5차 프롬프트 — 오시는 길(복지관 약도 & 버스 노선) 상자 추가
📋 복지관 찾아오시는 길 안내 상자까지 완벽 탑재
`index.html` 교육 정보 아래에 "📍 복지관 찾아오시는 길" 회색 안내 상자를 추가해줘. 주소: ○○시 ○○구 복지관길 123, 버스 노선: 100번, 500번 복지관 앞 하차 안내 문구를 넣어줘.
🚨 5. 막혔을 때 1초 해결사! (Troubleshooting 10선 대백과)
실습 도중 에러가 나거나 막혔을 때 당황하지 말고 아래 1초 해결 프롬프트를 그대로 복사해서 AI에게 시키세요!
Q1. AI가 코드를 짜다가 갑자기 빨간 글씨 오류를 내며 멈췄어요!
➔ **해결 프롬프트:** "방금 발생한 에러를 수정하고 `index.html` 파일 작성을 계속 진행해서 완성해줘."
Q2. 전화걸기 버튼을 눌렀는데 반응이 없거나 이상한 인터넷 창이 떠요!
➔ **해결 프롬프트:** "전화걸기 버튼의 href 주소를 `tel:02-1234-5678` 로 확실하게 수정해줘."