EDITORCLASSBLOGLOGIN표현한다는 것의무한한 가능성,새로운 형태로
담아내다.새로운 형태의 콘텐츠Opkle은 코드 없이 웹을 마음껏 만들고, 누구나 자기 화면을 그릴 수 있도록 에디터를 만들고, 그 결과물을 어디서나 즐길 수 있게 돕는 팀입니다.텍스트와 화면과의 조화를 통해, 웹을 짓는다는 것이 그저 단순한 코딩이 아닌, 상상을 펼치고 감각을 깨우는 과정이 될 수 있도록 좋은 도구를 만들어 냅니다.디자인 색 조합, 어떻게 고를까 — 배색의 기본과 색 스타일design11디자인 폰트 고르기와 글자 배치 — 타이포그래피의 기본design12디자인 레이아웃의 기본 — 정렬·여백·그룹·그리드design13인스타그램 카드뉴스 디자인, 처음부터 끝까지design14상세페이지 디자인, 팔리는 흐름으로 짜는 법design1512345...15 상세페이지 디자인, 팔리는 흐름으로 짜는 법온라인에서 물건을 파는 사람에게 상세페이지는 매장의 직원과 같습니다. 손님이 물건을 직접 만져 볼 수 없으니, 상세페이지가 대신 보여 주고 설명하고 설득해야 합니다. 같은 상품이라도 상세페이지에 따라 구매율이 크게 달라지는 이유입니다. 그래서 스마트스토어나 자사몰을 운영하는 분들이 가장 많이 고민하고, 외주 비용도 가장 많이 드는 디자인 가운데 하나가 상세페이지입니다.상세페이지가 어려운 이유는 길기 때문입니다. 위에서 아래로 길게 이어지는 한 장 안에 사진과 글, 표와 아이콘이 수십 개 들어가고, 손님은 그 대부분을 휴대폰에서 엄지로 빠르게 넘기며 봅니다. 예쁜 디자인보다 중요한 것은 손님이 어디서 멈추고, 무엇을 읽고, 어디서 마음을 정하는지에 맞춘 흐름입니다.이 글에서는 상세페이지를 흐름부터 디자인, 내보내기까지 순서대로 살펴봅니다.1.흐름 짜기 — 손님이 구매를 결정하는 순서대로 구역을 나눕니다.2.모바일 기준 크기 — 폭과 글자 크기를 휴대폰에 맞추는 법을 봅니다.3.사진 다듬기 — 상품 사진의 톤과 배경을 맞추는 법을 봅니다.4.정보를 읽히게 — 특징·스펙·비교를 정리하는 법을 봅니다.5.작업과 내보내기 — 구역을 나누어 만들고 가볍게 내보내는 법을 봅니다.손님이 결정하는 순서대로 흐름을 짭니다상세페이지는 디자인 툴을 열기 전에 흐름부터 정해야 합니다. 손님이 상품을 사기까지는 대개 «관심 → 공감 → 이해 → 확신 → 결정»의 순서를 거칩니다. 이 순서에 맞춰 구역을 나누면, 무엇을 어디에 넣을지 고민이 크게 줄어듭니다.자주 쓰는 구역 순서 첫 화면 — 상품을 가장 잘 보여 주는 사진 한 장과, 이 상품이 무엇을 해 주는지 한 문장. 여기서 계속 볼지가 정해집니다. 문제와 공감 — 손님이 겪는 불편을 짚어 «나에게 필요한 물건»으로 느끼게 합니다. 해결과 핵심 특징 — 그 불편을 이 상품이 어떻게 풀어 주는지, 특징 세 가지 안팎으로 보여 줍니다. 근거 — 후기, 인증, 실험 결과, 제작 과정처럼 믿을 이유를 보여 줍니다. 사용법과 상세 정보 — 크기, 소재, 구성품, 사용법을 표와 사진으로 정리합니다. 안내 — 배송, 교환·반품, 자주 묻는 질문으로 마지막 망설임을 풀어 줍니다.특징은 많을수록 좋을 것 같지만, 손님이 기억하는 것은 세 가지 안팎입니다. 상품의 장점을 열 가지 늘어놓기보다, 가장 중요한 세 가지를 골라 크게 보여 주고 나머지는 상세 정보 구역의 표로 보내는 편이 설득력이 큽니다.휴대폰 기준으로 크기를 정합니다상세페이지는 대부분 휴대폰에서 읽힙니다. 쇼핑몰마다 권장하는 폭이 조금씩 다르지만 흔히 860px 안팎의 폭으로 만들고, 휴대폰에서는 이 폭이 화면 너비에 맞게 줄어들어 보입니다. 다시 말해 디자인 툴에서 보는 글자가 휴대폰에서는 절반 가까이 작아진다는 뜻입니다.그래서 상세페이지의 글자는 생각보다 커야 합니다. 860px 폭이라면 본문 글자도 28px 이상, 제목은 50px 이상으로 잡는 편이 휴대폰에서 편하게 읽힙니다. 디자인 중간중간 화면을 축소해 휴대폰에서 보일 크기로 확인하는 습관을 들이면, 다 만든 뒤에 글자가 너무 작다는 것을 발견하는 일을 막을 수 있습니다. 한 줄의 글도 짧게 끊어서, 휴대폰 화면에서 두세 줄 안에 한 문장이 끝나도록 쓰는 것이 좋습니다.상품 사진의 톤과 배경을 맞춥니다상세페이지에서 사진은 가장 큰 설득 도구입니다. 그런데 여러 날에 걸쳐 다른 조명에서 찍은 사진을 그대로 쓰면, 같은 상품인데도 색이 제각각이라 신뢰가 떨어집니다. 사진의 톤을 맞추는 것만으로도 상세페이지가 훨씬 정돈되어 보입니다.옵클 에디터에서는 한 장의 사진을 보정해 원하는 색감을 맞춘 뒤, 인스펙터의 스타일 설정 칸에서 보정 스타일로 담아 두면 나머지 사진에도 같은 보정을 한 번에 적용할 수 있습니다. 상품만 깔끔하게 따야 한다면 사진을 우클릭하고 변환 › 배경 제거를 고르면 됩니다. 배경을 걷어 낸 상품 아래에 필터 칸의 그림자를 은은하게 넣으면, 흰 바탕 위에 놓인 것 같은 자연스러운 느낌을 줄 수 있습니다. 사진 속 작은 얼룩이나 먼지는 힐링 도구로 문질러 지우면 됩니다.정보는 표와 아이콘으로 읽히게 만듭니다상세 정보 구역은 글로 길게 풀어 쓰면 아무도 읽지 않습니다. 크기, 소재, 구성품, 세탁 방법처럼 항목이 정해진 정보는 표로 정리하십시오. 옵클 에디터에서는 도구 막대의 표 만들기를 고르고 대지를 누르면 표가 만들어지고, 표를 다시 누르면 표 편집 화면에서 내용을 고칠 수 있어서 디자인 안에 표를 자연스럽게 넣을 수 있습니다.핵심 특징은 아이콘과 짧은 제목, 한두 줄 설명을 한 묶음으로 만들어 같은 모양으로 반복하면 읽기 쉽습니다. 이 묶음을 컴포넌트로 만들어 두면 아이콘과 글자만 바꿔 여러 번 쓸 수 있고, 나중에 모양을 고칠 때도 원본 하나만 고치면 됩니다. 경쟁 상품과의 차이를 보여 주고 싶다면 «다른 제품 / 이 제품»을 나란히 놓은 비교 표가 긴 설명보다 훨씬 빠르게 전달됩니다.구역마다 대지를 나누어 만들고 내보냅니다상세페이지를 아주 긴 대지 하나로 만들면 작업하기도 불편하고, 고칠 곳을 찾기도 어렵습니다. 첫 화면, 문제와 공감, 특징, 근거, 상세 정보처럼 구역마다 같은 폭의 대지를 하나씩 만들어 세로로 나란히 두면, 구역별로 고치고 순서를 바꾸기가 쉬워집니다. 같은 폭의 대지를 만들 때는 첫 대지를 복제한 뒤 높이만 바꾸는 것이 가장 빠릅니다. 대지 이름을 01_첫화면, 02_공감처럼 순서대로 지어 두면 내보낸 파일도 순서대로 정리됩니다.내보낼 때는 오른쪽 아래 추출하기에서 모든 대지를 골라 이미지로 내보내면 됩니다. 사진이 많은 구역은 JPG나 WebP로, 글자와 표가 많은 구역은 PNG로 내보내야 또렷합니다. 구역을 나누어 올리면 한 장짜리 거대한 이미지보다 페이지가 빨리 열리고, 쇼핑몰의 이미지 용량 제한에도 덜 걸립니다. 이미지 추출 창에서 정하는 즉시 예상 용량이 표시되므로, 품질을 한두 단계 낮춰 보며 차이가 보이지 않는 지점에서 멈추면 됩니다.자주 보는 상세페이지 실수공들여 만든 상세페이지가 기대만큼 팔지 못한다면, 대개 아래 실수 가운데 하나가 숨어 있습니다.고치면 바로 달라지는 것들 첫 화면에 인사말과 로고만 있다 — 손님은 첫 화면에서 이 상품이 무엇이고 나에게 무엇을 해 주는지 알고 싶어 합니다. 브랜드 소개는 뒤로 보내고, 첫 화면에는 상품 사진과 핵심 한 문장을 둡니다. 글이 사진 속에 너무 많다 — 문단이 길게 들어간 이미지는 휴대폰에서 거의 읽히지 않습니다. 한 구역에는 메시지 하나만, 글은 두세 줄로 끊어 씁니다. 구역마다 디자인이 다르다 — 구역마다 글꼴과 색, 여백이 바뀌면 여러 사람이 만든 페이지처럼 보입니다. 단락 스타일과 칠 스타일로 제목·본문·강조색을 정해 두고 모든 구역에 같이 씁니다. 실제 크기를 알 수 없다 — 사진만 보고는 상품의 크기를 짐작하기 어렵습니다. 손에 든 사진이나 익숙한 물건과 함께 찍은 사진, 치수를 적은 그림을 한 장 넣어 줍니다. 안내 정보가 빠졌다 — 배송 기간과 교환·반품 조건이 없으면 마지막 순간에 망설이게 됩니다. 페이지 끝에 짧게라도 꼭 넣습니다.상세페이지는 한 번 만들고 끝나는 디자인이 아닙니다. 손님의 문의가 자주 들어오는 질문이 있다면 그 답을 상세페이지에 한 구역으로 더하고, 후기가 쌓이면 근거 구역을 새 후기로 바꿔 주십시오. 구역마다 대지를 나누어 두었다면 바뀐 구역 하나만 고쳐 다시 내보내면 됩니다.상세페이지는 손님의 질문에 답하는 글입니다잘 팔리는 상세페이지는 화려한 효과보다 손님의 질문에 차례대로 답하는 구조를 갖고 있습니다. 이게 뭐지, 나한테 필요할까, 정말 좋을까, 믿을 수 있을까, 받으면 어떻게 쓰지, 문제가 생기면 어떻게 하지. 이 질문들을 순서대로 적고, 각 질문에 답하는 구역을 하나씩 만들어 보십시오. 디자인은 그 답이 휴대폰에서 빠르고 또렷하게 읽히도록 돕는 일입니다.이 글의 핵심 첫 화면 → 공감 → 해결과 특징 → 근거 → 상세 정보 → 안내 순서로, 손님이 결정하는 흐름에 맞춰 구역을 나눕니다. 흔히 860px 안팎 폭으로 만들되 휴대폰에서 절반 가까이 작아 보이므로, 본문 28px·제목 50px 이상으로 크게 씁니다. 보정 스타일로 사진 톤을 맞추고, 배경 제거와 은은한 그림자로 상품을 깔끔하게 보여 줍니다. 상세 정보는 표로, 핵심 특징은 컴포넌트로 만든 아이콘 묶음으로 반복해 읽히게 합니다. 구역마다 같은 폭의 대지로 나누어 만들고, 사진 구역은 JPG·WebP, 글자 구역은 PNG로 가볍게 내보냅니다.이전글목록으로다음글저작권 고시Copyright Notice본 웹사이트의 모든 디자인 결과물 및 영상에 대한 저작권은 Abstract Cloud에 있으며, 저작권법 및 관련 법령에 의해 보호받습니다. 웹, 영상, 본문, 표지, 내지 디자인을 포함한 모든 콘텐츠는 저작권자의 자산으로, 사전 동의 없이 무단 복제, 배포, 2차 저작물 제작, 온라인 공유 등을 금지합니다. 이를 위반할 시, 저작권법에 따라 민형사상 책임을 질 수 있습니다. 정당한 구매와 저작권 보호는 창작자의 권리를 지키며, 더 나은 작품으로 보답할 힘이 됩니다.저작권자: Abstract Cloud | 대표자: 배창규(uragen)
© Abstract Cloud. All Rights Reserved.HOMEFAQ이용 약관개인정보 이용방침help@opkle.app
010-2747-3403상호 :추상적 형상 디자인(Abstract cloud)  |  대표자 :배창규사업자등록번호 :249-74-00533통신판매업 신고번호 :2025-의정부송산-0634주소 :경기도 의정부시 부용로 49, 108동 402호웹의 모든 콘텐츠, 디자인, 소스 코드에 대한
저작권은 Opkle에게 있습니다.