이제 클로드가 디자인까지 해냅니다. 초보자에겐 어려웠던 디자인 시스템도 이제 클로드와 대화하며 내 비즈니스에 맞게 만들 수 있어요. 만든 디자인 시스템을 기반으로 나만의 홈페이지를 디자인하고 수정하고 싶은 텍스트는 클릭 한 번으로 바로 편집할 수 있어요. 오른쪽 편집창에서는 폰트 크기, 색상, 굵기, 줄 간격과 자강까지 원하는 대로 자유롭게 바꿀 수 있어요. 편집창으로 해결되지 않는 부분은 코멘트 기능으로 영역을 선택한 뒤 말로 수정 요청하면 끝이에요.이 이 직관적인 편집 방식은 웹사이트뿐만 아니라 PPT, 모바일 앱, 프로토타토타입까지 어떤 디자인에든 적용할 수 있어요. 편집을 마치고 바이브 코딩으로 넘어가고 싶다면 공유 버튼에서 클로드 코드로 넘기기를 클릭하세요. 나온 코드를 복사해서 클로드 코드에 붙여 놓고 실행하면 결과물이 완성되고 필요한 사항을 추가적으로 요청하며 개발을 시작할 수 있어요.이 이 가이드에서는 클로드 디자인을 처음 접하는 분들을 위해 디자인 시스템 제작부터 웹사이트, PPT, 모바일 프로토타입까지 함께 빠르게 만들어 볼게요. 앞으로도 이런 영상을 기대하신다면 좋아요와 응원 댓글 부탁드립니다. 바로 시작할게요. 우선 현재 클로드 디자인은 프로플랜 이상부터 이용해 볼 수 있고 공개된지 얼마 되지 않은 리서치 프리뷰 단계로 사용자 피드백을 받으며 계속 개선 중인 도구입니다. 시작하기 위해 웹에서 클로드에 방문할게요. 왼편에 보면 디자인 메뉴를 확인할 수 있어요. 찾았으면 클릭하세요. 첫 단계로 디자인 시스템부터 만들어 볼게요. 상단에 디자인 시스템 탭을 클릭하세요. 여기 생성 버튼을 클릭하세요. 여기에 자신의 비즈니스 이름과 설명을 간단하게 작성하세요. 저는 예제로 프리랜서 디자이너로 가정하고 작성한다면 프리랜서 디자이너 기만을 저는 3년차 UX UI 프리랜서 디자이너로 앱이나 웹사이트를 보기 좋고 쓰기 편하게 만들어 주는 일을 합니다. 아래노트 부분에는 자신의 브랜드에 부합하고 선호하는 분위기나 색상 등 브랜드에 관련된 추가 정보를 자유롭게 입력하세요. 저는 예제로 우리 브랜드의 목표는 누구나 3초 만에 이해할 수 있는 사용 경험입니다. 분위기는 깔끔하면서도 따뜻하게 가고 싶어요. 포인트 색상으로는 따뜻한 호박색을 써서 친근한 느낌을 원합니다. 이곳에 폰트나 로고 등 브랜드 관련 리소스들이 준비된 경우에는 여기 드래그 앱드롭브로 추가할 수도 있다는 점 참고하세요. 준비되면 오른쪽 상단에 계속 버튼을 클릭하세요. 디자인 시스템 리뷰 단계로 넘어오면 색상부터 폰트, 버튼 등 다양한 디자인 요소가 나오고 각 요소를 하나씩 클릭한 뒤 괜찮으면 룩스 굿 버튼을 클릭해서 승인하고 변경하고 싶은 부분이 있다면 여기이 버튼을 클릭해서 원하는 추가 사항을 입력한 뒤 변경 요청할 수도 있어요. 모든 요소를 리뷰를 통해 검토해서 완료하세요. 이렇게 자세하게 디자인 시스템을 하나씩 검토하며 자신의 비즈니스에 맞게 설정할 수 있는 부분이 클로드 디자인의 강점 중 하나라고 생각합니다. 디자인 시스템 검토를 완료했다면 여기 공개 버튼을 클릭하세요. 오른편에 디폴트 버튼이 나오면 활성화하세요. 디폴트로 설정되면 이제 새 디자인을 생성할 때마다이 디자인 시스템이 자동 적용됩니다. 왼쪽 상단에 아이콘을 클릭해서 디자인 홈 화면으로 나가 주세요. 첫 번째 시나리오로 포트폴리오 사이트 디자인을 만들어 볼게요. 왼쪽 사이드 발을 보면 제공하는 탭을 통해 프로토타입, 슬라이드덱, 템플릿, 그리고 아더을 확인할 수 있어요. 단순한 원페이지 사이트 인포그래픽, 마케팅 자료 등 특정 카테고리에 해당하지 않다고 생각되면 단순히 아더탭을 클릭해서 시작하면 되겠습니다. 아더탭을 클릭하세요. 프로젝트 이름은 포트폴리오 사이트로 입력할게요. 아래 디자인 시스템에는 이전에 생성한 시스템을 디폴트로 설정해서 적용되어 있는 것을 확인할 수 있어요. 완료되었다면 생성 버튼을 클릭하세요. 이제 왼편에는 클로드와 채팅을 통해 요청하는 부분이고 오른편에 나온 캔버스 화면은 결과가 나오게 됩니다. 제가 준비한 프롬프트는 3년차 프리랜서 UX 디자이너의 포트폴리오 웹사이트를 만들어 줘. 신규 클라이언트가 처음 내 사이트에 왔을 때 아,이 사람한테 맡기고 싶다는 생각이 들게 하는게 목표야. 대표 프로젝트는 세 개고 반마 중, 핀노트, 오늘 책방 이걸 보여 주는게 핵심이야. 나머지 구성은 알아서 제안해 줘. 작성했다면 보내기 버튼을 통해 요청할게요. 결과적으로 상단에 디자인 파일 탭을 보면 관련 파일들이 생성된 것을 확인할 수 있어요. 여기서 HTML 파일을 클릭하면 만들어진 디자인을 확인할 수 있어요. 이제 편집하는 방법을 살펴볼게요. 먼저 오른쪽 상단에에 버튼을 클릭하세요. 마우스가 편집 모드로 변경되고 요소의 마우스를 가져다 놓으면 편집할 수 있는 부분들을 확인할 수 있어요. 클릭하면 바로 텍스트를 직관적으로 수정할 수 있어요. 오른쪽 편집창을 통해 먼저 폰트체를 변경할 수 있고 사이즈와 글자 굵기도 자유롭게 변경이 가능해요. 컬러를 통해 글자 색상도 변경이 가능하고 얼라인을 통해 정렬 옵션 변경도 할 수 있어요. 라인을 통해 줄 간격을 변경할 수 있고 트래킹을 통해 글자 간격 편집도 가능합니다. 아래 사이즈 같은 경우는 선택한 요소에 테두리가 나오는데 테두리를 기준으로 사이즈를 변경한다고 이해하면 되겠습니다. 오파지티는 투명도를 의미해서 필요에 따라 요소의 투명도 조절을 할 수 있어요. 패딩과 마지는 요소 주변의 공간을 편집하는 기능입니다. 패딩은 선택한 요소 안에 공간 간격을 조절하는 옵션이고 마지는 선택한 요소 밖에 공간 간격을 조절할 수 있어요. 보더는 테두리를 설정하는 옵션으로 바로 편집해서 테두리를 적용할 수 있고 자세히 설정하려면 오른쪽 아래 화살표를 클릭하세요. 여기서 위, 아래, 오른쪽, 왼쪽 테두리 굵기를 지정할 수 있고 스타일을 통해 테두리 스타일과 색상도 지정할 수 있어요. 아래 레디우스는 모서리를 얼마나 둥글게 할지 설정해서 테두리를 완만하게 표현할 수 있습니다. 여기까지 함께 살펴본 옵션으로 전반적인 사이트 편집이 가능합니다. 추가적으로 하나만 더 살펴본다면 아래 버튼을 감싸고 있는 전체 레이아웃을 클릭하세요. 오른쪽 편집창을 보면 레이아웃이 있어요. 여기서 갭 옵션은 레이아웃 안에 있는 요소들의 사이 간격을 수정할 수 있어요. 디렉션 옵션은 요소들을 어떤 방향으로 나열하지에 대한 것이고 직접 변경해 보면 쉽게 이해할 수 있어요. 저스티파이와 얼라인 옵션은 직접 디렉션을 변경한 뒤각해 가며 어떻게 영향을 주는지 직접 살펴보면서 이해하시면 도움이 될 것입니다. 이번에는 코멘트로 편집하는 방법도 살펴볼게요. 오른쪽 상단에 코멘트를 클릭하세요. 코멘트 모드에서 수정하고 싶은 요소로 가서 클릭하세요. 입력창에 수정하고 싶은 요소를 입력하면 클로드를 통해 AI 기반으로 수정 요청이 가능합니다. 예를 들어이 카드에 마우스 올리면 살짝 위로 뜨고 그림자가 진해지는 호버 효과 넣어 주세요라고 입력해 볼게요. 참고로 코멘트 모드는 여러 요소를 클릭해서 각각 남길 수 있고 한 번에 요청할 수도 있어요. 그럼 편집 요청해 볼게요. 왼쪽 하단에 보내기 버튼을 클릭하세요. 결과적으로 이렇게 마우스를 가져다 놓으면 요청대로 애니메이션 효과가 적용되었어요. 이번에는 오른쪽 상단에서 드로우 편집 모드를 사용해 볼게요. 클릭하세요. 하단 푸터로 내려갈게요.이 드로우 모드는 편집하려는 영역을 자유롭게 마크한 뒤 편집을 요청해 볼 수 있어요. 여기이 부분에 로고를 추가하는 요청을 하기 위해 드로우로 그려 볼게요. 표시했다면 하단에서 Q 버튼을 클릭하세요. 왼쪽 하단에 입력창에 해당 부분이 자동으로 추가되었어요. 그러면 이곳에 사이트 로고를 추가하세요라고 입력한 뒤 요청해 볼게요. 결과적으로 로고가 추가되었고 다크한 배경 버전에 맞게 추가되었습니다. 참고로 편집한 사항이 제대로 반영되지 않는다면 왼쪽 상단에 새로고침 아이콘을 클릭한 뒤 다시 확인해 보면 되겠습니다. 첫 번째 프로젝트에서 프리랜서 디자이너로서 필요한 포트폴리오 사이트를 만들어 봤다면 두 번째 프로젝트에서는 새 클라이언트를 만나는 자리에서 사용할 첫 미팅용 자기 소개 PPT를 만들어 볼게요. 옵션 탭에서 슬라이드 덱을 클릭하세요. 프로젝트 이름은 클라이언트 PPT로 입력할게요. 아래 스피커 노트 옵션도 있고 사용하기 위해 활성화한 뒤 생성 버튼을 클릭하세요. PPT를 생성할 땐 들어갈 정보를 어느 정도 제공하는 것이 필요하기에 예제로 간단한 메모 파일을 함께 업로드해서 요청해 볼게요.이 메모를 바탕으로 신규 클라이언트 1000 미팅용 자기 속에 댓글을 만들어 줘. 목표는이 사람한테 1 맡기면 믿을 만하겠다는 인상을 주는 거야. 각 슬라이드에 실제로 말할 대본 스피커 노트를 한 단락씩 써 줘. 발표 시간은 6분 정도로 잡아 줘. 완료했다면 보내기 버튼을 클릭해서 요청할게요. 진행하면 클로드가 요청에 맞게 제작하기 위해 몇 가지 질문이 있을 수 있어요. 각 질문을 통해 제공할 수 있는 정보들은 제공하고 모르면 안내된 대로 입력해도 되겠습니다. 모두 작성했다면 답변을 제출해서 진행하세요. 저는 진행 후 화면으로 바로 넘어갈게요. 결과적으로 이렇게 슬라이드 디자인을 빠르게 완성했어요. 눈여겨 볼 만한 부분은 동일한 디자인 시스템이 사용되었기에 슬라이드 스타일도 일관적이게 느껴진다는 점입니다. 아래 보면 요청한 대로 스피커도 오브 노트가 함께 제공되기 때문에 슬라이드를 바로 활용해야 되는 경우에도 유용해요. 슬라이드에서 편집하고 싶은 부분이 있다면 이전 시나리오와 같은 편집 방식으로 편집이 가능합니다. 오른쪽 상단에에 버튼을 클릭하고 수정해야 하는 부분을 자유롭게 수정하세요.이 이 슬라이드를 실제로 사용할 때는 오른쪽 상단에 프레젠 옵션을 클릭하면 현재 탭에서 ppt를 실행하거나 풀스크린으로 실행할 수도 있어요. 여기서는 인디 스텝을 클릭하세요. 그러면 이렇게 슬라이드를 실행하면서 동시에 스피커 노트도 세창으로 추가되어 PPT를 진행할 수 있어요. 확인했다면 스피커 노트 창을 닫고 키보드에서 ESC 키를 눌러서 나가 주세요. PPT를 파일로 저장하고 싶다면 오른쪽 상단에 공유 버튼을 클릭하세요. 여기서 PDF, PPT 등 필요에 맞게 다운로드 할 수도 있으니 참고하세요. 세 번째