건축 철학을 반영한 몰입형 레이아웃으로 브랜드 가치를 시각화하고, 잠재 고객의 신뢰를 확보한 건축 포트폴리오 프로젝트입니다.
건축집단 건축사사무소 브랜딩 웹사이트 개발
과제: 건축 사진이 주인공이어야 하는데, 범용 템플릿은 여백도 이미지 품질도 살리지 못합니다.
한 것: About·Works·Contact 브랜딩 웹사이트 + 히어로 캐러셀 + 3단 반응형
프로젝트 정보
- 클라이언트·업종: 건축집단 · 건축사사무소
- 기간: 2026.02
- 범위: 기획 · 디자인 · 프론트엔드 · 백엔드
- 산출물: 사용자 웹 · 관리자(CMS)
- 플랫폼: 반응형 웹
- 기술 스택: Next.js · Tailwind CSS
건축사무소 홈페이지에서 무엇이 오래 남아야 하나
건축집단이 보여줄 것은 시공 사례와 건축 철학입니다. 범용 템플릿은 사진의 여백도 품질도 살리지 못하고, 사무소가 오래 쥐고 갈 사이트라면 사례를 스스로 늘려 갈 수 있어야 합니다. 사진이 화면을 다 쓰는 구조에 무게를 싣고, 작업 도중 추가 계약으로 관리자(CMS) 기능을 더했습니다.
어떻게 풀었나
판단 1. 사진이 화면을 다 쓰게 풀블리드로 갔다
여백 중심의 절제된 UI 위에 프로젝트 이미지를 풀블리드로 깔았습니다. 설명이 빠질수록 시공 사례의 조형적 완성도가 그대로 남고, 히어로 캐러셀은 자동으로 넘어가되 마우스를 올리면 멈춥니다.
판단 2. 화질을 지키면서 로딩을 줄였다
이미지가 곧 상품이라 화질을 낮추는 선택은 하지 않았습니다. Next.js Image에 반응형 sizes를 지정하고 LCP 대상에만 priority를 주고 quality를 조정해, 화질 대비 로딩 성능을 확보했습니다.
판단 3. 사례를 직접 늘릴 수 있게 관리자(CMS)를 더했다
처음 범위에는 관리자 페이지가 없었지만, 시공 사례가 계속 쌓이는 사무소라 작업 도중 추가 계약으로 CMS를 넣었습니다. 코드는 Page→Widget→Feature→Common 4계층과 단방향 의존성 규칙으로 짜 두어, 화면과 데이터가 늘어도 고칠 자리가 분명합니다.
이런 고민이면 이 사례가 답입니다
- 건축·인테리어 사무소 홈페이지 제작 업체를 찾는 중
- 사진이 주인공인 포트폴리오 사이트가 필요한 경우
- 시공 사례를 직접 등록·관리할 홈페이지가 필요한 경우
자주 묻는 질문
Q. 이 정도 브랜딩 사이트는 얼마나 걸리나
이 건은 About·Works·Contact와 3단 반응형까지 약 3주였습니다(기간 기준, 금액과 무관).
Q. 나중에 시공 사례를 직접 추가할 수 있나
네. 작업 도중 추가 계약으로 관리자(CMS) 기능을 넣어, 시공 사례를 관리자 화면에서 직접 등록·수정합니다.
비슷한 프로젝트를 고민 중이라면, 상담만 받아보셔도 됩니다.
갱신 2026.09.03 · 제로스튜디오