portfolio
PC 고도몰 메인페이지 속도개선 feat 마켓컬리
0
공유하기
전 세계 대부분의 웹사이트는 동기식 호출 방식을 사용합니다.
동기식 호출이란, 웹 페이지를 맨 위부터 맨 아래까지 순차적으로 모든 콘텐츠를 한 번에 로딩하는 방식입니다.
페이지를 새로고침할 때마다 전체 콘텐츠를 순서대로 불러오기 때문에, 대부분의 글로벌 웹사이트에서 가장 보편적으로 사용되는 구조입니다.
✅ 동기식 호출의 장점
사용자가 페이지를 새로 고칠 때마다 서버 자원이 초기화되어, 저사양 컴퓨터나 인터넷 환경이 불안정한 지역(섬, 산간 등)에서도 안정적이고 균일한 로딩 성능을 제공합니다.
페이지 구조가 단순하고 범용성이 높아 글로벌 서비스에 적합합니다.
⚠️ 동기식 호출의 단점
사용자가 실제로 보지도 않을 페이지 하단의 콘텐츠까지 모두 미리 로딩하므로 초기 로딩 시간이 길어질 수 있습니다.
특히 일반 웹 사이트와 달리 컨텐츠의 수가 많은 쇼핑몰의 경우 로딩이 더 느려지는 현상이 발생합니다.
이를 보완하여 비동기식 호출 방식으로 개발되기도 합니다.
비동기식 호출은 네트워크 속도 향상과 고성능 디바이스 보급에 따라 등장한 최신 웹 기술로, 기존의 동기식 호출의 단점을 보완하였습니다.
✅ 비동기식 호출의 특징
웹 페이지에서 가장 먼저 보여야 할 핵심 콘텐츠만 우선 로딩합니다.
이후 사용자가 스크롤을 내리는 등의 특정 이벤트를 발생시킨다거나 혹은 아무런 이벤트를 발생시키지 않아도 서버에서 콘텐츠를 핵심 콘텐츠 로딩이 끝난 비순차적으로 로딩하는 방식입니다.
이렇게 하면 한 화면 모든 웹 컨텐츠를 로딩할 필요가 없어 페이지의 로딩 속도를 크게 향상시킬 수 있습니다.
📱 모바일 웹·앱에서 흔히 사용
고도몰의 상품 카테고리 페이지가 대표적으로 비동기식 구조를 채택하고 있습니다.
오늘날 대부분의 모바일 어플리케이션 및 웹앱은 비동기식 구조로 개발되어 있습니다.
화면에 보이는 중요 콘텐츠만 빠르게 보여주고, 나머지는 사용자 스크롤을 내림에 따라 불러오거나 더보기를 눌렀을 때 상품 목록 컨텐츠를 별도의 로딩 없이 추가하는 방식입니다.
📌 마켓컬리의 웹페이지 구조 (비동기 호출 + 스켈레톤 로딩)
마켓컬리는 많은 수의 상품을 진열하는 종합 식품 쇼핑몰입니다.
동기식 방식으로는 초기 웹 사이트의 로딩이 느릴 수밖에 없기 때문에, 비동기식 방식을 채택하여 스크롤을 내릴 때마다 서버에 상품 정보를 요청해 콘텐츠를 추가로 로딩 없이 보여줍니다.
스켈레톤 로딩 기법 사용 : 콘텐츠가 로딩중인 경우에 회색 박스 형태의 가짜 콘텐츠(스켈레톤)를 사용자에게 먼저 보여줌으로써 사용자에게 현재 로딩 중임을 시각적으로 안내하는 기법을 채택하였습니다.
🔍 고도몰 솔루션 기반의 마켓컬리
초기 마켓컬리는 고도몰 솔루션으로 구축되었으며 비동기 호출 + 스켈레톤 UI 기법을 통해 상품 수가 아주 많음에도 불구하고 빠른 로딩을 구현해냈습니다.
이러한 방식은 사용자 경험(UX)을 개선하고 쇼핑몰 운영 효율성도 높이는 데 도움이 됩니다.
댓글 0개
댓글을 불러오는 중입니다.
친절한 개발자에게
무엇이든 물어보세요
1
PC 고도몰 메인페이지 속도개선 feat 마켓컬리