# FORMA — 완성형 다중 페이지 웹사이트

랭크빌더 자체 기획 · 가상 건축·인테리어 브랜드

## 프로젝트 소개

FORMA는 실제 건축 스튜디오의 사이트처럼 프로젝트를 탐색하고, 설계 방향과 재료를 살펴보고, 상담 전 요구사항을 정리할 수 있도록 기획한 독립 웹사이트입니다. 랭크빌더의 자체 제작 포트폴리오이며 실제 외부 고객사 납품이나 수주·시공 실적을 의미하지 않습니다.

가상의 실적 수치, 건축면적, 주소, 직원 이력, 고객 후기, 수상 내역을 만들지 않았습니다. 가상 브랜드라는 안내는 모든 페이지의 공통 상단과 푸터에 표시하고, 본문에서는 공간과 서비스의 내용을 자연스럽게 설명합니다.

## 9개 실제 페이지

| 페이지 | 경로 | 주요 내용 |
| --- | --- | --- |
| 홈 | `index.html` | 첫인상, 대표 프로젝트, 공간 철학, 서비스 연결 |
| 프로젝트 목록 | `projects.html` | 전체·주거·상업·업무 필터, 네 프로젝트 탐색 |
| 중정을 품은 집 | `projects/courtyard.html` | 공간 소개, 설계 포인트, 외부·내부 사진, 재료 구성 |
| 오후의 결 | `projects/cafe.html` | 상업 공간의 경험과 동선, 전경·재료 상세 사진 |
| 열린 사이 | `projects/office.html` | 집중과 협업의 관계, 라운지·회의실 사진 |
| 초록의 여백 | `projects/living.html` | 생활의 색과 가구, 거실·조명 상세 사진 |
| 스튜디오 | `studio.html` | 사람·본질·시간의 세 가지 디자인 기준 |
| 서비스 | `services.html` | 주거·상업·업무 서비스, 결과물, 진행 방식, FAQ |
| 프로젝트 브리프 | `inquiry.html` | 공간 요구사항 작성, 요약, 로컬 저장, 텍스트 내려받기 |

실제 페이지마다 제목, 설명, 현재 메뉴 표시, 내부 링크를 구분했습니다. 프로젝트 상세는 사진 모달에만 내용을 넣는 방식이 아니라 URL이 있는 독립 페이지입니다.

## 화면 구성

큰 건축 사진을 중심에 두고, 밝은 크림 바탕과 테라코타를 사용했습니다. 프로젝트 목록에서는 크기와 높이가 다른 사진을 편집형 그리드로 배치했습니다. 상세 페이지에서는 공간의 이야기, 세 가지 설계 선택, 재료의 색과 질감, 다음 프로젝트를 차례로 보여줍니다.

| 항목 | 기준 |
| --- | --- |
| 배경 | 크림 `#F2EEE6` |
| 본문 | 잉크 `#302D28` |
| 강조 | 테라코타 `#A34F36` |
| 보조 본문 | 회갈색 `#696257` |
| 선 | 웜 그레이 `#CFC7BA` |
| 한글 | Pretendard, 시스템 산세리프 대체 글꼴 |
| 영문 강조 | 시스템 Georgia 세리프 |
| 글자 | 실제 HTML 본문 18px 이상 |
| 반응형 | 1200px / 850px / 560px 기준으로 재배치 |

## 탐색·상호작용

- 공통 헤더·푸터, 현재 페이지 메뉴 표시, 모바일 메뉴, 본문 바로가기.
- 카테고리별 프로젝트 필터와 결과 개수 안내. URL에 필터를 반영하므로 필터 상태로 바로 진입할 수 있습니다.
- 독립 프로젝트 상세 페이지, 다음 프로젝트, 목록으로 돌아가기, 공간 유형을 선택한 채 브리프로 이동하는 링크.
- 원본 사진 확대 갤러리, 이전·다음 사진, 방향키 탐색, Escape 닫기, 원래 사진 버튼으로 키보드 초점 복귀.
- 서비스의 자주 묻는 질문은 기본 HTML 펼침 요소로 구성했습니다.
- 동작 줄이기 설정에서는 부드러운 이동과 전환 효과를 중지합니다.

## 브리프 작성 흐름

1. 공간 종류, 필요한 변화, 현재 준비 단계의 필수 세 항목을 선택합니다.
2. 희망 시기, 중요한 기준 최대 세 개, 추가 설명을 선택적으로 작성합니다.
3. 요약 화면에서 내용을 확인하고 수정하거나 텍스트 파일로 내려받습니다.
4. 원하는 경우 별도 링크로 랭크빌더 상담 화면에 이동합니다.

이름·전화번호·이메일을 요구하지 않습니다. 폼을 서버로 전송하지 않으며, 자동 저장도 하지 않습니다. 사용자가 “이 브라우저에 저장”을 눌렀을 때만 로컬 저장소의 `forma-project-brief-v2` 키에 보관합니다. 저장본 불러오기와 작성 내용·저장본 삭제를 제공합니다. 브리프는 랭크빌더 상담 화면에 자동 전달되지 않습니다.

## 사진 자료

건축 사진 두 장에서 출발해 다중 페이지용 독립 상세 컷 여섯 장을 추가했습니다. 모든 공간 사진은 이번 가상 브랜드를 위해 생성한 콘셉트이며 실제 시공 사진이 아닙니다. 현 버전은 기존의 외부 프로젝트 사진 두 장을 페이지에서 더 이상 사용하지 않습니다.

- `courtyard.webp` / `courtyard-interior.webp` — 중정 주택 외부와 내부.
- `cafe.webp` / `cafe-detail.webp` — 카페 전경과 카운터 재료 상세.
- `work-lounge.webp` / `work-detail.webp` — 업무 라운지와 회의실.
- `living-room.webp` / `living-detail.webp` — 리빙 공간과 가구·조명 상세.

각 PNG 원본을 보관하고 웹용으로 WebP를 사용합니다. 전체 프롬프트와 생성 방식은 `assets/PROVENANCE.md`, `assets/multipage-prompts.json`에 기록했습니다. 생성에는 built-in image_gen을 사용했고 WebP 변환은 기존 FFmpeg/libwebp를 사용했습니다.

## 구현 파일

- `build.mjs` — 공통 레이아웃과 프로젝트 콘텐츠를 바탕으로 실제 HTML 9개를 생성하는 로컬 제작 스크립트.
- `style.css`, `pages.css` — 공통 디자인 및 다중 페이지·반응형 스타일.
- `app.js` — 내비게이션, 필터, 사진 갤러리, 브리프 흐름.
- `verify.mjs` — 로컬 링크와 파일, 고유 제목, H1, noindex, 가상 브랜드 안내의 정적 검사.

이 사이트를 보거나 사용하기 위해 Node 실행은 필요하지 않습니다. 완성된 정적 HTML·CSS·JavaScript 파일로 동작합니다.

## 검증과 운영 범위

2026-09-20 정적 검사에서 9개 페이지, 로컬 참조 208개, 고유 제목 9개를 확인했고 오류가 없었습니다. JavaScript와 제작 스크립트 구문 검사, 9개 경로 HTTP 200 응답을 확인했습니다. 브라우저 상세 페이지의 본문·내부 링크 접근성 구조도 확인했습니다. 최종 반응형 화면과 상호작용은 통합 브라우저 검수에서 별도로 확인합니다.

CMS, 실제 건축 상담 접수, 예약, 결제, 이메일 발송은 포함하지 않습니다. 모든 페이지에 `noindex,nofollow`를 설정했습니다. 실제 고객사 운영으로 전환할 때는 실제 사업자 정보, 프로젝트와 이미지 권리, 업무 범위, 개인정보 처리와 상담 수신을 연결해야 합니다.

제작: 랭크빌더