이번 편에서 할 것
이번 시리즈에서는 웹빌더 없이 AI(Claude Code)와 대화하면서 나만의 랜딩페이지를 처음부터 만들고, 실제 인터넷에 올리는 것까지 단계별로 함께 진행할 거예요. 코딩을 전혀 모르셔도 괜찮아요. AI가 코드를 대신 써주니까요! 이번 편에서는 작업에 필요한 프로그램을 설치하고 프로젝트를 처음 만들어볼 거예요.
단계별 실습
① 웹빌더 vs 순수 코드, 나한테 맞는 건 뭘까?
랜딩페이지를 만드는 방법은 크게 두 가지예요. 하나는 아임웹·Wix 같은 웹빌더를 사용하는 방법이고, 다른 하나는 코드로 직접 만드는 방법이에요. 웹빌더는 마우스로 끌어다 놓는 방식으로 빠르게 만들 수 있고, 도메인 연결이나 보안 설정도 플랫폼이 대신 해줘서 처음 시작하기 편해요. 잘 만들어진 디자인 틀(템플릿)도 많아서 빠르게 결과물을 내고 싶은 분들께 잘 맞아요. 반면 코드로 만드는 방법은 디자인과 기능을 원하는 대로 100% 구현할 수 있고, 플랫폼 월 이용료 없이 도메인 비용만으로 운영할 수 있어요. 검색 노출(SEO)도 직접 세밀하게 조정할 수 있고, 페이지 로딩 속도도 훨씬 빠르게 최적화할 수 있어요. 이 시리즈에서는 코드로 만드는 방법을 다뤄요. 웹빌더 방식이 더 잘 맞는 분들은 다음 시리즈를 확인해보세요!
② VS Code 설치하고 개발 환경 준비하기
VS Code는 코드를 작성하는 프로그램이에요. 마이크로소프트에서 만든 무료 프로그램으로, 전 세계 개발자들이 가장 많이 쓰는 편집기예요. code.visualstudio.com 에 접속해서 내 운영체제(Windows/Mac)에 맞는 버전을 내려받아 설치해주세요. 설치가 끝나면 VS Code를 실행하고, 작업할 폴더를 하나 만들어서 열어두세요. 예를 들어 '내 랜딩페이지'라는 이름의 폴더를 만들고 VS Code에서 '폴더 열기'로 열면 돼요.
③ Claude Code 설치하고 로그인하기
Claude Code는 VS Code 안에서 AI와 대화하면서 코드를 만들 수 있게 해주는 도구예요. VS Code 왼쪽 메뉴에서 네모 모양 아이콘(확장)을 클릭하고, 검색창에 'Claude Code'를 입력해서 설치해주세요. 설치 후 Anthropic 계정으로 로그인하면 바로 사용할 수 있어요. Pro 플랜($20/월)을 구독해야 제한 없이 사용할 수 있어요. 이 도구가 앞으로 여러분 대신 코드를 써줄 핵심 도구예요!
④ Next.js 프로젝트 생성하기
Next.js는 랜딩페이지를 만들 때 가장 많이 쓰이는 도구 중 하나예요. 페이지 로딩이 빠르고 검색 노출(SEO)에도 유리해서, 실제 서비스에서도 많이 사용해요. 설치 과정이 복잡해 보일 수 있지만 걱정하지 않아도 돼요. Claude Code에게 '프로젝트 만들어줘'라고 하면 필요한 파일과 폴더를 자동으로 만들어줘요. 생성이 끝나면 개발 서버를 실행해서 브라우저로 첫 화면이 잘 뜨는지 확인해요.
Next.js로 랜딩페이지 프로젝트를 생성해줘. 첫 화면이 보이는 기본 구조를 만들어주고, 실행 방법도 알려줘.⑤ Claude Code로 첫 번째 수정 경험해보기
이제 Claude Code에게 간단한 수정을 부탁해보면서 바이브 코딩이 어떤 느낌인지 경험해봐요. 예를 들어 '첫 화면에 우리 서비스 소개 문구를 크게 넣어줘' 하고 말하면, AI가 코드를 수정하고 어떤 부분을 왜 바꿨는지도 설명해줘요. 처음에는 어색할 수 있지만, 대화하듯 요청하면 돼요. 틀려도 괜찮아요. '이상하게 됐어, 다시 해줘'라고 하면 다시 수정해줘요.
첫 화면에 서비스 소개 문구와 '시작하기' 버튼을 크고 보기 좋게 추가해줘. 깔끔한 스타일로 만들어줘.이번 편 완성 확인
- ✓VS Code 설치 후 정상적으로 실행되나요?
- ✓Claude Code 로그인이 완료됐나요?
- ✓브라우저에서 첫 화면이 열리나요?
다음 편 예고
다음 편에서는 Claude Code와 함께 실제 랜딩페이지 레이아웃을 완성해볼 거예요.
