【실연】
소재(Asset) 없이 코드만으로 3D 화면을 만들 수 있습니다.
외부 도구를 연결하는 설정(MCP)도 필요 없습니다.
작성자는 Design+Code의 MengTo입니다.
순서는 단 3가지입니다.
→ 참고할 영상, URL 또는 코드를 AI에게 전달한다.
→ '똑같은 것을 하나의 HTML로 만들어줘'라고 요청한다.
→ '참고와 비교하며 차이점을 수정해 가라'를 추가한다.
이것만으로 결과물이 달라집니다.
유리처럼 빛나는 버튼.
천천히 움직이는 배경.
빛의 반사까지 포함된 공간감.
모두 코드만으로 구현됩니다.
소재 파일은 단 하나도 사용하지 않았습니다.
결과물은 다음과 같습니다.
・브라우저에서 3D를 그리는 메커니즘(three.js)의 코드
・외관이 하나의 HTML에 모두 담긴 형태
・따라서 내부 내용을 직접 수정할 수 있음
・소재를 배치하지 않고 바로 제품에 적용 가능
흥미로운 점은 여기서부터입니다.
그 부품들을 본인이 오픈 소스로 공개했습니다.
이름은 ThreeUI Community입니다.
로그인 없이 손에서 바로 작동하는 버전입니다.
내용물은 다음과 같습니다.
부모가 되는 부품 50개.
페이지 경로 111개.
무료로 사용할 수 있는 외관 파생 디자인 141개.
단독 부품 23개. 총 164개를 둘러볼 수 있습니다.
npm install 후, npm run dev로 실행합니다.
React 컴포넌트로도 삽입할 수 있습니다.
라이선스는 MIT이며 상업적 이용이 가능합니다.
즉, AI에게 전달하는 재료가 '언어'에서 '구현 코드'로 바뀌었습니다.
여기가 가장 큰 변화입니다.
설명문만으로는 AI가 그럴듯한 다른 것을 만듭니다.
완성된 코드를 통째로 전달하면, 차이를 줄이는 작업으로 바뀝니다.
본인은 같은 방식으로 390개 이상의 디자인을 만들고 있습니다.
비교하며 수정하게 하는 작은 노력이 효과를 발휘합니다.
솔직히 3D UI는 당분간 전문가의 영역이라고 생각했습니다.
그 전제가 오늘 무너진 것 같습니다.
★5,374. 공개된 지 얼마 안 된 부품치고는 빠릅니다.
디자인에 약한 사람일수록 효과적입니다.
소재를 찾는 시간이 완전히 사라지기 때문입니다.
외부 도구를 연결할 필요가 없다는 발상은 CLI(Command Line Interface)의 논리와 같습니다.
먼저 아래 기사를 읽으면 이 내용이 더 이해하기 쉽습니다👇
오픈 소스는 여기👇