매번 처음부터 만들면 사람이 못 버팁니다
분양 현장이 하나 뜨면 랜딩페이지가 한 개 필요합니다. 문제는 현장이 계속 생긴다는 겁니다. 매번 흰 화면에서 시작하면, 만들다 지쳐서 품질도 들쭉날쭉해집니다. 첫 현장은 정성 들이고, 다섯 번째 현장은 대충 하게 되죠.
Thank you for reading this post, don’t forget to subscribe!그래서 저는 랜딩페이지를 ‘작품’이 아니라 ‘공정’으로 바꿨습니다. 검증된 부분은 재사용하고, 매번 달라져야 하는 것만 갈아끼우는 방식입니다. 이렇게 정리해두니 회차를 거듭할수록 빨라졌습니다. 오늘은 그 뼈대를 공유합니다.
세 겹을 섞어서 만듭니다 — 융합 방식
핵심은 매번 똑같은 템플릿을 찍어내지 않는다는 데 있습니다. 그러면 복붙 티가 나고, 검색엔진도 중복 페이지를 싫어합니다. 대신 한 페이지를 세 겹의 조합으로 만듭니다.
- 뼈대(구조와 인프라): 가장 최근에 잘 만든 사례에서 가져옵니다. 섹션 배치, 폼, 검색엔진 설정 같은 검증된 부분입니다.
- 피부(모션과 분위기): 그 브랜드의 실제 공식 사이트에서 스크롤 움직임과 레이아웃 리듬을 참고합니다.
- 색: 제작하는 아파트 브랜드의 컬러·폰트·로고로 갈아끼웁니다.
예를 들어 자이 현장이면, 뼈대는 최근 완성본에서 가져오고 모션은 자이 공식 사이트를 참고하되 색은 자이 네이비로 맞춥니다. 여기에 실제 단지 데이터(분양가·일정)를 붙입니다. 같은 뼈대를 써도 결과물 분위기가 매번 달라지니, 빠르면서도 중복이 안 생깁니다. 검증된 인프라는 아끼고, 겉모습만 신선하게 가는 겁니다.
폼 하나 붙이는 게 사실 제일 중요합니다
예쁜 페이지보다 중요한 건 ‘관심 고객 연락처를 받는 폼’입니다. 이게 없으면 광고비만 태우고 손님을 흘려보냅니다.
저는 서버를 따로 두지 않고, 정적 페이지 위에 가벼운 함수 하나로 폼을 처리합니다. 방문자가 이름과 연락처를 남기면 그 데이터가 데이터베이스에 저장되고, 동시에 제 슬랙으로 “새 문의 들어왔습니다” 알림이 뜹니다. 서버 관리 없이 문의를 실시간으로 받는 구조입니다. 여기에 스팸을 걸러내는 함정 필드(사람 눈엔 안 보이고 봇만 채우는 칸)와 전화번호 형식 검사 정도를 붙여둡니다. 폼 항목은 성명·연락처·간단한 질문 세 개로 고정합니다. 늘리면 전환율이 떨어지거든요.
카톡 미리보기가 안 떠서 반나절 날린 이야기
실전 함정 하나만 풀겠습니다. 완성해서 카톡에 링크를 공유했는데 미리보기 이미지가 안 떴습니다.
원인은 이미지 포맷이었습니다. 페이지 본문 이미지는 용량을 줄이려고 WebP라는 최신 포맷을 쓰는데, 카톡·페이스북 미리보기용 이미지는 이 포맷을 아직 제대로 못 읽습니다. 그래서 공유용 대표 이미지만큼은 JPG로, 그것도 상대경로가 아니라 전체 주소(절대 URL)로 넣어야 미리보기가 뜹니다. 이걸 모르고 한참 헤맸습니다. 이런 건 어디 안 적혀 있어서, 겪어야 압니다. 저는 이런 함정을 겪을 때마다 문서에 적어둡니다. 다음의 저를 위해서요.
이미지도 그냥 올리면 느려집니다
작은 디테일 같지만 로딩 속도가 이탈률을 좌우합니다. 그래서 사진은 화질을 조금 낮춘 WebP로, 도면이나 지도처럼 글자가 있는 이미지는 화질을 높게 유지합니다. 글자가 뭉개지면 안 되니까요. 첫 화면에 뜨는 대표 이미지는 미리 불러오게 표시해서 첫인상이 늦지 않게 합니다. 파비콘(브라우저 탭에 뜨는 작은 아이콘)까지 자동으로 여러 크기로 만들어 넣습니다. 별거 아닌 것 같아도, 이런 게 모여서 ‘허접해 보이는 사이트’와 ‘깔끔한 사이트’를 가릅니다.
그런데 이런 자잘한 것까지 매번 손으로 하면 지칩니다. 그래서 이미지 최적화, 파비콘 만들기, 검색엔진용 정보 채우기 같은 반복 작업은 스크립트로 한 번에 돌게 만들어뒀습니다. 사람은 판단만 하고, 기계적인 건 기계가 하도록요. 이 경계를 잘 나누는 게 자동화의 핵심입니다.
배포하다 실수하면 설정 파일이 통째로 노출됩니다
또 하나. 배포할 때 폴더를 잘못 담으면, 비밀 설정이 담긴 파일이 인터넷에 그대로 노출될 수 있습니다.
그래서 저는 배포 전에 규칙을 정해뒀습니다. 설정 파일과 원본 데이터는 공개 폴더 바깥에 두고, 실제로 페이지에서 쓰는 파일만 골라 담아 올립니다. 배포 직후에는 명령어 한 줄로 주요 주소들이 정상인지, 혹시 설정 파일이 열려 있지는 않은지 확인합니다. 이 검증 단계를 습관으로 만들고 나서 사고가 사라졌습니다.
그래서 지금은 체크리스트로 돕니다
정리하면 순서는 이렇습니다. 최신 완성본 복제 → 텍스트·이미지·색상 교체 → 폼과 데이터베이스 연결 → 검색엔진용 정보 채우기 → 이미지 최적화 → 배포 → 검증 → 네이버·구글 등록.
이걸 문서로 만들어두니 다음 현장은 훨씬 빨라졌습니다. 1인 사업자에게 자동화란 거창한 로봇이 아니라, 이렇게 ‘매번 하는 일을 순서로 굳혀두는 것’에서 시작한다고 저는 생각합니다. 손이 기억하는 대신 문서가 기억하게 만드는 것. 그게 혼자 일하는 사람의 진짜 자동화입니다.