피그마 상세페이지 사이즈, 마켓별 프레임 너비 정하는 방법
안녕하세요, 상세뚝딱팀입니다. 피그마에서 상세페이지를 만들기 시작할 때 가장 먼저 부딪히는 질문이 "프레임 가로 크기를 몇으로 해야 하지?"입니다. 처음에 대충 정해서 만들다가, 올릴 마켓의 권장 너비와 다르다는 것을 나중에 알고 처음부터 다시 맞추는 경우가 적지 않습니다. 이 글에서는 피그마 상세페이지 사이즈를 정하는 기준, 마켓별 권장 너비, 프레임을 구성하는 방법, 너비가 맞지 않을 때 생길 수 있는 문제와 점검 방법을 정리했습니다. (마켓의 이미지 규격은 바뀔 수 있으므로, 아래 너비는 상세뚝딱 다운로드 화면 기준이며 등록 전에 마켓 판매자센터의 최신 안내를 꼭 확인해 주세요.)
1. 상세페이지 사이즈는 "너비"가 기준입니다
상세페이지는 세로로 길게 이어지는 이미지입니다. 그래서 세로 길이는 내용에 따라 자연스럽게 정해지고, 꼭 맞춰야 하는 값은 가로 너비입니다. 마켓은 상세 이미지를 일정한 너비의 영역에 보여주기 때문에, 이 너비와 맞지 않으면 이미지가 줄어들거나 여백이 생길 수 있습니다.
피그마에서는 프레임이 곧 이미지의 영역이므로, 상세페이지 프레임의 가로 너비를 마켓 권장 너비로 정하는 것이 첫 단계입니다.
2. 마켓별 권장 너비
상세뚝딱의 다운로드 화면에서 마켓을 선택하면 해당 마켓의 권장 너비로 저장됩니다. 현재 화면에서 확인되는 값은 다음과 같습니다.
| 마켓 | 권장 너비 |
|---|---|
| 쿠팡 | 780px |
| 네이버 스마트스토어 | 860px |
| 지마켓 | 860px |
| 11번가 | 800px |
| 카카오톡딜 | 720px |
| 토스 쇼핑 | 1000px |
여러 마켓에 판매한다면 마켓별로 너비가 다르다는 점이 중요합니다. 네이버 스마트스토어와 지마켓은 같은 860px이지만 쿠팡은 780px, 11번가는 800px로 달라서, 한 가지 너비로 만들어 모든 마켓에 올리면 일부 마켓에서는 의도와 다르게 보일 수 있습니다. 상세뚝딱 다운로드 화면에는 아래처럼 마켓별 너비가 표시되고, 원하는 너비가 따로 있다면 "너비 직접 지정"으로 숫자를 입력할 수 있습니다.
3. 프레임은 이렇게 구성하세요
너비를 정했다면 프레임을 어떻게 나눌지 정합니다. 가장 안정적인 방식은 최상위 프레임의 너비를 고정하고, 그 안에 같은 너비의 섹션 프레임을 세로로 쌓는 것입니다.
최상위 프레임은 마켓 너비로 고정하고, 섹션 프레임은 같은 너비에 세로는 내용에 따라 달라지게 둡니다. 섹션마다 좌우 여백(패딩)을 같게 두면 글자 시작선이 맞아 보기 좋습니다. 섹션을 프레임으로 나눠 두면 나중에 분할해서 저장하기도 쉽습니다.
여러 마켓에 올린다면
처음 작업한 프레임을 복제해서 너비만 바꾸는 방식이 효율적입니다. 다만 너비가 달라지면 줄바꿈 위치와 이미지 배치가 달라질 수 있으니 복제 후 한 번씩 확인하세요. 오토 레이아웃으로 만들어 두면 너비를 바꿀 때 내용이 자동으로 따라와 수정량이 줄어듭니다.
4. 너비를 맞추지 않으면 생길 수 있는 일
너비가 맞지 않았을 때의 영향은 마켓과 등록 방식에 따라 다릅니다. 일반적으로 알려진 경우를 정리하면 아래와 같습니다.
특히 모바일에서 글자가 작아 보이는 문제는 고객 이탈로 이어지기 쉽습니다. 작업할 때 가장 작은 글자가 모바일에서 읽히는 크기인지 확인하는 습관을 들이세요.
5. 프레임 만들기 전 체크리스트
가장 중요한 것은 판매 마켓을 먼저 정하고 최신 안내를 확인하는 것입니다. 작업을 시작한 뒤에 너비가 바뀌면 전체를 다시 조정해야 하므로, 프레임을 만들기 전에 이 확인부터 끝내 두세요.
6. 규격 걱정 없이 시작하고 싶다면
피그마에서 너비를 직접 설정하고 마켓별로 프레임을 복제하는 과정이 번거롭다면, 상세뚝딱에서 초안을 만들고 저장 단계에서 마켓을 선택하는 방식을 쓸 수 있습니다. 상세뚝딱은 에디터에서 템플릿으로 상세페이지를 만들고, 다운로드 화면에서 쿠팡·네이버 스마트스토어·지마켓·11번가·카카오톡딜·토스 쇼핑 등을 선택해 해당 너비로 저장할 수 있습니다. 페이지별 분할과 전체 통이미지 중에서 고를 수도 있습니다.
세밀한 디자인은 피그마에서 다듬고 싶다면 에디터의 피그마로 편집 버튼으로 작업을 이어갈 수 있습니다. 연동 방법은 "피그마 상세페이지, 상세뚝딱과 연동해서 빠르게 만드는 법" 글에서 정리하고 있습니다.
마치며
상세페이지 사이즈는 외우는 숫자가 아니라 "올릴 마켓이 요구하는 너비"를 확인하는 습관의 문제입니다. 지금 작업 중인 프레임을 보며 이렇게 물어보세요. 이 프레임의 너비는 올릴 마켓의 최신 안내와 일치할까? 모바일에서 가장 작은 글자가 읽힐까? 여러 마켓에 올린다면 마켓별 프레임을 나눠 두었을까? 세 가지만 확인해도 다시 만드는 일이 크게 줄어듭니다.
