인테리어 홈페이지 제작기, 덜어내는 집 여백스튜디오
요약 인테리어 홈페이지 제작에서 저희가 가장 먼저 정한 것은 "이 스튜디오에 맡기면 우리 집이 넓어 보인다"는 믿음을 첫 화면에서 주는 일이었습니다. 여백스튜디오는 실제 고객이 아니라, 블러썸팩토리가 서울 성북의 가상 주거 리모델링 스튜디오를 정하고 실제 의뢰처럼 대표 디자이너의 강점부터 잡아 만든 포트폴리오 홈페이지입니다. 평면도 인트로, 전후 비교 슬라이더, 스크롤로 지워지는 목록을 왜 이렇게 설계했는지 디자이너가 직접 풀어 드립니다.
성북의 가상 리모델링 스튜디오, 이렇게 가정했습니다
리모델링을 알아보는 건축주는 업체 홈페이지를 열 때 질문 하나를 품고 옵니다. "우리 집도 저렇게 넓어 보일 수 있을까." 그다음 걱정은 돈입니다. 인테리어 업체 홈페이지 대부분이 완성 사진만 길게 늘어놓고 비용은 "문의 주세요"로 끝나다 보니, 건축주는 사진이 예쁜 곳과 믿을 만한 곳을 구별하기 어렵습니다.
그래서 가상의 스튜디오 '여백스튜디오'를 정하고, 윤서하 대표 디자이너라는 가상 인물에게 강점 하나를 주었습니다. "수납을 벽 속에 숨기고 짐을 함께 줄여, 집에 여백을 남기는 덜어내는 주거 리모델링. 상담부터 AS까지 대표 디자이너가 직접." 헤드라인은 이 문장을 줄여 "채우기보다, 덜어내는 집."으로 정했습니다.
사진은 포트폴리오라서 연출 사진(AI 생성 이미지와 무료 사진)을 썼고, 사례도 모두 '가상 콘셉트 사례'라고 화면에 적었습니다. 실제 제작에서는 대표 디자이너님과 스튜디오, 시공을 마친 현장을 저희가 직접 촬영합니다.
첫 화면: 사진보다 평면도를 먼저 그린 이유
사이트를 열면 사진 대신 가는 선이 먼저 나타납니다. 벽과 문, 가구 선이 그려지고 13,200과 7,200 같은 치수가 붙은 뒤, 거실 자리에서부터 실제 거실 사진이 서서히 열립니다. 3초 남짓한 이 인트로로 보여 주고 싶었던 것은 '설계가 공간이 되는 순간'입니다. 예쁜 사진은 어느 업체나 걸 수 있지만, 도면에서 시작한다는 태도는 설계하는 스튜디오만 보여 줄 수 있습니다.
인트로가 끝나면 왼쪽에는 아주 가는 글씨의 헤드라인과 "수납은 벽 속으로 숨기고, 짐은 함께 줄입니다"라는 설명이, 오른쪽에는 비어 있는 듯 넓은 거실 사진이 남습니다. 버튼은 '우리 집 상담 신청'과 '전후 비교 보기' 두 개뿐입니다. 아직 결정할 준비가 안 된 건축주도 부담 없이 누를 수 있도록, 두 번째 버튼을 상담이 아닌 구경으로 두었습니다.
말 대신 직접 끌어 보게 한 장치 세 가지
"넓어 보입니다"라는 말은 누구나 할 수 있습니다. 그래서 이 사이트는 건축주가 직접 손을 움직여 확인하게 만드는 데 공을 들였습니다. 첫 번째가 전후 비교 슬라이더입니다. 30년 된 아파트 거실과 덜어낸 뒤의 거실을 겹쳐 두고, 손잡이를 좌우로 끌어 비교하게 했습니다. 화면에 들어오면 슬라이더가 한 번 저절로 흔들려 '끌 수 있다'는 걸 알려 주고, 키보드로도 움직일 수 있게 했습니다.
슬라이더 아래에는 무엇을 뺐고(장식장 3개, 천장 몰딩, 무늬 벽지, 형광등), 무엇을 숨겼고(벽면 일체형 수납 6.2m, 매입 에어컨), 무엇을 지켰는지(남향 창, 거실 폭)를 세 줄로 정리했습니다. 이 세 줄이 있어야 "우리 집 장식장도 저렇게 들어가겠구나"로 이어집니다. 두 장의 사진이 콘셉트 이미지이며 실제 시공 사례가 아니라는 문구도 바로 밑에 붙였습니다.
두 번째는 스크롤할 때마다 한 줄씩 지워지는 '덜어낼 것' 목록입니다. 거실 장식장, 돌출된 천장 몰딩, 문마다 다른 손잡이, 3년간 안 연 상자, 문턱까지 여덟 가지가 차례로 취소선을 긋고 흐려집니다. 그리고 마지막에 '빛, 바람, 오크의 결, 쉴 자리'만 밝게 남습니다.
세 번째는 숨은 수납 입면도입니다. 손잡이 없는 평면 도어를 누르면 문이 열리며 벽 속 선반과 짐이 드러나고, 다시 누르면 벽으로 돌아갑니다. 옆에는 "짐부터 함께 셉니다", "손잡이 대신 3mm 그림자 줄눈", "설비도 벽 속으로" 세 가지 원칙을 붙였습니다. "짐이 사라지는 게 아니라, 눈에서 사라지는 겁니다"라는 문장이 이 장치 하나로 설명됩니다.
디자인 언어: 건축 잡지처럼 비우고, 도면으로 꾸미기
덜어내는 스튜디오의 홈페이지가 복잡하면 말과 화면이 어긋납니다. 그래서 색은 웜 화이트(#F6F3EE)와 페이퍼 스톤(#ECE7DF)을 바탕으로, 화이트 오크(#B98C5C)와 라이트 오크(#DCC6A6)를 포인트로, 글자는 순검정 대신 잉크(#26241F)를 썼습니다. 처음에는 시선을 끄는 포인트 색 하나를 따로 둘까도 생각했지만, 재료를 세 가지만 쓰겠다는 스튜디오라면 홈페이지도 실제 마감재 색 안에서 끝나는 편이 맞다고 판단했습니다.
장식은 아이콘이나 패턴 대신 치수선, 평면도, 입면도 같은 도면 언어로만 했습니다. 한글 제목은 아주 가는 Pretendard Variable을 크게 써서 여백 자체가 디자인이 되게 했고, 영문 라벨과 숫자, 치수는 기하학적인 Jost로 맞췄습니다.
| 요소 | 고른 것 | 이유 |
|---|---|---|
| 바탕과 글자 | 웜 화이트, 페이퍼 스톤, 잉크 | 하얗지만 차갑지 않은 집의 온도 |
| 포인트 | 화이트 오크, 라이트 오크 | 실제 마감재 색 안에서 끝나는 화면 |
| 장식 | 치수선, 평면도, 입면도 | 꾸밈 대신 설계 능력을 보여 주는 선 |
| 한글 제목 | Pretendard Variable 가는 굵기 | 글자에서도 덜어낸 인상 |
| 영문과 숫자 | Jost | 도면 표기처럼 정돈된 치수와 라벨 |
섹션 구성: 비용을 숫자 하나로 말하지 않기
체험 장치 뒤로는 건축주가 결정하는 데 필요한 정보를 차례로 놓았습니다. 32평 거실, 24평 주방, 단독주택 침실의 콘셉트 사례 세 가지에는 평형, 공사 범위, 기간 가이드를 같은 칸에 적어 "우리 집 평형이면 몇 주쯤일까"를 바로 가늠하게 했습니다. 대표 디자이너 섹션에는 "예쁜 집보다 치우기 쉬운 집을 먼저 그립니다"라는 한마디를 걸었습니다.
가장 고민한 곳은 비용 가이드입니다. 평당 단가를 크게 적으면 눈길은 끌지만, 현장에서 금액이 달라지는 순간 신뢰가 무너집니다. 그래서 부분 공사, 전체 리모델링, 구조 변경 포함 세 범위로 나눠 포함 공사와 기간(약 2~4주, 5~8주, 7~10주)을 적고, 금액은 실측 후 공정별 서면 견적으로 안내한다고 분명히 밝혔습니다.
| 섹션 | 담은 것 | 풀어 주는 망설임 |
|---|---|---|
| 전후 비교 | 슬라이더, 뺀 것과 숨긴 것과 지킨 것 | 우리 집도 넓어 보일 수 있을까 |
| 숨은 수납 | 열리는 입면도, 세 가지 원칙 | 짐은 다 어디에 두지 |
| 콘셉트 사례 | 평형별 공사 범위와 기간 | 우리 평형이면 얼마나 걸릴까 |
| 대표 디자이너와 과정 | 상담부터 AS까지 6단계 직접 | 계약하고 나면 현장은 누가 보나 |
| 비용 가이드 | 범위별 포함 공사, 서면 견적 원칙 | 나중에 추가 비용이 붙지 않을까 |
| FAQ | 살면서 공사, 짐 정리, 차가운 느낌 | 미니멀하면 집이 썰렁하지 않을까 |
휴대폰 화면: 끌기와 열기는 엄지로
리모델링은 휴대폰으로 오래 비교하는 업종이라 전후 비교 슬라이더는 터치로 끌리게 만들고, 손잡이를 엄지가 잡기 좋은 크기로 키웠습니다. 숨은 수납 입면도도 한 번 톡 치면 열리고 닫힙니다. 화면 아래에는 '전화'와 '상담 신청' 두 버튼을 늘 붙여 두었습니다.
상담 신청 양식은 휴대폰에서 가장 손이 덜 가게 바꿨습니다. 평형과 예산대는 글자를 치는 대신 칩을 눌러 고르고, 예산대에는 '아직 모르겠어요'도 넣었습니다. 예산을 정하지 못한 건축주가 양식 앞에서 멈추지 않게 하기 위해서입니다. 지역과 연락처만 적으면 대표 디자이너가 직접 연락한다는 안내로 마무리했습니다.
검색 세팅, 그리고 우리 스튜디오에 적용한다면
페이지 제목은 "여백스튜디오 — 채우기보다, 덜어내는 집"으로, 설명 문구에는 "서울 성북", "주거 리모델링", "대표 디자이너가 상담부터 AS까지 직접"을 담았습니다. 실제 제작에서는 "성북 리모델링", "아파트 인테리어 + 동 이름"처럼 건축주가 실제로 치는 검색어를 제목과 소제목에 넣고, 사례마다 평형과 지역을 적은 개별 페이지를 만들어 리모델링 홈페이지가 사례 수만큼 검색 입구를 갖게 합니다.
속도도 챙겼습니다. 첫 화면 외 사진은 지연 로딩으로 불러오고, 도면 효과는 가벼운 선 그림(SVG)으로 만들어 휴대폰에서도 부드럽게 움직입니다. 포트폴리오 자체는 가상 업체라 noindex로 검색에서 빼 두었습니다. 실제 의뢰라면 업체 정보 구조화 데이터를 넣고 네이버 서치어드바이저와 구글 서치 콘솔에 등록한 뒤 검색 노출용 칼럼을 함께 발행합니다. 인테리어 업체에 맞춘 구성은 인테리어 홈페이지 제작 페이지에 정리해 두었습니다.
제작은 대표 디자이너님 인터뷰에서 시작합니다. 건축주가 왜 우리 스튜디오를 고르는지 듣고 강점을 한 문장으로 정한 뒤, 그 문장에 맞춰 체험 장치와 사례 페이지 구조를 짭니다. 이어서 현장 촬영, 디자인과 효과, 검색 세팅을 거쳐 오픈하고, 오픈 후에는 상담 신청 숫자를 함께 확인합니다.
비용은 330만 원(부가세 포함)이며 직접 촬영이 포함되고 페이지 수와 수정 횟수에 제한이 없습니다. 검색 노출용 칼럼 6편과 오픈 후 3개월 유지보수도 무료이고, 이후 유지보수 정기권은 월 110만 원입니다. 다른 업종 사례는 홈페이지 포트폴리오에서 보실 수 있고, 우리 스튜디오에 어떤 장치가 맞을지는 무료 상담으로 먼저 물어보셔도 됩니다.
자주 묻는 질문
인테리어 홈페이지 제작 비용은 얼마인가요?
블러썸팩토리는 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색 노출용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.
시공 사례가 아직 많지 않아도 홈페이지를 만들 수 있나요?
네, 이 사이트처럼 콘셉트 사례임을 밝힌 설계 방향과 진행 과정, 비용 원칙으로 먼저 신뢰를 쌓고 실제 사례는 생길 때마다 추가하면 됩니다.
새 시공 사례는 제가 직접 올릴 수 있나요?
사례 게시판처럼 자주 바뀌는 곳은 직접 올리기 쉽게 만들고, 디자인이 필요한 수정은 오픈 후 3개월 무료, 이후 유지보수 정기권으로 맡기실 수 있습니다.
병원이 아닌 인테리어 업체도 맡길 수 있나요?
네, 마케팅 대행은 병의원 전문이지만 홈페이지 제작과 유지보수 정기권은 인테리어를 포함해 업종과 상관없이 진행합니다.
전후 비교 슬라이더 같은 효과가 있으면 휴대폰에서 느리지 않나요?
첫 화면 외 사진은 지연 로딩하고 도면 효과는 가벼운 선 그림으로 만들어, 휴대폰에서 직접 검수한 뒤 오픈합니다.