✦ miu 사용 설명서
드래그 앤 드롭으로 쇼핑몰 상세페이지를 쉽고 빠르게 만드는 도구입니다.
이 문서에서 모든 기능을 단계별로 설명합니다.
화면 구성
miu 화면은 크게 세 영역으로 나뉩니다. 각 영역의 역할을 먼저 이해하면 작업이 훨씬 쉬워집니다.
| 영역 | 위치 | 역할 |
|---|---|---|
| 상단 헤더 | 화면 맨 위 | 실행 취소/재실행, 배경·폰트 설정, 캔버스 너비, 내보내기 버튼 |
| 블록 팔레트 | 왼쪽 패널 | 사용 가능한 모든 블록 목록. 클릭하거나 드래그해서 캔버스에 추가 |
| 캔버스 | 가운데 | 실제 상세페이지를 만드는 작업 영역. 블록을 쌓아 디자인 |
| 속성 패널 | 오른쪽 패널 | 선택한 블록의 스타일·내용 편집 (색상, 크기, 정렬 등) |
블록이란?
miu에서 모든 콘텐츠는 블록 단위로 구성됩니다. 블록을 레고처럼 위아래로 쌓아 상세페이지를 만듭니다. 각 블록은 독립적으로 편집·이동·삭제할 수 있습니다.
블록 추가 방법
블록을 캔버스에 추가하는 방법은 두 가지입니다.
블록 컨트롤 버튼
블록 위에 마우스를 올리면 왼쪽 상단에 컨트롤 버튼이 나타납니다.
| 버튼 | 기능 |
|---|---|
| ↑ 위로 / ↓ 아래로 | 블록 순서를 한 칸 위/아래로 이동 |
| ⧉ 복제 | 해당 블록을 바로 아래에 동일하게 복사 |
| ⊟ 2열 쪼개기 | 단독 블록을 2열 레이아웃으로 변환 (이미지·텍스트 등) |
| ✕ 삭제 | 블록 삭제 |
텍스트 블록
텍스트 블록은 본문과 제목 4가지 종류가 있습니다. 블록을 클릭하면 바로 타이핑할 수 있습니다.
텍스트 편집
텍스트 블록을 선택하면 오른쪽 속성 패널에서 다양한 스타일을 조정할 수 있습니다.
| 속성 | 설명 |
|---|---|
| 글자 크기 | px 단위로 직접 입력 또는 + / - 버튼으로 조절 |
| 굵기 | 보통 / 600 / 700 / 800 / 900 선택 |
| 색상 | 컬러 피커 또는 HEX 코드 직접 입력 |
| 정렬 | 왼쪽 / 가운데 / 오른쪽 / 양쪽 |
| 줄 간격 | 1.0 ~ 3.0 사이 숫자 입력 |
| 자간 | 글자 사이 간격 조절 (em 단위) |
| 안쪽 여백 | 텍스트 박스 내부 상하/좌우 여백 |
| 배경색 | 텍스트 박스 배경 색상 설정 |
| 모서리 둥글기 | 박스 테두리 둥글게 (border-radius) |
| 투명도 | 블록 전체 투명도 (0 ~ 100%) |
| 폰트 | 기본 또는 추가된 Google 폰트 선택 |
폰트 관리
이미지 블록
이미지와 GIF를 삽입하는 블록입니다. 단순 이미지 삽입부터 AI 생성, 편집, 텍스트 오버레이까지 다양한 기능을 지원합니다.
이미지 추가 방법
이미지 편집 기능
이미지를 선택한 후 오른쪽 속성 패널에서 아래 기능을 사용할 수 있습니다.
| 기능 | 설명 |
|---|---|
| ✏ 편집 | 이미지 편집 창 열기 — 자르기, 좌우/상하 반전, 회전 가능 |
| 배경 제거 | AI로 이미지 배경을 자동으로 제거 (인터넷 연결 필요) |
| 이미지 폭 | 블록 안에서 이미지 표시 너비 (10~100%) |
| 정렬 | 이미지를 왼쪽 / 가운데 / 오른쪽 정렬 |
| 안쪽 여백 | 이미지 주변 여백 |
| 배경색 | 이미지 블록 배경 색상 |
| 모서리 둥글기 | 이미지 테두리 둥글게 |
| 높이 고정 | 이미지 표시 높이를 고정하고 잘라내기 방식(object-fit) 선택 |
이미지 위에 텍스트 오버레이
이미지 기능 상세
이미지 편집기
이미지 블록 선택 → 속성 패널 ✏ 편집 버튼 클릭
| 도구 | 설명 |
|---|---|
| ✂ 자르기 | 드래그로 영역 선택 후 ✓ 적용 — 선택 영역만 남김 |
| ↺ / ↻ 회전 | 왼쪽/오른쪽으로 90° 회전 |
| ↔ 좌우 반전 | 이미지 좌우 뒤집기 |
| ↕ 상하 반전 | 이미지 상하 뒤집기 |
| ＋ / － 확대/축소 | 자르기 뷰 내에서 확대·축소 |
| ⟳ 리셋 | 모든 변경사항 초기화 |
| ✋ 이동 | 자르기 영역 이동 모드로 전환 |
AI 이미지 생성
예: "흰 배경에 세련된 스마트폰 제품 사진, 미니멀 디자인"
레이아웃 블록 (2열 / 3열 / 4열)
2열, 3열, 4열 배치 블록을 사용하면 여러 콘텐츠를 가로로 나란히 배치할 수 있습니다.
사용 방법
열 레이아웃 속성
| 속성 | 설명 |
|---|---|
| 열 간격 | 열 사이 간격 (px) |
| 안쪽 여백 | 레이아웃 블록 내부 여백 |
| 배경색 | 레이아웃 블록 전체 배경 |
| 세로 정렬 | 열 안 콘텐츠를 위/가운데/아래 정렬 |
표 블록
스펙표, 비교표, 사이즈 가이드 등 표 형태의 정보를 만들 수 있습니다.
표 추가 및 기본 사용
표 고급 기능
행/열 추가 및 삭제
셀을 클릭하면 오른쪽 속성 패널에 표 편집 도구가 표시됩니다.
| 기능 | 설명 |
|---|---|
| 행 추가 | 현재 선택 행 아래에 새 행 삽입 |
| 행 삭제 | 현재 선택 행 삭제 |
| 열 추가 | 현재 선택 열 오른쪽에 새 열 삽입 |
| 열 삭제 | 현재 선택 열 삭제 |
| 셀 병합 | 여러 셀을 드래그로 선택 후 병합 버튼 클릭 |
| 헤더 전환 | 일반 셀(td)을 헤더(th)로 변환 |
셀 스타일 편집
| 속성 | 설명 |
|---|---|
| 배경색 | 셀 배경 색상 |
| 글자색 | 셀 내 텍스트 색상 |
| 글자 크기 | 셀 폰트 크기 |
| 굵기 | 보통 / 굵게 |
| 정렬 | 왼쪽 / 가운데 / 오른쪽 |
| 여백 | 셀 내부 상하/좌우 여백 |
셀 안에 이미지 삽입
• 폭 % : 이미지 너비 조절
• ←글 / 글→ : 텍스트가 이미지를 감싸도록 왼쪽/오른쪽 Float
• ← ↔ → : 이미지만 블록 정렬 (감싸기 없음)
• 오른쪽 하단 핸들을 드래그해서 크기 조절 가능
기타 블록
여백 (Spacer)
블록 사이에 원하는 만큼 공백을 넣습니다. 속성 패널에서 높이(px)와 배경색을 설정할 수 있습니다.
구분선 (Divider)
가로 선으로 섹션을 시각적으로 나눕니다. 선 두께, 색상, 위아래 여백을 조절할 수 있습니다.
그룹 블록
여러 블록을 자유롭게 배치하는 자유형 컨테이너입니다. 그룹 안에서 블록들을 자유 위치로 배치할 수 있고, 그룹 전체 높이를 조절할 수 있습니다.
섹션 구분 (✂)
쇼핑몰 ZIP 내보내기를 할 때 이미지를 어디서 나눌지 지정하는 구분선입니다. 캔버스 편집 화면에서는 노란 줄무늬 표시로 보이지만, 실제 내보내기 결과물에는 나타나지 않습니다.
언제 섹션 구분을 사용하나요?
쇼핑몰 상세페이지는 이미지 파일 크기 제한이 있거나, GIF 애니메이션을 중간에 넣어야 하는 경우가 있습니다. 이때 섹션 구분으로 이미지를 적절히 분리합니다.
레이어 패널
왼쪽 팔레트 상단의 레이어 탭을 클릭하면 모든 블록의 목록을 볼 수 있습니다.
| 기능 | 방법 |
|---|---|
| 순서 변경 | 레이어 항목을 드래그해서 위아래로 이동 |
| 블록 선택 | 레이어 항목 클릭 → 캔버스에서 해당 블록 선택 |
| 숨김/표시 | 눈 아이콘(👁) 클릭 → 블록을 화면에서 숨기거나 표시 |
| 잠금/해제 | 자물쇠 아이콘(🔒) 클릭 → 잠근 블록은 편집 불가 (실수 방지) |
캔버스 설정
캔버스 너비
상단 헤더의 드롭다운에서 캔버스 너비를 선택합니다.
| 옵션 | 권장 용도 |
|---|---|
| 600px 모바일 | 모바일 전용 상세페이지 |
| 800px 기본 | 일반적인 상세페이지 (기본값, 대부분의 쇼핑몰에 적합) |
| 1000px 와이드 | PC 위주의 넓은 레이아웃 |
| 1200px 전체 | 대형 쇼핑몰 PC 레이아웃 |
페이지 배경
상단 헤더의 🎨 배경 버튼을 클릭합니다.
| 옵션 | 설명 |
|---|---|
| 단색 | 배경을 단일 색상으로 설정. 색상 피커 또는 HEX 코드로 입력 |
| 그라디언트 | 두 가지 색이 자연스럽게 이어지는 그라디언트 배경. 방향도 선택 가능 |
⚡ Factory 모드
여러 장의 사진과 텍스트를 입력하면 자동으로 스타일에 맞는 상세페이지를 생성해줍니다. 반복적인 레이아웃 작업을 빠르게 처리할 때 유용합니다.
이미지 저장
상단 헤더의 이미지 저장 버튼을 클릭하면 캔버스 전체를 이미지 파일로 저장합니다.
섹션 구분이 없는 경우
전체 캔버스가 하나의 이미지(PNG 또는 JPG)로 저장됩니다. 저장 형식(PNG/JPG)을 선택할 수 있습니다.
섹션 구분이 있는 경우
섹션 내보내기 창이 열리며 아래 옵션 중 선택합니다.
| 옵션 | 설명 |
|---|---|
| 📁 개별 파일 | 섹션마다 별도 파일로 저장 (section_1.jpg, section_2.jpg…) |
| 📦 ZIP 압축 | 모든 섹션 이미지를 ZIP 파일 하나로 묶어서 저장 |
| 🖼 통으로 PNG | 섹션 구분 무시하고 전체를 하나의 PNG로 저장 |
| 🖼 통으로 JPG | 섹션 구분 무시하고 전체를 하나의 JPG로 저장 |
HTML 저장
상단 헤더의 HTML 저장 버튼을 클릭하면 캔버스를 HTML 파일로 저장합니다. 텍스트, 이미지, 레이아웃 등 모든 요소가 실제 HTML 코드로 변환됩니다.
쇼핑몰 ZIP (핵심 기능)
상세페이지를 쇼핑몰에 등록하기 위한 핵심 내보내기 기능입니다. 섹션별로 이미지를 캡처하고, HTML 파일과 함께 ZIP으로 묶어서 저장합니다.
기본 사용 방법
images/ 상대경로를 사용합니다 (로컬 파일용).detail_page_shop.zip 파일이 다운로드됩니다. 압축을 풀면 index.html과 images/ 폴더가 있습니다.고급 옵션 설명
| 옵션 | 설명 | 언제 사용? |
|---|---|---|
| 테이블 코드만 | <table>...</table> 태그만 포함. <!DOCTYPE html> 등 전체 HTML 구조 없음 |
카페24, 고도몰 등 편집기에 일부 코드만 붙여넣을 때 |
| 스마트스토어 한줄 코드 | 테이블 없이 <div style="line-height:0"><img>...</div> 형식으로 저장 |
네이버 스마트스토어 HTML 에디터에 붙여넣을 때 권장 |
| GIF 포함 행을 HTML로 | GIF가 있는 2열/3열 레이아웃을 HTML 테이블로 처리해 애니메이션 보존 | GIF 애니메이션이 2열/3열 안에 있을 때 |
공통 이미지 (머리/꼬리)
모든 상품 상세페이지에 공통으로 들어가는 배너 이미지(브랜드 로고, 주의사항 등)를 URL로 입력하면 내보내는 HTML의 맨 앞 또는 맨 뒤에 자동으로 추가됩니다.
ZIP 파일 구조
| 파일/폴더 | 설명 |
|---|---|
index.html | 상세페이지 HTML 파일. 쇼핑몰 편집기에 내용을 붙여넣거나 파일 자체를 서버에 업로드 |
images/001.jpg | 첫 번째 섹션 이미지 (단순 이미지는 원본 품질 그대로) |
images/002.jpg | 두 번째 섹션 이미지 |
images/001.gif | GIF 블록이 있는 경우 원본 GIF 파일 |
스마트스토어에 등록하는 방법
images/ 폴더 안 이미지 파일들을 스마트스토어 이미지 서버 또는 별도 CDN에 업로드합니다.index.html을 열어 전체 내용을 복사합니다.코드 라이브러리란?
miu로 제작한 상세페이지 HTML 파일을 한 곳에 모아두는 공유 보관함입니다. 상단 메뉴의 코드 라이브러리에서 접근할 수 있으며, 업로드된 상세페이지를 미리보기·코드 복사·다운로드할 수 있습니다.
보기 방식 & 검색
갤러리 / 리스트 전환
오른쪽 상단 툴바에서 보기 방식을 전환할 수 있습니다. 마지막으로 선택한 보기 방식이 브라우저에 기억됩니다.
| 보기 | 특징 |
|---|---|
| ▦ 갤러리 | 썸네일 카드 형태로 여러 상품을 한눈에 확인 |
| ≡ 리스트 | 상품명·날짜를 표 형태로 정리해 빠르게 탐색 |
페이지당 표시 개수
보기 아이콘 왼쪽의 셀렉트 박스에서 한 페이지에 표시할 항목 수를 선택합니다.
| 옵션 | 설명 |
|---|---|
| 15개 (기본) | 기본 표시 개수 |
| 25개 | 한 번에 더 많이 보고 싶을 때 |
| 50개 | 전체를 빠르게 훑을 때 |
| 100개 | 대량 관리 시 |
페이지 이동
하단 페이지네이션에서 ← 이전 / 다음 → 화살표 또는 숫자 버튼을 클릭해 페이지를 이동합니다. 항목이 많을 경우 현재 페이지 주변 번호만 표시되고 먼 페이지는 …으로 줄여서 보여줍니다.
검색
상단 검색창에 상품명을 입력하면 실시간으로 필터링됩니다. 검색 중에는 페이지네이션이 숨겨지고 일치하는 항목 전체가 표시됩니다.
업로드 (관리자)
관리자로 로그인하면 오른쪽 상단에 업로드 버튼이 나타납니다. HTML 파일을 한 번에 여러 개 업로드할 수 있습니다.
http로 시작하는 이미지 URL 중 3번째 이미지가 썸네일로 자동 설정됩니다. 3번째 이미지가 없거나 적합하지 않으면 썸네일 칸을 클릭해서 직접 지정하세요.
선택 삭제 & 전체 삭제 (관리자)
관리자로 로그인하면 툴바에 전체선택 체크박스와 선택 삭제 / 전체 삭제 버튼이 표시됩니다.
개별 삭제
각 카드(갤러리) 또는 행(리스트)의 🗑 삭제 버튼을 클릭하면 해당 항목만 삭제됩니다. 확인 창이 뜬 후 삭제가 진행됩니다.
선택 삭제
전체선택 체크박스
툴바의 전체선택 체크박스를 클릭하면 검색 결과 전체를 한 번에 선택/해제합니다. 일부만 선택된 경우 중간 상태(■)로 표시됩니다.
전체 삭제
툴바의 전체 삭제 버튼은 라이브러리에 등록된 모든 항목을 삭제합니다. 이 작업은 되돌릴 수 없으므로 이중 확인 창이 표시됩니다.
썸네일 오류 표시 (빨간 표시)
썸네일 이미지 URL이 등록되어 있지만 실제로 이미지를 불러올 수 없는 경우(404 오류 등), 해당 카드의 썸네일 영역이 빨간색으로 표시됩니다.
| 표시 위치 | 내용 |
|---|---|
| 갤러리 카드 | 썸네일 영역 전체가 빨간 배경으로 바뀌고 경고 아이콘 + "이미지 없음 / FTP 업로드 필요" 텍스트 표시 |
| 리스트 행 | 44×44 썸네일이 빨간 배경 + 경고 아이콘으로 표시. 마우스를 올리면 "FTP에 이미지를 업로드해 주세요" 툴팁 표시 |
빨간 표시가 뜨는 이유
썸네일은 HTML에서 자동 추출한 외부 이미지 URL을 그대로 저장합니다. 해당 이미지가 아직 FTP 서버에 업로드되지 않았거나 URL이 변경된 경우 빨간 표시가 뜹니다.
클라우드 저장
로그인하면 작업 중인 상세페이지를 클라우드에 저장하고 어디서든 불러올 수 있습니다.
단축키
| 단축키 | 기능 |
|---|---|
| Ctrl + Z | 실행 취소 (Undo) |
| Ctrl + Y | 다시 실행 (Redo) |
| Tab (표 안에서) | 다음 셀로 이동 |
| Shift + Tab (표 안에서) | 이전 셀로 이동 |
| Delete / Backspace | 선택한 블록 삭제 (텍스트 편집 중이 아닐 때) |
자주 묻는 질문
Q. 쇼핑몰 ZIP을 받았는데 이미지가 안 보여요.
이미지 경로 설정 문제입니다. 설정 창의 이미지 서버 경로가 실제 이미지가 업로드된 서버 URL과 일치하는지 확인하세요. 로컬에서 테스트할 때는 경로를 비워두고 images/ 폴더와 index.html을 같은 위치에 두세요.
Q. GIF가 움직이지 않아요.
일반 이미지 저장이나 캔버스 편집 화면에서는 GIF가 정지 프레임으로 보입니다. 쇼핑몰 ZIP으로 내보내면 GIF 파일이 별도로 저장되어 실제로 움직입니다. 2열/3열 안에 GIF가 있다면 고급 옵션에서 GIF 포함 행을 HTML로를 체크하세요.
Q. 내보낸 이미지 용량이 너무 커요.
효과·오버레이가 없는 단순 이미지는 원본 파일이 그대로 사용됩니다. 텍스트나 배경이 합성된 복합 영역은 JPEG으로 압축되어 저장됩니다. 원본 이미지 자체가 크다면 업로드 전 이미지 편집 도구로 미리 압축하는 것을 권장합니다.
Q. 폰트가 내보낸 이미지에서 다르게 보여요.
이미지 내보내기 시 Google 폰트가 로드되어야 합니다. 인터넷 연결이 끊긴 상태에서 내보내면 기본 폰트로 표시될 수 있습니다.
Q. 작업 내용이 사라졌어요.
브라우저가 캐시를 지웠거나 다른 기기에서 접속한 경우입니다. 중요한 작업은 반드시 로그인 후 클라우드 저장을 사용하세요.
Q. 스마트스토어에 붙여넣었더니 레이아웃이 깨져요.
설정 창에서 스마트스토어 한줄 코드 옵션을 체크하고 다시 내보내세요. 이 옵션이 스마트스토어 HTML 에디터와 가장 호환성이 좋습니다.