소개
안녕하세요! 웹사이트 만들기 스터디에 참여 중인 안성국입니다.
우선 간단하게 3줄 요약부터 해보자면,
처음 생각한 아이디어를 실현하려다보니 계속 에러나고, 뭔지모르겠고, 하기 어려웠음
아주 기초부터 돌아가서 쉬운 사이트 만들고 배포라도 해보자! 라고 마음 먹음
제미나이와 대화하면서 아주 간단한 사이트를 만들고 vercel로 배포함(배포가 되었다는 것에 감격함)
우선 배포한 사이트입니다. "오늘의 응원 메세지"라는 사이트이구요. 별다른 기능은 없습니다. 저는 오직 배포를 한 번 해보고 싶었을 뿐입니다 ㅎㅎ
https://praise-jade.vercel.app/
진행 방법
우선 저는 비개발자이고 제반지식이 매우 부족함을 알립니다.(밑밥)
제가 만들고자 했던 사이트는 "긍정 뉴스 큐레이션", "40대 이상 진로적성 가이드"와 같은 사이트였습니다.
일단 안티그래비티를 자주 써보지 않아서 그런지, 좀 헷갈렸지만 역시 늘 하던대로 "해줘"라고 했습니다.
에러나기도 하고, 계속 뭘 승인하라고 하면서 넘어가고, 때로는 멈추기도 해서 좌절으 경험했습니다. 지피티와 제미나이에게 물어보면서 해도 역시 쉽지는 않더라구요. DB, api를 통해서 불러오는 과정, 배포방법 등 온갖 개 념들이 혼재되어 혼란에 빠집니다.
문득 지피터스에서 처음 n8n을 접했을 때가 떠올랐습니다. 괜히 처음부터 복잡한 것 만드려고 하지말고, '일단 쉬운 것부터 차근차근 꾸준히 하다보면 실력이 붙는다!'는 마음가짐을 가졌습니다. 그때도 괜히 복잡한 워크플로우 만드려다가 실패하고, '텔레그램으로 나에게 응원메세지 보내기'와 같은 것부터 시작했거든요.
간단한 사이트를 만들고, 비개발자의 숙원인 "배포"를 경험하는 것을 목적으로 합니다. 그리고 점차 실력을 늘려나가기 위해 레벨을 5단계로 나눠서 학습가이드를 제공해달라고 했습니다. 제미나이가 아래와 같이 짜줍니다.
🎮 안티그래비티 정복을 위한 단계별 프로젝트 (Lv1 ~ Lv5)
Lv.1: "나 코딩 좀 하네?" (자신감 회복용)
설치 X, 로직 거의 없음. 화면에 뭔가 예쁘게 뜨는 단계.
디지털 명함: 내 사진, 이름, 링크(블로그, 인스타)가 들어간 예쁜 모바일 명함.
현재 시간 시계: 초 단위로 움직이는 감성적인 디자인의 디지털 시계.
랜덤 칭찬 생성기: 버튼 누르면 "오늘 좀 멋진데요?", "최고예요!" 같은 문구가 무작위로 뜨는 앱.
배경색 변경기: 버튼을 누를 때마다 배경 색깔이 랜덤하게 바뀌는 힐링 페이지.
로또 번호 추첨기: 버튼 누르면 1~45 숫자 6개가 뽕뽕뽕 나오는 화면.
Lv.2: "어? 이게 작동하네?" (간단한 상호작용)
사용자가 입력하거나 클릭하면 화면이 반응하는 단계.
글자 수 세기: 블로그 글 쓸 때 유용함. 글을 붙여넣으면 몇 글자인지 세어주는 도구.
만 나이 계산기: 생년월일을 입력하면 현재 만 나이를 계산해 주는 심플 계산기.
점심 메뉴 돌림판: 짜장면, 김치찌개 등 메뉴를 넣고 돌리면 하나 정해주는 룰렛.
디데이(D-Day) 카운터: 목표 날짜(예: 경영지도사 시험일)를 넣으면 며칠 남았는지 보여줌.
BMI(비만도) 계산기: 키와 몸무게 넣으면 비만도 알려주는 건강 도구.
Lv.3: "껐다 켜도 그대로네?" (데이터 저장 맛보기)
브라우저(크롬)에 데이터를 몰래 저장해서, 새로고침해도 내용이 안 날아가는 단계.
감사 일기장: 오늘 감사한 일을 한 줄 쓰면 아래 리스트에 쌓이고 저장됨.
할 일 목록 (To-Do List): 할 일을 추가하고 체크하면 줄이 그어짐. 껐다 켜도 유지됨.
단축키 메모장: 인터넷 하다가 급하게 메모할 내용을 적어두는 나만의 메모장.
습관 트래커: 매일 물 마시기, 운동하기 버튼을 누르면 횟수가 누적되는 앱.
쇼핑 카트: 사고 싶은 물건이랑 가격 적어두면 총액 계산해서 저장해 둠.
Lv.4: "세상과 연결해 볼까?" (외부 데이터 가져오기)
내 컴퓨터 밖의 정보(날씨, 뉴스 등)를 가져오는 단계. (여기서부터 재미가 확 뜀)
현재 날씨 위젯: 내가 사는 곳(대전)의 실시간 날씨와 온도를 아이콘으로 보여줌.
명언 제조기: 버튼 누르면 유명한 명언을 영어/한글로 가져와서 보여줌.
랜덤 강아지/고양이 사진: 버튼 누를 때마다 귀여운 동물 사진이 계속 바뀜.
QR코드 생성기: 내 블로그 주소를 넣으면 즉석에서 QR코드로 변환해 줌.
비트코인 시세판: 현재 비트코인 가격이 얼마인지 실시간으로 보여줌.
Lv.5: "이제 나도 개발자!" (복합 기능)
이전에 했던 것들을 합치거나, AI 기능을 붙여보는 단계.
AI 타로카드 점보기: 고민을 적으면 AI가 타로 카드를 뽑아 해석해 줌. (API 필요)
MBTI 궁합 보기: 나와 상대방 MBTI를 넣으면 재미로 보는 궁합 결과 출력.
가계부 대시보드: 수입/지출 입력하면 그래프로 보여주는 앱.
유튜브 썸네일 다운로더: 유튜브 링크 넣으면 썸네일 이미지만 쏙 뽑아주는 도구.
[최종보스] 긍정 뉴스 큐레이션 (햇살뉴스): 우리가 처음에 하려던 것. (수동 입력 버전으로 완성)자 일단 "랜덤 칭찬 생성기" 사이트를 만들기를 결정합니다. 저의 목표는 오로지 "배포"입니다.
"배포"를 위해서 스터디장님이 얘기하신 방식을 제미나이에 넣고 어떻게 하는지 물어봅니다. (무슨 말인지 잘 몰랐지만, 어쨌든 공짜!라는 말에 그대로 하려고 합니다.)
제미나이가 친절하게 알려줍니다.
1단계: Node.js 설치 (이게 아까 없었던 '가스레인지'야!)
이걸 깔아야 꾹꾹이 컴퓨터가 '개발자의 컴퓨터'로 변신해.
**Node.js 공식 홈페이지(클릭)**로 들어간다.
왼쪽에 있는 [LTS (장기 지원 버전)] 버튼을 눌러서 다운로드한다.
설치 파일을 실행하고, 아무것도 건드리지 말고 계속 **Next(다음)**만 눌러서 끝낸다.
중요: 설치가 끝나면 컴퓨터를 재부팅(다시 시작) 한 번 해주자. (확실하게 하기 위해!)
확인:
Win키 + R 누르고 cmd 입력 후 엔터.
검은 창에 node -v 라고 치고 엔터.
v20.xx.xx 처럼 숫자가 나오면 성공!
2단계: Vercel 설치 (배포 담당자 고용하기)
이제 꾹꾹이 컴퓨터에 '배포를 담당해 줄 직원(Vercel)'을 깔아주는 거야.
아까 열어둔 검은 창(cmd)에 아래 영어를 정확하게 입력하고 엔터를 쳐.
npm install -g vercel
뭔가 막 글자가 흐르면서 설치가 될 거야. 1분 정도 기다려.
다 되고 나서 커서가 다시 깜빡이면 성공!
3단계: Vercel 로그인 (신분증 확인)
설치된 직원한테 "주인이 나야"라고 알려주는 과정이야.
검은 창에 아래 영어를 입력하고 엔터.
vercel login
그러면 키보드 화살표로 선택하는 게 나올 수도 있는데, Continue with Email을 선택하고 꾹꾹이 이메일을 입력하면 돼. (혹은 바로 브라우저가 뜰 거야)
인터넷 창이 열리면서 **"Login Succeeded(로그인 성공)"**이라고 뜨면 끝난 거야.로그인에 성공했습니다.
자 다음으로 안티그래비티를 열고 플레이그라운드로 갑니다. 플레이그라운드는 어떻게 가는지 몰라서 물어보니 오른쪽 상단에 Open Agent Manager를 누르면 되더라구요.
일단 제미나이가 알려준대로 프롬프트를 입력하니, 막 돌아가면서 뭘 합니다. 그러더니 멈췄습니다.
왜 멈췄고, 뭘 해야하는지를 물어보니 제미나이가 가운데 있는 index.html을 눌러서 나온 코드를 메모장에 붙여넣은 다음 저장하고, cmd로 명령어를 내리라고 합니다.
🚀 해결 방법: AI 무시하고 코드만 빼오기
지금 AI가 테스트하느라 멈춘 걸 기다리지 말고, 우리가 직접 코드를 낚아채서 배포해 버립시다.
1. 코드 복사하기
안티그래비티 화면(두 번째 사진)을 보면, 왼쪽 상단 탭에 index.html 이라고 적힌 탭이 작게 보일 거예요. (혹은 왼쪽 파일 목록에 있을 겁니다.)
그 index.html 탭을 클릭하세요.
화면에 영어로 된 코드가 쫘르륵 나올 겁니다.
그 내용을 전체 선택(Ctrl+A)해서 복사(Ctrl+C) 하세요.
*(만약 탭을 못 찾겠으면, 채팅창에 **"테스트 하지 말고 그냥 index.html 전체 코드를 텍스트로 보여줘"*라고 명령하면 바로 뱉어낼 거예요.)
2. 내 컴퓨터에 붙여넣기
이제 안티그래비티는 꺼도 됩니다. 꾹꾹이님의 컴퓨터(바탕화면)로 오세요.
바탕화면에 새 폴더를 만들고 이름은 praise (칭찬)라고 지으세요.
메모장을 엽니다.
아까 복사한 코드를 붙여넣습니다.
[다른 이름으로 저장] 클릭!
위치: 방금 만든 praise 폴더 안
파일 형식: 모든 파일 (.) 로 변경 (중요!)
파일 이름: index.html
인코딩: UTF-8
저장!
3. 배포하기 (마법의 순간)
아까 로그인 성공했던 그 검은색 창(첫 번째 사진의 창)으로 돌아가세요.
아래 명령어를 쳐서 방금 만든 폴더로 들어갑니다.
cd Desktop\praise
(만약 경로를 못 찾겠다고 나오면 cd OneDrive\바탕 화면\praise 일 수도 있어요. 헷갈리면 폴더를 검은 창에 드래그해도 됩니다)
이제 대망의 명령어 입력!
vercel
엔터, 엔터, 엔터!
질문이 나오면 그냥 Enter 키만 5번 치세요. (다 Yes 하겠다는 뜻)
배포 성공입니다!
https://praise-jade.vercel.app
다해서 1시간 이내로 한 것 같습니다. 질문하고 궁금한 것 물어보면서 하느라요:)
전세계에 배포가 되었다는 말에(아무도 안 들어오지만) 감격이 밀려옵니다 ㅎㅎ
깨달은 점
역시 '딸깍', '뚝딱'을 생각하기보다는 초보는 차근차근 하나씩 일단 해보면서 실력을 늘려나가야 할 것 같습니다.
마지막 주차까지 제가 원하는 사이트를 만들 수 있을지 모르 겠지만, 하나씩 만들면서 DB, api등도 같이 연계해보겠습니다 ㅎㅎ
기획자민지 스터디장님! 혹시 제가 하는 방식이 너무 돌아가는 방식인지, 더 좋은 지름길(?)이나 팁이 있다면 말씀주시면 감사하겠습니다! 아직 질문도 제대로 못하는 초보가 질문드립니다.
