이 글의 수리온 수학학원은 심플웹이 만든 콘셉트 시안입니다. 실제 학원이나 납품 사례가 아니며, 상호·주소·전화번호·숫자·후기는 모두 가상입니다.

학원 홈페이지를 보는 사람은 둘입니다. 학원을 고르는 학부모와 학원에 다니는 학생입니다. 둘 다 휴대폰으로 여는 경우가 많습니다. 그래서 학원 홈페이지는 PC 화면을 줄여 휴대폰에 맞추는 것으로는 부족합니다. 화면 폭이 바뀔 때 무엇을 남기고 무엇을 접을지 미리 정해 두어야 합니다.

이번에는 초·중·고 수학 전문 학원을 가정하고 만든 수리온 수학학원 시안을 세 가지 폭으로 찍었습니다. PC는 폭 1440px, 태블릿은 아이패드 세로 화면 크기인 834px, 휴대폰은 390px입니다. 메뉴, 첫 화면, 수업·일정 정보, 상담 버튼, 연락처가 어떻게 바뀌는지 차례로 봅니다. 아쉬운 부분도 찾아서 함께 적었습니다.

수리온 수학학원 시안 직접 눌러보기 → 시안 창 위쪽의 모니터·휴대폰 버튼을 누르면 PC 화면과 휴대폰 화면을 바꿔 볼 수 있습니다.

1. 첫 화면: 휴대폰에서는 위아래로 쌓입니다

PC 첫 화면은 큰 제목 '풀이보다 원리를 먼저' 아래를 두 칸으로 나눴습니다. 왼쪽은 사진입니다. 오른쪽에는 소개 문장 한 줄과 '레벨 테스트 예약 →' 버튼이 있고, 그 아래에 상담 시간(월–금 14:00–22:00, 토 10:00–18:00)과 전화번호가 있습니다.

태블릿에서도 두 칸 구성은 그대로입니다. 오른쪽 칸이 좁아져 소개 문장이 두 줄로 나뉩니다. 맨 위 머리 부분은 PC보다 한 줄 많은 세 줄인데, 이건 5장에서 봅니다. 화면이 세로로 길어서 첫 화면 안에 '기관 현황' 숫자 세 개와 '공지사항' 제목까지 들어옵니다.

휴대폰에서는 두 칸이 위아래로 쌓입니다. 순서는 제목 → 사진 → 소개 문장 → '레벨 테스트 예약 →' 버튼 → 상담 시간 → 전화번호입니다. 이 여섯 가지가 스크롤하지 않아도 휴대폰 첫 화면 안에 모두 들어옵니다.

학원 홈페이지에 들어온 학부모가 먼저 정하는 것은 "상담을 받아 볼까"입니다. 버튼 바로 아래에 상담 시간과 전화번호를 붙여 두면, 지금 전화해도 되는 시간인지까지 한 화면에서 확인할 수 있습니다.

2. 메뉴: 휴대폰에서는 '메뉴' 버튼 하나로 접힙니다

PC와 태블릿에서는 맨 위 작은 줄에 '학부모 로그인', '레벨 테스트 예약', '오시는 길'이 있습니다. PC에서는 그 아래 한 줄에 학원 이름, 메뉴 여섯 개(학원 소개, 초등부, 중등부, 고등부, 입학 안내, 학습 관리), 색을 채운 '레벨 테스트 예약 ↗' 버튼이 나란히 놓입니다. 초등부·중등부·고등부를 메뉴 이름으로 바로 올려서, 학부모가 자녀 학년부터 찾아 들어가게 했습니다.

휴대폰에서는 메뉴 여섯 개가 '메뉴' 버튼 하나로 접힙니다. 누르면 버튼 글자가 '닫기'로 바뀌고, 하위 메뉴까지 펼쳐진 목록이 열립니다. 예를 들어 중등부 아래에는 내신 대비, 서술형 특강, 선행 과정이 바로 보입니다. 한 번 더 누르지 않아도 자녀 학년에 어떤 수업이 있는지 알 수 있습니다.

메뉴 줄의 '레벨 테스트 예약 ↗' 버튼과 맨 위 줄 링크 세 개는 휴대폰에서 보이지 않습니다. 레벨 테스트 예약은 첫 화면의 '레벨 테스트 예약 →' 버튼이 대신 맡고, 오시는 길은 맨 아래 '찾아오는 길'에 있습니다. 좁은 화면 위쪽에 같은 버튼이 두 번 나오지 않습니다. 다만 '학부모 로그인'은 휴대폰에서 아예 빠지는데, 이 점은 글 끝 확인 항목에 적었습니다.

3. 수업·일정 정보: 표가 한 줄씩 나뉩니다

PC의 '모집·행사 일정'은 '일정'과 '내용' 두 칸에 '신청' 버튼이 붙은 표입니다. '12월 22일 개강 · 중1–고1 / 겨울방학 선행 특강', '10월 기말 대비 4주 / 중등 서술형 특강', '매주 토요일 오전 / 무료 레벨 테스트'가 한 줄씩 있고, 줄마다 오른쪽 끝에 '신청' 버튼이 있습니다.

휴대폰 폭에서는 이 표가 비좁습니다. 그래서 줄마다 수업 이름을 먼저 굵게 쓰고, 날짜와 대상은 그 아래로 내렸습니다. '신청' 버튼은 줄 오른쪽에 그대로 남습니다. "무슨 수업인지"를 먼저 읽고 "언제, 누구 대상인지"를 확인한 뒤 바로 신청을 누르는 순서가 됩니다.

'교육 과정'도 비슷하게 바뀝니다. PC에서는 번호, 과정 이름, 설명, 화살표가 한 줄에 놓입니다. 휴대폰에서는 설명('학교별 기출 분석과 서술형 대비' 등)이 과정 이름 아래로 내려가고 화살표는 빠집니다. 좁은 화면에서도 설명이 끝까지 보입니다.

나머지 칸들도 휴대폰에서는 줄 수를 줄입니다.

• 기관 현황: PC·태블릿은 숫자 세 개(8명 · 6명 · 14년)가 한 줄, 휴대폰은 두 칸씩입니다. 세 번째 '14년'은 다음 줄에 혼자 놓입니다.
• 바로가기: PC는 여섯 칸 한 줄, 휴대폰은 두 칸씩 세 줄입니다.
• 공지사항: PC는 제목 오른쪽 끝에 날짜가 있고, 휴대폰은 날짜가 제목 아래로 내려갑니다.

4. 상담·연락처: 첫 화면과 맨 아래 두 곳에 있습니다

상담 시간과 전화번호는 첫 화면과 맨 아래 '찾아오는 길' 두 곳에 있습니다. 첫 화면에서 바로 전화하는 학부모도 있고, 수업과 일정을 다 읽은 뒤 맨 아래에서 연락처를 찾는 학부모도 있기 때문입니다.

휴대폰에서 '찾아오는 길'은 지도와 정보 칸이 PC처럼 나란히 남습니다. 오른쪽 칸이 좁아서 주소가 세 줄로 나뉘고, 상담 시간은 '월–금 14:00–' / '22:00 · 토' / '10:00–18:00'처럼 시간 중간에서 줄이 바뀝니다. 실제로 만들 때는 휴대폰에서 정보를 지도 아래로 내리고, 전화번호를 누르면 바로 전화가 걸리게 연결하는 편이 좋습니다.

5. 태블릿: 메뉴 여섯 개는 두 번째 줄로 내려갑니다

태블릿 세로 화면(834px)은 PC 메뉴 줄을 그대로 쓰기에는 좁고, 휴대폰처럼 '메뉴' 버튼으로 접기에는 넓습니다. 그래서 이 시안은 태블릿 폭에서 머리 부분을 나눕니다. 첫 줄에는 학원 이름과 '레벨 테스트 예약 ↗' 버튼이 양 끝에 놓이고, 둘째 줄에 메뉴 여섯 개가 칸을 나눠 한 줄로 놓입니다.

메뉴를 열지 않아도 초등부·중등부·고등부가 모두 보이고, 가장 눈에 띄어야 할 예약 버튼도 잘리지 않습니다. 대신 머리 부분이 PC보다 한 줄 높아져서, 첫 화면에 들어오는 내용이 그만큼 줄어듭니다. 처음 만든 시안에서는 태블릿에서도 PC 메뉴 줄이 그대로 나와 오른쪽 끝 예약 버튼이 잘렸고, 이 글을 쓰면서 지금처럼 고쳤습니다.

아직 아쉬운 곳도 있습니다. 아래쪽 '바로가기'는 태블릿에서 여섯 칸 중 다섯 칸만 한 줄에 들어가고, '학습 관리 · 공지사항' 칸이 다음 줄에 혼자 내려갑니다. 실제로 만든다면 태블릿에서는 세 칸씩 두 줄로 나누겠습니다.

PC와 휴대폰 화면만 보고 넘어가면 이런 부분을 놓치기 쉽습니다. 태블릿 폭은 따로 열어 확인해야 합니다.

실제 학원 홈페이지로 옮길 때 확인할 것

• 신청 버튼을 어디로 연결할지: 시안이라 실제 신청은 접수되지 않습니다. 실제 제작에서는 '레벨 테스트 예약'과 '신청' 버튼을 문의 폼이나 예약 기능(견적 계산기의 '예약 기능' 항목)으로 연결하거나, 학원이 이미 쓰는 전화·카카오톡 채널·외부 신청 페이지로 연결합니다.
• 학부모 로그인: 시안의 '학부모 로그인'은 PC·태블릿 맨 위 줄에만 있고, 휴대폰 화면과 메뉴 목록에는 없습니다. 학부모 전용 기능을 운영하려면 회원 기능(견적 계산기의 '회원 기능' 항목)이 필요하고, 휴대폰 메뉴 안에도 로그인 자리를 넣어야 합니다.
• 일정과 공지: 특강 일정, 레벨 테스트 요일, 공지는 자주 바뀝니다. 관리자 페이지(견적 계산기의 '관리자 페이지' 항목)를 함께 만들면 학원에서 직접 고칠 수 있습니다.
• 숫자와 후기: '반 최대 인원 8명' 같은 숫자와 학부모 후기는 시안용 가상 내용입니다. 실제 기록과 실제 후기가 있을 때만 씁니다.
• 등록번호와 교습비: 시안 바닥글에는 '학원 등록번호 제가상-000호 · 교습비 게시' 자리가 있습니다. 실제 학원은 이 자리를 실제 등록번호와 교습비 안내로 채웁니다. 교습비를 어떻게 게시하고 광고에 무엇을 표시할지는 시·도 교육청 규칙으로 정하니, 관할 교육청 기준을 확인해 채웁니다.

수리온 수학학원 시안 직접 눌러보기 → 교육·공공 시안 100개 보기 · 우리 학원 예상 견적 보기

이 글의 한결조선기자재는 심플웹이 만든 콘셉트 시안입니다. 실제 회사나 납품 사례가 아니며, 상호·실적·인증·설비 수치·주소는 모두 가상입니다.

제조업체 홈페이지를 여는 사람 중에는 새 거래처를 찾는 구매·개발 담당자가 있습니다. 이 사람이 확인하는 것은 대체로 다섯 가지입니다.

1. 무엇을 만드는 회사인가
2. 우리 물건을 만들 설비와 능력이 있나
3. 품질을 믿을 수 있나 (인증)
4. 비슷한 일을 해 본 적이 있나 (실적)
5. 누구에게 어떻게 물어보나 (견적)

그래서 제조업 회사소개 홈페이지는 회사가 하고 싶은 말의 순서보다 바이어가 묻는 순서로 정보를 놓는 게 좋습니다. 이번에는 조선소에 선체 블록과 배관 모듈을 납품하는 회사를 가정하고 만든 한결조선기자재 시안이 이 다섯 질문에 어디서, 어떤 말로 답하는지 정리했습니다. 시안은 직접 눌러볼 수 있습니다.

한결조선기자재 시안 직접 눌러보기 →

1. 메뉴 이름이 바이어의 질문과 같습니다

메뉴는 회사소개 · 사업분야 · 생산설비 · 품질·안전 · 납품실적 · 고객지원 순서입니다. 맨 앞의 회사소개를 빼면 위의 다섯 질문과 순서가 같습니다.

• 사업분야: 무엇을 만드나
• 생산설비: 만들 수 있나
• 품질·안전: 믿을 수 있나
• 납품실적: 해 본 적 있나
• 고객지원: 어디로 묻나

'기술력'이나 '경쟁력' 같은 넓은 말이 아니라, 바이어가 찾는 단어가 그대로 메뉴 이름입니다. 메뉴를 열어 보기 전에 이 홈페이지에서 무엇을 확인할 수 있는지 보입니다.

오른쪽 위 작은 줄에는 KOR · ENG · 협력사 공지가 있고, 그 아래에 빨간 밑줄의 '견적 문의'가 있습니다. 이미 함께 일하는 협력사가 보는 공지와 새로 거래를 검토하는 사람이 누르는 버튼을 나눠 두었습니다.

2. 첫 화면은 무엇을 하는 회사인지 한 문장으로 답합니다

큰 제목 '바다 위 30년을 버티는 강판'은 구호입니다. 바이어에게 필요한 답은 그 아래 작은 문장에 있습니다. "거제 조선소 앞 공장에서 선체 블록과 배관 모듈을 만들어 바지선으로 보냅니다."

어디에 있는지(거제 조선소 앞), 무엇을 만드는지(선체 블록과 배관 모듈), 어떻게 보내는지(바지선)가 한 문장에 들어 있습니다. 문장 바로 아래에 '견적 문의 →'가 있습니다.

왼쪽 아래 '바로가기'에는 대표이사 인사말 · 선체 블록 · 공장 현황 · 선급 인증 · LNG 운반선 · 공지사항 여섯 개가 있습니다. 공장 현황(설비), 선급 인증(품질), LNG 운반선(실적)처럼 바이어가 먼저 확인할 페이지를 첫 화면에 꺼내 두었습니다. 볼 것을 이미 정한 사람은 스크롤 없이 바로 넘어갈 수 있습니다.

3. 메인은 번호를 붙인 다섯 칸입니다

첫 화면 아래는 1 회사 소개 → 2 사업 분야 → 3 주요 실적 → 4 회사 개요 → 5 공지·보도자료 순서이고, 맨 아래에 빨간 견적 띠가 있습니다. 칸마다 왼쪽에 큰 빨간 번호와 제목을 붙여, 제안서 목차처럼 지금 몇 번째 내용을 보고 있는지 알 수 있습니다.

1 회사 소개는 한 문단입니다. 설립 연도와 지역, 한 부지에서 하는 일(선체 블록 조립, 배관 모듈 제작, 선실 의장품 생산), 보유 인증이 들어 있습니다. 바이어에게 가장 쓸모 있는 문장은 이것입니다. "조선소 도크까지 바닷길로 4km 거리여서 완성 모듈을 바지선으로 바로 옮길 수 있습니다."

큰 블록을 납품하는 회사에게 운송 거리는 납기와 운송비에 바로 닿는 이야기입니다. 이런 장점은 소개 문단 안에만 두지 말고 숫자로 꺼내는 게 좋습니다. 이 시안은 4번 칸에서 '4km'를 다시 숫자로 보여줍니다.

4. 사업 분야와 실적에 숫자를 한 줄씩 붙였습니다

2 사업 분야는 네 칸이고, 칸마다 설명이 한 줄입니다.

• 선체 블록: 최대 280톤 블록 조립·용접
• 배관 모듈: LNG 화물 배관 스풀과 모듈 제작
• 의장품: 사다리·난간·해치 등 선체 의장품
• 도장: 블록 도장장 2동 운영

'선체 블록 제작'이라고만 쓰면 바이어는 "우리 블록 크기도 되나?"를 다시 물어야 합니다. '최대 280톤'이 있으면 그 질문이 먼저 풀립니다.

3 주요 실적은 사업 분야 바로 다음에 옵니다. 할 수 있다고 쓴 일을 해 본 기록으로 곧바로 받칩니다.

• LNG 운반선 배관 모듈 납품: 17만 4천㎥급 12척분
• 컨테이너선 선미 블록: 2만 4천 TEU급
• FPSO 의장품: 해양 플랜트 거주구 의장

실적 이름 아래에 배의 크기나 수량을 한 줄 붙였습니다. '납품 경험 다수'보다 '12척분'이 바이어의 판단에 더 쓸모가 있습니다.

4 회사 개요는 숫자 세 개입니다. 280t(최대 블록 중량), 4km(조선소까지 바닷길), 5개(보유 선급 인증).

시안 속 연도, 톤수, 척수, 인증 개수는 모두 가상입니다. 실제 회사 홈페이지에는 확인할 수 있는 기록이 있을 때만 씁니다.

5. 견적 문의는 네 군데에 있고, 그 앞에 최근 공지가 있습니다

5 공지·보도자료에는 '제3 조립장 크레인 증설'(2026.09.12), '용접 기능직 채용'(2026.08.20), '태풍 대비 작업 중지 기준 안내'(2026.07.15)가 있습니다. 설비를 늘리고, 사람을 뽑고, 안전 기준을 알리는 공지입니다. 날짜가 최근이면 바이어는 이 회사가 지금도 일하고 있는지 따로 묻지 않아도 됩니다. 반대로 마지막 공지가 몇 년 전이라면 이 칸은 없는 편이 낫습니다.

견적 문의 버튼은 네 군데에 있습니다.

• 메뉴 줄 오른쪽 위 '견적 문의': 빨간 밑줄로 표시했습니다. 실적 상세 화면에도 같은 자리에 있습니다.
• 첫 화면 '견적 문의 →': 회사 소개 문장 바로 아래입니다.
• 맨 아래 빨간 띠의 '견적 문의': 띠 문구는 "모듈 제작 사양을 검토해 드립니다"입니다.
• 하단 '고객지원' 아래 '문의하기': 하단에는 메뉴 여섯 개와 하위 메뉴가 모두 펼쳐져 있고, 주소·대표전화·운영 시간(평일 07:30–16:30)이 함께 있습니다.

빨간 띠 문구가 좋습니다. '문의하세요'가 아니라 "사양을 검토해 드립니다"라고 써서, 바이어가 무엇을 들고 연락하면 되는지 알려 줍니다.

시안에서는 화면만 둘러볼 수 있고 실제 견적 문의는 접수되지 않습니다. 실제 제작에서는 이 버튼들을 문의 폼(견적 계산기의 '문의 폼' 항목)으로 연결해 견적 요청을 받을 수 있고, 대표전화로 바로 연결할 수도 있습니다. 도면이나 사양서 파일까지 첨부로 받을지는 상담에서 정합니다.

6. 실적 하나를 열면 네 칸 요약부터 보입니다

시안의 하위 페이지는 실적 상세 화면입니다. 제목 'LNG 운반선 배관 모듈 납품' 아래에 분야('배관 모듈')가 한 번 더 적히고, 프로젝트 · 분야 · 범위 · 연도 네 칸이 한 줄로 놓이고, 사진 두 장과 짧은 설명이 이어집니다. 실적 하나를 볼 때 바이어가 먼저 찾는 '무엇을, 어디까지, 언제'를 맨 위 한 줄에서 읽을 수 있습니다.

7. 아쉬운 점: 설비와 인증은 메인에서 숫자 하나뿐입니다

메뉴에는 '생산설비'(공장 현황 · 주요 설비)와 '품질·안전'(선급 인증 · 안전 관리)이 따로 있습니다. 그런데 메인의 다섯 칸에는 이 둘의 자리가 없습니다.

인증은 회사 소개 문단 끝의 "5개 선급 인증을 보유하고 있습니다"와 회사 개요의 '5개'로만 나옵니다. 어느 선급의 인증인지는 메인에서 보이지 않습니다. 설비도 '최대 280톤', '블록 도장장 2동'처럼 사업 분야 설명 속에 흩어져 있습니다. 바이어가 궁금한 것은 '5개'라는 개수보다 어느 곳의 인증 다섯 개인지입니다.

실제 회사 홈페이지로 만들 때는 사업 분야와 주요 실적 사이에 '설비·인증' 칸을 하나 넣기를 권합니다.

• 주요 설비 한 줄: 크레인 용량, 조립장·도장장 수처럼 바이어가 자기 물건과 견줘 볼 수 있는 숫자. '생산설비' 페이지로 연결합니다.
• 인증 이름 한 줄: 인증 기관 이름이나 로고. '선급 인증' 페이지로 연결합니다.

그러면 메인 순서가 메뉴 순서(사업분야 → 생산설비 → 품질·안전 → 납품실적)와 같아집니다. 바이어는 메뉴를 열지 않고 아래로 내리기만 해도 다섯 질문의 답을 다 볼 수 있습니다.

8. 휴대폰에서는 견적 문의가 맨 위로 올라옵니다

휴대폰에서는 메뉴가 '메뉴' 버튼 하나로 접히고 첫 화면 순서가 바뀝니다. 소개 문장과 '견적 문의 →'가 맨 위에 오고, 그 아래로 제목, 사진, 바로가기 여섯 개가 이어집니다. 본문에서 가장 먼저 보이는 버튼이 견적 문의입니다.

다만 대표전화는 휴대폰에서도 맨 아래 하단 정보에만 있습니다. 공장이나 현장에서 휴대폰으로 보는 담당자에게는 전화가 더 빠를 때가 있습니다. 실제 홈페이지에서는 첫 화면이나 화면 아래 고정 바에 전화 버튼을 함께 두기를 권합니다.

실제 회사 홈페이지로 옮길 때 확인할 것

• 견적을 어떻게 받을지: 문의 글만 받는지, 도면이나 사양서 파일까지 함께 받는지에 따라 네 버튼이 연결될 곳이 정해집니다.
• 인증: 유효한 인증만 인증 기관·범위·유효기간과 함께 올립니다. 만료된 인증이 그대로 남아 있으면 오히려 신뢰를 잃습니다.
• 실적: 발주처 이름과 사진을 공개해도 되는지 먼저 확인합니다. 공개가 어렵다면 '17만 4천㎥급 12척분'처럼 선종·규모·수량만으로도 실적이 됩니다. 실적 상세에는 시안의 네 칸에 수량·납기·맡은 공정을 더하면 좋습니다.
• 사진: 시안 사진은 무료 이미지입니다. 실제 홈페이지에는 자기 공장과 납품 현장 사진을 씁니다.
• 영문 페이지: 해외 선주나 조선소와 거래한다면 ENG 아래에 무엇을 둘지 정합니다. 국문 전체를 옮길지, 사업분야·설비·인증·실적만 추린 짧은 영문 소개로 할지 정합니다. 심플웹은 영문 페이지도 상담에서 범위를 정해 별도 견적으로 만듭니다.
• 인증과 공지: 자주 바뀌는 정보입니다. 관리자 페이지(견적 계산기의 '관리자 페이지' 항목)를 함께 만들면 회사에서 직접 올리고 고칠 수 있습니다.
• '280t', '12척분' 같은 숫자: 실제 기록이 있을 때만 씁니다.

한결조선기자재 시안 직접 눌러보기 → 기업·제조 시안 100개 보기 · 우리 회사 예상 견적 보기

이 글의 금액은 2026년 10월 기준 심플웹 다이렉트 견적 계산기가 보여주는 예상 시작 금액이며, 부가세 별도입니다. 최종 견적은 상담에서 범위를 정한 뒤 확정합니다.

4장의 PRECISION PARTS와 SEASON TEA는 심플웹이 만든 콘셉트 시안입니다. 실제 회사나 납품 사례가 아니며, 상호·주소·상품은 모두 가상입니다. 화면 구성을 비교하려고 고른 것이고, 시안마다 금액이 정해져 있지는 않습니다.

홈페이지 견적을 알아보면 금액 차이가 큽니다. 50만 원이라는 곳도 있고 300만 원이 넘는 곳도 있습니다. 똑같이 '홈페이지'라고 부르지만, 금액이 다르면 만드는 것도 다릅니다.

심플웹 사이트의 계산기도 그렇습니다. 가장 낮은 조합은 50만 원이고, 쇼핑몰에 결제와 관리자 기능을 넣으면 310만 원이 나옵니다. 그 사이 260만 원이 어디서 생기는지 항목별로 나눠 보면, 우리 회사나 가게에 맞는 예산을 잡기가 쉬워집니다.

우리 홈페이지 예상 금액 계산해 보기 →

1. 계산기는 세 가지만 묻습니다

심플웹 사이트의 견적 영역에는 길이 두 개 있습니다. 왼쪽 '다이렉트 견적'은 몇 가지를 고르면 예상 금액이 바로 나오는 계산기이고, 오른쪽 '맞춤형 견적'은 기능과 흐름을 처음부터 설계하는 상담입니다. 이 글은 왼쪽 계산기를 기준으로 합니다.

계산기가 묻는 것은 세 가지입니다. 어떤 사이트인지(유형), 화면이 몇 개인지(페이지 수), 어떤 기능이 더 필요한지(추가 기능). 기본 50만 원에서 시작해 고른 항목의 금액을 더합니다.

2. 50만 원: 소개 화면 다섯 개와 문의 폼

기본형 홈페이지, 5페이지 이내, 문의 폼을 고르면 500,000원이 나옵니다. 계산기에서 가장 낮은 금액입니다.

들어가는 것은 회사나 가게를 소개하는 화면 다섯 개 이내와, 손님이 문의를 남기는 폼입니다. 예를 들면 첫 화면, 회사 소개, 서비스 안내, 오시는 길, 문의 정도입니다. 예약을 받거나, 손님이 로그인하거나, 결제를 받는 기능은 없습니다. 공지나 사진을 직접 올리는 관리자 화면도 고르지 않은 상태입니다.

3. 310만 원: 쇼핑몰에 결제와 관리자 화면

쇼핑몰, 6–10페이지, 결제 기능, 관리자 페이지를 고르면 3,100,000원이 나옵니다. 50만 원에서 무엇이 더해졌는지 한 줄씩 적으면 이렇습니다.

늘어난 260만 원 가운데 220만 원은 '물건을 팔고 주문을 관리하는 일'에 붙은 금액입니다(쇼핑몰 100만 · 결제 70만 · 관리자 50만). 계산기는 쇼핑몰 유형과 결제 기능을 따로 더합니다. 나머지 40만 원은 화면이 늘어난 몫입니다.

4. 메뉴 개수가 같아도 금액은 갈립니다

콘셉트 시안 두 개를 보겠습니다. 위는 정밀 부품을 깎는 제조 회사 PRECISION PARTS, 아래는 계절 차를 파는 SEASON TEA입니다.

두 시안은 화면 규모가 거의 같습니다. 둘 다 메인 메뉴가 다섯 개이고(회사소개·제품·품질·견적 문의·자료실 / SEASON·TEAWARE·TEA GUIDE·FARM·GIFT), 메뉴를 펼치면 하위 메뉴가 13개씩 나옵니다.

다른 곳은 SEASON TEA 오른쪽 위의 작은 글자 세 개, 로그인 · 장바구니 · 주문조회입니다. 이 세 단어가 실제로 움직이려면 손님 계정(회원 기능), 온라인 결제(결제 기능), 들어온 주문을 확인하는 운영자 화면(관리자 페이지)이 뒤에 있어야 합니다. 화면에서는 작게 보여도 계산기에서 금액이 가장 크게 갈리는 항목들입니다.

PRECISION PARTS의 오른쪽 위에는 '견적 문의' 버튼 하나가 있습니다. 손님이 남긴 내용을 받는 것이라면 계산기에서 금액이 더해지지 않는 문의 폼으로 충분합니다.

하나 더 볼 것이 있습니다. 두 시안 모두 메인 메뉴는 다섯 개지만 하위 메뉴는 13개이고, 하위 메뉴마다 화면이 하나씩 열립니다. 계산기에서 페이지 수를 고를 때는 메인 메뉴 개수만 세지 말고 하위 화면까지 세어 보세요. 몇 개인지 애매하면 '아직 잘 모르겠어요'를 고르고 상담에서 함께 세면 됩니다.

5. 계산기 금액에 따로 붙지 않는 것: 모바일 화면, 검색엔진 설정, 디자인

• 모바일 화면: 심플웹은 모든 홈페이지를 PC·태블릿·모바일 화면에 맞춰 반응형으로 만듭니다. 다이렉트 견적 안내에도 '반응형 웹 · 모바일 최적화'가 기본 항목으로 들어 있어서, 계산기에 '모바일' 항목이 따로 없습니다.
• 검색엔진 기본 설정: 검색엔진이 사이트를 잘 읽을 수 있도록 기본 설정을 갖춰 만들고, 구글 서치콘솔과 네이버 서치어드바이저 등록 방법을 안내합니다. 다이렉트 견적 안내의 기본 항목이라 따로 고르지 않습니다.
• 디자인: 계산기에는 디자인 등급을 고르는 항목이 없습니다. 이 계산기 안에서 금액은 유형, 화면 수, 기능으로만 달라집니다. 다이렉트 견적은 검증된 구성으로 빠르게 여는 방식이고, 디자인과 흐름을 처음부터 설계하고 싶다면 기획·디자인·개발·QA 담당이 한 팀으로 붙는 '맞춤형 견적'으로 상담합니다.

6. 계산기에 없는 것: 상담 때 물어볼 것

계산기 금액은 '예상 시작 금액'입니다. 결과 화면에도 "세부 범위와 기능에 따라 최종 견적이 달라집니다"라고 적혀 있습니다. 아래 항목은 계산기에 나오지 않으니, 어느 곳에서 견적을 받든 꼭 물어보세요.

• 제작 기간: 심플웹은 상담에서 페이지 수와 기능 범위를 정리한 뒤 일정을 함께 확정합니다.
• 수정 횟수: 디자인과 내용을 몇 번까지 고칠 수 있는지.
• 도메인·호스팅·유지보수: 첫해에 드는 비용과 다음 해부터 드는 비용, 누구 명의로 등록하는지.
• 글과 사진: 소개 문구와 사진을 누가 준비하는지.
• 부가세와 결제 시점: 견적 금액에 부가세가 들어 있는지(심플웹 계산기 금액은 부가세 별도), 계약금과 잔금을 언제 내는지.
• 오픈 후 수정: 관리자 페이지 없이 만들었다면 공지나 사진을 바꿀 때 어떻게 요청하는지. 심플웹은 오픈 후에도 콘텐츠 수정과 기능 추가를 맡고, 조건은 상담에서 정합니다.

이 기능이 필요하면 견적이 올라갑니다

예산을 정하기 전에 아래 항목에 체크해 보세요. 체크한 것이 하나도 없다면 50만 원 조합에서 시작할 수 있습니다.

• 하위 메뉴까지 세면 화면이 6개 이상이다 → 6–10페이지 +40만 원, 11페이지 이상 +90만 원
• 손님이 날짜와 시간을 골라 예약한다 → 예약 기능 +45만 원. 예약이 사이트의 중심이면 유형도 '예약·상담형'(+70만 원)으로 고르게 되고, 계산기는 둘을 따로 더합니다.
• 손님이 로그인하고 마이페이지를 본다 → 회원 기능 +50만 원
• 홈페이지에서 상품을 팔고 결제를 받는다 → 유형 '쇼핑몰' +100만 원, 결제 기능 +70만 원
• 공지·사진·상품을 우리가 직접 올리고 고친다 → 관리자 페이지 +50만 원
• 우리 업무에 맞춘 기능을 새로 설계해야 한다 → 유형 '맞춤형 프로그램' +150만 원

예산 쪽에서 거꾸로 보면 이렇습니다. 모두 계산기 결과 그대로이고 부가세 별도입니다.

계산 결과에서 '이 견적으로 문의하기'를 누르면 고른 유형·규모·기능과 예상 금액이 문의 칸에 그대로 채워집니다. 따로 적지 않아도 되고, 덧붙일 내용만 남기시면 됩니다.

우리 홈페이지 예상 금액 계산해 보기 → SEASON TEA 쇼핑몰 시안 눌러보기 · PRECISION PARTS 회사 소개 시안 눌러보기

이 글의 DAY & NIGHT, 두잔 로스터리, 연남 버터오븐은 심플웹이 만든 콘셉트 시안입니다. 실제 카페나 납품 사례가 아니며, 상호·메뉴·가격·후기·주소는 모두 가상이고, 같은 이름의 실제 가게와도 관계가 없습니다.

카페 홈페이지를 만들 때 가장 오래 고민하는 곳은 첫 화면입니다. 매장 사진을 크게 걸지, 메뉴와 가격을 먼저 보여줄지, 전화번호와 영업시간을 앞에 둘지. 정답은 카페마다 다릅니다. 손님이 홈페이지에 들어와서 가장 먼저 확인하려는 것이 무엇이냐에 따라 달라집니다.

세 시안은 서로 다른 가상 카페지만, 한 카페가 고를 수 있는 세 가지 방향을 잘 보여줍니다. 우리 카페가 어느 쪽에 가까운지 생각하면서 보시면 됩니다. 세 시안 모두 직접 눌러볼 수 있습니다.

DAY & NIGHT 시안 → · 두잔 로스터리 시안 → · 연남 버터오븐 시안 →

한눈에 비교

1. DAY & NIGHT: 사진으로 분위기부터 보여줍니다

PC 첫 화면을 반으로 나눴습니다. 왼쪽 남색 칸에는 '낮과 밤, 두 번의 취향'이라는 제목과 소개 글이 있고, 오른쪽 절반은 매장 사진이 채웁니다. 메뉴나 가격보다 "이런 곳입니다"를 먼저 보여주는 구성입니다. 사진 위 작은 상자에는 '시즌 디너 코스'와 '1인 ₩98,000 · 6코스'만 올렸습니다.

영업시간은 표가 아니라 소개 글 안에 있습니다. "오전 10시부터 오후 4시까지는 커피와 브런치를 내고, 한 시간 정리를 마친 뒤 저녁 6시부터는 예약제 시즌 디너 코스를 운영합니다." 낮과 밤에 다른 가게가 된다는 특징을 시간으로 설명한 셈입니다.

아래로는 소개 → NEWS → 공간 둘러보기 → 메뉴 → 후기 → 오시는 길 순서입니다. 정확한 운영시간('데이 10:00–16:00 · 나이트 18:00–22:30 · 월요일 휴무')과 주소는 맨 아래 '오시는 길'에 표로 정리했습니다. 분위기를 보러 온 손님에게는 자연스러운 순서지만, "오늘 문 열었나?"만 확인하려는 손님은 끝까지 내려가야 합니다.

아쉬운 점도 있습니다. 첫 화면의 버튼은 '디너 예약하기' 하나입니다. 낮에 커피를 마시러 오려는 손님을 위한 입구는 메뉴 줄의 'DAY'뿐입니다. 낮 장사 비중이 큰 카페라면 '오늘 메뉴'나 '오시는 길' 버튼을 나란히 두는 편이 낫습니다.

휴대폰에서는 메뉴가 '메뉴' 버튼 하나로 접히고, 남색 소개 칸이 먼저, 매장 사진이 그 아래로 내려옵니다. '디너 예약하기' 버튼은 첫 화면 안에 들어옵니다. 휴무일과 주소는 휴대폰에서도 페이지 끝 가까이 가야 보입니다.

2. 두잔 로스터리: 간판처럼 전화번호와 영업시간을 앞에 둡니다

맨 위 초록 간판에 상호와 '전화 주문 02-000-0000'을 크게 넣었습니다. 가게 앞 간판을 화면으로 옮긴 모양입니다. 첫 화면 한 장에 다음이 모두 들어 있습니다.

• 'EVENT 가을 시즌 원두 에티오피아 구지' 띠
• 제목 '매주 볶는 원두 세 종류'와 '원두 구매' 버튼
• 버튼 옆 '영업시간 매장별 08:00–20:00'
• 오려 쓰는 쿠폰 모양의 'COUPON' 상자
• 사진 가장자리에 걸친 별 모양 가격표 '하우스 블렌드 원두 200g 16,000원'

정보가 많지만 칸과 색이 나뉘어 있어서 하나씩 읽힙니다. 아래로는 오려 가세요(쿠폰) → 우리 가게 자랑 → 후기 → 알림판 → 오시는 길 → 차림표 순서입니다. '오시는 길'이 차림표보다 위에 있고, 여기에 '☎ 02-000-0000'을 한 번 더 크게 적었습니다. 매장에 오거나 전화하는 손님을 먼저 챙긴 순서입니다.

휴대폰에서도 간판의 '전화 주문 02-000-0000'은 맨 위에 그대로 남습니다. 메뉴는 '메뉴' 버튼으로 접히고, 사진이 제목 위로 올라갑니다. 영업시간은 '원두 구매' 버튼 바로 아래라서 한 번 스크롤하면 보입니다.

아쉬운 점은 매장 정보입니다. 이 시안은 '로스터리 카페 세 곳'을 가정했고 알림판에도 '광화문점 오픈 시간 변경'이 있는데, 메인의 영업시간은 '매장별 08:00–20:00'으로 묶여 있고 '오시는 길'의 주소는 하나입니다. 매장이 여러 곳인 카페라면 매장마다 주소와 시간을 따로 보여줘야 손님이 전화로 묻지 않습니다.

3. 연남 버터오븐: 주문표를 첫 화면에 둡니다

배달 앱 화면을 닮은 시안입니다. 빵 진열대 사진 아래 흰 카드에 '오전 11시, 버터 굽는 냄새'와 '오전 11시와 오후 3시, 두 번 오븐이 열립니다.'가 있고, 오른쪽에는 '주문표'가 떠 있습니다. 고메버터 소금빵 수량을 고르고, 합계(3,500원)를 확인하고, '예약 픽업'을 누르는 순서입니다.

영업시간은 첫 화면에 두 번 나옵니다. 카드 아래 '영업 10:00–19:00 · 월·화 휴무'와 주문표 안 '영업시간 10:00–19:00 · 월·화 휴무'입니다. 세 시안 중 휴무일까지 첫 화면에 보이는 건 이 시안 하나입니다.

메인 페이지는 세 시안 중 가장 짧습니다. 첫 화면 아래 '메뉴 / 리뷰 / 정보' 탭이 있고, 사진 세 장 바로 아래 '매장 정보'에 주소·전화·영업시간을 표로 넣었습니다. 그 아래로 시그니처 메뉴(가격과 '담기' 버튼), 리뷰, 가게 혜택·안내가 이어집니다. "빵 언제 나와요?"라는 질문에는 가게 혜택·안내의 '하루 두 번 굽기 — 11시와 15시에 갓 구운 빵이 나옵니다'가 답합니다.

휴대폰에서는 오른쪽 주문표가 첫 화면에서 빠집니다. 카드 속 영업시간·휴무일·전화는 그대로 남아서, 들어오자마자 오늘 문을 여는지는 알 수 있습니다. 대신 '예약 픽업' 버튼은 페이지 끝, 가게 혜택·안내 아래의 주문 요약 바('1 3,500원')로 옮겨 갑니다. 이 바는 화면을 따라 내려오지 않습니다. 실제로 만든다면 화면 아래에 늘 떠 있는 '예약 픽업' 바로 바꾸기를 권합니다.

우리 카페는 어느 쪽일까

• 공간이 자랑이고 저녁 예약·대관을 받는 카페 → DAY & NIGHT. 사진 한 장이 긴 소개를 대신합니다. 낮 손님을 위한 버튼은 하나 더 두세요.
• 단골이 많고 전화 주문·원두 판매를 하는 동네 카페 → 두잔 로스터리. 전화번호와 영업시간이 간판처럼 늘 보입니다.
• 빵·디저트 나오는 시간이 중요하고 미리 주문을 받는 카페 → 연남 버터오븐. 굽는 시간, 휴무일, 주문 버튼이 첫 화면에 모여 있습니다.

매장 사진이 아직 없다면 분위기형보다 간판형이나 주문형으로 시작하는 편이 쉽습니다. 분위기형은 사진이 좋아야 살아납니다.

세 방향을 섞을 수도 있습니다. 예를 들어 분위기형 첫 화면 바로 아래에 주문형처럼 '매장 정보'를 두는 식입니다. 시안 구성을 섞거나 섹션 순서를 바꾸는 작업은 맞춤형 견적 상담에서 범위를 정합니다.

실제 카페 홈페이지로 옮길 때 확인할 것

• 영업시간과 휴무일: 가장 자주 바뀌고, 손님이 가장 많이 찾는 정보입니다. 카페에서 직접 고칠 수 있어야 합니다. 견적 계산기의 '관리자 페이지' 항목을 함께 고르면 영업시간·휴무일·메뉴 가격을 카페에서 바로 고칠 수 있습니다.
• 전화번호는 눌러서 걸리게: 시안에서는 전화번호가 글자로만 들어가 있습니다. 실제 홈페이지에서는 휴대폰에서 번호를 누르면 바로 전화가 걸리게 만드는 게 기본입니다.
• 버튼을 어디에 연결할지: 시안에서는 실제 예약이나 주문이 접수되지 않습니다. 실제로는 카페가 지금 쓰는 예약·주문 방식에 맞춰 '디너 예약하기', '원두 구매', '예약 픽업'의 연결 대상을 정합니다. 이미 네이버 예약·주문이나 전화·카카오톡 채널로 받고 있다면 버튼을 그쪽으로 연결하고, 홈페이지 안에서 예약이나 결제까지 받으려면 견적 계산기의 '예약 기능'·'결제 기능' 항목으로 만듭니다.
• 매장이 여러 곳이면: 매장별 주소와 영업시간을 나눠서 보여줍니다.

DAY & NIGHT 시안 → · 두잔 로스터리 시안 → · 연남 버터오븐 시안 → 카페·베이커리·디저트 시안 보기(요식업 탭) · 카페·레스토랑 시안 보기(공간 탭) · 우리 카페 예상 견적 보기

이 글의 PLANE INTERIOR, 오래된집, 모담탈모클리닉은 심플웹이 만든 콘셉트 시안입니다. 실제 업체나 납품 사례가 아니며, 상호·주소·후기·숫자는 모두 가상이고, 같은 이름의 실제 업체와도 관계가 없습니다. 세 시안에는 비포·애프터 슬라이더가 들어 있지 않습니다. "여기에 넣으면 좋겠다"고 적은 부분은 저희 제안입니다.

인테리어 업체 홈페이지에서 가장 공들이는 사진은 완공 사진입니다. 그런데 완공 사진만 보면 원래 어떤 공간이었는지, 무엇을 얼마나 바꿨는지 알기 어렵습니다. 바뀐 정도를 보여주려면 고치기 전 사진이 함께 있어야 합니다.

두 사진을 나란히 놓는 방법이 가장 쉽습니다. 다만 휴대폰에서는 두 장이 위아래로 쌓여서, 비교하려면 화면을 오르내려야 합니다. 비포·애프터 슬라이더는 두 사진을 한 틀 안에 겹쳐 두고, 가운데 손잡이를 끌어 경계를 옮기며 보게 합니다. 같은 자리에서 무엇이 달라졌는지가 한 화면 안에서 보입니다.

비포·애프터 슬라이더 직접 끌어보기 →

1. 손잡이 하나로 전과 후를 오갑니다

기술 LAB의 10번 데모입니다. 틀 왼쪽 위에 'BEFORE', 오른쪽 위에 'AFTER' 표시가 있고, 가운데 흰 선 위의 동그란 손잡이를 좌우로 끌면 경계가 따라 움직입니다.

• 끌어서 비교: 손잡이를 오른쪽으로 끌면 '전' 사진이 넓어지고, 왼쪽으로 끌면 '후' 사진이 넓어집니다.
• 키보드와 화면 낭독기: 데모 설명을 그대로 옮기면 "키보드 방향키로도 움직이고 화면 낭독기도 현재 비율을 읽습니다." 마우스를 쓰기 어려운 분도 비교할 수 있습니다.
• 브라우저: 화면 오른쪽 카드에 브라우저 지원이 '모든 최신 브라우저'로 적혀 있습니다. 특정 브라우저에서만 보이는 기능이 아닙니다.

데모 사진에 대해 미리 밝혀 둡니다. 데모는 거실 사진 한 장의 왼쪽만 흑백으로 바꿔 '전' 상태를 흉내 냈습니다. 그래서 양쪽 가구 배치가 똑같습니다. 실제 홈페이지에서는 공사 전과 공사 후에 따로 찍은 사진 두 장을 넣습니다.

휴대폰에서는 틀이 세로로 긴 모양으로 바뀝니다. 폭이 좁은 화면에서도 두 사진이 쌓이지 않고 한 틀 안에 남습니다.

2. 어떤 업종에 쓰나

LAB 데모 카드의 '이런 곳에 씁니다'에는 세 가지가 적혀 있습니다.

• 리뉴얼·시공 전후
• 인테리어·리모델링
• 사진 보정·뷰티 시술 전후

공통점은 같은 대상이 어떻게 달라졌는지가 곧 일의 결과라는 점입니다. 인테리어·리모델링, 도배나 욕실 같은 집수리, 매장 외관 교체가 대표적입니다. 반대로 '전' 사진이 없거나 처음부터 새로 만드는 일이라면, 슬라이더보다 완공 사진을 크게 보여주는 편이 낫습니다.

아래에서는 업종이 다른 콘셉트 시안 세 개를 놓고, 슬라이더를 넣는다면 어느 자리가 맞을지 정리했습니다.

3. 인테리어 회사 시안: 프로젝트 상세 화면에 넣습니다

상업 공간 인테리어 회사를 가정한 콘셉트 시안 'PLANE INTERIOR'입니다.

메인 화면의 'Fig. 01 프로젝트'에는 카드 세 장이 있습니다. '성수 복합 카페 공간 기획(로스터리+베이커리 280㎡)', '을지로 와인바(좌석 38석 바 중심 구성)', '부산 편집숍(계산대 이동으로 동선 정리)'입니다.

세 번째 카드의 '계산대 이동으로 동선 정리'처럼 바꾼 내용이 한 줄로 설명되는 프로젝트가 슬라이더와 잘 맞습니다. 계산대가 원래 어디 있었는지 보여주면 그 한 줄이 사진으로 확인됩니다. 목록 카드는 지금처럼 완공 사진 한 장으로 두고, 슬라이더는 카드를 눌렀을 때 나오는 상세 화면에 넣기를 권합니다. 목록에서 손잡이까지 보이면 카드가 복잡해집니다.

프로젝트 상세 화면은 제목 아래에 프로젝트·분야·범위·연도를 한 줄로 정리하고, 그 아래 사진 두 장을 나란히 놓았습니다. 실제 업체라면 이 두 장 자리가 슬라이더 자리입니다. 시공 전 사진과 완공 사진을 겹쳐 넣고, 아래에 무엇을 바꿨는지 한두 문장을 붙입니다.

휴대폰에서는 정보 네 줄이 세로로 풀리고 사진 두 장이 위아래로 쌓입니다. 시공 전후 사진을 이 방식으로 넣으면 비교하려고 화면을 오르내려야 합니다. 슬라이더를 쓰면 한 틀 안에서 끝납니다.

하나 더 있습니다. 상세 화면 끝에는 지금 '← 첫 화면' 링크만 있습니다. 전후 사진을 본 직후가 문의하기 좋은 때이니, 슬라이더 바로 아래에 '비슷한 공사 견적 문의' 버튼을 두는 것도 함께 권합니다.

4. 공간을 고친 숙소 시안: '고친 과정'에 넣습니다

슬라이더는 인테리어 회사만 쓰는 기능이 아닙니다. 오래된 건물을 고쳐 문을 연 카페나 숙소도 '어떻게 고쳤는지'가 이야깃거리입니다. 리노베이션 한옥 스테이를 가정한 콘셉트 시안 '오래된집'이 그런 경우입니다.

첫 화면 문구는 "1938년에 지은 집을 3년 동안 고쳤습니다. 대들보는 그대로 두었습니다."입니다. 소개 섹션에도 '1938년 · 처음 지은 해', '3년 · 고친 기간'이 숫자로 나오고, 사이트 메뉴에는 '고친 과정'이라는 항목이 있습니다.

슬라이더를 넣는다면 이 '고친 과정'이 맞는 자리입니다. 같은 방을 고치기 전과 후로 겹쳐 두면, 손잡이를 움직여도 대들보는 제자리에 있고 나머지가 달라진 모습이 보입니다. "대들보는 그대로 두었습니다"라는 문장을 사진으로 확인시켜 주는 셈입니다.

5. 피부과·병원 시안: 공개 페이지에는 조심해서

이번에는 피부과 전문의가 탈모를 진료한다는 설정의 콘셉트 시안 '모담탈모클리닉'입니다.

첫 화면 제목부터 "정수리 사진, 석 달 단위로 비교"입니다. 보조 문구는 "정수리와 앞머리를 같은 조명, 같은 각도로 찍어 석 달마다 비교합니다."

그런데 이 시안의 메인 화면 어디에도 환자의 전후 사진은 없습니다. 비교 사진은 세 군데에 말로만 나옵니다.

• 맨 위 작은 줄, '로그인' 옆의 '비교 사진 조회'
• 치료 섹션의 '비교 촬영: 같은 조명·각도로 석 달마다 촬영합니다.'
• 소식의 '비교 사진 온라인 조회'

사진을 보여주는 대신 어떻게 찍는지를 설명했습니다. 의료 쪽에는 이렇게 조심스럽게 구성할 이유가 있습니다.

치료 전후 사진은 의료광고 규정과 맞닿아 있는 민감한 부분입니다. 의료법 제56조 제2항 제2호는 환자의 치료경험담처럼 치료 효과를 오인하게 할 우려가 있는 광고를 금지하고, 의료광고 심의에서도 전후 사진은 까다롭게 봅니다. 병원 홈페이지의 공개 페이지에 시술 전후 사진을 올릴 수 있는지, 올린다면 어떤 조건이 붙는지는 이 글에서 판단하지 않습니다. 실제로 넣기 전에 의료광고 심의 기준과 최신 규정을 먼저 확인해야 합니다. LAB 카드의 '뷰티 시술 전후'를 병원 홈페이지에 그대로 가져가기 전에 한 번 멈춰야 하는 이유입니다.

실제 홈페이지에 넣을 때 확인할 것

• 같은 자리, 같은 각도로 찍기: 전후 사진의 위치·높이·화각이 다르면 손잡이를 움직일 때 벽과 창틀이 어긋나 보입니다. 시공 전 사진은 공사를 시작하기 전에 찍어 두어야 합니다. 모담탈모클리닉 시안이 '같은 조명, 같은 각도'를 앞세운 것도 같은 이유입니다.
• 고객 동의: 고객의 집이나 매장 내부 사진입니다. 홈페이지에 올리기 전에 게시 동의를 받아 둡니다.
• '전' 사진이 없는 프로젝트: 억지로 맞추지 않습니다. PLANE INTERIOR 시안처럼 완공 사진을 나란히 보여주면 됩니다.
• 사진 용량: 한 틀에 사진 두 장을 불러옵니다. 휴대폰에서 느려지지 않게 용량을 줄여 넣습니다.
• 사례를 누가 올리나: 시공 사례는 계속 늘어납니다. 견적 계산기의 '관리자 페이지' 항목을 함께 만들면 업체가 사례 사진을 직접 올리고 고칠 수 있습니다. 관리자 페이지 없이 만들면 사례를 늘릴 때마다 홈페이지를 고쳐야 하니, 사례가 얼마나 자주 늘어나는지를 보고 정하면 됩니다.
• 슬라이더를 넣는 범위: 기술 LAB의 데모는 심플웹이 직접 만든 기능입니다. 실제 홈페이지의 어느 화면에 몇 개를 넣을지는 상담에서 정합니다.
• 병원·의원: 위 5장의 의료광고 확인이 먼저입니다.

비포·애프터 슬라이더 직접 끌어보기 → PLANE INTERIOR 시안 · 오래된집 시안 · 모담탈모클리닉 시안 · 기술 LAB 데모 23개 보기 · 우리 업체 예상 견적 보기

이 글의 온유치과는 심플웹이 만든 콘셉트 시안입니다. 실제 병원이나 납품 사례가 아니며, 상호·의료진·후기·주소는 모두 가상입니다. 같은 이름의 실제 치과와도 관계가 없습니다.

치과 홈페이지에 들어온 사람이 알고 싶은 건 많지 않습니다. 이번 주에 갈 수 있는지, 가면 얼마나 기다리는지, 어디에 있는지. 대개 이 세 가지입니다. 그래서 치과 홈페이지는 첫 화면이 얼마나 예쁜지보다 예약까지 몇 번 눌러야 하는지가 더 중요합니다.

이번에는 모든 진료를 예약제로 운영하는 가족 치과를 가정하고 만든 온유치과 시안을 위에서부터 차례로 보면서, 예약 버튼을 어디에 몇 개 두었는지와 그 사이에 어떤 정보를 넣었는지 정리했습니다. 시안은 직접 눌러볼 수 있습니다.

온유치과 시안 직접 눌러보기 →

1. 예약 버튼은 세 군데에 있습니다

첫 화면에서 '예약'이라는 말이 들어간 버튼이 세 개 보입니다. 같은 기능을 세 번 반복한 게 아니라, 들어온 사람의 상황에 따라 누를 곳을 나눠 둔 것입니다.

• 첫 화면 오른쪽 패널의 '예약하기': 가장 크게 둔 버튼입니다. 들어오자마자 마음을 정한 사람을 위한 자리입니다.
• 메뉴 줄 맨 오른쪽 '예약하기': 다른 메뉴는 글자만 있지만 이 버튼만 테두리를 둘러 눈에 띄게 했습니다. 의료진과 진료 안내를 둘러보다가 결정한 사람이 위로 올라왔을 때 바로 찾을 수 있습니다.
• 맨 위 작은 줄의 '예약 확인': 이미 예약한 환자가 시간을 다시 확인하는 버튼입니다. 처음 온 사람과 다시 온 사람이 누르는 버튼을 섞지 않았습니다.

2. 첫 화면을 예약표처럼 만들었습니다

첫 화면은 왼쪽 사진과 오른쪽 남색 패널로 나뉩니다. 패널에는 '첫 방문 상담 일정 선택 / 원하는 시간 직접 선택'이라는 제목과 예약 버튼이 있고, 사진과 패널 사이의 점선과 패널 아래 바코드는 종이 예약표 모양을 빌려 왔습니다. 이 첫 화면에서 할 일은 '시간을 고른다' 하나뿐이라는 게 한눈에 보입니다.

패널 가운데에는 가장 최근 공지 한 줄('10월 예약 일정 오픈')이 들어갑니다. 지금 예약할 이유를 하나 더 보여주는 자리입니다.

3. 예약을 망설이게 하는 질문에 순서대로 답합니다

첫 화면 아래는 알림 → 주요 안내 → 환자 후기 → 진료 현황 → 진료 안내 → 오시는 길 순서입니다. 섹션마다 예약 직전에 떠오르는 질문 하나씩을 맡깁니다.

• 알림: 세 개 모두 예약 이야기입니다(10월 예약 일정 오픈, 카카오 알림 신청, 토요일 진료 예약 변경). "지금 예약이 되나?"에 답합니다.
• 환자 후기: "예약 시간에 가면 바로 들어가니 점심시간에도 다닐 수 있어요." 예약제가 실제로 어떤 점이 편한지 환자의 말로 보여줍니다.
• 진료 현황: '평균 5분, 예약 후 대기 시간'. 예약제의 장점을 숫자 하나로 정리했습니다.
• 오시는 길: 진료시간 줄 끝에 '예약제'를 적어 "그냥 가도 되나?"라는 질문에 미리 답합니다.

4. 예약 화면에서는 전화 없이 날짜와 시간을 고릅니다

'첫 방문 상담 일정 선택' 화면에는 2주치 날짜 칸, 시간 선택, 고른 일정 요약('선택한 일정: 10월 12일 · 11:00'), 진료시간 한 줄, 예약하기 버튼이 한곳에 모여 있습니다. 진료시간을 확인하려고 다른 페이지로 갈 필요가 없습니다.

시안에서는 화면만 체험할 수 있고 실제 예약은 접수되지 않습니다. 실제 제작에서는 병원이 예약을 받는 방식에 맞춰 이 버튼의 연결 대상을 정합니다. 이미 네이버 예약이나 전화·카카오톡 채널로 예약을 받고 있다면 버튼을 그쪽으로 연결하고, 홈페이지 안에서 날짜와 시간을 직접 받으려면 견적 계산기의 '예약 기능' 항목으로 만듭니다.

5. 휴대폰에서는 이렇게 보입니다 (아쉬운 점 포함)

휴대폰에서는 메뉴가 '메뉴' 버튼 하나로 접히고, 맨 위 줄의 '예약 확인'은 그대로 남습니다. 오른쪽 패널은 사진 아래로 내려오면서 예약 버튼도 함께 내려갑니다.

그래서 이 시안은 휴대폰 첫 화면에서 예약 버튼이 바로 보이지 않을 수 있습니다. 치과는 휴대폰으로 찾아보는 분이 많은 업종이라, 실제 병원 홈페이지로 만들 때는 화면 아래에 늘 떠 있는 '전화 · 예약' 바를 함께 넣기를 권합니다.

실제 병원 홈페이지로 옮길 때 확인할 것

• 예약을 어디로 받을지: 전화만 받는지, 온라인 예약을 받는지에 따라 세 버튼이 연결될 곳이 정해집니다.
• 진료시간과 휴진 공지: 가장 자주 바뀌는 정보입니다. 병원에서 직접 고칠 수 있어야 합니다. 견적 계산기의 '관리자 페이지' 항목을 함께 고르면 진료시간과 공지를 병원에서 바로 고칠 수 있습니다.
• 환자 후기: 의료법은 환자의 치료경험담처럼 치료 효과를 오인하게 할 우려가 있는 광고를 금지합니다(의료법 제56조 제2항 제2호). 시안의 후기는 대기 시간에 관한 가상 문장이지만, 실제 병원 홈페이지에 후기를 올릴 때는 의료광고 규정을 먼저 확인해야 합니다.
• '평균 5분' 같은 숫자: 실제 기록이 있을 때만 씁니다.

온유치과 시안 직접 눌러보기 → 의료·헬스케어 시안 100개 보기 · 우리 병원 예상 견적 보기