▶ 전체 영상으로 보기 👉 https://youtu.be/CPFMZCkoiY0
저는 아직 귀농 준비 중이고 땅도 못 구했습니다. 그런데 지난달, 함평에 있는 한 축산 관련 업체의 홈페이지를 만들어 넘겼습니다. 404 페이지까지 9개, 확정 범위로는 6개 트랙 39개 작업이었고요. 걸린 기간은 2주. 무엇을 어떤 순서로 했고 어디서 막혔는지 적습니다.
| 무슨 일 | 귀농 준비 중 받은 첫 외주 일감 — 홈페이지 제작 |
| 기간 | 수주에서 납품까지 2주 |
| 열쇠 | 땅보다 사람 연결(체류형 쉼터·소개)이 먼저였다 |
| 일반화 주의 | 1건의 우연 — 공식이 아니라 병행 전략 |
이 일이 왜 저한테 왔는가
영업으로 딴 일이 아닙니다. 함평을 오가다 체류형 쉼터에 계신 분을 한 분 알게 됐고, 그분을 통해 아는 사람이 한 명씩 늘었어요. 그러다 몇 번 뵙던 자리에서 홈페이지 얘기가 나왔습니다.
그 회사에는 IT 인력이 부족했습니다. 그래서 일의 범위가 "화면을 만들어 주세요"에서 끝나지 않았어요. 도메인·웹 호스팅·홈페이지 개발·콘텐츠 작성 4가지가 통째로 왔습니다. 도메인부터 서버, 회사 메일, 안에 들어갈 콘텐츠까지 한 사람 몫으로 붙었습니다. 도시에서는 이걸 기획자와 개발자와 콘텐츠 담당이 나눠 맡습니다.
1주차 — 만들기 전에 정해야 끝나는 것들
대표 주소를 먼저 확정한다
.co.kr로 갈지 .com으로 갈지는 취향처럼 보이지만 실제로는 이후 모든 표기의 기준값입니다. 회사 메일 주소, 명함, 푸터의 사업자정보, 검색엔진 등록 주소가 전부 여기서 파생되거든요. 순서를 거꾸로 해서 명함부터 인쇄하면 그 명함은 전량 폐기입니다.
저는 이 결정이 오기 전까지 소스에 주소를 하드코딩하지 않고 기다렸습니다. 나중에 실제 도메인으로 넘어갈 때 9개 파일의 OG 태그 절대주소를 한 번에 치환했는데, 미리 박아뒀다면 그 작업이 훨씬 지저분해졌을 겁니다.
호스팅 만료일을 확인한다
오래된 사이트를 넘겨받을 때는 이게 첫 순서여야 합니다. 웹호스팅은 만료돼도 요란하게 알려주지 않아요. 그대로 몇 달이 지나면 연장 자체가 막히고, 그때는 연장이 아니라 신규 신청이 됩니다. 계정과 서버 주소가 통째로 바뀌면 그 아래 작업이 전부 뒤로 밀리고요.
정보구조를 4갈래로 나눈다
이 회사에 찾아오는 사람은 성격이 완전히 다른 4갈래였습니다. 지자체 담당자, 축산 농가, 일반 소비자, 투자·언론. 원하는 자료도 묻는 것도 다릅니다.
그래서 문의 폼을 하나로 열지 않고 유형을 나눴어요. 유형마다 필요한 항목만 받게 했고요. 폼으로 이름과 연락처를 받는 순간 개인정보 수집이라 개인정보처리방침이 법적 의무가 되는데, 이용약관까지 2종을 국문으로 함께 준비했습니다.
2주차 — 만들면서 되돌린 것들
이 부분이 제작기의 진짜 내용일 것 같습니다. 잘된 것보다 되돌린 게 배울 게 많더군요.
폰트 서브셋을 했다가 되돌렸다
완성된 사이트 총 용량은 10MB인데, 그중 폰트가 6.6MB입니다. 이미지가 3.5MB, HTML과 CSS와 JS를 다 합쳐도 120KB예요. 즉 용량 문제는 사실상 폰트 문제입니다.
그래서 실제 쓰는 글자만 남기는 서브셋을 적용했습니다. 그리고 되돌렸어요. 서브셋을 걸어두면 나중에 문구를 한 글자만 바꿔도 그 글자가 폰트에 없어서 깨질 수 있거든요. 고객이 직접 문구를 손볼 여지를 남기는 게 몇 MB보다 값이 있다고 봤습니다.
작은 사진 위에 글자를 얹었다가 되돌렸다
2단으로 배치한 사진에 캡션을 얹어봤는데, 사진이 작아지니 글자가 배경에 묻혀서 안 읽혔습니다. 큰 히어로 사진에서는 되던 방식이 작은 프레임에서는 안 되더군요. 캡션을 사진 아래로 내리고, 대신 프레임 폭에 따라 캡션 크기가 반응하게 바꿨습니다.
히어로 움직임을 61px에서 137px로 올렸다
메인 사진에 스크롤 시차를 줬는데 처음 값으로는 움직이는지 알기 어려웠습니다. 아래쪽 밴드와 같은 체감이 되도록 61px에서 137px로 올렸고, 데스크톱에서는 확대만으로 부족해 좌우 이동을 더했어요. 확대는 화면 가운데가 제자리에 있어서 눈에 잘 안 띕니다.
이미지는 6번을 다시 뽑았다
브랜드 페이지 히어로 한 장에만 교체 기록이 6번 있습니다. 처음 결과물은 렌더링 티가 나서 상업 사진 쪽으로 방향을 바꿨고, 배경에 걸린 현수막을 지웠다가 다시 배치하고, 매대 구성을 바꾸는 식이었어요. 이미지 작업은 한 번에 안 끝난다고 처음부터 일정에 넣어두는 게 맞습니다.
넘기기 전 — 검수에서 실제로 걸린 것
화면을 다 만드는 일과 그 화면이 제대로 도는지 확인하는 일은 별개 공수입니다. 여기서 걸린 것들이 오히려 실무에 가깝더군요.
| 걸린 항목 | 내용 |
|---|---|
| 제목 계층 | 문서 구조에 맞게 정리하니 마크업 오류가 33건에서 0건으로, 접근성 점수가 98에서 100으로 올라갔습니다 (측정값 재확인 권장) |
| 탭 영역 | 전화·메일 링크의 터치 영역이 24px에 못 미쳤습니다. 손가락으로 누르기 어려운 크기예요 |
| 푸터 로고 | 어두운 배경에 로고가 잠겨서 안 보였습니다. 다크 배경용 변형을 따로 만들었습니다 |
| 영상 섹션 | 한우 제목 아래에 돼지 영상이 붙어 있었어요. 축종이 엇갈린 걸 검수에서 잡았습니다 |
| 사실관계 | 레드팀 점검으로 7건을 고쳤습니다. 시험 날짜가 실제 시험 기간이 아니라 시식회 날짜였던 것도 여기서 나왔습니다 |
표의 5개 항목 중 마지막 줄이 제일 무거웠습니다. 자료에 적힌 숫자를 그대로 옮기면 안 되고, 그 숫자가 무엇을 잰 값인지까지 확인해야 했거든요.
배포 — 되돌릴 길을 먼저 만든다
이 사이트가 올라가는 서버는 전송 방식이 제한적이었습니다. 암호화 전송을 지원하지 않아 결국 평문 방식으로 올려야 했어요. 호스팅 사양이라 우회할 수가 없더군요.
이런 환경일수록 되돌리기가 먼저입니다. 배포 스크립트를 이렇게 짰습니다.
- 배포를 시작하면 서버의 현재 상태를 통째로 내려받아 시각이 찍힌 폴더에 보관합니다.
- 그다음 새 파일을 올립니다.
- 백업은 최신 5개만 남기고 자동으로 지웁니다. 사람이 이름을 붙여둔 복원 지점은 회전에서 뺍니다.
- 문제가 생기면 스냅샷 하나를 지정해 그 시점으로 서버를 되돌립니다.
되돌릴 수 없는 배포는 손이 떨려서 못 합니다. 화면 만드는 시간보다 이 길을 내는 시간이 아깝지 않았어요.
실도메인 전환 — 순서를 바꾸면 안 되는 구간
테스트 주소에서 실제 회사 주소로 옮기는 작업입니다. 여기가 유일하게 시간이 정해져 있는 구간이었어요.
| # | 작업 | 소요 |
|---|---|---|
| ① | 호스팅 신규 신청·결제 | 10분 (고객 결정 대기 포함) |
| ② | 새 계정 접속 정보 확보 | 5분 |
| ③ | A 레코드를 새 서버로 변경 | 10분 + 반영에 최대 24시간 |
| ④ | 소스 안의 주소 일괄 치환 | 20분 |
| ⑤ | 배포 스크립트 교체 후 업로드 | 10분 |
| ⑥ | HTTPS 인증서 적용 | 1시간 |
6단계 중 ③이 발목입니다. 작업 자체는 10분인데 인터넷 전체에 퍼지는 데 하루가 걸려요. 시연 예정일이 있으면 최소 이틀 전에 ①부터 ③까지 끝내야 합니다.
인증서가 www를 포함하는지 본다
여기서 한 번 걸렸습니다. 발급받은 인증서는 대표 주소 하나만 보호하는 형태여서 www가 붙은 주소는 범위 밖이었어요.
이 상태로 흔한 방식의 리다이렉트를 짜면, www로 들어온 사람이 https가 붙은 www 주소로 한 번 튕기면서 경고 화면을 봅니다. 그래서 목적지를 요청 주소가 아니라 대표 주소로 고정했습니다. 그러면 www 요청이 암호화 이전 단계에서 흡수됩니다.
검색 차단은 4곳을 같이 푼다
제작 중에는 검색엔진에 잡히면 안 되니 색인을 막아둡니다. 문제는 막는 지점이 4곳이라는 거예요. 하나만 남아도 조용히 색인이 안 됩니다.
| 막는 곳 | 안 풀면 |
|---|---|
| robots.txt | 크롤러가 사이트 전체를 아예 안 읽습니다 |
| 각 페이지 noindex 메타 (9개 파일) | 읽기는 하는데 결과에 안 넣습니다. 가장 놓치기 쉽습니다 |
| OG 태그 절대주소 (9개 파일) | 카카오톡·페이스북 공유 미리보기가 깨집니다 |
| 서버 리다이렉트 | http와 https 주소가 각각 색인돼 평가가 쪼개집니다 |
가장 오래 걸린 건 만드는 일이 아니었다
여기까지가 기술 쪽인데, 정작 시간을 제일 많이 쓴 건 따로 있었습니다.
취재를 나간 것도 아니고 사진을 새로 찍은 것도 아니에요. 회사에서 준 문서, 그것만 가지고 만들어야 했습니다. 그러니 제 일의 중심은 이 회사가 무엇을 증명할 수 있고 무엇은 말하면 안 되는지 고르는 일이 됐어요. 위에 적은 레드팀 7건이 그 결과물이고요.
만드는 속도 자체는 빨랐습니다. 이번 작업은 클로드 코드로 했고 2주에 마무리됐어요. 빨라진 건 손이지 판단이 아니더군요. 초안은 몇 분이면 나오고, 무엇을 뺄지는 여전히 사람이 정합니다.
준비 중인 분들께
귀농 준비하면서 제가 모으던 것들은 혼자 있어도 쌓이는 것들이었습니다. 공고, 후기, 계산표. 안 쌓이는 건 그 지역에서 나를 아는 사람이었고, 그게 없는 동안에는 아무 일도 시작되지 않았어요.
땅은 아직도 못 구했습니다. 구해지면 그 과정도 그대로 적겠습니다. 잘 풀리든 안 풀리든요.
위 영상에서는 쉼터에서 일감까지 이어진 과정을 순서대로 다룹니다.
이 주제와 붙어 있는 글
▶ 영상으로 더 보기·구독 → 유튜브 채널
🔗 모든 링크 → linktr.ee/farmreturnlab

댓글
댓글 쓰기