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

송골농원 홈페이지 리뉴얼

오래된 쇼핑몰 느낌을 걷어 내고, 믿고 살 수 있는지와 상품을 찾기 쉬운지에 맞춘 반응형 웹으로 바꿨습니다. PC·태블릿·휴대폰이 각각 다른 주소로 갈라지지 않고 한 화면으로 동작합니다. 지금은 손님이 사과를 고르고, 쿠폰을 받고, 카드·카카오페이로 결제한 뒤 송장번호까지 이 사이트에서 확인합니다.

키리웹이 제작한 실제 홈페이지 사례입니다. 비슷한 기능이 필요하신가요?

로그인 없이 문의할 수 있습니다. 기존 사이트 주소나 업종·필요한 기능을 한 줄로 알려 주세요.

무엇을 개선했나요?

키리웹은 청송 송골농원의 상품 탐색·주문·결제·배송 조회를 한 반응형 홈페이지로 연결했습니다. 농원이 상품·주문·쿠폰을 직접 관리하는 관리자 화면도 함께 구축했습니다.

확인 기준: . 자료 출처: 송골농원 운영 사이트 ↗와 이 페이지의 실제 관리자 화면. 주문·가입 수는 2026년 10월 1~19일 집계이며, 쿠폰 수치는 같은 확인일의 관리자 표시값입니다.

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

Real Website Capture · PC & Mobile

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

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

송골농원 리뉴얼 전 휴대폰 화면 — 카테고리·장바구니·마이페이지 버튼 아래로 상품 목록이 비어 있고, 그 밑에 PC버전 링크가 있다 BEFORE
휴대폰 전용 주소. 상품 목록이 빈 채로 화면이 여기서 끝나고, 나머지는 PC버전으로 넘어가야 했습니다.
지금 운영 중인 송골농원 휴대폰 첫 화면 — 무료배송 안내 띠, 사과 주문하기·쿠폰 받기 버튼, 리뉴얼 기념 할인 이벤트 배너 AFTER
PC와 같은 주소입니다. 주문 버튼과 쿠폰 받기가 첫 화면에 바로 놓입니다.

확인 · 운영 화면 기준

상품 주문부터 배송 조회까지 이어지는 사이트입니다.

리뉴얼 전에는 등록된 상품이 0건이었습니다. 2026년 10월 1일부터 19일까지 확인한 주문은 40건입니다. 손님이 사과를 고르고, 쿠폰을 받고, 결제하고, 송장번호까지 사이트에서 확인합니다. 아래는 2026년 10월 19일 운영 사이트와 관리 화면을 열어 확인한 기록입니다.

판매 중인 상품
0 → 6종
크기·용도별로 나누고, 규격마다 가격과 할인율을 따로 보여 줍니다.
결제 수단
4가지
카드·간편결제(토스페이먼츠), 카카오페이, 무통장입금.
2026년 10월 주문
40건
10월 1일부터 19일까지 들어온 주문입니다. 같은 기간 새로 가입한 회원은 20명입니다.
리뉴얼 쿠폰
38장 사용
5,000원 쿠폰 49장이 나가 38장이 실제 주문에 쓰였습니다.
송골농원 휴대폰 화면 — 리뉴얼 기념 할인쿠폰 5,000원, 로그인하고 받기 버튼
쿠폰 받기
송골농원 휴대폰 화면 — 사이트에서 주문하기 세 단계와 카드·간편결제·카카오페이·무통장입금, 송장번호 안내
주문 세 단계

사장님들이 '우리 가게에도' 하시는 기능

  • 할인쿠폰 이벤트

    리뉴얼 기념 5,000원 쿠폰을 걸었습니다. 손님은 로그인해서 받고, 주문서에서 고르기만 하면 할인됩니다. 회원당 1회, 받은 날부터 30일.

  • 송장번호까지 사이트에서

    발송하면 택배사와 송장번호가 주문내역에 바로 올라갑니다. '언제 와요' 를 전화로 묻지 않아도 됩니다.

  • 카카오페이까지 네 가지 결제

    카드·간편결제, 카카오페이, 무통장입금. 계좌로 보내던 단골도 그대로 삽니다.

  • 주문한 사람만 쓰는 구매 후기

    주문내역에서만 후기를 남길 수 있어 광고나 대필이 섞이지 않습니다.

  • 네이버로 바로 가입, 예전 회원도 그대로

    네이버 계정으로 바로 시작하고, 예전 쇼핑몰 회원은 휴대폰 인증 한 번으로 아이디·비밀번호를 찾습니다.

  • 법으로 정해진 표시까지

    상품정보제공고시, 배송·교환/반품 안내, 통신판매업 신고번호, 우수관리인증(GAP) 번호를 화면에 둡니다.

  • 검색에 걸리는 농원 이야기

    농원 이야기, 청송사과 특징, 품종별 수확 시기와 사과 크기 안내를 글로 실었습니다. 손님이 묻던 것을 미리 답하고, '청송사과' 로 찾는 사람에게 걸립니다.

리뉴얼 · 제작 완료

멈춰 있던 홈페이지를 다시 움직이게.

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

송골농원

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

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

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

무엇이 달라졌나

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

회색으로 적은 것은 손보기 전 화면에서 직접 확인한 내용입니다. 리뉴얼 후 화면의 상품·가격·이벤트는 2026년 10월 19일 운영 사이트 확인 기준입니다. 가격은 농원이 올린 2022년 공지를 기준으로 적었습니다.

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

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

  • 주문·발송

    들어온 주문을 확인하고 발송 처리하면 손님 주문내역에 송장번호가 뜹니다.

  • 취소·환불

    관리 화면에서 바로 합니다. 입금기한이 지난 주문은 저절로 정리됩니다.

  • 공지·사진·배너

    휴무 공지, 농원 사진, 기간이 정해진 이벤트 배너를 직접 올립니다.

  • 문의·회원

    상품문의에 답하고, 회원 명단을 검색해 엑셀로 내려받습니다.

관리자 페이지 · 대시보드
송골농원 백오피스 대시보드 — 발송 대기·전체 주문·결제 확인 필요·회원 수 카드와 오늘·이번 달·올해 운영실적(주문금액은 가렸다)

실제 관리자 화면 · 2026년 10월 19일 · 회원 정보와 매출 금액은 가려서 실었습니다

PC · 모바일

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

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

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

백오피스 · 구축 완료

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

주문 관리 화면 — 주문번호·상품·규격과 수량·금액·상태, 줄마다 운송장 등록 단추. 주문자와 받는 분은 가렸다
주문관리 운송장 · 수량 합계

운송장을 넣으면 손님 화면에 뜹니다

들어온 주문을 날짜·상태로 걸러 보고, 줄마다 운송장을 등록합니다. 등록하면 손님 주문내역에 택배사와 송장번호가 바로 뜹니다. '오늘 보낼 것만' 을 누르면 그날 포장할 주문만 남고, 상품별 수량 합계도 한 줄로 나옵니다.

상품문의 목록 — 답변완료·답변대기 상태와 답글·숨김·삭제 단추가 행마다 있다. 작성자는 가렸다
손님 문의 답글 · 숨김

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

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

이벤트 배너 목록 — 배너마다 노출 기간과 노출중·꺼짐 상태, 순서 바꾸기 단추가 있다
이벤트 배너 기간 예약

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

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

회원현황 화면 — 회원 1,205명 목록과 오른쪽 위 엑셀 내려받기 단추. 아이디·이름·연락처는 가렸다
회원현황 검색 · 엑셀

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

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

상품·재고 관리 화면 — 배송비와 무료배송 기준, 상품마다 판매가·정가·누적 판매·재고 수량 칸
상품·재고 가격 · 재고 · 배송비

사과 값과 재고를 그 자리에서 고칩니다

해마다 바뀌는 사과 값을 표에서 바로 고치고 저장합니다. 재고 수량을 넣으면 주문마다 저절로 빠지고, 0이 되면 주문을 받지 않습니다. 무료배송 기준도 여기서 정합니다.

할인쿠폰 화면 — 쿠폰마다 할인 금액·사용 기간·발급 수와 사용 수, 전체 발급·일부에게만 단추
할인쿠폰 발급 · 사용 현황

쿠폰을 만들고, 몇 장 쓰였는지 봅니다

할인 금액과 사용 기간을 정해 쿠폰을 만들고, 모두에게 또는 일부에게만 나눠 줍니다. 리뉴얼 쿠폰은 49장이 나가 38장이 실제 주문에 쓰였습니다.

결제 점검 화면 — 결제는 됐는데 주문 상태가 맞지 않는 건을 이유와 함께 보여 주고, 토스에서 다시 확인·환불 단추를 둔다
결제 점검 자동 확인 · 환불

결제가 어긋나면 먼저 알려 줍니다

결제사와 주문 기록이 맞지 않는 건을 따로 모아 이유를 적어 둡니다. 평소에는 1분마다 저절로 다시 확인하고, 그래도 남으면 단추 하나로 다시 묻거나 환불합니다.

쇼핑 · 운영 중

고르고, 담고, 삽니다

송골농원 상품구매 화면 — 선물용·가정용·주스/가공으로 걸러 보고 추천·가격·신상품 순으로 정렬한다
고르기 — 상품명·용도·무게로 검색하고, 용도별로 걸러 추천·가격·신상품 순으로 정렬합니다.
송골농원 상품 상세 화면 — 가격·배송비·원산지·중량·재고와 규격 선택, 수량 칸
구매 — 할인가·무료배송·원산지·중량·재고를 한눈에 두고, 규격과 수량을 골라 바로 주문합니다. 아래에 상품정보제공고시와 교환/반품 안내가 붙습니다.

결제 · 운영 중

카드로 받고, 끝까지 따라갑니다

받는 방법
주문서에서 카드·간편결제, 카카오페이, 무통장입금 가운데 고릅니다. 받아 둔 할인쿠폰도 주문서에서 바로 고릅니다. 농협 계좌 안내는 카드 결제를 켠 뒤에도 주문서에 그대로 남겨 두었습니다 — 계좌로 보내던 단골이 갑자기 못 사게 되면 안 됩니다.
취소 · 환불
관리자 화면에서 바로 됩니다. 입금기한이 지난 주문과 실수로 두 번 승인된 결제는 시키지 않아도 스스로 되돌립니다.
돈은 나갔는데 주문이 없을 때
결제가 되다 만 건을 1분마다 결제사에 다시 물어봅니다. 결제사 알림이 늦거나 아예 오지 않아도 결론이 납니다. 결제를 붙이는 것보다 이쪽이 어렵고, 실제로 파는 사이트와 보여 주기용을 가르는 곳입니다.

만들면서 정한 것

쓰는 사람이 실수해도 되게

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

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

관리자 페이지 상담

비슷한 주문·관리 기능이 필요하신가요?

업종과 필요한 기능, 기존 사이트가 있다면 주소를 알려 주세요. 현재 상태를 확인한 뒤 가능한 작업 범위와 비용을 안내합니다.

← 제작 사례 목록으로