읽을거리 · AI 디자인
쇼피파이 '캔버스', 가게 전체를 한 판에 펼쳐 놓고 AI와 고친다
쇼피파이가 10월 1일 내놓은 캔버스는 가게의 모든 페이지를 한 화면에 펼치고, 눌러서 고치거나 사이드킥에게 말로 시키는 작업대다. 무엇이 달라졌는지, 아직 안 되는 건 뭔지 그림과 표로 정리했다.
쇼피파이가 10월 1일(미국 시간) '캔버스(Canvas)'를 내놓았다. 온라인 가게를 꾸미는 새 작업대다.
이름부터 디자이너에게 익숙하다. 실제로 생긴 것도 그렇다. 가게의 모든 페이지를 한 판에 펼쳐 놓고, 손으로 끌어 옮겨 다니고, 확대해서 들여다본다. 피그마 파일을 열었을 때와 비슷한 감각이다. 다른 점은 그 판 위에 있는 게 시안이 아니라 실제로 돌아가는 가게라는 것.
먼저 밝혀 둘 것. 캔버스는 앞으로 며칠에 걸쳐 가게마다 차례로 열린다. 나는 쇼피파이 가게를 운영하지 않아서 직접 써 보지 못했다. 아래 내용은 쇼피파이 발표와 변경 기록, 그리고 이를 다룬 기사를 바탕으로 했다.
한 페이지씩에서, 한 판으로
지금까지 쇼피파이 가게는 '테마 편집기'에서 고쳤다. 페이지를 하나 열고, 왼쪽에 줄지어 있는 설정 칸을 하나씩 눌러 바꾸는 방식이다. 홈 화면을 고치다가 상품 페이지를 보려면 페이지를 바꿔 열어야 했다.
캔버스는 이걸 뒤집었다. 가게의 페이지, 디자인 요소, 디자인 시스템이 한 화면에 다 놓인다. 고치는 길은 두 가지다.
- 직접 누른다. 판 위의 아무 요소나 눌러서 바로 고친다.
- 말로 시킨다. 옆 대화창에서 쇼피파이의 AI 비서 '사이드킥'에게 원하는 걸 말한다. 섹션 하나부터 가게 전체를 갈아엎는 일까지, 바뀌는 모습이 판 위에 바로 나타난다.
미리보기도 그림이 아니다. 쇼피파이는 화면에 그려지는 게 목업이 아니라 가게 뒤의 실제 코드라고 강조했다. 그래서 애니메이션과 상호작용이 살아 있는 채로, 상품이나 컬렉션을 바꿔 끼우고 화면 크기를 바꿔 가며 확인할 수 있다.
2주와 20분
쇼피파이의 프로덕트 디렉터 벤 셀은 의류 브랜드 Kotn의 공동 창업자이기도 하다. 그가 발표에서 꺼낸 비교가 눈길을 끈다.
12년 전 Kotn을 만들 때 나는 코딩을 할 줄 알았는데도, 대충 돌아가는 가게 하나를 만드는 데 2주가 걸렸다. 지금은 쇼피파이에서 누구든 20분 만에 완전히 맞춤형 가게를 만든다. 그때 내가 만든 것보다 훨씬 나은 가게를.
그래프로 그려 보면 아래 막대는 거의 점이다. 다만 이건 회사 사람의 회고와 홍보가 섞인 말이지, 같은 가게를 같은 조건으로 잰 기록은 아니다. 20분이면 '시작'은 된다 정도로 읽는 게 알맞다. 사진을 고르고, 문구를 다듬고, 상품 정보를 채우는 시간은 여기에 들어 있지 않다.
아직 안 되는 것
출시 첫날의 캔버스는 빈자리가 꽤 있다. 쇼피파이는 차차 채우겠다고 했다.
| 항목 | 지금 캔버스에서는 |
|---|---|
| 테마 스토어의 외부 테마 | 쓸 수 없음. 쇼피파이가 만든 테마와 직접 만든 테마만 |
| 앱 블록·앱 임베드 | 넣거나 설정할 수 없음 |
| 새 블록 추가 | 손으로는 안 되고 사이드킥에게 부탁해야 함 |
| 마켓별 꾸미기·번역 | 안 됨. 번역은 Translate & Adapt 앱에서 따로 |
| 테마 업데이트 | 캔버스에서 고친 테마는 더 이상 받지 못함 |
| 테마 파일 내려받기 | 안 됨 |
출처: 쇼피파이 변경 기록, TechCrunch. 사이드킥은 모든 요금제에서 추가 비용 없이 쓴다.
눈여겨볼 건 맨 아래 두 줄이다. 캔버스에서 고친 테마는 원래 테마의 업데이트를 더 이상 받지 못하고, 파일을 내려받아 다른 곳에서 고칠 수도 없다. 한 번 들어가면 그 테마는 캔버스 안에서만 산다.
다행히 시작은 조심스럽게 할 수 있다. 온라인 스토어 > 테마에서 새 테마를 캔버스로 만들거나, 지금 테마를 복제해서 캔버스로 연다. 원래 테마는 기존 편집기에 그대로 남는다. 캔버스는 아직 데스크톱에서만 열린다.
디자이너에게 달라지는 것
쇼피파이 가게를 만들어 주는 일을 하는 디자이너라면, 일의 모양이 조금 바뀐다.
지금까지는 피그마에서 시안을 만들고, 개발자나 테마 편집기에서 그걸 옮기는 두 단계였다. 캔버스는 그 사이를 줄인다. 시안을 그리는 판과 실제 가게가 같은 판이 되니까. 대신 사장님이 직접 사이드킥에게 "버튼을 검정으로"라고 말하는 순간도 같이 온다.
그러니 남는 일은 이쪽이다. 어떤 버튼이 검정이어야 하는지, 왜 그런지를 정하고 적어 두는 일. 판 위에 디자인 시스템이 함께 놓인다는 건, AI가 그 규칙을 읽고 따른다는 뜻이기도 하다. 규칙이 비어 있으면 AI가 알아서 채운다. 이 이야기는 내일 AI에게 디자인 규칙을 건네는 파일, DESIGN.md에서 이어서 다룬다.
또 하나. 지난주 데브데이 정리에서 디자인 툴이 챗GPT 안으로 들어간다고 적었다. 이번에는 반대로 장사하는 도구 안으로 디자인 작업대가 들어왔다. 어디서 시작하든 실물에 바로 닿는 쪽으로 흐름이 모이고 있다.
그래서 지금은
쇼피파이 가게가 있다면, 지금 테마를 복제해서 캔버스로 열어 보는 정도가 알맞다. 원본은 그대로 두고, 앱 블록이나 번역을 쓰는 가게라면 아직 옮기지 않는 게 낫다.
복제본에서 해 볼 만한 건 이것. 평소 가게의 규칙 세 가지(예: 버튼 모양, 제목 글자 크기, 사진 비율)를 사이드킥에게 먼저 알려 주고, 그다음 페이지 하나를 새로 만들게 해 보자. 규칙을 몇 페이지까지 지키는지 보면 이 작업대를 어디까지 믿어도 될지 감이 온다.
쇼핑몰 레퍼런스가 필요하다면 UI/UX 레퍼런스에, AI 툴은 AI 디자인 툴에 모아 두었다.
출처: Shopify 'Introducing Canvas', Shopify 변경 기록, TechCrunch, Unite.AI, ecommercenews.