PORTFOLIO

건축집단 건축사사무소 브랜딩 웹사이트 개발

시공 사례와 건축 철학을 사진 중심으로 보여주는 건축사사무소 브랜딩 웹사이트 프로젝트입니다.

과제: 건축 사진이 주인공이어야 하는데, 범용 템플릿은 여백도 이미지 품질도 살리지 못합니다.

한 것: About·Works·Contact 브랜딩 웹사이트 + 히어로 캐러셀 + 3단 반응형

결과물

About·Works·Contact를 사진이 화면을 다 쓰는 구조로 설계한 3단 반응형 웹사이트.

건축집단이 보여줄 것은 시공 사례와 건축 철학이지만, 범용 템플릿은 사진의 여백도 품질도 살리지 못합니다. 사진이 화면을 다 쓰는 구조에 무게를 싣고, 사례를 스스로 늘려 갈 수 있도록 작업 도중 추가 계약으로 관리자(CMS)를 더했습니다.

건축집단이 보여줄 것은 시공 사례와 건축 철학입니다.

범용 템플릿은 사진의 여백도 품질도 살리지 못하고, 사무소가 오래 쥐고 갈 사이트라면 사례를 스스로 늘려 갈 수 있어야 합니다.

쓰는 구조에 무게를 싣고, 작업 도중 추가 계약으로 관리자(CMS) 기능을 더했습니다.

여백 중심의 절제된 UI 위에 프로젝트 이미지를 풀블리드로 깔았습니다. 설명이 빠질수록 시공 사례의 조형적 완성도가 그대로 남고, 히어로 캐러셀은 자동으로 넘어가되 마우스를 올리면 멈춥니다.

이미지가 곧 상품이라 화질을 낮추는 선택은 하지 않았습니다. Next.js Image에 반응형 sizes를 지정하고 LCP 대상에만 priority를 주고 quality를 조정해, 화질 대비 로딩 성능을 확보했습니다.

처음 범위에는 관리자 페이지가 없었지만, 시공 사례가 계속 쌓이는 사무소라 작업 도중 추가 계약으로 CMS를 넣었습니다. 코드는 Page→Widget→Feature→Common 4계층과 단방향 의존성 규칙으로 짜 두어, 화면과 데이터가 늘어도 고칠 자리가 분명합니다.

건축·인테리어 사무소 홈페이지 제작 업체를 찾거나, 사진이 주인공인 포트폴리오 사이트, 시공 사례를 직접 등록·관리할 홈페이지가 필요한 경우에 이 사례를 참고할 수 있습니다.

프로젝트 진행과 산출물에 대한 자주 묻는 질문을 정리했습니다.

이 건은 About·Works·Contact와 3단 반응형까지 약 3주였습니다(기간 기준, 금액과 무관).

네. 작업 도중 추가 계약으로 관리자(CMS) 기능을 넣어, 시공 사례를 관리자 화면에서 직접 등록·수정합니다.

갱신 2026.09.07 · 제로스튜디오

기획 범위, 디자인 시스템, 개발 핸드오프까지 필요한 내용을 함께 확인해 드릴게요.