스크립트
00:00:00사람들이 잘못 알고 있는 것이 있습니다.
00:00:01모델은 디자인 능력이 훨씬 좋아졌고 매일 개선되고 있죠.
00:00:05하지만 어느 순간, 훌륭한 디자인들이 다 비슷해 보이기 시작합니다.
00:00:08그래서 진짜 질문은, 어떻게 디자인을 돋보이게 할 것인가입니다.
00:00:12그 해답의 상당 부분은 올바른 프롬프트와 지시 사항에 달려 있습니다.
00:00:15여기서 기술(skill)이 중요해집니다. 이제 효과가 검증된 것들은
00:00:19누구와도 공유할 수 있는 재사용 가능한 워크플로우로 포장할 수 있으니까요.
00:00:21많은 사람들이 디자인 기술을 구축해 왔고 그중 최고는
00:00:25도구를 만든 팀에서 직접 나오기도 합니다.
00:00:27하지만 모든 기술이 다 쓸만한 것은 아니며, 상당수는
00:00:31디자인에 별 도움이 안 됩니다.
00:00:32맥락을 설명하자면, 저희는 소프트웨어 회사이고 이 채널은 AI Labs입니다.
00:00:37이 채널에서는 저희가 프로세스를 최적화한 것처럼 AI로 업무를 최적화하는 방법을 알려드립니다.
00:00:41더 창의적인 기술들을 살펴보기 전에, 다른 많은 디자인 기술의 기초가 되는
00:00:46것부터 시작해보겠습니다.
00:00:48Anthropic의 프론트엔드 디자인 기술은 사이트의 디자인 방향을 잡아주는 기술로,
00:00:53이전 영상에서도 사용한 적이 있습니다.
00:00:55AI로 랜딩 페이지를 여러 번 생성하다 보면 사이트들이 다 제각각인데도
00:01:00왠지 다 비슷하게 느껴지는 패턴을 발견하게 됩니다.
00:01:03그건 모델이 똑같은 패턴으로 가득 찬 방대한 데이터를 학습했기 때문입니다.
00:01:07그래서 디자인 결정을 내려야 할 때마다 가장 흔한 방식을 택하는 거죠.
00:01:11따라서 프로젝트가 무엇이든 디자인은 계속해서 비슷하고 안전한 기본값으로만 흐르게 됩니다.
00:01:16그것이 바로 이 기술이 해결하는 문제입니다.
00:01:17그것이 바로 이 기술이 해결하는 문제입니다.
00:01:19이 기술은 모델이 무언가를 작성하기 전에 확실한 디자인 방향을 결정하도록 강제함으로써
00:01:24안전한 선택에서 벗어나게 합니다.
00:01:25안전하고 흔한 스타일을 기본값으로 쓰는 대신, 방향을 하나 정하고 일관성을 유지하게 합니다.
00:01:30일관성을 유지하게 합니다.
00:01:30심지어 이 기술의 skill.md 파일(기본적으로 기술 지침서)에는 흔히 말하는 'AI 슬롭(AI slop)'을
00:01:36직접 언급해서, 모델이 식상한 폰트나 흰 배경에 자주 쓰이는
00:01:41보라색 그라데이션 같은 것을 남발하지 않도록 합니다.
00:01:42그리고 그것은 생각보다 더 중요합니다.
00:01:44대부분의 모델은 랜딩 페이지를 만들 때 올바른 결과물을 내는 데 최적화되어 있으니까요.
00:01:48하지만 이 기술은 대신 디자인 방향을 확실히 정하도록 유도합니다.
00:01:52그래서 저희는 디자인 자체가 제품의 일부인 랜딩 페이지나 포트폴리오를 작업할 때 이 기술을 주로 찾습니다.
00:01:56작업을 시작하기 전에 모델에게 더 확고한 관점을 제공하기 때문이죠.
00:02:00테스트를 위해 요구 사항을 주고 랜딩 페이지를 빌드하게 했습니다.
00:02:03그리고 평소의 기본값으로 흐르지 않고 결정한 디자인 방향을 고수했기 때문에
00:02:08흔히 보이는 AI 슬롭이 전혀 없는 사이트가 생성되었습니다.
00:02:11AI Labs 디자인 시스템에는 각자 다른 작업을 위한 두 가지 기술이 있습니다.
00:02:15대시보드처럼 사람들이 실제로 사용해야 하는 UI를 구축하는 기능적 기술이 하나 있고요.
00:02:20마케팅 UI를 위한 기술이 하나 더 있습니다.
00:02:22마케팅용 기술의 skill.md 파일에는 “기본값을 깨라(break the default)”는 프롬프트가 있습니다.
00:02:27그게 사실 Anthropic의 프론트엔드 디자인 기술이죠.
00:02:29약간 수정된 버전입니다.
00:02:31원조 기술이 새로운 모델들에게는 조금 구식이 되었기 때문에 수정했습니다.
00:02:35Opus 4.8과 Fable 5는 모두 클로드(Claude)가 어떻게 변했는지,
00:02:40그리고 지시 사항도 어떻게 바뀌어야 하는지를 보여주는 가이드와 함께 출시되었습니다.
00:02:42그래서 저희는 그 버전의 일부를 저희 디자인 시스템에 녹여냈습니다.
00:02:45앞서 말씀드렸듯이 Anthropic의 디자인 기술은 기능적 UI와는 잘 맞지 않습니다.
00:02:50실제 제품을 만들기 시작하면 문제는 완전히 달라지거든요.
00:02:53더 이상 단순히 보기 좋게 만드는 것만 중요한 게 아닙니다.
00:02:55제대로 작동하는 제품을 만들어야 하죠.
00:02:58모두가 제대로 동작해야 하는 수많은 컴포넌트들을 갖추고요.
00:03:01이때 랜딩 페이지를 넘어 실제 애플리케이션으로 넘어가게 됩니다.
00:03:04예를 들어, AI Labs Pro를 보면 랜딩 페이지는 훨씬 예술적인 디자인 언어를 사용하지만,
00:03:09커뮤니티의 실제 기능 레이어는 매우 따분하고 평범해 보입니다.
00:03:14여러분이 접해본 다른 어떤 웹 인터페이스와 똑같죠.
00:03:18그리고 바로 거기서 ShadCN이 등장합니다.
00:03:20모델들이 직접 대시보드를 만들 수는 있습니다.
00:03:23하지만 대시보드에 흔히 쓰이는 컴포넌트들은 이미 존재합니다.
00:03:27전문가들에 의해 이미 전문적인 수준으로 만들어져 있죠.
00:03:29그러니 모델이 컴포넌트를 처음부터 생성하고 애니메이션을 일일이 구성할 필요가 없습니다.
00:03:34이미 레지스트리에 준비된 컴포넌트를 가져오면 되니까요.
00:03:38기성 컴포넌트들의 큰 라이브러리라고 보시면 됩니다.
00:03:41그게 바로 ShadCN의 핵심입니다.
00:03:43모델이 컴포넌트 하나하나를 직접 만드는 대신,
00:03:46이미 전문가 수준으로 만들어진 라이브러리에서 가져와 앱에 사용하는 겁니다.
00:03:51그것이 결과물이 실제 제품처럼 느껴지는 이유입니다.
00:03:53조잡한 초안에서 시작해 천천히 수정해 나가는 게 아니니까요.
00:03:57처음부터 출시 가능한 부품들로 시작하는 겁니다.
00:03:59ShadCN 설정에는 서로 협력하는 두 가지 부분이 있습니다.
00:04:02첫 번째는 기술(skill)입니다.
00:04:03일종의 규칙서라고 생각하세요.
00:04:05ShadCN에는 특정하고 올바른 구축 방식이 있고, 기술에는 그 모든 규칙이 담겨 있습니다.
00:04:10그 위에 자신의 프로젝트가 어떻게 구성되어 있는지도 확인합니다.
00:04:12그래서 모델에게 무언가를 만들라고 요청하면,
00:04:15기술이 결과물을 ShadCN 규칙에 따르게 하고 프로젝트 방식에도 맞게 조정해줍니다.
00:04:20이점은 간단합니다.
00:04:21똑같은 실수를 반복해서 수정할 필요 없이 처음부터 깔끔한 결과물을 얻을 수 있죠.
00:04:26두 번째는 ShadCN MCP입니다.
00:04:29이건 기본적으로 ShadCN 레지스트리와 실시간으로 연결되어,
00:04:32모델이 실제 컴포넌트를 탐색하고 프로젝트로 바로 가져올 수 있게 해줍니다.
00:04:36이제 이런 생각이 들 수도 있습니다.
00:04:37MCP가 있어서 컴포넌트를 다 가져올 수 있는데 왜 굳이 기술(skill)을 쓰냐고요?
00:04:41답은 기술(skill)은 실제로 필요할 때만 로드되기 때문입니다.
00:04:44MCP처럼 항상 컨텍스트 윈도우를 차지하는 게 아니라요.
00:04:48ShadCN 기술은 코딩 에이전트에게 규칙과,
00:04:50패턴, 그리고 프로젝트에 대한 맥락을 제공합니다.
00:04:53함께 사용하면 에이전트가 컴포넌트를 올바르게 사용할 판단력이 생기는 거죠.
00:04:56일반 앱은 컴포넌트를 하나씩 쌓아가며 만드는데 그 접근법은 잘 작동합니다.
00:05:00그래서 대시보드도 그렇게 될 거라 기대할 수 있겠죠.
00:05:03부분적으로는 그렇습니다.
00:05:04하지만 대시보드는 일반 앱과는 다른 근본적인 문제가 있습니다.
00:05:07컴포넌트의 일관성보다는 화면에 정보를 어떻게 배치할지가 더 중요하거든요.
00:05:12화면이 너무 복잡해지기 전에 데이터를 어떻게 그룹화하고,
00:05:12얼마나 많은 정보를 담을지 결정하는 것이죠.
00:05:17그래서 대시보드만을 위해 만들어진 'dashboard'라는 별도의 기술이 있습니다.
00:05:21ShadCN이 만든 게 아니라 다른 개발자가 만든 거죠.
00:05:23이 기술은 모델이 정확히 그 정보 배치에 집중하도록 합니다.
00:05:26배치를 먼저 생각하게 하니까, 결과물이 혼잡하지 않고 진짜 분석 도구처럼 느껴집니다.
00:05:30UIUX Pro Max는 지금까지의 모든 기술과는 다르게 작동합니다.
00:05:33대부분의 기술은 모델에게 디자인 원칙을 주고 알아서 적용하도록 하지만,
00:05:36이 기술은 먼저 실제 엔진을 구동합니다.
00:05:40좋은 방향성과 탄탄한 컴포넌트 세트가 있어도,
00:05:43모델은 여전히 제품에 어떤 디자인 선택이 맞을지 결정해야 한다는 문제를 중심으로 만들어졌습니다.
00:05:47대부분의 기술은 디자인을 막연히 '좋은 것'이라는 개념으로만 다루거든요.
00:05:51그래서 무엇을 만들든 모든 것이 비슷해져 버립니다.
00:05:54이 기술이 바로 그 간극을 메워줍니다.
00:05:58무언가를 만들어달라고 하면, 바로 코드로 뛰어들지 않습니다.
00:06:00먼저 엔진을 돌리죠.
00:06:03비하인드에서는 이 엔진이 GitHub의 자체 오픈 소스 데이터베이스를 가로질러
00:06:04동시에 5개의 검색을 수행합니다.
00:06:09161개 산업 카테고리에서 제품에 맞는 스타일을 가져옵니다.
00:06:11그리고 그중에서 컬러 팔레트, 폰트 조합, 페이지 레이아웃을 골라
00:06:15여러분이 만들려는 산업에 정말 딱 맞는 것으로 결정합니다.
00:06:20그러고 나서 해당 제품 유형에 어울리지 않는 것들을 걸러내고,
00:06:22모델이 웹사이트를 구축하기 위해 따라야 할 완벽한 규칙서인,
00:06:26맞춤형 디자인 시스템을 모델에게 건넵니다.
00:06:31그러니 아주 강력한 웹사이트가 나오는 거죠.
00:06:32모든 디자인 속성이 웹사이트 아이디어와 일치하니까요.
00:06:37모델이 디자인을 발명하고 잘 되길 바라는 대신,
00:06:41실제 사용 사례에 맞게 추론된 디자인을 바탕으로 구축하는 겁니다.
00:06:44이 기술은 다른 것들과 정말 다릅니다.
00:06:46다른 기술들이 모델에게 더 나은 '취향'을 준다면, 이 기술은 시작하기 전에
00:06:50제작 중인 제품에 맞게 '결정'을 내려줍니다.
00:06:53계속하기 전에, 이번 영상의 스폰서인 SciSpace에 대해 말씀드리겠습니다.
00:06:56조사할 일이 있을 때 아마 ChatGPT를 사용해보셨을 겁니다.
00:07:00문제는 ChatGPT가 존재하지도 않는 논문이나 인용구를 자신 있게 만들어낸다는 것이죠.
00:07:04보통은 그 가짜 인용구가 이미 논문에 들어가기 전까지는 눈치채지 못합니다.
00:07:08SciSpace는 그 문제를 해결해 주며, 이제 ChatGPT 안에서 바로 사용할 수 있습니다.
00:07:12테스트해보려고 SciSpace를 열고 제 프로필로 가서, 연결할 ChatGPT 앱을 선택했습니다.
00:07:17문헌 조사를 요청했더니,
00:07:18ChatGPT가 SciSpace의 2억 8천만 개가 넘는 실제 논문 라이브러리에서 관련 연구를 가져왔습니다.
00:07:24그 논문들을 요약해주고
00:07:25환각 현상 대신 진짜 클릭 가능한 인용구를 제공했습니다.
00:07:30모든 인용구가 원문으로 바로 연결됩니다.
00:07:33그래서 클릭 한 번으로 논문을 열어 정확한 내용을 직접 확인할 수 있죠.
00:07:37직접 비교 테스트를 해보니 Elicit이나 ConsenSys 같은 도구보다 더 관련성 높은 논문들을 보여줬습니다.
00:07:42학생이나 연구원이라면 설명란의 첫 번째 링크를 통해 ChatGPT에서 SciSpace 앱을 연결하고,
00:07:48마침내 신뢰할 수 있는 연구를 시작해보세요.
00:07:52지금까지 추가한 모든 것들은 정적인 상태에서 사이트를 올바르게 보이게 해줍니다.
00:07:56하지만 정적인 페이지만으로는 한계가 있습니다.
00:07:58애니메이션은 사용자 경험을 개선하고 사이트에 머무는 시간을 늘려주기 때문에 중요합니다.
00:08:04문제는, 바로 그 애니메이션이 AI가 만든 코드에서 가장 취약한 부분이라는 것입니다.
00:08:09실제 문제는 모델에게 애니메이션을 추가해달라고 하면,
00:08:15항상 똑같이 스크롤 할 때 요소들이 슬라이드되어 들어오는 애니메이션을 만든다는 점입니다.
00:08:20그 '스크롤 리빌(scroll reveal)' 하나가 AI 사이트 절반 이상에서 보이는 유일한 동작이죠.
00:08:25진짜 모션이 할 수 있는 것과는 거리가 멉니다.
00:08:27이때 GSAP 기술이 등장합니다. GSAP은 많은 전문 사이트들이 이미 사용하는 애니메이션 라이브러리인데,
00:08:32이 기술은 그 라이브러리를 만든 팀이 직접 제공하는 것입니다.
00:08:37그래서 모델이 추측해서 만드는 대신, 올바른 패턴으로 작업하게 되고,
00:08:42기본 움직임부터 스크롤 시 발생하는 큰 애니메이션까지 모든 것을 다룹니다.
00:08:47사람들이 가장 과소평가하는 성능 측면도 해결해주죠.
00:08:52AI 애니메이션이 뚝뚝 끊기는 큰 이유는 모델이 크기나 위치를 바꿔서 움직이게 하는데,
00:08:57그러면 브라우저가 매 프레임마다 페이지 전체를 다시 그려야 하기 때문입니다.
00:09:02그래서 이 기술은 브라우저가 쉽게 처리할 수 있는 방식으로 모델을 유도합니다.
00:09:07GSAP은 랜딩 페이지나 스크롤 기반의 스토리텔링에 가장 효과적인데,
00:09:12중요한 정보들이 스토리처럼 자연스럽게 드러나게 만들어줍니다.
00:09:16웹사이트를 정적인 페이지에서 동적인 페이지로 바꿔주는 것이 바로 이런 이유 때문이죠.
00:09:22AI Labs 디자인 시스템의 마케팅 UI 기술에, 애니메이션이 필요할 때는
00:09:27GSAP 기술을 사용하라고 명시한 이유이기도 합니다.
00:09:33다음 기술들은 전체 시스템용이 아닙니다. 모델을 원하는 특정 스타일로 밀어주는 '취향 프리셋'이죠.
00:09:38먼저 미니멀리스트 UI 기술이 있습니다. 페이지에 너무 많은 것을 채워 넣는 대신,
00:09:43단순하고 여유롭게 유지하는 디자인입니다. 콘텐츠가 숨을 쉬어야 하는 신문이나 블로그 사이트에,
00:09:49모든 것이 서로 주목받으려 싸우지 않게 하려고 선택하는 기술입니다.
00:09:54완전 반대편에는 RAW하고 거친 느낌의 '산업 브루탈리스트' UI 기술이 있습니다.
00:09:59그리고 극한의 스타일을 원하지 않을 때 사용하는 '프론트엔드 UI/UX' 기본값이 있죠.
00:10:05깔끔하고 전문적으로 보여야 하는 제품이나 비즈니스 랜딩 페이지에 안전하게 선택할 수 있습니다.
00:10:10마지막으로 럭셔리 패션 브랜드 랜딩 페이지처럼 보이게 하는 '프리미엄 프론트엔드 UI' 기술이 있습니다.
00:10:16이걸 전부 한꺼번에 적용하는 게 아닙니다. 원하는 분위기에 맞는 하나를 골라 모델을 유도하는 거죠.
00:10:21이미 머릿속에 방향이 있다면, 이 기술들이 모델에게 전달하는 가장 빠른 방법입니다.
00:10:25여기까지 오면 구조가 잘 짜여 있고, 움직임이 좋으며, 진짜 스타일이 있는 사이트를 만들 수 있습니다.
00:10:30하지만 전문가급 웹사이트에는 애니메이션 이상의 것이 필요합니다. 전문 앱에는 실제 이미지와 영상 시각 자료가 필요하죠.
00:10:36모델들은 대부분 인터넷에서 스톡 이미지를 가져오는데, 보통은 필요한 것과 잘 맞지 않습니다.
00:10:41Higgs Field는 그걸 건너뛰게 해주는 도구입니다.
00:10:46이미지와 영상 생성 기능을 에이전트에 바로 연결해서,
00:10:51터미널을 나가지 않고도 히어로 이미지나 배경 클립을 작업 중에 바로 요청할 수 있습니다.
00:10:56Higgs Field는 한 모델에만 묶여 있지 않습니다.
00:11:01좋은 이미지 및 영상 모델들이 대부분 포함되어 있어서,
00:11:06가장 뛰어난 영상 생성 모델 중 하나인 'Cdance'를 사용해 회색 자리 표시자 박스 대신 진짜 시각 자료를 얻을 수 있습니다.
00:11:12앞선 기술들은 웹을 위한 것이었습니다. 이제 모바일 기술을 다뤄보겠습니다.
00:11:17모바일에서는 간단한 이유로 AI가 만든 UI가 조용히 무너집니다.
00:11:23모델들이 휴대폰을 작은 웹사이트로 취급해서,
00:11:29똑같은 웹 습관을 축소해서 적용하거든요. 하지만 모바일은 더 작은 웹이 아니라, 고유의 규칙을 가진 완전히 다른 영역입니다.
00:11:35엄지손가락이 어디까지 닿는지, 내비게이션은 어떻게 작동해야 하는지,
00:11:40모든 플랫폼에는 모델이 제대로 따르지 못하는 고유한 디자인 언어가 있습니다.
00:11:45모바일 개발을 최적화하기 위한 여러 기술이 있습니다. 첫 번째는 모바일 앱 UI 디자인의 '원칙 레이어'입니다.
00:11:51모델은 모바일 디자인 규칙을 꽤 느슨하게 다루지만, 이 기술은 아예 그 규칙을 박아버립니다.
00:11:56엄지손가락이 닿는 영역(Thumb Zone)을 지켜 주요 버튼을 배치하고,
00:12:01일관된 간격과 제한된 폰트 크기 세트를 사용하게 하죠.
00:12:06이게 바로 에어비앤비, 듀오링고, 스포티파이 같은 인기 앱들이 지키는 규칙입니다.
00:12:11모델이 추측하는 대신 그 감각으로 디자인하게 되는 겁니다.
00:12:16두 번째는 ShadCN이 웹에 해준 것처럼 모바일을 위한 'Material 3' 기술입니다.
00:12:21안드로이드 및 픽셀 앱의 디자인 시스템을 제공하죠.
00:12:27구글의 디자인 언어는 둥근 모양과 탄력 있는 움직임이 있는 대담하고 다채로운 성격을 가지고 있습니다.
00:12:33기술이 컴포넌트와 색상 시스템을 통째로 가져오기 때문에, 색상 하나만 주면 알아서 테마를 구축합니다.
00:12:38앱이 구글 가이드라인을 얼마나 잘 따르는지 확인해서 디자인 시스템에 정확히 맞춰줍니다.
00:12:43하지만 아이폰 네이티브 앱을 구축한다면 Swift UI 기술을 사용하면 됩니다.
00:12:48애플 디자인은 구글과 정반대입니다.
00:12:53대담함보다는 절제되어 있고, 소위 '리퀴드 글래스'라고 부르는 투명한 느낌을 살리죠.
00:12:58이 기술은 맥의 Xcode에서 Apple 문서를 바로 가져와 규칙으로 전달합니다.
00:13:04모델이 애플 앱 느낌을 추측하지 않고 실제 가이드를 기반으로 작업하게 되는 거죠.
00:13:09그저 아이폰 앱처럼 '보이는' 것을 넘어 진짜 네이티브 앱처럼 느껴지게 만듭니다.
00:13:14아이폰과 안드로이드를 동시에 개발한다면 공식 Expo 기술이 있습니다.
00:13:18Expo는 안드로이드와 iOS 모두에서 실행되는 앱을 하나로 만드는 프레임워크입니다.
00:13:23따라서 앱을 두 번 만들 필요가 없습니다.
00:13:29내비게이션, 스타일링부터 플랫폼 기능까지 실제 앱에 필요한 모든 것을 한 번에 다룹니다.
00:13:34어떤 플랫폼을 타겟팅하든, 이 분야를 제대로 아는 기술이 있는 거죠.
00:13:39이 영상에서 보여드린 모든 기술, 워크플로우 등은 저희 커뮤니티인 AI Labs Pro에서 찾으실 수 있습니다.
00:13:43거기서 리소스, 스타터 팩 등을 얻고 저희 팀을 포함한
00:13:48비슷한 관심사를 가진 괴짜들과 교류할 수 있습니다.
00:13:53저희 활동에 가치를 느끼고 채널을 후원하고 싶으시다면, 이것이 가장 좋은 방법입니다.
00:13:58링크는 설명란에 있습니다. 이번 영상은 여기서 마치겠습니다.
00:14:02채널을 후원하고 계속해서 이런 영상을 만들 수 있게 돕고 싶으시다면
00:14:07아래의 '슈퍼 땡스' 버튼을 이용해주시면 됩니다. 시청해주셔서 감사하며, 다음 영상에서 뵙겠습니다.