
문과 출신 비엔지니어가 혼자서 LP 공개까지 해본 기록
요약
비엔지니어가 Claude Code, Cloudflare, Grok, Vercel 등 다양한 AI 툴을 조합하여 도메인 취득부터 로고 제작, 랜딩 페이지 공개까지 혼자 수행한 과정을 기록한 가이드입니다.
핵심 포인트
- Claude Code를 활용한 자율적 코드 생성 및 실행 경험
- AI 툴 사용 시 구체적이고 단계적인 프롬프트 작성의 중요성
- 도메인 취득 및 DNS 설정 반영 시 주의사항
- Grok을 이용한 브랜드 로고 제작 및 미세 조정 과정
개인적으로 서비스를 런칭할 때, 지금까지라면 엔지니어나 디자이너에게 외주를 주는 것이 당연했던 작업도, 지금은 AI 툴을 조합하면 혼자서 완결 지을 수 있는 시대가 되었습니다.
이 기사는 비엔지니어 개인 사업자가 「도메인 취득」, 「로고 제작」, 「LP(Landing Page, 랜딩 페이지) 공개」까지를 AI 툴을 사용하여 어디까지 혼자서 해낼 수 있는지를 시험해 본 기록입니다. 기술적인 용어에는 간단한 해설을 덧붙였으므로, 저처럼 엔지니어 경험이 제로(0)이고 앞으로 같은 도전을 하고 싶은 분들에게 참고가 된다면 기쁘겠습니다.
이번에 수행한 일을 크게 4단계로 나누면 다음과 같습니다.
- Claude Code 구독 계약 (개발 파트너 준비하기)
- Cloudflare에서 도메인 취득 (사이트 주소 확보하기)
- Grok으로 로고 제작 (브랜드의 얼굴 만들기)
- Vercel을 사용하여 LP 공개 (실제로 세상에 내놓기)
각각 무엇을 했고 어디에서 막혔는지를 순서대로 써 내려가겠습니다.
Claude Code는 Anthropic사가 제공하는 에이전트형 코딩 툴입니다. 터미널(Command Line, 커맨드 라인) 상에서 AI에게 지시를 내리면, 코드의 생성·수정·실행까지 자율적으로 수행합니다. 기존의 채팅형 AI와의 차이점은 단순히 「코드를 작성해 주는 것」뿐만 아니라, 파일 조작이나 커맨드 실행까지 일관되게 맡길 수 있다는 점입니다.
이전부터 Gemini, Grok, Claude와 같은 유명한 AI 모델들은 채팅 용도로 사용해 왔습니다. 최근에는 Claude를 자주 사용해 왔던 점과, AI를 이용한 코딩에서는 Claude의 평가가 높았던 것이 이유입니다.
비엔지니어라도 AI를 사용하면 홈페이지(HP) 제작 정도는 할 수 있을 것이라 생각하여, 우선 구독을 계약하는 것부터 시작했습니다. 계약 자체는 신용카드 정보를 입력하는 것만으로 몇 분 만에 완료됩니다.
- 처음에는 터미널 조작 자체에 익숙하지 않아, 커맨드의 의미를 모르는 채 실행해 버려 예상치 못한 파일이 생성되어 당황했던 장면이 있었습니다. 지시는 구체적으로, 그리고 한 단계씩 확인하며 진행하는 것이 안전합니다.
- 「적당히 괜찮게 만들어줘」와 같은 모호한 지시는 기대와 다른 결과물(Output)이 나오기 쉬웠습니다. 무엇을 만들고 싶은지, 누구에게 보여주고 싶은지를 처음에 텍스트로 정리한 뒤 지시를 내리면 정밀도가 훨씬 올라갔습니다.
도메인이란 인터넷상의 「주소」에 해당합니다 (예: example.com). Cloudflare는 해당 도메인의 취득·관리에 더해, DNS 설정(주소와 서버를 연결하는 설정)이나 보안 기능도 통합하여 제공하는 서비스입니다.
서비스명에 맞는 독자적인 도메인을 검색하여, 비어 있는 것을 골라 취득했습니다. 취득 자체는 온라인에서 신용카드로 결제하기만 하면 되는 심플한 흐름입니다.
- 후보로 두었던 도메인이 이미 타사에 의해 취득된 케이스가 많아, 생각보다 「좋은 이름」은 남아 있지 않다는 현실에 직면했습니다. 대안을 몇 가지 준비해 두는 것을 추천합니다.
- 취득 후 Vercel 측에서 도메인을 연결할 때, DNS 설정 반영에 시간이 걸려 「어라, 사이트에 접속이 안 되네」라며 일시적으로 당황했습니다. DNS 반영에는 몇 분에서 몇 시간 정도 걸릴 수 있으므로, 서두르지 않고 기다리는 것이 정답이었습니다.
Grok은 xAI사가 제공하는 AI 챗봇으로, 이미지 생성 기능도 갖추고 있습니다. 텍스트로 「이런 분위기의 로고를 원해」라고 지시하면 그 내용에 따른 이미지를 생성해 줍니다.
서비스의 컨셉이나 컬러 이미지를 말로 전달하여, 여러 패턴의 로고 안을 받아보았습니다. 마음에 드는 안을 베이스로 하여, 미세 조정 지시를 거듭하며 브러시업(Brush-up)하고 있습니다.
- 한 번에 이미지 그대로의 로고가 나오는 경우는 거의 없어서, 몇 번이고 프롬프트(Prompt, 지시문)를 다시 작성하는 작업이 발생했습니다. 색감, 서체의 분위기, 심플함의 정도 등 조건을 세밀하게 언어화할수록 정밀도가 올라가는 느낌이 듭니다.
- 특히 Grok은 영어로 프롬프트를 작성하는 편이 더 충실하게 생성해 줍니다. Google 번역을 사용하면 괜찮습니다.
- 생성된 이미지의 해상도나 배경 투명화(배경을 투명하게 만드는 처리)가 그대로는 LP에 사용하기 어려워, 별도의 이미지 편집으로 조정이 필요했습니다. AI 생성 이미지는 어디까지나 「소재」로 파악하고, 최종 마무리는 별도 작업이 될 것이라는 전제하에 시간을 잡아두는 것이 좋을 것 같습니다.
Vercel은 작성한 웹사이트 코드를 간단하게 인터넷상에 공개(Deploy, 배포)할 수 있는 호스팅 서비스입니다. GitHub(코드를 관리하는 서비스)와 연동해 두면, 코드를 업데이트할 때마다 자동으로 공개 내용도 업데이트되는 구조를 만들 수 있습니다.
Claude Code로 생성한 LP(Landing Page) 코드를 GitHub에 업로드하고, Vercel과 연동하여 배포(Deploy)했습니다. 앞서 취득한 Cloudflare의 도메인을 Vercel 측에 설정하여, 커스텀 도메인으로 접속할 수 있는 상태로 만들었습니다.
-
첫 배포 시 빌드 에러(Build Error, 코드의 어딘가에 결함이 있어 공개 처리가 실패하는 것)가 발생하여, 에러 메시지를 해석하는 데 시간이 걸렸습니다. 에러 문장을 그대로 Claude Code에 전달하여 수정을 요청하는 일련의 흐름을 확립할 수 있다면 효율이 높아질 것입니다.
-
도메인 연결 설정 과정에서 Cloudflare와 Vercel 각각의 관리 화면을 오가야 했기에, 처음에는 어느 쪽에서 무엇을 설정해야 할지 혼란스러웠습니다. 결국 공식 문서(Official Documentation)의 절차를 따라 하나씩 확인하며 진행하는 것이 가장 빨랐습니다.
-
AI 도구를 조합하면 코딩, 디자인, 인프라 구축과 같은 전문 영역을 비엔지니어라도 일정 수준까지 혼자서 커버할 수 있는 시대가 되었다는 것을 실감했습니다.
-
반면, 각 도구를 '연결하는' 부분(도메인과 호스팅의 연결, 생성된 이미지의 최종 조정 등)은 AI에게 전적으로 맡길 수 없어 사람의 손으로 확인하고 조정해야 했습니다.
-
모호한 지시보다 구체적인 지시가 AI의 출력(Output) 정밀도를 명확하게 높여줍니다. 작업 전에 '무엇을, 누구에게, 어떤 분위기로' 할지를 언어화하는 한 단계의 수고가 결과적으로 시간 단축으로 이어졌습니다.
-
가장 컸던 점은 저와 같은 초보자가 좌절하기 쉬운 전문 용어나 기초적인 기술 이해입니다. 이는 24시간 내내 곁에서 가르쳐 주는 Claude 선생님이 있었던 덕분입니다. 인간 선생님과 달리, 기초적인 질문을 몇 번이나 반복해도 싫은 기색 하나 없이 친절하게 가르쳐 줍니다. 질문하기 위한 지식이 아예 없는 분들은 스크린샷을 찍어서 물어보세요.
이번에는 구체적인 서비스명이나 업종에 대해서는 언급하지 않았지만, 이 흐름 자체는 업종을 불문하고 응용이 가능할 것입니다. 앞으로 개인적으로 무언가를 시작하려는 분들에게 참고가 되기를 바랍니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Qiita AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기