TERRACE는 단순한 쇼핑몰이 아니라, 하나의 패션 브랜드처럼 보이게 하는 스킨입니다.

해외 하이엔드 패션 브랜드에서 즐겨 사용하는 에디토리얼 무드를 기반으로, 모노스페이스 타이포그래피와 흑백 중심의 여백 설계를 통해 상품이 아닌 브랜드 자체를 보여줍니다.

SHOP, EDITORIAL, ARCHIVES — 세 개의 메뉴 구조로 구성된 콘텐츠는 방문자가 단순히 쇼핑하는 것을 넘어 브랜드를 경험하도록 설계되었습니다.

메인 화면의 첫 슬라이드부터 상품 상세, 장바구니, 마이페이지까지. 모든 페이지가 동일한 톤과 무드 안에서 호흡하며, 흐트러짐 없는 하나의 아이덴티티를 완성합니다.

또한 디자인 작업과 함께 사용자 입장에서 직접 화면을 사용해 보며 다듬은 결과물입니다. 버튼의 위치, 텍스트의 크기, 페이지 간 흐름까지 — 무엇이 더 편한지, 어떻게 하면 더 자연스러울지 고민하며 만들었습니다.

쇼핑몰의 첫인상을 결정하는 메인 페이지는, 방문자가 가장 먼저 마주하는 화면이자 브랜드의 인상을 좌우하는 중요한 공간입니다.

TERRACE의 메인 페이지는 단순히 상품을 진열하는 화면이 아닙니다. 화면을 가득 채우는 메인 슬라이더로 강한 첫인상을 만들고, 추천 상품과 시즌 룩북, 에디토리얼 콘텐츠가 하나의 흐름 안에서 자연스럽게 이어집니다.

방문자는 페이지를 스크롤하는 동안 단순히 정보를 확인하는 것이 아니라, 브랜드의 시즌과 분위기를 읽어내는 경험을 하게 됩니다.

상단 메뉴 영역은 화면 위에 떠 있는 듯한 플로팅 타입으로 설계되었습니다. 아래 콘텐츠와 자연스럽게 분리되면서도 무드를 해치지 않아, 어떤 비주얼 위에 올라가도 감각적인 인상을 남깁니다.

좌측에는 브랜드 로고, 중앙에는 SHOP / EDITORIAL / ARCHIVES 세 개의 메뉴, 우측에는 ACCOUNT / SEARCH / BAG 등 사용자 도구가 자리합니다. 군더더기 없는 배치와 여백 설계는 일반적인 쇼핑몰의 메뉴와는 다른, 에디토리얼 매거진의 표지 같은 인상을 만들어냅니다.

SHOP 메뉴에 마우스를 올리면 카테고리 트리와 시즌 추천 상품 이미지가 함께 펼쳐지는 풀 메가 메뉴가 열립니다. 좌측의 빠른 진입 링크, 중앙의 카테고리 분류, 우측의 상품 프리뷰 이미지까지 한 번에 보여주어, 방문자가 원하는 카테고리로 빠르게 이동할 수 있도록 돕습니다.

메인 비주얼은 화면 전체를 가득 채우는 풀스크린 슬라이더로 구성되어, 페이지에 진입한 순간 브랜드의 무드가 한눈에 전달됩니다.

슬라이드가 전환될 때는 단순한 이동이나 페이드 효과가 아닌, 이미지가 한 번 블러 처리되었다가 다음 장면으로 자연스럽게 풀려나는 독특한 트랜지션이 적용되었습니다. 장면과 장면 사이에 호흡을 만들어 더 세련되고 힙한 감각을 더했습니다.

좌측 하단에는 해당 슬라이드의 주제를 알리는 안내 라벨과 자세히 보기 버튼이 깔끔하게 배치되어, 이미지의 무드를 해치지 않으면서도 방문자가 자연스럽게 다음 페이지로 이동할 수 있도록 유도합니다.

우측 하단의 좌우 화살표와 하단의 프로그레스 인디케이터를 통해 방문자가 직접 슬라이드를 탐색할 수 있으며, 일정 시간이 지나면 다음 슬라이드로 자연스럽게 전환되어 여러 장면을 한 번의 머무름으로 모두 보여줍니다.

메인 페이지의 상품 영역은 두 가지 성격으로 분리되어 노출됩니다. 하나는 운영자가 직접 선별한 셀렉트 상품, 또 하나는 가장 최근에 입고된 신상품으로, 방문자가 한 페이지 안에서 두 가지 흐름을 자연스럽게 따라가도록 설계되었습니다.

셀렉트 상품 영역(THE ESSENTIAL EDIT)은 가로 스와이퍼 형태로 구성되어, 시즌의 핵심 아이템을 한 줄에 펼쳐 보여줍니다. 상단의 "STAFF PICK" 라벨은 단순한 판매 진열이 아닌, 브랜드가 추천하는 큐레이션이라는 인상을 만들어냅니다.

신상품 영역(THE DROP 2026)은 네 칸의 그리드 형태로, 가장 최근에 도착한 컬렉션을 정돈된 구도로 보여줍니다. 상단의 "NEW" 라벨과 우측의 "VIEW ALL" 링크가 함께 자리해, 방문자가 더 많은 신상품으로 자연스럽게 이동할 수 있도록 유도합니다.

두 영역 모두 타이틀 위에 카테고리 라벨을 함께 노출하는 매거진 형식을 따릅니다. 단순히 상품을 나열하는 것이 아니라, 에디토리얼한 분류로 방문자에게 영역의 성격을 한눈에 전달합니다.

메인 에디토리얼은 상품 진열 사이에 끼어드는, 브랜드의 시선을 그대로 보여주는 콘텐츠 영역입니다. 운영자는 이 공간을 통해 시즌의 무드, 룩북의 한 장면, 컬렉션의 디테일 같은 이야기를 자유롭게 전달할 수 있습니다.

좌우 2단으로 나뉜 영역에 각각 이미지 스와이퍼와 굵은 영문 타이틀이 배치되어, 일반적인 배너와는 다른 매거진의 한 페이지 같은 구도를 만듭니다. 스와이퍼를 통해 한 장의 이미지가 아닌, 하나의 이야기 단위로 여러 장면을 보여줄 수 있습니다.

영역을 클릭하면 페이지를 이동하지 않고 팝업으로 본문이 열립니다. 좌측에는 큰 이미지 스와이퍼, 우측에는 제목과 본문 텍스트가 정돈되어 자리하며, 마치 잡지를 펼쳐 읽는 듯한 경험을 만들어냅니다.

또한 이 영역은 카페24 게시판과 자동으로 연동되어, 새로운 글을 등록하면 메인 페이지에 바로 노출됩니다. 별도의 코드 수정 없이 게시판에서 글과 이미지만 업로드하면 되기 때문에, 시즌이 바뀌거나 콘텐츠를 자주 갱신하는 운영자도 쉽게 관리할 수 있습니다.

단순히 상품을 파는 것이 아니라, 브랜드의 이야기로 방문자를 머물게 하는 영역입니다.

비디오 영역은 한 장의 정지된 이미지로는 담을 수 없는 브랜드의 분위기와 움직임을 전달하기 위해 마련된 공간입니다. 시즌 캠페인 영상, 룩북 비하인드, 브랜드 필름 등 어떤 영상이라도 자유롭게 노출할 수 있으며, 외부 영상 플랫폼과 연동되어 자동으로 재생됩니다. 운영자는 영상 링크만 입력하면 별도의 호스팅 없이 메인 페이지에 바로 노출할 수 있습니다.

마퀴배너는 좌측에서 우측으로 천천히 흘러가는 큰 영문 텍스트로 구성된 영역입니다. 텍스트는 외곽선만 비워둔 아웃라인 스타일로 표현되어 시선을 자연스럽게 끌어당기며, 텍스트 사이사이에는 작은 일러스트와 아이콘이 함께 흘러가 감각적인 리듬감을 더합니다.

이 두 영역은 페이지 안에서 움직임이 살아있는 동적인 요소로, 정지된 이미지와 텍스트 사이에서 자연스럽게 호흡하며 전체 페이지에 리듬감과 생동감을 불어넣습니다.

하단 영역은 크게 두 파트로 구성됩니다. 상단의 퀵 링크 바에는 SNS 채널, 주문 조회, 사업자 정보 링크가 한 줄로 정리되어, 방문자가 필요한 정보에 빠르게 접근할 수 있도록 돕습니다.

노출되는 버튼과 링크는 최소한으로 압축하여 군더더기 없는 미니멀한 무드를 끝까지 유지합니다. 일반적인 쇼핑몰 하단에서 흔히 볼 수 있는 빼곡한 사업자 정보 역시 그대로 노출하지 않고, 팝업 버튼 하나로 처리하여 페이지의 깔끔함을 해치지 않도록 했습니다.

사업자 정보가 열리는 팝업 또한 단순한 텍스트 나열에 그치지 않고, 에디토리얼 무드의 레이아웃과 디자인을 그대로 이어받아 완성도를 높였습니다. 페이지의 첫 줄부터 마지막 팝업까지, 브랜드의 톤이 흐트러짐 없이 이어집니다.

상품 리스트 페이지는 방문자가 원하는 상품을 탐색하는 가장 핵심적인 공간입니다. TERRACE는 이 페이지에서도 에디토리얼 무드를 그대로 유지하면서, 직관적인 탐색 구조와 깔끔한 상품 진열을 동시에 구현했습니다.

카테고리 이동부터 상품 탐색, 추가 로딩까지 — 방문자가 불필요한 동작 없이 자연스럽게 쇼핑에 집중할 수 있도록 설계되었습니다.

상품 카테고리 영역의 가장 큰 키포인트는 타이틀 자체에서 카테고리 접근 경로를 그대로 보여준다는 점입니다. SHOP > TOPS > SWEATSHIRTS처럼 현재 위치까지의 경로가 그대로 노출되어, 방문자는 자신이 어느 분류를 보고 있는지 한눈에 파악하고 상위/하위 카테고리로 즉시 이동할 수 있습니다.

그 아래에는 같은 레벨의 하위 카테고리들이 탭 형태로 정렬되어, 카테고리 간 이동이 매우 직관적이고 쉽습니다. 현재 선택된 탭은 반전 스타일로 강조되어 위치 인지도 또한 명확합니다.

페이지를 스크롤하면 카테고리 탭이 화면 상단에 고정 메뉴로 따라옵니다. 단순히 따라붙는 형태가 아니라 GNB와 자연스럽게 어우러져, 전체 페이지의 무드를 해치지 않으면서 어느 위치에서든 카테고리 이동이 가능하도록 설계되었습니다.

상품 레이아웃의 가장 큰 특징은 리스트 안에서 상품 이미지가 직접 스와이프된다는 점입니다. 일반적인 쇼핑몰처럼 대표 이미지 한 장만 보고 클릭해야 알 수 있는 구조와 달리, 리스트 화면에서 바로 여러 컷의 상품 뷰를 확인할 수 있어 방문자의 탐색 효율이 크게 높아집니다.

리스트의 스와이프 이미지는 상세페이지의 상품 이미지와 자동으로 연동됩니다. 운영자는 상세페이지에 이미지를 등록하기만 하면, 리스트의 스와이프 이미지가 그대로 반영되기 때문에 이미지 관리가 매우 편리합니다. 별도로 리스트용 이미지를 따로 등록하거나 관리할 필요가 없습니다.

또한 이미지를 호출하는 동안 이미지 영역에 로딩 애니메이션이 자연스럽게 노출됩니다. 빈 공간이 그대로 보이는 일반적인 처리와 달리, 부드러운 애니메이션으로 대기 시간을 채워 한층 세련된 디자인 완성도를 만들어냅니다.

페이지 하단에는 일반적인 번호 페이지네이션 대신 LOAD MORE 방식을 채택했습니다. + 아이콘과 함께 표시되는 버튼을 클릭하면 다음 상품이 현재 목록 아래로 이어져 로드되어, 방문자가 페이지를 이동하지 않고 끊김 없이 탐색을 이어갈 수 있습니다.

버튼 옆의 페이지 진행률 표시(1/2)를 통해 전체 상품 대비 현재 위치를 직관적으로 확인할 수 있으며, 로딩 중에는 LOADING.... 애니메이션으로 자연스럽게 대기 상태를 안내합니다.

상품 상세페이지는 방문자가 가장 오래 머무르고, 가장 많은 정보를 확인하는 공간입니다. TERRACE는 이 페이지에서 기존에 없던 독특한 레이아웃을 적용하여 사용자 경험을 한층 끌어올렸습니다.

상품 이미지는 단순히 넘겨지는 것이 아니라 큐레이팅하듯 자연스럽게 흐르며 방문자에게 한 컷씩 펼쳐지고, 상품 정보는 영역 끝까지 시원하게 배열되어 한눈에 모든 내용이 들어오도록 구성되었습니다. 사이즈 선택부터 구매, 사이즈 가이드, 리뷰 확인까지 모든 동작이 페이지 이탈 없이 한 화면 안에서 자연스럽게 이어지도록 설계되었습니다.

상품 상세페이지의 가장 큰 특징은 좌측에 상품 정보, 우측에 큰 사이즈의 상품 이미지가 자리하는 2단 레이아웃입니다. 일반적인 쇼핑몰처럼 작은 썸네일을 클릭해 큰 이미지를 보는 방식이 아니라, 처음부터 풀 사이즈의 이미지가 한 컷씩 단일 컬럼으로 펼쳐지도록 설계되었습니다.

이미지가 한 장씩 크게 노출되기 때문에, 운영자는 각 이미지가 가진 분위기와 디테일을 그대로 전달할 수 있습니다. 이미지가 큐레이팅하듯 자연스럽게 흐르며, 상품의 컨셉과 무드가 흐트러짐 없이 전달됩니다. 또한 이미지를 클릭하면 화면을 가득 채우는 팝업으로 확대되어, 디테일을 가장 큰 화면에서 자세히 확인할 수 있는 기능까지 더해졌습니다.

좌측 상품 정보 영역은 한 번에 모든 정보가 시야에 들어오도록 잘 정돈된 구조로 설계되었습니다. 또한 이 정보 영역은 방문자가 상세페이지를 스크롤하며 상품을 읽어 내려가는 동안 화면에 계속 고정되어 따라옵니다. 어느 위치에서든 상품의 핵심 정보를 끊김 없이 확인할 수 있도록 디자인되었습니다.

주문 영역의 가장 핵심적인 UX는 스크롤 고정 동작입니다. 우측 이미지를 아래로 스크롤하더라도, 좌측의 상품 정보와 CART / BUY 버튼은 화면에 그대로 따라오며 항상 구매 가능한 상태를 유지합니다. 긴 상세페이지에서 흔히 겪는 "구매하려고 다시 위로 올라가야 하는" 불편함을 완전히 제거했습니다.

TERRACE의 상세페이지가 더욱 특별한 이유는 여기에 있습니다. 구매 버튼이 끊임없이 따라다니면서도, 그 자리에서 사이즈 옵션까지 바로 선택할 수 있고, 선택된 옵션은 화면에 계속 표기되어 방문자가 자신의 선택 상태를 언제든 확인할 수 있습니다. 쇼핑 과정의 혼선을 최소화하고 한층 편리한 경험을 제공하면서도, 에디토리얼한 무드는 끝까지 흐트러지지 않습니다.

무엇보다 TERRACE의 상세페이지는 모바일 중심으로도 정교하게 설계되어 있습니다. 화면 하단의 고정바에는 현재 선택된 옵션이 항상 명확하게 표기되어 방문자에게 자신의 선택을 끊임없이 어필하고, 옆의 옵션 변경 버튼을 통해 언제든 한 번의 터치로 사이즈를 다시 고를 수 있습니다.

선택한 옵션이 사라지지 않고 계속 노출되며, 그 자리에서 즉시 변경까지 가능한 이 흐름은 국내 일반 쇼핑몰에서는 쉽게 경험하기 어려운 사용자 경험입니다. 모바일에서 쇼핑하는 방문자에게 가장 최적화된 형태로, 작은 화면 안에서도 답답함 없이 자신의 선택을 컨트롤할 수 있도록 설계되었습니다.

리뷰는 구매를 결정짓는 가장 중요한 영역입니다. 대부분의 쇼핑몰이 월 비용을 들여 유료 솔루션을 도입하는 이유도 여기에 있습니다.

TERRACE는 고정 비용이 발생하지 않도록하면서도 완전히 새로운 리뷰의 레이아웃을 설계하였습니다. 새롭지만 심미적으로 더 우수하고 경험적으로도 더 완성도 높은 디자인을 완성하였습니다. 익숙한 솔루션의 모양을 빌리지 않고, 통계와 갤러리, 팝업 흐름까지 하나의 톤으로 새롭게 설계한 — 어디에서도 보기 어려운 결의 리뷰 영역입니다.

모바일에서도 같은 무드가 자연스럽게 이어져, 작은 화면에서도 완성도는 그대로 유지됩니다.

TERRACE의 모든 페이지는 브랜드의 무드에 맞춰 일관되게 설계되었으며, 사용자 경험을 가장 중심에 두고 깊이 고심하여 제작되었습니다. 메인이나 상품 페이지뿐만 아니라 세세한 서브 페이지부터 레이어 팝업까지, 어느 화면에서도 흐트러짐 없이 같은 톤으로 다듬어졌습니다.

검색은 헤더에서 펼쳐지는 검색 팝업과 검색 결과 페이지 두 단계로 구성됩니다. 팝업 안에는 TRENDING NOW · RECENT · SEARCH가 정돈되어, 키워드를 직접 입력하지 않아도 한 번의 클릭으로 탐색이 이어집니다.

검색 결과 페이지에서도 검색창과 키워드 영역이 상단에 그대로 노출되어, 원하는 결과를 얻지 못했을 때 이탈 없이 다른 키워드로 자연스럽게 이어갈 수 있습니다.

TERRACE는 방문자의 쾌적한 쇼핑 경험을 위해 마이페이지를 비롯한 회원 영역까지 모두 리디자인했습니다. 일반적으로 신경 쓰지 않고 넘기기 쉬운 영역이지만, 이곳까지 사소한 디테일 하나하나를 다듬어 브랜드의 톤을 유지하도록 설계되었습니다.

쇼핑 페이지에서 회원 페이지로 이동해도 흐트러짐 없이 같은 무드가 이어지며, 이런 일관성은 곧 브랜드의 아이덴티티가 그만큼 단단하게 자리 잡혀 있다는 인상을 만들어냅니다.