01 청송 송골농원 사과 농원 · 홈페이지 리뉴얼

송골농원 홈페이지 리뉴얼

오래된 쇼핑몰의 인상을 덜어내고, 농원의 신뢰와 상품 탐색에 집중한 반응형 웹으로 개선했습니다. PC·태블릿·휴대폰이 각각 다른 주소로 갈라지지 않고 한 화면으로 동작합니다.

songgolapple.com
송골농원 리뉴얼 전 홈페이지 — 이미지로 만든 메뉴와 고정폭 표 레이아웃 BEFORE
songgolapple.org

Real Website Capture · PC & Mobile

휴대폰에서는 이렇게 달라졌습니다

예전에는 휴대폰용 주소가 따로 있어서, 손님이 화면 아래 PC버전을 눌러 오가야 했습니다. 지금은 주소 하나로 화면 크기에 맞춰 동작합니다.

송골농원 리뉴얼 전 휴대폰 화면 — 카테고리·장바구니·마이페이지 버튼 아래로 상품 목록이 비어 있고, 그 밑에 PC버전 링크가 있다 BEFORE
휴대폰 전용 주소. 상품 목록이 빈 채로 화면이 여기서 끝나고, 나머지는 PC버전으로 넘어가야 했습니다.
송골농원 리뉴얼 후 휴대폰 화면 — 사과밭 사진 위에 우수관리인증 번호와 주문 버튼이 있다 AFTER
PC와 같은 주소입니다. 우수관리인증 번호와 주문 버튼이 첫 화면에 바로 놓입니다.

리뉴얼 · 제작 완료

온라인 웹 페이지를 다시 생기롭게.

홈페이지 리뉴얼 청송사과 농원 직거래

송골농원

경북 청송에서 사과를 직접 키워 파는 농원입니다. 농원은 잘 돌아가고 있었습니다 — 게시판을 보면 2024년 가을까지 손님 문의에 하나하나 답을 달아 두셨습니다. 멈춰 있던 것은 농사가 아니라 홈페이지였습니다. 등록된 상품이 0건이라 들어와도 살 수 있는 것이 없었고, 가격은 몇 해 전 공지 글 안에만 남아 있었습니다.

화면을 예쁘게 다시 그리는 대신, 손님이 실제로 하는 순서대로 다시 짰습니다. 믿을 만한가(인증번호) → 뭘 파나(크기별 사과) → 얼마인가(가격) → 어떻게 주문하나. 낮에는 밭에 있어 전화를 못 받는다는 사정이 원래 사이트에도 적혀 있어서, 전화를 대신할 창구로 카카오톡 채널과 네이버 톡톡을 화면에 붙박이로 두었습니다.

반응형 Tailwind CSS 카카오톡 채널 네이버 톡톡 UTF-8 전환

무엇이 달라졌나

휴대폰 화면
PC용과 아예 다른 사이트로 갈라져 상품이 하나도 안 보임
→ 화면 하나로 통일, 손가락으로 누를 크기 확보
상품
'등록된 상품이 없습니다'
→ 크기별로 나눠 가격과 함께 표시
주문 창구
전화·문자뿐, 낮에는 받기 어려움
→ 카카오톡·네이버 톡톡 고정 버튼 추가
검색 노출
모든 페이지의 제목 태그가 비어 있고, 소개글이 통이미지 한 장
→ 글자로 된 제목과 본문, '청송사과'로 검색되게
연락처
화면마다 이메일이 세 개로 갈리고, 주문전화와 팩스가 뒤바뀜
→ 한 곳에서 관리하는 하나의 연락처

회색으로 적은 것은 손보기 전 화면에서 직접 확인한 내용입니다. 화면은 실제 농원 정보로 만들었고, 가격은 농원이 올린 2022년 공지를 기준으로 적었습니다.

손님 화면 뒤에 관리자 페이지가 있습니다

홈페이지를 만들고 나서 정작 손을 못 대는 경우가 많습니다. 글 하나 고치는 데 연락하고 기다려야 하면 결국 아무도 안 고치고, 화면은 만든 날에 멈춥니다. 그래서 사장님이 직접 쓰는 화면을 함께 만듭니다.

관리자 페이지 · 대시보드
송골농원 백오피스 대시보드 — 회원·공지·갤러리·문의 건수와 최근 가입 회원이 한 화면에 있다

Real Admin Capture · 회원 정보는 가려서 실었습니다

PC · 모바일

사무실에서도, 밭에서도 같은 화면입니다.

공지·갤러리·배너·상품문의·회원을 한자리에서 관리합니다. 따로 앱을 깔지 않습니다 — 쓰시던 브라우저에서 주소만 열면 됩니다.

PC 화면
송골농원 백오피스를 PC 로 연 화면 — 왼쪽 메뉴와 열어 둔 탭 줄, 공지사항 목록이 한 화면에 있다
모바일 화면
같은 백오피스를 휴대폰으로 연 화면 — 메뉴가 가로줄로 접히고 통계 카드가 세로로 쌓인다
열어 둔 화면이 탭으로 남습니다
공지를 쓰다 문의를 확인하고 돌아와도 보던 목록·검색 상태 그대로입니다.
휴대폰에서도 그대로
메뉴가 상단 가로줄로 접히고 표는 옆으로 넘겨 봅니다. 별도 앱을 깔지 않습니다.
지우기 전에 한 번 더 묻습니다
되돌릴 수 없는 작업은 빨간 버튼으로 구분하고 확인을 받습니다.

백오피스 · 구축 완료

연락하지 않고, 직접 고칩니다.

공지사항 작성 화면 — 분류·제목·본문과 사진 올리기 칸이 있다
공지사항 글 · 사진

새 소식을 직접 올립니다

쓰고 고치고 내릴 수 있습니다. 사진도 같이 올라갑니다. 공지·안내·이벤트로 나뉘어 쌓입니다.

상품문의 목록 — 답변 상태와 숨김·삭제 버튼이 행마다 있다
손님 문의 답글 · 숨김

지우지 말고 숨기게 했습니다

본문에 전화번호가 적혀 급히 내려야 할 때가 있습니다. 지우면 답변까지 같은 줄이라 함께 사라져 그 건을 어떻게 처리했는지가 남지 않습니다. 숨기면 손님 화면에서만 내려가고 언제든 되돌릴 수 있습니다. 왜 내렸는지 메모도 함께 남습니다.

이벤트 배너 등록 화면 — 노출 기간의 시작·종료 날짜를 지정한다
이벤트 배너 기간 예약

끝나는 날 알아서 내려갑니다

기간만 정해 두면 됩니다. 지난 행사 배너가 몇 달씩 걸려 있는 일이 없습니다. 걸린 배너가 하나도 없으면 그 자리는 빈칸으로 남지 않고 통째로 사라집니다.

회원현황 화면 — 오른쪽 위에 엑셀 내려받기 버튼이 있고 개인정보는 가려져 있다
회원현황 검색 · 엑셀

쓰시던 회원을 그대로 옮겼습니다

기존 명단을 한 명도 빠뜨리지 않고 옮겨 담았고, 적립금과 포인트도 함께 넘어왔습니다. 검색해서 걸러 낸 그대로 엑셀로 내려받아 세무·배송·안내 문자에 바로 씁니다.

만들면서 정한 것

쓰는 사람이 실수해도 되게

되돌릴 수 있게
지운 것은 되돌릴 수 없습니다. 그래서 삭제 대신 숨김을 먼저 권하고, 화면에도 그렇게 적어 두었습니다.
휴대폰에서도
밭에서 문의에 답을 다는 일이 실제로 생깁니다. 관리자 화면도 손님 화면과 같이 한 화면으로 동작합니다.
검색에 안 잡히게
관리자 화면은 검색엔진에 내보내지 않고, 손님용 로그인과 화면을 나눴습니다. 비밀번호는 관리자가 직접 바꿉니다.
사진 정리까지
사진을 바꾸면 쓰지 않게 된 파일이 알아서 정리됩니다. 제목만 고칠 때는 사진이 그대로 남습니다.

관리자 페이지는 따로 파는 것이 아닙니다
어떤 항목을 사장님이 직접 고쳐야 하는지는 가게마다 다릅니다. 무엇을 자주 바꾸시는지 알려 주시면 그 자리부터 만듭니다.

관리자 페이지 상담

← 제작 사례 목록으로