스크립트
00:00:00저희가 소프트웨어 회사라는 걸 이미 아실 텐데요, 저희는 코덱스(Codex)가 AI가 만든 것 같은 느낌이 아니라
00:00:04실제 전문 브랜드처럼 느껴지는 웹사이트를 구축하도록 보장하는 7단계 과정을 개발했습니다.
00:00:09AI 코딩이 처음이시든 이미 경험이 있으시든, 모두를 위한 내용이 준비되어 있습니다. 코덱스를 처음 열어보신다면
00:00:14기초부터 시작할 예정이니 전혀 걱정하지 마세요. 이미 코덱스를 사용해 보셨더라도
00:00:18똑같은 초보자 과정은 아닙니다. 더 나은 웹사이트를 구축하는 새로운 방법을 발견했거든요.
00:00:22이미 아시는 내용은 아래 타임스탬프를 통해 건너뛰고 새로운 단계로 바로 넘어가셔도 됩니다.
00:00:26이 영상이 끝날 때쯤이면 정말 멋진 랜딩 페이지와 웹사이트를 직접 만들고
00:00:31실제로 클라이언트에게 판매까지 할 수 있게 될 겁니다. 시간 낭비하지 말고
00:00:36바로 영상으로 들어가 보죠. 이미 코덱스를 사용 중이라면 이 설정 단계를 건너뛰고
00:00:40첫 번째 단계로 이동하세요. 처음 사용하신다면 ChatGPT 앱을 다운로드해야 합니다.
00:00:45이제 코덱스는 앱 내부의 모드가 되었기 때문이죠. 다운로드 후에는 이런 화면이 나타납니다.
00:00:50그런 다음 계정으로 로그인해야 합니다. 무료 버전은 사용량이 매우 제한적이라
00:00:54제대로 구축하고 싶다면 20달러짜리 플러스 플랜을 권장합니다. 충분히 활용할 수 있을 겁니다.
00:00:59더 많이 구축하고 싶다면 100달러나 200달러 플랜으로 업그레이드할 수도 있습니다. 하지만 지금은
00:01:0420달러 플랜이면 충분합니다. 첫 번째로 할 일은 코덱스로 전환하는 것입니다. 보시다시피
00:01:11여기에 여러 프로젝트가 있죠. 새 프로젝트를 만들려면 처음부터 시작해서 원하는 이름으로
00:01:16부르면 됩니다. 그러면 폴더가 생성됩니다. 그 폴더에서 작업을 시작하려면
00:01:20첫 번째 프롬프트를 입력하세요. 보시다시피 코덱스가 작업을 시작하고 여기서 답변을 할 겁니다.
00:01:24이것들을 폴더 안의 서로 다른 대화라고 생각하면 됩니다. 새 채팅을 열면
00:01:29여기에 또 하나가 생성되는 걸 볼 수 있죠. 이미 아시겠지만 코덱스는 이 대화들을 '스레드'라고 부릅니다.
00:01:34여기에 모델 선택 도구가 있습니다. 이번 영상에서는 최신 모델인 GPT 5.6을 사용합니다.
00:01:39이 설정을 사용해 본 적이 없다면, 'Effort(노력)' 설정은 모델이 답변에 얼마나 많은 공을 들일지 제어합니다.
00:01:45항상 'light'와 'high' 사이로 유지하는 걸 권장합니다. 그 이상으로 설정하면 사용량만 잡아먹고
00:01:50실질적인 이점은 없기 때문이죠. 속도의 경우 'standard'로 유지하는 것을 추천합니다.
00:01:55코덱스 모델들은 클로드(Claude) 같은 다른 모델에 비해 비교적 빠릅니다. 따라서 추가 사용량을
00:02:00쓰면서까지 'fast'로 바꿀 필요는 느끼지 못했습니다. 제한을 확인하려면
00:02:05이 메뉴를 클릭하세요. 여기서 주간 사용량의 81%가 남아있는 걸 볼 수 있습니다.
00:02:10그러니 항상 사용량을 주시해야 합니다. 구축 작업에 들어가기 전에 설명할 게 하나 더 있습니다.
00:02:16이미 아시겠지만, 코덱스 프로젝트는 컴퓨터상의 실제 폴더입니다.
00:02:21여기를 클릭해서 파일을 열면 폴더 안의 모든 파일이 보일 겁니다.
00:02:26그러니 코덱스 앱을 나갈 필요도, 터미널을 열 필요도, Visual Studio Code 같은 IDE를 켤 필요도 없습니다.
00:02:30첫 번째 단계부터 시작해 보죠. 코덱스가 무엇이든 설계하기 전에,
00:02:35웹사이트가 무슨 역할을 해야 하는지 알아야 합니다. 'AI 커뮤니티를 위한 랜딩 페이지를 만들어줘'
00:02:41라는 프롬프트는 주제만 알려줄 뿐입니다. 이 페이지가 누구를 위한 것인지, 그 사람이 무엇을
00:02:47이해해야 하는지, 어떤 행동으로 유도해야 하는지 설명하지 않죠. 그래서 코덱스는 그런 결정을
00:02:52추측해야만 하고, 페이지가 예쁘게 보여도 잘못된 문제를 해결할 수 있습니다.
00:02:58보시다시피 우리는 랜딩 페이지를 만들고 싶다고 말하며 시작했습니다. 코덱스에게 'Next.js'를 사용하라고
00:03:03언급할 수도 있죠. 사용해 본 적이 없다면, Next.js는 코덱스가 웹사이트를 구축하는 데 사용할
00:03:08시스템입니다. 이게 무슨 뜻인지 아직 모른다면 그냥 이 줄을 포함시키세요. 그리고
00:03:12랜딩 페이지의 목적과 용도를 정의해야 합니다. 예를 들어, 여기서는 'Beacon'이라는
00:03:17팟캐스트 분석 플랫폼을 위한 랜딩 페이지를 만들고 있습니다. 그 후, 플랫폼이 무엇을 할지 정의하면
00:03:23그 내용을 바탕으로 랜딩 페이지의 실제 콘텐츠를 생성합니다. 그다음 가장 중요한 부분입니다.
00:03:28랜딩 페이지의 실제 기능은 무엇인가요? 여기서는 사용자가 클릭하고 대기 명단에 합류하게 하는 것입니다.
00:03:33이게 프롬프트에서 가장 중요한 줄입니다. 어떤 랜딩 페이지는 이미 구축된 제품을 위한 것이죠.
00:03:38그런 페이지에는 보통 '가입(Sign up)' 버튼이 있지만, 우리는 사람들이 대기 명단에
00:03:43합류하기만을 원합니다. 그래서 코덱스는 무엇을 구축해야 할지 정확히 알고 있습니다.
00:03:48코덱스는 단일 프롬프트로 웹사이트를 구축할 수 있지만, 대화 내용 안에서 당신이 말해준 정보만 압니다.
00:03:53그래서 새 스레드를 시작하거나 다른 섹션으로 넘어가면, 같은 프로젝트에 대해 다른 결정을 내리기 시작할 수 있습니다.
00:03:58혹시 'agents.md' 파일을 사용해 본 적이 없다면, 이건 코덱스가 프로젝트 작업을 하기 전에 읽는 지침 파일입니다.
00:04:04구축 중인 내용에 대해 코덱스에게 필요한 맥락을 제공하죠. 그래서 매번 프롬프트마다 같은 지침을
00:04:09반복하는 대신, 모든 새로운 작업이 같은 정보로 시작되는 겁니다. 'agents.md' 파일을 생성하기 위해
00:04:15이걸 다 직접 적을 필요는 없습니다. 코덱스에 내장된 사용자 지정 명령어가 있습니다.
00:04:19슬래시(/)만 입력하면 다양한 옵션이 나옵니다. 이 영상에서 중요한 옵션들을 다룰 예정이니,
00:04:25지금 당장 전부 다 고민할 필요는 없습니다. 아래쪽에 보시면 'init' 옵션이 있습니다.
00:04:30선택하고 엔터를 누르면 코덱스에게 이 프롬프트를 줍니다. 이걸 사용하면 코덱스가 'agents.md' 파일을
00:04:34생성하고 초기 프롬프트에서 제공한 모든 맥락을 포함시킵니다. 파일을 보고 싶다면 열어보세요.
00:04:38여기에 파일이 많은 게 보일 겁니다. 이미 프로젝트가 구축되었기 때문인데, 걱정 마세요. 단계별로 안내해 드릴게요.
00:04:43'agents.md' 파일을 열어보면 코덱스가 어떻게 작업해야 하는지에 대한 기본적인 정보와
00:04:48프로젝트 구조 및 폴더 조직 같은 중요한 세부 사항이 포함된 것을 볼 수 있습니다.
00:04:52코덱스는 기본적으로 우리의 중요한 정보를 적절한 위치에 나열했습니다. 예를 들어,
00:04:56이 폴더에는 'Beacon' 웹사이트를 위한 Next.js 랜딩 페이지가 포함되어 있다고 적혀 있죠.
00:05:01파일 아래쪽에는 다른 세부 정보도 나열되어 있습니다. 또 다른 중요한 점은 코덱스가 스스로 작업을
00:05:07수행할 수 있을 때는 그렇게 하라고 지시사항을 맨 위에 추가해야 한다는 겁니다.
00:05:12앱을 시작하고 제대로 구축되었는지 검증하는 것도 포함해서 말이죠. 나중에 다시 언급하겠지만,
00:05:17코덱스 모델들에게는 한 가지 단점이 있습니다. 최신 모델 출시로 많이 개선되긴 했지만요.
00:05:22스스로 할 수 있는 일임에도 당신에게 대신 해달라고 하는 경향이 있습니다. 그러니 'agents.md' 파일
00:05:27맨 위에 이 지침을 추가하면 코덱스가 자율적으로 작업하는 데 큰 도움이 되어 계속 모니터링할 필요가 없습니다.
00:05:32이제 코덱스가 무엇을 만드는지 알았으니, 두 번째 단계는 재사용 가능한 디자인 지침 세트를 주는 것입니다.
00:05:37'Skills(스킬)'를 사용해 본 적이 없다면, 이건 코덱스가 특정 작업을 할 때마다 읽는 지침 파일이라고 보시면 됩니다.
00:05:42그러니 매 프롬프트마다 똑같은 웹 디자인 규칙을 설명하는 대신, 스킬에 저장해 두면 코덱스가 설계를 시작하기 전에 불러옵니다.
00:05:46이게 중요한 이유는 더 좋은 모델이 자동으로 독창적인 디자인을 제공하는 건 아니기 때문입니다.
00:05:51추가 지침이 없어도 모델은 짧은 프롬프트로 꽤 괜찮은 웹사이트를 생성할 수 있습니다.
00:05:57문제는 그 결과물을 충분히 생성해 본 뒤에야 명확해집니다. 내용은 바뀌지만 똑같은 디자인 언어가 반복되거든요.
00:06:03수천 명의 사람들이 같은 모델로 웹사이트를 만들고 있기 때문에, 그 디자인 언어가 사방에 나타나기 시작합니다.
00:06:08사람들이 흔히 말하는 'AI slop'이 바로 이것입니다. 웹사이트가 그 자체로는 괜찮아 보일지 몰라도,
00:06:12모든 AI 생성 웹사이트가 같은 템플릿에서 나온 것처럼 느껴지죠. Anthropic의 원래 프런트엔드 디자인 스킬은
00:06:17예전의 AI 디자인 기본값을 방지하기 위해 만들어졌지만, 최신 모델들은 이미 그런 선택지를 피하고
00:06:22원래 스킬로는 다룰 수 없는 다른 시각적 스타일을 발전시켰습니다. 그래서 이번 웹사이트에서는
00:06:26'GPT Taste' 디자인 스킬을 사용합니다. 이건 코덱스에게 시각적 시스템 전체에 대한 업데이트된 규칙을 주고,
00:06:31최신 모델들이 반복하는 패턴에서 벗어나게 해줍니다. 'GPT Taste' 스킬은 13개 스킬 세트에서 나옵니다.
00:06:36스킬이 많지만 GPT 모델들과 함께 사용하기 가장 좋은 건 GPT Taste 스킬입니다.
00:06:41다른 모델을 쓰고 있다면 나머지도 실험해 보세요. 코덱스에 추가하는 건 매우 쉽습니다.
00:06:46설치 명령어를 복사해서 코덱스에 입력하고 설치해달라고 하면 됩니다.
00:06:52먼저 모든 스킬이 설치된 게 보일 겁니다. 사용하기 전에는 코덱스를 껐다가 이 대화로 다시 돌아와야 합니다.
00:06:58스레드 방식이라 모든 작업이 저장되니 잃어버릴 걱정은 마세요. 그 후에 GPT Taste 스킬을 참조해야 합니다.
00:07:03코덱스에서 슬래시 명령어를 입력하고 명령어 이름을 적으세요. 엔터를 누르면 프롬프트에 삽입되고
00:07:10코덱스가 스킬 내부의 모든 내용을 읽게 됩니다. 이제 스킬을 추가한 뒤, 빌드를 시작하라고
00:07:15말하면서 특히 'site' 스킬은 쓰지 말라고 명시했습니다. 'site' 스킬을 사용해 본 적이 없다면,
00:07:21이건 Anthropic의 프런트엔드 디자인 스킬을 대체하기 위해 OpenAI가 내놓은 것이고 개념도 비슷합니다.
00:07:26하지만 실험해 본 결과, 좋은 결과물을 만들어내지 못합니다. 그러니 사용하지 않는 걸 권장합니다.
00:07:32언급하지 않으면 코덱스가 기본적으로 이걸 사용해 버리거든요. 'agents.md' 파일에
00:07:37설계를 위해 이 스킬을 절대 쓰지 말라고 지시할 수도 있습니다. 나중에 영상에서 다루겠지만
00:07:42이 스킬의 다른 용도가 있기 때문에 '설계를 위해' 사용하지 말라고 한 겁니다. 그 후에는
00:07:47기본적으로 전체 웹사이트를 빌드할 겁니다. 17분 동안 작업해서 전체 사이트를 구축한 게 보이죠.
00:07:53사이트가 빌드되면 이 링크를 줍니다. 로컬 웹사이트로 작업해 본 적이 없다면,
00:07:58'localhost'는 당신의 컴퓨터에서만 작동하는 링크라는 뜻입니다. 다른 사람에게 공유해도
00:08:03이 사이트 스킬을 써본 적이 없다면, 이건 Anthropic의 프론트엔드 디자인 스킬을 대체하기 위해 OpenAI가 만든 것으로, 비슷한 개념을 많이 차용하고 있습니다.
00:08:09사이트를 미리 보려면 코덱스를 떠날 필요가 없습니다. 사이드 패널을 열면 브라우저가 보일 겁니다.
00:08:14거기에 링크를 입력하면 코덱스가 생성한 사이트를 볼 수 있습니다. 생성된 사이트인데, 솔직히
00:08:19정말 훌륭합니다. 애니메이션도 깔끔하게 구현되었고 끊김도 없습니다. 몇 가지 작은 문제들은 있지만요.
00:08:24파일에서 디자인할 때 이 기술을 절대 사용하지 말아야 한다고 명시해야 합니다. 저희가 특히 디자인
00:08:29할 때라고 말하는 이유는 영상 후반부에서 다룰 다른 용도가 하나 더 있기 때문입니다. 그 후에는
00:08:33기본적으로 웹사이트 전체를 구축하게 됩니다. 17분 동안 작업하여 사이트 전체를
00:08:38완성한 것을 볼 수 있습니다. 사이트 구축이 완료되면 이 링크를 제공합니다. 로컬 웹사이트로
00:08:43작업해 본 적이 없다면, localhost는 링크가 여러분의 컴퓨터에서만 작동한다는 의미입니다. 다른 사람과 공유해도
00:08:48그들은 방금 만든 웹사이트를 열 수 없습니다. 하지만 걱정하지 마세요, 이 내용은 영상 후반부에서
00:08:53다루겠습니다. 사이트를 미리 보려면 Codex를 떠날 필요가 없습니다. 측면 패널을
00:08:57열면 브라우저가 있습니다. 그곳에 이 링크를 입력하면
00:09:01사이트가 생성된 것을 확인할 수 있습니다. 이것이 생성된 사이트인데, 솔직히 정말
00:09:06훌륭합니다. 애니메이션도 제대로 구현되었고 끊김도 없습니다. 몇 가지 작은 문제들은
00:09:11스톡 이미지나 지나치게 끊기는 몇몇 애니메이션처럼 나중에 수정할 단계에서 고칠 예정입니다.
00:09:17그리고 나중에 언급할 다른 문제도 하나 있습니다. 하지만 한 가지 언급하고 싶은 점은, 사이트의 목적을
00:09:21명확히 정의했기 때문에 사용자 여정을 정확하게 설정했다는 것입니다. 첫째로,
00:09:26제품 쇼케이스를 제공했습니다. 실제 제품이 있다면 여기에서 보여줄 수도 있었겠죠. 그 다음에는
00:09:31더 작은 그래픽들을 제공했는데, 이것 역시 정말 놀랍습니다. 마지막으로, 대기 명단 랜딩 페이지임을
00:09:35명확히 지정했기 때문에 사용자들이 미리 등록하도록 유도하는 CTA(행동 유도 버튼)를 생성했습니다.
00:09:41세 번째 단계는 브라우저 검증입니다. 웹사이트가 제대로 작동하더라도 시각적인
00:09:46문제는 있을 수 있습니다. 작동하는 코드가 곧 완성된 디자인이 올바르다는 것을 의미하지는 않기 때문입니다. 브라우저 검증은
00:09:51Codex에게 실제 웹사이트를 피드백으로 제공하여, 페이지가 화면에 나타난 후에만 볼 수 있는
00:09:56문제들을 포착하게 합니다. 이 기능 역시 Codex의 가장 강력한 강점 중 하나입니다. “컴퓨터 사용”이라는 용어를
00:10:01들어본 적이 없다면, 기본적으로 화면에 있는 것을 이해하고 상호작용하는 모델의 능력을 말합니다.
00:10:07GPT 모델은 컴퓨터 사용에 있어 가장 강력한 모델이기에, 저희 테스트에서 Codex의 브라우저
00:10:12검증은 다른 코딩 에이전트보다 훨씬 더 신뢰할 수 있었습니다. 저희는
00:10:17랜딩 페이지의 모든 것이 올바르게 보이는지 수동으로 검증해 달라고 요청할 필요가 없었습니다. 이는
00:10:22agents.md 파일에 이미 스스로 검증을 수행하라고 지시했기 때문입니다. 그래서
00:10:27저희에게 무언가를 하라고 요청하지 않았던 것이죠. 아래로 스크롤하면 브라우저를 여러 번
00:10:32사용하여 웹사이트를 검사하는 것을 볼 수 있습니다. 오류를 발견하지 못했기 때문에 브라우저 검증 중에는
00:10:37파일을 수정하지 않았습니다. 여기에서 몇몇 파일을 편집하긴 했지만, 신경 쓸 필요 없는
00:10:42코드 관련 변경 사항이었습니다. 브라우저 검증 중에 하는 또 다른 일은 반응형 확인입니다.
00:10:47이미 알고 계시겠지만, 반응형이란 웹사이트가 다양한
00:10:52화면 크기에 맞게 조정되는 방식을 말합니다. 예를 들어, 데스크톱에서 나타날 방식처럼 늘려보면,
00:10:57멋지게 보입니다. 그리고 모바일 기기에서처럼 좁게 만들어보면,
00:11:01Codex가 자동으로 이를 처리했다는 것을 알 수 있습니다. 보통은 모델에게 웹사이트를
00:11:06반응형으로 만들라고 지시해야 했지만, 이제는 모델이 자동으로 처리하므로 그렇게 할 필요가 없습니다.
00:11:11하지만 간단한 테스트로, 여전히 창을 드래그해서 모든 것이 반응형인지 확인하는 것이 좋습니다.
00:11:15반응형이 아닌 요소가 있다면 스크린샷을 찍어 모델에게 전달하면 됩니다. “주석 도구”라는 도구가 있지만,
00:11:20저희는 그것이 정말 조잡하고 그다지 신뢰할 수 없다는 것을 알게 되었습니다.
00:11:24특히 확대했을 때는 더 그렇습니다. 그래서 저희는 그냥 스크린샷 방식을 사용하며, 촬영 당시에는 더 나은
00:11:29옵션이라고 생각합니다. 아마 나중에는 이 기능이 개선되어 사용하기 시작할 수 있을 것입니다. 그리고 영상이 마음에 드셨다면,
00:11:34채널을 구독하고 좋아요 버튼을 눌러주세요.
00:11:38이 작은 응원은 저희에게 큰 힘이 됩니다. 네 번째 단계에서는 저희가 이전에 언급했던
00:11:43다른 문제를 해결합니다. GPT Taste 기술을 사용한 후에도 웹사이트는 여전히 GPT 모델이
00:11:49다른 디자인들에서 사용하는 종류의 색상으로 되돌아가는 경향이 있습니다. 이 기술은 모델의 일반적인 디자인
00:11:54결정 능력을 향상시키지만, 특정 브랜드만의 고유한 시각적 정체성을 부여하지는 않습니다. 그래서 모두가
00:11:59같은 기술을 사용하는 같은 모델을 쓰면 결과물이 비슷해 보일 수 있습니다. 여기서 design.md가
00:12:04필요합니다. 아직 접해보지 못하셨을 수 있는데, 구글은 AI 디자인 도구인
00:12:09Stitch를 통해 design.md 형식을 도입했습니다. design.md 파일은 기본적으로 한 브랜드의
00:12:15완전한 시각적 시스템을 포함하는 지시 파일입니다. 이 파일은 모델이 평소의 기본값에서 선택하도록 내버려 두는 대신
00:12:20따라야 할 구체적인 디자인 방향을 제시합니다. 즉, GPT Taste 기술은 Codex에게 전반적으로 더 나은 디자인
00:12:26결정을 내리는 법을 가르치고, design.md는 이 특정 웹사이트가 어떻게 보여야 하는지 알려주는 것입니다. 여기서
00:12:32저희가 직면한 문제의 예를 하나 들어보겠습니다. 디자인 기술이 이 웹사이트를 만들었다는 건 아시겠지만,
00:12:36디자인 기술 없이도 GPT 5.6은 이 정도를 달성할 수 있었습니다. 다시 말하지만 꽤 좋은 웹사이트이지만,
00:12:42그런 멋진 요소들이 없어도, 많은 요소들이 재사용된 것을 분명히 볼 수 있습니다.
00:12:46특히 색상 구성이 그렇죠. 이 녹색과 보라색은 꽤 많이 반복됩니다. 디자인
00:12:51기술은 보라색을 조금 덜 사용했지만 여전히 사용했습니다. 이것이 바로 design.md 파일이
00:12:57매우 중요한 이유입니다. 그럼 이 design.md 파일은 어디서 구할까요? 많은 리소스가
00:13:02있습니다. 그중 하나는 get design.md이며 다른 사람들이 만든 많은 디자인을 보유하고 있습니다. Claude, Cursor, Discord
00:13:08및 기타 잘 알려진 기업들의 디자인 시스템도 얻을 수 있습니다. 하지만 저희는 실제로
00:13:13웹사이트 빌더이기도 한 Aura Build의 이 design.md 컬렉션을 정말 좋아합니다. 그들은
00:13:19이 무료 design.md 라이브러리도 가지고 있습니다. 아래로 스크롤하여 인기 있는 것을 클릭하면 이런
00:13:25놀라운 디자인 시스템을 찾을 수 있습니다. 이것이 웹사이트의 레이아웃이나 스타일을 바꾸는 것은 아닙니다. 대신,
00:13:30간격, 색상 및 기타 디자인 세부 사항을 적용하여 사이트에 완전히
00:13:36다른 모습을 부여합니다. 그래서 저희가 이 design.md 파일을 다운로드한 것입니다. 이 버튼을 클릭하면
00:13:41다운로드 폴더로 저장됩니다. 그 후 Codex로 가서 이 버튼을 클릭하고 원하는 파일이나
00:13:46폴더를 첨부하세요. 이것이 방금 다운로드한 파일입니다. 파일을 첨부한 후,
00:13:51Codex에게 프로젝트 내에 design.md 파일을 생성하고, 이 파일의 내용을
00:13:57복사하여 붙여넣은 뒤, 그 design.md에 따라 사이트를 개선하라고 지시했습니다. 구조, 레이아웃 및
00:14:03애니메이션은 변경되지 않아야 한다고 구체적으로 말했습니다. 왜냐하면 중요한 점 중 하나는 우리가 설치한
00:14:09GPT Taste 기술이 애니메이션 구현에 매우 뛰어나기 때문입니다. 전체적인 페이지 애니메이션과 관련해서는
00:14:13다른 작업이 필요 없습니다. 대부분을 스스로 처리하며, 보시다시피
00:14:18정말 훌륭해 보입니다. 작업이 완료된 후, design.md 파일을 생성했고
00:14:24비콘 플랫폼에 시각적 시스템을 적용했다고 알려주는 것을 볼 수 있습니다. 이제 레이아웃과 구조는
00:14:29여전히 그대로인 것을 볼 수 있습니다. 그런 것들은 바꾸지 않았지만, 색상 구성은 완전히
00:14:34바뀌어서 사이트가 완전히 다르게 보입니다. 원래의 녹색빛 디자인과 비교하면
00:14:38GPT 모델이 생성한 것처럼 보이지 않습니다. 이것이 design.md 파일이 정말 중요한 이유입니다.
00:14:44다음 단계로 넘어가기 전에 한 가지 더 말씀드릴 것이 있습니다. 랜딩 페이지나 완전한 앱을
00:14:49만들 때마다 항상 Phosphor 아이콘을 사용하고, Codex가 새로운 것을 만들 때마다 해당 아이콘을 사용할 수 있도록
00:14:56항상 agents.md 파일에 추가합니다. 이 아이콘 세트는 매우 미니멀하고 훌륭해 보여서 저희가 가장 좋아합니다.
00:15:02화살표와 같은 작은 곳에서 주로 사용되긴 하지만, 여전히 저희 생각에는
00:15:07최고의 아이콘 세트입니다. 하지만 다섯 번째 단계로 넘어가기 전에, 스폰서의 말씀을 잠시 들어보겠습니다.
00:15:12설정에 몇 주를 소비하지 않고도 단 몇 분 만에 실제 주문을 받을 준비가 된 이커머스 스토어를 어떻게 시작했는지 말씀드리겠습니다.
00:15:18링크 하나를 Copify에 붙여넣었더니 몇 분 만에 완벽하게 작동하는 Shopify 스토어, 제품 설명,
00:15:25카피, 디자인 등 모든 것이 AI로 생성되어 방문자를 구매자로 전환할 준비가 되었습니다. 실제 매장이,
00:15:31완전히 재고를 갖추고 전문적으로 디자인되었습니다. 이게 진짜 성공이죠. 그냥 가게가 있는 게 아니라,
00:15:36첫 판매 전부터 돈을 벌어다 주는 준비된 비즈니스 매장을 갖는 것 말입니다. 정확히 어떻게
00:15:40일어난 일인지 알려드리죠. Store AI에서 바로 Shopify 연결을 클릭했더니 즉시 모든 것이 라이브로 적용되었습니다.
00:15:46그런 다음 같은 스토어에 더 많은 제품을 추가했고, 완전히 다른 링크로부터 단 몇 분 만에 두 번째 완전한 스토어를 구축했습니다.
00:15:51수동 설정이나 디자인 작업은 필요 없습니다. 하지만 무엇이 이것을
00:15:56진정으로 강력하게 만드는지 아십니까? AI 채팅은 모든 단일 제품에 대해 입증된 마케팅 각도를 제시하고, 창의적인 AI는
00:16:02그것을 판매할 실제 광고 크리에이티브를 생성합니다. 수익성 있는 전환형 스토어를 운영하는 데 필요한 모든 것이
00:16:07이미 내장되어 준비되어 있습니다. 고정 댓글의 링크로 가서 지금 바로 스토어를 시작하세요.
00:16:12다섯 번째 단계에서는 저희가 앞에서 지적했던 또 다른 문제, 즉 스톡 이미지를 해결합니다. design.md
00:16:18파일이 웹사이트에 고유한 시각적 시스템을 부여했지만, 스톡 이미지는 여전히 그 시스템에
00:16:23속하지 않습니다. 빈 공간을 채울 수는 있지만, 정확한 브랜드와 어울리는 경우는 거의 없습니다. 이것이 AI
00:16:28생성 웹사이트가 디자인된 것이 아니라 조립된 것처럼 느껴질 수 있는 또 다른 이유입니다. 여기서 원본 GPT 이미지가
00:16:34필요합니다. Codex는 이미 agents.md 파일을 통해 제품을 이해하고 있고, 시각적인
00:16:39방향은 design.md를 통해 이해하고 있습니다. 그래서 그 맥락을 활용하여 GPT 이미지 모델로
00:16:45고유한 브랜드 이미지를 생성하고 해당 파일들을 웹사이트에 직접 추가할 수 있습니다. 해야 할 일은
00:16:50에셋 폴더를 만들고 agents.md 파일에도 연결하라는 프롬프트를 주는 것입니다. 이 폴더에는
00:16:56GPT 모델이 생성하는 모든 에셋이나 랜딩 페이지에 직접 추가하고 싶은 것들이 담기게 됩니다.
00:17:01직접 해보는 것이죠. 예를 들어, 우리가 만든 커스텀 이미지를 사용하고 싶다면 말입니다. 그 후, 랜딩 페이지의
00:17:06모든 스톡 이미지를 교체해야 한다고 지시했습니다. 여기서 여러분이 언급해야 할 중요한 점들이 있습니다.
00:17:11이미지가 디자인 및 표현하려는 콘텐츠와 일치해야 한다는 점을 분명히 해야 합니다.
00:17:15그래야 무작위 비주얼을 생성하는 대신, 실제로 적절한 비주얼을 생성할 수 있습니다.
00:17:21여기서는 이 작업에서 오류가 발생할 가능성이 더 높았기에 삽화를 생성하도록 요청했습니다.
00:17:26특히 이미지 생성 기능이 제한적일 수 있는 20달러 요금제를 사용 중이라면,
00:17:32먼저 플랜 모드를 켜는 것을 강력히 권장합니다. 플랜 모드를 사용해 본 적이 없다면, 코덱스가 프로젝트를 변경하기 전에
00:17:37무엇을 해야 할지 먼저 파악할 수 있게 해 줍니다. 프롬프트 내에서 이를 따로 언급할 필요는 없습니다.
00:17:42그냥 이 버튼을 클릭하세요. 그러면 코덱스는 코드를 건드리거나 웹사이트를 변경하지 않습니다.
00:17:47대신 먼저 계획을 수립한 뒤 이미지를 생성합니다. 우리는 계획을 검토하고,
00:17:52모두 좋아 보인다고 답한 뒤 구현을 요청했습니다. 그 후 이미지가 생성되었는데,
00:17:57웹사이트 디자인과 아주 잘 어울리는 것을 볼 수 있습니다. 왜 일부 이미지가
00:18:01이전과 다른지 궁금하시다면, 이미지가 어디에 배치되었는지 확인해 보시면 알게 될 것입니다.
00:18:06또한 agents.md 파일에 이미지 파일 배치 위치에 대한 지침도 추가되었습니다.
00:18:11앱 폴더 내의 public 폴더를 보면 assets 폴더를 찾을 수 있습니다.
00:18:16이미지를 추가해야 할 때마다 그냥 그곳에 넣고 코덱스에게 무엇을 할지 지시하면
00:18:20사이트에 추가해 줍니다. 최종 결과물은 이렇습니다. 삽화들이 정말 멋져 보이지 않나요?
00:18:25웹사이트 디자인과 어울릴 뿐만 아니라, 카드 아래에 작성된 설명과도 완벽하게 조화를 이룹니다.
00:18:29이것이 바로 커스텀 모델을 사용하여 이미지를 생성하는 장점입니다.
00:18:35그 외에도 이 애니메이션 섹션에 이미지를 배치한 것도 확인할 수 있습니다.
00:18:40마지막 세 이미지가 왜 다른지 궁금하시다면, 추천사를 위한 아바타를 생성했기 때문입니다.
00:18:45솔직히 정말 훌륭해 보입니다. 6단계는 비주얼 영감을 통해 레이아웃을 개선하는 것입니다.
00:18:51이 시점에서 웹사이트는 고유한 디자인 시스템과 원본 이미지를 갖췄지만, 코덱스는
00:18:56이미 알고 있는 레이아웃 패턴을 사용하여 모든 요소의 위치를 결정했습니다. 따라서 색상과 이미지는
00:19:02독창적으로 느껴질 수 있지만, 구조는 여전히 일반적인 AI 생성 랜딩 페이지처럼 느껴집니다.
00:19:07이는 사람들이 가장 먼저 보는 히어로 섹션에서 가장 두드러집니다. 레이아웃은 텍스트만으로
00:19:13설명하기 어렵습니다. 그래서 코덱스에게 시각적 참고 자료를 제공하면 우리가 원하는
00:19:18구성 유형을 보여줄 수 있습니다. 목표는 다른 웹사이트를 복제하는 것이 아니라,
00:19:23우리의 브랜드와 콘텐츠를 유지하면서 레이아웃을 영감으로 사용하는 것입니다. 영감은 어디서 얻을까요?
00:19:29가장 흔한 곳 중 하나는 핀터레스트입니다. 무엇을 만들든 영감을 얻기에 아주 좋은 곳이죠.
00:19:34예를 들어, 우리가 구축 중인 SaaS 앱을 위한 히어로 섹션을 검색해 보았고,
00:19:38다양한 디자인을 찾을 수 있었습니다. 이건 정말 흥미롭고 우리 레이아웃과도 비슷합니다.
00:19:42이곳은 영감을 얻기에 정말 좋은 장소입니다. 그 외에도 놀라운 웹사이트를 선보이는 어워즈(Awwwards)가 있죠.
00:19:48디렉토리에 들어가면 정말 멋진 디자인을 찾을 수 있습니다. 모델이 생성한
00:19:53레이아웃이 만족스럽지 않다면 영감을 얻기 좋은 최고의 장소들입니다. 우리의 경우,
00:19:58이미 보셨다시피 핀터레스트에서 찾은 대부분의 SaaS 앱 히어로 섹션은 매우 비슷했습니다.
00:20:03우리는 이 디자인에 만족하므로 변경하지 않을 것입니다. 특히 이 섹션은요.
00:20:08앱의 모든 기능을 명확하게 보여주고 있어 정말 훌륭합니다. 하지만 만족스럽지 않다면,
00:20:13언제든 다른 디자인의 스크린샷을 모델에게 제공하고 재현해 달라고 요청할 수 있습니다.
00:20:187단계이자 마지막 단계는 웹사이트의 개별 부분을 개선하는 것입니다. 컴포넌트를
00:20:23사용해 본 적이 없다면, 컴포넌트는 기본적으로 버튼과 같이 페이지의 재사용 가능한 한 부분을 말합니다.
00:20:28전체적인 디자인은 잡혔지만, 이러한 작은 부분들은 여전히 평범하게 느껴질 수 있습니다.
00:20:33코덱스에게 웹사이트 전체를 재설계해 달라고 요청하는 대신, 다른 디자이너가 만든 컴포넌트로
00:20:39그 부분들만 교체할 수 있습니다. 이렇게 하면 우리가 이미 구축한 디자인 방향을 유지하면서
00:20:44작은 세부 사항까지 더 세밀하게 제어할 수 있습니다. 개별 컴포넌트를 얻기 위해
00:20:48많은 사이트가 있습니다. 그중 하나가 21.dev인데, 무료 및 유료 컴포넌트를 모두 제공합니다.
00:20:54그 외에도 Godly나 Fancy 컴포넌트 사이트가 있죠. 모두 앱의 특정 부분을 위한 컴포넌트를
00:20:59제공합니다. 예를 들어, 리퀴드 글라스가 적용된 이 내비게이션 스위처, 히어로 섹션을 위한
00:21:03배경, 그리고 유동적인 애니메이션이 있는 내비게이션 익스팬더가 있습니다. 정말 많은 것이 있고,
00:21:08애플리케이션을 개선할 수 있다고 생각되는 것은 무엇이든 그냥 추가하면 됩니다. 예를 들어,
00:21:12랜딩 페이지를 한 가지 방식으로만 개선할 수 있다고 생각했는데, 바로 히어로 섹션의
00:21:17배경을 개선하는 것이었습니다. 그래서 21.dev에서 셰이더(Shader)라고 불리는 배경을 찾았고,
00:21:22이게 정말 마음에 들었습니다. 아주 좋아 보였거든요. 그냥 프롬프트를 복사하기만 하면 됩니다.
00:21:27적용에 필요한 모든 정보가 포함되어 있으니 코덱스에게 프롬프트를 주고 히어로 섹션에
00:21:32적용하라고 지시하세요. 나중에 다룰 최적화 스킬을 사용할 수 있으므로, 해당 스킬은 사용하지
00:21:37말라고 특별히 요청했습니다. 그 후 적용이 되었고, 색상을 조금 조정해 달라고 요청했습니다.
00:21:41최종 결과물인데, 솔직히 정말 놀랍습니다. 이전보다 엄청나게 개선되었습니다.
00:21:46자, 한 가지 보실 점이 있습니다. 앱을 탐색할 때 정말 느리게 느껴지죠?
00:21:50무거운 애니메이션이 너무 많기 때문입니다. 이 애니메이션들을 모두 제거해야 한다는 것은
00:21:55아닙니다. 사이트가 빠르게 로드되도록 최적화하기만 하면 됩니다. 그렇게 하려면,
00:22:01모델에게 사이트 최적화를 요청하면 되며, 그것만으로도 대부분의 문제가 해결될 수 있습니다.
00:22:06우리는 애니메이션이 많은 랜딩 페이지를 최적화하기 위한 커스텀 스킬을 만들었습니다. 스킬이므로,
00:22:12/명령어를 사용하여 활성화할 수 있습니다. 시간이 꽤 걸렸는데, 지표를 보면
00:22:17웹사이트의 대기 시간이 크게 줄어들고 훨씬 빨라진 것을 확인할 수 있습니다.
00:22:22이는 우리가 자체 제품을 만들고 고객 프로젝트를 수행할 때 사용하는 AI Labs 디자인 시스템의 일부입니다.
00:22:27최적화 스킬이 여기 있고, 디자인 과정 전반에 걸쳐 사용하는 다른 많은 스킬들이 있습니다.
00:22:32이 커스텀 스킬과 다른 리소스들은 우리의 커뮤니티인 AI Labs Pro에서 찾을 수 있습니다.
00:22:37그곳에서 리소스, 스타터 팩 등을 얻을 수 있으며, 우리 팀을 포함한 많은 같은 관심사를 가진 사람들과
00:22:42교류할 수 있습니다. 그러니 우리가 하는 일에 가치를 느끼고 채널을 지원하고 싶다면,
00:22:47이것이 가장 좋은 방법입니다. 링크는 설명란에 있습니다.
00:22:52자, 이제 인터넷에 배포하여 누구나 볼 수 있게 하기 전에,
00:22:56작은 팁을 하나 드리겠습니다. Git을 사용해 본 적이 없다면, 프로젝트의 체크포인트인
00:23:01로컬 커밋을 생성할 수 있습니다. 이를 사용하기 위해 어디에 가입할 필요는 없습니다.
00:23:06예를 들어, 여기 코덱스에게 로컬 커밋을 만들라고 요청하는 것을 볼 수 있습니다.
00:23:11커밋을 생성하고 이름을 붙여주죠. 이것은 문제가 발생했을 때 되돌릴 수 있는 체크포인트를 만듭니다.
00:23:16이 웹사이트 전체를 구축하면서, 프로젝트의 다양한 단계를 보여드리기 위해 이러한 체크포인트를
00:23:20사용해 왔습니다. 지금은 최종 커밋 단계에 와 있습니다.
00:23:26코덱스에게 로컬 커밋을 하라고 요청하면 정확히 무엇을 해야 할지 압니다.
00:23:32또한 각 커밋의 이름도 알려줍니다. 이름을 잊어버렸다면 모든 커밋 목록을 나열하도록
00:23:36요청할 수도 있고, 코덱스가 뭔가를 잘못했을 경우 쉽게 되돌릴 수도 있습니다.
00:23:42웹사이트는 완성되었지만, 현재는 localhost에서만 작동합니다. 즉, 내 컴퓨터에서만
00:23:47열 수 있다는 뜻입니다. 웹사이트 배포를 해본 적이 없다면, 배포란 기본적으로
00:23:52누구나 정상적인 링크를 통해 접속할 수 있도록 온라인에 올리는 과정입니다. 이전에는
00:23:57Vercel 계정을 만들고 GitHub를 통해 프로젝트를 연결해야 했습니다. 과정은 잘 작동했지만,
00:24:02여러 단계를 거쳐야 했죠. 이제 코덱스는 우리가 앞서 언급한 사이트 스킬을 통해 훨씬 더 쉽게 만듭니다.
00:24:07웹사이트 디자인에는 사용하지 않았지만, 완성된 프로젝트를 코덱스에서
00:24:12직접 게시하는 데 사용할 수 있습니다. 그러니 더하기 버튼을 클릭하여 사이트 스킬을 추가하고
00:24:17사이트를 배포해 달라고 요청하기만 하면 됩니다. 시간이 조금 걸리지만 금방 배포될 것입니다.
00:24:22실제로 사이트를 방문하기 전에 사이드바에 별도의 사이트 섹션이 있는 것을 볼 수 있습니다. 열어보면,
00:24:27ChatGPT를 통해 게시한 모든 사이트를 찾을 수 있습니다. 예를 들어, 이건 사이트 스킬을 사용하여
00:24:32디자인한 이전 사이트입니다. 디자인이 너무 기본적이라 만족하지 못했기 때문에 사용하지 말라고 했던 것입니다.
00:24:37이게 우리의 두 번째 사이트입니다. 공유 버튼을 클릭하면 기본적으로 '나만 보기'로 되어 있을 텐데,
00:24:42'인터넷의 누구나'로 변경한 뒤 게시하세요.
00:24:48그 후 링크를 복사해서 아무에게나 보내면 사이트를 열어 방문할 수 있습니다.
00:24:52배포되었으니 여러분도 직접 방문할 수 있습니다. 커스텀 도메인을 사용하고 싶다면,
00:24:57설정으로 이동하여 추가하면 됩니다. 전체 과정을 안내해 줄 것이며,
00:25:01본인이나 고객을 위한 랜딩 페이지를 코덱스 앱에서 몇 가지 간단한 단계로 배포할 수 있습니다.
00:25:07이 영상이 끝났습니다. 채널을 지원하고 이런 영상을 계속 만드는 데 도움을 주고 싶다면,
00:25:12아래의 슈퍼 땡스 버튼을 통해 하실 수 있습니다. 언제나처럼, 시청해 주셔서 감사드리며
00:25:17다음 영상에서 뵙겠습니다.