목차
챗GPT 스타일 프롬프트와 AI 코드 에디터 cursor를 활용해, 완전 초보 기준 하루 만에 웹명함을 만든 실제 과정을 정리합니다. 설치부터 프로젝트 생성, 프롬프트 작성, 배포까지 따라 하기 쉬운 흐름으로 안내합니다.
처음 “웹명함”이라는 개념을 들었을 때, 저는 디자이너나 개발자만의 영역이라고 생각했습니다. 하지만 링크 하나만 공유해도 자기소개, 연락처, SNS, 포트폴리오까지 보여 줄 수 있다는 점이 매력적으로 느껴졌습니다. 한편으로는 HTML, CSS, 자바스크립트 공부를 제대로 시작하기 전에 작은 결과물을 하나 만들고 싶다는 욕심도 있었습니다. 그러던 중 챗GPT처럼 자연어로 설명하면 코드를 만들어 주는 AI 코드 에디터 cursor를 알게 되었고, “정말 하루 안에 웹명함 정도는 만들 수 있을까?”라는 호기심이 생겼습니다. 이 글은 제가 cursor를 처음 설치하던 시점부터, 실제로 웹명함을 열어 보고 지인에게 링크를 보내기까지 1일 동안 겪은 경험을 기준으로 정리한 기록입니다. 동시에 같은 방식으로 시도해 보고 싶은 분들을 위해 셋업과 프롬프트 작성 요령, 배포 팁까지 단계별로 정리해 두었습니다.
cursor를 선택한 이유와 웹명함 목표 정리하기
먼저 제가 cursor를 선택한 이유는 “코드를 전혀 모르는 상태에서 시작하기 위해서”가 아니라, “코드를 조금씩 이해해 가면서도 결과물을 빨리 보고 싶어서”였습니다. cursor는 VS Code를 기반으로 한 AI 코드 에디터라서, 일반 코드 에디터처럼 파일을 만들고 폴더 구조를 관리할 수 있으면서도, 옆에 붙은 챗봇 창에 자연어 프롬프트를 입력해 코드를 생성하거나 수정할 수 있습니다. 저는 이 조합이 노코드 서비스와 순수 코드 학습 사이의 중간 지점이라고 느꼈습니다. 노코드 툴은 구조가 막히면 내부 로직을 알 수 없어 답답했고, 반대로 코드 에디터만 사용하면 화면에 뭔가 보이기까지 너무 많은 시간을 투자해야 했기 때문입니다.
웹명함의 목표도 처음부터 지나치게 욕심내지 않도록 명확히 정리했습니다. 첫째, 상단에는 이름과 간단한 한 줄 소개를 넣고, 둘째, 중간에는 직무·관심 분야·강점을 정리한 섹션을 만들며, 셋째, 하단에는 이메일·SNS·블로그 링크를 아이콘과 함께 배치한다는 정도로 범위를 제한했습니다. 애니메이션, 다국어 지원, 블로그까지 얹는 식으로 기능을 무리하게 늘리면 하루 안에 끝나지 않을 것이 분명했기 때문입니다. 또 하나 중요한 기준은 “모바일에서 보기 편해야 한다”는 점이었습니다. 실제로 웹명함 링크는 대부분 스마트폰 메신저로 공유될 것이므로, 반응형 레이아웃을 기본 전제로 두었습니다. 이렇게 목표를 정리한 뒤, 저는 종이에 간단한 와이어프레임을 그려 보면서 “첫 화면에서 무엇이 보이는지, 스크롤을 내리면 어떤 정보가 나오는지”를 문자와 박스로 표현해 두었습니다. 이 과정이 프롬프트를 구체적으로 작성하는 데 큰 도움이 되었고, 결과적으로 cursor에게 더 명확한 지시를 내릴 수 있게 해 주었습니다.
cursor 설치부터 새 웹명함 프로젝트 열기까지
실제 작업은 cursor 설치에서 시작했습니다. 공식 사이트에서 운영체제에 맞는 설치 파일을 내려받아 실행하면, 기본적인 에디터와 함께 AI 기능을 쓸 수 있는 계정 로그인을 안내받습니다. 저는 먼저 무료 플랜으로 로그인해, 작은 개인 프로젝트에서 어느 정도까지 사용 가능한지 확인해 보기로 했습니다. 로그인 후에는 기존 VS Code와 거의 비슷한 인터페이스가 떴고, 왼쪽에는 폴더 구조와 파일 목록, 가운데는 코드 편집 영역, 오른쪽에는 챗봇처럼 대화할 수 있는 AI 패널이 보였습니다. 여기까지 도달하는 데 실제로는 몇 분밖에 걸리지 않았고, 처음 IDE를 설치할 때 느끼던 복잡한 설정 과정이 상당 부분 줄어든 느낌이었습니다.
그다음 단계는 웹명함용 새 폴더를 만들고, 기본 프로젝트 구조를 여는 일이었습니다. 저는 빈 폴더를 하나 만들어 “web-card”라는 이름을 붙인 뒤, cursor로 해당 폴더를 열었습니다. 그런 다음 AI 패널에 첫 프롬프트로 “이 폴더 안에 단일 페이지 웹명함용 프로젝트를 만들어 달라”는 요청을 보냈습니다. 구체적으로는 HTML, CSS, 필요하다면 간단한 자바스크립트 파일까지 포함해 기본 골격을 만들어 달라고 적었습니다. 프롬프트에는 앞에서 정리한 요구사항도 함께 넣었습니다. 예를 들어 상단에 고정된 헤더, 중앙 정렬된 자기소개 영역, 하단의 링크 섹션, 그리고 모바일·데스크톱 모두에서 보기 편한 반응형 레이아웃을 명시했습니다. 잠시 후 cursor는 index.html, styles.css, main.js 같은 파일을 생성하겠다는 계획을 보여 주고, 실제로 파일을 생성하면서 각 파일의 내용을 자동으로 채워 넣었습니다. 저는 곧바로 내장 미리보기 혹은 브라우저로 index.html을 열어, 첫 화면이 어떻게 생겼는지 확인했습니다. 이 시점에서 이미 “대략 웹명함처럼 보이는 화면”이 만들어져 있었고, 여기서부터는 디자인과 문구, 세부 동작을 조정하는 쪽으로 집중할 수 있게 되었습니다.
챗GPT처럼 프롬프트를 써서 웹명함 형태 다듬기
기본 틀이 만들어진 뒤에는 cursor의 AI 패널을 챗GPT와 비슷한 느낌으로 사용하면서, 화면을 제가 원하는 웹명함에 가깝게 다듬는 단계가 이어졌습니다. 이때 가장 크게 느낀 점은, 막연하게 “예쁘게 만들어 줘”라고 말하면 AI도 모호하게 반응한다는 것입니다. 대신 “헤더의 배경색을 어두운 네이비로 바꾸고, 이름 텍스트는 더 크게, 서브텍스트는 약간 회색 톤으로 줄바꿈 없이 배치해 달라”처럼 구체적으로 설명하면, 코드 수정 내용도 훨씬 납득하기 쉬운 형태로 나왔습니다. cursor는 제가 선택한 파일과 코드를 이해하고 있어서, 프롬프트에 “지금 헤더 섹션에서…”라고만 적어도 관련 HTML과 CSS를 찾아 수정 제안을 해 주었습니다.
텍스트 내용도 마찬가지였습니다. HTML 파일에서 직접 문장을 바꾸는 대신, AI에게 “자기소개 문단을 조금 더 간결하게, 직무 키워드를 앞에 배치하는 형식으로 다시 써 달라”라고 요구하면, cursor가 새 문장을 제안해 주고 저는 그중 마음에 드는 부분만 골라 반영했습니다. 연락처 섹션에서는 이메일, 링크드인, 블로그를 각각 아이콘과 함께 가로로 정렬하고 싶었는데, CSS flexbox를 처음부터 공부하지 않고도 “하단 섹션에 아이콘과 텍스트를 가로 정렬하고, 모바일에서는 세로로 쌓이게 해 달라”라고 설명하자, cursor가 적절한 flexbox 코드를 추가해 주었습니다. 물론 완벽한 상태는 아니었기 때문에, 실제 화면에서 여백이나 정렬이 어색한 부분이 보이면, 다시 “아이콘과 텍스트 사이 간격을 조금 줄여 달라”거나 “전체 섹션 위아래 여백을 24px 정도로 맞춰 달라”처럼 반복해서 프롬프트를 보냈습니다. 이렇게 “화면을 보고 → 구체적으로 불만을 문장으로 적어 보내고 → 수정된 코드를 확인하는” 흐름을 몇 차례 반복하다 보니, 어느 순간 제가 상상한 것과 크게 다르지 않은 웹명함 형태가 갖추어졌습니다.
배포까지 1일 안에 끝내기: GitHub Pages 기준 실전 흐름
디자인과 내용이 어느 정도 마음에 들자, 이제는 “어디에 올려서 다른 사람에게 보여 줄 것인가”가 과제가 되었습니다. 저는 비용이 들지 않고, 개인 프로젝트에 많이 쓰이는 GitHub Pages를 선택했습니다. 이미 GitHub 계정이 있었기 때문에, 먼저 웹명함 프로젝트 폴더를 Git 리포지터리로 초기화하고, 원격 저장소를 연결하는 과정을 cursor 안에서 터미널을 열어 진행했습니다. Git 사용이 익숙하지 않은 분들은 이 부분에서 막힐 수 있지만, “이 폴더를 GitHub에 올리는 명령어를 단계별로 알려 달라”라고 cursor에게 요청하면 기본적인 git init, add, commit, push 명령어를 예시와 함께 설명해 주기 때문에, 그대로 따라 하면서 진행할 수 있습니다.
GitHub 저장소를 만든 뒤에는 Pages 기능을 활성화하여 main 브랜치의 루트 폴더를 배포 소스로 지정했습니다. 몇 분 정도 기다린 뒤 GitHub가 제공하는 URL을 열어 보니, 로컬에서 보던 웹명함 화면이 동일하게 올라와 있는 것을 확인할 수 있었습니다. 이후에는 내용을 조금 수정하고 다시 커밋·푸시하면, 자동으로 웹명함이 업데이트되었습니다. 여기까지 걸린 시간은 cursor 설치, 프로젝트 생성, 디자인 조정, GitHub 연동, Pages 배포를 모두 합쳐도 하루 안에 충분히 가능한 수준이었습니다. 만약 GitHub Pages 설정이 어렵게 느껴진다면, Netlify나 Vercel 같은 정적 호스팅 서비스를 사용할 수도 있습니다. 하지만 핵심은 “정적 HTML·CSS·JS 파일만 있으면 어디든 쉽게 옮겨 갈 수 있는 구조”로 웹명함을 만들었다는 점입니다. cursor는 이 과정에서 코드를 대신 써 주는 역할뿐 아니라, 배포 과정에서도 필요한 명령어와 설정 방법을 자연어로 설명해 주는 조력자 역할을 해 주었습니다.
cursor로 웹명함을 만들며 느낀 장점과 주의할 점
하루 동안 cursor를 써서 웹명함을 만들어 본 뒤, 가장 크게 느낀 장점은 “코드의 전체 구조를 이해하지 못해도, 작은 단위부터 점진적으로 조정해 볼 수 있다”는 점이었습니다. 예전에는 HTML 구조와 CSS 레이아웃을 모두 학습한 뒤에야 화면을 바꿀 수 있다고 느꼈다면, 이제는 대략적인 의미만 알고 있어도 AI가 구체적인 코드를 제안해 주고, 저는 그 코드가 어떤 역할을 하는지 역으로 공부할 수 있었습니다. 이는 단순 노코드 툴에서는 얻기 어려운 학습 경험이었습니다. 또한 cursor는 한 프로젝트 안의 여러 파일을 동시에 이해하기 때문에, 헤더 색을 바꾸면서 버튼 호버 색까지 통일해 달라는 식의 요구도 한 번에 처리할 수 있었습니다. 웹명함처럼 작은 프로젝트에서도 이 점은 테스트와 수정 속도를 크게 줄여 주었습니다.
반대로 주의할 점도 분명했습니다. 첫째, AI가 만들어 준 코드를 “그냥 돌아가니까 됐다”라고 생각하고 의미를 전혀 들여다보지 않으면, 나중에 작은 수정을 할 때도 매번 프롬프트에만 의존하게 됩니다. 저는 의도적으로 중요한 부분의 HTML과 CSS는 직접 눈으로 읽어 보려고 했고, 낯선 문법은 간단히 검색해 보며 의미를 파악하려고 했습니다. 둘째, 배포와 관련된 설정은 여전히 사용자가 책임져야 하는 영역입니다. 도메인 연결, HTTPS, 트래픽 증가에 대한 대비 등은 AI가 대신 결정해 주지 않기 때문에, 개인 웹명함이라도 기본적인 보안·공개 범위에 대한 감각을 갖추는 것이 좋습니다. 셋째, cursor와 같은 AI IDE는 편리하지만, 사용량·요금·팀 권한 설정 등에 따라 예기치 못한 비용이 발생할 수 있으므로, 회사 프로젝트에 적용할 때는 정책과 한도를 명확히 설정해야 합니다. 개인용 웹명함 수준이라면 큰 위험은 아니지만, 이 도구들을 “마법 같은 흑상자”로 보지 않고, 어디까지가 도구의 역할이고 어디부터가 사용자의 책임인지 선을 그어 두는 태도가 필요하다고 느꼈습니다.
결론: 하루 만에 만든 웹명함, 중요한 것은 도구보다 흐름
챗GPT 시대에 cursor를 활용해 하루 만에 웹명함을 만든 경험을 돌아보면, 핵심은 “도구를 얼마나 잘 쓰느냐”보다 “목표와 흐름을 얼마나 명확히 잡느냐”에 가까웠습니다. 저는 먼저 웹명함에서 보여 주고 싶은 정보를 정리하고, 레이아웃을 간단히 스케치한 뒤, cursor에게 그 구조를 최대한 구체적으로 설명하는 데 시간을 썼습니다. 그 결과, 완벽하진 않지만 하루 안에 실제로 사용할 수 있는 웹명함을 만들 수 있었고, 이 과정에서 HTML·CSS 구조와 GitHub Pages 배포 흐름까지 자연스럽게 경험해 볼 수 있었습니다. cursor는 코드 작성 속도를 높여 주는 도구일 뿐 아니라, 제가 하고 싶은 말을 코드로 번역해 주는 “통역사” 같은 역할을 했습니다.
물론 이 경험 하나만으로 웹 개발을 다 배웠다고 말할 수는 없습니다. 여전히 고급 레이아웃, 접근성, 성능 최적화, 보안 등은 별도의 학습이 필요합니다. 하지만 작은 웹명함 하나를 스스로 기획·제작·배포해 본 경험은, 이후 더 큰 프로젝트를 시도할 때 심리적 장벽을 크게 낮춰 주었습니다. 만약 지금 이 글을 읽는 분이 “코딩은 어렵다”는 이유로 웹 프로젝트를 미루고 있다면, cursor 같은 바이브코딩 도구를 이용해 웹명함 정도부터 직접 만들어 보기를 권하고 싶습니다. 하루 안에 결과물을 화면으로 확인해 보는 경험만으로도, 코딩과 웹 개발에 대한 관점이 “배워야 하는 어려운 기술”에서 “내 아이디어를 구현하는 언어”로 조금씩 바뀌는 것을 느낄 수 있을 것입니다.