brunch

You can make anything
by writing

C.S.Lewis

by PP Aug 08. 2022

간단하게 쇼핑몰 홈페이지 제작하기 (EP.8)

심플하지만 감각적인 디자인

2022년 08월 08일 월요일 by MNPP



브랜드의 첫인상은

3초 안에 결정된다.



웹사이트 제작은 간단해 보이지만, 막상 시도해보면 고민할 거리가 많아요.


결론부터 말하자면 간단하게 만드는 방법을 찾았어요. 퍼즈플리즈 웹사이트 리뉴얼을 위해 그동안 고민했던 몇 가지 이야기를 풀어보려고 해요.



마음을 사로잡는

강력한 이미지

보자마자 웃음과 감탄이 나오는 첫인상의 귀재 자이언티 입니다. 일단 보면 채널을 돌리기 쉽지 않죠.


역시 첫 이미지가 중요한 것 같아요. 우리 브랜드에 대해 잘 모르는 고객을 사로잡지 못한다면 브랜드는 순환하기 어렵다고 생각하거든요.


우리가 노래를 들을 때도 처음 3초 안에 느낌이 딱 오잖아요? 신규 고객은 대부분 광고를 통해서 유입이 되기 때문에, 클릭하고 3초 안에 느낌이 안 온다면 바로 뒤로가기 입니다..


원래는 아래에서 위로 올리지만 설명을 하다 보니 어렵네요.


빠르게 고객의 마음을 사로잡기 위해서는 고객관점에서 접근해야 답이 있다고 생각해요. 잘 생각해보면요, 대부분의 25-34 여성고객은 인스타그램을 보며 아래에서 위로 스와이프 하는 경험을 가지고 있어요.


그런데 갑자기 가로로 콘텐츠를 제안하거나, 메인에는 아무것도 없고 특정 메뉴를 누르게 강요한다거나, 무언가 특이한 레이아웃을 가지고 있다면 고객은 어지럽다고 생각할거에요. 정답은 없지만 역시 쉬운 게 좋아요.



업계 1등만

비교해보기

막상 이미지를 가려놓고 보면 이게 1등 브랜드 인가 싶을 정도로 별 디자인이 없어 보여요.


이 1등 웹사이트들의 공통점은 바로 메인 랜딩페이지의 콘텐츠를 '피드' 형식으로 제공한다는 거예요. 29CM의 경우는 편집샵이기 때문에 '왜' 제안하는지를 재치 있는 카피를 통해 큰 글씨와 함께 전달하고 있어요.


나이키의 경우, 여기가 쇼핑몰인가 싶을 정도로 헷갈려요. 뭔가.. 판매보다는 브랜딩에 중점을 두고 심플하게 구성하고 있습니다. 어차피 구매는 여기서 무조건 일어나니까 브랜딩을 강화하자가 컨셉인것 같아요. 확실하진 않지만요.


애플 역시 메인 페이지의 텍스트가 굉장히 적어요. 하고 싶은 말이 참 많을 텐데 메인 페이지에서는 최대한 말을 아끼고 있네요. 하나같이 짠것처럼 이미지 + 짧은 텍스트 조합의 콘텐츠로 마치 인스타그램 피드와 같이 반복되는 콘텐츠 방식을 채택하고 있어요. 뜬금없지만 당근마켓의 MAU(월간 사용자수)를 보면 메인 페이지의 피드 방식은 정답이 아닐까 생각됩니다.


잘 살펴보면, 최고의 브랜드들은 강력한 이미지와 최소한의 텍스트로 소통하는 공통점을 가지고 있어요.


다음은 매치스패션입니다. 정말 방대한 제품을 가지고 있음에도 불구하고, 피드 형태의 레이아웃에 최소한의 글자와 강력한 이미지를 통해 제품을 보여주고 있죠.


매치스패션의 웹사이트는 사실 많은 인사이트가 집약된 하나의 작품이 아닐까 싶을 정도로 보면 볼수록 대단하다는 생각이 듭니다. 특별한 배경색이 있는 것도 아니고, 텍스트 컬러도 무심한 블랙에, 정말 특색 없는 폰트. 그런데 이렇게 멋지다니. 신기하죠? 나이키보다 심플하게 만들었는데 그 효과는 정말 대단합니다.


일단 쉽고! 쇼핑이 즐겁게!


보통 처음 나만의 쇼핑몰을 만들어야겠다고 생각하면, 특이하고 예쁘고 또... 뭔가 개성을 담아서 만들어야지 생각할 것 같아요. 처음엔 피피도 그랬으니까요.


피피가 느꼈던 인사이트는 심플하지만 감각적인 디자인이에요. 다 빼고 남는 건 결국 사진 한 장과 짧은 카피한 줄이잖아요? 이것들을 모아서 대충? 조합해서 만들면 홈페이지가 완성되는 것 같아요. 그래야 반응형으로 제작하는 것도 쉬워지는 것 같습니다.


사용자 경험이 어쩌고 유저 경험이 저쩌고 두서도 맥락도 사실 필요 없지 않을까요.


우리 인터넷 할 때 사실 아무생각 안 하고 그냥 막 보잖아요. 스토리텔링 설계하고 고객에게 강요하면 오히려 이탈률이 늘어난다고 생각해요. 당근마켓을 쓱쓱 보듯이 그냥 신상품과 다양한 제안을 쓱쓱 보고 중간에 지루하지 않게 브랜디드 콘텐츠 하나씩 들어가는 게 가장 좋은 것 같아요.


만드는 사람도 쉽고, 보는 사람도 쉽고, 하지만 고퀄리티를 놓지 않는다. 정도로요.



Z Layout 과 F Layout

이론이라는 게 있다고?


설득력 있어 보이긴 하는데.. 실제로는 어떨까요..?
고객의 시선은 디자인한 의도에 따라 이동하기 마련입니다. 그 반대가 되기는 어렵습니다. 히트맵 이미지는 결국 의도된 대로 보이는 거예요.


이 두 가지 방식은 정보의 중요도를 바탕으로 만들어진 레이아웃입니다. 조금 오래된 방식이라 2010년도 이후에 잘 쓰이지 않게 되었지만, 유명한 고전 이론이라 맹신하는 사람들도 그만큼 많은 게 함정입니다. 정신 똑바로 안 차리면 은근히 설득력도 있거든요.


주로 관공서 홈페이지가 이 방식으로 많이 제작되었습니다. 왜냐하면, 메인에 넣고 싶은 내용은 많고 나름대로 정보의 위계구조를 정해서 중요도 순으로 순차적 배치를 하고 있거든요. 우측에 둥둥 떠다니는 퀵버튼은 그야말로 관공서 홈페이지의 꽃?입니다. 


이것 참 정보가 너무 많아서 만드는 사람도 힘들고 보는 사람도 힘든 방식이에요. 아무래도 고객관점이 빠져있어서 쇼핑몰에 좋지 않아 보여요. 사실은 단순한 게 제일 좋은데 말이죠.



심플이 최고는 아니지만

최고는 항상 심플했다.



결국에 중요한 것은 레이아웃이 아니고 콘텐츠의 퀄리티 인 것 같아요. 웹사이트를 잘 만들었다? 그것은 모든 것을 다 빼고 아주 쉽게 접근했다는 뜻이라고 생각해요. 사실 다 빼는 게 어렵거든요.


퍼즈플리즈의 새로운 웹사이트는 심플하지만 감각적인 것을 추구해요. 제품 디자인, 타이포그래피, 포토그래피 모든 것들을 고객관점에서 새롭게 만들고 있어요.


제작하는 사람도 쉬워야 보는 사람도 쉬우니까요. 하지만 역시 고퀄리티를 추구하는 퍼즈플리즈 입니다.


다음 주엔 메인 랜딩페이지 외에 상품을 어떻게 보여주는 게 효과적일지 다른 세부사항에 대해 이야기해볼게요.



기다리던

재입고 소식

이번 13차 리오더는 정말 우여곡절이 많았지만 결국 더 높은 퀄리티로 탄생했습니다. 품절되었던 스크런치도 다시 입고되었어요!


스크런치에 대해 따로 구매 가능하신지 문의가 많이 오시는데 이것은 자사몰에서 구입하시는 분들께 드리는 피피의 작은 이벤트입니다! 


파자마에 대한 퀄리티를 놓지 않으려고 하지만 그거 봉제 좀 쉽게하소! 라고 매번 공장 사장님의 말씀에 흔들리기도 합니다. 매번 리오더 때마다 흔들흔들 팔랑귀지만 또 매번 다짐하면서 만들고 있어요. 저희 피피 파자마를 꼭 뒤집에서 봐주세요. 그럼 이것이 피자마인가 명품인가를 느끼실 수 있답니다. 



All inspiration comes from home.

Home ─ Inspiration



13차 리오더가 입고되었습니다.

구독자님들께만 드리는 선물!

20% 할인쿠폰입니다!



PP13YES



일주일간 사용 가능한 쿠폰이에요!

8월 8일 ~ 8월 16일까지!




NEXT> 다음 주에는 ''간단하게 쇼핑몰 홈페이지 제작하기 (실전편)"  이/가 이어집니다.



패션, 브랜딩, 그래픽디자인, 영상제작, 액세서리, 슈즈, 조명, 음악, 수다쟁이 등 분야를 막론하고 함께 친구가 될 브랜드 혹은 사람들을 찾고 있어요. 함께 이야기해나가면서 성장하고 싶다면 언제든 댓글 주세요!


피피 뉴스레터 구독하기

https://page.stibee.com/subscriptions/81254


퍼즈플리즈 공식 인스타그램

https://www.instagram.com/pauseplease.official/


퍼즈플리즈 공식 온라인 숍

https://pause-please.com/


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari