
MADclimb
균사체 소재를 클라이밍 홀드로 구체화한 파일럿. 소재의 특성을 실제 사용 장면과 함께 보여줍니다.
균사체라는 낯선 소재를 어떻게 이해시키고, 실제 제품으로 탐색하게 할까. MAD의 브랜드 소개부터 세 가지 파일럿, 커머스와 운영 화면까지 하나의 흐름으로 설계하고 구현했습니다.
MAD®MYCELIUM / MATERIAL STUDYMAD가 다루는 균사체 소재는 방문자에게 익숙하지 않습니다. 소재의 가치만 이야기하면 그것이 어디에 쓰이고 무엇을 선택할 수 있는지 알기 어렵습니다.
그래서 브랜드를 소개하는 첫 화면, 소재를 구체화하는 파일럿 제품, 구매를 검토할 수 있는 Shop, 이후의 운영 화면까지 이어지는 구조를 잡았습니다. 각각의 화면을 별개로 만들기보다 방문자의 이해가 다음 행동으로 연결되도록 했습니다.
브랜드 웹은 텍스처와 제품 이미지가 설명의 출발점입니다.
균사체의 실제 표면과 제작 결과물을 크게 배치하고, 짧은 문구로 시선을 다음 섹션으로 옮겼습니다. 초록색 친환경 이미지에 기대기보다 MAD의 선명한 파란색과 실험적인 소재감을 중심에 두었습니다.

파일럿을 용도별로 나누어 소재가 실제 제품과 공간으로 확장되는 모습을 보여줬습니다.

균사체 소재를 클라이밍 홀드로 구체화한 파일럿. 소재의 특성을 실제 사용 장면과 함께 보여줍니다.

인테리어와 공간에 적용할 수 있는 패널. 제품 하나를 넘어 소재의 활용 범위를 설명합니다.

형태와 목적에 맞춘 오브젝트. 브랜드와 디자이너가 소재를 어떻게 사용할 수 있을지 상상하게 합니다.
브랜드를 이해하고 제품을 본 사람이 다음 행동을 선택할 수 있도록 상품 탐색과 운영 흐름을 만들었습니다.
상품 목록·상세, 위시리스트, 장바구니, 결제 진입을 구현하고 상품과 주문 상태를 확인하는 관리자 화면을 구성했습니다. 장바구니의 선택 상태는 재방문에도 유지되도록 했습니다. 브랜드 화면과 내부 운영 도구가 같은 상품 정보를 기준으로 움직이도록 한 것이 핵심입니다.
소재의 실물 이미지와 짧은 메시지로 첫인상을 설계
세 파일럿을 용도별로 분리해 적용 가능성을 제시
상품·옵션·관심 상품·장바구니의 구매 흐름 구성
상품 정보와 주문 상태를 다루는 관리자 구조 마련
공개 사이트의 Shop은 다음 드롭을 안내합니다. 이 페이지의 커머스·관리자 설명은 저장소에서 확인한 구현 범위이며, 실제 판매 성과를 뜻하지 않습니다.
이 프로젝트에서 맡은 일은 화면의 마지막 단계를 구현하는 데 그치지 않았습니다. 브랜드 메시지를 방문자의 이해 순서로 바꾸고, 파일럿을 제품군으로 정리하고, 구매와 관리에 필요한 구조를 연결했습니다.
공개된 브랜드 웹과 구현된 제품 구조를 구분해 보여주면서, 기획부터 설계·개발까지 이어진 제 역할을 설명할 수 있는 작업입니다.
MAD 공식 사이트 보기 ↗