더 페트리셔는 자연이 회복하는 순간의 감각을 스킨케어 루틴으로 풀어내는 브랜드이기 때문에, 단순 제품 진열형 쇼핑몰보다 브랜드 철학과 감정적 경험이 먼저 전달되는 구조가 필요했습니다. 메인에서 브랜드의 분위기를 충분히 경험한 뒤 제품군과 컬렉션을 탐색하고 실제 구매로 이어지도록 전체 사용자 흐름을 설계했습니다.

웹사이트 기획과 디자인만 분리해서 진행하지 않고 이미지 제작, 촬영, 상세페이지, 상품 세팅과 구매 환경까지 함께 고려했습니다. 결과적으로 브랜드 콘텐츠와 커머스 운영이 서로 다른 결과물이 아니라 하나의 시스템 안에서 같은 인상으로 작동하도록 정리했습니다.

아임웹은 콘텐츠와 상품을 운영하는 기반으로 활용하고, 브랜드가 실제로 보이는 주요 화면은 커스텀 코드 중심으로 재구성했습니다. 타이포그래피, 이미지의 크기와 호흡, 컬렉션의 순서와 제품 카드의 연결을 하나의 디자인 시스템으로 맞춰 기존 빌더의 인상을 최소화했습니다.

메인과 브랜드 소개, 제품 컬렉션이 서로 다른 페이지처럼 느껴지지 않도록 공통된 그리드와 화면 리듬을 적용하고 데스크톱과 모바일에서도 브랜드의 감각과 정보 우선순위가 유지되도록 반응형으로 구현했습니다.

브랜드 사이트의 완성도는 화면 레이아웃뿐 아니라 실제 사용되는 이미지의 톤에서 결정되기 때문에 제품과 브랜드 무드를 기준으로 웹용 비주얼을 직접 제작하고 촬영 방향을 설계했습니다. 메인 비주얼, 컬렉션 이미지와 제품 콘텐츠가 동일한 감도로 이어지도록 결과물을 정리했습니다.

제품별 상세페이지도 별도의 판매 제작물로 보지 않고 브랜드 사이트의 연장선으로 디자인했습니다. 제품의 사용감, 루틴과 핵심 정보가 읽기 쉬운 순서로 보이도록 구성한 뒤 실제 상품 페이지에 세팅해 구매 영역과 연결했습니다.

신규 고객의 첫 구매만을 목표로 하지 않고 실제 사용 후기를 확인하고 이벤트 혜택을 발견하며 회원으로 다시 방문하는 흐름도 사이트 경험의 일부로 기획했습니다. 리뷰와 이벤트, 멤버십은 각각 다른 기능이지만 제품 신뢰와 구매 이유를 보완하는 하나의 고객 접점으로 정리했습니다.

브랜드 비주얼을 해치지 않으면서도 운영자가 지속적으로 혜택과 콘텐츠를 업데이트할 수 있도록 아임웹의 운영 기능과 커스텀 화면을 함께 사용해 관리 가능한 구조로 세팅했습니다.

제품 상세 디자인을 제작하는 데서 끝내지 않고 실제 상품 정보와 페이지를 세팅하고 고객이 제품을 선택해 구매 단계로 이동할 수 있도록 커머스 기능을 연결했습니다. 브랜드 콘텐츠, 후기와 이벤트가 모두 최종 구매 행동으로 이어지는 구조를 기준으로 화면과 운영 요소를 점검했습니다.

아임웹의 관리 편의성과 커스텀 코드의 표현력을 분리해 향후 제품과 캠페인이 추가되어도 기존 브랜드 경험을 유지하며 확장할 수 있도록 구축했습니다. 기획, 비주얼 제작, 촬영, 웹 구현, 상세페이지와 판매 세팅까지 전 과정을 하나의 프로젝트로 연결한 것이 핵심입니다.