[Project] MyFortune 04

🗯️ 기능 고도화

사용자의 편의성을 고려하여 좀 더 고도화된 기능 추가하기

추가할 요소

• 로고
• 레이아웃, 버튼 등

1. 로고 제작

책에서는 달리2를 활용해 로고를 제작했는데
유로 크레딧을 발급해야 해서
나는 캔버스를 활용해서 로고를 생성해보았다.
(달리2 : OpenAI에서 개발한 이미지 생성 AI)

MyFortune 로고

2. 인트로 화면 만들기

인트로 화면에서 생년월일과 태어난 시간을 입력하면
채팅 화면으로 넘어가도록 구성 추가

2-1. 레이아웃 생성

index.html

결과

2-2. 레이아웃 정렬

css를 수정하여 가운데 정렬로 변경하기

style.css

결과

2-3. 이미지 크기 조절

스마트폰 화면 기준으로 이미지 크기 조절하기

1. 브라우저에서 개발자 도구 열기 (크롬 브라우저 단축키 f12)

2. elements 탭 클릭 - > toggle device toolbar 아이콘 클릭

3. 왼쪽 상단 Dimensions 버튼 클릭 ( 기기별 화면 볼 수 있음 ! )

아이폰 12Pro(화면 크기 390 * 844) 기준으로 조절해보자

이미지의 min-width(최소 크기)는 300px 유지
웹사이트 화면의 크기에 따라 반응형으로 동작할 수 있게
width(가로 크기)는 50%로 설정

2-4. 입력 필드 추가하기

사용자의 생년월일, 태어난 시간을 입력받는 필드 추가

1. 생년월일 필드

생년월일을 텍스트로 입력받으면 사용성이 떨어지고
잘못된 숫자를 입력할 경우를 대비하여
input 태그의 type 속성을 date로 설정하여
달력 형태로 날짜를 입력 받아 보자 !

label 태그를 사용하여 입력 필드에 제목을 붙이고
for 속성 값을 input 태그의 id 속성 값과 동일하게 설정하여 두 태그를 연결할 수 있다.

2. 태어난 시간 필드

select 태그와 option 태그 활용하기
태어난 시간을 모르는 경우도 있을 수 있으므로
option 태그에서 value속성의 기본값을 모름으로 설정

2-5. 운세 보기 버튼 추가

3. 백엔드와 통신하기

버튼을 클릭했을 때 사용자가 입력한 값들을 수집한 뒤 백엔드로 전송하기

start() 구현

입력 받은 생년월일을 date 라는 변수에,
태어난 시간을 hour 라는 변수에 담고
이 두 변수를 myDateTime이라는 변수에 문자열 형태로 저장

테스트

인트로 화면에서 채팅화면으로 이동

각 화면의 display 속성 변경

인트로 화면은 none, 채팅 화면은 block으로 설정
sendMessage() 함수에 백엔드로 보내는 메세지의 본문에 myDateTime 변수 추가

결과

챗GPT 사전 학습시키기

챗gpt api를 통해 user와 assistant의 대화를 추가하여
사용자의 생년월일, 태어난 시간, 오늘 날짜 학습시키기

1. 프런트엔드에서 보낸 메세지 req.body에서 myDateTime 값 추출

2. 챗gpt는 2022년 1월까지의 데이터만 학습한 상태 - >
   현재의 날짜를 알 수 없으므로 자바스크립트 내장 객체인 Date()를 이용하여
   오늘 날짜 값을 가져오기

Date() 객체의 toLocaleString()함수를 사용하여 서버 시간이 아닌
한국 시간 기준의 값을 가져와야 한다.

3. 챗gpt api 학습 적용

💡 자바스크립트에서 문자열을 표현할 때 큰 따옴표나 작음 따옴표를 사용하는데
문자열에 변수를 넣기 위해서는 일일이 문자열을 열고 닫은 후 더하기를 사용해야한다.
따옴표 대신 역따옴표로 전체 문자열을 감싸 주면 ${} 표현식을 사용하여 간편하게
변수를 포함시킬 수 있다.

동작 검증하기

질문 리스트

1. 오늘 내 운세는 어떻게 돼?'
2. 오늘은 몇 월 며칠이야 ?
3. 내 생년월일은 언제야 ?

결과

로딩 스피너 추가하기

사용자가 질문을 입력하고 챗gpt의 응답을 받기까지 약간의 지연 시간이 존재한다.
사용자 입장에서는 화면이 멈춰 있는 것처럼 보이면
서비스를 이탈할 수 있으므로 진행되고 있다는 걸 알리기 위한 처리를 추가하자 !

책에서는 폰트어썸에 있는 아이콘을 활용했는데
나는 코드펜에서 찾은 방법으로 스피너를 구현한 애니메이션 효과를 수정하여 넣어주었다.

아이콘은 사용자가 send 버튼을 누르면 표시되었다가 챗gpt의 응답을 출력하면
사라지게 해야 함 !!

sendMessage() 함수 수정

• 함수의 도입부에 로딩 스피너의 display 속성을 block으로 변경
• await response.json()을 통해 백엔드의 응답을 받은 뒤
  display 속성을 다시 none으로 변경하여 아이콘을 숨김

결과

ui는 좀 더 수정하자요 !! + 엔터처리 필요

이제 배포가 남았는데 끝까지 잘 마무리 하자 🎧