Video: 클로드 역대급 디자인 스킬 업데이트 /design
Channel: 코드팩토리
Duration: 8m 26s
Source: subtitle (auto, ko)
Transcript:
클로드 디자인 이후로 엔트로픽에서 가장 큰 디자인 관련 업데이트를 내줬어요. 디자인 스킬인데요. 클로드 디자인을 엔트로픽의 어떤 툴에서든 우리가 가져와서 사용을 할 수 있도록 설계가 됐습니다. 자, 오늘 영상 끝까지 보시면은 여러분의 비효율적이었던이 디자인 플로우를 제가 완전 싹 다 고쳐 드릴게요. 엔트로픽에서 생각하는 가장 효율적인 디자인법 슬래시 디자인 스킬 한번 알아보도록 할게요. 쏘as지. 자, 여러분이 일단은 클로드를 최신 버전으로 업데이트를 하면요. 슬래시를 눌렀을 때 이제는 디자인이라는 스킬이 이렇게 있을 겁니다. 자,이 친구를 눌러 주면은요. 우리가 뭘 디자인하고 싶은지 넣어 주면은 되거든요. 자, 우리 지금까지 사실 문제가 뭐였냐면은 자,이 디자인은 우리가 웹 디자인만 하는게 아니라 포스터, 소셜, 개시물 무엇이든 우리가 디자인 할 수가 있고요. PPT 같은 것도 할 수가 있고 매번 LLM만으로 우리가 이터레이트 했어야 됐던 비효율적인 거를 굉장히 개선을 잘해 주고 있어요. 자, 그래서 우리가이 디자인 스킬을 사용해서 어떻게 하면 우리 전반적인이 디자인 시스템을 전체를 설계를 할 수 있을까라는 한번 생각을 해 볼 건데요.

일단은 우리가 웹사이트를 디자인을 하고 그거에 대한 소셜 개시물을 만들고 그리고 인쇄물, 포스터 같은 것까지 만들어 보는 과정을 한번 같이 진행을 해 보도록 할게요. 자, 저는 평소에 하이 이상을 사용하는 걸 좋아하는데 어차피 퀄리티에 대한 이야기를 하려는게 아니기 때문에 디자인 진짜 잘해요. 그렇기 때문에 일단은 미디엄으로 굉장히 빠르게 한번 진행을 해 보도록 할게요. 자, 이렇게 질문이 나오는 걸 볼 수가 있고요. 애플 스토어는 애플 기기 리셀링한다고 저는 얘기를 할 거고 색체가 정해진게 없는데 어떻게 진행을 할까요? 자, 저의상도 시한 세 개 먼저 만들어 주도록 이렇게 얘기를 한번 해 볼게요. 자, 여러분이 알다시피 엔트로프에서 공식으로 제공을 해 주는 스킬들은요. 어,이 질문들을 아주 세세하게 하도록 잘 설계가 돼 있어요. 그래서이 스텝들을 잘 따라 주는 거를 추천을 드리고요. 자, 첫 결과물이 이렇게 나왔습니다. 자, 클로드 디자인을 써 보신 분들은 굉장히 익숙한 화면일 거예요. 우리가 일반적으로 이런 디자인 스킬을 사용을 하지 않고서 바로 제작을 하게 되면은 수정을 할 수가 없는 우리가 llm한테 어떤 걸 어떻게 수정해라고 말을 해 줘야 되는 상태가 되는데 지금 볼 수 있는 것처럼 우리가 디자인 스킬을 사용을 했더니 각각 섹션들 우리가 전부 다이 프로퍼티들 선택이 가능하고요.

뭐 더블 클릭하면 우리가 이렇게 볼드로 바꾸거나 글자를 아예 이렇게 뭐 추가하거나 뭐 이런 식으로 아예 수정이 가능하고요. 우리가 피그마나 아니면 페이퍼 같은 데서 수정을 할 수 있는 것처럼 우리가 전부 다 저희 원하는 대로 변경이 가능하다라는 거예요. 그래서 클로드 디자인은 그냥 아예 로컬로 옮겨 와 버린 거죠. 자, 그리고 재미있는게 지금은 페이지가 하나밖에 없지만 저희가 작업을 하면서이 페이지들이 계속 생겨나서 섹션별로 정리할 수 있는 결과를 가져오게 될 겁니다. 자,이 중에서 일단 우리가 고르면 되는데 어, 저는 조금 정신 없는 스타일을 한번 해 보고 싶어서 C로 한번 골라보도록 할게요. 자, 그리고 흥미로운게 굉장히 좀 빠르게 작업을 하기 위해서 실제로 이미지를 만들어서 넣지 않고 이렇게 와이어 프레임이 형태로 작업을 해 둔 거를 볼 수가 있죠. 아주 마음에 듭니다. 자, 그리고 추가로이 위에는이 코멘트 있죠? 자, 이거 클로드 디자인에서 원래 되던 건데 우리가 특정 영역에다가 코멘트를 달고 싶으면은 자, 이렇게 코멘트를 달고서 이거 클로드한테 보내서 작업을 하도록 할 수가 있다라는 겁니다.

자, 그리고 이게 사실상 아티팩트로 사용이 되는 거기 때문에 우리가 링크를 그대로 복사해서 다른 사람한테 보낼 수도 있고요. 그렇게 될 경우에 우리가 디자인을 먼저 해서 클라이언트한테 보내고 컨펌을 받은 다음에 작업을 시작하는 플로우를 만들 수도 있겠죠. 더 이상 우리가 클로드 디자인에 접속해 가지고 작업하고서 그걸 끌고 와서 또 구현을 하는 반복적인 비효율적인 워크플로우를 가져가지 않아도 된다라는 얘기입니다. 자, 완료가 됐습니다. 자, 보니까 여기 이렇게 코멘트도 들어가 있고요. 애플 기기 액세서리 셀러 정적 모이다라고 나와 있는 걸 볼 수가 있어요. 자, 보면은 제가 요청을 했던 대로 홈페이지에 일단 들어갔고요. 이런 형태로 들어가면 된다라고 나온 거 볼 수가 있고. 자, 우리 상품 목록 필터까지 잘 적용이 됐습니다. 자, 상품 상세 이렇게 들어갔고요. 마찬가지로 우리가 뭐 더블 클릭해 가지고 바꿀 수 있어요. 뭐 색깔도 바꾸고 우리가 로우랑 칼럼 이런 것들 다 바꿀 수가 있고 레디우스 같은 것도 우리가 그냥 이렇게 해서 바꿀 수가 있어요.

그렇죠? 둥글러지죠? 이렇게 하면은. 자, 그리고 돌아가면은 장바운에서 우리 주문하는 과정까지 이렇게 다 들어가 있는 거를 볼 수가 있어요. 그죠? 마음에 드시나요? 자, 모바일도 디자인이 돼 있고요. 마찬가지로 우리가 뭐 아이콘 바꾸거나 색깔 바꾸거나 글씨체 크기 전부 다 변경할 수가 있습니다. 자, 그다음에 우리 디자인 컴포넌트죠. 네. 디자인 컴포넌트 이렇게 다 확인을 해 볼 수도 있다. 자, 이걸 기반으로 우리가 만들어 냈다라는 이야기입니다. 자, 그래서 우리가 클로드의 디자인 스킬을 쓰면 이제 진정으로 AI와 사람의 디자인 협업을 우리가 가져갈 수 있게 됐다라고 이야기를 할 수가 있을 것 같습니다. 자, 그런데 여기서 가장 큰 장점은요. 제가 생각을 했을 때 이런 AI와 연동이 잘되는 디자인 툴들은 항상 그냥 단순히 웬만 디자인하는 것뿐만 아니라 다양한 디자인들을 우리가 섞어야 될 때 우리가 컨텍스트를 같이 함께 유지할 수 있는 용도로 굉장히 유용하다고 저는 생각을 해요. 자, 그래서 이번에는 뭐 할 거냐면 인스타그램 소셜 소재 한 세트를 만들어 달라고 얘기를 할 겁니다.

이것도 이제 정적으로 만들어 달라고 할게요. 자, 엔터 눌러 가지고 이것도 한번 작업을 해 보겠습니다. 자, 그러면 우리가 이미 이렇게 실제로 그려 놓은게 첨부할 필요도 없이 이미 컨텍스트 안에 있고 아티팩트 안에 있기 때문에 이것과 비슷한 그리고 여기서 문맥을 가져온 내용으로 우리 소셜 포스트들을 만들게 되겠죠. 한번 기다려 볼게요. 자, 제가 말씀을 드린 대로 실제로 우리 클로드도 브랜드는 1번 캔스에서 정한 그대로 씁니다라고 이야기를 하면서 우리이 브랜드 컬러를 그대로 가져가려고 하는 노력을 보여 주는 걸로 볼 수가 있죠. 자, 이렇게 피드가 나왔고요. 다양한 규격으로 좀 만들었어요. 정사각형 규격이 하나 있고. 자, 우리 흔히 알고 있는 쇼폼 규격도 이렇게 들어가 있습니다. 자, 우리가 배너로 넣을 만한 콘텐츠도 이렇게 다 들어가 있고요. 오픈 그래프로 쓸 만한 이미지도 넣어 줬네요. 굉장히 컴프레시브하게 만들어 준 거를 볼 수가 있어요. 자, 역시나 우리 컨텍스트를 그대로 가져와 가지고 사용을 했기 때문에 색상이라든가 아니면 스타일 그리고 타이프그래피 같은 거를 전부 다 잘 적용을 해 준 거를 확인할 수가 있습니다.

어떤가요? 만족스럽나요? 자, 그리고 제가 시키지도 않은데 알아서 에이전틱하게 지금 검증도 들어간 거를 볼 수가 있고요. 저는 이것까지 보지는 않을게요. 자, 그리고 재미있는게 제, 아티팩트가 독립적으로 이렇게 들어갔기 때문에 기존 우리 디자인 당연히 볼 수가 있고요. 소셜은 따로 이렇게 볼 수가 자, 이렇게 나오죠. 자, 그럼 마지막으로 우리가 인쇄물까지 한번 확인해 보겠습니다. 자, 애플 스토어에 인쇄물 한 번을 만들어 줘라고 하면서 프롬프트를 넣어야 될 건데 마찬가지로 아티팩트 형태로 만들어내고 우리가 원하는 대로 수정을 할 수 있게 결과가 나오겠죠. 그리고 지금까지 작업을 했던 내용들을 기반으로 컨텍스트를 흡수해서 우리가 원하는 형태로 최대한 잘 만들어 줄 겁니다. 그 안에서 또 수정을 할 수도 있을 거고요. 만약에 우리가 지금이 두 개의 스텝을 통해서 우리가 조금 더 원하는 디테일로 이쁘게 수정을 잘 해 놨다라고 하면은 그 수정 사항들까지 전부 다 반영돼서 구현이 될 겁니다. 그래서 우리가이 슬래시 디자인 스킬을 사용해서 하나의 컨텍스트 안에서이 프로세스를 가져가는게 굉장히 프로레시브하게 우리 취향을 반영할 수 있는 좋은 방식이 되겠죠.

자, 이런 식으로 프린트물도 형성이 된 거를 볼 수가 있습니다. 그렇죠? 잘 됐죠? 자, 그래서 이런 식으로 여러분이 슬래시 디자인 스킬 쓰면서 클로드 코드의 장점과 클로드 디자인의 장점을 같이 누리시면 될 거 같고요. 자, 여기에서 모두 우리가 레퍼런스를 하고 컨텍스트에다 주입을 시킬 수가 있기 때문에 뭐 넥스트 JS가 됐든 아니면은 바닐라 자바스크립트 CSS, HTML이 됐든 여러분이 불러와서 여기서부터 똑같은 작업물을 만드는데 아무런 무리가 없다라는 거인지를 해 주시면은 될 거 같아요. 이게 플러스 제가 항상 보여 드린 뭐 익스필드 같은 거 섞어서 이미지 제너레이션하고 영상까지 넣어서 작업을 하시면은 완성도가 높은 결과물을 만들어 낼 수가 있겠죠. 자, 엔트로픽에서 주는 클로드 디자인 이후로 가장 큰 디자인 업데이트. 제가 준비한 영상 여기까지고요. 오늘 영상이 좋았다면 구독과 좋아요, 알림 설정 그리고 하이보이까지 해 주시면은 제가 다음에 더 좋은 영상과 함께 찾아뵙도록 하겠습니다. 감사합니다.

쏘as지.