스토리 디자인
소개
커머스 상세페이지 한 편을 단(블록) 단위로 만드는 도구입니다.
사진·영상 후보를 여러 개 올려 두면 검토자가 초대 링크로 들어와 쓸 것을 고르고, 고쳤으면 하는 곳을 남깁니다. 다 정해지면 본문 텍스트는 서식 그대로 복사하고 확정된 이미지는 한 번에 내려받아 상세페이지에 붙입니다.
와디즈 전용이 아니라 여러 커머스 플랫폼에 그대로 씁니다.
매뉴얼
1. 스토리 만들기
[스토리] > [+ 새 스토리]에서 제목과 콘텐츠 가로 폭(최대 860px)을 정합니다.
완료 승인은 두 가지입니다 — "검토자가 승인"과 "내가 승인(검토자 없이 사용)". 검토자에게 보여주고 확인받을 스토리는 "검토자가 승인"으로 둡니다. 초대를 한 번이라도 발급하면 "내가 승인"으로는 바꿀 수 없습니다.
2. 단(블록) 쌓기
[+ 블록 추가]를 누르고 유형을 고릅니다 — 공백 / 문장 입력 / 꾸미기 / 영상삽입 / 다이어그램 / 표.
[표] 비교표·사양표를 만드는 전용 블록입니다. 본문 자리에서 바로 고칩니다.
- 도구 줄: + 행 / + 열 / 행 삭제 / 열 삭제 / 제목 행 / 정렬 / 굵게 / 글자색 / 칸 배경색 / 서식 지우기 / 병합 / 해제.
- 칸을 누르고 Shift+클릭으로 범위를 잡아 [병합]합니다. 병합한 칸에서 [해제]하면 원래 글자가 그대로 돌아옵니다.
- 열 너비는 제목 행의 열 경계선을 마우스로 끌어 바꿉니다.
- Tab으로 다음 칸, 방향키로 칸 사이를 옮깁니다(글자 끝에 닿았을 때만 넘어갑니다).
- 고치면 잠시 뒤 자동으로 저장됩니다.
- 내보내기: 텍스트 복사에는 서식이 칸마다 박힌 HTML 표로, 이미지 묶음에는 같은 표를 구운 PNG로 함께 나갑니다 — 표를 받아 주는 커머스 편집기에는 표를, 표를 걷어내는 곳에는 그림을 쓰면 됩니다.
영상삽입은 올린 영상에서 원하는 장면을 잘라 씁니다. 크롭·밝기·대비와 함께 [↔ 가로로 뒤집기]가 있어, 좌우가 뒤집힌 채로 찍힌 영상을 바로잡거나 방향을 맞출 수 있습니다(같은 버튼이 [썸네일 뽑기]의 영상에도 있습니다).
[문장 입력 — 문단 역할] 문장 툴바 맨 앞 [문단]에서 문단마다 제목 / 부제목 / 소제목 / 본문을 고릅니다.
- 역할의 크기는 오른쪽 위 [디자인 가이드] > 글자 탭에서 정합니다(제목·부제목·소제목·본문 네 칸과 줄간격). 가이드를 바꾸면 그 스토리의 제목이 한꺼번에 바뀝니다.
- 역할은 제목 구조로 저장돼, 검색엔진·AI가 무엇이 제목인지 읽을 수 있습니다.
- 색·굵게·밑줄은 지금처럼 글자마다 자유롭게 겁니다. 역할을 고르면 그 문단에 따로 준 글자 크기는 역할 크기로 맞춰집니다.
- 예전에 글자 크기만 키워 둔 문장은 [문단] > [크기로 역할 정리(이 블록)]로 한 번에 역할을 정할 수 있습니다. Ctrl+Z로 되돌립니다.
- [내보내기 > 텍스트 복사]에는 역할과 크기가 함께 담겨, 커머스 편집기에 붙여 넣어도 제목 크기가 유지됩니다.
화면에 보이는 번호(1, 2, 3…)는 순서를 나타내는 표시값입니다. 중간에 단을 끼워 넣으면 번호는 다시 매겨지지만, 그 단에 달린 피드백과 기록은 그대로 따라갑니다.
순서는 끌어서 옮기거나 "⋯ > 위/아래로 이동"으로 바꿉니다. "N번 위로 이동"의 N은 옮겨 갈 목적지 단 번호입니다 — 86번을 200번으로 지정하면 200번 위로 갑니다.
3. 후보 올리기와 꾸미기
한 단에 사진·영상 후보를 여러 개 올려 두고 검토자가 고르게 합니다.
이미지는 줄이기만 합니다. 원본이 설정 폭보다 작으면 늘리지 않고 그대로 두면서 경고 배지만 띄웁니다 — 확대해서 흐려지는 일이 없습니다.
꾸미기에서 글자·도형·이미지를 얹을 수 있고, 영상은 움짤로 만들어 넣을 수 있습니다.
꾸미기 안에서 움직임은 두 갈래입니다.
[오브젝트 하나의 모션] 오브젝트를 고르면 오른쪽 "선택 항목 > 모션 적용하기"에 있습니다.
- 숫자 카운트업: 글자 안 첫 숫자가 시작값에서 지금 적힌 숫자까지 올라갑니다. 끝값은 글자에 적힌 숫자 그대로이고, 천 단위 쉼표와 소수 자릿수도 적힌 모양을 따라갑니다.
- 제자리 회전: 바퀴 수(1~3)와 방향 다섯 가지 — 시계 / 반시계 / 좌우 뒤집기 / 위아래 뒤집기 / 좌우 흔들기.
[등장 순서와 전환] 오른쪽 "움짤 — 등장 순서와 전환"에서 문단으로 묶습니다.
- 문단마다 효과 여섯 가지 — 페이드인 / 슬라이드업 / 팝인 / 팝인 UP / 와이프 / 회전하며 등장. 팝인 UP은 작게 시작해 원래 크기보다 살짝 부풀며 위로 튀어 올랐다가 제자리로 내려앉습니다.
- 직선은 기울기와 상관없이 슬라이드업·팝인 UP으로 같은 거리만큼 움직이고, 와이프로 그려질 때도 처음부터 제 굵기로 나타납니다.
- 문단마다 지속 시간과 "앞 문단 시작 후 지연"을 따로 정합니다.
- [선택한 오브젝트를 하나씩 문단으로]를 누르면 골라 둔 오브젝트가 하나씩 차례로 나타나도록 문단이 한 번에 만들어집니다.
[보면서 맞추기] 화면 아래에 두 가지가 있습니다.
- [▶ 미리보기 재생]: 서버를 거치지 않고 편집 화면에서 바로 돌려 봅니다. 위의 두 갈래가 함께 재생됩니다.
- [핸들 숨기기]: 선택은 그대로 둔 채 조절 손잡이와 선택 테두리만 감춥니다. 배치와 여백을 결과물 그대로 확인할 때 씁니다.
[선과 글자 다루기]
- 선(직선 / C커브 / S커브): 선 모양 자체를 눌러 잡습니다. 두 끝점 사이의 빈 곳을 눌러도 선이 끌려오지 않고, 선택하면 선을 따라 띠로 표시됩니다. 가는 선도 몇 px 옆까지 잡힙니다. 끝점 손잡이로 한쪽 끝만 옮깁니다.
- 글자 상자: 높이는 글자에 맞춰 저절로 정해지고, 사방 여백은 늘 같습니다. 좌·우 변 손잡이는 줄바꿈 폭, 모서리 손잡이는 글자 크기와 여백을 같은 비율로, 위·아래 변 손잡이는 여백을 바꿉니다. 예전에 만든 글자 상자가 글자보다 작으면 꾸미기를 열 때 맞춰 늘어납니다.
- 이미지 도형에 테두리를 두르면 사진이 테두리 밖으로 비치지 않습니다(실선·점선 모두).
[내 캐릭터] 왼쪽 "내 캐릭터"에 캐릭터를 모아 두고 어느 스토리에서든 다시 씁니다.
- [캐릭터 올리기]: 벡터(SVG)나 투명 배경 그림(PNG·WebP)을 올립니다. 벡터는 크게 넣어도 선명하고, 그림은 큰 원본으로 보관했다가 넣을 때 알맞게 줄여 씁니다.
- [저장소 보기]: 레일 오른쪽에 저장소가 넓게 열립니다. 왼쪽 폴더(전체·미분류·내 폴더)를 골라 보고, 폴더를 만들고·이름을 바꾸고·지웁니다(폴더를 지워도 캐릭터는 미분류로 남습니다). 카드를 폴더로 끌어 옮기거나 [⋯]에서 폴더를 고릅니다. 카드를 누르면 캔버스에 들어가고, 저장소는 열린 채라 여러 개를 연달아 넣을 수 있습니다.
- [AI로 만들기]: 사람·동식물·사물 무엇이든 캐릭터로 만들어, 투명 배경 그림으로 저장소에 넣습니다. AI 크레딧을 씁니다(빠른 초안 / 기본 / 고화질).
1. 참고 이미지 — 자연어 탐색(Openverse·Pixabay에서 이용 허락이 분명한 그림을 찾습니다) / 내 파일 / 내 저장소 / 참고 없이. 썸네일을 누르면 창 왼쪽에 크게 보입니다. 참고가 있으면 그 그림체를 따르고, 캐릭터와 포즈는 새로 만듭니다.
2. 무엇을 만들까요 — 한 줄로 적습니다.
3. 바꿀 포인트 — 부위·부분 / 표정·형태·비율 / 색·재질·옷·소품 세 칸을 채워 [저장]합니다. 하나 이상, 다섯 개까지.
4. "참고한 캐릭터를 그대로 옮기지 않았음"을 확인하고 [만들기]. 내가 AI로 만든 캐릭터를 참고해 바꿔 만들 때는 확인이 필요 없습니다.
- 저작권: AI로 만든 캐릭터라도 저작권 책임은 만든 분에게 있습니다. 참고한 캐릭터와 닮지 않도록 바꿀 포인트를 분명히 적어 주세요. 검색 결과의 라이선스 표시는 올린 사람의 신고라, 남의 캐릭터가 섞여 있을 수 있습니다.
- [만들기 설정 다시 쓰기]: AI로 만든 카드의 [⋯]에서 누르면 만든 당시의 설명·바꿀 포인트·품질·참고 이미지가 채워진 채로 창이 열립니다. 고칠 곳만 고쳐 비슷한 캐릭터를 다시 만듭니다(올린 파일은 저장하지 않아 다시 고릅니다).
다 되면 아래에서 정지 png / 움짤 webp / 움짤 gif 중 하나를 골라 [결과물 만들기]를 누릅니다. 움짤은 문단이 하나라도 있어야 고를 수 있습니다.
4. 검토자 초대
[검토자 초대]에서 링크를 만들어 보냅니다. 검토자는 회원가입 없이 그 링크로 들어옵니다.
검토자가 하는 일은 후보 고르기, 피드백 남기기, 완료 승인입니다. 본문 편집, 단 추가·삭제·이동, 파일 업로드는 작업자만 합니다.
5. 피드백 주고받기
단마다 상태가 있습니다 — 초안 / 피드백 / 수정 / 완료.
흐름 보기 맨 위의 상태 칩을 누르면 같은 상태의 단만 모아 볼 수 있고, 모아 본 그 상태에서 바로 고칠 수 있습니다. 단 추가·삭제·순서 변경은 전체 보기에서 합니다.
고친 뒤 피드백 창에서 [반영 완료]를 누르면 검토자 쪽에 처리됐다고 표시됩니다.
6. 마무리 — 내보내기
[내보내기]를 열면 두 가지를 합니다.
1) 텍스트 복사 — 확정된 이미지·영상을 뺀 본문만 서식 그대로 클립보드에 담습니다. 상세페이지 편집기에 그대로 붙여 넣으세요.
2) 확정 이미지 일괄 다운로드 — 확정된 이미지를 한 번에 내려받습니다. 유튜브 같은 영상 주소는 목록으로 따로 뜹니다.
[클라이언트에게 사본 넘기기] 모든 단이 완료된 스토리는 재편집할 수 있는 사본 그대로 클라이언트에게 넘길 수 있습니다. 메뉴 > [클라이언트에게 사본 넘기기]에서 1회용 링크를 만들어 보내면, 클라이언트가 로그인해 받는 순간 자기 워크스페이스에 똑같은 사본이 생깁니다.
- 원본은 내게 그대로 남습니다. 두 벌은 따로 움직여, 한쪽을 고쳐도 다른 쪽은 바뀌지 않습니다.
- 사본에는 꾸미기·모션·후보 이미지와 영상·썸네일까지 모두 들어갑니다. 쓰지 않은 후보도 복사되므로, 넘기기 전에 필요 없는 후보는 검토자와 상의해 정리해 두세요.
- 받을 때 클라이언트가 내 포트폴리오 공개에 동의할 수 있습니다(선택).
- 링크 하나로 사본 한 벌만 받습니다. 받기 전 링크는 취소할 수 있고, 받아 간 사본은 회수할 수 없습니다. 받으면 알림이 옵니다.
누가 언제 무엇을 했는지는 모두 기록에 남습니다. 검토자 초대가 끝난 뒤에도 그대로 남습니다.
[저장 용량] 대시보드 "사용량 현황"에는 지금 워크스페이스에 남아 있는 파일이 모두 들어갑니다 — 올린 사진·영상 후보, 꾸미기 결과물(정지 png·움짤), AI로 고친 이미지, 썸네일, 내 캐릭터. 지운 스토리·블록·후보의 파일은 바로 빠집니다.