채움119 소방점검 홈페이지 제작

Project Overview

당근마켓에서 진행한 무료 홈페이지 제작 나눔을 통해
소방점검 전문 업체 채움119의 홈페이지 제작을 진행한 프로젝트입니다.

의뢰 당시 업체는 별도의 홈페이지가 없어
서비스 정보를 온라인에서 전달하기 어려운 상황이었습니다.

이에 따라 서비스 소개와 상담 문의를 중심으로 한 랜딩페이지 형태의 홈페이지를 기획하고 제작했습니다.

프로젝트 정보

기간
2026.03.09 ~ 2026.03.10

역할
기획 · 디자인 · 개발 · 배포 (전체 진행)

기술 스택

• Next.js
• Tailwind CSS
• Vercel

프로젝트 링크

https://www.chaeum119.co.kr/

Problem

의뢰 당시 업체는 별도의 홈페이지가 없는 상태였습니다.

이로 인해

• 서비스 정보를 온라인에서 전달하기 어려웠고
• 상담 문의를 받을 수 있는 창구가 부족했습니다.

또한 참고용으로 전달받은 레퍼런스 사이트는

• 오래된 다페이지 구조
• 모바일 사용성이 좋지 않은 UI

로 구성되어 있었습니다.

소방점검 서비스 특성상
사용자가 빠르게 정보를 확인하고 상담 문의로 이어질 수 있는 구조가 필요하다고 판단했습니다.

Solution

사용자가 빠르게 정보를 확인할 수 있도록
랜딩페이지 형태의 구조를 제안했습니다.

페이지 흐름을 다음과 같이 설계했습니다.

서비스 필요성 인지 → 서비스 소개 → 신뢰도 확보 → 상담 문의

이를 위해 다음 요소를 적용했습니다.

• 소방점검 의무 사항 안내
• 제공 서비스 카드 UI 구성
• 실제 작업 사례 노출
• 블로그 작업 사례 페이지 연동
• 로고 및 명함 디자인 활용

이를 통해 서비스 신뢰도를 높이고 상담 문의로 이어질 수 있는 구조를 설계했습니다.

Information Architecture

랜딩페이지 구조로 다음과 같은 섹션을 구성했습니다.

1. 소방점검 의무 안내
2. 제공 서비스 소개
3. 실제 작업 사례
4. 상담 문의 안내

특히 소방점검은 법적으로 의무 점검이 필요한 서비스라는 점을 강조하여
사용자가 서비스 필요성을 명확히 인지할 수 있도록 설계했습니다.

Design

소방 서비스의 특성을 고려해 신뢰성과 상징성을 동시에 전달하는 컬러를 사용했습니다.

• Blue : 신뢰감 전달
• Red : 소방 서비스 상징 컬러

또한 업체에서 기존에 사용 중이던 디자인 요소를 활용해
브랜드 일관성을 유지했습니다.

적용 요소

• 로고 → 헤더 영역
• 명함 디자인 → 상담 문의 섹션

Trust Strategy

서비스 신뢰도를 높이기 위해
실제 작업 사례를 확인할 수 있도록 운영 중인 블로그의 작업 사진을 활용했습니다.

또한 더 많은 사례를 확인할 수 있도록
블로그 페이지로 이동할 수 있는 링크를 제공했습니다.

이를 통해 사용자가 추가 작업 사례를 확인할 수 있는 구조를 구성했습니다.

Development

빠른 개발과 유지보수를 고려해
Next.js와 Tailwind CSS 기반으로 사이트를 제작했습니다.

랜딩페이지 형태로 구현하여

• 서비스 정보 확인
• 상담 문의 유도

가 자연스럽게 이어지도록 구성했습니다.

Deployment & Infrastructure

초기에는 웹빌더 서비스 아임웹을 검토했습니다.

하지만

• 월 구독 기반 서비스
• 장기적인 운영 비용 발생

이라는 점을 고려해 Vercel 기반 배포 방식을 제안했습니다.

이 방식의 장점은 다음과 같습니다.

• 서버 비용 없음
• 간단한 배포 구조
• 유지 비용 최소화

의뢰인은 도메인 비용만으로 사이트를 운영할 수 있는 구조를 구축했습니다.

Domain Setup

도메인 구매를 위해 두 개의 도메인 업체를 비교해 안내했습니다.

의뢰인은 가비아를 선택해 도메인을 직접 구매했고
이후 Vercel 배포 환경에 도메인을 연결해 사이트를 운영할 수 있도록 설정했습니다.

SEO

사이트가 검색 엔진에서 인식될 수 있도록
네이버 서치어드바이저 등록을 진행했습니다.

이를 통해 검색 엔진에서 사이트 크롤링 및 노출이 가능하도록 설정했습니다.

Result

소방점검 서비스와 법적 의무 사항을 명확히 전달할 수 있는
랜딩페이지 형태의 홈페이지를 구축했습니다.

또한

• 실제 작업 사례 노출
• 블로그 연동

을 통해 서비스 신뢰도를 강화하고 상담 문의로 이어질 수 있는 구조를 설계했습니다.

도메인 연결과 검색 엔진 등록까지 진행하여
실제 운영 가능한 홈페이지 환경을 구축했습니다.

Contribution

프로젝트 전 과정을 단독으로 진행했습니다.

• 홈페이지 구조 기획
• 랜딩페이지 정보 설계
• UI 디자인
• 프론트엔드 개발 (Next.js / Tailwind CSS)
• Vercel 배포
• 도메인 연결
• 네이버 서치어드바이저 등록

Retrospective

이번 프로젝트를 통해 실제 클라이언트와 커뮤니케이션하며

• 웹사이트 기획
• UI 설계
• 개발
• 배포
• 검색 엔진 등록

까지 웹 서비스 구축의 전체 과정을 경험할 수 있었습니다.

특히 단순히 사이트 제작에 그치지 않고
의뢰인의 운영 비용을 고려해 Vercel 기반 배포 방식을 제안한 경험이 의미 있었습니다.

또한 도메인 연결과 검색 엔진 등록까지 진행하며
실제 서비스 운영을 위한 환경을 구축하는 과정을 경험할 수 있었습니다.