문소도 스튜디오의 홈페이지를, 대표가 현장에서 이미 쌓아 둔 기록과 약속이 먼저 보이도록 다시 설계하였습니다.

상황

문소도 스튜디오는 2016년부터 서울과 수도권의 주거 공간을 설계하고 시공해 온 인테리어 스튜디오입니다. 상담과 견적, 설계와 가구 도면, 현장과 마감 검수까지 대표가 맡으며, 서울에 위치한 호텔 본점 공사의 설계와 시공에 참여한 경험을 집의 마감 기준으로 가져옵니다.

대표는 홈페이지를 업체에 맡기기 전에 AI로 직접 만들어 올렸고, 블로그와 SNS 채널도 직접 운영해 왔습니다. 다만 화면은 제작 도구의 기본 틀에 머물러 AI가 만든 것처럼 보였고, 계약 고객에게 공정별 현장 사진과 공사비를 공개하는 방식처럼 이 회사만 할 수 있는 이야기가 페이지 아래쪽에 놓여 있었습니다.

요청은 홈페이지의 톤앤매너를 바꿀 디자인 가이드였습니다. 가이드를 잡는 과정에서 서체와 색만으로는 달라지지 않는다는 점을 확인하였고, 문장과 정보의 순서를 함께 정리하는 것으로 범위를 넓혔습니다. 새 페이지는 기존 페이지를 지우지 않고 따로 만든 뒤 바꿔 걸었습니다.

발견

대표와의 미팅과 기존 채널을 통해 확인한 내용은 다음과 같습니다.

• 기초공사가 이어지는 동안 대표는 매일 현장을 찾아 사진을 찍습니다. 마감 뒤에 가려질 곳부터 기록합니다.
• 계약할 때 공정마다 자재, 수량, 단가, 금액을 적은 세부내역서를 드리고, 계약 고객 전용 페이지에서 공정별 현장 사진과 공사비를 함께 보여 줍니다.
• 상담에서는 예산보다 지키고 싶은 생활을 먼저 묻습니다.
• 한 번에 많은 현장을 맡지 않습니다.

이를 바탕으로 홈페이지의 역할을 새로운 이야기를 만드는 곳이 아닌, 대표가 이미 현장에서 하고 있는 일을 고객이 상담 전에 확인할 수 있는 곳으로 정의하였습니다.

방향을 정립하는 과정

한 문장에서 출발하는

모든 페이지의 기준을 「구경하는 집보다 살기 좋은 집」이라는 한 문장에 두었습니다. 사진은 실제 문소도 현장만 쓰고, 보여 주기 위한 연출보다 동선과 수납처럼 사는 사람의 하루가 읽히는 장면을 골랐습니다.

차분하지만, 기본 틀처럼 보이지 않는

제목은 고운바탕, 본문은 Pretendard로 정리하고, 따뜻한 회백색 바탕에 갈색 한 가지를 강조색으로 썼습니다. 제작 도구의 기본 구성에서 벗어나 장마다 여백과 선의 쓰임을 다시 정하여, 회사가 직접 정한 화면이라는 인상을 전달합니다.

한 일

대표가 일하는 순서대로 놓은 네 페이지

홈, 문소도 소개, 진행 과정, 상담 신청 네 페이지를 상담, 예산 나누기, 설계, 밑작업과 시공, 마감 검수로 이어지는 실제 일의 순서대로 재구성하였습니다. 공사비를 공개하는 이유와 세부내역서 예시를 진행 과정 페이지의 한가운데에 두어, 고객이 상담 전에 비용의 구조를 먼저 이해할 수 있도록 하였습니다. 세부내역서 예시의 금액은 000,000원으로 표기하였습니다.

생활을 먼저 묻는 상담 신청서

상담 신청서에서 예산 항목을 빼고, 꼭 지키고 싶은 생활과 지금 불편한 곳을 먼저 묻도록 설계하였습니다. 평형, 단지 이름, 희망 공사 시기와 사진, 도면 첨부를 함께 받아, 첫 통화에서 바로 생활 이야기로 들어갈 수 있도록 하였습니다.

보이지 않는 설정

페이지마다 검색 제목과 설명, 공유 이미지를 새로 쓰고, 파비콘을 로고에서 다시 만들었습니다. 기존 주소는 모두 새 페이지로 이어지도록 연결하여, 이미 공유된 링크와 검색 결과가 끊기지 않도록 하였습니다.

현장 이야기를 콘텐츠로

첫 시공 사례 「살림은 크지 않은데, 주방만 컸던 집」을 홈페이지 프로젝트와 블로그, 인스타그램에 같은 이야기로 정리하였습니다.

결과물

• 홈페이지 디자인 가이드
• monsodo.studio 홈, 문소도 소개, 진행 과정, 상담 신청(PC, 모바일)
• 상담 신청서
• 검색 제목과 설명, 공유 이미지, 파비콘, 옛 주소 연결
• 시공 사례 1편(홈페이지, 블로그, 인스타그램)