AI 활용한 고하레벨 퀴즈·설문 맞춤화 방법 및 스타일링 정리
게시일:
작성자: 자청의 유튜브 추출기
- 오늘은 퀴즈 퍼널을 스타일링하는 방법을 알려줄게요.
- AI인 Claude를 사용해서 코드를 생성하는 방법을 보여줄게요.
- 코딩은 몰라도 괜찮아, AI가 대신 만들어줄 거니까.
- 먼저, 고레벨 대시보드와 퀴즈 만들기부터 시작해요.
- 대시보드 커스터마이징도 가능하니 참고하세요.
- 새 퀴즈를 만들고, 다중 선택 옵션을 선택하는 게 좋아요.
- 질문과 선택지들을 입력하고 저장하세요.
- 미리보기를 열어 질문과 선택지가 잘 연결됐는지 확인해요.
- 그림으로 설명하며, 버튼과 옵션 연결 방식을 보여줄게요.
- AI에게 스타일링과 버튼 연결 코드를 요청하는 방법을 설명해요.
- Claude에게 질문 번호와 셀렉터를 알려줘야 해요.
- Visual CSS 툴로 셀렉터를 찾고, 복사해서 Claude에 입력하세요.
- 원하는 디자인(모던, 애니메이션 등)을 상세하게 설명하면 좋아요.
- 이미지 버튼을 만들고 싶다면, 이미지 URL도 준비하세요.
- 이미지 크기와 일관성을 유지하는 게 좋아요.
- Claude가 코드를 만들어주면, HTML에 붙여넣기만 하면 돼요.
- 코드가 제대로 작동하는지 미리보기로 꼭 테스트하세요.
- 선택 후 자동 제출이 안 되면, Claude에게 수정 요청하세요.
- 자주 발생하는 오류는 숨기기 기능으로 해결할 수 있어요.
- CSS로 숨기기 코드를 만들어서 적용하는 것도 방법입니다.
- 전체 과정을 반복하며, 원하는 스타일을 구체적으로 설명하세요.
- 이미지 버튼, 색상, 폰트 등 세부사항을 명확히 전달하는 게 중요해요.
- 이미지와 텍스트를 조합한 버튼도 쉽게 만들 수 있어요.
- Claude가 만든 코드를 HTML에 넣고, 미리보기로 최종 확인하세요.
- 이렇게 하면 멋지고 커스터마이징된 퀴즈 퍼널을 쉽게 만들 수 있어요.