이번에 스터디장님 따라하면서 마스터한 것은
'Canva AI의 코드 생성' 기능입니다.
Canva도 AI가 도입되어 코드 생성 기능 같은 것들이 있어서
개발과 디자인이 결합되고 있는 모습을 보여줍니다.
스터디장님 시연을 참고한 영상입니다.
https://www.youtube.com/watch?v=_bX-E_68pH4&t=281s
이 중에서 저는 QR 코드 생성에 꽂혔습니다.
여러모로 가져다 쓰면 좋을 기능이어서 배워보기로 합니다.
스터디장님 하신 것을 보고 참고하여
우선 ChatGPT에게 가서 이런 저런 설명을 주면서
QR 코드 생성기를 만들기 위한 프롬프트를 작성합니다.
ChatGPT가 만들어준 프롬프트는 다음과 같습니다.
HTML, CSS, JavaScript를 사용하여 다음 조건을 모두 충족하는 QR 코드 생성기를 만들어줘:
1. 입력 유형 선택 방식:
- 사용자가 QR 코드 유형을 선택할 수 있도록 Drop-down이 아닌 세 개의 버튼으로 만들어줘.
- 각 버튼은 다음 세 가지 유형 중 하나를 선택하게 해줘:
- URL
- 텍스트
- 연락처 정보(vCard 방식: 이름, 직위, 휴대폰 번호, 이메일 포함)
- 버튼 클릭 시 해당 입력 폼만 보이도록 해줘. 나머지는 숨김 처리.
2. 입력 폼 구성:
- URL 입력 시: URL 텍스트 입력 필드 제공.
- 텍스트 입력 시: 자유롭게 텍스트를 입력할 수 있는 textarea 제공.
- 연락처 입력 시:
- 이름(Name), 직위(Title), 연락처(Mobile Phone), 이메일(Email) 항목을 각각 입력할 수 있도록 구성.
- 이 정보들을 vCard 형식으로 QR 코드에 인코딩해줘.
3. QR 코드 커스터마이징 기능:
- 사용자가 QR 코드의 크기(px)를 설정할 수 있는 입력 필드 제공 (기본값 256px).
- 색상(hex)을 선택할 수 있는 컬러 피커 추가 (#000000 기본값).
4. QR 코드 생성 기능:
- 사용자가 입력을 완료하고 "QR 코드 생성" 버튼을 클릭하면, 해당 내용으로 QR 코드를 생성해줘.
- 생성된 QR 코드는 페이지에 실시간으로 표시되어야 하고, DOM에 SVG 형태로 추가되어야 해.
5. 결과 저장 및 공유 기능:
- 생성된 QR 코드를 PNG 및 SVG로 저장할 수 있는 두 개의 다운로드 버튼을 제공해줘.
- PNG 다운로드 버튼을 누르면 실제로 브라우저가 PNG 파일을 자동 다운로드하도록 해줘.
- SVG 다운로드 버튼도 마찬가지로 자동 다운로드 되도록 구현해줘.
- 공유(Share) 버튼을 추가해서, Web Share API를 통해 실제로 공유할 수 있도록 만들어줘. (단, 브라우저에서 지원할 경우에만 활성화되도록 처리)
6. UI/UX 구성:
- 모든 UI는 반응형 디자인으로 구성해줘. 모바일과 데스크탑에서 모두 잘 보이게 해줘.
- 레이아웃은 직관적이고, 입력 필드와 결과 영역이 시각적으로 구분되도록 해줘.
- 버튼은 명확한 아이콘 또는 텍스트로 사용자에게 동작을 알 수 있도록 해줘.
7. 코드 구조:
- HTML, CSS, JS를 한 HTML 파일에 포함된 구조로 만들어도 좋고, 파일을 나눠도 괜찮아. 중요한 건 기능이 모두 동작하는 완성된 형태일 것.
이것을 Canva AI의 코드생성을 눌러서 붙여줍니다.
엔터치면 자동으로 만들기 시작합니다.
기다리기만 하면 됩니다.
완성되었습니다.
잘 되는지 test 해보고 작동하는 것을 확인합니다.
그래서 웹사이트 게시를 눌러서 웹사이트로 배포합니다
성공적으로 웹사이트로 올라갑니다.
실제로 작동을 확인하고 사용해봅니다.
제가 Dify로 만든 챗봇 URL을 주고 QR 코드를 생성한 후,
QR 코드대로 실제로 이동하는지 확인해봅니다.
잘 작동합니다. 성공입니다.
이제 제가 무언가를 만들어서 사람들에게 알릴 때마다
QR 코드 사용하면 편하게 사람들에게 링크를 보내 줄 수 있을 것 같습니다.
다만, 한가지, PNG 파일 같은 실제 파일로 다운로드 버튼을 눌러보니
다운로드가 되지 않습니다.
제가 무언가 잘 못 했거나 Canva AI가 제대로 만들어주지 않았다고 생각하여
여러번 반복해서 수정을 시도했지만 매번 실패했습니다.
그래서 결국에는 Canva AI에게 물어보니
실제로 다운로드는 되지 않고 다운로드까지 하게 하려면
추가 작업이 좀 이루어져야 하는 것 같습니다.
100% 진짜인지는 확인은 되지 않지만 여러번 시도 끝에 얻은 결론이니
맞는 것 같기는 합니다....
약간 찜찜하나 여기까지 하면서 Canva AI의 코드 생성 기능을 익혀봅니다.
역시 좋은 것 하나 배우고 마스터하고 갑니다.
ps. Canva에서 공유 기능을 한 번 시도해봤습니다.
내 사진 옆의 + 버튼을 눌러서 공유하기를 해 봅니다.
스터디장님을 선택해서 공유를 합니다.
이런 방식으로 팀 단위로 서로 협업을 하는 것인가 보군요.
역시 또 한가지 배워갑니다.
