반응형
프레이머로 랜딩페이지를 만들었나요? 이제 그 페이지를 **내 도메인(예: 맛김치포비아.com)**에 연결해서 세상에 공개할 차례입니다. 도메인 연결은 복잡해 보일 수 있지만, 사실 몇 단계만 따라 하면 쉽게 완료할 수 있습니다. 초보자도 따라 할 수 있는 간단한 가이드를 소개합니다!
1. 준비물 체크리스트
도메인 연결 전에 아래 세 가지를 준비해야 합니다:
- HTML 파일
프레이머로 만든 랜딩페이지 파일. 예를 들면:- index.html (메인 페이지 파일)
- style.css (디자인 파일)
- script.js (기능 추가 파일)
- 이미지 파일 등
- 도메인
이미 구매한 도메인(예: 맛김치포비아.com). - 호스팅 서비스
HTML 파일을 인터넷에 올려줄 공간(무료 서비스 추천: Netlify).
2. HTML 파일을 인터넷에 올리기
HTML 파일은 내 컴퓨터에만 있으면 다른 사람들이 볼 수 없어요. 인터넷에 공개하려면 호스팅 서비스에 업로드해야 합니다.
Netlify를 사용한 업로드
Netlify는 간단히 HTML 파일을 업로드하면 자동으로 URL을 만들어주는 무료 서비스입니다.
- Netlify 가입 및 로그인
Netlify 홈페이지에 접속해 계정을 만듭니다. 👉 Netlify 바로가기 - 새 사이트 추가
로그인 후, "Add new site" 버튼을 클릭하고 "Deploy manually"를 선택합니다. - HTML 파일 업로드
HTML 파일이 있는 폴더를 드래그 앤 드롭으로 업로드하세요.- 예: index.html, style.css, 이미지 폴더 등이 포함된 폴더.
- URL 생성
업로드가 완료되면 Netlify에서 자동으로 URL을 생성합니다.- 예: https://kimchi-fanatic.netlify.app
이 URL을 통해 랜딩페이지를 미리 볼 수 있습니다.
- 예: https://kimchi-fanatic.netlify.app
3. 도메인(맛김치포비아.com) 연결하기
Netlify에서 기본 URL을 제공하지만, 자신의 도메인(맛김치포비아.com)을 연결하면 더 깔끔하고 전문적으로 보입니다.
도메인 연결 단계
- Netlify에서 도메인 설정 확인
Netlify 대시보드에서 사이트 설정 메뉴로 들어가 "Domain settings"를 선택합니다.
여기에서 Netlify의 네임서버 정보를 확인합니다:- 예:
- dns1.p07.nsone.net
- dns2.p07.nsone.net
- 예:
- 도메인 관리 페이지 접속
맛김치포비아.com 도메인을 구매한 곳(예: 가비아, 카페24 등)에 로그인합니다. - DNS 설정 변경
- "네임서버 설정" 또는 "DNS 관리" 메뉴를 찾습니다.
- Netlify에서 제공한 네임서버 정보를 입력합니다.
- 변경 사항을 저장하면 도메인과 Netlify가 연결됩니다.
- 적용 대기
네임서버 변경 후, 도메인 연결이 완료되기까지 최대 24시간 정도 걸릴 수 있습니다.
4. 연결 확인
도메인 연결이 완료되면 브라우저에 맛김치포비아.com을 입력해보세요.
내가 만든 랜딩페이지가 정상적으로 표시된다면 성공입니다! 🎉
예시로 정리
- HTML 파일 준비:
프레이머로 만든 index.html 파일과 관련 파일을 한 폴더에 저장. - Netlify에 업로드:
Netlify에서 파일을 업로드하고, https://kimchi-fanatic.netlify.app 주소가 생성됨. - 도메인 연결:
맛김치포비아.com 도메인의 네임서버를 Netlify 네임서버로 변경. - 결과:
이제 맛김치포비아.com으로 접속하면 Netlify에서 호스팅된 랜딩페이지가 보임.
추가 팁
- 반응형 디자인 적용: 모바일 환경에서도 깔끔히 보이도록 준비하세요.
- SEO 최적화: HTML 태그와 메타데이터를 활용해 검색 엔진에서도 잘 보이게 만드세요.
- 도메인 연결에 문제가 생기면, 도메인 구매처 고객센터에 문의하면 쉽게 해결할 수 있습니다.
반응형
'it 컴퓨터' 카테고리의 다른 글
반응형 랜딩페이지란 무엇인가? 이미지와 코드로 이해하기 (0) | 2025.01.05 |
---|---|
노션이 느려졌을 때 해결하는 9가지 실전 팁 (1) | 2025.01.02 |
윈도우에서 드래그 앤 드롭이 안될 때 해결 방법 (0) | 2024.12.05 |