목차(클릭하세요)
바이브 코딩시에 만들어지는 웹 페이지의 느낌이 다 고만고만하기 때문에 시각적 요소를 더하기 위한 사이트: 스플라인 + 모빈
1. 3D디자인_스플라인
•
3d랜딩 페이지 제작을 위한 사이트
•
메인 베너 디자인을 3D디자인으로 구성하고 싶을 유용
•
브라우저에서 실시간으로 돌아가는 도구
1-1. 커뮤니티 활용
•
일반 사람들이 만든 디자인을 서로 공유하는 곳
•
굉장히 많은 사용자들이 공유해놓은 작품들 중에 원하는 작품을 선택
1-2.실제 remix과정
•
remix버튼을 눌러 일부 텍스트나 간단 수정이 가능함
•
애플은 못참지!!
•
편집창이 열림
•
•
이 화면을 수정하는것은 나중에 해보고, 이 화면을 우리의 웹페이지에 포함시키는 실습을 진행하기 위해 오른쪽 상단의 ‘export’클릭
•
이후 퍼블릭 URL의 Copy Embed를 선택하면
•
이 embed를 바탕으로 바이브 코딩을 진행할 수 있음
•
또는 옆의 copy link를 누른다음 브라우저창에서 바로 확인 가능
•
또는 ‘’viewer’에서 해당소스코드를 복제하여 바이브코딩에 활용 가능
2. 전체 프레임_모빈
2-1. 원하는 전체 프레임을 선택
2-2.전체 페이지의 디자인을 복사
•
section을 선택후, fullpage 선택한 다음 copy선택
•
실제 ‘download png’를 눌러 확인해보면 단일 그림이 아닌 페이지 전체가 다운로드 되는 것을 확인할 수 있음
•
이렇게 전체 페이지 구조를 참고하여 바이브 코딩의 퀄리티를 향상 시킬 수 있음
•
3. 그래서 실전에 어떻게 사용하는가?
3-1. 바이브 코딩 예시
3d랜딩페이지를 만들꺼야.
1.전페 프레임은 여기를 참고해
https://mobbin.com/sites/sections/057209db-db9a-4f89-9eba-2f4144f1f099?fullpage=true&utm_source=copy_link&utm_medium=link&utm_campaign=section_sharing
2. 메인 3d요소는 이주소를 참고해
<iframe src='https://my.spline.design/metalicapplelogoanimation-vJFxz9N4KdjHuCVDtxWw7vMN/' frameborder='0' width='100%' height='100%'></iframe>
Plain Text
복사
1. 아래 코드를 활용해서 메인베너 디자인을 만들꺼야
<script type="module" src="https://unpkg.com/@splinetool/viewer@1.12.29/build/spline-viewer.js"></script>
<spline-viewer url="undefined"></spline-viewer>
2. 본문 내용에 들어갈 디자인은 아래 주소에 있는 디자인을 채택해
https://mobbin.com/sites/sections/057209db-db9a-4f89-9eba-2f4144f1f099?fullpage=true&utm_source=copy_link&utm_medium=link&utm_campaign=section_sharing
나는 혁신적인 AI기술을 소개하고, 현업에서 학생들과 함께 미래를 디자인하는 나를 브랜딩하는 포트폴리오 사이트를 만들꺼야.
Plain Text
복사
•
만약 주소 인식이 안된다면 이미지를 첨부할 수도 있음
3-2.결과물
•
안티그래비티의 결과물 비교해보기
[안티그래비티]
•
역시나 디자인 적인 요소만 지침으로 주고, 내용에 대한 지침이 빠진 관계로 뭔가 어설픈 결과물이 나왔음
안티그래비티에 보다 더 정확한 프롬프트를 주었을 때]
4. PPT디자인은 여기서
•
비핸스
•
비핸스에 접속한 다음 PPT디자인만 검색
•
취향껏 디자인을 찾은 다음 해당 이미지를 스크린캡쳐해서 Gemni, claude 등으로 가서 다음 프롬프트를 사용
이런 스타일의 인포그래픽을 생성하고 싶은데, 어떻게 써야 하는지 알려줘.
내용 말고 '디자인만' 참고할거야 내용은 따로 있어.그림을 그리지는 마
JavaScript
복사
[Gemini]
스타일 정의: Modern infographic design, SaaS dashboard UI style, Futuristic presentation slide
배경 및 질감: Dark mode, Technical grid background, Subtle blueprint lines
컬러 및 빛: Neon red and magenta accents, Vibrant gradients, High contrast, Glowing edges
도형 특징: Glassmorphism, Translucent frosted glass cards, Rounded corners, Soft drop shadows
품질 및 분위기: Clean layout, Minimalist, Professional, 8k resolution, Vector aesthetic
JavaScript
복사
[Claude]결과
다크 레드-브라운 그라데이션 배경에 점선 그리드가 있는 인포그래픽을 만들어줘.
4개의 박스를 비대칭 레이아웃으로 배치하고, 2개는 화이트, 2개는 레드/핑크 톤으로 해줘.
각 박스에는 큰 숫자(01~04)를 넣고, 중앙에는 메인 타이틀을 크게 배치해줘.
전체적으로 모던하고 프로페셔널한 느낌으로.
내용:
- 박스 1: [제목] / [설명]
- 박스 2: [제목] / [설명]
- 중앙 타이틀: [메인 메시지]
- 박스 3: [제목] / [설명]
- 박스 4: [제목] / [설명]
JavaScript
복사
•
PPT 디자인을 요청할 때의 방식
아래 내용을 3장의 인포그래픽 프리젠테이션으로 만들어봐. 반드시 내가 적은 스타일을 적용시켜
1.스타일
2. 내용
Plain Text
복사
[원본 이미지]
[스카이웍스]결과물
[Genspark결과물]
[gemini]컨버스 결과물
•
또 다른 디자인 테스트
[스카이워크 결과물]
•
압도적으로 좋긴한데, 한글 상태로는 PPT다운로드시 글자깨짐 발생, PDF받아야 하는게 가장 아쉬움
