건축사사무소 홈페이지 제작기: 프로젝트 사진에 설계 질문을 붙인 빗금
빗금 홈페이지는 예비 건축주가 용도별 프로젝트를 고르고, 사진 옆의 설계 질문과 공간 장면을 읽은 뒤 관심 프로젝트를 담아 문의하도록 구성했습니다. 사무소의 관점과 상담 과정을 드러내는 디자인을 살펴봅니다.
집을 계획하는 사람과 전시 공간을 준비하는 사람은 보고 싶은 프로젝트가 다릅니다. 건축사사무소 홈페이지 제작에서는 예비 의뢰인이 자기 계획과 가까운 공간을 찾고, 설계 생각을 읽은 뒤 문의로 이어지기 쉽게 제작해야 합니다.
빗금 첫 화면에서는 ‘머무는 방식을 설계합니다’라는 문장을 읽고 ‘중정을 품은 집’ 사진으로 대표 프로젝트를 살펴볼 수 있습니다. 이어지는 프로젝트 목록에서는 용도별로 작업을 고르고, 상세에서는 공간마다 어떤 질문에서 설계가 시작됐는지 설명합니다. 빗금 홈페이지
사진을 본 뒤 궁금해질 내용도 준비했습니다. 설계 과정에서 함께 검토할 것을 확인하고, 마음에 든 프로젝트 이름을 지닌 채 문의 화면으로 이동합니다. 예비 건축주가 사진과 설명을 보고 상담 문의까지 끊기지 않고 살펴보도록 한 디자인입니다.
첫 화면에서 대표 프로젝트와 설계 관점을 함께 살펴봅니다
큰 명조 제목 옆의 ‘중정을 품은 집’ 사진을 본 뒤, 아래의 ‘프로젝트 보기’ 버튼으로 다른 작업도 살펴볼 수 있습니다. 방문자는 공간을 바라보는 빗금의 문장과 대표 프로젝트를 같은 화면에서 읽은 뒤 목록으로 들어갑니다. 첫 화면에서 사무소가 어떤 공간을 다루는지 확인할 수 있습니다. 빗금 첫 화면
따뜻한 회백색 바탕과 먹색 글자, 가는 구획선은 사진을 둘러싼 여백을 만듭니다. 아래의 네 프로젝트는 사진 크기를 다르게 배치하고 각각 시작한 질문을 한 줄로 붙였습니다. 외관의 분위기를 보고 멈춘 방문자가 공간의 쓰임과 설계 생각까지 읽도록 한 디자인입니다.
용도를 고르면 가까운 프로젝트부터 살펴봅니다
프로젝트 목록에서는 전체, 주거, 문화·전시, 독서공간을 고를 수 있습니다. ‘문화·전시’를 누르면 해당 프로젝트와 결과 수가 바뀝니다. 사진 보기에서는 공간의 모습을, 목록 보기에서는 프로젝트 이름·유형·살펴볼 장면을 나란히 읽을 수 있습니다. 서로 다른 계획을 가진 방문자가 자기 관심사로 목록을 좁히는 방식입니다. 빗금 프로젝트 목록
사진 보기에서는 큰 이미지로 공간을 살펴보고, 목록 보기에서는 유형과 살펴볼 장면을 표에서 비교할 수 있습니다. 실제 사무소의 홈페이지를 맡기시면 보유한 설계 자료와 수행 분야를 살펴보고, 의뢰인이 자기 계획과 가까운 프로젝트를 찾도록 분류와 소개 문장을 구성해드립니다.
상세의 장면 목차가 설계의 생각을 따라가게 합니다
‘골목의 문화공간’ 상세는 프로젝트의 출발점이 된 질문을 보여준 뒤 골목·마당·개구부처럼 장면을 나눠 설명합니다. 왼쪽 목차에서 장면을 고르면 해당 사진과 글로 이동하고, 읽는 위치도 목차에 표시됩니다. 예비 건축주는 사진을 넘기며 동선, 빛, 재료를 어떤 순서로 살폈는지 읽을 수 있습니다. 빗금 프로젝트 상세
사진을 누르면 어두운 바탕에 크게 열리고, 장면 이름과 사진 순서, 이전·다음 버튼이 함께 나와서 사진을 차례로 넘겨 볼 수 있습니다. 마당 사진의 계단과 창을 크게 본 뒤 왼쪽 목차에서 다른 장면으로 옮겨 가며 공간의 구성을 살펴볼 수 있습니다.
설계 과정표는 첫 상담의 질문을 정리해 줍니다
설계 과정 화면은 대화, 대지 검토, 공간 설계, 구현 협의의 흐름을 보여줍니다. 설계 과정의 각 단계에서 사무소가 검토하는 것과 함께 결정할 것, 정리하는 자료를 같은 줄에서 확인할 수 있습니다. 예비 건축주는 자신의 계획이 어디쯤 있는지 생각하며 상담에서 전할 조건과 물어볼 내용을 적어 볼 수 있습니다. 빗금 설계 과정
아래에는 설계 업무, 외부 협의, 현장 참여, 일정을 나눠 비용과 기간을 결정할 때 확인할 범위를 설명합니다. 대지 유무와 설계비처럼 처음 떠오를 질문도 자주 묻는 내용에서 펼쳐 볼 수 있습니다. 범위를 정하는 기준을 먼저 읽으면 무엇을 준비해 상담을 시작할지 더 분명해집니다.
관심 프로젝트를 담아 계획을 이야기합니다
프로젝트 상세 끝에서는 해당 공간의 용도에 맞춘 문의 버튼을 눌러 바로 문의할 수 있습니다. ‘빛의 틈’에서 문의로 이동하면 관심 프로젝트 이름이 문의 화면에 담기고, 계획 정보가 펼쳐지며 문화·전시 분야가 선택됩니다. 방문자는 자신이 살펴본 프로젝트를 기준으로 계획 공간과 현재 단계, 궁금한 내용을 정리할 수 있습니다. 빗금 프로젝트 문의
문의 화면에는 기본 연락처와 문의 내용 외에 대지 위치나 희망 시기처럼 더 전하고 싶은 정보를 고를 자리가 있습니다. 보던 프로젝트를 문의서에 이어 두어 방문자가 관심을 가진 공간을 다시 설명할 필요를 줄였습니다. 실제 사무소의 상담 방식에 맞춰 프로젝트와 계획 정보를 함께 받는 화면으로 구성해드립니다.
휴대폰에서도 사진을 읽고 문의로 자연스럽게 이어집니다
휴대폰 첫 화면에는 제목과 ‘프로젝트 보기’ 버튼이 대표 사진보다 먼저 보여서 바로 프로젝트 목록으로 들어갈 수 있습니다. 용도 선택 버튼은 화면 폭에 맞춰 줄이 바뀌고, 상세에서는 사진 설명 위의 장면 목차에서 보고 싶은 장면을 먼저 고를 수 있습니다. 작은 화면에서도 프로젝트를 고른 뒤 장면을 따라 읽는 순서를 유지했습니다. 빗금 홈페이지
프로젝트 상세 끝에는 휴대폰에서도 찾기 쉬운 크기의 문의 버튼이 보입니다.
저희 에코스튜디오에 건축사사무소 홈페이지 제작을 맡기시면 실제 설계 자료와 분야, 상담 절차를 확인하고 예비 건축주가 자기 계획과 가까운 작업을 찾아 문의할 수 있게 만들어드립니다. 홈페이지 제작을 검토 중이라면 홈페이지 제작 안내를 살펴보고, 궁금하신 점을 프로젝트 문의에 남겨 주세요.