스크립트
00:00:00GPT-6 Astra를 이용하면 AI 찌꺼기 결과물들을 처내고 실제로 작동하는 프론트엔드 디자인을
00:00:05그 어느 때보다 쉽게 만들 수 있습니다. 게다가 어제 GPT Images 2.5가 추가되면서
00:00:11기능이 더욱 좋아졌죠. 이제 웹사이트 제작 분야에서 세계 최고 수준인 AI 모델을 사용할 수 있을 뿐만 아니라
00:00:18거기에 최고의 이미지 생성 툴까지 무료로 함께 이용할 수 있게 되었습니다. 다른 걸 따로 추가할
00:00:24필요가 없기 때문에, 일부 대체 모델을 사용할 때에 비해 디자인 과정이 훨씬 빠르고 비용도 적게 듭니다.
00:00:30그래서 오늘은 Astra로 수준 높은 프론트엔드 디자인을 만들어 AI 찌꺼기 결과물에
00:00:34발목 잡히지 않도록 하는 정확한 프로세스를 알려드리겠습니다. 자, Astra와 이러한 GPT 모델들의
00:00:40정말 멋진 점 중 하나는 바로 내장된 이미지 생성 툴인데, 이는 앤트로픽 경쟁작에 비해
00:00:45엄청난 장점입니다. 왜냐하면 프론트엔드 디자인은 극도로 반복적인 작업이기 때문입니다.
00:00:49제가 마음에 드는 결과물이 나올 때까지 만들고자 하는 대상의 다양한 버전을 거치고 싶거든요.
00:00:54그리고 대개 우리는 우리만의 에셋과 그래픽을 직접 만드는데, 내장된 이미지 생성 툴이 있다면
00:00:59그 과정을 빠르고 저렴하게 만들어 줍니다.
00:01:04특히 Fable 모델 같은 경우에 해야 하는 일을 생각하면 더욱 그렇습니다.
00:01:08Fowl이나 Higgsfield 같은 외부 툴을 연동해야 하고 생성할 때마다 비용을 지불해야 하죠.
00:01:12하지만 여기서는 그럴 필요가 없습니다. 덕분에 이런 결과물에 도달할 수 있으며,
00:01:17잠시 후 0단계부터 어떻게 여기까지 올 수 있는지 보여드리겠습니다. 아주 다양한 디자인 계열에 걸쳐
00:01:21웹사이트의 수많은 다른 버전들을 아주 쉽게 가질 수 있습니다. 적어도 저의 경우는 그렇습니다.
00:01:27마음에 쏙 들고 확정을 짓기 전에 잠재적인 웹사이트의 다양한 버전을 직접 눈으로 봐야 하거든요.
00:01:31버전 1, 버전 2, 버전 3, 버전 4를 거쳐야 하죠.
00:01:35실제로 시각적으로 확인해야 비로소 만족할 수 있습니다. 다시 말씀드리지만 내장된 디자인 툴이 있으면
00:01:39그 과정을 엄청나게 단축할 수 있습니다. 자, 그 프로세스가 정확히 무엇일까요? 다행히도
00:01:44몇 가지 단계에 불과합니다. 여러분이 만드는 그 어떤 프론트엔드 디자인에도 이를 적용할 수 있습니다.
00:01:48그리고 0단계는 꽤 간단합니다. 바로 백지 상태에서 시작하지 않도록 영감을 찾는 것입니다.
00:01:54영감을 찾는다는 건 웹상으로 나가서 마음에 드는 웹페이지와 프론트엔드 디자인 미학의
00:01:58사례들을 찾아야 한다는 뜻입니다. 이런 것들은 사방에서 찾을 수 있습니다.
00:02:03대표적인 예로 핀터레스트, 트위터, 랜드북이 있죠. Dribbble 같은 웹사이트에 접속할 수도 있는데,
00:02:08여기서 Dribbble은 b가 세 개입니다. SaaS용 프론트엔드 디자인이나 여러분의 제품에 맞는
00:02:13랜딩 페이지 같은 것을 검색해 보면 거기서 사례들을 확인할 수 있습니다. 자, 이를 지속 가능하게 만들기 위해
00:02:18정말 하고 싶은 일은 결국 여러분이 마음에 들어 하는 모든 디자인들의 라이브러리, 일종의 보관소를 만드는 것입니다.
00:02:24바로 여기가 제 보관소입니다. 저는 이걸 원래 Fable 내부에 만들었다가
00:02:29지금은 Astra 안으로 옮겼습니다. 기본적으로 제가 좋아하는 것들의 스크린샷을 제공하면
00:02:34이것들을 한곳에 모아 디자인 계열별로 분류해 줍니다. 그래서 왼쪽에 보시면 아시겠지만
00:02:40기념비적 에디토리얼, 제품 중심 미니멀리즘, 기술 시스템, 퓨처리즘, 인쇄 기술 종이 등의 예시가 있습니다.
00:02:49핵심은 이제 제가 좋아하는 다양한 디자인들을 한눈에 볼 수 있는 원스톱 상점을 갖추게 되었다는 점입니다.
00:02:54이것이 우리에게 가져다주는 진정한 이점은 Astra에게 “웹사이트를 만들고 싶어”라고 말할 때가 되었을 때 발휘됩니다.
00:03:01“기술 시스템을 구현한다면 이 웹사이트가 어떤 모습일지 예시를 몇 개 보여줄래?”라고 요청할 수 있죠.
00:03:05섹션 전체를 제공하면서 다섯 가지를 모두 살펴보고 디자인 패턴 같은 요소들을
00:03:10일부 가져오라고 할 수 있습니다. 혹은 “이게 정말 마음에 들어. 이걸 똑같이 재현해 보려고 노력한 다음
00:03:15결과적으로 우리 입맛에 맞게 수정해 보자”라고 말할 수도 있죠.
00:03:20게다가 옵션 중 하나만 주는 것에 그치지 않고, 인쇄 기술 종이나 디더 모노, 거대하고 차분한 시네마틱 등
00:03:25다양한 변형 버전을 달라고 요청할 수 있습니다. 요점은 프론트엔드 디자인을 할 때 백지 상태에서
00:03:31시작하는 것이 아니라는 점입니다. 대충 “눈에 띄게 만들어줘, 깔끔하게 만들어줘, 미니멀하게 만들어줘”라고
00:03:36말하는 게 아니라, 자체 작업에 끌어다 쓸 수 있는 실제 사례들을 제공하는 것입니다.
00:03:42자, 제 취향 보관소의 복사본과 이 영상에서 사용하는 모든 프롬프트를 고정 댓글에 공유해 드리겠습니다.
00:03:48이 모든 걸 얻고 싶으시거나 실제로 따라 해볼 수 있도록 복사해서 붙여넣을 수 있는 걸 원하신다면 거기를 확인해 주세요.
00:03:53이것이 1단계입니다. 0단계는 어떤 종류의 웹사이트를 만들고 싶은지 파악하는 것입니다.
00:03:57즉, 당신의 제품은 무엇인가요? 무엇을 하고 있나요?
00:04:001단계는 바로 “좋아, 영감이야. 어떤 분위기로 가야 할까?”가 되는 것입니다.
00:04:04이것은 지속적인 과정이어야 합니다. 마음에 드는 멋진 웹사이트를 볼 때마다 스크린샷을 찍고
00:04:09Astro에 넣은 다음 “내 취향 보관소에 추가해줘”라고 말하면 됩니다.
00:04:12자, 워크플로에 추가해야 할 스킬들을 다루는 2단계로 넘어가기 전에,
00:04:15오늘의 스폰서인 저에 대한 짧은 안내 말씀이 있겠습니다. Chase AI Plus 내부에서
00:04:19Cloud Code 마스터클래스의 업데이트 버전을 방금 출시했으며 Codex 마스터클래스도 준비되어 있습니다.
00:04:24따라서 이 두 가지 툴을 최대한 활용하는 방법을 알아내고자 하는 분이라면 여기가 바로 여러분을 위한 곳입니다.
00:04:29또한 저는 여러분이 기술적 지식이 전혀 없는 상태로 여기에 온다고 가정합니다.
00:04:33그러니 여러분의 배경은 중요하지 않습니다. AI 마스터하는 법을 배우고 싶다면
00:04:39여기가 바로 여러분을 위한 곳입니다. 고정 댓글에서 관련 링크를 찾으실 수 있습니다.
00:04:43자, 레퍼런스를 확보하셨나요? 이제 무엇을 해야 할까요? 이제 Astro에게
00:04:47이러한 스타일과 스크린샷 중 일부를 레퍼런스로 활용하여 랜딩 페이지 구축을 시작하라고 지시해야 합니다.
00:04:51물론 어떤 디자인 스타일을 추구하는지 이미 정확히 알고 계신 분들도 있을 겁니다.
00:04:56“이런 제품 미니멀리즘 같은 걸 원해. 대시보드를 만들고 있다는 걸 알지.
00:04:59이런 식으로 보였으면 좋겠어. 특정 표준 SaaS 형태였으면 해.
00:05:03세부적인 부분은 좀 바꾸겠지만, 미학적으로 나아갈 방향은 알고 있어” 하시는 분들 말입니다.
00:05:06하지만 우리 중 많은 이들에게는 그렇지 않은 경우가 많습니다. 그래서 Astro에 프롬프트를 입력할 때
00:05:12“이 스타일에 맞춰 랜딩 페이지를 만들어줘”라고 하지 않고, “여러 개의 랜딩 페이지를 만들어줘”라고 말할 것입니다.
00:05:17그리고 각 랜딩 페이지가 특정 미학과 연관되기를 바랍니다.
00:05:22다시 말해 하나는 기술 시스템, 하나는 제품 중심 미니멀리즘이 되는 식이죠.
00:05:26어쩌면 하나는 소위 말하는 '거대하고 차분한 시네마틱' 같은 것일 수도 있습니다.
00:05:30결국 그 길 중 하나를 선택하게 되겠지만, 먼저 눈으로 확인해야 하므로 여러 버전을 원합니다.
00:05:35그 외에도 두 번째로 생각해야 할 점은 Astra가 어떤 스킬을 발휘하게 할 것인가입니다.
00:05:39이러한 디자인을 만들 때 Astra가 어떤 스킬을 사용하길 바라시나요? 몇 가지 선택지가 있습니다.
00:05:44가장 인기 있고 제가 누차 이야기했던 것은 바로 impeccable입니다.
00:05:49이것은 프론트엔드 디자인 스킬로, 별이 66,000개 정도 달렸습니다.
00:05:53전환율 같은 지표는 4.3 정도죠. 핵심은 AI 찌꺼기를 없애는 것입니다.
00:05:57또 다른 인기 있는 스킬은 약 86,000개의 별을 받은 taste 스킬입니다.
00:06:02그리고 세 번째로, 앤트로픽의 프론트엔드 디자인 스킬 같은 것을 활용하여 Astra에 가져올 수도 있습니다.
00:06:07중요한 건 여러분이 직접 실험해보고 어떤 게 마음에 드는지 감을 잡아야 한다는 점입니다.
00:06:15오늘 예시에서는 이 모든 걸 다 사용해 보았습니다. 게다가 스킬을 전혀 사용하지 않고
00:06:20기본 상태의 Astra로만 만든 것도 있죠. 어떤 모습일지 비교해 보고 싶었거든요.
00:06:26그래서 여기서 보시는 게 바로 그것입니다. 참고로 우리가 만드는 웹사이트는
00:06:29Vantage라는 제품을 위한 것입니다. 개인 투자자들을 위한 금융 시장 AI 분석 툴 같은 것입니다.
00:06:35“이런 주식을 사고팔아야 합니다” 같은 정보를 주는 식이죠. 완전히 지어낸 것입니다.
00:06:39하지만 제가 지시한 것은 이 웹사이트의 버전이 하나가 아니라 두 개였으면 한다는 점이었습니다.
00:06:44실제로는 5개의 서로 다른 디자인 계열에 걸쳐 5가지 버전을 원했습니다.
00:06:48이해하기 쉽도록 카메라를 잠시 끄겠습니다.
00:06:51루미너스 퓨처리즘, 인쇄 기술 종이, 차분한 시네마틱, 기술 시스템, 제품 미니멀리즘을 원했습니다.
00:06:54다시 말씀드리지만, 이 모든 미적 디자인 계열들은 보관소의 레퍼런스들과 연결되어 있습니다.
00:07:00게다가 각 계열마다 네 가지 변형을 만들라고 지시했습니다. 그래서 총 20개가 되는 것입니다.
00:07:05스킬이 없는 버전이 있습니다. 자, 이것은 말 그대로 순수한 원본 Astra입니다.
00:07:10그 다음에는 앤트로픽의 프론트엔드 디자인 스킬을 적용한 버전이 있습니다. 관련 정보가 반영되었죠.
00:07:17그런 다음 impeccable을 사용하게 했고, 마지막으로 taste 스킬을 사용하게 했습니다.
00:07:22예를 들어 기술 시스템을 살펴보면 페이지 전체를 확인할 수 있습니다.
00:07:25오른쪽 위를 클릭하면 앤트로픽의 프론트엔드 디자인 스킬이 적용된 모습을 볼 수 있습니다.
00:07:30impeccable이 적용된 모습도 볼 수 있죠. 맞습니다. 그리고 taste 스킬이 적용된 모습도 볼 수 있습니다.
00:07:35이 모든 과정은 Codex 데스크톱 앱 내에서 이루어지며, 이 모든 것을 시각적으로 확인하는 데 꽤 훌륭한 역할을 합니다.
00:07:42다시 한번 미학적 스타일 사이를 오갈 수도 있고, 코딩된 결과를 비교해 볼 수도 있습니다.
00:07:48다시 위쪽을 클릭해서 전체 20개 미리보기로 돌아갈 수도 있죠.
00:07:53이러한 스킬들 간의 차이점을 여러분께 보여드리기 위해 이렇게 작업해 보았습니다.
00:07:56요즘 외부 GitHub 저장소의 프론트엔드 디자인 스킬 중 지나치게 처방전스럽지 않으면서
00:08:03가장 대표적인 것들은 단연 impeccable과 taste 스킬입니다.
00:08:14“와, 여기 엄청난 프론트엔드 디자인 스킬이 있어요” 하는 식의 스킬들이 많이 존재합니다.
00:08:17하지만 까보면 스크롤 애니메이션 같은 기능 하나가 전부인 경우가 많죠.
00:08:19대부분의 사람들에게는 현실적으로 별 도움이 되지 않습니다.
00:08:22대다수가 원하는 것은 아주 높은 수준에서 프론트엔드 디자인을 개선해 주면서도 매번 똑같은 디자인을 내놓지 않는 스킬입니다.
00:08:29제가 짚고 넘어가고 싶은 점은 impeccable이나 taste 스킬을 썼을 때 더 멋져 보이는 결과물이 있을 수 있다는 것입니다.
00:08:39하지만 일반적으로 기본 Astra 자체로도 정말 탄탄한 결과물을 뽑아냅니다.
00:08:44예를 들어 기술 시스템의 경우, 이것은 그냥 기본 Astra로만 만든 것입니다.
00:08:48제 보기에는 꽤 괜찮아 보이지 않나요?
00:08:52물론 impeccable을 쓰면 여기에 큰 사진이 들어가는 등 약간의 차이는 존재합니다.
00:08:57세부적인 부분에서 소소한 변화가 있는 거죠.
00:08:59하지만 그렇다고 해서 “impeccable을 쓰니 엄청나고,
00:09:03스킬을 전혀 안 쓰면 AI 찌꺼기처럼 보인다”고 말할 정도는 아닙니다.
00:09:06전혀 그렇지 않습니다.
00:09:08솔직히 이 모델들이 기본 수준에서 얼마나 좋아지고 있는지에 대한 더 큰 논의로 이어진다고 생각합니다.
00:09:14그리고 요즘에는 실제로 작동하게 만드는 데 점점 더 적은 기반 구조가 필요할 겁니다.
00:09:19하지만 그건 다음에 이야기하고요.
00:09:21요점은 이 단계에서 우리가 무엇을 하고 있느냐 하는 것입니다.
00:09:23우리는 이미 레퍼런스를 확보했습니다.
00:09:25이제 일종의 반복 과정에 들어왔고 어떤 종류의 스킬을 원하는지 결정하고 있습니다.
00:09:29그리고 스택에 스킬을 전혀 추가하지 않은 사람이라면, 솔직히 아스트라는 꽤 훌륭합니다.
00:09:36아스트라는 꽤 좋습니다.
00:09:37그리고 아까 이미지 생성 기능이 내장되어 있다는 것에 대해 이야기했죠.
00:09:40예를 들어 이 이미지는 아스트라가 만든 것입니다.
00:09:44제가 어디에 연결한 것도 아니고요.
00:09:46이 이미지는 아스트라가 만들었습니다.
00:09:48그냥 저절로 만들어진 거죠.
00:09:49저는 그 레퍼런스 외에는 이렇다 할 디자인 지침을 주지도 않았습니다.
00:09:54아스트라가 혼자서 이런 생각을 한 겁니다.
00:09:56구름이나 천문대 같은 걸로 뭔가 해야겠다고요. 왜냐하면 무언가를 이해하고 저 멀리 있는 것을 보려고 하니까요.
00:10:01그래서 디자인도 전달하려는 이야기와 관련성 있게 만들었습니다.
00:10:07자, 이 단계에서 우리는 무엇을 했을까요?
00:10:11이제 여러 디자인 패밀리에 걸쳐 다양한 버전들을 가지게 되었습니다.
00:10:16이제 여러분이 해야 할 일은 디자인 패밀리 하나를 고르는 것입니다.
00:10:19저 같은 경우는 이 중에서 테크니컬 시스템즈가 마음에 듭니다.
00:10:23멋져 보이네요.
00:10:24좀 눈에 띄는 것 같습니다.
00:10:26그리고 여기서 보셨듯이, 스킬이 전혀 없는 기본 상태부터 테이스트 같은 스킬까지 적용한 것 중 어느 하나가 유독 튀어난다고는 생각하지 않습니다.
00:10:35솔직히 다들 멋져 보입니다.
00:10:38어떤 것을 선택하든 그럴 만한 이유가 있다고 봅니다.
00:10:41결국 개인의 취향 차이일 뿐이죠.
00:10:44제가 가장 마음에 드는 건 솔직히 테크니컬 시스템즈의 기본 버전입니다.
00:10:52맨 왼쪽에 있는 게 꽤 멋져 보이네요.
00:10:55디자인 패밀리를 골랐으니 이제 제가 할 일은 이 디자인의 다양한 변형을 살펴보는 것입니다.
00:11:02멋져 보이니까요.
00:11:03여기에 반해버렸을지도 모르죠.
00:11:05하지만 이제 추가 작업을 통해 이렇게 말할 겁니다. 좋아요, 아스트라. 당신에게는 테크니컬 시스템즈라는 이 디자인 패밀리가 있죠.
00:11:12이걸 스킬 없이 사용하고 싶어요.
00:11:14이제 이것의 다른 버전들을 만들어 주세요.
00:11:16마음에 드는 걸 최종 결정하고 미세 조정을 시작하기 전에, 이것의 서로 다른 세 가지 버전을 보여주세요.
00:11:22이런 식으로 사이클이 돌아가는 것입니다.
00:11:25디자인 미학 같은 아주 높은 수준에서 다양한 변형을 찾는 것이죠.
00:11:30이제 그 디자인 미학의 다른 버전들을 살펴보겠습니다.
00:11:32하나를 골라서 미세 수정과 조정 단계로 넘어가 완전히 우리 것으로 만드는 겁니다.
00:11:37저는 이런 방식으로 접근하는 것을 좋아합니다.
00:11:39이 시점에서 제가 사용할 프롬프트는 이런 식입니다. 미학은 유지하고,
00:11:42특정 방향성 안에서 세 가지 변형을 만들어 줘.
00:11:46다시 말씀드리지만, 이건 깃허브 안에 있습니다.
00:11:47그리고 제가 아스트라에게 그 프롬프트를 주었을 때, 아스트라가 우리를 위해 만든 세 가지 버전은 다음과 같습니다.
00:11:51오리지널 화각(Field of view) 버전과 리서치 뷰로(Research bureau) 버전이 있습니다.
00:11:54모두 같은 내용의 서로 다른 맛일 뿐입니다.
00:11:57오리지널은 이미 위에서 보았고요.
00:11:59화각 버전에서는 히어로 이미지가 시각적 공간에서 더 큰 비중을 차지합니다.
00:12:05그 외에는 아래로 내려갈수록 많은 부분이 꽤 비슷합니다.
00:12:08여기에 이런 대시보드가 있는데, 역시 완전히 지어낸 것이지만 실제로 상호작용이 가능합니다.
00:12:14다양한 티커를 클릭해 보면서 여러 정보를 볼 수 있고, 그 모든 내용이 여기에 똑같이 반영됩니다.
00:12:21이 버전은 초록색이 아주 강하다고 말씀드리고 싶네요.
00:12:23오리지널에 비해 초록색이 많아서, 저는 좀 더 흰색이 많은 오리지널이 마음에 듭니다.
00:12:28그리고 리서치 뷰로라고 불리는 이 버전도 있습니다.
00:12:33사진이 차지하는 비중이 크지 않고 조금 더 작죠.
00:12:36하지만 보시다시피 공통점이 있으면서도 다른 느낌일 뿐, 엄청난 변화는 아닙니다.
00:12:41만약 엄청난 변화를 원하신다면 프롬프트에 그렇게 말씀하시면 됩니다.
00:12:44자, 이제 이 시점에서 여러분이 할 일은 마음에 드는 것을 고르는 것뿐입니다.
00:12:48이것들 중에서는 오리지널이 마음에 듭니다.
00:12:50깔끔하다고 느껴지거든요.
00:12:51여전히 개성도 살아 있고요.
00:12:53이렇게 해서 이 프로세스의 3단계인 반복(Iteration) 단계로 넘어가기 시작합니다.
00:12:59우리는 레퍼런스를 선택했습니다.
00:13:02어떤 디자인 패밀리가 마음에 드는지 파악했고요.
00:13:05이제 그 디자인 패밀리 내에서 특정 경로를 선택했습니다.
00:13:08이것으로 끝인가요?
00:13:09그냥 좋네요, 하고 넘어가나요?
00:13:10이게 결과물인가요?
00:13:11아닙니다.
00:13:12이제 우리는 여기에 훨씬 더 저수준의 미세 조정을 가하기 시작할 것입니다.
00:13:17코덱스와 아스트라 덕분에 이 작업이 매우 쉬워집니다. 모든 사소한 변경 사항마다 일일이 프롬프트를 입력할 필요가 없거든요.
00:13:24클로드 디자인에서 보셨던 것과 유사한 트윅(tweaks) 바를 만들어서 슬라이더로 여러 가지를 한꺼번에 조작하며 실시간으로 확인할 수 있게 해줍니다.
00:13:34오른쪽 화면이 더 잘 보이도록 카메라를 끄겠습니다.
00:13:37기본적으로 이런 트윅 패널이 있는데, 여기에 보이는 트윅에만 국한되지 않는다는 점을 알아두세요.
00:13:43완전히 맞춤 설정이 가능하지만 몇 가지 프리셋도 포함되어 있습니다.
00:13:46웹페이지를 열었을 때 아무 일도 일어나지 않는 오리지널 버전이 있습니다.
00:13:51움직임이 전혀 없죠.
00:13:52익스프레시브 옵션으로 이동하면, 진입 애니메이션을 다시 재생할 때 요소들이 로드되는 것을 볼 수 있습니다.
00:14:00스크롤해서 들어갈 때 무게감이 느껴져서, 가만히 있는 것보다 훨씬 고급스러운 효과를 줍니다.
00:14:07게다가 시각적인 세부 조정을 할 때는 이 슬라이더들을 그냥 사용하면 됩니다.
00:14:15헤드라인 두께를 바꿀 수도 있고요.
00:14:17높이, 자간 등을 변경할 수 있습니다.
00:14:22이러면 프롬프트로 “헤드라인 좀 더 크게 해 줄래? 작게 해 줄래?”라고 말하는 것보다 훨씬 쉽습니다.
00:14:25작게 만들어 줄래요?
00:14:26이 기능은 앤트로픽과 페이블도 슬래시 디자인(slash design)을 사용할 때 추가한 기능이기도 합니다.
00:14:32이미지 밝기, 대비를 조절하고 확대 및 축소할 수 있습니다.
00:14:37격자 패턴도 바꿀 수 있습니다.
00:14:40점 모양으로 하거나 여기서 원하는 건 뭐든 할 수 있죠.
00:14:43요점은 다시 말해 반복 작업이 쉽다는 것입니다.
00:14:45여기 모든 것의 핵심이죠. 저는 여러분이 무엇을 좋아하는지 모르니까요.
00:14:48여러분 자신도 무엇을 좋아하는지 모를 겁니다.
00:14:50직접 눈으로 봐야 알 수 있죠.
00:14:51포인트 색상도 바꿀 수 있습니다.
00:14:53정말 원하는 것은 무엇이든 할 수 있습니다.
00:14:56푸터에도 약간의 변화를 주었습니다.
00:14:58오리지널 푸터를 그대로 사용하거나, 큰 워터마크를 넣고 약간의 움직임이 있는 와이어프레임 도시를 추가할 수 있습니다.
00:15:07선의 두께를 변경하고요.
00:15:10창문을 넣을까요?
00:15:11도시에 애니메이션을 넣을지 등등을 설정할 수 있습니다.
00:15:13설정을 저장하거나 초기화하는 등 이 모든 작업이 가능합니다.
00:15:16언제든지 원본과 비교하거나, 광택 처리된 버전으로 돌아가거나, 수정되지 않은 원본을 여는 등의 작업을 할 수 있습니다.
00:15:25따라서 코덱스와 아스트라를 사용하면 반복 작업을 할 수 있을 뿐만 아니라 변경 사항이 실제로 어떻게 보이는지 매우 쉽게 확인할 수 있습니다.
00:15:30이런 결과물을 만들기 위한 프롬프트 역시 GitHub에 공개되어 있습니다.
00:15:34자, 트윅 슬라이더 외에도 우리가 할 수 있는 다른 미세 조정들이 있습니다.
00:15:38가장 쉬운 방법은 커스텀 컴포넌트를 추가하거나 디자인에 가져오고 싶은 웹상의 컴포넌트를 찾는 것입니다.
00:15:45이 용도로 제가 가장 좋아하는 웹사이트는 21st.dev입니다. 비슷한 기능을 하는 사이트들이 여럿 있죠.
00:15:4921st.dev에 접속해서 컴포넌트로 가면, 정말 수많은 종류의 다양한 컴포넌트 예시들을 볼 수 있습니다.
00:15:58테두리, 마키 섹션, 텍스트, 후기, 카드, 캘린더, 버튼 같은 것들 말이죠.
00:16:11요점은, 버튼의 경우만 봐도 문자 그대로 수천 가지의 서로 다른 버튼을 볼 수 있다는 것입니다.
00:16:16다시 말하지만, 디자인 백그라운드가 없는 우리 대부분에게 가장 어려운 일은 무엇을 모르는지조차 모른다는 점입니다.
00:16:22그래서 영감과 레퍼런스를 찾는 것이 그토록 중요하며, 다양한 종류의 레퍼런스를 접해보는 것도 매우 큰 도움이 됩니다.
00:16:30왜냐하면 본 적이 없다면 자신이 무엇을 좋아할지, 무엇이 가장 적합할지 알 수 없기 때문입니다.
00:16:35그리고 꼭 Astra의 평균적인 결과물에만 얽매이거나 거기에 갇힐 필요는 없습니다.
00:16:42보시다시피 Astra의 평균 결과물도 실제로 매우 훌륭하지만, 세상에는 정말 다양한 것들이 존재하죠.
00:16:47그리고 5분이나 10분 정도 시간을 내어 이러한 버튼이나 카드 같은 다양한 요소를 둘러보면 정말 마음에 드는 것을 발견할 수도 있습니다.
00:16:55그럴 경우, 클릭하고 아래의 프롬프트 복사 버튼을 누른 다음 그것을 Codex로 가져오기만 하면 됩니다.
00:17:05마음에 드는 컴포넌트를 하나 찾았다면, 그 단일 컴포넌트의 미학을 웹사이트 전체로 확장하는 것은 그리 어렵지 않습니다.
00:17:16따라서 취향 보관함과 레퍼런스에 대해 이야기할 때, 특정 카드가 구성된 방식 자체가 말 그대로 레퍼런스가 될 수 있습니다.
00:17:23우리는 그것을 가져와 웹페이지의 모든 요소에 확장 적용할 수 있습니다.
00:17:28어디서든 시작하기만 하면 됩니다.
00:17:29자, 미세 조정을 마치고 조정 바를 사용해 보았으며 다양한 컴포넌트를 추가했다면,
00:17:33Codex와 Astra에서 정말 멋진 점은 바로 이 사이트 기능입니다.
00:17:38따라서 여러분이 할 일은 그냥 “이 새로운 설정들을 적용하고 이 웹사이트를 사이트에 올리자”라고 말하는 것입니다.
00:17:43따라서 Codex 안에서 @sites를 입력하기만 하면 얻을 수 있는 사이트 기능을 통해 웹사이트가 웹에 배포됩니다.
00:17:51이것은 여러 측면에서 기본적으로 'GitHub에 올린 다음 Vercel에 올리는 것'과 비슷합니다.
00:17:58그러니까 Vercel을 통해 웹사이트를 호스팅하는 것의 좀 더 간소화된 버전이라고 할 수 있죠.
00:18:03물론 이것을 본격적인 프로덕션 용도로 사용하고 싶지는 않을 것입니다.
00:18:06하지만 그냥 사람들과 공유하고 싶을 때, 즉,
00:18:10내가 지금까지 무엇을 만들었는지 사람들이 살펴보게 하고 싶을 때
00:18:12이것은 정말 간단한 방법입니다.
00:18:14OpenAI ChatGPT가 여러분의 작업물을 호스팅해 주므로 원하는 누구와든 공유할 수 있고, 더 수정하기 전에 피드백을 받을 수도 있죠.
00:18:21보시다시피 이렇게 사이트가 생성되었습니다.
00:18:23특정 사람들과 공유하고 싶다면 공유(share)로 이동하여 이메일 주소를 입력하면 됩니다.
00:18:27아니면 인터넷상의 누구나 이 작업물을 볼 수 있게 설정할 수도 있죠.
00:18:31비공개인 경우 로그인을 하라는 창이 뜹니다.
00:18:33이렇게 하여 우리의 Vantage 웹사이트가 정상적으로 실행되었습니다.
00:18:37정말 이토록 간단합니다.
00:18:39Astra를 사용하면 이 모든 다양한 디자인 스타일과 버전을 아주 빠르게 거쳐갈 수 있습니다.
00:18:44지정된 디자인 스타일 속에서, 그리고 내장된 이미지 생성 도구를 활용하여 여기 히어로 섹션에서 한 것처럼 에셋을 매우 저렴하고 빠르게 만들 수 있죠.
00:18:54게다가 이 모든 과정에 적용해야 하는 순환 주기가 바로 이런 것이라고 생각합니다.
00:18:58또한 Astra가 별도의 스킬 없이도 이런 결과물을 만들어낼 수 있다는 점이 정말 멋집니다. 즉 스킬이 필요 없는 버전이죠.
00:19:04엄청난 것을 생각해낼 필요도 없고 impeccable이나 taste 같은 도구를 쓸 필요도 없습니다. 물론 그런 도구들도 탄탄한 결과물을 주긴 하지만요.
00:19:10스택에 수많은 스킬을 추가하는 것을 별로 좋아하지 않고, 기본형 GPT-6만으로 통제력을 유지하고 싶다면 충분히 탄탄한 결과물을 얻을 수 있습니다.
00:19:20그리고 이 시점부터는 반복 작업을 통해 원하는 수준으로 끌어올리기만 하면 됩니다.
00:19:23정말 유연하죠.
00:19:25오직 한 가지 특정 스타일만 제공하는 매우 규격화된 스킬들을 굳이 가질 필요는 없다고 봅니다.
00:19:30자신만의 스타일을 찾아야 하며, 이것이 바로 레퍼런스를 찾고 자신만의 취향 라이브러리, 즉 마음에 드는 항목들의 보관함과 저장소를 만드는 1단계가 그렇게 중요한 이유입니다.
00:19:41늘 그렇듯, 이번 내용이 여러분에게 어땠는지 피드백을 남겨주세요.
00:19:45저의 Codex 및 Cloud Code 마스터클래스를 만나보고 싶다면 Chase AI+를 꼭 확인해 보시기 바랍니다.
00:19:50해당 GitHub 저장소 링크도 아래에 남겨둘 테니 직접 확인해 보세요.
00:19:54그럼 이만, 다음에 뵙겠습니다.
00:19:56다음에 뵙겠습니다.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기