새로운 수업을 열거나, 매장 오픈 소식을 알릴 때요.
사진은 준비했는데 안내할 내용이 생각보다 많습니다.
어떤 프로그램인지, 혜택은 무엇인지, 참여는 어떻게 하는지. 인스타 게시물 하나에 다 넣으면 길어지고, 여러 개로 나누면 다시 찾아보기 번거롭죠.
그래서 오늘은 그 안내를 한 페이지에 모아봤습니다. WAKIT 무료 랜딩페이지 파일을 열고, 배포 도우미로 접속 주소를 만드는 과정까지 직접 따라갔어요.
화면의 라움 필라테스는 가상 스튜디오 예시입니다. 수업·혜택·연락처는 템플릿 샘플이며 실제 모집이 아닙니다.
01. 받은 파일, 어디서부터 열면 될까요?
무료 ZIP 안에는 index.html과 사용안내.txt가 들어 있습니다. 압축을 푼 뒤 index.html을 브라우저에서 열면 완성된 페이지가 나타나요.
이번 무료 버전은 완성형 HTML입니다. 입력 칸으로 사진과 문구를 바꾸는 노코드 메이커는 무료 구성에 포함되지 않고 추후 제공 예정입니다. 이 글에서도 기본 샘플을 그대로 열어 배포했어요.
02. 한 페이지 안에서, 안내가 이어집니다
첫 화면 다음에는 브랜드 소개, 오픈 혜택, 프로그램 카드와 참여 방법이 이어집니다.
처음 보는 사람에게 무엇부터 알려줄지 순서가 잡혀 있는 거예요. 오늘은 메뉴를 누르고 천천히 내려보며 사진과 안내가 어떻게 연결되는지 확인했습니다.
03. 움직임은 조금 더 살펴보고 싶게
첫 화면에는 입자 웨이브가 움직이고, 아래에서는 스크롤에 맞춰 글씨와 카드가 나타납니다. 테마 버튼을 누르면 다크·라이트 모드도 바뀌어요.
사진 한 장만 올리는 것과는 다른 분위기를 만들 수 있습니다. 다만 애니메이션이 신청이나 매출을 보장하는 것은 아니에요. 방문자가 알아야 할 내용을 읽기 좋게 담는 일이 먼저겠죠.
04. 신청 화면도, 실제로 어떻게 저장되는지 확인하세요
하단에는 이름·연락처·프로그램을 입력하는 신청 화면이 있습니다. 무료 샘플은 신청 내역을 해당 브라우저에 저장하는 데모 방식입니다.
다른 방문자가 입력한 내용을 운영자에게 자동 전달하거나 서버에서 모아주는 접수 시스템은 아닙니다. 실제 모집에 쓰려면 접수 방식을 별도로 연결해야 해요. 네이버폼 같은 외부 신청 페이지로 연결하려면 HTML의 링크와 안내를 수정해 적용할 수 있습니다. 이번 시연에서는 그 연결을 구현하지 않았습니다.
05. 내 컴퓨터에서 열린 화면을, 공유할 주소로
더블클릭해서 보는 것과 다른 사람에게 주소를 보내는 것은 다음 단계예요. 여기서는 WAKIT 배포 도우미를 사용했습니다.
배포 도우미를 열고 Netlify 계정을 연결합니다. 승인 화면에서 프로젝트 생성·관리 권한을 확인한 뒤 연결하면 ZIP을 올릴 수 있는 화면이 나타나요.
이번에는 이미 로그인된 계정으로 연결했습니다. 계정이 없다면 별도로 가입해야 하므로, 누구에게나 같은 시간이 걸린다고 생각하지 않으셔도 됩니다.
06. ZIP을 올리고, 사용할 주소를 정했습니다
받은 라움필라테스-랜딩-무료.zip을 선택하고, 사용할 주소를 입력했습니다. 예시 주소는 wakit-landing-free-demo-1005로 정했어요.
이번 파일은 정적 페이지라 별도 데이터 저장 서비스 연결은 선택하지 않았습니다. 이 선택만으로 신청자 데이터가 서버에 저장되는 기능이 생기는 것은 아닙니다.
설치 버튼을 누른 다음 완료 화면을 기다렸습니다.
07. 주소와 QR이 생겼고, 실제 페이지도 열렸어요
완료 화면에 접속 주소와 QR 코드가 나타났습니다. 앱 열기를 눌러 실제 배포된 페이지를 확인했고, 별도 브라우저에서도 로그인 없이 열리는 것을 확인했어요.
내 컴퓨터에서만 보던 화면을 링크로 보여줄 수 있게 된 겁니다. 받은 파일을 그대로 배포한 가상 스튜디오 데모이며, 실제 영업용 사이트는 아닙니다.
새 프로젝트가 비공개로 생성되어 로그인 화면이 보인다면 배포 도우미의 공개 전환 안내를 확인하세요. 이번 시연에서는 추가 공개 전환 없이 접속됐습니다.
08. 나중에 다시 볼 수 있게, 배포 가이드도 함께
아래는 WAKIT 배포 가이드입니다. 연결 → ZIP 업로드와 주소 설정 → 완성 주소 확인 흐름을 한 장에 정리해두었어요.
Netlify는 무료 플랜을 제공하지만 사용량 한도가 있습니다. 가이드의 무료 안내는 해당 플랜의 범위 안에서 이해해주세요. 무제한 트래픽이나 영구 무조건 무료를 약속하는 것은 아닙니다. 최신 조건은 Netlify 공식 요금 안내에서 확인할 수 있습니다.
https://www.netlify.com/pricing/
실제 화면으로 함께 따라가기
기본 화면 탐색과 테마 전환, ZIP 선택, 주소 입력, 배포 완료와 실제 페이지 접속을 담은 화면 시연입니다. 무음 약 2분 39초이며 단계별 설명 자막을 넣었습니다. 인증 정보가 나타날 수 있는 연결 전환 화면과 일부 대기는 편집에서 덜어냈습니다.
오픈 소식을 알릴 때, 안내할 내용을 여기저기 나누어 올리고 있었다면요.
먼저 한 페이지에 모아보는 것부터 시작해도 좋겠습니다. 이번에는 무료 완성 파일로 디자인과 배포 흐름을 경험해보실 수 있도록 준비했어요.
문구·이미지 수정에는 HTML 편집이 필요합니다. 개인·상업 프로젝트에 사용할 수 있지만, 템플릿 자체의 재판매·재배포는 허용되지 않습니다. 자세한 구성과 이용 조건은 상품 페이지와 사용 안내를 확인해주세요.
무료 파일 받기
https://ctee.kr/item/store/108367
직접 열어볼 수 있는 이번 시연 결과
https://wakit-landing-free-demo-1005.netlify.app/
WAKIT 배포 도우미
https://wakit-deploy-wizard.netlify.app/
WAKIT · 만드는 일을 조금 더 가볍게.