모두의매트 — 층간소음 매트 시공 브랜드의 이야기부터 견적 문의까지 한 흐름으로 잇는 웹사이트

- (업체)모두의매트 (MODOOMAT)
- (업종)Home Living / Flooring Installation
- (제공 서비스)Brand Website, Quote Calculator, Admin
- (서비스 영역)DEVELOPMENT
- (역할)Planning, UX/UI Design, Frontend & Backend Development
- (기술 영역)Website Design, Frontend Development, Quote Calculator, Case Study Archive, Inquiry & Sample Request Flow, Admin Dashboard
- (기술 스택)SvelteKit, TypeScript, Tailwind CSS, Supabase, Cloudflare
- (특징)Scroll-driven 8-layer product breakdown, Noise reduction (dB) scroll storytelling, Room-by-room quote calculator, Filterable case study archive, Inquiry emails with ad attribution, Light/Dark mode
모두의매트는 아이 키우는 집을 위한 층간소음 매트를 본사 직영팀이 직접 시공하는 브랜드로, 매트를 파는 곳이 아니라 공간을 재고 계산해서 깔아 주는 곳이라는 점을 웹에서도 그대로 보여 주는 것이 이번 작업의 출발점이었습니다. 그래서 제품 스펙보다 브랜드가 생긴 이유와 시공 방식, 실제 시공 사례를 먼저 보여 주고, 방문자가 우리 집에도 맞을지 스스로 가늠해 본 다음 견적 문의로 넘어가도록 페이지 흐름을 짰습니다.
메인은 아이 사진과 넉넉한 여백, 오트 계열의 차분한 색으로 톤을 잡았고, 매트의 여덟 개 층이 스크롤에 맞춰 하나씩 벌어지는 구조도와 맨바닥 소음이 매트 위에서 속삭임 수준까지 줄어드는 과정을 데시벨 수치로 따라가는 연출을 넣어 말로는 전달하기 어려운 부분을 눈으로 확인하게 했습니다. 시공 사례는 지역과 평형, 제품 정보를 함께 적어 공간 유형별로 걸러 볼 수 있는 아카이브로 정리했습니다.
문의 단계에서는 공간별 가로·세로를 mm 단위로 넣으면 예상 매트 수량을 바로 계산해 주는 견적 계산기와 견적 문의, 샘플 신청을 따로 두었고, 카카오톡·전화 상담 버튼은 어느 페이지에서나 누를 수 있게 했습니다. 접수된 문의는 광고 유입 경로와 함께 담당자 메일로 바로 전달되고 관리자 화면에서 메모를 남기며 관리할 수 있어서, 광고 집행부터 상담까지 끊기지 않고 이어집니다.
메인은 아이 사진과 넉넉한 여백, 오트 계열의 차분한 색으로 톤을 잡았고, 매트의 여덟 개 층이 스크롤에 맞춰 하나씩 벌어지는 구조도와 맨바닥 소음이 매트 위에서 속삭임 수준까지 줄어드는 과정을 데시벨 수치로 따라가는 연출을 넣어 말로는 전달하기 어려운 부분을 눈으로 확인하게 했습니다. 시공 사례는 지역과 평형, 제품 정보를 함께 적어 공간 유형별로 걸러 볼 수 있는 아카이브로 정리했습니다.
문의 단계에서는 공간별 가로·세로를 mm 단위로 넣으면 예상 매트 수량을 바로 계산해 주는 견적 계산기와 견적 문의, 샘플 신청을 따로 두었고, 카카오톡·전화 상담 버튼은 어느 페이지에서나 누를 수 있게 했습니다. 접수된 문의는 광고 유입 경로와 함께 담당자 메일로 바로 전달되고 관리자 화면에서 메모를 남기며 관리할 수 있어서, 광고 집행부터 상담까지 끊기지 않고 이어집니다.















