00:00:00여러분과 수백 명의 디자이너가 함께 참여하는 아주 멋진 실험을 제안하려 합니다.
00:00:06AI 디자인이 어디까지 발전할 수 있는지 확인하고 싶은데, 이번에는 특별히 '클로드 코드(Claude Code)'를 활용해
00:00:13동일한 가상의 비즈니스 아이디어를 바탕으로 히어로 섹션을 제작해 볼 것입니다.
00:00:19현재 designcourse.com에서 '30일 UI 디자인 챌린지'가 진행 중인데요.
00:00:24100% 무료로 참여하실 수 있습니다.
00:00:25이미 첫 번째 챌린지를 마쳤고 200개 이상의 제출물이 올라왔으며, 이번이
00:00:30두 번째 챌린지입니다.
00:00:31클로드 코드를 사용하는 방법과 정말 훌륭한 디자인을 뽑아내기 위해
00:00:37특별한 디자인 스킬을 장착시키는 방법을 알려드리겠습니다.
00:00:40이번 챌린지의 목표는 모두에게 똑같은 가상의 비즈니스 아이디어를 드리고,
00:00:44주어진 과제에 대해 최상의 UI를 만들어내는 여러분의 프롬프팅 실력이
00:00:50어느 정도인지 확인하는 것입니다.
00:00:52잠시 후에 오늘 챌린지에 참여하는 구체적인 방법을 보여드리겠습니다.
00:00:56이 영상을 언제 보시든 상관없습니다. 몇 달 뒤에 보시더라도
00:00:58언제든 챌린지에 참여해 다른 사람들의 작업물을 확인하실 수 있습니다.
00:01:01하지만 먼저, 필요한 모든 설정을 마치는 법부터 알려드릴게요.
00:01:04우선 당연히 클로드 코드가 필요합니다.
00:01:07이곳이 설정을 위한 페이지입니다.
00:01:10환경마다 설정법이 다르니
00:01:11모든 과정을 설명하진 않고 설정 페이지 링크를 남겨두겠습니다.
00:01:15아직 설치하지 않으셨다면 직접 확인해 보세요.
00:01:17준비가 되면 'claude'라고 입력하기만 하면 바로 로드될 겁니다.
00:01:22여기 보이시죠?
00:01:23좋습니다.
00:01:24다음 단계는 특별한 스킬을 장착시키는 것입니다.
00:01:26스킬이란 사실 AI의 컨텍스트에 입력되는 일련의 지침 세트라고 보시면 됩니다.
00:01:30간단하죠.
00:01:31다양한 종류의 스킬이 존재합니다.
00:01:32스킬을 보여드리기 전에, 시스템에 스킬을 설치하는 방법을 먼저 알려드릴게요.
00:01:37사용 중인 운영체제와 환경에 따라 클로드 코드 폴더의 위치를
00:01:43찾아야 합니다.
00:01:44그런 다음 스킬 정보가 담긴 이 마크다운 파일을 해당 폴더에
00:01:49넣기만 하면 됩니다.
00:01:50제가 말씀드리는 특정 스킬은 바로 여기 있는 'Front End Design'입니다.
00:01:55여러분이 사용하실 수 있도록 영상 설명란에 링크를 걸어두겠습니다.
00:01:58접속해서 Skills, Front End Skills, Skill.md를 차례로 클릭한 다음
00:02:03여기서 'Download Raw File'을 누르세요.
00:02:06그렇게 스킬 파일을 받았다면, 아까 보여드린 경로에서
00:02:12클로드 코드 폴더를 찾으시면 됩니다.
00:02:14윈도우 11을 사용하는 제 경우 경로는 C 드라이브, Users, Gary, .claud입니다.
00:02:21이 안에 'skills' 폴더가 없을 수도 있습니다.
00:02:24없다면 새로 만드세요.
00:02:25저는 이미 만들어 뒀습니다.
00:02:26폴더를 더블 클릭하고 'Designer'라는 이름의 폴더를 만듭니다.
00:02:31그리고 그 안에 아까 다운로드한 Skill.md 파일을 붙여넣으세요.
00:02:35클로드가 이미 실행 중이라면 'Control + C'를 몇 번 눌러서
00:02:39먼저 종료해야 합니다.
00:02:41다시 'claude'를 입력해 실행한 뒤 '/skills'를 쳐서 사용 가능한 목록을 확인합니다.
00:02:47현재 저는 세 개가 있네요.
00:02:48여기 'Front End Design'이 보입니다.
00:02:51이 스킬을 불러오려면 '/frontend-design'이라고 입력하고
00:02:56그다음에 프롬프트를 붙여넣으면 됩니다.
00:02:58실제로 작동하는 모습을 보여드릴게요.
00:03:00'/frontend-design'을 입력하고 “AI 신원 인증 서비스를 위한 랜딩 페이지의
00:03:06디자이너 히어로 섹션을 만들어줘”라고 썼습니다.
00:03:07“연한 베이지색 배경에 두 개의 열로 구성하고, 강력한 헤드라인과
00:03:11왼쪽에는 문구와 콜 투 액션 버튼을 배치해줘.”
00:03:13“오른쪽에는 신원 인증 개념을 보여주는 가상의 심플한 UI 애니메이션을
00:03:16넣어줘. (미안해요, 'identity verification' 발음이 꼬였네요.)”
00:03:20“이 내용을 CSS 변수가 포함된 HTML 파일로 작성해줘”라고 했습니다.
00:03:23제 프롬프트는 이게 전부인데, 결과물은 이렇게 나왔습니다.
00:03:28여러분 생각은 어떠신지 모르겠지만, 한 번에 나온 것치고는 꽤 훌륭합니다.
00:03:33방금 프롬프트 보셨죠?
00:03:35아주 짧았습니다.
00:03:36이제 가상 비즈니스를 위한 챌린지 내용과 여러분이 사용할
00:03:41비즈니스 아이디어를 보여드리고, 여러분이 무엇을 만들어낼지 기대해 보겠습니다.
00:03:46핵심은 여러분만의 디자인 취향을 더해 독특하고
00:03:51원한다면 애니메이션까지 포함된 무언가를 만드는 것입니다.
00:03:53첫 단계로 [designcourse.com/foundations](https://www.google.com/search?q=https://designcourse.com/foundations) 챌린지 페이지로 이동하세요.
00:03:58링크는 하단 어딘가에 있습니다.
00:04:00접속하면 이 페이지가 보일 텐데, 이미 613명의 학생이 참여 중이고
00:04:06첫 번째 챌린지에 197개의 제출물이 있었습니다.
00:04:08지금은 두 번째 챌린지를 위한 것입니다.
00:04:09여기를 클릭하면 '2026 UI/UX 피그마 템플릿'을 받으실 수 있습니다.
00:04:16그 안에 두 번째 챌린지가 들어있는데, 그걸 사용하시면 됩니다.
00:04:20실제 모습은 이렇습니다.
00:04:23이게 챌린지 2번이고, 여기에 안내 사항이 있습니다.
00:04:27이 내용이 여러분 프롬프트에 포함되어야 합니다.
00:04:29이것이 가상의 비즈니스 아이디어입니다.
00:04:31다른 아이디어는 사용하지 마세요.
00:04:32우리 모두 동일한 아이디어인 'AI 주택 점검 비즈니스'를 사용할 겁니다.
00:04:37컴퓨터 비전을 이용해 바닥 밑 공간, 지붕, 기초 이미지를 분석해 결함을 찾아내고
00:04:42표준화된 점검 보고서를 자동 생성해주는 서비스입니다.
00:04:45우리의 목표는 클로드 코드의 디자이너 스킬을 활용해 이 초기 프롬프트로
00:04:50한 차원 높은 히어로 섹션을 만드는 것입니다.
00:04:56이쪽에 상세 지침이 있습니다.
00:04:58클로드 코드를 사용해 이 프레임 오른쪽에 소개된 가상 비즈니스를 위한
00:05:03히어로 섹션을 생성하세요.
00:05:05반드시 해당 내용을 프롬프트의 일부로 복사해서 넣으시기 바랍니다.
00:05:08비즈니스 아이디어를 포함하되, 여러분만의 디자인과 스타일 취향도 함께 넣으세요.
00:05:13아까 보셨던 작은 애니메이션 카드처럼 저도 그렇게 지시를 내렸던 겁니다.
00:05:17방금 보신 것처럼요.
00:05:18최종 결과물을 다듬기 위해 프롬프트를 여러 번 사용해도 괜찮습니다.
00:05:22원한다면 애니메이션을 통합할 수도 있습니다.
00:05:24제출할 때는 먼저 최종 결과에 도달하기까지 몇 번의 프롬프트를 썼는지 적어주세요.
00:05:29결과를 계속해서 개선해 나가는 과정을 보고 싶기 때문입니다.
00:05:32또한 댓글란에 사용했던 프롬프트 자체도 함께 적어주세요.
00:05:36'Claude Code to Figma' 플러그인을 사용해 디자인의 피그마 프로토타입을
00:05:42공유할 수도 있지만, 필수는 아닙니다.
00:05:44스크린샷만으로도 충분합니다.
00:05:47해당 플러그인을 사용하면 작업한 UI의 최종 결과물을
00:05:53피그마로 바로 보낼 수 있습니다.
00:05:54사용법은 어제 올린 영상에서 자세히 다루었으므로
00:05:58여기서는 따로 설명하지 않겠습니다.
00:06:00다시 말씀드리지만 꼭 할 필요는 없습니다.
00:06:01제출 시에는 스크린샷만 있어도 괜찮습니다.
00:06:04여기 참가 신청서를 제출하는 방법이 나와 있습니다.
00:06:09예를 들어, 작업 중인 피그마 문서를 공유하기로 했다면
00:06:14제가 나중에 리뷰하면서 수정을 해볼 수도 있겠죠. 그럴 땐
00:06:18여기서 'Share'를 누르세요.
00:06:20'Copy prototype link'를 클릭하고 '누구나 볼 수 있음'으로 설정한 뒤
00:06:25제출물과 함께 보내주시면 됩니다.
00:06:26이번 챌린지는 정말 재미있을 거예요. 과연 모두가
00:06:30비슷한 결과물을 내놓을까요?
00:06:32구체적인 지시나 자신만의 독창적인 스타일, 창의적인 아이디어를
00:06:37녹여내지 않는다면 결과는 비슷할 겁니다.
00:06:40하지만 그렇게 하신다면 아주 흥미로운 변주와 다양한 컨셉들이
00:06:47나올 것이라고 생각합니다.
00:06:48그러니 원하는 색상 조합이나 재미있는 일러스트,
00:06:53애니메이션 등을 구체적으로 지정해 보세요.
00:06:55목표는 AI가 만들어낼 수 있는 성능을 최대치로 끌어올리는 것입니다.
00:06:58많은 분의 참여를 기다리겠습니다.
00:07:01정말 멋진 챌린지가 될 겁니다.