00:00:00매주 새로운 디자인 툴이 쏟아져 나오는 요즘, 정말 쓸만한 툴이 무엇인지 어떻게 알 수 있을까요?
00:00:04문제는 매일같이 퀄리티를 보장한다는 새로운 툴들이 출시되지만, 대부분은 그저 소문만 무성할 뿐이라는 점입니다.
00:00:09저희가 여러 툴을 직접 테스트해 본 결과, 약속한 기능을 실제로 제공하면서 워크플로우에 잘 녹아드는 몇 가지 툴을 발견했습니다.
00:00:15저희 팀원 중 한 명이 히어로 섹션에 3D 애니메이션이 들어간 자동차 제품 랜딩 페이지를 작업하고 있었는데요.
00:00:21이 웹사이트의 소스 코드와 사용된 모든 기능은 AI Labs Pro에서 확인하실 수 있습니다.
00:00:25모르시는 분들을 위해 설명해 드리자면, AI Labs Pro는 저희가 최근 런칭한 커뮤니티로, 이번 영상뿐만 아니라 이전 영상들에서 다룬 템플릿, 프롬프트, 모든 명령어와 기술을 프로젝트에 바로 적용하실 수 있게 제공해 드립니다.
00:00:36저희 작업물이 도움이 되었고 채널을 응원하고 싶으시다면, 이 커뮤니티가 가장 좋은 방법입니다. 링크는 설명란을 확인해 주세요.
00:00:42이런 웹사이트를 제작하는 첫 단계는 좋은 에셋을 확보하는 것인데, 이를 위해 AI 기반 3D 오브젝트 생성기인 Tripo3D를 사용했습니다.
00:00:50로그인하니 약 300크레딧을 받았는데, 10번 정도 생성하기에 충분한 양이었습니다.
00:00:54이제 3D로 변환할 이미지가 필요했습니다.
00:00:57히어로 섹션에 쓸 자동차 이미지는 있었지만, 배경이 모델 생성에 방해가 되더군요. 이런 툴은 배경과 피사체를 구분하는 게 까다롭기 때문에 아까운 크레딧을 낭비하고 싶지 않았습니다.
00:01:08그래서 Canva의 배경 제거 툴을 사용했는데, 무료 대안인 Remove BG를 쓰셔도 무방합니다.
00:01:16배경을 지운 뒤 Tripo3D에 해당 이미지를 참조용으로 넣었습니다.
00:01:21모델 생성까지 약 1분 정도 걸렸고, 원본 이미지와 상당히 흡사하게 만들어졌습니다.
00:01:25모든 각도에서 뷰를 확인할 수 있었고, 어느 방향에서 봐도 모델의 형태가 일관되게 유지되었습니다.
00:01:313D 모델이 완성된 후 바로 내보내기를 했습니다.
00:01:34Tripo3D 무료 플랜은 내보내기가 15회로 제한되어 있어서, 두 번의 시도 끝에 가장 만족스러운 결과물을 골라 다운로드했습니다.
00:01:43해상도는 4K로 설정해서 내보냈습니다.
00:01:45다운로드한 GLB 파일을 새로 만든 Next.js 앱의 public 디렉토리에 추가해 쉽게 접근할 수 있게 했습니다.
00:01:52다른 포맷 대신 GLB로 내보낸 이유는 텍스처와 재질이 파일 하나에 통합되어 있고, 웹 표준 포맷이라 라이브러리와의 연동이 매우 쉽기 때문입니다.
00:02:04GLB 파일이 준비되었으니 이제 웹 앱에 구현할 차례입니다.
00:02:08랜딩 페이지 제작을 위해 최근 출시된 macOS 전용 앱인 Codex를 선택했습니다.
00:02:14이미 Claude code가 있는데 왜 굳이 Codex를 쓰는지 궁금하실 수도 있습니다.
00:02:19새로운 제품을 런칭하면서 현재 무료 플랜에도 넉넉한 쿼터와 확장된 한도를 제공하고 있기 때문에 지금이 활용하기 가장 좋은 시기입니다.
00:02:29물론 여러분이 선호하는 다른 AI 에이전트에서도 동일한 프로세스를 적용할 수 있습니다.
00:02:32Codex를 다운로드하고 프로젝트 폴더를 열었습니다.
00:02:34인터페이스는 AntiGravity의 에이전트 매니저와 매우 흡사하지만, 코드보다는 에이전트에 더 특화된 모습입니다.
00:02:40가장 마음에 들었던 부분은 “스킬” 기능이었습니다.
00:02:43다른 에이전트의 경우, 나만의 스킬을 만들려면 오픈소스 스킬 크리에이터를 가져와서 직접 빌드해야 합니다.
00:02:49반면 Codex는 스킬 크리에이터가 내장되어 있고 설치와 동시에 바로 쓸 수 있는 유용한 스킬들이 많다는 점이 큰 장점이었습니다.
00:02:563D 애니메이션 작업을 단순화하기 위해 스킬 크리에이터를 사용했습니다. 애니메이션을 어떻게 구성할지, 어떤 라이브러리를 사용할지 상세히 설명해 주었죠.
00:03:06몇 가지 질문에 답하고 나니 스킬 크리에이터 내부의 스크립트가 실행되면서 스킬이 빌드되었고 바로 사용할 수 있게 준비되었습니다.
00:03:13여기서 한 가지 차이점이 있었습니다.
00:03:14보통 에이전트는 .agent나 .claud 폴더에 스킬을 설치하는데, Codex는 루트 폴더에 설치하더군요. 그래서 수동으로 .agent 폴더로 옮겨주었습니다.
00:03:24그래도 Claude가 제시한 오픈소스 에이전트 프레임워크 패턴을 잘 따르고 있었습니다. 스크립트, 참조 문서, 스킬 기능을 더하기 위한 에셋들이 모두 포함되어 있었죠.
00:03:33또한 어떤 사용자 프롬프트에 스킬을 실행할지 에이전트가 판단할 수 있도록 일반 프롬프트가 담긴 yaml 파일도 들어있었습니다.
00:03:40방금 만든 스킬을 사용해 애니메이션을 설정하라는 작업을 Codex에게 맡겼고, 필요한 세부 사항을 프롬프트에 모두 담았습니다.
00:03:47작업이 시작되었고 설치 명령어들이 실행되었습니다.
00:03:49시간이 꽤 흐른 뒤 작업이 끝났지만, 환경 내 명령 제한 시간 초과로 종속성 설치에 실패했다고 하더군요. 그래서 package.json에 종속성을 직접 작성해 달라고 요청했습니다.
00:04:01설치 명령어를 수동으로 실행해 보니 프로젝트 내 라이브러리 버전 차이로 인한 종속성 충돌 오류가 발생했습니다.
00:04:08히어로 섹션의 애니메이션이 원하는 대로 작동할 때까지 Codex와 함께 여러 번 디버깅을 거쳐야 했습니다.
00:04:14Codex가 개별 기능을 처리하는 데 시간이 너무 오래 걸려서, 작업을 4개의 세부 과제로 나누었습니다.
00:04:21각 과제는 랜딩 페이지의 기능 하나씩을 담당하며, 목표와 요구사항, 제약 조건을 독립적으로 포함하도록 구성했습니다.
00:04:28그리고 Codex의 멀티 에이전트 기능을 사용해 각 에이전트가 과제 하나씩을 맡게 했습니다.
00:04:32모두 같은 랜딩 페이지를 작업 중이었기 때문에, 메인 브랜치가 아닌 별도의 워크트리에서 작업하도록 했습니다. 여러 에이전트가 동시에 같은 섹션을 건드리면 코드 충돌이 나기 때문이죠.
00:04:43거의 모든 에이전트가 비슷한 시간 안에 작업을 마쳤습니다.
00:04:46출력물을 병합하니 충돌 없이 모든 기능이 구현되었고, Codex 혼자 작업할 때보다 훨씬 빠르게 끝낼 수 있었습니다.
00:04:55웹사이트의 주요 구성 요소는 준비되었지만, 히어로 섹션을 제외한 나머지 부분이 애니메이션이 없어 밋밋해 보였습니다. 그래서 gsap를 사용하기로 했습니다.
00:05:03gsap는 많은 전문가가 사용하는 자바스크립트 애니메이션 라이브러리로, 성능이 매우 안정적입니다.
00:05:09앞서 종속성 충돌과 타임아웃 오류가 있었기 때문에, 이번에는 구현 전에 미리 터미널에서 npm install 명령어로 gsap를 설치해 두었습니다.
00:05:18이미 완성된 히어로 섹션은 건드리지 말라는 지시와 함께 애니메이션 추가를 위한 상세 프롬프트를 Codex에 전달했습니다.
00:05:27애니메이션을 어디에 어떻게 추가할지 구체적으로 지시했는데, 이 작업은 수행하는 데 시간이 꽤 걸렸습니다.
00:05:33몇 가지 사소한 오류가 있었지만, 오류 메시지를 다시 Codex에게 전달하며 수정 과정을 거쳤습니다.
00:05:37그 결과 히어로 섹션은 그대로 유지하면서 나머지 애니메이션 구현을 마칠 수 있었습니다.
00:05:42모든 섹션에 스크롤 트리거 애니메이션이 추가되니 사이트 전체의 느낌이 확연히 달라졌습니다.
00:05:48애니메이션은 생겼지만, 개별 컴포넌트들이 히어로 섹션에 비해 여전히 평면적으로 보였습니다.
00:05:54그래서 Aceternity UI에서 컴포넌트를 골랐습니다. 여기 컴포넌트들은 프로젝트에 바로 적용할 수 있는 마이크로 인터랙션과 애니메이션이 내장되어 있거든요.
00:06:04기존 애니메이션은 유지하면서 컴포넌트만 Aceternity 제품으로 교체해 달라고 Codex에게 요청했습니다.
00:06:10구현 후에 보니 앱 테마와 어울리지 않는 그라데이션이 추가되어 있더군요.
00:06:14스크린샷을 보여주며 그라데이션이 기존 테마와 맞지 않는다고 지적했더니, 테마에 맞는 컬러로 수정해 주었습니다.
00:06:21그런데 애니메이션을 확인해 보니 구현된 컴포넌트들이 정적이었고, Aceternity 특유의 마이크로 인터랙션이 빠져 있었습니다.
00:06:30마우스를 올리면 기울어지는 효과 같은 인터랙션이 포함된 Aceternity 컴포넌트가 따로 있다고 알려주며 그것으로 다시 적용해 달라고 했습니다.
00:06:38수정 후에는 호버 틸트와 인터랙션 효과가 적용되어 사이트가 훨씬 더 생동감 있게 느껴졌습니다.
00:06:44시각적 완성도를 더 높이기 위해 post-processing이라는 오픈소스 NPM 패키지를 사용했습니다.
00:06:51이것은 React Three Fiber를 사용할 때 후처리 효과를 적용해 주는 애니메이션 레이어입니다.
00:06:56이를 통해 감마 보정 같은 이미지 프로세싱 기능을 활용해 고성능의 결과물을 만들어낼 수 있습니다.
00:07:01Codex에게 이 라이브러리를 사용해 은은한 조명 효과를 만들고 그 과정을 안내해 달라고 프롬프트를 보냈습니다.
00:07:07처음에는 제대로 이해하지 못해서 출력물에 아무런 변화가 없었습니다.
00:07:11여러 번의 재프롬프팅과 디버깅 끝에 드디어 조명 효과가 적용되었습니다. 3D 모델에 은은한 광채가 더해졌고, 히어로 섹션의 따뜻한 조명과 어우러져 훨씬 완성도 높은 모습이 되었습니다.
00:07:23오늘 준비한 영상은 여기까지입니다.
00:07:25채널을 후원하고 이런 영상을 계속 제작하는 데 힘을 보태고 싶으시다면, 아래의 Super Thanks 버튼을 이용해 주세요.
00:07:31시청해 주셔서 감사드리며, 다음 영상에서 뵙겠습니다.