chat GPT의 프롬프트 엔지니어링을 사용하여 타로 카드 이름, 해석, 키워드, 점수 등 원하는 결과물에 도달할 수 있도록 구체적으로 예제를 보여주고 포맷 데이터를 예시로 부여하여 최적의 프롬프트를 작성할 수 있도록 설명하였고 빠르게 코드에 적용하기 위하여 완성된 코드의 데이터를 받았습니다.
당신은 타로 카드 해석기입니다.
사용자가 알고자 하는 메이저 카드를 입력하면 당신은 정해진 포맷대로 출력해야 됩니다.
정해진 포맷 데이터 예시는 다음과 같습니다.
{
name:"<타로카드 제목:영어와한글제목>",
keyword: "<타로카드와 연관 키워드:3개이상>",
description: "<타로카드 해설:5줄이상>",
score: "<타로카드 긍정지수:int형, 100점만점>"
}
이해했으면, 준비되었습니다를 출력하십시오.
스테이블 디퓨전으로 AI 이미지를 만든 이유는 타로 카드의 이미지들은 대부분 경직된 이미지라는 느낌을 받았습니다. 이를 개선하기 위하여 귀여운 토끼 이미지로 오늘의 운세를 보면 더 친근한 느낌을 받을 수 있다고 생각을 하였습니다. 하지만 원래의 이미지에서 벗어나게 되면 타로 카드의 의미가 희미해질 듯 하여 되도록 본래의 이미지를 유지하며 귀엽고 친근한 느낌을 위해 AI 이미지를 사용하였습니다.
스테이블 디퓨전 안에서 추가로 사용한 모델은 dreamshaper 이며, 애니메이션에 적합한 모델이라 생각되어 사용하였습니다. 모델을 사용한 이유로는 기본적인 스테이블 디퓨전은 키워드를 동일시해도 통일된 느낌이 적었을 뿐만 아니라, 넓은 이미지 스펙트럼 안에서 원하는 이미지를 도출 해내기에는 시간이 많이 소요되기 때문에 dreamshaper를 사용하게 되었습니다.
사용된 키워드로는 cute, rabbit, tarot card를 모든 카드 이미지에서 공통으로 사용하였고 이미지 중 결과가 공통된 느낌이 부족 할 때는 그 이미지에 맞도록 키워드를 더 추가하여 사용하였습니다.
lighthouse를 사용하여 성능 및 해결 방안을 모색하였습니다.
첫 번째로 원하는 폰트가 렌더링 되기 전까지 소요되는 시간 때문에 페이지의 로딩 속도가 느려지는 것을 확인하였습니다. 이를 해결하기 위해 font-display: swap 을 사용하여 기본 폰트를 렌더링 한 후 원하는 폰트가 로딩 된 뒤 교체하는 방식을 선택하여 문제를 해결하였습니다.
두 번째로 압축되어 있지 않은 파일들로 인하여 로딩 속도가 느려진 부분을 확인하였습니다. 그에 따른 해결 방안으로는 gzip을 선택하였습니다. gzip은 nginx같은 곳에서도 지원하고 있지만 빌드 시 미리 압축을 진행해 놓으면 첫 전송 타이밍 때 압축 시간을 줄여서 더 빠른 속도로 불러올 수 있다고 예상되어 사용하였고, 결과적으로 로딩 속도가 상승하였습니다.
세 번째로 Webp가 지원되는 브라우저에서는 더 빠르게 렌더링 될 수 있는 이미지로 적용하였습니다. 적용 사항으로는 배경, 로고, 카드 등 이미지를 사용하기 때문에 Webp를 사용하여 크기를 줄일 수 있도록 하였고, 기존의 Png파일도 Webp를 지원하지 않는 브라우저를 위해 picture태그를 사용하여 Webp가 지원되지 않는 브라우저에서도 Png 파일을 불러올 수 있도록 개발하였습니다.