00:00:00Claude Code의 프런트엔드 디자인 실력이 형편없는 건 여러분 탓이지만,
00:00:04간단한 로드맵만 있다면 이 문제는 해결할 수 있습니다.
00:00:07어디로 가야 할지만 알면 되거든요.
00:00:09이번 영상에서는
00:00:10Claude Code 프런트엔드 디자인의 7단계를 분석하고
00:00:13각 단계에서 기대할 수 있는 결과와
00:00:16피해야 할 함정,
00:00:18그리고 다음 단계로 넘어가기 위해 필요한 것을 설명해 드리겠습니다.
00:00:21영상이 끝날 때쯤이면,
00:00:22여러분은 Claude Code를 사용해 천편일률적이고 지루한 템플릿이 아닌
00:00:25제대로 된 프런트엔드 디자인을 만드는
00:00:28단순하고 반복 가능한 프로세스를 갖게 될 것입니다.
00:00:30오늘 영상의 사례 연구로 사용할 가상의
00:00:33SaaS 웹 앱인 'Argus'를 소개합니다.
00:00:36Argus는 소셜 미디어 인텔리전스 애플리케이션입니다.
00:00:41콘텐츠 제작자나 누구든 접속해서
00:00:43자신의 분야에서 유행하는 주제를 찾을 수 있는 곳이죠.
00:00:48이 Argus를 활용해
00:00:497단계 프로세스 전체를 살펴볼 것입니다.
00:00:52그럼 1단계부터 시작하겠습니다.
00:00:53안타깝게도 많은 분이 바로 이 단계에 머물러 있습니다.
00:00:55사용자와 프롬프트만 있는 상태죠.
00:00:57Claude Code를 열고
00:00:59그냥 이렇게 말하는 겁니다. "안녕,
00:01:01내 소셜 미디어 웹 앱인 Argus의 랜딩 페이지를 만들어줘.
00:01:02콘텐츠 제작자가 자기 분야의 트렌드를 파악할 수 있는
00:01:05인텔리전스 앱이야."
00:01:08자, 이렇게 입력하고
00:01:09플랜 모드(plan mode)로 실행하더라도,
00:01:12결과물은 아주 전형적이고 뻔할 것입니다.
00:01:15왜냐고요? 디자인 방향성을 전혀 제시하지 않았기 때문입니다.
00:01:18뭐가 보기 좋은지에 대한 판단을
00:01:20전적으로 Claude Code의 공백 메우기에 맡기고 있는 셈이죠.
00:01:22흔히 "AI는 미적 감각(taste)이 없다"라고들 하지만,
00:01:26사실 대부분의 사람도 미적 감각이 부족합니다.
00:01:28그게 문제이기 때문에
00:01:31Claude Code에게 제대로 설명을 못 하는 것이죠.
00:01:33본인이 무엇이 정답인지 모른다면,
00:01:35Claude Code가 어떻게 그걸 알아내겠습니까?
00:01:37따라서 가장 기초적인 단계에서 우리가
00:01:39몇 가지 기술을 익히기 시작해야 합니다.
00:01:41그 세 가지 기술은 묘사적인 프롬프트 작성,
00:01:43프레임워크 지정 및 해당 프레임워크에 대한 이해,
00:01:46그리고 마지막으로
00:01:46기초적인 디자인 어휘력을 갖추는 것입니다.
00:01:50단순히 플랜 모드를 사용하는 것만으로도
00:01:53이러한 기술을 쌓기 시작할 수 있습니다.
00:01:55AI가 "이 랜딩 페이지에 어떤 기술 스택을
00:01:57사용하고 싶으신가요?" 같은 질문을 던질 테니까요.
00:01:58Next.js, 순수 HTML, Astro 같은 것들 말이죠.
00:02:00처음엔 이게 다 뭔지 전혀 감이 안 오겠지만,
00:02:02그냥 "이 프레임워크들이 뭐야?"라고
00:02:05물어보는 것만으로도
00:02:07프레임워크 같은 분야에서
00:02:11어느 정도의 역량을 쌓기 시작하게 됩니다.
00:02:13그저 질문만 던지면 되는 거죠.
00:02:14또한 플랜 모드는 디자인 결정 사항과
00:02:17웹사이트의 실제 목표에 대해 생각하게 만듭니다.
00:02:19단순히 "Argus 랜딩 페이지가 필요해"라고
00:02:20말하는 것만으로는 부족하기 때문입니다.
00:02:21이 페이지의 목적이 무엇이며,
00:02:23실제로 얻고자 하는 결과가 무엇인가요?
00:02:25우리의 경우,
00:02:26대기 명단 등록과 제품 쇼케이스 두 가지를 원합니다.
00:02:29그러면 AI가
00:02:32스타일에 대해 구체적으로 질문할 것입니다.
00:02:35제시되는 시각적 스타일들 또한
00:02:38"어둡고 기술적인", "깔끔하고 미니멀한" 같은
00:02:41다소 뻔한 것들입니다.
00:02:42우리가 원하는 결과를 얻기엔 아직 충분히 구체적이지 않죠.
00:02:45대부분이 여기에 머물러 있습니다.
00:02:47그래서 모든 결과물이 그렇게 똑같아 보이는 것입니다.
00:02:49일단 우리는 "깔끔하고 미니멀한" 스타일을 선택하고,
00:02:52히어로 섹션, 기능 소개, CTA(호출 문구)를
00:02:53포함해서 제출해 보겠습니다.
00:02:55여러분은 아마 "이게 너무 기초적이라면,
00:02:58어떻게 묘사적인 프롬프트를 쓰고
00:03:01기본적인 디자인 어휘를 늘릴 수 있을까?"라고 생각하실 겁니다.
00:03:03솔직히 말씀드리면,
00:03:04어느 정도의 시간과 경험이 필요합니다.
00:03:06제대로 된 창의적인 프런트엔드 디자인을
00:03:09자주 접할수록
00:03:12이런 감각을 더 많이 익히게 될 것입니다.
00:03:13이 부분은 다음 단계에서 더 자세히 다루겠습니다.
00:03:16자, 결과물을 한번 볼까요? 이런, 전형적인 "AI 쓰레기"네요.
00:03:20정말 끔찍하죠? 더할 나위 없이 평범합니다.
00:03:24심지어 보라색 그라데이션까지 들어갔는데,
00:03:27이상하게도 AI는 이걸 정말 좋아합니다. 대체 뭐가 문제였을까요?
00:03:30플랜 모드를 썼는데도 왜 이런 결과가 나왔을까요?
00:03:32사실 여러분도 이미 아시다시피,
00:03:35Claude Code를 포함한 일반적인 AI는
00:03:37프런트엔드 디자인에 아주 능숙하지는 않습니다.
00:03:38여기에 묘사가 부족한 지루한 프롬프트를 주면,
00:03:42바로 이런 식의 결과물이 나오는 거죠.
00:03:44그런데도 우린 도처에서 이런 디자인을 보게 됩니다.
00:03:46자, 그럼 어떻게 해야 할까요?
00:03:48어떻게 1단계를 벗어나 디자인 지옥에서 탈출할 수 있을까요?
00:03:51그전에,
00:03:52여러분이 가장 좋아하는 스폰서인 제 광고를 잠시 전해드립니다.
00:03:55얼마 전 제가 'Claude Code 마스터클래스'를 출시했습니다.
00:03:59비전공자라 하더라도 AI 개발자로 거듭날 수 있는 최고의 코스이며,
00:04:04매주 내용을 업데이트하고 있습니다. 출시 이후 이미
00:04:071시간 이상의 새로운 콘텐츠를 추가했고 20개 이상의 모듈을
00:04:10개편했습니다. 관심 있으신 분들은
00:04:13Chase AI 사이트에서 확인하실 수 있습니다.
00:04:14고정 댓글에 링크를 남겨두겠습니다.
00:04:17AI가 아예 처음이라서
00:04:18유료 강의가 부담스러우시다면,
00:04:19무료 Chase AI 커뮤니티를 확인해 보세요.
00:04:22설명란에 링크가 있습니다.
00:04:24자, 이제 2단계로 넘어가려면,
00:04:25Claude에게 디자인 교육을 시켜야 합니다.
00:04:28여기서부터 본격적인 기술이 필요합니다.
00:04:30Claude Code에게 더 나은 디자인 방법을 가르쳐주는
00:04:33외부의 전문화된 프롬프트를 가져오는 단계죠.
00:04:36우리가 활용하는 '프런트엔드 디자인 스킬'이나
00:04:39'UI UX Pro Max 스킬' 같은 것들이
00:04:41많은 어려운 일을 대신 해줄 것입니다.
00:04:42이 스킬들은 Claude Code에 프롬프트를 주입하여
00:04:45"이 업계의 웹페이지를 만든다면,
00:04:49이런 요소들을 고려해야 해"라고 알려줍니다.
00:04:51"뻔한 AI 스타일의 디자인 기법 리스트가 여기 있으니,
00:04:55이런 건 피해"라고 말해주죠.
00:04:56즉, 우리의 프롬프트를 대폭 강화해 줍니다.
00:04:58비록 우리가 가져온 원본 프롬프트가 부실하더라도 말이죠.
00:05:00여기 UI UX Pro Max 스킬을 한번 보시죠.
00:05:03GitHub의 오픈 소스 저장소인데, 별점 52,000개를 받았습니다.
00:05:07여기 'skills' 폴더 안으로 들어가서
00:05:09구조를 직접 볼 수 있습니다.
00:05:12결국은 다 텍스트 프롬프트들입니다.
00:05:15Claude Code가 다시는 이런 뻔한 결과물을 내놓지 않도록
00:05:17체크리스트 역할을 하는 수많은 프롬프트의 집합이죠.
00:05:19여기에 갇히지 않기 위해서 이 특정 스킬과
00:05:21그와 유사한 다른 스킬들을 설치하는 법은
00:05:23매우 간단합니다. GitHub 페이지에 가보면
00:05:26설치 지침이 바로 나와 있습니다.
00:05:27슬래시(/) 커맨드로 플러그인 마켓플레이스에 접속해
00:05:30스킬을 추가하고 설치하면 됩니다.
00:05:32Claude Code 터미널에서 이 명령어를 실행하기만 하면 되죠.
00:05:35만약 이게 너무 복잡하게 느껴진다면,
00:05:37그냥 해당 URL을 복사해서
00:05:40Claude Code에 붙여넣고
00:05:41"이 스킬을 설치하고 싶어"라고 말해도 됩니다.
00:05:42그럼 이제 스킬 성능을 테스트해 보겠습니다.
00:05:44슬래시 커맨드로 스킬을 불러왔습니다.
00:05:46자연어를 사용해서 다음과 같이
00:05:47말할 수도 있습니다. "UI UX Pro Max 스킬을 사용해줘."
00:05:50그리고 이렇게 요청하겠습니다.
00:05:51"이 스킬을 사용해서 랜딩 페이지를 다시 만들어줘.
00:05:54필요한 질문이 있으면 뭐든 물어봐."
00:05:55표준 플랜 모드와 마찬가지로
00:05:57스타일에 대한 몇 가지 질문을 던질 것입니다.
00:05:59이번엔 AI가 추천하는 대로 해보죠.
00:06:03타이포그래피 위주로? 좋습니다.
00:06:05CTA 색상은 오렌지색으로 하죠.
00:06:07무슨 수를 써서라도 저 보라색에선 벗어나고 싶거든요.
00:06:09자, 재디자인이 끝났습니다. 한번 보시죠.
00:06:12이게 UI UX Pro Max 스킬을 사용한 랜딩 페이지입니다.
00:06:15보자마자 엄청난 발전이 느껴지시죠?
00:06:18제대로 된 배경도 있고 이런 사각형 패턴도 추가됐네요.
00:06:22버튼 자체에 은은한 광택 효과도 있고 마우스를 올리면
00:06:25색상도 변합니다.
00:06:27그래픽 요소도 들어갔고 섹션마다
00:06:30배경색이 바뀝니다. 여전히 보라색을 너무 사랑하긴 하지만,
00:06:33전보다 훨씬 낫네요.
00:06:36그렇긴 해도 여전히 AI가 만든 티가 확 나죠?
00:06:38누군가 이걸 보고 감탄할 정도는 아닙니다.
00:06:40여전히 잘 만든 AI 템플릿 수준일 뿐이죠.
00:06:46본질적으로는 아까 본 웹사이트에
00:06:48겉치레만 조금 더한 것에 불과합니다.
00:06:51그럼 이걸 어떻게 더 개선할 수 있을까요?
00:06:52어떻게 2단계를 넘어 3단계로 갈 수 있을까요?
00:06:55이런 스킬들이 훌륭한 건 맞습니다.
00:06:56색채 이론이나 타이포그래피, 간격,
00:06:59일반적인 레이아웃 디자인 개념을 가져오지만, 본질적으로는
00:07:02여전히 평범합니다.
00:07:04우리가 익혀야 할 가장 큰 기술은 바로 이것입니다.
00:07:08어떻게 디자이너의 눈으로 결과물을 평가하고,
00:07:11그 비평을 다시 프롬프트로 바꿀 것인가?
00:07:13이것은 여전히 프롬프트의 문제이지만,
00:07:16프롬프트 작업의 한계이자 함정은 바로
00:07:18우리가 묘사할 수 있는 수준에는 천장이 있다는 것입니다.
00:07:21특히 초보일 때는 더욱 그렇겠죠.
00:07:23문제를 구체적으로 설명할 지식이
00:07:27부족하기 때문입니다.
00:07:27시각적인 매체와 시각적인 문제를
00:07:31텍스트로만 설명하려니 당연히 한계가 있죠.
00:07:34그럼 무엇을 할 수 있을까요?
00:07:36Claude Code에게 직접 보여주기 시작해야 합니다.
00:07:41우리가 지향하는 실제 예시들을 보여줘야 합니다.
00:07:44그게 바로 3단계의 핵심입니다.
00:07:46단순한 텍스트 프롬프트에서 벗어나
00:07:49시각적 매체로 넘어가는 단계죠.
00:07:52말만 하는 것이 아니라 실제로 보여주기 시작하는 거죠.
00:07:54그래서 레벨 3은 여러분이 비주얼 디렉터가 되는 단계입니다.
00:07:56여기서부터 우리는 클로드 코드에
00:07:58우리가 목표로 하는 구체적인 예시들을 제공하기 시작합니다.
00:08:01그렇게 하면 단순히 텍스트와 기술에만 의존하지 않게 되죠.
00:08:03이제 텍스트와 기술, 그리고 시각적 예시를 함께 사용하는 겁니다.
00:08:07이것은 두 가지 이유로 엄청난 돌파구가 됩니다. 첫째,
00:08:09클로드 코드는 여러분의 설명보다
00:08:12직접 보여준 이미지를 훨씬 더 잘 모방할 수 있기 때문입니다.
00:08:15둘째로, 이미지를 사용한다는 것은
00:08:17다른 웹사이트들을 살펴본다는 뜻이며, 이제 우리는 다시 한번
00:08:20제대로 된 결과물이 무엇인지 확인할 수 있게 됩니다.
00:08:23이 분야의 전문가들은 실제로 어떻게 작업하는지, 우리가 어떻게 따라 할 수 있는지 말이죠.
00:08:25자, 이제
00:08:26프런트엔드 디자인 영감을 얻을 수 있는 곳들이 많은데,
00:08:28그중 네 곳을 소개해 드리겠습니다.
00:08:31첫 번째는 Awwwards입니다. w가 세 개 들어가는 사이트죠.
00:08:34사람들이 자신의 프런트엔드 작업물을 제출하고
00:08:37점수를 받는 곳이라 굉장히 창의적인 성향이 강합니다.
00:08:40두 번째는 godly.website입니다.
00:08:42무한 스크롤 방식의 사이트로, 다양한 디자인을 한눈에 볼 수 있습니다.
00:08:45세 번째는 핀터레스트인데,
00:08:48의외로 꽤 멋진 자료들이 많습니다.
00:08:49여기서 저는 'SaaS 랜딩 페이지'를 검색해 보겠습니다.
00:08:52마음에 드는 것을 하나 찾으면,
00:08:53그와 비슷한 디자인들도 줄지어 확인할 수 있습니다.
00:08:56마지막으로 드리블(Dribbble)이 있습니다. b가 세 개 들어갑니다.
00:08:58여기도 'SaaS 랜딩 페이지'라고 치면
00:09:01아주 멋진 디자인들이 많이 나옵니다.
00:09:04예를 들어 제가 'OpenHands' 같은 웹사이트를 발견했다고 해보죠.
00:09:07저는 이 사이트의 구성이 마음에 듭니다.
00:09:09상단에 검증된 워크플로가
00:09:11스크롤되는 방식이나 독특한 색상 조합이 좋습니다.
00:09:14보자마자 뭔가 흔치 않은 느낌을 주거든요.
00:09:15사회적 증거(Social Proof) 요소도 있고,
00:09:19전반적인 스타일이 아주 마음에 듭니다. 그렇죠?
00:09:22자, 이제 제가 할 일은 아주 간단합니다.
00:09:23이 웹페이지를 여러 장 스크린샷으로 찍어서
00:09:26클로드 코드에 넣고 "이게 내가 원하는 비주얼 스타일이야"라고 말하는 거죠.
00:09:29그래서 클로드 코드 안에서 이렇게 말했습니다.
00:09:31"우리 웹사이트를 OpenHands 스타일로 맞추고 싶어."
00:09:34URL을 알려주고 나서,
00:09:36"참고용 스크린샷이야"라며
00:09:38찍어둔 스크린샷들을 모두 업로드했습니다.
00:09:40그러면 이제 참고할 수 있는 실제 시각 자료가 생긴 거죠.
00:09:43적어도 저에게는 제가 원하는 바를 말로 설명하는 게
00:09:45상당히 어려운 일이었을 겁니다.
00:09:47UI UX 전문가 스킬의 도움을 받더라도 말이죠.
00:09:51그리고 이 과정을 통해서,
00:09:52우리는 정말 좋은 시각적 참고 자료들을 선별하기 시작할 겁니다.
00:09:55세상에는 정말 많은 자료가 있습니다.
00:09:57그런 것들을 자꾸 보다 보면,
00:10:00어설픈 디자인은 눈에 들어오지도 않게 됩니다. 그러면
00:10:03"이렇게 멋진 자료들이 널려 있는데 왜 그렇게 만들었지?" 하는 생각이 들죠.
00:10:05그렇게 참고 자료를 많이 볼수록,
00:10:07비록 클로드 코드에 스크린샷만 주고 있더라도,
00:10:09여러분이 원하는 바를 구체적으로 전달하는 데 도움이 될 겁니다.
00:10:12왜냐하면,
00:10:12수많은 레퍼런스를 훑어보면서 공통적인 요소들을
00:10:14반복해서 보게 될 것이기 때문입니다.
00:10:16또한 여러분이 시도해야 할 것은
00:10:18여러 사이트의 레퍼런스를 조합하는 것입니다.
00:10:21여기서는 OpenHands를 사용했지만,
00:10:23핀터레스트나 godly.website에서 찾은
00:10:26멋진 요소들을 가져와서 섞을 수도 있겠죠.
00:10:28이쪽에서 하나, 저쪽에서 하나씩 가져오는 식으로요.
00:10:29여러 사이트의 장점만을 따와서
00:10:32결합하고 싶은 겁니다. 하지만,
00:10:33이 단계에서 빠지기 쉬운 함정이 하나 있습니다.
00:10:36대부분의 사람이 레벨 3에서 멈춘다고 봅니다. 그들은
00:10:39스킬을 써야 한다는 건 이해합니다.
00:10:41클로드 코드가 처음엔 별로지만,
00:10:42스킬과 스크린샷을 쓰면 꽤 괜찮은 결과가 나온다는 걸 알죠.
00:10:45하지만 여기엔 한계가 있습니다. 왜냐하면
00:10:49'분위기의 격차(Vibe Gap)'에 가로막히기 때문입니다.
00:10:50결과물을 보시면 아시겠지만,
00:10:52비슷하긴 할 겁니다.
00:10:55하지만 완벽하지는 않을 거예요. 다시 말씀드리지만,
00:10:57일종의 정보 손실 효과가 발생하기 때문입니다.
00:11:01모든 것을 코드로 처리하는 클로드 코드에게
00:11:03시각적 이미지를 보여주면서
00:11:05"이 비주얼을 코드로 번역해 줘"라고 말하는 과정에서 말이죠.
00:11:08이게 바로 많은 프런트엔드 디자인의 문제입니다.
00:11:10시각적인 매체임에도 불구하고
00:11:12텍스트로 입력해야 하죠. 동시에,
00:11:15시각적인 스크린샷을 던져준다고 해도
00:11:17여전히 번역의 과정이 남아있습니다.
00:11:18그럼 어떻게 해야 제대로 할 수 있을까요? 사실,
00:11:20그 방식에는 한계가 있고 그 한계를
00:11:22여기서 바로 확인할 수 있습니다.
00:11:24이게 바로 그 스크린샷들을 가지고 만든 결과물이거든요.
00:11:28이게 원본이고, 이게 우리가 만든 겁니다.
00:11:31전에도 말씀드렸듯이,
00:11:32이 지점에서 사람들이 정체됩니다.
00:11:33이걸 훑어보면,
00:11:36눈을 가늘게 뜨고 보면
00:11:37무엇을 의도했는지는 대충 보입니다.” 아마
00:11:3950% 정도는 따라왔을지도 모르죠.”
00:11:41마음에 드는 부분도 좀 있겠지만,
00:11:43이제 사람들은 여기서
00:11:46히어로 섹션의 스크린샷을 다시 찍습니다.
00:11:49그리고 그 부분만 계속해서 수정하려고 하죠.
00:11:51끝도 없이 프롬프트를 입력하고, 다시 스크린샷을 찍고 반복합니다.
00:11:53시간은 엄청나게 걸리는데 정작 제대로 완성되지는 않죠.
00:11:56그렇죠?
00:11:57스크린샷을 코드로 번역하는 과정의 문제 때문입니다.
00:11:59따라서 레벨 3을 벗어나 레벨 4로 나아가려면,
00:12:03마음에 드는 웹사이트의 겉모습만 보고 영감을 얻는 데 그쳐서는 안 됩니다.
00:12:08그것들을 제대로 복제하는 법을 배워야 합니다.
00:12:11OpenHands 같은 사이트를 구동하는 실제 소스코드를 얻어야 하죠.
00:12:15이것은 단순히 "그냥 복제하고 싶어, 그냥 베낄 거야"라는 수준을 넘어섭니다.
00:12:20복제하고 복사하는 방법을 파악하는 과정은
00:12:23우리에게 엄청난 이점을 가져다줍니다.
00:12:26단순히 템플릿을 얻는 것뿐만 아니라,
00:12:30표면 아래에서 실제로 어떤 코드가
00:12:34작동하고 있는지 접하게 되며 레벨 3에서 4로 올라가게 됩니다.
00:12:38이제 스크린샷을 통해 웹사이트를 겉핥기식으로만 보는 단계를 넘어서야 합니다.
00:12:44이제는 표면 아래로 내려가서,
00:12:48장막 뒤에 숨겨진 실제 코딩 구성 요소들이
00:12:51어떻게 구축되어 있는지 확인해야 합니다.
00:12:54HTML, CSS, 그리고 자바스크립트를 말이죠.
00:12:56그래서 레벨 4는 '복제 전문가(The Cloner)'입니다.
00:12:59전문가들의 것을 훔치면서 배우는 단계죠.
00:13:02분명히 말씀드리자면,
00:13:04이 단계는 단순히
00:13:05웹사이트를 표절해서 그대로 내 것이라고 주장하는 게 아닙니다.
00:13:08그런 뜻이 아니에요.
00:13:10마음에 드는 웹사이트를 찾아서
00:13:13그 구조를 해체한 뒤, 우리가 구축할 토대로 활용하는 것입니다.
00:13:16그리고 그 과정에서,
00:13:20어떤 분야의 기술이든 그렇듯 정말 많은 것을 배우게 될 겁니다.
00:13:24어떻게 하면 실력이 늘까요? 전문가들이 하는 걸 보고
00:13:27그대로 따라 해 보는 겁니다.
00:13:28그들을 모방하려 애쓰는 과정에서 엄청나게 성장하죠.
00:13:30그러다 시간이 흐르면 자신만의 색깔을 입혀서
00:13:33독창적인 결과물을 만들어내는 겁니다. 이게 이 레벨의 핵심입니다.
00:13:35여기서 최대한의 효과를 얻으려면,
00:13:37프런트엔드 디자인이 어떻게 돌아가는지 이해할 필요가 있습니다.
00:13:39프런트엔드 디자인을 아주 단순화하면
00:13:42세 부분으로 나뉩니다. 먼저 HTML이 있습니다.
00:13:45웹사이트가 어떻게 구조화되어 있는지 보여주는 '뼈대'라고 생각하세요.
00:13:47다음으로 CSS가 있습니다.
00:13:50이것은 웹사이트의 '스타일링'입니다.
00:13:52웹사이트가 입고 있는 '옷'이라고 보시면 됩니다.
00:13:55그리고 자바스크립트가 있습니다.
00:13:56자바스크립트는 '근육'과 같습니다.
00:13:59버튼을 클릭했을 때 무언가 실제로 동작하게
00:14:01만들어주는 역할을 하죠.
00:14:02웹사이트의 이 세 가지 요소를 살펴봄으로써 우리는
00:14:05더 나은 복제나 템플릿 제작이 가능해질 뿐만 아니라,
00:14:08그것들이 어떻게 작동하는지도 이해하게 됩니다.
00:14:10웹사이트를 해체하고 그들의 방식을 배우는 것이죠.
00:14:13그럼 어떻게 하면 될까요?
00:14:15예를 들어 OpenHands를 어떻게 해체할 수 있을까요?
00:14:17스크린샷만으로는 똑같이 만들 수 없다는 걸 확인했죠.
00:14:21방법은 비교적 간단합니다. HTML을 얻으려면,
00:14:25웹사이트에 접속해서 Control + U를 누르면 됩니다.
00:14:28그럼 HTML 코드 전체가 나타납니다.
00:14:33이제 우리가 할 일은 이걸
00:14:37전부 복사하는 겁니다.
00:14:39그런 다음 클로드 코드에 붙여넣습니다.
00:14:42보통 양이 꽤 많을 텐데, 이 경우에는
00:14:441,152줄의 HTML이 있네요. 그리고
00:14:48코드 맨 아래쪽을 보면,
00:14:50CSS 파일과 자바스크립트 파일로 연결되는
00:14:54링크들도 확인할 수 있습니다.
00:14:56지금 제가 하단에서 강조하고 있는 부분입니다.
00:14:58거의 모든 HTML 파일의 맨 아래에는 이런 정보가 있는데,
00:15:01조금 축소해서 보여드릴게요.
00:15:04잘 안 보일 수도 있겠지만, 여기 하단에
00:15:06자바스크립트와 CSS 파일들이 있습니다.
00:15:09이 파일들 안에도 엄청난 양의 코드가 들어있죠.
00:15:13그래서 우리가 할 일은 HTML을 제공한 뒤에,
00:15:17클로드 코드에게 이렇게 말하는 겁니다.
00:15:19"자바스크립트와 CSS 파일도 살펴보고 실제로 무슨 일이 일어나는지 파악해 줘."
00:15:22그래서 저는 "CSS와 JS 파일도 확인해 줘"라고 썼습니다.
00:15:24여기까지만 해도 클로드 코드가
00:15:29웹 페치(Web Fetch) 기능을 사용해서 스스로 살펴볼 겁니다.
00:15:31문제는 웹 페치 방식이 클로드 코드가 직접 가는 게 아니라,
00:15:35더 작은 모델을 시켜서 대신하게 한다는 점입니다.
00:15:39즉, 현재 클로드 코드 인스턴스가 직접 페이지를 방문하는 게 아니에요.
00:15:42작은 모델이 훑어보고 요약해서
00:15:46클로드 코드에게 전달해 주는 식이죠.
00:15:47하지만 CSS와 JS 파일은 매우 크고, 웹사이트가 구축된
00:15:51아주 구체적인 방식들이 담겨 있습니다.
00:15:54그래서 우리는 요약본이 아니라 전체 내용이 필요합니다.
00:15:58그래서 저는 클로드 코드가 이 작업을 더 잘 수행하도록
00:16:03스킬을 하나 만들었습니다. 일종의 강화된 프롬프트죠.
00:16:04필요한 만큼의 CSS와 자바스크립트를 모두 가져오게 합니다.
00:16:07그래서 저는 그냥 "사이트 분석(Site Tear Down) 스킬을 써 줘"라고 말합니다.
00:16:12이 사이트 분석 스킬은 무료 스쿨 커뮤니티에 올려둘 테니,
00:16:16설명란의 링크를 확인해 주세요.
00:16:18그걸 불러오기만 하면 여러분도 똑같이 하실 수 있습니다.
00:16:21결과적으로 제가 뭐라고 했나요? "여기 OpenHands의 HTML이야."
00:16:25CSS와 JS 파일도 함께 살펴보라고 지시했습니다.
00:16:28사이트 분석(site tear down) 스킬을 사용해서 원본 Open Hands 사이트를 더 완벽하게 복제하도록 했죠.
00:16:31자, 이게 우리에게 어떤 공부가 될까요? 우선 첫 번째로,
00:16:36여러분은 이런 배경 화면을 어떻게 만들었는지 전혀 감이 안 오실 겁니다, 그렇죠?
00:16:39그렇죠?
00:16:40이걸 더 비슷하게 흉내 내려면 어떤 어휘를 사용해서 요청해야 할지조차
00:16:43잘 모르거나 이해하지 못할 가능성이 높습니다.
00:16:46그냥 스크린샷만 줬을 때는 "음, 뭐 어느 정도 비슷하네" 수준의
00:16:50결과물만 얻었었죠.
00:16:52하지만 Claude Code가 실제로 내부 코드를 들여다보게 함으로써,
00:16:56이제 우리는 Claude Code가 가르쳐주는 내용을 토대로 배울 수 있습니다. Claude Code가
00:17:01코딩 수준에서 무엇이 돌아가고 있는지 실제로 이해하고 있기 때문이죠.
00:17:04이제 Claude Code와 지적인 대화를 나누며 이렇게 물어볼 수 있습니다. "이건 어떻게 만든 거야?"
00:17:07"이게 무슨 뜻이야? GSAP이 뭐야?"
00:17:11"스크롤 애니메이션은 어떻게 구현했어? 이건 어떻게 했고,"
00:17:13"저건 또 어떻게 한 거야?"라고 말이죠.
00:17:14시간이 흘러 이런 웹사이트를 점점 더 많이 복제해보고 여러분만의 템플릿으로 활용하다 보면,
00:17:18결국 여러분만의 독창적인 색깔을 입히게 될 것이고,
00:17:19이 과정은 그저 기초 토대를 닦는 작업일 뿐입니다.
00:17:21그러면 다른 기술과 마찬가지로 여러분의
00:17:23프런트엔드 디자인 실력도 향상될 것입니다.
00:17:26이것이 바로 전문가의 기술을 단순히 접하는 데 그치지 않고
00:17:29여러분의 작업물에 녹여내는 과정입니다.
00:17:31하지만 더 높은 단계로 나아가려면 앞서 말했듯이
00:17:34Claude Code를 사용하면서 생각 없이 키보드만 두드리는 원숭이가 되어선 안 됩니다.
00:17:38그저 "수락, 수락, 다음, 다음"만 눌러서는
00:17:41다른 사람과 어떻게 차별화를 두겠습니까?
00:17:43그렇다면 이 과정에서 우리가 마스터해야 할 기술은 무엇일까요?
00:17:46우선 소스 코드를 읽고 이해하는 법을 배워야 합니다.
00:17:48Claude Code가 그 부분을 도와줄 겁니다.
00:17:51또한 어떤 기법이 어떤 효과를 만들어내는지 파악해야 합니다.
00:17:52어느 시점이 되면 웹사이트를 보자마자
00:17:57"아, 이건 이렇게 구현했구나"라고 즉시 알아볼 수 있어야 하죠.
00:18:02마지막으로, 이런 복제 패턴을 우리만의 디자인에 적용하는 법을 배워야 합니다.
00:18:04우리는 표절을 하는 게 아니라 영감을 얻는 것이니까요.
00:18:09만약 이런 기술들을 마스터하지 못하면
00:18:12이런 함정에 빠지게 될 겁니다. 바로 "복제의 한계"죠.
00:18:13그저 베낄 줄만 알지 창조는 할 수 없게 됩니다.
00:18:16"왜" 그렇게 되는지 이해하려 하지 않는다면
00:18:18결국 성장의 한계에 부딪힐 것입니다.
00:18:20그렇게 되면 저는 언제든 여러분을 길가는 아무나로 교체하고
00:18:22그저 1, 2, 3단계만 따라 하라고 시키면 그만이죠.
00:18:25그건 여러분이 원하는 목표까지 데려다주지 못할 겁니다.
00:18:27자, 그럼 풍부한 코딩 컨텍스트를 제공했을 때
00:18:29Claude Code가 무엇을 만들어냈는지 업데이트된 버전을 확인해 봅시다.
00:18:32보시다시피 배경 화면이 제대로 구현되면서
00:18:35훨씬 더 원본에 가까운 모습이 되었습니다.
00:18:39이 둘을 비교해 보면, 물론 아직 100% 똑같지는 않습니다.
00:18:41이건 첫 번째 시도였을 뿐이니까요. 하지만 훨씬 더 나아졌고
00:18:45우리가 원했던 모습에 훨씬 가까워졌습니다.
00:18:48여기서 계속 반복 작업을 통해 우리가 원하는 모습에 더 가깝게
00:18:50다듬어나가는 것은 훨씬 쉽습니다, 그렇죠?
00:18:54이제 Open Hands가 참고한 것과 똑같은 레시피를
00:18:57Claude Code도 보고 있기 때문입니다. 우리는 그저 "이걸 바꿔줘,"
00:19:01"저걸 바꿔줘. 걔네가 어떻게 했는지 알겠으니까 우리도 이렇게 흉내 내보자"라고 말하면 됩니다.
00:19:04다시 말하지만, 여기서부터 교육 과정이 시작됩니다. 예를 들어,
00:19:07이 멋진 배경은 어떻게 작동하는 걸까요?
00:19:10또 마우스 스크롤에 따라 일부 요소가 사라지는
00:19:12Open Hands의 효과를 어떻게 똑같이 구현할 수 있을까요?
00:19:17그저 Claude Code에게 "배경이 어떻게 돌아가는 거야?"
00:19:19"그 효과를 어떻게 맞출 수 있지?"라고 물어보기만 하면 됩니다.
00:19:22이렇게 할 때마다 여러분의 도구 상자에는 새로운 도구가 하나씩 추가되는 셈입니다.
00:19:25그러면 Claude Code가 이 효과가 어떻게 작동하는지 설명해 주고,
00:19:27나아가 우리 사이트의 배경에도 그 효과를 적절히 적용해 줍니다. 정말 멋지죠.
00:19:32하지만 당연히 우리는 4단계에만 머물고 싶지 않습니다.
00:19:35단순한 복제 전문가로 남고 싶지는 않으니까요. 우리만의 독창성을 더하고 싶죠.
00:19:38이걸 우리 것으로 만들기 시작해야 합니다.
00:19:42어떻게 5단계로 넘어가서 우리만의 반전을 줄 수 있을까요?
00:19:45여기서부터 컴포넌트와 커스텀 에셋 디자인을 가지고 노는 재미가 시작됩니다.
00:19:48우리만의 요소를 가져오는 것이죠. 더 이상 다른 웹사이트를
00:19:53똑같이 베끼는 수준에 그치지 않습니다.
00:19:56가장 쉬운 방법 중 하나는 21st.dev 같은 사이트에서
00:19:57훌륭한 컴포넌트들을 찾아보는 것입니다.
00:20:02이것은 웹사이트에서 영감을 얻어 그 부분을 가져오는 것과 비슷하지만,
00:20:04더 미세한 단위인 컴포넌트 수준에서 이루어집니다.
00:20:08예를 들어 21st.dev 같은 곳에서
00:20:11왼쪽에 있는 버튼 항목을 살펴보면,
00:20:14수많은 다양한 버튼 디자인을
00:20:17볼 수 있습니다. 마음에 드는 버튼 디자인을 찾았다면,
00:20:21해당 프롬프트를 복사해서 Claude Code에 가져온 뒤,
00:20:26"이 버튼 디자인을 통합해줘"라고 말하면 됩니다.
00:20:29이건 기본적으로 모든 종류의 요소에 적용 가능합니다.
00:20:33캐러셀, 스크롤 영역, 지도,
00:20:36내비게이션 메뉴, 이미지 등 모든 것이 다 있습니다.
00:20:40또한 21st.dev에만 국한된 것도 아닙니다. CodePen 같은 사이트도 있죠.
00:20:42CodePen에도 가져다 쓸 수 있는 멋진 디자인이 아주 많습니다.
00:20:46Monet도 정말 멋진 곳 중 하나입니다. 사실,
00:20:50이런 멋진 컴포넌트를 찾아서 웹페이지에
00:20:52통합할 수 있는 곳은 아주 많습니다.
00:20:57하지만 더 커스텀한 것을 원한다면 어떨까요?
00:20:59다른 데서 찾은 랜덤한 컴포넌트들을 그냥 복사해 넣고 싶지는 않습니다.
00:21:01어떻게 해야 정말 독창적으로 만들 수 있을까요? 두 가지 옵션이 있습니다.
00:21:04첫 번째는 여전히 21st.dev의 컴포넌트를 사용하되,
00:21:08Claude Code에 수정을 요청하는 겁니다. 어차피 코드니까요.
00:21:11프롬프트를 통해 정확한 코드를 얻은 다음 입맛에 맞게 수정하거나,
00:21:14아니면 아예 직접 창조할 수도 있습니다.
00:21:18Pinterest에 가서 아주 예술적인
00:21:21멋진 랜딩 페이지들을 보게 된다면,
00:21:25AI를 사용해서 그런 이미지를 만들지 못할 이유가 없습니다.
00:21:29사람들이 우리 페이지에 들어왔을 때 시선을 확 사로잡는 요소로 만드는 거죠.
00:21:34그리고 이건 정지된 이미지일 필요도 없습니다.
00:21:36배경에 비디오를 추가하거나,
00:21:39특정 스크롤 애니메이션과 연결할 수도 있습니다.
00:21:424단계에서 발견한 아이디어들을 가져와 우리만의 것으로 만드는 거죠.
00:21:45자, 그럼 실제로 해봅시다. 웹페이지를 빠르게 재디자인해서
00:21:49Open Hands 복제본에서 벗어나 아주 멋진
00:21:53AI 아트를 디자인하고, 사이트에 들어왔을 때 가장 먼저 보이게 해봅시다.
00:21:57이제 어떻게 하는지 다들 아시죠?
00:22:01우선 영감을 얻을 대상을 찾아야 합니다. Pinterest를
00:22:02잠시 훑어본 결과,
00:22:06히어로 섹션 배경에 만화 같으면서도 스타일리시한
00:22:07이미지가 들어간 사이트들이 많이 보입니다.
00:22:10그리고 왼쪽에는 텍스트가 배치되어 있죠.
00:22:14이제 여러분의 비주얼 스토리텔링 실력을 발휘할 때입니다.
00:22:16우리가 만들고 있는 앱이 무엇인가요? Argus죠?
00:22:19이미지와도 잘 어울리는
00:22:22멋진 태그라인을 생각해내야 합니다. Argus를 통해 무엇을 보여주고 싶나요?
00:22:27Argus는 신화 속 인물로, 눈이 만 개나 달려 있죠.
00:22:30소셜 미디어를 다루는 앱이고,
00:22:33다른 사람들보다 먼저 무언가를 찾아내는 것에 관한 것입니다.
00:22:34그래서 제가 생각해낸 태그라인은 "다음에 올 것을 보라(See what's next)"입니다. 간단하죠.
00:22:37강렬하잖아요. 그리고 누가 이걸 도와줬는지
00:22:41당연히 Claude Code였습니다. 제가 Claude Code에게
00:22:44이렇게 말했습니다.
00:22:47"비주얼 스토리텔링에 관해 이야기 중인데,
00:22:49이미지 관련해서 어떤 아이디어가 있을까?"라고요.
00:22:51이 단계에서는 우리만의 것을 만드는 중이니까요.
00:22:54다른 사이트가 구성한 이미지의 일반적인 개념은 가져올 수 있지만,
00:22:57이미지 자체는 저만의 것이어야 합니다. 다시 말하지만,
00:23:01애플리케이션의 기능과 연결되는 비주얼 스토리텔링이 있다면
00:23:04결과물은 훨씬 더 훌륭해질 것입니다.
00:23:07그래서 Claude Code가 준 아이디어를 바탕으로
00:23:10이미지를 생성했고, 저는 Midjourney를 활용했습니다.
00:23:15이미지 생성기는 Nano Banana Pro든 Seed Dream이든
00:23:18무엇을 써도 상관없습니다.
00:23:21저는 이런 컨셉 아트 스타일에는 Midjourney가 좋더라고요.
00:23:24특히 버전 7이 마음에 들었습니다.
00:23:28버전 8은 아직 많이 테스트해보지 못했거든요.
00:23:31대충 모호한 프롬프트를 줘도 잘 알아듣습니다. 예를 들어,
00:23:33"Argus라는 웹사이트의 랜딩 페이지 배경 이미지가 필요해.
00:23:38태그라인은 'See what's next'야"라고만 줬죠.
00:23:41이렇게 아주 모호하고 형편없는 프롬프트를 줬음에도
00:23:43선택할 만한 멋진 결과물들을 많이 얻었습니다.
00:23:47그중 이걸 보고 "와, 이거 진짜 멋진데?"라고 생각했죠.
00:23:50왼쪽에 정보를 배치하고,
00:23:54상단에 요소를 몇 개 넣는 모습이
00:23:55벌써 머릿속에 그려졌습니다. 나중에 애니메이션 효과를 줄 수도 있겠죠.
00:23:59이미지가 준비되었다면 그다음은 쉽습니다.
00:24:02이미지를 다운로드해서 Claude Code에 주고 이렇게 말하면 됩니다.
00:24:06"이 이미지를 배경으로 사용해서 히어로 페이지를 재구성해줘."
00:24:10Claude Code 안에서 저는
00:24:13프런트엔드를 완전히 바꾸고 싶다고 말했습니다.
00:24:17"다음 이미지를 히어로 배경으로 사용하자.
00:24:19Argus 앱에 대한 정보는 왼쪽에 두고,
00:24:21오른쪽에는 여백을 두어 이미지를 돋보이게 해줘. 태그라인은 See what's next로 해줘."
00:24:24이제 어떻게 결과가 나오는지 지켜봅시다. 다시 말하지만,
00:24:27이 단계부터는 여러분의 창의력을 마음껏 발휘해야 합니다.
00:24:30지금까지 여러분은 흔한 SaaS 템플릿에서 보는
00:24:34지루한 디자인과는 다른 수많은 프런트엔드 디자인을 접해왔으니까요.
00:24:37멋진 예술 작품이든 뭐든,
00:24:39비주얼 스토리텔링을 목표로 삼는다면 여러분의 실력은 한 단계 더 도약할 것입니다.
00:24:43자, 새로운 배경 이미지가 적용된
00:24:46업데이트된 히어로 섹션입니다. 전체를 다 볼 수 있게
00:24:48화면을 좀 줄여봤는데, Claude Code가 색상까지
00:24:52전부 업데이트해 줬습니다. 물론 이건 첫 번째 시도일 뿐입니다.
00:24:52배경만 추가했을 뿐인데도 벌써 훨씬
00:24:56독창적이고 창의적인 느낌이 나며 차별화가 되죠, 그렇죠?
00:24:58이제 여기에 우리만의 느낌을 더 많이 추가해 봅시다.
00:25:02시작은 간단하게 이미지 해상도를 높이는 것부터 할 수 있습니다.
00:25:06Midjourney에서 바로 할 수 있죠. 지금은 이미지가
00:25:09조금 늘어나 보이고 디테일이 부족해 보이니까요.
00:25:12아니면 모션을 추가할 수도 있습니다.
00:25:15꼭 정지된 배경일 필요는 없거든요.
00:25:19배경에 비디오를 넣는 것도 가능합니다.
00:25:21비디오로 만드는 법은 아주 쉽습니다.
00:25:24Kling 3.0이나 Veo 3.1 같은 사이트에 가서
00:25:28시작 프레임을 설정하기만 하면 됩니다.
00:25:30마지막 프레임까지 설정할 수 있다면 더 좋겠죠. 보시다시피
00:25:32너무 과한 움직임은 피해야 합니다.
00:25:34완벽하게 루프(loop)가 되는 게 이상적이니까요.
00:25:36AI 이미지를 정확하게 루프시키는 게 가끔 어려울 때가 있습니다.
00:25:40그럴 때는 15초 정도의 꽤 긴 비디오를 만드는 게 차선책입니다.
00:25:41그리고 움직임은 아주 미세해야 합니다. 지금 보시는 것처럼 말이죠.
00:25:45새들이 가만히 있더라도 이런 걸 배경으로 쓰면
00:25:49패럴랙스(parallax) 같은 느낌을 줄 수 있습니다.
00:25:52히어로 페이지이고 영상이 15초 동안 지속된다면,
00:25:55누군가 30초 동안 가만히 앉아서 그 영상을 끝까지 볼 확률은 낮습니다.
00:25:59그래서 마지막에 약간 끊기는 부분이 있어도 괜찮습니다.
00:26:03다행히 이 영상은 움직임이 아주 미세해서,
00:26:0715초에서 다시 1초로 넘어갈 때 거의 티가 나지 않습니다.
00:26:11그래서 이걸 사용하겠습니다. 아마 이런 질문도 하실 겁니다.
00:26:14"성능 문제는 어떡하지?" 데스크톱 환경에서는
00:26:18비디오를 재생해도 성능에 큰 무리가 없겠지만, Claude Code에게 이렇게 지시할 겁니다.
00:26:22"모바일 사용자가 접속했을 때는
00:26:24비디오를 불러오지 말고 정지된 이미지만 보여줘."
00:26:25그래서 해상도를 높인 새 이미지를 주고 모바일용으로 쓰라고 했습니다.
00:26:29그리고 비디오 링크를 주면서
00:26:31히어로 섹션에 적용하라고 했죠.
00:26:35자, 모션이 적용된 현재 페이지의 모습입니다.
00:26:38꽤 괜찮아 보이네요. 움직임이 절제되어 있죠?
00:26:42모바일로 접속하면 비디오를 불러오지 않고, 그냥 정지 이미지를 보여줄 겁니다.
00:26:45그래서 새로 업스케일링한 이미지를 주고 모바일용으로 사용하라고 했죠.
00:26:50그러고 나서 비디오 링크를 건네주며 말했습니다.
00:26:52"이걸로 히어로 섹션을 교체해 줘."
00:26:54자, 이제 움직임이 적용된 페이지를 한번 볼까요?
00:26:58꽤 괜찮아 보이죠? 중요한 건 아주 절제되어 있다는 점입니다.
00:27:02배경에서 막 화려한 비디오 게임이 돌아가는 식의 과한 움직임은 피해야 합니다.
00:27:06본인이 뭘 하고 있는지 확실히 아는 게 아니라면 말이죠.
00:27:07하지만 구름이 살짝 움직이는 이런 식의 효과나,
00:27:11하단에 물이 흐르는 듯한 효과는 웹페이지에,
00:27:14생동감을 불어넣어 줍니다.
00:27:15웹페이지에 독창적인 개성을 부여하는 것, 그것이 바로 레벨 5의 핵심입니다.
00:27:19제가 계속 말씀드린 것처럼 처음 네 단계는 기본기를 다지는 과정이었습니다.
00:27:22전문가들이 어떻게 하는지 살펴봤다면, 여기 레벨 5에서는 직접 커스텀을 합니다.
00:27:25히어로 섹션에서 했던 것처럼,
00:27:28다른 모든 섹션에도 그렇게 접근하기 시작해야 합니다.
00:27:32예를 들어 이 카드들은 너무 투박하고, 이 배경도 좀 지루하죠.
00:27:36매번 똑같은 모습이니까요. 그럼 이제 뭘 해야 할까요?
00:27:38영감을 찾아야죠. 21st Thought나 Awwwards 같은 사이트에 갈 겁니다.
00:27:42그걸 Claude Code로 가져와서 제가 만족할 때까지,
00:27:45계속해서 수정을 반복할 겁니다. 사실 이 단계에서,
00:27:48시각적인 편집을 하다 보면 Claude Code 안에만 있는 게 답답하게 느껴질 수도 있습니다.
00:27:51터미널 안에서 텍스트로 작업하는 것과,
00:27:54시각적인 매체를 다루는 것 사이에는 늘 괴리감이 있기 마련이니까요.
00:27:58그래서 6단계에서는 Claude Code 밖으로 조금씩 나가볼 겁니다.
00:28:03레벨 6에서는 외부 도구들을 활용해서,
00:28:06이런 시각적인 요소들을 훨씬 더 정교하게,
00:28:11조율하기 시작할 거거든요.
00:28:14우리가 사용할 수 있는 도구는 아주 많습니다.
00:28:17Paper.design, Stitch, Figma 같은 것들이 있죠.
00:28:21Pencil.dev도 있고요.
00:28:22이제 여러분은 이런 외부 프로그램을 가져와서 더 세밀하게 만져볼 수 있는,
00:28:26실력과 기반을 갖췄습니다. 그중에서도 추천할 만한 도구는,
00:28:29AI 친화적이고 사용법도 간단한 'Stitch'입니다. 게다가 무료죠.
00:28:33구글에서 만든 도구인데, 기본적으로 프런트엔드 디자인을 위한 시각적인 캔버스를 제공합니다.
00:28:37여기서 저는 아무것도 없는 상태에서 시작하지 않았습니다.
00:28:38기존 디자인을 수정하는 '리디자인'을 하는 거죠.
00:28:42그래서 우리 웹사이트의 히어로 페이지와 나머지 부분을,
00:28:45스크린샷으로 찍어 Stitch에 넘겨주었습니다.
00:28:47그러고는 "현재 웹페이지 구성은 이래. 히어로 섹션은 마음에 들어."
00:28:51"전체적인 분위기와 색감도 좋은데,"
00:28:53하지만 기본적으로 우리 웹사이트의 하단 절반 전체를 업데이트하고 싶어요, 아시겠죠?
00:28:57"너무 밋밋하게 느껴지거든."
00:28:59"상단에 썼던 이미지나 색감을 하단에도 자연스럽게 가져오고 싶어."
00:29:03"어떤 디자인이 가능할지 한번 보여줘."
00:29:05자, Stitch가 생성한 리디자인 결과물을 한번 보시죠.
00:29:08결과는 이렇습니다.
00:29:10Stitch의 멋진 점은 리디자인된 결과물을 또 리디자인할 수 있다는 겁니다.
00:29:14요소를 선택하면 아래쪽에 창이 뜨는데,
00:29:15다른 챗봇처럼 그냥 프롬프트를 입력하면 됩니다.
00:29:18우클릭해서 변형(Variants) 메뉴로 들어가면,
00:29:22레이아웃, 색상 조합, 이미지 등을 변경할 수 있습니다.
00:29:24이 작업은 Stitch에서 리디자인을 한 것이지 바닥부터 코딩한 게 아니기 때문에,
00:29:28결과물은 그냥 생성된 이미지일 뿐입니다.
00:29:30하지만 이걸 우클릭해서 복사한 다음,
00:29:34다시 Claude Code로 가져가서 "이 디자인 어때?"라고 물어볼 수 있죠.
00:29:37이런 시각적인 편집 도구들은,
00:29:38아이디어를 구체화하는 과정에서 정말 훌륭한 역할을 합니다.
00:29:43비슷한 도구들이 아주 많아요. Pencil.dev도 그중 하나로,
00:29:46앞으로 자주 보게 되실 겁니다.
00:29:47Cursor나 VS Code를 사용 중이라면 시너지 효과가 아주 좋은데,
00:29:50캔버스를 띄워놓고 실시간으로 편집할 수 있기 때문입니다.
00:29:54이 분야에는 정말 많은 도구가 있고 매주 새로운 것들이 쏟아져 나오고 있죠.
00:29:58아무튼 그 이미지를 다시 Claude Code에 넣고 말했습니다.
00:30:01"이 디자인 어떻게 생각해?"
00:30:03"배경 이미지에 적용된 이 글래스모피즘(glassmorphism) 효과는 어때?"
00:30:06"한번 적용해 보자."
00:30:08이제 여러분은 웹사이트가 원하는 모습이 될 때까지 이 과정을 반복하게 될 겁니다.
00:30:12디자인이 완성될 때까지 말이죠.
00:30:12프런트엔드 디자인에서 이 단계는 그야말로 세밀하게 다듬는 과정입니다.
00:30:15계속해서 고치고, 또 고치는 거죠.
00:30:16이미 여러분은 어떤 방향으로 나아가야 할지 판단할 수 있는 실력을 갖췄지만,
00:30:21이건 지극히 반복적인 과정이라 지름길이 없습니다.
00:30:25그래도 이제 여러분에겐 필요한 모든 도구가 있습니다.
00:30:27영감을 찾고, 그걸 직접 구현해 볼 도구들 말이죠.
00:30:31혼자서 20분 정도 더 다듬어본 결과,
00:30:34Argus 웹사이트가 이렇게 변했습니다.
00:30:37우선, 사이트에 무게감을 실어주는 몇 가지 작은 변화들을 눈치채셨을 겁니다.
00:30:40훨씬 더 고급스러운 느낌을 주죠. 첫 번째는 로딩 섹션입니다.
00:30:43페이지를 새로고침하면 무엇이 보이나요?
00:30:45모든 텍스트가 뜨기 전에 살짝 멈칫하는 게 느껴지실 텐데,
00:30:49이게 사이트에 무게감을 주고 더 묵직한 느낌을 만듭니다.
00:30:52폰트도 바꿨습니다. 폰트와 타이포그래피는 정말 중요하죠.
00:30:57어디서 다양한 폰트를 보고,
00:31:00영감을 얻을 수 있을까요? 바로 구글 폰트(Google Fonts)입니다.
00:31:03수많은 폰트가 있고 전부 무료입니다.
00:31:06타입별로 잘 분류되어 있고 Claude Code에서 모두 사용할 수 있죠.
00:31:08어떤 폰트를 써야 할지 고민된다면 꼭 확인해 보세요.
00:31:11그리고 하단에 스크롤 섹션도 추가했습니다.
00:31:14이런 티커(ticker)를 넣었는데, 이건 비디오와,
00:31:19하단의 이미지 배경 사이의 경계선 역할도 겸합니다.
00:31:25전에는 비디오 히어로 섹션에서 바로 배경 이미지로 넘어갔는데,
00:31:30그 경계가 너무 투박했지만, 이제는 아주 자연스러운 구분선이 생겼습니다.
00:31:35Stitch에서 가져온 변화들도 눈에 띄실 겁니다.
00:31:38글래스모피즘 효과가 적용되었는데, 아직 조금 더 손을 봐야 합니다.
00:31:41보시다시피 움직일 때 가끔 잘리는 부분이 생기기도 하지만,
00:31:44배경 아트워크를 잘 보여주면서 사이트에 개성을 더해줍니다.
00:31:48그리고 이런 미세한 디테일들도 보세요.
00:31:52여기서 새로고침을 하면,
00:31:54카운터 숫자가 0에서 1,000만까지 촤르륵 올라가는 게 보일 겁니다.
00:31:59이런 사소한 디테일들이 바로 제작자가 공을 들였다는 증거이며,
00:32:03전문가적인 자부심이 드러나는 지점입니다.
00:32:07AI 도구와 콘텐츠 전략 항목 위로 빛이 슥 지나가는 효과도 보이죠.
00:32:10다시 말씀드리지만, 이런 작은 부분들이 중요합니다.
00:32:12사실 대부분의 사람들은 이런 사소한 것들을 일일이 알아채지 못할 수도 있습니다.
00:32:16하지만 이런 요소들이 모두 합쳐졌을 때,
00:32:20결국 조화롭고 누군가가 정성을 쏟아 만든 웹사이트가 탄생하는 겁니다.
00:32:24AI를 도구로 썼든 아니든 상관없습니다.
00:32:27핵심은 '공을 들여 빚어냈다'는 점이며, 모든 디테일이 살아있다는 거죠.
00:32:31상단의 스크롤 바가 진행되는 모습만 봐도 그렇습니다.
00:32:34전부 이런 작은 부분들이죠. 그럼 이건 어떻게 프롬프팅을 했을까요?
00:32:38솔직히 말씀드리면,
00:32:40지금까지 우리가 이야기한 모든 것들의 조합이었습니다.
00:32:42제가 좋아하는 스타일들을 봐두었다가,
00:32:45스크린샷을 찍어 Claude Code로 가져왔죠. 무엇보다,
00:32:48저도 웹 디자인 전문가는 아닙니다. 그래서 어떤 부분에서는,
00:32:52제가 뭘 원하는지 바로 알 수 있었죠. 가령,
00:32:53Stitch에서 봤던 그 글래스모피즘 카드 디자인이 마음에 들었습니다.
00:32:57Stitch가 먼저 그 아이디어를 준 셈이죠.
00:32:59Claude Code가 처음에 만든 건 그냥 평면적이었거든요.
00:33:03화면에서 도드라져 보이는 느낌이 전혀 없었죠. 그래서 저는,
00:33:06"무게감을 좀 주고 화면에서 튀어 나오게 해줘"라고 요청했습니다.
00:33:08하지만 제가 Claude Code에 시킨 건 그뿐만이 아니었습니다.
00:33:12"이런 요소를 구현할 때 참고할 수 있는,"
00:33:17"최상의 웹 디자인 사례들을 웹 검색으로 찾아봐"라고도 했죠.
00:33:20단순히 카드 디자인을 돋보이게 하고 무게감을 주는 것 외에,
00:33:22사이트를 더 고급스러우면서도,
00:33:25은근하게 돋보이게 할 만한 다른 아이디어들을 제안해 달라고 했습니다.
00:33:29그랬더니 여러 가지 아이디어를 내놓더군요.
00:33:32그중에는 버린 것도 있고 채택한 것도 있지만,
00:33:36그게 바로 일반적인 작업의 흐름입니다.
00:33:40완전히 본인에게만 의존할 필요는 없습니다.
00:33:41Claude가 웹에서 모범 사례들을 찾아줄 수 있으니까요. 다만,
00:33:45통제권은 언제나 여러분에게 있다는 걸 명심하세요.
00:33:47여러분이 운전대를 잡고 즐겁게 작업하시면 됩니다.
00:33:50이런 작은 디테일들이 모여서,
00:33:53개성을 만들고 여러분만의 사이트가 되는 겁니다.
00:33:57여러분의 창의적인 영혼이 이 공간에 더 많이 반영될수록,
00:34:02결과물은 더 훌륭해질 겁니다. 정말로요.
00:34:04본인이 화면에 구현하고 싶은 것과 보여주고 싶은 바를 그대로 투영한다면,
00:34:08그걸 단순히 'AI가 찍어낸 결과물'이라고 부르기는 어렵습니다.
00:34:11여러분의 것이기 때문에 흔한 AI 템플릿이라고 할 수도 없죠.
00:34:14이번 단계가 겉으로는 Stitch 같은 외부 도구를,
00:34:17사용하는 법에 관한 것처럼 보이지만,
00:34:19레벨 6의 본질은 제가 방금 말씀드린 모든 과정에 있습니다.
00:34:23외부 도구를 활용해 수없이 반복 수정하는 것 말이죠.
00:34:25하지만 궁극적으로 이 단계에 이르면,
00:34:27드디어 창의적으로 생각하고 프런트엔드 디자인 영역에서 자신을 표현하며,
00:34:31Claude Code를 진정한 도구로 활용할 수 있게 됩니다. 초반 몇 단계에서,
00:34:34그저 흐름에 몸을 맡겼던 것과는 다르죠. 이제 마지막 관문인 레벨 7이 남았습니다.
00:34:37거기엔 대체 뭐가 있을까요?
00:34:413D 이야기가 나오는데, 미리 스포일러를 하자면,
00:34:45이 영역은 사실 우리 대부분이 발을 들일 일이 거의 없을 겁니다.
00:34:51프런티어, 아키텍트, 3D 같은 주제들은,
00:34:55말 그대로 '최정상급(big leagues)'의 영역이거든요.
00:34:57우리가 쉽게 해낼 수 있는 수준이 아닙니다.
00:35:02이 영상을 찍는 현재 2026년 3월 말 기준으로도,
00:35:05이게 우리의 영역 안으로 들어왔는지는 의문입니다.
00:35:07여기서는 커스텀 WebGL, 셰이더, 3D 경험 같은 것들을 다루기 때문이죠.
00:35:12우리가 말하는 건 이런 겁니다.
00:35:13마치 비디오 게임처럼 보이는 웹사이트들 말이죠. 예를 들어,
00:35:17여기 이 웹사이트를 한번 보세요.
00:35:20이게 그냥 소스 보기로 HTML과 CSS를 긁어온다고 해서,
00:35:25어떻게 돌아가는지 이해할 수 있는 수준일까요?
00:35:30아닙니다. 이건 그냥 '예술'입니다.
00:35:34디자이너 팀이 아주 오랜 시간 공을 들여,
00:35:37완성한 결과물이고 정말 눈부시게 아름답죠.
00:35:41이론적으로 AI가 이걸 할 수 있을까요? 어쩌면요. 하지만 솔직히,
00:35:45이건 지금의 여러분이나 제 수준을 훨씬 뛰어넘는 일입니다.
00:35:47단지 무엇이 가능한지 보여드리고 싶어서 이 단계를 넣었습니다.
00:35:50이런 웹사이트를 더 보고 싶다면,
00:35:53아까 말씀드린 Awwwards 사이트에 가보세요.
00:35:54'오늘의 사이트'나 '이달의 사이트'로 뽑힌 것들을 보면,
00:35:57하나같이 이런 느낌일 겁니다. 전부,
00:36:00독창적인 커스텀 작업물들이죠.
00:36:03어쩌면 몇 년 뒤에는 AI가 이런 영역에서도 활약하게 해줄지 모릅니다.
00:36:07아무튼 정말 멋진 세계죠.
00:36:09웹 디자인이라는 공간은 참 흥미롭습니다.
00:36:12이런 것들은 그냥 예술 그 자체니까요.
00:36:16이 업계에 처음 발을 들였을 때는,
00:36:17매번 똑같은 서비스형 소프트웨어(SaaS) 디자인만 보게 될 겁니다.
00:36:19하지만 이런 작품들을 접하면 정말 정신이 번쩍 들죠.
00:36:22이것이 바로 레벨 7의 영역입니다.
00:36:24만약 AI로 이런 걸 만드는 법을 아신다면,
00:36:27직접 유튜브 채널을 만드셔야 할 겁니다.
00:36:29저도 정말 배우고 싶거든요. 다만,
00:36:30이 레벨은 순전히 저 이글루(Igloo) 웹사이트를 자랑하고 싶어서 만들었습니다.
00:36:34정말 끝내주거든요. 꼭 한번 확인해 보시고,
00:36:38충격도 좀 받으면서 미래에 여러분이 무엇을 할 수 있을지,
00:36:42꿈꿔 보시기 바랍니다.
00:36:43이제 Claude Code를 활용한 프런트엔드 디자인 7단계 로드맵을 마무리하려 합니다.
00:36:46무엇보다 제가 여러분께 전달하고 싶었던 건,
00:36:51이런 수준에 도달하기 위한 기술 습득의 '단계적 과정'입니다.
00:36:56충분히 해낼 수 있는 일이니까요.
00:36:58먼저 마음에 드는 걸 발견해야 하고,
00:37:01그다음엔 그걸 해체하는 법을 배워야 합니다.
00:37:03웹사이트를 클로닝해 보는 경험이 정말 중요한 이유가 바로 그것입니다.
00:37:06마음에 드는 사이트를 Claude Code가 어떻게 만들었는지 하나하나 설명해 주는 걸 들으며,
00:37:10엄청난 공부가 될 테니까요.
00:37:14그 과정을 통해 존재조차 몰랐던 온갖 기법과 효과들을 배우게 될 겁니다.
00:37:18그리고 그렇게 익힌 것들을,
00:37:21자신의 웹사이트에 본인만의 스타일로 적용하기 시작하는 거죠.
00:37:26그게 핵심입니다. "Claude Code에 어떤 특별한 기능 하나만 쓰면"
00:37:30"웹사이트가 마법처럼 변한다" 같은 건 없습니다.
00:37:33솔직히 그게 그렇게 쉬웠다면 모든 웹사이트가 다 멋졌겠죠.
00:37:37하지만 현실은 그렇지 않잖아요. 그러니까 분명 그 이상의 무언가가 필요한 겁니다.
00:37:40흔히 'AI는 취향(taste)이 없다'고들 하는데,
00:37:44어느 정도 맞는 말일지도 모릅니다.
00:37:47하지만 더 정확하게는,
00:37:48우리가 자신의 취향을 명확하게 설명하는 데,
00:37:53어려움을 겪고 있다는 게 맞을 겁니다.
00:37:57우리가 웹 디자이너가 아니기에 적절한 표현조차,
00:38:02모르기 때문이죠. 전문 용어도 모르고,
00:38:05용어 체계도 모릅니다.
00:38:06이건 웹 디자인뿐만 아니라 AI를 활용하는 모든 분야에서 공통적으로 나타나는 문제입니다.
00:38:10다른 코딩 작업도 마찬가지예요.
00:38:13그 분야 출신이 아니라면,
00:38:15말 그대로 대화가 안 통하는 겁니다. 그래서 여러분과,
00:38:19Claude Code 사이에 소통의 간극이 생기고,
00:38:21그 결과물이 엉성하고 뻔해지는 거죠.
00:38:25하지만 이 로드맵을 따라오셨다면,
00:38:29시간이 흐르면서 그런 문제들을 해결할 길을 찾으셨을 거라 믿습니다.
00:38:32유익한 시간이 되셨기를 바랍니다. 저도 즐겁게 작업했네요.
00:38:37궁금한 점은 댓글로 남겨주시고,
00:38:40Claude Code 마스터클래스에 관심 있다면 Chase AI Plus도 꼭 확인해 보세요.
00:38:43거기서 뵙겠습니다. 다음에 또 만나요!