쇼핑몰 제작, 프로처럼 디자인하는 3가지 방법
디자이너도 아닌데..
쇼핑몰 어떻게 디자인하지?
예뻐 보이는 디자인 스킨을 고르고 폰트와 컬러도 바꿔봤지만,
완성된 쇼핑몰은 어딘가 어색하게 느껴지죠.
그렇다고 외주로 눈을 돌리면 최소 100만 원부터 시작하고
수정 횟수 제한도 있는데요.
혼자 하기엔 막막하고 외주 비용은 부담스럽다면,
누구나 전문가처럼 디자인하는 3가지 핵심 방법
지금부터 알려드릴게요.
상품에 맞는
쇼핑몰 스킨 선택하기
"디자인 스킨만 예쁘면 괜찮은 것 아니야?"라고 생각하는 분들이 많아요. 하지만 스킨 자체가 예쁘더라도 내 상품이나 브랜드와 어울리는지는 별개의 문제예요. 아래는 가상의 브랜드를 각각 스포츠 스킨과 인테리어 스킨에 배치한 모습인데요. 상품 이미지와 스킨에는 문제가 없어도 어떤 스킨을 적용하느냐에 따라 브랜드가 주는 인상은 완전히 달라져요. 이처럼 쇼핑몰을 만들 때는 초반 스킨 선택이 중요합니다. 그럼 어떤 기준으로 선택해야 할까요?
✔️ 스킨의 전체적인 컬러 톤이 내 브랜드 컬러와 잘 맞는지 비교하기
✔️ PC와 모바일을 한 번에 관리할 수 있는 반응형 스킨인지 확인하기
✔️ 상품 수가 많다면 카테고리와 상품 목록을 한눈에 볼 수 있는지 확인하기
✔️ 할인·이벤트가 잦다면 배너와 기획전 영역을 다양하게 활용할 수 있는지 확인하기
템플릿을 활용해
상품 이미지 편집하기
스킨을 선택했다면 이제 상품 이미지를 적용해 볼게요. 관리자 페이지 <디자인> 메뉴에서 디자인 에디터를 열면 반응형 스킨의 기본 이미지와 구성을 확인할 수 있어요. 스킨에 사용된 상품 이미지의 배경과 구도, 조명, 색감 등을 참고해 내 상품을 촬영·편집하고 이미지를 교체해 보세요. 참고하고 싶은 쇼핑몰이 있다면 옆에 띄워두고 이미지 배치와 콘텐츠 구성을 살펴보는 것도 도움이 됩니다. 아래는 실제 스킨 이미지를 브랜드 이미지로 교체한 모습이에요.
✔️ 새로운 형태의 콘텐츠가 필요하다면 사이드바의 섹션 추가를 눌러 원하는 구성 선택하기
✔️ 제목, 상품, 이미지, 버튼 등 개별 요소를 추가하려면 빈 섹션을 만든 뒤 위젯을 선택하기
✔️ 상품 이미지는 상품 등록 관리자에서 설정하기
활용법이 더 궁금하다면 디자인 에디터 사용법 보기 →
공통 스타일로
디자인 통일하기
상품 이미지를 바꿨는데도 어딘가 2% 부족해 보인다면, 쇼핑몰 전체 컬러가 통일되어 있는지 확인해 보세요. 상품 이미지와 어울리지 않는 브랜드 컬러를 사용하거나 여러 색을 한꺼번에 사용하면 쇼핑몰이 정돈되지 않아 보일 수 있어요.
색은 크게 따뜻한 느낌의 웜톤과 차가운 느낌의 쿨톤으로 나뉘어요. 아래는 웜톤인 상품 이미지에 각각 쿨톤 컬러와 웜톤 컬러를 사용한 모습이에요. 작은 차이처럼 보여도 쇼핑몰 전체 분위기가 확연히 달라지죠. 퍼스널 컬러에 맞춰 옷과 메이크업 색을 고르듯, 쇼핑몰도 상품 이미지와 브랜드 컬러의 톤을 맞추는 것이 중요해요.
✔️ 상품 이미지에서 주요 색상을 추출하거나 웜·쿨톤에 맞춰 브랜드 컬러 설정하기
✔️ 버튼 컬러는 검정, 흰색, 회색 등 무채색을 기본으로 하고, 흰색 버튼은 검은색 테두리 적용하기
✔️ 회색을 사용할 때도 이미지와 어울리는 따뜻하거나 차가운 색감으로 맞추기
✔️ 본문은 가독성 좋은 폰트를, 제목은 브랜드 분위기와 어울리는 폰트로 선택하기
디자인 적용 전
꼭 확인하세요
✔️ 고객에게 실제로 보이는 최종 화면은 미리보기로 점검하기
✔️ 이상이 없다면 현재 사용 중인 스킨은 게시하기, 보유 스킨은 저장하기 클릭하기
✔️ 다른 디자인을 적용하고 싶다면 디자인 메뉴 하단의 인기 급상승 스킨에서 추가하기 클릭하기
✔️ 추가한 스킨은 보유 스킨에서 별도로 편집하고 관리하기
다음노코드로 시작한 쇼핑몰, 다시 만들지 않으려면?
성공의 여정, 고도몰에서 출발합니다
온라인 비즈니스, 성장에만 몰입하세요. 고도몰이 전 과정을 지원합니다. 지금 바로 무료로 시작해보세요.