Case study
Web Design · LOUNGE · 2026
1998년부터 소파를 만들어온 브랜드에게 필요한 것은 새 홈페이지가 아니라, 축적된 시간이 읽히는 화면이었습니다. Framer CMS 위에 상품 구조를 먼저 세우고 인터랙션으로 촉감을 대신하게 한 뒤, 브랜드의 이야기와 구매 동선을 하나의 흐름으로 이었습니다.
사이트 이동하기Role
Key insights
오픈 시점의 상품은 다섯 종이었습니다. 그 정도 규모라면 페이지를 한 장씩 그려도 무리가 없습니다. 그러나 컬렉션은 늘어나기 마련이고, 상품 하나가 추가될 때마다 디자이너를 호출해야 하는 사이트는 반년 뒤 반드시 멈춥니다. 그래서 Framer CMS에 상품 컬렉션을 먼저 정의했습니다. 명칭, 가격, 소재, 치수, 컬러 옵션, 상세 이미지를 필드로 분해하고 상세 페이지를 단일 템플릿에 연결했습니다. 지금은 담당자가 항목 하나를 등록하면 목록과 필터, 상세 페이지, 메타 태그가 동시에 생성됩니다. 디자인의 결과물이 화면이 아니라 규칙이 되는 순간, 사이트의 수명은 제작자의 손을 떠나 브랜드에게 넘어갑니다.
가구는 몸으로 검증하고 구매하는 물건입니다. 매장에서라면 앉아보고 손끝으로 마감을 확인했을 판단을, 온라인에서는 화면이 대신해야 합니다. 스크롤에 따라 소파가 각도를 바꾸며 실루엣을 드러내는 시퀀스, 가죽과 패브릭 표면에 커서를 올리면 직조가 확대되는 호버, 모듈 배치를 직접 바꿔보는 컨트롤. 세 가지 모두 '보기 좋아서'가 아니라 '만져보지 못한 것을 대신 알려주기 위해' 넣었습니다. 동시에 걷어낸 것이 더 많습니다. 모션은 늘어날수록 페이지를 무겁게 만들고 구매 흐름을 끊습니다. 이 움직임이 제품 이해에 기여하는가. 그 질문을 통과하지 못한 것은 전부 정적인 화면으로 되돌렸습니다.
1998년부터 소파를 만들어온 회사였지만, 그 시간은 웹사이트 어디에도 드러나 있지 않았습니다. 오래된 브랜드가 온라인에서 신생 브랜드처럼 보이는 일은 생각보다 흔합니다. 제작 방식, 소재를 고르는 기준, 십 년이 지나도 뒤틀리지 않는 오크 프레임에 관한 이야기를 앞으로 끌어냈습니다. 다만 별도의 브랜드 소개 페이지로 분리하지 않았습니다. 소재를 설명한 문단 바로 다음에 그 소재를 쓴 제품이 놓이고, 읽던 자리에서 곧장 상세로 넘어갑니다. 브랜딩과 판매를 다른 일로 보면 방문자는 감탄한 뒤 그냥 떠납니다. 프리미엄 가격에 설득력을 부여하는 것은 결국 그 가격을 만들어낸 시간입니다.
Framer로 만들면 검색에 걸리지 않는다는 말을 자주 듣습니다. 실제로는 도구의 한계가 아니라 설정을 하지 않은 결과인 경우가 대부분입니다. 컬렉션마다 슬러그 규칙을 정하고, 상품별 메타 타이틀과 디스크립션, OG 이미지를 별도 필드로 분리해 담당자가 직접 관리하도록 했습니다. 이미지 대체 텍스트에는 제품명과 소재가 들어가게 했고, 제목 위계와 구조화 데이터를 정리했습니다. 이 구조에서는 상품이 늘어날 때마다 검색 유입 경로가 함께 늘어납니다. 노코드로 만든 쇼핑몰이 시간이 지날수록 강해지는 이유입니다.
가장 자주 방치되는 사이트는 잘못 만든 사이트가 아니라, 고칠 수 없어서 아무도 손대지 않는 사이트입니다. CMS 필드의 이름을 개발 용어가 아닌 실무 담당자의 언어로 붙였습니다. 상품 등록과 이미지 교체, 컬렉션 순서 변경을 담당자가 직접 수행하는 과정을 끝까지 함께 확인했습니다. 촬영 시 배경과 비율 기준, 메타 디스크립션 작성 방식까지 문서로 남겼습니다. 좋은 결과물 하나보다, 그 결과물을 다시 만들어낼 수 있는 규칙이 오래 남습니다.
Reflection
클라이언트가 처음 건넨 요구는 '고급스러운 느낌'이었습니다. 가장 흔하게 듣는 말이면서, 그대로 받아 적으면 아무것도 결정할 수 없는 말이기도 합니다.
그래서 형용사 대신 장면을 물었습니다. 어떤 순간에 그 감정을 느끼셨습니까. 돌아온 답은 늦은 저녁, 간접조명 아래 소파에 몸을 묻었을 때의 공기였습니다. 이후 모든 판단은 그 장면 하나를 기준으로 이루어졌습니다. 조명의 색온도를 몇 켈빈에 둘 것인지, 그림자를 어느 각도까지 허용할 것인지, 카피를 두 줄에서 한 줄로 줄일 것인지.
감각을 수치로 옮기고 나면 취향의 문제였던 것들이 검증 가능한 판단이 됩니다.
선택지는 세 가지였습니다. 기성 쇼핑몰 솔루션은 빠르지만 브랜드가 템플릿의 문법에 갇힙니다. 풀스크래치 개발은 자유롭지만 이 규모에서는 비용과 기간이 과합니다.
Framer를 택한 이유는 디자인 자유도와 운영 편의를 동시에 확보할 수 있는 유일한 지점이었기 때문입니다. 특히 인터랙션을 별도 개발 없이 디자인 단계에서 곧바로 붙이고 수정할 수 있다는 점이 결정적이었습니다. 정지된 시안을 놓고 상상하며 논의하는 대신, 실제로 움직이는 화면을 함께 보면서 조율할 수 있었습니다.
쇼핑몰의 진짜 비용은 오픈이 아니라 그 이후에 발생합니다. 만든 사람이 떠난 뒤에도 굴러가는가. 이 질문이 완성도보다 앞섭니다.
Cozy
Project Lead
작업의 대부분은 더하는 일이 아니라 고르는 일이었습니다. 구현할 수 있었던 인터랙션은 최종안의 몇 배였고, 실제로 남긴 것은 제품 이해에 기여하는 세 가지뿐입니다.
여백에서도 같은 판단을 반복했습니다. 정보를 빽빽하게 채울수록 화면은 저렴해 보입니다. 섹션 간격을 넓히고 한 화면에 하나의 메시지만 남기자, 동일한 제품이 더 높은 가격대의 물건으로 읽히기 시작했습니다. 프리미엄이라는 인상은 장식이 아니라 절제에서 만들어집니다.
납품 이후에도 브랜드가 같은 톤을 유지할 수 있도록 촬영 기준과 컬러 값, CMS 입력 규칙을 문서로 정리해 넘겼습니다. 상품 이미지의 배경과 비율, 메타 디스크립션을 쓰는 방식까지 포함했습니다. 다음 담당자가 들어와도 화면이 흐트러지지 않게 하기 위해서입니다.
가구는 끝내 몸으로 겪어야 하는 물건이고, 화면이 할 수 있는 일은 그 경험을 앞당겨 상상하게 만드는 데까지입니다. 한계를 인정하고 나니 목표가 오히려 분명해졌습니다. 설득하려 애쓰는 대신, 앉아보고 싶게 만드는 것.
