퓌 상세페이지는 왜 '달라' 보일까

핵심 요약

퓌(fwee)가 2024년 1월 리브랜딩 이후 상세페이지에서 쓰는 비주얼 문법을 리브랜딩 전후 9개 제품으로 대조했습니다. 첫째, 톤온톤을 유지하면서 그 위에 훨씬 볼드한 색을 얹습니다. 배경색과 그 위 가장 진한 색의 밝기 차이가 리브랜딩 전보다 두 배 넘게 벌어졌습니다. 둘째, 컬러를 낱개 호수로 나열하지 않고 Cool Moment·Just me Moment 같은 무드 단위 카테고리를 먼저 보여줍니다. 셋째, 이렇게 만든 하이패션 프리미엄 문법 위에 하트 배지·머랭·둥근 제품 같은 캔디 팝 요소를 얹습니다. 두 무드가 섞이지 않고 각자 극단에 있어서, 귀엽지만 유치해 보이지 않는 인상이 만들어집니다.

본문

1편에서는 퓌 리브랜딩 전후의 영문 타이포그래피를 봤습니다. 리브랜딩 후 퓌의 글자는 더 길고 선명해졌고, 상세페이지 안에서 제품과 색을 고르는 무드를 만드는 장치가 되었죠.

그런데 퓌의 상세페이지를 보면, 글자만으로는 설명되지 않는 게 더 있는데요.

제품 정보가 있고 컬러 차트가 있고 사용법도 있는데, 여타 상세페이지와 달리 전체 인상이 어딘가 프리미엄 합니다. 리브랜딩 후 퓌의 상세페이지는 색조 브랜드 특유의 통통 튀는 귀여움을 유지하면서도 유치해보이거나 흔해보이지 않죠.

이번 편에서는 그 이유를, 전체적인 비주얼 요소에서 찾아보려 합니다.

무조건 톤온톤이 아닌 적절한 대비감

무조건 톤온톤이 아닌 적절한 대비감

리브랜딩 전 퓌의 상세페이지는 모든 요소가 톤온톤으로 편안합니다.

2023년 블러셔 멜로우 상세페이지를 보면, 배경, 꽃 장식, 발색 컷, 제품 컬러가 한 화면 안에 비슷비슷한 색채로 구성되죠. 배경 위에 요소가 또렷하기보다, 전체 화면이 하나의 무드를 만들며 스며드는 느낌입니다.

이 방식은 심리적 안정감을 주며, 시각적으로도 편안해보이죠. 하지만 화면 안에서 인상 자체는 흐려질 수 있습니다. 리브랜딩 후 퓌는 바로 이 지점을 바꾸는데요.

여전히 파스텔, 크림, 연핑크, 하늘색 같은 밝고 부드러운 색을 적재적소에 톤온톤으로 사용하지만, 그 위에 훨씬 볼드한 색을 얹습니다.

리브랜딩 전후 상세페이지의 배경색과 그 위에 얹힌 가장 진한 색의 밝기 차이를 직접 재봤는데요. 립앤치크 푸딩팟, 3D 체인징 글로스, 3D 볼류밍 글로스는 그 차이가 리브랜딩 전보다 두 배 넘게 벌어져 있습니다. 수치로도 컬러의 대비감이 증명되는 것이죠.

대비감은 화면 안의 요소들을 강조합니다. 이를 통해 퓌는 사랑스러움을 유지하되, 더 선명하고 더 존재감있는 무드를 구축합니다.

컬러를 무드 단위로 먼저 각인시키기

컬러를 무드 단위로 먼저 각인시키기

색조 상세페이지에서 컬러칩과 발색컷이 같이 나오는 건 특별한 일이 아닙니다. 퓌는 여기서 이 요소들을 묶어 보여주는데 그치는 것이 아니라, 색을 보여주는 순서를 바꾸었는데요.

리브랜딩 전 퓌의 화면은 모델 룩, 제품 사진, 설명 문구, 발색 컷이 차례대로 나열됩니다다. 먼저 발색컷을 보여주고, 그 다음 어떤 제품을 썼는지와 어떤 효과가 있는지를 따라가게 만드는 구조죠.

반면 리브랜딩 후 퓌는 컬러를 낱개의 호수로 바로 나열하기보다, 한 단계 높은 카테고리를 만들어 나의 '추구미' 무드를 고르게 만듭니다. Cool Moment, Just me Moment, Blushed Moment처럼 먼저 컬러셋을 고르고, 그 다음 발색컷과 얼굴 클로즈업, 제형 이미지를 보며 특정 컬러를 고르도록 안내하죠.

그러면 고객이 제품을 이해하는 방식이 달라지는데요. "난 21호인데, 어떤 색이 어울리지?"보다 먼저 "나는 어떤 무드의 색이 어울릴까?"를 보게 됩니다. 컬러칩과 발색컷은 여전히 한 색상의 제품 정보를 보여주지만, 이 위계 안에서는 하나의 무드 안에 속한 샘플처럼 작동합니다.

다만 이렇게 위계만 세우면 화면이 너무 정돈되거나 똑 떨어져보여 거리감이 느껴질 수 있습니다. 퓌가 흥미로운 건 그 위에 키치한 요소들을 다시 얹는다는 거죠.

하이패션 프리미엄 × 캔디 팝

하이패션 프리미엄 × 캔디 팝

리브랜딩 후 퓌 상세페이지에는 서로 다른 두 무드가 중첩되며 시너지를 만들어내는데요.

하나는 차갑고 또렷한 하이패션 프리미엄 무드입니다. 큰 영문 타이틀로 무드의 이름을 먼저 세우고, 발색컷과 제형컷을 반복되는 지면 규칙 안에 넣는 방식입니다. 여기에 1편에서 본 길고 선명한 영문 타이포가 더해지면서 화면은 패션 매거진 타이틀이나 뷰티 캠페인처럼 보입니다.

다른 하나는 사랑스럽고 귀여운 색조 브랜드의 무드입니다. 크림색 배경, 하늘색 배경, 연핑크 배경, 하트 모양 배지, 조약돌처럼 둥근 제품, 머랭과 쿠키, 아이스캔디 같은 오브제가 등장합니다.

따로 보면 특별할 게 없는 이 귀여운 요소들을, 퓌는 하이패션 프리미엄 문법에 더함으로써 특별하게 만듭니다.
그래서 특유의 소녀스러운 무드는 유치하게 전달되지 않고, 반대로 프리미엄 무드가 너무 거리감있게 보이지도 않습니다.

이 조합을 한 문장으로 부르면 하이패션 프리미엄 × 캔디 팝인데요, 하이패션 프리미엄 형식은 계속적으로 유지하면서, 캔디 팝 무드에선 다양한 키치 오브제들로 제품의 개성을 더합니다. 바닐라 에디션에서는 크림색과 머랭, 톤업 베이스에서는 스파 타일과 물방울 같은 오브제들이 그것이죠.

그래서 퓌의 상세페이지는 제품마다 새롭지만, 또 같은 브랜드의 일관성을 유지합니다.

내 브랜드에 적용한다면

내 브랜드에 적용한다면

따라서 지금까지 분석한 퓌의 디자인 무드에서 중요한 건, 일관성과 새로움의 문법을 각자 세우는 일입니다.

사랑스럽고 트랜디한 무드를 만들 때 종종 화면 전체를 한 무드로 채우곤 합니다. 배경도, 글자도, 오브제도, 제품 설명도 같은 결로 고수합니다. 처음엔 트랜디해보이지만 해당 트랜드가 소모될수록, 제품이 늘어날수록 고객들은 쉽게 질려버립니다.

반대로 고급스럽게 보이고 싶어서 모든 것을 절제하는 경우도 있습니다. 색을 줄이고, 소품을 빼고, 차분한 이미지를 남기는데 집착하죠. 그러면 고급스럽고 깔끔한 이미지를 남기지만, 트랜디하지도 기억에 남지도 않습니다.

그래서 퓌는 제품마다 반복되는 '시간을 타지 않는' 화면의 규칙을 세우고, 그 위에 트랜디한 요소를 배치합니다. 둘 중 하나를 고르는 우를 범하지 않고요.

제품마다 컬러, 소품, 배지는 바뀔 수 있습니다. 하지만 발색 컷을 배열하는 방식, 색의 대비, 브랜드가 반복해서 보여줄 무드의 온도는 쉽게 흔들리면 안 됩니다.

퓌처럼 브랜드의 무드를 일관적으로 보여줄 수 있는 상세페이지를 제작하고 싶으신가요? 저희 뷰티해커스 카카오톡 채널로 언제든지 연락 주세요.

Q&A 요약
퓌 상세페이지가 다른 색조 브랜드와 다르게 보이는 이유는 무엇인가요?

서로 다른 두 무드를 한 화면에 겹쳐 쓰기 때문입니다. 큰 영문 타이틀과 반복되는 지면 규칙이 만드는 하이패션 프리미엄 무드가 한 축이고, 하트 배지·머랭·쿠키·둥근 제품 같은 사랑스러운 오브제가 다른 축입니다. 귀여운 요소만 놓고 보면 특별하지 않지만, 프리미엄 문법 위에 얹히면서 유치해 보이지 않게 됩니다.

리브랜딩 전후로 컬러 사용이 어떻게 달라졌나요?

리브랜딩 전에는 배경·장식·발색 컷·제품 컬러가 비슷한 밝기 안에 놓이는 톤온톤이었습니다. 이후에도 파스텔은 그대로 쓰지만 그 위에 훨씬 진한 색을 얹습니다. 배경색과 그 위 가장 진한 색의 밝기 차이를 재보면 립앤치크 푸딩팟, 3D 체인징 글로스, 3D 볼류밍 글로스에서 리브랜딩 전보다 두 배 넘게 벌어져 있습니다.

"컬러를 무드 단위로 보여준다"는 게 무슨 뜻인가요?

색을 낱개 호수로 바로 나열하지 않고 한 단계 위의 카테고리를 먼저 세운다는 뜻입니다. Cool Moment, Just me Moment, Blushed Moment처럼 무드를 먼저 고르게 하고, 그다음 발색 컷과 얼굴 클로즈업, 제형 이미지를 보며 개별 컬러를 고르게 합니다. 고객이 "몇 호가 어울릴까"보다 "어떤 무드가 어울릴까"를 먼저 보게 됩니다.

하이패션 프리미엄 × 캔디 팝은 어떤 조합인가요?

시간을 타지 않는 형식과 지금 유행하는 요소를 한 화면에서 나눠 맡기는 방식입니다. 큰 영문 타이틀과 반복되는 지면 규칙은 제품이 바뀌어도 유지되고, 컬러·소품·배지는 제품마다 통째로 바뀝니다. 바닐라 에디션에서는 크림색과 머랭이, 톤업 베이스에서는 스파 타일과 물방울이 들어옵니다.

우리 브랜드 상세페이지에는 어떻게 적용할 수 있나요?

바뀌어도 되는 것과 바뀌면 안 되는 것을 먼저 갈라두시길 권합니다. 컬러·소품·배지는 제품마다 바꿔도 되지만, 발색 컷을 배열하는 방식과 색의 대비, 브랜드가 반복해 보여줄 무드의 온도는 고정해두는 편이 좋습니다. 화면 전체를 한 무드로 채우면 트렌드가 지날 때 함께 낡고, 반대로 전부 절제하면 기억에 남지 않습니다. 어떤 기준을 세울지 판단이 어려우시면 상담을 통해 함께 정리해 드릴 수 있습니다.