Video: Opus vs Fable 디자인 능력 비교
Channel: 코드팩토리
Duration: 7m 25s
Source: subtitle (auto, ko)
Transcript:
자, 오늘 수많은 토큰 화려한 요소들을 많이 넣어준 것 같아요. 자, 이메일 프로젝트 문의도 우리가 마우스를 갖다 대면은 이렇게 움직이는 걸 볼 수가 있고요. 지금 마우스 커서를 따라서 이 동그라미가 따라다니는 것도 볼 수가 있어요. 자, 사이즈별로도 한번 체크를 해보겠습니다. 자, 아이패드 프로 사이즈 자, 이렇게 정확하게 타일링이 잘 된 걸 볼 수가 있고요. 네, 이거 눌렀을 때 인터랙션도 이렇게 이쁘게 잘 되네요. 자, 이렇게 들어왔고 글자가 조금 이렇게 겹쳐보이는 걸 확인할 수가 있죠. 이게 폰트가 아닌가 싶기도 하네요. 자, 굉장히 작은 사이즈의 모바일로 가면은 어, 이것도 꽤나 잘 됐어요. 그죠? 자, 위에 이 내비게이션은 조금 만지긴 해야 될 것 같은데 이 정도면은 꽤나 훌륭합니다. 자, 이렇게 쭉 잘 들어간 걸 볼 수가 있습니다. 어, 전혀 문제가 안 되네요. 자, 이런 부분들 우리가 조금 신경 썼으면 좋았을 텐데, 거기까지는 안 된 거 같아요. 자, 두 번째 사이트는 자, 이렇게 생겼고요. 그렇죠?

자, 그리고 여기 조금 어긋난 부분이 있어. 예, 조금 살짝 어긋났고요, 서로. 어, 근데 여기도 지금 1, 2, 3, 4 이렇게 해서 아이덴티티를 넣어 줬는데, 어, 색감이 되게 이쁘게 들어간 거 같아요, 제 생각에는. 자, 그리고 1, 2, 3, 4 이렇게 프로세스도 있고, 어, 실제 테스티모니얼도 이렇게 들어가 있는 거를 볼 수가 있어요. 이 친구도 우리가 아이패드로 보면은 자, 사이즈에 맞게 잘 들어간 거를 볼 수가 있고요. 그리드는 여전히 좀 깨져 있네요. 자, 그리고 이렇게 들어간 거를 볼 수가 있습니다. 자, 클라우드 디자인으로는요, 자, 이 첫 번째가 오퍼스의 작업이었고요. 그리고 두 번째가 페이블의 작업이었습니다. 자, 어떤가요? 저 같은 경우에는 개인적으로 오퍼스가 한 이 작업이 조금 더 마음에 드는 거 같아요. 음, 두 번째 같은 경우에는 너무 무지개 느낌이 좀 많이 들어갔다고 해야 될까요? 자, 그래서, 그리고 이 그리드도 조금 어긋났고요. 어, 퀄리티가 조금 덜 됐다. 그냥 한 방에 만든 거 치고는 정말 잘하긴 했는데, 조금 아쉬운 부분이 분명히 있다라는 생각이 듭니다.

자, 그럼 3번 한번 봐 볼게요. 3번은 조금 더 흥미로웠는데, 자, 이렇게 새로 고침 하면은요, 로딩이 이렇게 들어갑니다. 네, 로딩까지 신경을 쓴 거를 볼 수가 있고요. 클라우드 코드로 작업을 한 거죠, 이거는 이제. 자, 이렇게 스크롤 하게 되면은, 자, 이런 식으로 요소들이 나오고, 마우스를 움직이면은, 자, 이렇게 마우스가 호버되는 되게 이쁜 액션도 들어간 거를 볼 수가 있어요. 그리고 움직임에 따라서, 이거 어떤 컴포넌트 쓴 건지 모르겠는데, 자, 이렇게 3D 입체감이 굉장히 자연스러웠고요. 이 마우스를 따라오는 이 원도 되게 물리 엔진이 잘 적용이 된 거 같은 느낌이 들어요. 자, 여기도 이렇게 있고요. 자, 밑에 보면은 숫자로 보는 코드 팩토리, 뭐, 이런 식으로 잘 나오는 거를 볼 수가 있습니다. 그렇죠? 푸터까지 잘 들어왔고, 어, 이 프로젝트를 시작하세요는 왜 일부러 이렇게 움직이게 한 거 같은데, 어, 되게 재밌는 요소 중 하나네요. 자, 태블릿 사이즈로 봐도 로딩 잘 들어가는 거 볼 수가 있고요.

자, 이렇게 스크롤 잘 되고, 쭉 내려가면은, 음, 태블릿은 우리가 호버 액션이 없으니까 안 보이고, 잘 이쁘게 나오는 거를 볼 수가 있습니다. 자, 모바일도 이렇게 나왔고요. 어, 모바일은 정말 잘 만들어진 거 같아요, 이 정도면. 이거 스크롤이라는 글자가 지금 조금 겹치긴 했는데 그거 말고는 한국어 최적화가 훨씬 더 잘 됐습니다, 클로드 디자인으로 했던 것보다. 자, 이렇게 쭉 내려가면은 이쁘게 디자인이 전부 끝난 거를 그리고 우리가 이 메뉴를 눌렀을 때 메뉴가 열리는 애니메이션도 굉장히 이쁘게 잘 들어갔고요. 자, 네 번째를 보면요, 자, 여기도 네, 로딩이 들어갔는데 자, 이렇게 숫자가 올라가면서 로딩이 나오고요. 네, 이런 식으로 어, 엄청나게 정말 화려한 이 스크롤하면서 이 애니메이션이 되도록 자, 이렇게 들어간 거를 볼 수가 있습니다. 그리고 여기도 마우스를 우리가 호버했을 때 이런 식으로 되도록 나왔습니다. 이게 왜 어, 똑같이 컴포넌트가 만들어졌는지 잘 모르겠어요. 저는 똑같은 프롬프트를 넣었거든요, 다.

완전히 다른 폴더에서 했는데 이렇게 비슷하게 나왔네요. 확실히 이 네 번째가 조금 더 부드럽기는 해요. 이 뒤에 있는 배경도 같이 따라오고 있고요, 그죠? 이게 느껴지시나요? 이게 화면에 보일지 모르겠는데 정말 부드럽게 잘 따라오고 있습니다. 자, 그리고 여기도 잘 됐고 디오, 이런 게 또 이제 추가가 됐네요, 이런 식으로. 어, 재밌습니다. 자, 그래서 1, 2, 3, 4 이렇게 숫자까지 잘 나왔고요. 먼저 경험한 분들의 얘기, 테스티모니얼까지 이렇게 잘 들어갔습니다. 어, 이거 굉장히 좀 마음에 드는 거 같아요, 그죠? 자, 이런 식으로 네, 페이지가 잘 만들어졌다. 어, 이거는 제가 좀 제가 진짜 개인적으로 쓰고 싶을 정도로 조금 마음에 드는 형태의 사이트인 것 같습니다. 자, 여기도 마찬가지로 제가 똑같은 프롬프트를 넣어서 작업을 했어요. 자, 클로드 코드로 작업한 이 3번과 3번이 5퍼스였고요, 4번이 페이블이었습니다. 그래서 저는 조금 이번 결과에 놀라운 게 사실 이 클로드 디자인 같은 경우에는 이미 디자인을 잘 할 수 있도록 굉장히 최적화가 많이 돼 있잖아요, 그죠?

자, 그런데 제가 일단 느끼기에 클로드 디자인 사이트를 쓴 것보다 그냥 쓰지 않은 게 조금 더 멋있게 잘 나온 거 같고요, 지금 이 프롬프트 치고는, 그죠? 뭔가 되게 이쁘게 좀 나왔죠. 그 중에서도 클로드 코드가 작업한 이 페이블 꽤나 저는 마음에 많이 드는 거 같아요. 자, 그래서 어, 로직뿐만 아니라 제 생각에는 페이블을 사용해서 디자인을 작업을 해보는 것도 AB 테스트하기에 굉장히 적절하지 않을까라는 생각이 들기도 합니다. 자, 이 작업들을 하기 위해서 제가 200달러 플랜을 쓰고 있는데 지금 이 커런트 세션 보면은 29%를 사용을 했습니다. 제가 이걸 테스트해보고 싶어서 일부러 세션 초기화될 때 제가 바로 실행을 했거든요. 그래서 클로드 디자인 두 개 각각 오퍼스랑 페이블, 그리고 클로드 코드로 디자인하는 거 오퍼스랑 페이블 그렇게 네 개 돌렸을 때 29% 정도 썼다 라고 보시면은 되고 자, 에포트 같은 경우에는 제가 맥스로 뒀고요. 어, 울트라 코드는 제가 쓰지 않았습니다. 제가 오전에 한번 울트라 코드를 써봤는데요.

페이블로 울트라 코드 딥 리서치 하나랑 울트라 코드 워크플로우 하나 돌리니까 어, 30분만에 모든 토큰을 다 소진했습니다. 그래서 진짜 토큰 먹는 하마 라는 거를 고려하고서 여러분들이 꼭 작업을 해 주시면 좋을 것 같다라는 게 제 생각입니다. 자, 여러분은 어떤 디자인이 제일 마음에 드나요? 댓글에다 남겨주시면은 저희가 공유하고 또 이 취향도 한번 우리가 서로 확인을 해볼 수가 있을 거 같아요. 오늘 영상이 좋았다면 구독과 좋아요 알림 설정, 그리고 댓글에 하트까지 꼭 해주시면은 제가 다음 영상을 제작하는데 큰 힘이 됩니다. 자, 그럼 다음에 또 뵙도록 할게요. So easy.