이번 편에서 할 것
드디어 완성한 랜딩페이지를 실제 인터넷에 올릴 차례예요. 지금까지는 내 컴퓨터에서만 볼 수 있었는데, 이번 편을 마치면 누구나 인터넷 주소로 접속할 수 있는 진짜 사이트가 돼요. AWS Amplify라는 서비스를 사용할 건데, 생각보다 어렵지 않아요. 차근차근 따라해봐요!
단계별 실습
① GitHub에 코드 올리기
GitHub는 코드를 인터넷에 저장하는 창고예요. 여기에 코드를 올려두면 AWS Amplify가 자동으로 가져가서 사이트를 배포해줘요. GitHub 계정이 없다면 github.com에서 무료로 만들 수 있어요. 계정이 생겼으면 새 저장소(Repository)를 만들고, Claude Code에게 '현재 프로젝트를 GitHub에 올리는 방법을 알려줘'라고 물어보면 명령어를 하나씩 알려줘요.
현재 프로젝트를 GitHub에 올리려고 해. 처음부터 순서대로 알려줘.② AWS 계정 만들기
AWS는 아마존에서 운영하는 클라우드 서비스예요. 계정 생성은 무료고, 첫 1년은 무료 사용 범위(Free Tier)가 넉넉해서 개인 랜딩페이지 운영에는 거의 비용이 안 들어요. aws.amazon.com에서 이메일과 카드 정보를 입력해서 계정을 만들어요. 카드 정보는 본인 확인용으로 등록되며, 무료 범위 내에서는 요금이 청구되지 않아요.
③ Amplify에 프로젝트 연결하기
AWS 로그인 후 Amplify 서비스로 이동해서 '새 앱 만들기'를 선택해요. GitHub 계정을 연결하면 내가 올려둔 저장소 목록이 보여요. 방금 올린 랜딩페이지 저장소를 선택하면 빌드 설정이 자동으로 감지돼요. 별도로 건드릴 것 없이 '다음'을 누르면서 진행하면 돼요.
④ 첫 배포 진행하고 확인하기
설정이 완료되면 Amplify가 자동으로 코드를 가져와서 사이트를 만들어요. 이 과정을 '빌드'라고 해요. 보통 1~3분 정도 걸려요. 빌드가 끝나면 Amplify가 임시 인터넷 주소를 만들어줘요. 그 주소로 접속해보면 내가 만든 랜딩페이지가 실제 인터넷에 올라간 걸 확인할 수 있어요!
⑤ 코드를 수정하면 자동으로 배포되는 흐름 익히기
이제부터 코드를 수정하고 GitHub에 올리면(push) Amplify가 자동으로 새 버전을 배포해줘요. 예를 들어 Claude Code로 문구를 바꾸고 저장한 뒤 GitHub에 올리면, 1~2분 후 실제 사이트에도 반영돼요. 이 흐름에 익숙해지면 사이트 관리가 훨씬 편해져요.
코드 수정 후 GitHub에 올리는 명령어를 알려줘. 커밋 메시지는 '랜딩페이지 수정'으로 해줘.이번 편 완성 확인
- ✓GitHub에 프로젝트 코드가 올라갔나요?
- ✓Amplify 빌드가 성공적으로 완료됐나요?
- ✓Amplify가 제공한 인터넷 주소로 접속하면 랜딩페이지가 보이나요?
다음 편 예고
다음 편에서는 내 도메인 주소를 연결하고 보안 인증(HTTPS)까지 적용해서 완전한 운영 상태로 마무리할 거예요.
