[개인 사업 · 가게] Framer 사이트 개선 「스토리디자인」

간판 시공 업체 「스토리디자인」이 직접 만들어 운영하던 Framer 홈페이지를, 사이트를 새로 만들지 않고 그대로 둔 채 세 군데 고친 작업입니다. 견적 신청이 사장님에게 닿게 하고, 첫 화면 아래에 진행 방식을 안내하는 구역을 넣고, 시공 갤러리 카드를 정보가 보이는 카드로 바꿨습니다.

운영 중인 사이트에 세 가지를 더했습니다

세 작업에 똑같이 지킨 것이 있습니다.

• 고객이 직접 만든 Framer 사이트는 그대로 둔다
• 운영을 멈추지 않고 적용한다
• 기존 데이터와 신청서는 건드리지 않는다
• 끝난 뒤에는 고객이 직접 운영한다

끝까지 써도 닿지 않던 신청서

홈페이지의 「무료 방문 실측 & 견적 신청」은 마지막에 「신청 기능 준비 중」 안내만 나오고, 내용은 어디에도 전달되지 않았습니다. 손님은 접수된 줄 알고 기다리고, 사장님은 신청이 있었는지조차 알 수 없었습니다.

지금은 신청하는 즉시 사장님 카카오톡으로 알림톡이 갑니다.

• 늘 보는 카카오톡으로 — 관리 화면에 따로 들어가지 않아도, 신청이 오면 휴대폰이 먼저 알려 줍니다.
• 사진까지 한 번에 — 손님이 올린 현장 사진을 알림의 [사진 보기] 버튼 하나로 엽니다.
• 손님이 확인한 그대로 — 신청서 마지막 확인 화면과 같은 요약이 알림 본문에 들어갑니다.

신청에서 알림까지, 네 단계

서버를 따로 두지 않고, 신청이 들어올 때만 잠깐 도는 작은 연결 프로그램 하나로 이었습니다.

1. 손님 — 신청 내용 · 연락처 · 현장 사진을 보냅니다. 사진은 보내기 전에 브라우저에서 줄입니다.
2. 연결 프로그램 — 보낸 곳 · 입력값 · 중복을 확인하고 사진을 보관합니다.
3. 발송 서비스 — 카카오 심사를 통과한 문구에 신청 내용을 채워 보냅니다.
4. 사장님 — 카카오톡으로 알림이 도착합니다. 알림톡이 실패하면 같은 내용이 문자로 대신 갑니다.

카카오 문구 심사가 끝나기 전에는 문자로 먼저 개통하고, 승인 뒤 알림톡으로 바꿔 그 사이에도 신청이 끊기지 않게 했습니다.

계정도 비용도 고객 것으로

발송 서비스 · 카카오 채널 · 연결 프로그램 · 홈페이지 모두 고객 계정에 두었습니다. 작업이 끝나면 개발자 권한만 빼면 됩니다.

• 월 고정비 0원 — 신청이 들어올 때만 발송비(알림톡 1건 약 13원)가 나가는 구조입니다.
• 사진은 30일 뒤 자동 삭제 — 손님이 올린 사진을 필요 이상 오래 쌓아 두지 않습니다.
• 운영 안내서와 소스 코드 — 잔액과 발송 한도, 받는 번호 바꾸는 법, 알림이 안 올 때 볼 곳을 문서로 드리고, 다른 개발자가 이어받을 수 있게 코드와 구조 문서를 함께 넘겼습니다.

어떤 방식이 편하세요? — 첫 화면 아래의 안내 구역

고객이 가져온 시안의 구성과 문구는 그대로 두고, 색 · 모서리 · 테두리를 사이트가 이미 쓰는 값으로 맞췄습니다. 첫 화면과 같은 아이보리 바탕으로 이어 붙여 따로 끼워 넣은 띠처럼 보이지 않게 하고, 고른 쪽 버튼은 사이트의 신청 버튼과 같은 버건디로 채웠습니다.

• PC — 버튼에 마우스를 올리면 그 방식의 4단계 순서로 바뀌고, 누르면 견적 신청 팝업이나 간판 패키지 페이지로 이동합니다.
• 휴대폰 — 마우스를 올릴 수 없는 화면이라, 버튼을 누르면 안내만 바뀌고 이동은 안내 아래의 버튼 하나가 맡습니다. 고르는 버튼과 가는 버튼이 헷갈리지 않습니다.

적용한 뒤 고객이 「좀 더 얇고 위로 올라갔으면 좋겠어요」라고 하셔서, 번호 아래에 쌓던 글자를 번호 옆 한 줄로 옮기고 버튼 · 제목 · 여백을 줄였습니다. 문구는 하나도 빼지 않고 높이만 약 440px에서 260px로 줄여, 첫 화면에서 조금만 내려도 보입니다.

사진과 제목뿐이던 시공 갤러리

기존 카드는 사진과 긴 제목뿐이라, 무엇을 시공했는지는 제목을 끝까지 읽어야 알 수 있었습니다. 고객은 업종 배지 · 지역 · 태그 · 설명 · 버튼이 담긴 카드 시안을 가져왔습니다.

문제는 카드에 필요한 업종 · 지역 · 태그 칸이 CMS에 없다는 것이었습니다. 43건을 다시 입력하는 대신, 고객이 써 오던 주소(Slug) 규칙을 읽어 자동으로 채웠습니다.

• 지역 — 첫 단어, 다음 단어가 「~동」이면 함께
• 업종 — 그다음 단어를 사진 위 배지로
• 태그 — 나머지 재료 · 작업, 최대 4개
• 제외 — 「간판 · 시공 · 사례」와 끝 번호

CMS에는 새 칸(지역 · 업종 · 태그)도 만들어 두어, 값을 넣으면 그 값이 우선합니다. 사례는 지금까지 쓰던 방식 그대로 올리면 됩니다.

제목과 태그 수가 카드마다 달라도 같은 줄의 카드는 높이를 맞춰 버튼이 한 줄에 서고, 넘치는 글은 「…」로 줄입니다. PC 3열 · 태블릿 2열 · 휴대폰 1열이며, Home과 시공사례 두 페이지에 같은 카드를 적용했습니다.

결과

• 신청이 바로 닿는 홈페이지 — 견적 신청이 현장 사진과 함께 사장님 카카오톡으로 옵니다.
• 다음 단계가 보이는 첫 화면 — 맞춤 견적이든 패키지든, 4단계 순서를 먼저 보고 기존 신청서로 이어집니다.
• 한눈에 보이는 시공 사례 — 업종 · 지역 · 재료가 카드에 바로 보이고, 사례는 쓰던 방식 그대로 올립니다.

사이트에 쓰인 시공 사진과 브랜드 자산의 권리는 스토리디자인에 있습니다.