영상으로 확인하기
글로 보시는 것보다 영상으로 보시는 게 더 편하시다면, 아래 영상 튜토리얼을 참고해주세요!
크리에이지 사용하기
사장님 반갑습니다! 😊
크리에이지에 오신 것을 진심으로 환영합니다.
이 글에서는 상세페이지를 만드는 방법부터, 에디터에서 수정하는 방법, 툴바와 드래그 앤 드롭 기능, 그리고 새롭게 추가된 GIF/애니메이션 기능까지 전부 빠짐없이 설명드립니다.
천천히 따라오시면 누구나 쉽게 상세페이지를 만드실 수 있습니다!
로그인 이후 페이지
새 디자인 만들기
여기서 디자인이란 상세페이지 1개를 의미합니다.
상세페이지를 만들기 위해서는 새 디자인 만들기 버튼을 눌러주세요.
로그인을 하시면 위와 같은 대시보드 화면이 나옵니다.
화면 중앙에 있는 "새 디자인 만들기" 버튼이 보이시나요?
이 버튼을 클릭하시면 바로 상세페이지 제작을 시작하실 수 있습니다.
이전에 만들었던 디자인이 있다면 이 화면에서 바로 확인하고 수정하러 들어가실 수도 있어요.
버튼을 누르시면 위와 같은 선택 화면이 나타납니다.
처음 시작하시는 분이라면 "새로 시작하기" 버튼을 눌러주세요.
완전히 처음부터 새로운 상세페이지를 만드실 수 있습니다.
프로젝트 기본 정보 입력하기
상품 이름 입력
가장 먼저 상품 이름을 입력하는 단계입니다.
판매하시려는 상품의 이름을 적어주세요.
예를 들어 "프리미엄 무선 이어폰", "수제 딸기잼" 같은 식으로요.
이 이름은 나중에 AI가 상세페이지 내용을 작성할 때 기본 정보로 활용되니, 실제 판매에 사용하실 상품명을 정확히 적어주시는 게 좋습니다.
콘텐츠 유형 선택
다음으로 콘텐츠 유형을 선택하는 화면입니다.
현재는 상세페이지를 선택하시면 됩니다.
선택하신 후 다음 버튼을 눌러주세요.
앞으로는 상세페이지 외에도 배너, 썸네일 등 더 다양한 콘텐츠 유형이 추가될 예정이니 기대해주세요!
카테고리 선택
이제 내 상품에 맞는 카테고리를 선택해주세요.
카테고리를 정확하게 선택하시는 게 중요한 이유가 있는데요,
각 카테고리마다
✔ 해당 상품군에 최적화된 디자인 템플릿
✔ 실제로 잘 팔리는 상세페이지에서 검증된 구성 공식
이 미리 세팅되어 있기 때문입니다.
예를 들어 식품 카테고리는 식욕을 자극하는 레이아웃이, 패션 카테고리는 착용 사진을 강조하는 구성이 자동으로 적용됩니다.
내 상품과 가장 가까운 카테고리를 골라주시면 AI가 훨씬 더 좋은 결과물을 만들어드릴 수 있어요.
기획서 작성하기
이 단계는 상세페이지에 들어갈 실제 내용을 입력하는 핵심 단계입니다.
상품의 특징, 장점, 사용법 등 고객에게 전달하고 싶은 정보를 여기서 작성하게 됩니다.
위 화면처럼 각 항목별로 내용을 채워넣으시면 되는데요,
직접 타이핑하셔도 되고, 아래에서 설명드릴 AI 자동 작성 기능을 활용하시면 훨씬 편리합니다.
사진 업로드 하기
상품 사진을 업로드해주세요.
상세페이지의 퀄리티는 사진에서 결정된다고 해도 과언이 아닙니다!
사진이 많을수록 AI가 더 다양한 구도와 레이아웃으로 상세페이지를 꾸밀 수 있기 때문에, 가지고 계신 상품 사진을 가능한 많이 올려주시는 것을 추천드립니다.
상품 정면, 측면, 디테일 컷, 사용 장면 등 다양한 각도의 사진이 있으면 특히 좋아요.
AI로 내용 채워넣기
기획서를 직접 작성하기 어려우시다구요? 걱정 마세요!
AI가 자동으로 상세페이지 내용을 작성해드립니다.
앞서 입력하신 상품 이름, 카테고리, 업로드한 사진을 바탕으로 AI가 상품의 특징과 셀링포인트를 분석해서 기획서를 자동으로 채워넣어줍니다.
AI가 작성한 내용을 확인하신 후, 마음에 들지 않는 부분만 수정하시면 되니까 시간이 크게 절약됩니다.
임시저장하기
작업 중에 갑자기 자리를 비우셔야 하거나, 나중에 이어서 작업하고 싶으실 때 임시저장 버튼을 눌러주세요.
작성 중이던 내용이 그대로 저장되어, 다음에 돌아오셨을 때 이어서 작업하실 수 있습니다.
제출하기
기획서 내용을 모두 확인하셨다면 제출 버튼을 눌러주세요.
제출을 누르시면 AI가 기획서를 바탕으로 디자인 작업을 시작합니다.
보통 1~2분 정도 소요되며, 완성되면 바로 결과물을 확인하실 수 있습니다.
상세페이지 생성 완료
축하합니다! 🎉 상세페이지가 만들어졌습니다!
AI가 자동으로 여러 섹션으로 구성된 상세페이지를 완성해드렸어요.
이제 이 상태로 바로 사용하셔도 되고, 더 마음에 들도록 수정하고 싶으시다면 스튜디오에서 편집하실 수 있습니다.
스튜디오 페이지 사용하기
스튜디오는 만들어진 상세페이지를 자유롭게 수정할 수 있는 편집 공간입니다.
왼쪽에는 유동적 기능 영역, 가운데에는 에디터 영역, 오른쪽에는 AI채팅 영역이 위치합니다. 왼쪽 유동적 기능 영역은 기본적으로는 접혀있고, 특정 요소를 선택했을 때 알맞은 패널이 자동으로 열립니다.
이 화면에서 텍스트 수정, 이미지 교체, 섹션 추가/삭제 등 모든 편집 작업을 하실 수 있습니다.
직접 클릭해서 수정하는 방법과 AI에게 채팅으로 요청하는 방법, 두 가지를 모두 지원하니 편하신 방식으로 사용해보세요.
에디터 영역 확대/축소
에디터 영역 오른쪽 아래에 에디터 영역을 확대/축소할 수 있는 버튼이 존재합니다. 이를 통해서 각자의 작업 환경에 맞는 확대 범위를 설정할 수 있습니다.
AI 채팅을 통한 수정
스튜디오 왼쪽의 AI 채팅창을 활용하면, 마치 디자이너에게 말하듯이 한국어로 수정을 요청하실 수 있습니다.
예를 들어 이런 것들이 가능해요:
- 섹션 추가: "후기 섹션 하나 추가해줘"
- 섹션 수정: "첫 번째 섹션 배경색을 파란색으로 바꿔줘"
- 섹션 삭제: "마지막 섹션 삭제해줘"
- 이미지 생성: "고급스러운 느낌의 배경 이미지 만들어줘" (5크레딧 소모)
- GIF 생성: "고급스러운 느낌의 배경에서 제품이 사람에 쓰여지는 동영상 만들어줘" (30-40 크레딧 소모)
- 애니메이션 생성: "이 섹션에 적절한 애니메이션 추가해줘."
- 애니메이션 삭제: "이 섹션 애니메이션 삭제해줘."
- ⭐ 그 외 위의 기능들이 합쳐진 프로세스 : "이 이미지를 레퍼런스 삼아서 모델이 사용하면서 행복해 하는 사진 만들어서 그 사진 가지고 새 섹션 만들고, 어울리는 애니메이션 적용해줘."
AI 수정은 템플릿에 구애받지 않고 완전히 자유로운 디자인 변경이 가능하기 때문에, 원하시는 대로 세밀하게 조정하실 수 있습니다.
상세페이지는 만들어졌는데, 이 다음에 뭘 해야할지 모르겠다? '너무 자유도가 주어지니까 뭘 입력해야 할지 모르겠어' 라고 하시는 분들은 채팅창을 주목해보세요! 매 채팅 마지막에는 다음 행동을 AI가 알아서 추천해줍니다. 사장님께서는 원하시는 채팅을 누르시고 보내시면 됩니다!
클릭하시면 추천 내용이 채팅창으로 들어갑니다.
그런데 이런 생각 하시지 않으셨나요? 이미지 생성, 움직이는 이미지 생성은 크레딧이 소모되는 과정인데 이걸 AI가 맘대로 하면 내 크레딧이 너무 빨리 소모되는 거 아냐?
맞습니다. 저희도 그 점을 인지하고 있었고, 그래서 AI가 크레딧을 소모하는 과정을 하기 전에 사장님께 그 과정을 시작할지 말지를 물어봅니다. 여기서 허용을 눌러야만 AI가 이 기능을 수행합니다.
정말 한명의 디자이너 같은 느낌이죠! 원하는 행동이 아니였다면 여기서 거절 버튼을 누르시면 됩니다.
거절 버튼을 누르면 아래에 대신 어떤 행동을 할지 입력하는 창이 뜨는데요, 원하시는 행동을 입력하시고 버튼을 눌러주시면 됩니다.
그런데, 이 비서가 매번 물어보면 귀찮게 느껴지실 사장님도 계실겁니다. 그래서, 왼쪽 아래 있는 버튼인, '이 프로젝트에서 항상 승인' 버튼이 있습니다. 이 버튼을 누르시면 이 버튼을 누르신 프로젝트에서는 이 작업을 물어보지 않고 바로 진행합니다. (물어본 작업에 대해서만 허용됩니다. 예를 들어, 이미지 생성 작업을 허용하셨다면, 움직이는 이미지 생성 작업에 대해선 여전히 AI가 할지 말지 물어봅니다.)
여기서 한 발 더 나아가서, 항상 허용을 눌렀는데, 이제는 좀 물어보고 했으면 좋곘다고 마음이 바뀌신 사장님들도 있으실 겁니다. 그런 분들은 아래의 과정을 따라오시면 됩니다.
위의 ...을 눌러주시고
'도구 승인 설정' 버튼을 눌러주시고
이 화면에서 원하시는 승인 버튼을 수정해주시면 됩니다.
레퍼런스 활용
"이런 느낌으로 만들어줘!"라고 말로 설명하기 어려우실 때, 레퍼런스 이미지를 활용해보세요.
채팅창에서 레퍼런스 이미지를 첨부하실 수 있습니다. 마음에 드는 다른 상세페이지나 디자인 이미지를 올려주시면 됩니다.
이렇게 레퍼런스를 선택하시고 어떤 부분을 참고할지 함께 말씀해주시면 더 정확한 결과를 얻으실 수 있어요.
AI가 레퍼런스의 스타일과 분위기를 분석해서 비슷한 느낌으로 디자인을 수정해드립니다.
경쟁사나 유명 브랜드의 상세페이지를 참고하고 싶을 때 정말 유용한 기능이에요!
드래그 앤 드롭으로 요소 추가하기
코딩이나 복잡한 조작 없이, 왼쪽 툴바에서 원하는 요소를 잡아서 끌어다 놓기만 하면 텍스트나 이미지를 바로 추가할 수 있습니다.
왼쪽 툴바에 있는 텍스트 버튼 또는 이미지 버튼을 마우스로 잡은 채 원하는 위치로 끌어다 놓아주세요.
위 움짤처럼 정말 직관적이죠?
딱 원하는 자리에 요소를 떨어뜨리면 바로 추가됩니다.
파워포인트에서 도형 넣듯이 쉽게 사용하실 수 있어요!
요소 드래그 앤 드롭으로 위치 이동
이미 배치된 텍스트나 이미지의 위치를 바꾸고 싶으실 때도 드래그 앤 드롭으로 간단하게 이동할 수 있습니다.
이동하고 싶은 요소를 클릭한 후 드래그하면 원하는 위치로 자유롭게 옮길 수 있습니다.
레이아웃을 미세하게 조정하고 싶을 때 아주 편리한 기능이에요.
요소 복제 / 삭제
요소를 선택하시면 아래와 같은 액션 메뉴가 나타납니다.
여기서 다음 작업들을 하실 수 있어요:
- 이동: 요소를 다른 위치로 옮깁니다
- 복제: 동일한 요소를 하나 더 만듭니다 (같은 스타일의 텍스트나 이미지가 여러 개 필요할 때 유용해요)
- 삭제: 필요 없는 요소를 제거합니다
- 크기 조절: 요소의 크기를 키우거나 줄일 수 있습니다
키보드 단축키도 지원하니 더 빠르게 작업하실 수 있어요:
- Ctrl+C: 선택한 요소 복사
- Ctrl+V: 복사한 요소 붙여넣기
요소의 모서리나 가장자리를 드래그하면 이렇게 크기를 자유롭게 조절하실 수 있습니다. 텍스트 영역을 넓히거나, 이미지 크기를 키우는 등의 작업이 가능해요.
복제된 요소는 원본 바로 옆에 생성되며, 독립적으로 수정이 가능합니다.
비슷한 구성을 반복해야 할 때 하나하나 새로 만들 필요 없이 복제 후 내용만 바꾸시면 됩니다.
새롭게 보라색 버튼이 1개 추가되었는데요, 이 버튼을 누르면 AI에게 좀 더 정확한 수정 맥락을 알려줄 수 있습니다! 후에 나올 '채팅에서 수정하기'의 요소버전이라고 생각하시면 편할 것 같아요.
텍스트 수정
텍스트를 수정하고 싶으시면 해당 텍스트를 더블클릭해주세요.
더블클릭하시면 바로 텍스트 편집 모드로 전환되어, 원하는 내용으로 자유롭게 수정하실 수 있습니다.
오타 수정, 문구 변경, 추가 설명 삽입 등 어떤 수정이든 바로바로 가능해요.
섹션 툴바 기능
각 섹션 위에 섹션 툴바가 있습니다.
이 툴바를 통해 섹션 단위로 다양한 편집 작업을 하실 수 있어요.
툴바에는 섹션 제목 수정, AI 채팅 수정, 순서 변경, 복제, 삭제 등의 기능이 모여 있습니다. 하나씩 살펴볼게요.
섹션 제목 수정
섹션 제목을 더블클릭하시면 바로 수정 모드로 전환됩니다.
섹션 제목은 상세페이지에 직접 노출되지는 않지만, 여러 섹션을 관리하실 때 어떤 섹션인지 한눈에 파악할 수 있도록 도와주는 역할을 합니다.
"상품 소개", "사용 후기", "배송 안내" 등 알아보기 쉬운 이름으로 바꿔두시면 편집할 때 훨씬 편리해요.
채팅에서 수정하기
특정 섹션만 집중적으로 수정하고 싶으실 때는, 해당 섹션을 선택한 상태에서 AI 채팅으로 수정 요청을 보내주세요.
"이 섹션 배경을 흰색으로 바꿔줘", "텍스트를 더 크게 만들어줘", "이미지 위치를 왼쪽으로 옮겨줘" 같은 요청을 자연스럽게 입력하시면 AI가 해당 섹션만 정확하게 수정해드립니다.
위 움짤처럼 채팅으로 요청하면 AI가 실시간으로 디자인을 수정해주는 모습을 확인하실 수 있습니다.
직접 하나하나 수정하기 번거로운 복잡한 변경도 한 줄의 채팅으로 해결할 수 있어서 정말 편리해요!
순서 변경
섹션의 순서를 바꾸고 싶으실 때는 툴바의 **순서 변경 버튼(화살표)을 이용해주세요.
위/아래 화살표를 클릭하시면 해당 섹션이 한 칸씩 위로 또는 아래로 이동합니다.
예를 들어, 후기 섹션을 상품 소개 바로 아래로 올리고 싶다면 위쪽 화살표를 몇 번 클릭하시면 됩니다.
섹션 복제
마음에 드는 섹션이 있다면 복제 버튼을 눌러 똑같은 섹션을 하나 더 만들 수 있습니다.
복제된 섹션은 원본 바로 아래에 추가되며, 내용만 다르게 수정하시면 비슷한 구성의 섹션을 빠르게 만드실 수 있어요.
예를 들어 "컬러 옵션 소개" 섹션을 복제해서 각 컬러별 설명 섹션을 쉽게 만들 수 있습니다.
섹션 삭제
필요 없는 섹션은 삭제 버튼으로 깔끔하게 제거하실 수 있습니다.
AI가 만들어준 섹션 중 내 상품에 맞지 않는 부분이 있다면 과감하게 삭제하시고, 필요한 섹션만 남겨두세요.
단, 삭제한 섹션은 복구가 어려울 수 있으니 신중하게 결정해주세요!
⭐ 애니메이션 관련 버튼
섹션에 애니메이션 관련 요소들이 있다면 툴바에 있는 버튼이 늘어납니다. 천천히 알아봐요.
애니메이션 재생
애니메이션 관련 요소들을 play하여 작업상태를 확인해 볼 수 있는 버튼입니다. gif, 동영상, 애니메이션 등이 움직이면서 지금 작업 상태를 확인하실 수 있어요.
애니메이션 삭제
섹션 안에 있는 애니메이션을 다 삭제하는 기능입니다. 이 버튼을 눌렀다고 해서 gif/동영상이 사라지진 않고, 동적으로 움직이는 애니메이션만 삭제가 됩니다.
툴바 숨기기
편집 화면이 좀 더 넓었으면 좋겠다 싶으시면, 툴바를 숨길 수 있습니다.
화면 왼쪽의 툴바 숨기기 버튼을 클릭하시면 툴바가 접히면서 미리보기 영역이 넓어집니다.
위 움짤처럼 툴바를 접었다 펼쳤다 하면서 상황에 맞게 사용하실 수 있어요.
전체적인 완성 모습을 확인하고 싶을 때는 툴바를 숨기고, 수정 작업을 할 때는 다시 펼쳐서 사용하시면 됩니다.
왼쪽 패널
스튜디오 화면 왼쪽에 위치한 패널에서는 섹션 관리, 텍스트 스타일 수정, 미디어 관리, AI생성, 아이콘, 애니메이션 관리, 레이아웃 관리 등 세부적인 편집 기능을 사용하실 수 있습니다.
섹션 목록
왼쪽 패널의 섹션 목록에서는 현재 상세페이지에 포함된 모든 섹션을 한눈에 확인하실 수 있습니다.
여기서 특정 섹션을 클릭하시면 해당 섹션으로 바로 이동하기 때문에, 섹션이 많아졌을 때 원하는 부분을 빠르게 찾아가실 수 있어요.
텍스트 스타일
텍스트를 선택하시면 왼쪽 패널에서 텍스트 스타일을 세밀하게 조정하실 수 있습니다.
글꼴, 글자 크기, 색상, 굵기, 정렬 방식 등을 자유롭게 변경하실 수 있어요.
브랜드의 톤앤매너에 맞게 텍스트를 꾸며보세요.
사진 편집
상세페이지에 들어간 사진을 더 예쁘게 다듬고 싶으시다면 사진 편집 기능을 활용해보세요.
이미지를 선택하시면 왼쪽 패널에 사진 편집 옵션이 나타납니다. 여기서 이미지를 교체할 수 있어요.
이미지의 표시 영역을 조절하실 수 있습니다. 상품의 핵심 부분이 잘 보이도록 프레임을 맞춰주세요.
크롭 도구를 이용하면 사진에서 원하는 영역만 잘라내서 사용하실 수 있습니다. 불필요한 배경을 제거하거나 상품을 더 크게 보여주고 싶을 때 유용해요.
편집이 완료되면 적용 버튼을 눌러 변경사항을 저장해주세요.
별도의 이미지 편집 프로그램 없이도 크리에이지 안에서 간단한 사진 편집을 바로 하실 수 있습니다.
배경 제거 버튼
새로 생긴 기능입니다. 말 그대로 이미지의 배경을 제거해주는 기능입니다. 사진을 선택하고, 배경제거 버튼을 누른다면, 다음과 같은 결과를 얻으실 수 있습니다.
⭐ AI 생성
상품 사진 외에 배경 이미지나 분위기 이미지 혹은 움직이는 이미지가 필요하실 때 AI이미지 기능을 활용해보세요. 왼쪽 'AI 생성' 버튼을 눌러서 사용해 보실 수 있습니다.
- 이미지 클릭하고 'AI 생성' 버튼 누르기
선택하신 이미지를 바탕으로 새로운 이미지/움직이는 이미지 를 생성하실 수 있습니다. 원하시는 내용을 적으시고, 결과를 받아보세요.
AI 사진 생성
원하는 이미지를 텍스트로 설명하시면 AI가 맞춤 이미지를 만들어드립니다.
예를 들어 "따뜻한 느낌의 나무 테이블 배경", "깔끔한 흰색 대리석 배경" 같은 요청이 가능해요.
GIF 생성
원하시는 GIF를 텍스트로 설명하시면 AI가 맞춤 GIF를 만들어드립니다. 예를 들어 "이 제품을 실제로 쓰는 모습을 만들어줘" 같은 수행을 할 수 있습니다.
- 아무것도 클릭 안하고 'AI 생성' 버튼 누르기
이미지 없이 단순 텍스트 만으로 원하시는 이미지, 움직이는 이미지를 생성하실 수 있습니다.
만약 원하시는 레퍼런스 사진이 있다면 버튼을 클릭하여 업로드한 사진 중에서 레퍼런스 삼을 사진을 고를 수도 있습니다.
아이콘 설정
왼쪽 아이콘 탭에서 아이콘을 추가하고, 원하는 아이콘으로 변경할 수 있습니다.
⭐ 애니메이션 설정
이번 업데이트의 가장 큰 기능이라고 할 수 있을 것 같은데요, 각각의 요소 애니메이션 설정을 할 수 있습니다.
애니메이션은 8가지 애니메이션을 지원합니다.
깜빡임
순차 페이드인
슬라이드인
글자색 변경
배경색 변경
타이핑
숫자 카운트업 & 바 채우기
물론 이 모든 것은 채팅으로도 가능합니다. 하나하나 설정하기 어렵다면 AI에게 도움을 요청해보세요! (예시 : 채팅에서 수정하기 선택 후 "이 섹션 어울리는 애니메이션 추가해줘")
레이아웃 스타일
레이아웃 요소를 선택하시면 왼쪽 패널에서 레이아웃을 세밀하게 조정하실 수 있습니다.
내보내기
상세페이지 수정이 모두 완료되셨다면, 이제 내보내기를 통해 실제 쇼핑몰에 적용하실 수 있습니다.
화면 상단의 내보내기 버튼을 클릭해주세요.
내보내기 방식 선택하기
내보내기 방식을 선택하실 수 있습니다. 크리에이지에서는 이미지, 웹 배포(피그마) 두 가지 방식을 지원합니다.
- 이미지 내보내기: 상세페이지를 이미지 파일로 다운로드합니다. 스마트스토어, 쿠팡 등 대부분의 쇼핑몰에서 이미지를 바로 업로드하여 사용하실 수 있어요.
- 웹 내보내기: 배포된 링크를 받을 수 있습니다. 자사몰이나 카페24, 아임웹 등에 직접 삽입하실 수 있습니다.
이미지 내보내기
섹션의 성격
섹션은 크게 2가지로 분류됩니다.
- 동적 섹션 : GIF, 움직이는 이미지, 애니메이션 이 포함된 섹션
- 정적 섹션 : 그 외 섹션
내보내기 모드
내보내기 모드에는 개별 파일, 하나의 이미지 총 2개의 모드가 존재합니다.
- 개별 파일 : 각각의 섹션마다 이미지가 생성됩니다.
- 하나의 이미지 : 순서에 따라서 동적 섹션들을 기준으로 잘라서 내보냅니다.. 예를들어 5개의 섹션 1,2,3,4,5가 있는데, 2가 동적섹션 1345가 정적섹션이면 (1)(2)(345) 총 3개의 이미지가 뽑힙니다.
내보내기 설정
동적 섹션과 정적섹션을 각각 어떻게 내보낼 지 설정하실 수 있습니다.
정적 섹션의 경우 png,jpg,webp를 동적 섹션의 경우 webp, gif를 지원하고 있습니다.
웹 내보내기
웹 내보내기를 선택하시면 배포된 링크를 얻을 수 있습니다.
자사몰이나 카페24, 아임웹 같은 플랫폼의 HTML 에디터에 이 코드를 붙여넣으시면 상세페이지가 그대로 반영됩니다.
이미지 내보내기와 달리 텍스트가 검색엔진에도 잡히기 때문에 SEO에도 유리합니다.
크리에이지는
사장님의 상세페이지 제작을 가장 쉽고 빠르게 만들어드립니다.
언제든지 편하게 사용해주세요! 🚀