상세페이지가 마음에 든다면 이제 내보내기만 하면 돼요.
💡 내보낸 뒤에도 프로젝트는 그대로 살아있어요. 언제든 다시 수정하고, 또 내보내기 하면 됩니다.
1. 바로 내보내기
복잡한 설정은 저희가 기본값으로 다 맞춰뒀어요. [이미지 내보내기] 에서 아무것도 안 건드리고 내보내기 버튼만 눌러도 깔끔하게 저장됩니다.
2. 전체 내보내기 vs 일부만
[섹션 선택] 에서 어떤 섹션을 내보낼지 고를 수 있어요.
- [전체 선택] — 모든 섹션을 한 번에 선택
- 개별 체크박스 — 원하는 섹션만 골라서 선택
선택한 개수는 선택됨: N/전체 로 표시돼요.
3. 섹션 포맷 (확장자)
섹션은 종류에 따라 저장 형식이 달라요. 오른쪽에서 이미지 포맷과 동영상 포맷을 고를 수 있어요.
| 섹션 종류 | 포맷 | |---|---| | 일반 이미지 | PNG / JPEG | | 영상·애니메이션 | WebP (쿠팡, 네이버 용) / GIF (네이버 용) |
4. 개별 파일 vs 하나의 이미지
내보내는 방식이 두 가지예요.
- 개별 파일 — 섹션별로 따로 저장돼요. 여러 장이라 ZIP(압축) 파일로 묶여서 다운로드돼요.
- 하나의 이미지 — 선택한 섹션을 한 장으로 합쳐서 저장해요.
⚠️ 압축(ZIP) 파일은 꼭 풀고 올리세요! '개별 파일'로 받으면 ZIP으로 내려와요. 압축을 푼 뒤 안의 이미지들을 업로드하셔야 합니다.
💡 네이버 스마트스토어·쿠팡은 이미지 한 장당 용량 제한이 있어요. '하나의 이미지'로 합치면 용량이 너무 커질 수 있으니, '개별 파일'로 나눠서 올리는 걸 추천해요.
⚠️ '하나의 이미지'를 골라도, 영상·애니메이션 섹션은 형식이 달라 따로 저장돼요. ("통합 내보내기 모드에서도 동적 섹션은 별도 파일로 저장됩니다.") 움직이는 파일(WebP/GIF)은 정지 이미지 한 장에 합칠 수 없거든요.
5. 이미지 너비 (860px 권장)
[화면 너비] 에서 내보낼 이미지의 너비를 정해요.
- 프리셋 버튼(모바일·태블릿·데스크탑) 또는 직접 px 입력으로 조절
- 상세페이지는 보통 860px 를 권장해요.
💡 더 선명하게 뽑고 싶다면 [이미지 배율] 을 올리면 돼요.
6. 배경색
배경색은 기본값 그대로 두시면 돼요. 필요하면 [배경색] 에서 색을 바꾸거나, PNG·WebP는 투명 배경으로도 내보낼 수 있어요.
7. 웹으로 내보내기 & 재배포
이미지 말고 실제 웹페이지로도 내보낼 수 있어요. [웹(Figma)으로 내보내기] 탭으로 가세요.
웹 배포하기
[웹 배포] 를 누르면 상세페이지가 고유 URL로 발행돼요. 그 주소를 공유하거나 다른 사이트에 임베드할 수 있어요.
재배포하기
프로젝트를 수정한 경우 이미 배포한 URL에는 자동 반영되지 않아요. 변경사항을 적용하려면 [재배포] 를 눌러 다시 올려야 해요.
Figma로 가져가기
배포한 상세페이지는, Figma로도 불러올 수 있어요. (외부 무료 플러그인을 이용해요.)
- 먼저 웹페이지로 내보내기(배포)
- Figma에서 "html.to.design" 무료 플러그인 설치
- 배포된 URL을 플러그인에 입력해 불러오기
