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