Video: 클로드 디자인! 결국 디자인까지 정복해버린 앤트로픽!
Channel: 코드팩토리
Duration: 9m 14s
Source: subtitle (auto, ko)
Transcript:

디자인 시스템 만들고 와이어프레임 만들고 프로토타입 만들고 프레젠테이션 덱 만들고 클로드 코드한테 바로 넘겨 버리기. 아키모링 쏘지. 자, 오늘도 맛있는 거 하나 가져왔죠. 자, 오늘은 앤트로픽에서 몇 시간 전에 새로 출시한 클로드 디자인에 대해서 한번 이야기를 해 보도록 하겠습니다. 자, 꽤나 마음에 드는 기능이거든요. 자, 뭐냐? 우리가 스티치라든가 페이퍼라든가 펜슬에서 하던 기능들을 엔트로픽에서 생각하는 방식대로 구현이 됐다라고 보시면 될 거 같아요. 아, 이거 그냥 또 다른 스티치 아니야라고 생각할 수가 있는데 그렇지는 않아요. 굉장히 조금 더 주관적인 의견이 많이 들어간 형태라고 생각하시면 될 것 같습니다. 그래서 그렇기 때문에 저는 조금 더 마음에 드는 부분이 있어요. 자, 일단은 우리가 뭘 할 수 있냐면요. 가장 첫 번째로 디자인 시스템을 셋업을 할 수가 있는데 자, 들어가면 우리가 뭐 회사에 대한 정보를 넣거나 기텀 링크를 넣거나 아니면 소프스 코드를 넣거나 아니면 피그마 파일 같은 걸 넣게 되면요.

제가 미리 한번 돌려 놨는데 자 이런 식으로 우리가 정보를 받을 수가 있습니다. 엑센트 컬러 뭐 아바타 이렇게 생겼고 배치 뭐 이렇게 생겼고 이런 것들을 받을 수가 있고요. 왼쪽에서 우리가 채팅을 해 가지고이 요소들을 전부 다 변경을 할 수도 있어요. 자, 그리고이 뉴 디자인 유 시스템이라는 거를 누르게 되면이 디자인 시스템을 그대로 사용해서 우리가 디자인을 진행을 할 수가 있고요. 스티치에서 디자인 시스템 먼저 나온 다음에 컴포넌트들이 생기는 거랑 비슷하다고 생각하시면 될 거 같아요. 자, 그럼 우리가 실제로 뭔가 조금 한번 만들어 볼 건데 자, 어떤 것들이 있냐? 자, 우리 다른 툴들을 생각을 해 보면은 굉장히 좀 자유도가 높단 말이에요. 그죠? 자, 그런데이 클로 디자인 같은 경우는 일단은 프로토타이핑 할 수 있는 툴, 그리고 슬라이드덱 이렇게 두 가지로 나눠져 있습니다. 자, 템플릿을 사용해서 우리가 만들 수도 있고요. 템플릿을 생성해 가지고 우리가 반복적으로 사용을 할 수도 있어요. 자, 그럼 우리가 실제 시나리오를 한번 작업을 해 볼 건데 자, 이렇게 제목을 SNS라고 넣고서 우리 SNS를 한번 디자인을 해 보고 이걸 실제로 우리 클로드까지 가져오는 프로세스를 한번 다 같이 해 보도록 할게요.

자, 우리가 실제 디자인을 진행을 할 때 와이어프레임부터 만들고 그 중에 마음에 드는 것들을 골라서 우리가 디자인을 제작을 하게 되죠. 자, 그 과정 그리고 플러스 이거를 우리가 프레젠트 할 수 있는 슬라이드덱까지 한번 만들어 보도록 하겠습니다. 전부 다 클로드 디자인에서 할 수 있다는 거 보여 드릴게요. 자, 와이어프레임을 선택하고서이 크리에이트를 하면요. 바로 프로젝트가 생성이 되고요. 자, 여기 와이어 프레임이라고 이렇게 태그가 돼 있잖아요. 그죠? 자, 그러면 우리가 여기서 SNS 만들어 줘라고 대충 한번 일단 던져 볼게요. 자, 그럼 바로 작업을 하게 되고요. 자, 이게 조금 재미있어요. 자, 우리 클롯한테 어떤 프롬프트를 넣으면은 실제로 우리한테 어떤 질문들을 하고서 정확한 의도를 파악하는 것처럼 여기서도 마찬가지로 어떤 류에 디자인을 하고 싶은지 우리한테 질문하는 걸로 볼 수가 있어요. 자, 저 같은 경우에는 사진 이미지 중심이라고 선택을 할 거고요. 플랫폼은 웹이라고 할 겁니다. 자, 타겟은 20대 대학생.

자, 피드랑 개시물 상세 그리고 프로필 이렇게 세 개만 우리가 한번 해 보도록 할게요. 자, 그리고 여기서 좋은게 항상이 질문은 나오는 거 같아요. 자, 몇 가지 시안들을 우리가 만들 건지에 대한 질문을 하게 되거든요. 자, 저는 세 개만 이렇게 선택을 해 볼 거고요.이 변형들의 차이점들은 어, 피드백의 형태, 그리고 레이아웃의 구조 차이, 그리고 내비게이션 방식 이렇게 아니다. 소셜 그래프 구조 이렇게 세 개를 골라보도록 할게요. 자, 이거를 고르면은 어, 조금 있다 굉장히 좀 재미있는게 나옵니다. 그거 보여 드릴게요. 자, 토넷 매너 같은 경우는 밝고 친근함으로 할 거고 아주 러프한 스케치. 자, 그리고 피드 레이아웃. 그리고 컬러 테마 그리고 컨텐츠 밀도를 우리가 변경을 할 수 있도록 이렇게 하고서 바로 컨티뉴를 눌러 볼게요. 자, 지금 이게 리서치 프리뷰 때문에 있는 버그 중 하나가 뭐냐면요. 자, 여기에서 우리가 요청을 하고서 자,이 작업을 시작을 했을 때 우리가 홈을 눌러서 다른 페이지로 가게 되면은이 과정을 볼 수가 없어요.

자, 그래서 우리가이 페이지를 벗어놨을 때 스트림을 다시 싱크시키는 작업을 어, 제대로 하지 않은 거 같아 가지고 여러분이 동시에 여러 작업을 하고 싶으면은 그냥 탭을 열어 가지고 새로 작업을 하셔야 될 것 같습니다. 지금 다른 곳으로 벗어나면은이 스트림 다시는 받지 못합니다. 어, 물론 이제 작업이 끝나기는 해요. 그냥 맹목적으로 기다려야 되기 때문에 이렇게 틀어 놓는 거를 추천을 드릴게요. 자, 대기하면은 이렇게 와이어프레임이 완성이 되는 거를 볼 수가 있습니다. 자, 그리고 이렇게 옵션별을 우리가 선택을 할 수 있도록 선택하고서 우리가 확인할 수 있도록 보여 주는 걸 볼 수가 있어요. 자, 그래서 플로우 그리드를 우리가 선택을 하게 될 경우에는 자, 이런 식으로 우리가 그리드로 이미지를 받게 될 거고 자, 두 번째 개물 상세 같은 경우에는 이렇게 나올 거다. 자, 지금 제가 확대를 해 가지고 좀 보기 어렵게 보이는 거지 사실 이거 100% 확대 비율로 보면은 어, 굉장히 좀 장류가 잘 돼 있어요.

자, 세 번째 프로필은 이렇게 돼 있다. 팔로우 버튼 누를 수가 있고 어, 그리고 태그된 포스트 뭐 이렇게 볼 수가 있다. 그죠? 자, 여기서 우리가 변경을 해 볼 수가 있는데 색상을 뭐 다크 모드로 바꿔 본다거나 좀 더 콤팩트하게 만든다거나 편안하게 만든다거나 4열로 만든다거나 그리드를 2열로 만든다거나 피드 레이아웃을 뭐 3열로 만들다거나 울퉁불퉁 깔끔 뭐 이런 것도 우리가 변경을 할 수가 있고요. 그리고 우리가 얘기를 했던 자,이 다양한 레이아웃들 있죠? 자,이 친구들 우리가 변경해 가지고 레이아웃들 다른 시안으로 받아볼 수도 있다라는 거예요. 그죠? 자, 그룹 타임라인 뭐 이런 식으로도 할 수가 있고요. 자, 마찬가지로 우리가 변수 이렇게 넣어 볼 수가 있습니다. 자, 그래서 클로드가 우리한테 질문을 했을 때 우리가 어, 변수가 될 만한 부분들은 이것들을 했으면 좋겠어라고 했던 것들을 전부 다 잘 구현을 해 준다라는 걸 여러분들이 기억을 해 주시면 될 거 같고. 자,이 클로드 디자인의이 핵심 루트는 뭐냐면요.

자,이 왼쪽에 보면 디자인 파일라는이 파일 시스템이 존재해요. 그래서 우리가 무언가를 만들 때마다 계속 파일처럼 이렇게 생기는 거 볼 수가 있습니다. 그래서 SNSY어프fam임.html을 Hm 누르면은 우리가 이렇게 페이지로 들어올 수가 있는 거고요. 자, 그럼 여기서 우리가 뭔가 하나를 선택을 해 볼게요. 어,이 친구 카드 우리가 마음에 든다. 다크 모드 어, 라이트 모드로 기본 그리고 3열 그리고 3열 그리고 깔끔하게 만들고 싶다라고 한번 가정을 해 볼게요. 자, 그러면은 SNSY어프f레임.html B 친구 카드 옵션으로 라이트 모드 기본 밀도 3열 피드 레이아웃 그리고 피드 레이아웃도 3열. 그리고 스케치 거치기 깔끔하게 작업해 줘. 완전한 프로토타입을 만들어 줘. 자, 이렇게 한번 요청을 해 볼게요. 그러면은 우리가 선택한이 옵션들을 기반으로 이제는 실제 디자인을 만들어 주겠죠. 자, 우리 클로드에서 나오는 것처럼 제 이렇게 프로그레스 그러니까이 테스크죠. 네. 테스크 리스트 나오는 거를 확인할 수가 있고요.

작업이 될 때마다 이게 하나씩 체크가 되게 됩니다. 자, 기다렸던이 디자인이 이렇게 나왔고요. 네. 우리가 실제 정배율로 보면은 자 이렇게 디자인이 나온 거를 볼 수가 있어요. 자, 이런 버튼들을 누르면은 실제 작동까지 하고요. 올리기 누르면 다일라고 뜨는 다로그 뜨는 것까지 보이고 우리 2배열, 3배열, 4배열 그리고 콤팩트, 랄락, 민트 이렇게 우리가 변경을 하는 것도 그대로 다 적용이 되는 걸로 볼 수가 있습니다. 자, 만약에 수정을 하고 싶다. 자,이 에디 버튼을 누르게 되면요. 저희가 특정 요소를 선택을 해서 뭐 언라인을 바꾼다거나 아니면은 너비를 바꾼다거나 이런 것들 전부 다 진행이 가능하고요. 실제 우리 디자인 툴처럼 쓸 수가 있는 거죠. 자, 우리가 코멘트를 눌러서 자, 선택하고이 특정 요소만 변경이 될 수 있도록 우리가 따로 프롬프트를 입력을 할 수도 있다. 자, 그래서 모든 버튼들이 제대로 작동하는 형태로 우리가 디자인을 받아볼 수가 있는 겁니다. 자, 그리고 또 나가서 우리가 여기서 또 뭘 할 수 있냐면요.

그냥 우리 웹 디자인만 하는게 아니라 슬라이드덱도 만들 수가 있어요. 디자인한 웹사이트를 소개하는 슬라이드덱을 만들어 줘. 자, 이렇게 요청을 하면은 바로 슬라이드덱도 작업을 하게 되고요. 우리가 만든이 디자인 파일은 당연히 또이 디자인 파일 폴더 안에 다 들어가게 됩니다. 자, 조금 기다려면 또 슬라이드까지 만들어질 거예요. 자, 조금 기다렸더니 바로 이렇게 네, 프레젠테이션이 완료가 된 거를 볼 수가 있죠. 그죠? 그래서 우리 실제 모지 전부 다 이쁘게 다 들어갔고요. 우리가 만든이 디자인을 기반으로 정리가 돼 있기 때문에 상당히 비슷한 냄새를 풍기도록 우리가 이렇게 작업을 할 수가 있습니다. 자, 에디을 누르면은 우리가 프레젠테이션 스타일이기 때문에 거기에 걸맞게 우리가 변경을 해 줄 수가 있고요. 코멘트를 사용해서 우리가 당연히 선택해 가지고 특정 부분만 변경을 할 수도 있습니다. 자, 그럼 여기까지 되면은 우리가 이제 실제 클로드로 구현을 하고 싶을 거 아니에요. 그죠? 자, 그럼 어떻게 하느냐?

자, 엑스포트 버튼을 누르게 되면요. 오른쪽 위에 우리가 다운로드해서 집도 할 수 있고 B대프로 받을 수 있고 PPX 또는 캔바에다가 보낼 수도 있고요. 아니면 우리가 클로드 코드로 이렇게 핸드오프를 할 수도 있어요. 자,이 친구를 우리가 선택을 하게 되면 커피 커맨드를 했을 때 우리가 클로드 코드에다가 그냥 붙여 넣기를 하면은이 레퍼런스를 통해서 알아서이 디자인 시스템을 가져오기 때문에 바로 작업까지 가능하다는 겁니다. 자, 그리고 만약에 여기서 우리가 더 디테일한 내용을 넣고 싶으면은 여기다 추가 프롬프트를 넣어서 우리가 향상을 시킬 수도 있고요. 자, 그래서이 엔트로픽 생태에서 사실 클로드 코드가 굉장히이 프로그래밍 능력은 출중했지만 그 앞단에 그러니까 우리가 디자인하거나 아니면은 와이프레밍 하는 것들은 다른 곳으로 넘겨야 했었단 말이에요. 그런데 이번에 클로드 디자인이 나오면서이 전체 풀스택 개발의 생태계가 완전히 지각 변동이 일어날 것 같습니다. 자, 꼭 한번 사용을 해 보시고요.이 모든 것들이 하나의 컨텍스트에 있다라는게 생각보다 중요하다는 거 이제 여러분도 잘 알고 있을 거기 때문에 적극적으로 한번 활용을 해 보시면 좋을 것 같습니다.

제 현재의 프리뷰 상태이기 때문에 앞으로 훨씬 더 발전을 할 걸로 보이고 이걸로 인해서 이제 정말 페이퍼라던가 아니면은 펜슬 같은 이제 수익화를 하려고 노력을 하고 있었던 스타트업들은 쉽지 않은 상황이 될 수도 있을 것 같네요. 자, 제가 오늘 준비한 영상은 여기까지고요. 어, 영상이 좋았던 구독과 열정 그리고 댓글에 하이보이까지 해 주시고 저는 다음 영상에 더 좋은 영상으로 찾아뵙도록 하겠습니다. 쏘as지.