왜 건축사사무소 홈페이지는 ‘작품이 곧 말’인가
건축사사무소 홈페이지 제작에서 가장 먼저 정하는 것은 메뉴 구조도, 회사 소개 문장도 아닙니다. 무엇을 첫 화면에 세울 것인가입니다. 건축주는 설명을 읽고 싶어 하지 않습니다. ‘이 사무소가 어떤 공간을 만드는가’를 한 장의 사진으로 보고 싶어 합니다. 그래서 이 건축사사무소 홈페이지는 텍스트를 줄이고, 완성 프로젝트의 사진이 화면 전체를 차지하게 했습니다. 히어로는 카피가 아니라 작품으로 0.3초 안에 “여기는 다르다”를 증명합니다. 건축은 말이 아니라 지어진 것으로 평가받는 분야이고, 홈페이지도 같은 원리를 따라야 한다는 판단이었습니다.
색: 콘크리트 그레이와 모노크롬
팔레트는 일부러 색을 거의 빼고 콘크리트 그레이(#f1f0ee·#42423f)를 중심에 둔 모노크롬으로 잡았습니다. 화려한 색은 건축 사진의 빛과 면, 재료의 질감을 가립니다. 무채색 바탕은 사진을 ‘작품’으로 격상시키고, 노출 콘크리트·석재·유리가 가진 본래의 톤을 그대로 살립니다. 강조가 필요한 곳에만 가는 선과 미세한 명도 차로 위계를 만들어, 사무소가 다루는 재료 그 자체가 색이 되도록 했습니다. 결과적으로 ‘예쁜 웹사이트’가 아니라 ‘잘 인화된 건축 도록’의 인상에 가깝습니다.
타이포와 그리드: 강한 기하의 질서
제목에는 묵직한 세리프를, 본문에는 Pretendard를 써서 격식과 가독을 함께 잡았습니다. 더 중요한 건 그리드입니다. 건축의 본질이 비례와 질서이므로, 레이아웃도 강한 기하 그리드 위에 칸을 또렷하게 나눠 도면 같은 긴장감을 줬습니다. 프로젝트 카드는 정렬을 흐트러뜨리지 않고, 여백은 콘크리트 면처럼 넓고 단단하게 비웠습니다. 한글은 word-break를 어절 단위(keep-all)로 잡아 음절이 어색하게 끊기지 않게 했습니다. 절제된 타이포와 분명한 그리드가 ‘설계를 아는 사람이 만든 사이트’라는 신호를 냅니다.
이미지: 사진이 주인공, 나머지는 배경
건축사사무소 홈페이지에서 가장 큰 자산은 작품 사진입니다. 그래서 모든 디자인 결정은 ‘사진을 가장 크고 선명하게’라는 원칙에 종속됐습니다. 풀블리드(화면 가득) 이미지, 충분한 여백, 사진을 방해하지 않는 무채색 UI — 모두 사진을 위한 무대입니다. 한 프로젝트를 콘셉트·과정·완성 컷으로 깊게 보여, 개수보다 깊이로 신뢰를 쌓습니다. 사진이 약하면 이 구조도 무너지므로, 제작 단계에서 사진 품질을 가장 먼저 점검하도록 설계 자체가 권합니다.
구조와 전환: 프로젝트 보기에서 설계 문의까지
핵심 행동은 둘입니다 — 프로젝트 보기와 설계 문의. 잠재 건축주가 작품을 충분히 본 뒤에야 연락한다는 사실에 맞춰, 프로젝트 갤러리에서 상세로, 상세에서 문의로 가는 동선을 가장 짧게 만들었습니다. 사무소 소개·연혁·건축사 등록 정보는 신뢰의 보강재로 두되, 화면의 중심은 언제나 작품과 문의 버튼입니다. 상단 유틸바·히어로·하단 CTA까지 모든 길이 ‘한 통의 설계 상담’으로 모이게 했습니다. 건축사사무소 홈페이지 제작에서 디자인의 목적은 결국 ‘제대로 된 프로젝트 문의 한 건’입니다.
모바일에서도 흔들리지 않는 작품
건축주는 현장 답사 중에, 이동하는 차 안에서, 늦은 밤 자료를 찾다가 휴대폰으로 사무소를 봅니다. 그래서 이 사이트는 모바일을 먼저 설계했습니다. 작은 화면에서도 작품 사진이 가득 차고, 스크롤만으로 프로젝트가 자연스럽게 이어지며, 어디서든 한 번의 터치로 설계 문의·전화가 닿습니다. 메뉴는 자바스크립트 없이 가볍게 열리게 해 느린 회선에서도 사진이 빨리 뜨도록 했습니다. 데스크톱에서는 넓은 여백과 그리드로 작품의 스케일을 키우고, 모바일에서는 속도와 문의 동선을 키워, 같은 페이지가 두 맥락 모두에서 설계 역량을 손상 없이 전합니다.
정직과 발견(과장 없는 카피·GEO)
건축은 결과를 단정하기 어려운 분야입니다. 그래서 ‘업계 1위’, ‘최고의 설계’ 같은 검증 불가능한 표현 대신, 실제 지어진 프로젝트와 과정으로만 역량을 말하게 했습니다. 가짜 수상 이력이나 만들어 낸 후기는 넣지 않았습니다. 동시에 “건축사사무소 홈페이지 제작”, “건축 설계 문의”, “주택 설계 포트폴리오”처럼 건축주가 실제로 검색하는 질문에 답하는 FAQ와 구조화 데이터(CreativeWork·FAQPage 스키마)를 넣어 — 검색엔진과 AI 답변 양쪽에서 사례로 발견되게 했습니다. 보기 좋은 사이트가 아니라, 사실로만 말하면서도 찾아지고 문의로 이어지는 사이트를 목표로 했습니다.