상업공간 인테리어 홈페이지 제작기, 불을 켜는 켜인테리어
요약 상업공간 인테리어 홈페이지는 시공 사진을 많이 거는 것보다, 이 업체가 무엇으로 손님의 시간을 바꾸는지 먼저 느끼게 해야 한다고 저희는 생각합니다. 켜인테리어는 실제 고객이 아니라, 블러썸팩토리가 서울 용산의 가상 상업공간 인테리어 스튜디오를 정하고 실제 의뢰처럼 대표 디자이너의 강점부터 잡아 만든 포트폴리오 홈페이지입니다. 스위치 인트로, 손전등 섹션, 업종별 빛의 공식을 왜 이렇게 설계했는지 디자이너가 직접 풀어 드립니다.
용산의 가상 상업공간 스튜디오, 이렇게 가정했습니다
카페를 열려는 사장님, 병원 개원이나 리뉴얼을 앞둔 원장님은 인테리어 업체를 고를 때 비슷한 경험을 합니다. 업체 홈페이지 열 곳을 열어 보면 열 곳 모두 밝게 찍은 완성 사진과 "합리적인 견적"이라는 말이 걸려 있습니다. 사진이 다 비슷하니 결국 견적만 비교하게 되고, 정작 "이 업체에 맡기면 손님이 우리 매장에서 더 머물까"라는 질문에는 답을 얻지 못합니다.
그래서 가상의 스튜디오 '켜인테리어'를 정하고, 한도윤 대표 디자이너라는 가상 인물에게 강점 하나를 주었습니다. "대표 디자이너가 밤에 직접 실측하고, 가구보다 조명부터 설계해 손님이 머무는 시간을 바꾸는 상업공간 인테리어." 이름 '켜'도 여기서 나왔습니다. 헤드라인은 "공간은, 불을 켜는 순간 완성됩니다."로 정했습니다.
사진은 포트폴리오라서 연출 사진(AI 생성 이미지와 무료 사진)을 썼고, 병원과 카페 사례는 '가상 콘셉트 사례'라고 화면마다 적었습니다. 실제 제작에서는 대표 디자이너님과 완공 현장을 저희가 직접 촬영합니다. 조명이 강점인 업체라면 낮 사진과 밤 사진을 나눠 찍는 것까지 촬영 계획에 넣습니다.
첫 화면: 사진을 보여 주지 않고 스위치부터
사이트를 열면 화면이 꺼져 있습니다. 가운데 벽 스위치가 '딸깍' 넘어가면 형광등처럼 두어 번 깜빡인 뒤 카페 사진이 서서히 밝아지고, 오른쪽 위 2700K, 180lx, CRI 95 같은 조명 수치가 차오릅니다. 강점이 조명이라면 첫 3초도 조명이어야 한다고 판단했습니다.
인트로가 끝난 첫 화면 오른쪽에는 작은 'LIGHT SWITCH'를 남겨 두었습니다. 언제든 눌러 불을 끄고 다시 켤 수 있는 장난감 같은 장치인데, 한 번 눌러 본 사람은 같은 사진이 조명 하나로 얼마나 달라지는지 바로 압니다. 버튼은 '공간 상담 신청'과 '콘셉트 사례 보기' 두 개로 줄였습니다. 움직임 줄이기 설정을 켠 기기에서는 깜빡임 없이 바로 밝은 화면을 보여 줍니다.
손전등 섹션: 설명을 읽는 대신 비춰 보게
이 사이트에서 가장 공들인 곳은 손전등 섹션입니다. 어둡게 깔린 병원 대기실 사진 위에서 커서가 손전등이 되고, 빛이 닿는 자리마다 설계 이유가 나타납니다. 천장 곡면 간접광(COVE 3000K), 기다리는 동안 시선이 머무는 니치 선반, 처음 온 환자도 접수 위치를 찾게 하는 카운터 하부 라인 조명(LINE 2700K), 진료실까지 같은 색온도로 이어지는 복도, 조도를 150lx로 낮춘 소파 구역까지 다섯 곳입니다.
조명 설계는 글로 설명하면 금방 어려워집니다. 하지만 어둠 속에서 직접 비춰 보면 "아, 빛이 닿는 곳만 기억되는구나"를 몸으로 이해합니다. 이 섹션을 병원 대기실로 정한 데도 이유가 있습니다. 카페 사장님에게는 '이 업체는 병원처럼 까다로운 공간도 한다'는 신뢰가, 병원 원장님에게는 '우리 대기실 이야기'라는 공감이 동시에 생기기 때문입니다.
디자인 언어: 소등 블랙 위의 앰버, 수치를 글자로
빛이 주인공이려면 바탕은 어두워야 합니다. 그래서 소등 블랙(#0D0B0A)과 차콜(#161312)을 깔고, 글자는 웜 크림(#EFE4D6)으로, 포인트는 앰버 라이트(#FFB45E)와 필라멘트 오렌지(#F28C3A), 테라코타(#B4532F)만 썼습니다. 처음엔 상업공간답게 밝고 깨끗한 화이트 사이트도 생각했지만, 그러면 빛이 보이지 않습니다. 어두운 화면에서는 앰버색 버튼 하나가 실제 조명처럼 눈을 끌어, 상담 버튼이 자연스럽게 가장 밝은 곳이 됩니다.
글꼴은 세 가지 역할로 나눴습니다. 한글 제목은 굵은 Pretendard로 단단하게, 영문 대제목은 개성 있는 Syne로, 2700K나 CRI 90+ 같은 조명 수치는 Fragment Mono로 도면 표기처럼 보여 줍니다. 상업공간 대표님에게 이 숫자들은 꾸밈이 아니라 '이 업체는 감이 아니라 측정으로 일한다'는 증거가 됩니다. 사진은 처음에 어둡게 깔렸다가 스크롤하면 켜지는 리듬으로 배치했습니다.
업종별 빛의 공식과 병원 사례로 두 고객을 한 번에
상업공간 인테리어 홈페이지의 어려운 점은 찾아오는 사람이 제각각이라는 것입니다. 카페 사장님과 병원 원장님은 원하는 것이 다릅니다. 그래서 "업종이 다르면, 빛의 공식도 다릅니다" 섹션에 카페, 병원, 식당, 쇼룸 네 장의 카드를 두고, 어둡던 카드가 마우스를 올리면 켜지면서 업종별 색온도 막대에 위치가 표시되게 했습니다. 방문자는 자기 업종 카드만 켜 보면 됩니다.
| 업종 카드 | 보여 준 빛의 기준 | 풀어 주는 망설임 |
|---|---|---|
| 카페 | 2700K, 150~200lx, 테이블 펜던트 | 예쁘기만 하고 손님이 금방 나가면 어쩌지 |
| 병원 | 3000~4000K, CRI 90+, 무눈부심 | 환자는 편안하고 진료는 정확할 수 있을까 |
| 식당 | 2400~2700K, CRI 95, 접시 집중광 | 음식이 맛있어 보이게 나올까 |
| 쇼룸 | 3000~3500K, 15도 스포트, 트랙 조명 | 제품이 사진보다 못해 보이지 않을까 |
콘셉트 사례는 두 개만 골랐습니다. 하나는 42평 정형외과 의원 리뉴얼로, 형광등 직부등을 걷어내고 진료실은 4000K, 대기실은 3000K로 나눴으며 진료를 멈추지 않도록 야간과 주말에 나눠 공사하는 일정을 적었습니다. 다른 하나는 해가 진 뒤 더 붐비는 28평 카페로, 낮과 저녁과 마감 세 가지 조명 장면을 버튼 하나로 바꾸게 했습니다. 사례 아래에는 "병원 인테리어도 켜인테리어가 합니다"라는 띠와 '병원 상담하기' 버튼을 따로 달아, 병원 인테리어 업체를 찾던 원장님이 바로 문의할 길을 열었습니다.
그 뒤로는 대표 디자이너 섹션과 진행 과정이 이어집니다. 대표 디자이너의 한마디는 "도면을 그리기 전에 밤에 현장에 갑니다"로, 강점을 사람의 말로 한 번 더 확인시킵니다. 진행 과정은 스크롤에 따라 빛의 선이 이어지며 상담, 야간 실측, 조명과 공간 설계, 견적 확정, 시공, 점등 검수까지 여섯 개 점이 차례로 켜집니다. 상업공간 대표님에게 가장 중요한 건 오픈일이라, 바로 아래에 카페 25평과 병원 40평 기준 일정 막대를 탭으로 바꿔 볼 수 있게 했습니다.
휴대폰 화면: 마우스가 없으면 스크롤이 손전등
손전등과 카드 점등은 마우스를 올리는 효과라 휴대폰에서는 그대로 쓸 수 없습니다. 그래서 휴대폰에서는 스크롤에 따라 빛이 대기실의 다섯 지점을 순서대로 옮겨 가고, 업종 카드는 화면 가운데에 들어올 때 저절로 켜지게 바꿨습니다. 효과를 빼는 대신 손가락에 맞는 방식으로 다시 짠 것입니다. 화면 아래에는 '전화'와 '공간 상담 신청' 두 버튼을 고정했습니다.
상담 신청 양식은 업종, 공사 범위(전체, 조명만 리라이팅, 부분 리뉴얼), 오픈 희망 시기를 눌러 고르게 했습니다. 양식 위에는 "자동 답변이 아닙니다. 대표 디자이너가 직접 읽고, 영업일 기준 하루 안에 연락드립니다"라는 문장을 넣었습니다. 견적 문의를 여러 곳에 동시에 넣는 대표님에게, 사람이 직접 읽는다는 약속은 작지만 분명한 차이입니다.
검색 세팅, 그리고 우리 회사에 적용한다면
페이지 제목은 "켜인테리어 — 조명부터 설계하는 상업공간 인테리어 | 서울 용산"으로 업종과 지역을 함께 넣었고, 설명 문구에는 카페, 병원, 식당, 쇼룸을 모두 담았습니다. 실제 제작이라면 한 페이지에 다 몰아넣지 않고 카페 인테리어 홈페이지 페이지와 병원 인테리어 페이지를 따로 만들어, "용산 카페 인테리어", "병원 인테리어 업체" 같은 검색어마다 맞는 입구를 둡니다. 포트폴리오 자체는 가상 업체라 noindex로 검색에서 빼 두었고, 실제 의뢰라면 업체 정보 구조화 데이터와 네이버, 구글 등록, 검색 노출용 칼럼까지 함께 진행합니다.
어두운 사진이 많은 사이트라 속도도 따로 챙겼습니다. 첫 화면 외 사진은 지연 로딩으로 불러오고, 손전등은 무거운 영상이 아닌 가벼운 화면 효과로 만들었습니다. 첫 화면에 사람과 강점을 먼저 세우는 원리는 「병원 홈페이지 제작, 첫 화면에 원장님이 보여야 하는 이유」에서 병원 사례로 다뤘고, 인테리어 업체에 맞춘 구성은 인테리어 홈페이지 제작 페이지에 정리해 두었습니다.
제작은 대표님 인터뷰에서 시작해 강점 한 문장, 섹션 구조, 현장 촬영, 디자인과 효과, 검색 세팅, 오픈 후 숫자 확인 순서로 진행합니다. 비용은 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색 노출용 칼럼 6편, 오픈 후 3개월 유지보수가 포함되고, 이후 유지보수 정기권은 월 110만 원입니다. 다른 업종 사례는 홈페이지 포트폴리오에서, 우리 회사의 강점을 무엇으로 보여 줄지는 무료 상담에서 먼저 이야기 나눠 보셔도 좋습니다.
자주 묻는 질문
상업공간 인테리어 홈페이지 제작 비용은 얼마인가요?
블러썸팩토리는 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색 노출용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.
카페 인테리어와 병원 인테리어를 한 홈페이지에서 함께 보여 줄 수 있나요?
네, 이 사이트처럼 업종별 카드와 업종별 상담 버튼으로 길을 나누고, 실제 제작에서는 업종마다 검색용 페이지를 따로 만들어 각자 찾아오게 합니다.
어두운 디자인이면 휴대폰에서 답답하거나 느리지 않나요?
글자는 웜 크림으로 대비를 확보하고 첫 화면 외 사진은 지연 로딩하며, 휴대폰에서 밝기와 속도를 직접 검수한 뒤 오픈합니다.
병원이 아닌 인테리어 회사도 맡길 수 있나요?
네, 마케팅 대행은 병의원 전문이지만 홈페이지 제작과 유지보수 정기권은 인테리어를 포함해 업종과 상관없이 진행합니다.
완공 사례 사진은 어떻게 촬영하나요?
포트폴리오에는 연출 사진을 썼지만 실제 제작에서는 대표 디자이너님과 완공 현장을 직접 촬영하며, 조명이 강점이면 낮과 밤을 나눠 찍습니다.