UI·UX 디자인은 늘 함께 이야기되지만, 두 개념은 역할과 초점이 서로 다릅니다. 특히 쇼핑몰 웹사이트를 디자인할 때는 사용자가 어떤 목적을 가지고 들어오는지, 어떤 감정으로 서비스를 이용하는지, 어디에서 불편을 느끼는지까지 입체적으로 살펴볼 필요가 있어요. 이를 바탕으로 구매 동선과 시각적 요소를 설계하는 일이 바로 UI·UX 디자인의 핵심이죠. 쇼핑몰 디자인을 고민하고 계신다면 이번 콘텐츠를 주목해 주세요. 오늘은 UI·UX 디자인의 개념부터 반응형·적응형 웹사이트의 차이, 최신 트렌드, 실무 적용 방법까지 함께 살펴보겠습니다.

1️⃣ UI 디자인 vs UX 디자인, 차이점은?

쇼핑몰 프론트를 디자인할 땐 가장 먼저 UI와 UX의 역할을 분명하게 아는 것이 중요해요. 서로 긴밀하게 연결돼 있지만 엄밀히 따지면 UX는 전체 사용자 경험을 만드는 일에 가깝고요. UI 디자인은 그 경험이 화면에 잘 보이고 원활하게 작동하도록 구현하는 일이라고 볼 수 있어요.

1) UI 디자인이란,

UI 디자인에서 UI는 User Interface의 약자로, 사용자와 제품이 만나 상호작용하는 화면상의 접점을 디자인하는 개념입니다. 여기서 말하는 접점은 색상, 텍스트, 레이아웃, 아이콘, 버튼처럼 사용자가 직접 보고 조작하는 시각적 요소를 뜻하는데요. 그래서 UI 디자이너는 일관된 스타일 가이드를 토대로 사용자가 상품이나 서비스를 직관적으로 이해할 수 있도록 화면을 구성하죠.

예를 들어 쇼핑몰 상품 리스트에서는 장바구니 아이콘을 쉽게 볼 수 있습니다. 사용자는 이 아이콘을 보고 해당 상품을 장바구니에 담는 기능이라고 인식하게 됩니다. 반면 화면 우측 상단에 있는 장바구니 아이콘과 숫자는 지금까지 담아둔 상품을 확인하는 공간으로 받아들여요.

이처럼 같은 아이콘이라도 위치와 맥락에 따라 사용자가 기대하는 기능이 달라집니다. 이런 차이를 고려해 요소를 배치하고 형태를 만드는 일이 UI 디자이너의 역할이에요. 기본적인 소프트웨어 활용 능력은 물론, 웹 디자인과 모바일 앱 디자인, 퍼블리싱에 대한 이해도 함께 필요합니다.

2) UX 디자인이란,

UX 디자인에서 UX는 User eXperience, 즉 사용자 경험의 약자입니다. 쉽게 말해 사용자가 제품이나 서비스를 이용하면서 보고, 누르고, 탐색하며 느끼는 모든 경험을 온·오프라인 전반에서 디자인하는 개념이죠. 여기서 중요한 기준은 ‘사용자의 입장’입니다. 단순히 보기 좋게 만드는 것이 아니라 실제 경험했을 때 불편함 없이 쉽게 사용할 수 있어야 해요.

온라인 쇼핑몰에 적용해 보면, 사용자가 사이트에 들어와 상품을 찾고, 정보를 살펴본 뒤 장바구니에 담고, 결제까지 이어지는 과정에서 헷갈리거나 번거로운 지점이 없어야 합니다. 또 원하는 행동으로 매끄럽게 이어지도록 구조와 흐름을 설계하는 것도 UX 디자인의 역할이고요.

UX 디자인에서는 데이터 분석이 필수입니다. 사용자가 어떤 경로로 들어왔는지, 어느 화면에 오래 머무르는지, 어떤 단계에서 이탈하는지를 살펴보면 불편하거나 막히는 지점을 파악할 수 있어요. 필요할 경우 사용자의 피드백을 수집하거나 테스트를 진행해 문제를 검증하기도 합니다.

2️⃣ UI·UX 디자인 전 알아야 할 반응형과 적응형

UI·UX 디자인의 목적은 사용자의 편의성을 높이는 데 있어요. 그런데 데스크톱 비율에 맞춰 디자인된 쇼핑몰 화면을 모바일에서 그대로 보게 된다면 어떨까요? 필요한 정보는 한눈에 들어오지 않고 버튼을 누르려면 줌을 해야 합니다. 결국 불폄함은 커지고 이탈률은 높아지겠죠.

따라서 UI·UX 디자인에서는 기기별 화면 차이를 고려한 구성이 꼭 필요한데요. 이런 배경에서 주목받는 개념이 바로 반응형 웹과 적응형 웹입니다.

1) 반응형 웹이란,

반응형 웹(Responsive web)은 화면 크기에 실시간으로 반응해 그에 최적화된 화면 구성을 보여주는 웹 페이지를 의미해요. 예를 들어 PC 창 크기를 줄였다가 늘리면 그에 맞춰 자동으로 웹 페이지 콘텐츠 사이즈나 배열이 맞춰지는 거예요.

기존에는 데스크톱, 태블릿, 모바일 버전에 맞춰 각각 웹사이트를 제작했다면, 반응형 웹은 하나의 웹사이트로 작업할 수 있게 되어 작업이 더 쉽고 간편합니다. 특히 요즘은 모바일 이용 비중이 늘어나면서 무려 전 세계 62% 이상이 채택한 방식으로 자리 잡고 있을 정도죠. 이와 비슷하지만 전혀 다른 개념으로는 적응형 웹(Adaptive Web)이 있습니다.

👉반응형 스킨으로 쇼핑몰 제작하기

2) 적응형 웹이란,

적응형 웹이란, 사용자 디바이스를 감지해 그에 맞는 고정 레이아웃 템플릿을 전송하는 방식이에요. 데스크톱, 태블릿, 모바일용 템플릿을 각각 따로 만든 후 방문자 디바이스에 맞는 것을 골라 보여주는 거죠. 이때 모바일 사용자가 접속하면 ‘m.shoppingmall.com’ 혹은 별도 모바일 버전 링크로 리다이렉트됩니다. 두 가지 방식은 장단점이 명확한데요. 아래의 표에서 차이점을 비교해 보고 내 브랜드에 맞는 방식을 선택해 보세요.

📱반응형 웹과 적응형 웹의 장단점

3️⃣ 2026 UI·UX 디자인 트렌드 5가지

인스타그램, 애플, 삼성처럼 글로벌 기업의 서비스가 꾸준히 업데이트되는 이유는 UI·UX 디자인이 트렌드 변화에 민감한 영역이기 때문이에요. 기술이 발전할수록 사용자의 기대 수준과 화면을 이용하는 패턴도 함께 달라지죠. 그래서 예전에는 자연스러웠던 화면도 지금은 불편하게 느껴질 수 있습니다. 그렇다면 최근 주목받는 UI·UX 디자인 트렌드는 무엇일까요?

1) AI 기반 개인화 UI·UX

내가 보는 웹사이트 화면이 누군가에겐 다르게 보인다면 어떨까요? 최근 사용자에 따라 실시간으로 컬러나 자주 사용하는 메뉴 등이 변하는 UI·UX가 트렌드입니다. 무엇을 클릭했는지, 어떤 화면에 오래 머물렀는지, 언제 사용했고, 표정은 어떤지까지 세밀한 데이터를 분석해 페이지 순서를 자동으로 변화시키는 거죠. 아마존, 쿠팡, 요기요 등 플랫폼은 물론 LF몰, 유한양행 등 자사몰까지 차별화를 위해 도입하는 추세예요.

한편, 대화형 AI 상품 추천도 보편적인데요. 주류 스마트오더 서비스 키햐는 AI 추천 서비스를 통해 원하는 상품을 빠르게 찾을 수 있도록 했고, 상품 리스트에서부터 ‘AI Pick’이 핵심을 요약해 접근성을 높였어요. 발레 전문 커머스 이발레샵 역시 AI 서비스를 통해 원하는 사이즈, 원단, 색상에 따른 맞춤 상품을 추천해 주는 챗봇을 운영하고 있어요. 고객 데이터가 충분하다면 자동화 시스템으로, 탐색 여정을 개선하고 싶다면 대화형 챗봇을 도입하는 것도 좋은 전략입니다.

👉 유한양행, 키햐, 이발레샵이 선택한 쇼핑몰 솔루션, 고도몰 지금 보기

2) 벤토 그리드 레이아웃

‘벤토’는 일본어로 도시락, ‘그리드’는 격자를 나타내는 말이에요. 칸이 분리된 도시락에서 깔끔하게 식사를 할 수 있듯이 웹에서 나눠진 카드나 박스를 통해 필요한 정보가 한 눈에 보이도록 구성한 레이아웃을 의미합니다. 핀터레스트처럼 흔히 콘텐츠가 많은 사이트에서 유용한데요. 각각의 박스로 수많은 정보 중 무엇이 중요한지 우선순위를 알려주고 텍스트, 이미지, 동영상 등을 활용해 정보를 효과적으로 표현할 수 있어요. 

예를 들어 밀폐용기 브랜드 락앤락 쇼핑몰은 좌측 긴 세로형 이미지로 진행 중인 프로모션을 강조합니다. 가운데엔 정방형 이미지의 핫딜 상품, 우측엔 가로형 이미지의 브랜드별 베스트 상품 등 비율 변화로 카테고리를 구분해 주죠. 스크롤을 내리면 좌측 프로모션 박스는 고정되고 가운데와 우측 콘텐츠만 넘어가게 해 콘텐츠의 우선순위를 적용하고 있어요. 상품 카테고리가 다양하고 특별히 강조하길 원하는 콘텐츠가 있다면 벤토 그리드를 적용해 보세요.

👉 벤토 그리드가 적용된 디자인 스킨 보러 가기

3) 몰입형 UI·UX와 마이크로 인터랙션

온라인에서는 직접 보고 만지는 듯한 감각을 전하는 UI·UX가 강화되고 있어요. 먼저 실제 사물의 질감과 외형을 화면에 사실감 있게 담아내는 디자인 트렌드가 뚜렷합니다. 최근 애플 UI는 반투명 효과를 활용해 배경 이미지가 스크롤에 따라 반사되거나 굴절되는 듯한 인상을 주고요. 오늘의집도 카테고리별 상품 아이콘을 실제 사물과 비슷하게 표현해 시각적 몰입감을 높였어요.

사용자 행동에 반응하는 마이크로 인터랙션*도 빼놓을 수 없는데요. 클릭, 스크롤, 입력에 따라 버튼의 색상이나 크기가 변하고 짧은 애니메이션을 더해 로딩·오류·장바구니 담기 같은 상태를 더 직관적으로 이해할 수 있게 해줘요. 대표적인 예로 토스 쇼핑은 쿠폰을 받을 때 애니메이션이 나타나고, 상품을 삭제하면 팝업 메시지가 뜨며, 상품별 하트를 누르면 ‘내 쇼핑’ 아이콘이 하트로 바뀌는 등 다양한 인터랙션을 활용하죠.

여기에 AR, VR 기반 가상 체험까지 더해져 오프라인에 가까운 쇼핑 경험도 구현되고 있어요. 에넥스몰의 3D 인테리어 설계 프로그램은 전국 아파트 도면과 연동돼 공간을 직접 설계하고 가구부터 창호·바닥재까지 자유롭게 배치해 구매 판단에 도움을 줍니다.

마이크로 인터랙션이란?
사용자와 서비스의 인터페이스 간의 작은 상호작용 순간을 설계하는 것

👉 에넥스몰이 도입한 AR·VR 앱 보러 가기

4) 아날로그 감성 UI·UX 디자인

AI가 만들어 내는 차갑고 결점 없는 이미지가 늘어나면서 디지털 피로도를 호소하는 사람들도 많아지고 있어요. 그래서인지 아이러니하게도 자연스럽고 인간적인 감각을 담은 UI 디자인이 다시 떠오릅니다. 따뜻한 색감, 손 글씨 폰트, 종이 텍스처, 필터를 덜어낸 실제 이미지를 활용하는 방식이 대표적이죠. 일례로 이케아 쇼핑몰은 낮은 명도와 자연의 색감을 살린 제품 캠페인 영상, 종이로 붙인 듯한 콜라주 이미지, 손 그림 아이콘, 유저가 직접 촬영한 사진을 활용해 친근한 인상을 전합니다. 

비슷한 맥락에서 향수를 자극하는 레트로 디자인도 다시 유행하고 있어요. 특히 Y2K 감성은 밝고 쨍한 색상과 검은 외곽선이 강조된 평면 일러스트 스타일을 중심으로 재해석되고 있는데요. 그런 점에서 칠성몰은 레트로 감성을 현대적으로 풀어낸 UI·UX 사례로 볼 수 있어요. 청량한 원색과 외곽선이 강조된 아이콘·썸네일이 특징이고, 2000년대 플래시 게임을 연상케 하는 ‘푸드헌터 사이다’ 이벤트를 통해 Z세대에게 새로운 경험을 제안했어요. 이처럼 기술적인 완성도보다 의도적인 투박함이 오히려 세련된 UI를 만들기도 해요.

👉 아날로그 감성이 느껴지는 디자인 스킨 보러 가기

5) 모두를 위한 디자인, 지속가능한 UI·UX

앞으로는 사람과 환경 모두를 생각하는 UI가 더 중요해질 거예요. 먼저 장애 여부나 나이와 관계 없이 누구나 웹을 사용할 수 있는 접근성을 갖춰야 해요. 고령자와 색각 이상 사용자를 고려해 텍스트와 배경의 명도 대비를 충분히 확보하고, 색상 외 아이콘을 함께 제공하는 방식을 활용할 수 있어요. PC에서는 마우스 없이 탭(Tab) 키만으로 모든 기능에 접근할 수 있어야 하고, 영상에는 자막과 텍스트 대본을 제공하는 방식도 필요합니다.

다크 모드 역시 에너지 소비와 시각적 피로를 줄이는 대안으로 떠오르고 있는데요. 배터리 사용 시간을 늘리는 데 도움이 되고, 대비감 있는 색상과 강한 타이포그래피를 더하면 정보 전달력을 높일 수 있어요. 목업 판매 사이트 099를 보면 기본적으로 무채색 상품 리스트를 보여주다가, 썸네일에 마우스를 올리면 컬러가 나타나거나 애니메이션이 작동해 어떤 목업인지 빠르게 이해할 수 있게 합니다. 상세 페이지에서는 과감한 타이포그래피와 간략한 설명을 배치해 가독성을 높였고, 탭 키만으로 주요 기능을 이용할 수 있게 했어요.

4️⃣ 쇼핑몰 UI·UX 디자인하기

UI·UX 디자인 트렌드을 알아봤다면 실제 우리 쇼핑몰에 적용해 볼 차례예요. 사용자 조사부터 웹사이트의 뼈대를 잡는 방법, 그 위에 디자인을 입혀 완성하는 과정, 에디터로 손쉽게 퍼블리싱하는 방법까지 순서대로 살펴보겠습니다.

1) 사용자 조사

디자인이라고 해서 무작정 스케치를 하는 건 아닙니다. 사용자의 니즈와 쇼핑몰을 이용하는 맥락을 먼저 이해해야 하죠. 조사는 크게 데스크 리서치와 필드 리서치로 나뉘는데요. 구체적인 과정을 알려드릴게요.

🖥️ 데스크 리서치 (Desk Research)

데스크 리서치는 책상 위에서 자료를 수집하고 분석하는 조사 방식이에요. 최근 UX 트렌드는 어떤지, 동종 업계 경쟁사는 어떤 UI·UX를 제공하고 있는지, 현재 시장에서 성과가 좋은 서비스 중 벤치마킹할 요소는 없는지 등을 살펴봅니다. 이와 함께 사용자에 대한 이해를 높이기 위해 통계 데이터, CX팀에서 접수되는 고객의 의견, 온라인 후기, 자사 웹에 남은 데이터를 분석하기도 해요.

🖥️ 필드 리서치 (Field Research)

필드 즉, 현장에서 하는 조사라는 의미로 데스크 리서치보다 실제 사용 맥락에 가까운 정보를 얻을 수 있어요. 사용자 대상 설문조사와 인터뷰 방식이 가장 흔하고요. 사용자에게 과제를 제시한 뒤 쇼핑몰에서 이를 수행하는 모습을 관찰하거나 두 가지 시안을 비교해 어느 쪽이 더 나은 반응을 얻는지 A/B 테스트로 검증하기도 합니다. 

필드 리서치를 진행할 땐 조사 대상자를 신중하게 선정해야 해요. 실제 쇼핑몰 핵심 고객인지, 조사하려는 경험을 해본 적이 있는지, 다양한 사용자 유형이 고르게 포함돼 있는지 먼저 확인합니다. 설문조사의 경우 결과를 해석할 수 있을 만큼 의미 있는 표본 수를 확보하는 것도 중요합니다.

🖥️ 페르소나 설정 (Persona Definition)

데스크 리서치와 필드 리서치를 기반으로 사용자 그룹을 파악하고 각 집단을 대표하는 가상의 인물인 페르소나를 설정합니다. 페르소나에는 이름, 나이, 직업, 관심사, 행동 패턴 같은 기본 정보뿐 아니라, 사용자가 서비스를 이용하는 환경과 상황, 행동의 동기, 목표, 문제와 불편, 니즈를 상세하게 담아야 해요. 이렇게 정리한 페르소나는 디자인 방향을 설정하고 우선순위를 정하는 기준이 됩니다.

2) 웹사이트 구조(IA)

IA란 Information Architecture의 줄임말로, 쇼핑몰 안의 많은 정보를 어떻게 나누고 배치할지 정리하는 작업이에요. 쇼핑몰에는 프로모션, 카테고리, 상품 상세 페이지, 결제, 로그인, 게시판처럼 다양한 정보와 기능이 있어요. 이 요소들을 먼저 페이지 단위로 나눈 뒤, 어떤 메뉴 아래에 어떤 화면이 연결되는지를 차례대로 정리해요. 이때 보는 개념이 바로 Depth입니다. Depth는 사용자가 원하는 화면에 들어가기까지 몇 단계를 거치는지를 의미하는데요. 컬리 앱을 예로 이해해 볼게요.

🖥️ 컬리로 보는 IA와 Depth의 이해

컬리 앱을 들어가면 하단 메뉴에는 홈, 라운지, 카테고리, 검색, 마이컬리가 있어요. 여기서 라운지에 들어가면 추천, 오늘뭐먹지, 마이컬리템, 커뮤니티 같은 하위 메뉴를 볼 수 있죠. 이런 식으로 메뉴 안에 어떤 메뉴와 콘텐츠가 이어지는지 구조를 정리한 문서를 IA라고 이해하시면 됩니다.

IA는 기획자, 디자이너, 개발자 간의 동일한 정보를 기반으로 작업할 수 있고 커뮤니케이션의 오류를 줄여주는 역할을 해요. 또 쇼핑몰을 업데이트할 때 기존 IA에서 어디에 배치하고 재구성할지도 명확해지죠.

🖥️ IA의 핵심, 사용자

IA를 작성할 땐 사용자의 관점이 우선순위가 되어야 해요. 앞 단에서 리서치를 진행하고 페르소나를 설정한 이유입니다. 사용자가 쇼핑몰에서 무엇을 하고, 어떤 것을 먼저 찾으며 어떤 경로를 거쳐 목표에 달성하는지 여정을 홈 화면과 메뉴 단계에 반영해 주세요.

당연히 자주 찾는 콘텐츠일수록 1~2 Depth에 배치하는 것이 좋고요. 동선에 따라 어디까지 깊이를 파고들지 결정해야 합니다. 메뉴나 카테고리의 이름은 사용자가 직관적으로 알 수 있도록 지어 주세요.

🖥️ IA를 그리는 방식

IA는 여러 부서가 함께 보아야 하는 문서이기 때문에 머릿속으로만 그리지 않고 실제 시각적으로 표현하는 것이 중요해요. 아래의 구조 중 적절한 방식을 선택해 그려보세요.

3) 와이어프레임 작성

IA를 그렸다면 이를 기반으로 웹사이트의 뼈대를 만들어 볼 차례예요. 와이어프레임은 본격적으로 디자인과 개발이 들어가기 전 그리는 설계도입니다. 예를 들어 메인 화면에 어떤 정보와 상품을 배치할지, 메뉴나 버튼은 어디에 둘지, 그걸 누르면 어느 화면으로 이동하는지 구체적으로 나타내죠.

이 문서는 협업 과정에서 중요한 기준이에요. 기획자는 말로 설명하기 어려운 화면 흐름을 시각적으로 전달할 수 있고요. 디자이너는 어떤 정보를 중심으로 표현해야 할지 구조를 파악할 수 있어요. 개발자 역시 필요한 기능과 구현 범위를 분명하게 이해하게 되죠. 덕분에 피드백을 주고받거나 초기에 수정 방향을 잡는 일도 한결 수월해집니다. 와이어프레임을 로우, 미드, 하이 피델리티로 나눠 살펴볼게요.

4) 프로토타입 테스트

와이어프레임이 화면의 구조와 레이아웃을 표현하는 데 초점을 맞춘 문서라면, 프로토타입은 클릭, 전환, 스크롤 같은 상호작용을 더해 실제 쇼핑몰의 사용 흐름을 미리 확인할 수 있도록 만든 시안입니다.

프로토타입 테스트 단계에서는 초반 리서치를 통해 설정한 목표가 실제 화면에서도 잘 작동하는지 점검해야 해요. 사용자가 상품을 탐색하고 장바구니에 담고 결제 화면으로 이동하는 과정에서 불편함은 없는지 살펴보는 것이죠. 이때 사용자의 니즈가 충분히 반영됐는지, 원하는 행동이 자연스럽게 이어지는지, 쇼핑몰이 전달하는 분위기와 인상은 적절한지도 함께 확인합니다.

보다 객관적인 피드백을 얻기 위해 실제 사용자를 대상으로 테스트를 진행하기도 해요. 이 과정에서 수집한 의견을 바탕으로 화면 구성과 기능, 동선 등을 반복해서 보완하며 완성도를 높여갑니다. 프로토타입은 단계에 따라 다양한 방식으로 제작할 수 있습니다. 초기에는 종이와 간단한 도구를 활용해 빠르게 검토하기도 하고요. 피그마, 어도비 XD를 활용해 실제 쇼핑몰 화면을 구현한 뒤 테스트를 진행할 수 있습니다.

5) 디자인 가이드

제품의 구조와 기능이 어느 정도 정리되면, UI·UX 디자이너는 시각적 완성도를 높이는 단계로 넘어갑니다. 앞선 리서치에서 수집한 웹사이트 레퍼런스를 참고해 시장 안에서 브랜드의 존재감을 드러내고, 브랜드가 추구하는 분위기와 일관된 디자인 가이드를 세워야 해요. 이 가이드는 웹사이트 전반의 인상을 결정할 뿐 아니라, 화면마다 통일된 경험을 만드는 기준이 됩니다.

가이드를 정했다면 이를 기반으로 쇼핑몰을 디자인해 볼게요. 보통은 디자인 완료 후 퍼블리싱을 통해 프론트 화면을 구현하고요. 이것이 실제 작동되도록 개발 작업이 들어가면서 쇼핑몰 웹사이트가 완성됩니다. 하지만 이 과정 없이 디자인 가이드만 있어도 충분히 쇼핑몰을 제작할 방법이 있어요. 고도몰 노코드 디자인 에디터를 활용하면 됩니다.

6) 고도몰 디자인 에디터로 완성하기

고도몰에서는 별도의 퍼블리싱이나 개발 과정 없이 쇼핑몰 화면을 바로 디자인할 수 있어요. 준비한 와이어프레임과 디자인 가이드를 기반으로 하나씩 적용해 봅시다. 먼저 고도몰 신청을 한 뒤 아래 메뉴로 접속해 주세요.

📍고도몰 관리자 > 디자인 > 디자인 관리 > 디자인 스킨 리스트

🖥️ 노코드 디자인을 원하는 디자이너라면?

고도몰의 노코드 디자인은 반응형 스킨을 기준으로 지원돼요. 여기서는 기본 반응형 스킨 ‘슬로우홈’을 기준으로 설명드릴게요.

현재 설정된 디자인 스킨은 고객이 보고 있는 쇼핑몰 화면으로 슬로우홈이 적용돼 있을 거예요. 다른 스킨이 적용돼 있다면 하단의 인기 급상승 스킨에서 ‘반응형’ 스킨을 누르고 우측 상단 [추가하기]를 클릭해 주세요. 그러면 보유 스킨 리스트 > 반응형 탭에 스킨이 추가되어 직접 관리할 수 있게 됩니다.

슬로우홈 스킨에서 [디자인 에디터로 편집하기]를 누르면 쇼핑몰 화면이 열려요. 화면 좌측 하단의 톱니바퀴 아이콘을 클릭하고 공통 스타일 설정 메뉴에서 미리 준비한 디자인 가이드를 적용하면 편집 준비가 끝납니다.

왼쪽 사이드바에는 쇼핑몰을 구성하는 섹션과 위젯 목록이 표시되는데요. 드래그 앤 드롭으로 순서를 바꾸거나 새로운 기능을 추가할 수 있어서 와이어프레임에 맞춰 구성해 주면 됩니다. 이후 각 요소를 클릭하면 정렬, 위치, 이미지·동영상 삽입, 투명도, 노출 기간 같은 세부 항목까지 조정할 수 있어요. 작업 중에는 우측 상단의 PC·모바일 아이콘을 눌러 기기별 화면이 어떻게 보이는지 수시로 확인해 주세요.

🖥️ 퍼블리싱이 가능한 디자이너라면?

직접 디자인한 스킨이 있다면 보유 스킨 리스트 우측 상단 [스킨 업로드]를 클릭해 주세요. 이후 PC, 모바일 중 스킨 유형을 선택하고 스킨 코드와 스킨명을 입력한 뒤 작업한 스킨 파일을 업로드하면 됩니다.

직접 디자인한 스킨이 없더라도 괜찮아요. 화면 하단의 인기 급상승 스킨에서 디자인 가이드와 유사한 스킨을 선택할 수 있습니다. 원하는 스킨은 미리보기 화면 우측 상단의 [추가하기] 버튼을 누르면 보유 스킨 리스트 > PC/모바일 탭에 등록되어 관리할 수 있어요. (반응형 스킨은 반응형 탭에서 확인하면 됩니다.)

그 다음 보유 스킨 리스트에서 사용할 스킨을 선택해 [HTML로 편집하기]를 클릭합니다. 그러면 해당 스킨에 적용된 각 페이지의 HTML 코드를 한눈에 확인할 수 있어요. 실시간 편집과 미리보기도 가능해 FTP 서버에 접속해 수정할 필요도 없고요. 최신 소스로 개발 환경에 자동으로 반영되기 때문에, 준비한 와이어프레임과 디자인 가이드를 기준으로 효율적으로 작업을 진행할 수 있습니다.

🖥️ 쇼핑몰 디자인을 테스트용 서버로 검토하고 배포하려면?

완성한 디자인은 바로 쇼핑몰에 반영할 수도 있지만, 고도몰 pro 이상 버전에서는 테스트용 환경인 ‘스테이징 서버’를 활용할 수 있어요. 스테이징 서버는 실제 운영 화면에 바로 적용하지 않고도 자유롭게 소스를 수정할 수 있는 테스트 서버예요. 아래 메뉴에서 설정할 수 있으니 참고해 주세요.

📍고도몰 관리자 > 개발소스관리 > Support > 개발 환경 사용설정

지금까지 UI·UX 디자인의 개념부터 반응형·적응형의 차이, 최신 트렌드, 실무 방법까지 함께 살펴보았습니다. 쇼핑몰의 외관은 고객이 온라인에서 브랜드를 처음 인식하는 접점인 만큼, 감각적인 인상과 편리한 사용성이 함께 갖춰져야 해요. 그래서 좋은 UI·UX 디자인은 한 번에 완성되는 것이 아니라, 트렌드와 사용자의 불편을 꾸준히 반영하며 진화해 나가는 과정이죠. 오늘의 콘텐츠가 더 나은 쇼핑몰 디자인과 사용자 경험을 만드는데 작은 영감이 되었길 바랍니다.

더불어 원하는 쇼핑몰을 쉽고 편리하게 디자인하고, 필요한 기능까지 유연하게 확장하고 싶다면 고도몰로 시작해 보세요. CRM 마케팅부터 선물하기, 정기결제까지 비즈니스 성장에 필요한 다양한 기능을 기본으로 제공하고 있으니 참고해 보시기 바랍니다. ✨

UI·UX 디자인 트렌드로 쇼핑몰 만들기 FAQ