방문자 브라우저는 Next.js 공개 페이지를 통해 시공 사례와 활성 팝업을 조회합니다. 관리자 화면은 Firebase Authentication으로 로그인하고 Firestore에 시공 사례·팝업 문서를 저장하며 Firebase Storage에 이미지를 업로드합니다. 반자동 자료 가져오기 스크립트는 오늘의집 공개 자료에서 sourceUrl 기준으로 문서를 확인해 Firestore에 생성하거나 갱신합니다.
공개 화면
홈·소개·시공사례·상담 페이지를 App Router로 구성합니다. 홈페이지에는 최근 사례 8개를 조회하고 목록 화면은 카테고리 필터와 더 보기를 제공합니다.
관리자 CMS · 시공 사례와 팝업
시공 사례 에디터와 사진 업로드, 기존 글 수정·삭제를 제공합니다. 팝업은 개별 활성 상태와 전체 사용 여부를 구분하고 파일 업로드나 외부 이미지 URL을 지원합니다.
반자동 사례 가져오기
Puppeteer 스크립트가 오늘의집 공개 카드에서 사진·설명·태그를 수집합니다. sourceUrl로 기존 문서를 구분해 추가·갱신하며 필요할 때 수동 실행하는 방식입니다.
기술 선택 이유
Next.js · App Router
공개 페이지는 서버에서 Firestore 데이터를 조회해 HTML을 구성하고, 편집·더 보기·팝업처럼 상호작용이 필요한 부분은 클라이언트 컴포넌트로 나눴습니다.
Firestore · NoSQL 문서 DB / Storage
Firestore는 컬렉션과 문서로 데이터를 구성하는 NoSQL 데이터베이스입니다. 시공 사례는 portfolios 컬렉션의 문서로 저장하고 제목·분류·본문·대표 이미지 URL을 필드로 관리합니다. 이미지 파일은 Storage로 분리했습니다. 게시물 데이터와 이미지 파일을 각각 관리할 수 있는 구조입니다.
React Quill · Puppeteer
관리자는 에디터에서 본문을 편집합니다. 외부 채널의 사례 자료는 브라우저 기반 스크립트로 가져오되, 자동 스케줄러가 아닌 운영자가 실행하는 흐름으로 구성했습니다.
DB · API · 인프라 구조
Cloud Firestore · NoSQL / demolition DB
이름이 지정된 demolition NoSQL 문서형 데이터베이스를 사용합니다. portfolios와 popups는 컬렉션이며 각 시공 사례와 팝업이 개별 문서입니다. settings 컬렉션의 popup 문서에는 전체 사용 상태를 저장합니다. tag 조건과 createdAt 정렬로 사례를 조회합니다.
이미지 업로드
관리자에서 선택한 사진을 Firebase Storage에 업로드하고 다운로드 URL을 문서와 본문에 저장합니다. 첫 업로드 이미지는 대표 사진으로 사용합니다.
조회와 필터
Next.js 페이지에서 Firebase SDK로 최신 사례를 조회합니다. 카테고리 tag 조건과 createdAt 정렬을 사용하고, 상세는 vid 쿼리 값으로 선택한 사례를 표시합니다.
핵심 처리 흐름
시공 사례 등록부터 공개 표시까지
콘텐츠 운영 흐름입니다. 파일 업로드와 문서 저장을 하나의 원자적 트랜잭션으로 묶었다는 의미는 아닙니다.
운영자가 로그인하고 글과 사진을 입력합니다. 파일과 본문을 검증한 뒤 Storage에 사진을 업로드하고 다운로드 URL을 얻습니다. 제목·분류·대표 이미지·본문을 Firestore에 저장합니다. 공개 페이지가 최신 사례를 조회해 목록과 상세에 표시하고 방문자는 상담 페이지로 이동합니다. 사진 업로드와 문서 저장은 별도 단계입니다.
01. 게시물 입력과 파일 검증
제목과 내용을 검사하고 이미지 파일 여부·개별 10MB 제한·본문 길이를 확인합니다. 기존 글을 선택하면 편집 상태로 전환합니다.
02. 이미지 업로드와 대표 사진 선택
파일을 Storage로 업로드하고 완료된 URL을 본문 이미지에 반영합니다. 신규 업로드가 없으면 기존 대표 사진을 유지하거나 본문 이미지에서 대표 사진을 추출합니다.
03. 문서 저장과 공개 화면 조회
새 글은 추가하고 기존 글은 수정합니다. 공개 홈은 최신 8개, 목록은 분류와 작성 순서에 따라 조회하며 사용자가 더 보기를 누르면 다음 8개를 표시합니다.
04. 팝업 노출 제어
전체 사용 설정과 개별 활성 상태를 함께 확인해 최근 활성 팝업을 선택합니다. 방문자의 오늘 하루 보지 않기는 localStorage에 만료 시간을 저장합니다.
가장 어려웠던 문제와 해결
외부 자료를 반복해서 가져오는 흐름
문제
외부 카드의 같은 사례를 중복 등록하지 않고 신규 자료와 기존 자료를 구분해야 했습니다.
해결 방법
sourceUrl에서 쿼리와 해시를 제거한 주소를 기준으로 기존 문서를 매핑하고 생성·갱신을 분기합니다. 기존 주소를 발견하면 스크롤 수집을 조기 종료합니다.
검증 결과
코드에서 신규 자료와 기존 문서를 구분하는 경로를 확인했습니다. 실제 운영 시간 절감량은 아직 측정하지 않았습니다.
팝업 이미지와 노출 상태 관리
문제
업로드 파일 없이 기존 외부 이미지 주소로 공지를 등록하거나, 개별 공지와 전체 팝업 사용을 따로 제어할 필요가 있었습니다.
해결 방법
파일과 URL 중 하나를 입력하도록 분기하고 popups 문서의 isActive와 settings/popup의 enabled를 별도로 관리했습니다.
검증 결과
등록 소스와 노출 설정을 구분한 관리 기능을 구현했습니다. 실제 운영 계정으로 등록·삭제하는 검증은 이번 확인 범위에 포함하지 않았습니다.
내가 직접 구현한 것
반응형 공개 페이지 구현
시공 분야 소개, 카테고리별 사례 목록·상세, 상담 연결 화면과 모바일 메뉴를 구성했습니다.
콘텐츠 운영 기능 구현
시공사례 CRUD와 다중 사진 업로드, 팝업 등록·활성 상태·전체 사용 설정을 구현했습니다.
외부 사례 자료 가져오기
sourceUrl을 기준으로 외부 자료를 생성·갱신하는 반자동 스크립트를 구성했습니다.
03 / RESULTS & VALIDATION
결과/검증 — 그래서 무엇이 좋아졌는가
실제 서비스 적용 여부
작은건축쟁이.kr에서 실제 운영 중입니다. 2026년 10월 4일 공개 홈페이지와 시공사례 페이지가 HTTP 200으로 응답하는 것을 확인했습니다.
실제 고객 접점으로 사용
운영 사이트에서 업체 소개, 시공 분야, 현장 사례와 상담 연결을 제공합니다. 제작 결과가 실제 도메인에 적용된 상태를 확인했습니다.
콘텐츠 운영 경로 마련
소스 파일 대신 관리자 에디터에서 시공 사례와 팝업을 관리하는 기능을 구성했습니다. 수작업 감소 시간이나 문의 전환율은 측정 자료가 없어 수치로 제시하지 않습니다.
실행 화면 확인
데스크톱 1440×1000, 모바일 390×844에서 실제 홈페이지를 확인하고, 시공사례 목록 화면도 캡처했습니다.
검증 방법과 근거
2026년 10월 4일 운영 사이트의 공개 홈페이지와 시공사례 목록을 브라우저로 열어 화면과 정상 응답을 확인했습니다. 기능 구조는 demolition-next의 공개 페이지·관리자·팝업·자료 가져오기 코드를 검토했습니다. 관리자 쓰기 작업이나 외부 자료 수집 스크립트는 운영 데이터에 영향을 주므로 실행하지 않았습니다.
