Transcript
00:00:00AI로 아름다운 웹사이트를 디자인할 수 있게 해주는 기술은 아주 많으며, 각각 저마다 다르지만
00:00:04모두 다 효과적인 것은 아닙니다. 어떤 기술은 인상적으로 보이는 복잡한 워크플로를 가졌음에도
00:00:09결국에는 뻔하디뻔한 모양의 사이트를 만들어내기도 합니다. 실제로 제대로 된 결과물을
00:00:13내놓는 것은 몇 안 됩니다. 이미 AI 모델들이 충분히 강력하고 디자인도 훌륭하게
00:00:17해내는데 왜 애초에 이런 기술들이 필요할까 생각하실 수도 있습니다. 하지만 모델이 아무리
00:00:22강력하더라도 각자 디자인할 때 따르는 특정 패턴이 존재하며, 그 패턴은 쉽게 눈에 띱니다.
00:00:26바로 이 때문에 AI가 그런 획일적인 패턴에서 벗어나 여러분의 웹사이트가 실제로 돋보일 수 있도록
00:00:30이끌어줄 무언가가 필요합니다. 이러한 기술들은 디자인 분야에서 풍부한 경험을 가진 전문가들이
00:00:36직접 테스트하고 효과를 본 워크플로를 재사용 가능한 형태로 다듬어 여러분도 쓸 수 있게
00:00:41만든 것입니다. 새로 오신 분들이라면 환영합니다. 저희는 소프트웨어 회사이자 AI Labs이며, 이번
00:00:46영상에서는 실제로 확실한 결과를 가져다주었던 테스트 완료된 기술들을 살펴볼 것입니다. 시작하기
00:00:51전에 알아두어야 할 점은, Claude design 자체에 기술을 따로 추가할 필요는 없다는 것입니다.
00:00:55Claude 설정에 추가한 기술은 Claude design에서도 그대로 사용할 수 있습니다. 따라서 Claude 설정에서
00:01:00기술을 추가하기만 하면 됩니다. 비록 지금은 Claude design에서 이 기술들을 사용하고 있지만, Claude
00:01:05Code나 Codex 등 사용 중인 다른 어떤 에이전트와 연동해도 동일한 결과를 얻을 수 있습니다. 첫 번째로
00:01:10다룰 내용은 에밀 코왈스키(Emil Kowalski)의 기술 세트입니다. 이 세트에는 무려 아홉 가지의
00:01:15기술이 포함되어 있으며, 각각 디자인의 서로 다른 부분을 변화시킵니다. 이는 저희가 Claude code나
00:01:20Claude design으로 작업을 할 때 실제로 사용하는 기술이기도 합니다. 그 안에는 디자인의 각기 다른
00:01:25영역을 타깃으로 하는 다양한 기술이 존재합니다. 그중에는 애플이 자사 제품에 사용하는 모든
00:01:30디자인 원칙을 담고 있어 다른 웹사이트에서도 그대로 활용할 수 있게 해주는 애플 디자인 기술도 있습니다.
00:01:35또한 애니메이션 어휘 기술도 존재하는데, 이는 모호한 애니메이션 설명을 AI 모델이 이해할 수 있는
00:01:40정확한 용어로 바꾸어 줍니다. 원하는 만큼 기술을 추가할 수 있지만, Claude design의 능력을
00:01:45가장 크게 끌어올려 주기 때문에 저희가 가장 빈번하게 사용하는 기술은 두 가지가 있습니다.
00:01:50그중 하나는 에밀의 디자인 엔지니어링 기술로, 아름다운 UI 컴포넌트를 구축하고 그에 애니메이션을
00:01:55추가하는 방법에 대한 지침이 담겨 있어 디자인을 시작하기에 가장 훌륭한 기술입니다.
00:02:00나머지 하나는 '애니메이트' 기술로, 이미 구축된 웹사이트에 상세한 단계별 프로세스를 거쳐
00:02:05애니메이션을 추가하는 완전한 워크플로를 담고 있습니다. 이를 사용하려면 먼저 Claude에 해당 기술들을
00:02:10추가해야 하며, 추가가 완료되면 Claude design 내부에서 활용할 수 있습니다. 슬래시 기호와
00:02:15기술 이름을 입력하고 프롬프트로 원하는 사이트를 말해주면 됩니다. 아직 디자인이 구축되지 않은
00:02:20상태이므로 에밀의 디자인 엔지니어링 기술을 먼저 사용했습니다. 그러면 기술이 불러와지고, 본격적으로
00:02:25구축하기 전에 Claude design이 독자적으로 하듯이 앱에 관한 질문들을 던집니다. 거기에 답변하면
00:02:30디자인이 제작됩니다. Claude design이 만들어낸 첫 번째 버전은 단색조 스타일에 미니멀해 보이지만,
00:02:35결과물로 나온 애니메이션은 그리 정교하지 않았고 군데군데 박자가 맞지 않았습니다. 바로 이때
00:02:40이미 만들어진 웹사이트의 애니메이션을 실제로 정제해 주는 애니메이트 기술이 활약하게 됩니다.
00:02:46이 기술은 사이트가 어떻게 작동하는지 파악하고 어떤 부분에 움직임을 주어야 할지 결정합니다.
00:02:51Claude가 수정을 마치자 사이트의 애니메이션이 크게 개선되었습니다. 스크롤에 맞춰 모션이
00:02:56동기화되었고 전체적인 모습도 이전과 비교해 훨씬 의도된 디자인처럼 보였습니다. 이것이 평소에
00:03:01Claude가 만들어내는 결과물과 그리 다르지 않다고 생각하실 수도 있지만, 이번 대상이
00:03:06랜딩 페이지였기 때문입니다. 아주 작고 미세한 애니메이션들이 개선되기는 했지만, 랜딩 페이지에서
00:03:11보기 좋은 핵심 애니메이션 스타일은 스크롤 기반 애니메이션이며, 이와 관련된 기술은 이전 영상들에서
00:03:16다수 다룬 적이 있습니다. 하지만 이 기술이 진가를 발휘하는 곳은 앱의 기능적인 측면에 있는
00:03:21소소한 요소들입니다. 예를 들어, 저희가 레스토랑 웹사이트를 작업하면서 애니메이트 기술을 이용해
00:03:26애니메이션을 추가해 보았더니, 폼을 제출할 때 작동하는 애니메이션이나 마우스 오버 시 그래픽이
00:03:32튀어오르는 효과 등 사이트 이용 체감을 높여주는 미세한 애니메이션들이 추가되었습니다.
00:03:37이러한 디테일들이 모여 사이트를 훨씬 더 상호작용하기 좋게 만들고 사용 경험을 개선해 주었습니다.
00:03:42에밀의 기술들은 모두 디자인 툴킷에 상당한 보탬이 되므로 원하는 만큼 추가하셔도 좋습니다.
00:03:47이제 살펴볼 다음 기술은 코나드 리(Conard Lee)의 '가든' 기술로, 이 역시 단일 기술이 아닌
00:03:52컬렉션 형태입니다. 비디오 프레젠테이션이나 이미지 같은 영역을 다루는 다섯 가지 기술이 들어있는데,
00:03:57그중 가장 중요한 것은 웹 디자인 엔지니어 기술입니다. 최고 수준의 디자인 엔지니어처럼
00:04:02디자인하는 방법에 대한 지침을 실제로 담고 있기 때문입니다. 이 기술은 기능성이 아니라 오직
00:04:07시각적 요소를 놀라울 정도로 멋지게 만드는 데만 집중합니다. 이 기술의 작동 방식은 사용자의
00:04:12요구사항을 접수하고, 원하는 바가 명확해질 때까지 함께 조율하며 작업을 진행한 다음,
00:04:17참고할 실제 디자인 레퍼런스를 찾는 것입니다. 세상의 모든 디자인이 그 이전에 존재했던 무언가로부터
00:04:22영감을 받듯, 훌륭한 디자인은 절대 무에서 유를 창조하지 않는다는 원칙을 따릅니다. 또한 과거에
00:04:27성공했던 디자인들을 토대로 기준을 잡습니다. 이 기술에는 디자인과 관련된 여러 영역을 아우르는
00:04:32참고자료 모음도 포함되어 있습니다. 디자인을 평가하는 방법, 흔히 저지르는 실수들, 그리고 애플이나
00:04:38리니어(Linear) 같은 유명 사이트들의 스타일 레시피를 다루고 있어, 사용자의 사이트를 구축하는 동안
00:04:44그러한 사이트들이 실제로 어떻게 작동하는지 참고할 수 있게 해줍니다. Claude Design에 추가한 뒤에는
00:04:49구축하고 싶은 사이트를 설명하는 프롬프트를 입력해 사용할 수 있습니다. 이를 통해 얻어낸 사이트는
00:04:55Claude Design 혼자서 만들어내는 결과물보다 훨씬 흥미로웠습니다. 디자인 관점에서 Claude Design이 독자적으로
00:05:01만들었을 버전보다 훨씬 철저하고 뛰어났습니다. 만약 이미 디자인이 완성된 상태에서 이 기술을 실행하면,
00:05:08해당 디자인을 검토하고 여러 영역별로 점수를 매겨줍니다. 원하는 점수에 도달하고 실제 원하는
00:05:13디자인과 일치할 때까지 디자인을 수정하며 반복해서 실행할 수 있습니다. 다른 기술들을 살펴보기 전에,
00:05:18채널 구독과 좋아요 버튼을 눌러주시면 정말 감사하겠습니다. 이러한 작은 응원이 저희에게 큰 힘이 됩니다.
00:05:22다음에 다룰 기술은 엘리아 디자인(Elia Design)의 AI 디자인 기술로, 이번에는 랜딩 페이지 전용으로 제작된 단일 기술입니다.
00:05:30모든 기능이 하나의 파일 안에 들어 있으며, 아이디어를 시각적 시스템으로 변환하는 역할을 합니다. 즉, 페이지의
00:05:37모든 요소가 따르게 될 일종의 규칙 세트이며 여기에는 색상, 서체, 간격이 포함됩니다.
00:05:41이 기술은 실제로 가치 있는 랜딩 페이지를 디자인하기 위한 전문적이고 완전한 시스템입니다.
00:05:46그 배경에는 랜딩 페이지가 홈페이지가 아니라는 생각이 깔려 있습니다. 홈페이지는 한꺼번에 수많은 다양한 사람들의
00:05:53니즈를 충족하려고 하지만, 랜딩 페이지는 오직 사람들이 행동에 나서도록 유도하는 단 하나의 목적만을 가집니다.
00:05:57AI 모델들은 쓸만한 홈페이지를 생성해내긴 하지만, 이 기술처럼 랜딩 페이지 디자인에 특화되어 있지는 않습니다.
00:06:03따라서 이 기술은 사이트 방문자가 취했으면 하는 단 하나의 행동을 중심으로 페이지를 구조화하여 그 행동에 시선이 집중되도록 유도합니다.
00:06:12또한 디자인의 시각적 스타일을 일관되게 유지하며, 검색을 통해 웹사이트가 쉽게 노출될 수 있도록 보장하는 것을 포함하여 대부분의 모델이 간과하는 웹 디자인의 다른 영역들도 처리해 줍니다.
00:06:22따라서 Claude의 기술 목록에 설치한 후 디자인이 필요할 때마다 프롬프트와 함께 실행하면 됩니다.
00:06:27먼저 질문을 던진 뒤 답변이 끝나면 디자인을 시작합니다.
00:06:31만들어진 사이트는 실제 브랜드 같은 느낌을 주었으며 우리가 원하던 분위기와 정확히 일치했습니다.
00:06:36또한 각 요소가 구조화된 방식 덕분에 사이트에 방문한 사람이 구매로 이어질 가능성이 훨씬 커졌습니다.
00:06:43그럼 먼저 스폰서의 메시지를 들어보겠습니다.
00:06:45시각적 자동화로 유명한 Make에서 이번에 새로 'Maya'를 출시했습니다.
00:06:49Make 빌더 내부에 바로 상주하는 AI 동료입니다.
00:06:52대부분의 AI 빌더는 블랙박스를 던져주고 알아서 작동하기를 바라게 만듭니다.
00:06:56하지만 Maya는 다릅니다. 일상적인 언어로 원하는 바를 말하면 눈앞에서 바로 구축해 줍니다.
00:07:00그래서 저희도 직접 써보았습니다. Salesforce에 새로운 리드가 들어올 때마다 팀에 슬랙 요약을 보내달라고 Maya에게 요청했더니 바로 캔버스로 이동했습니다.
00:07:07Maya는 요청 사항을 추론하고 올바른 도구를 선택한 뒤 모든 모듈을 매핑하고 우리가 지켜보는 동안 캔버스 위에서 전체 자동화를 연결했습니다.
00:07:15모든 결정 과정을 볼 수 있으므로 언제든지 개입하여 원하는 부분을 수정할 수 있습니다.
00:07:19이 과정을 통해 단순히 자동화를 얻는 것에 그치지 않고 Make가 실제로 작동하는 방식까지 배우게 됩니다.
00:07:23현재 베타 버전으로 무료 이용이 가능하며, 링크는 더보기란에 있습니다.
00:07:26다음으로 살펴볼 기술은 멩 토(Meng To)가 제작한 것입니다.
00:07:29그는 업계에서 오랜 기간 활동해 온 디자이너로, 몰입감 넘치는 스크롤 기반 스토리텔링 디자인으로 잘 알려져 있습니다.
00:07:36그가 발견한 모든 노하우를 가져와 디자인 기술 시스템으로 패키징했기 때문에 여러분도 똑같이 활용할 수 있습니다.
00:07:41여기에는 다양한 영역을 아우르는 수많은 기술이 포함되어 있습니다.
00:07:44모두 단순히 시각적으로 보기 좋은 것을 넘어 실제로 이야기를 전달하는 고품질 디자인을 생성하는 데 초점을 맞추고 있습니다.
00:07:51그중 하나는 '비디오 투 슈퍼 프롬프트'로, 웹사이트의 화면 녹화본이나 둘러보기 영상을 가져와 내 컴퓨터의 도구를 이용해 에이전트를 위한 프롬프트로 변환해 주는 기능입니다.
00:08:01하지만 진정으로 이야기하고 싶은 핵심 기술은 바로 '어워즈 퀄리티 사이트'입니다.
00:08:05어워즈(Awwwards)는 뛰어난 디자인 경쟁을 개최하는 사이트로, 거기서 수상하는 사이트들은 웹상에서 가장 디자인이 뛰어난 사이트로 인정받습니다.
00:08:12이 기술은 어워즈 수준의 사이트들이 포함하고 있는 원칙과 디자인 디테일을 실제로 열거해 줍니다.
00:08:17Claude 혼자서는 그 정도 수준의 디자인을 구축해내지 못하기 때문에 이 부분이 중요합니다.
00:08:21따라서 이 기술이 프로세스에 그러한 원칙들을 주입하여 디자인의 방향성을 이끌어줍니다.
00:08:25이 기술이 남다른 이유는 원칙뿐만 아니라 사이트를 고급스러워 보이게 만드는 실제 기법과 구체적인 효과들을 담고 있기 때문이며, 이는 AI 모델이 혼자서 만들어내지 못하는 부분입니다.
00:08:35어워즈 기술을 추가한 다음 원하는 사이트를 설명하는 프롬프트를 입력하면 됩니다.
00:08:40그 결과 수상작들과 동일한 방식으로 구조화되고
00:08:45설계된 사이트가 완성되어 돌아옵니다.
00:08:49은은한 애니메이션 배경이 들어가 있는데, 가장 눈에 띄었던 건 스크롤이었어요.
00:08:54다음 스킬 세트는 야쿱 크레헬(Jakub Krehel)이 만든 것입니다.
00:08:57하나의 스킬이 사이트의 모든 부분을 한꺼번에 처리하던 다른 방식들과 달리, 이 스킬은 여러 개로 나누어 각 영역이 자신만의 스킬을 갖도록 합니다.
00:09:05타이포그래피, 색상, 접근성 등을 포함한 디자인의 모든 요소가 하나의 스킬 대신 각각의 독립된 스킬을 가집니다.
00:09:13이러한 기술 중 원하는 것을 Claude Design에 추가할 수 있지만, 저희가 사용하는 것은 검토 기술입니다.
00:09:18이 기술을 사용하는 이유는 디자인의 모든 측면을 포괄적으로 검토하여 부여된 점수를 바탕으로 수정할 수 있기 때문입니다.
00:09:24이 검토 기술은 GitHub에 연결하면 더 잘 작동합니다. 변경 전후의 디자인 상태를 확인해주기 때문입니다.
00:09:31이전 변경 전에는 작동하던 기능이 이제 작동하지 않으면 이를 지적하고, 특정 변경 사항 때문에 작동하지 않는다고 알려줄 수 있습니다.
00:09:40애니메이션, 접근성, 다양한 화면 크기에서 사이트가 어떻게 유지되는지 등을 살펴본 후 발견한 모든 것을 나열하여 수정할 수 있게 해줍니다.
00:09:48또한 Claude Design이 실제로 어려움을 겪는 부분이기 때문에 더 나은 레이아웃 기술도 사용합니다.
00:09:52이 스킬은 간격, 배치, 디자인 요소들의 정렬 상태를 다루며 디자인을 꼼꼼하게 다듬어 줍니다.
00:09:58예를 들어 페이지의 날짜 표시에 더 많은 공간이 필요하다는 점을 포착하고, 몇 픽셀이 추가로 필요한지까지 알려주었습니다.
00:10:04그러면 발견된 문제들을 모두 수정하라고 지시하기만 하면 됩니다.
00:10:06사이트가 극적으로 달라지지는 않겠지만, 실제 실무에서 쓰이는 디자인 원칙에 맞게 올바르게 수정됩니다.
00:10:14목록의 다음 스킬은 테이스트메이커(Tastemaker)입니다.
00:10:16AI 모델이 만들어내는 흔하고 뻔한 기본값을 피하는 것이 주된 목적이며, 이를 달성하는 방식이 차별점입니다.
00:10:22실제 레퍼런스의 실제 픽셀을 바탕으로 작동하므로, 디자인을 먼저 말로 풀이하는 과정에서 손실되는 부분이 없습니다.
00:10:28모델에 레퍼런스 이미지를 제공하면 보통 나중에 참고할 수 있도록 텍스트 기반 요약으로 변환하는 경우가 많습니다.
00:10:34하지만 이 스킬은 스크립트를 사용하여 정확한 디자인 세부 사항을 추출하고, 에이전트가 나중에 활용할 수 있는 구조화된 형식으로 저장합니다.
00:10:42이를 통해 텍스트 기반 요약에서는 자칫 손실될 뻔한 디자인 디테일을 보존합니다.
00:10:46에이전트가 직접 처리하지 않아도 되는 많은 작업들을 스크립트를 통해 먼저 처리하도록 설계되어 있습니다.
00:10:52예를 들어 디자인을 다양한 방향으로 밀어붙이며 여러 대안을 시도해 봅니다.
00:10:55내린 결정들이 단일 화면에 머무르지 않고 프로젝트 전체에 걸쳐 일관되게 적용됩니다.
00:10:59이 스킬은 모델에 디자인 취향을 부여하여 똑같은 일반적인 패턴을 기본값으로 사용하지 않도록 합니다.
00:11:05추가하고 나면 슬래시(/) 명령어와 프롬프트를 사용하여 기존과 같은 방식으로 실행할 수 있습니다.
00:11:09원하는 사이트 정보와 앞서 언급한 스타일 요구사항을 함께 입력하여 작업을 수행하도록 맡겼습니다.
00:11:14그 결과 뻔한 느낌은 전혀 없고 매우 인상적이면서도 요청했던 사이트의 룩앤필(Look & Feel)을 정확히 구현한 결과물이 나왔습니다.
00:11:22마지막 세트는 인기 있는 또 다른 모음집으로, 실제 연구와 학술적 근거에 기반을 두고 있다는 점이 특징입니다.
00:11:28실제 디자이너들이 현업에서 활용하는 법칙들에 기반하며, 각각의 법칙마다 개별 스킬이 존재합니다.
00:11:33일부 스킬은 사용자가 웹사이트를 도중에 이탈하는 이유와 사이트를 탐색할 때 나타나는 행동 양상을 다룹니다.
00:11:39전부를 다 설치할 필요는 없습니다.
00:11:41자신의 작업 스타일에 맞는 스킬만 골라서 설치하면 됩니다.
00:11:44저희 세팅에서는 두 가지를 추가했습니다.
00:11:45첫 번째는 화면 비평(screen critique) 스킬로, 화면을 다양한 각도에서 검토한 뒤
00:11:50어떤 부분이 잘못되었는지 지적해 주며, 디자인 품질을 평가하는 올바른 지침을 기준으로 작동합니다.
00:11:56두 번째는 지각 법칙(perception laws)으로, 인간의 눈이 디자인을 실제로 어떻게 보고 이해하는지에 대한 지침을 담고 있습니다.
00:12:03디자인이 완성된 후 검토를 실행하면 시선이 가장 먼저 닿는 곳, 타이포그래피, 간격 등에서 무엇이 잘못되었는지 항목별로 나열해 줍니다.
00:12:09이를 보고 간편하게 수정할 수 있습니다.
00:12:12사이트에 지각 법칙을 적용하고 나면 전체적인 완성도가 훨씬 더 세련되어 집니다.
00:12:17지금까지 보신 기술들은 여러분이 모두 쓰실 수 있도록 깃허브에 공개되어 있습니다.
00:12:20하지만 저희는 실제 제품을 만들면서 테스트를 거쳐 직접 구축하고 다듬어 온 다른 스킬들도 사용합니다.
00:12:26이러한 스킬들을 이용하고 싶으시다면 저희 커뮤니티인 AI 랩스 프로(AI Labs Pro)에서 만나보실 수 있습니다.
00:12:31여기에는 저희가 직접 개발한 스킬들과 오픈소스를 활용한 스킬들이 포함되어 있습니다.
00:12:36저희의 활동이 유익했고 채널을 지원하고 싶으시다면 이 방법이 가장 좋은 방법입니다.
00:12:41링크는 설명란에 있습니다.
00:12:42이것으로 이번 영상을 마치겠습니다.
00:12:44채널을 지원하고 이와 같은 영상을 계속 만들 수 있도록 도움을 주고 싶으시다면 아래의 슈퍼 땡스(Super Thanks) 버튼을 이용해 주세요.
00:12:50언제나처럼 시청해 주셔서 감사드리며 다음 영상에서 뵙겠습니다.