23시간만에 실험보고서 생성 AI 웹서비스 만들기(2)- 웹서비스 개선하기

이 글은 시리즈로 이루어져 있으므로 1편부터 읽으시는 것을 추천합니다.
1편: 웹서비스 기획하기 [바로이동하기]
2편: 웹서비스 개선하기 [읽고있는글]
3편: 웹서비스 배포하기 [바로이동하기]
4편: 웹서비스 최적화하기 [바로이동하기]

더 많은 이야기를 듣고싶다면 위드의 메이커 레터 [구독하러가기]

넌 내꺼야! 이제 성장만...

이제 편의성을 위한 기능들을 하나둘씩 추가해 볼께요. 필요한 기능들은 다시 쉽게 사용할 수 있게하는 초기화(리셋) 기능, 나온 보고서를 복사할 수 있는 복사 기능을 1차적으로 추가할께요. 

1. 초기화(리셋) 버튼
2. 복사 버튼

여러 기능들을 추가하여 완성도를 높여야합니다. 꾸준히 기능들을 넣어줘야해요. 

처음으로 완성된 웹서비스는 사용하기 어려울 정도에 디자인을 보여주고 있어요. 그래서 기본적인 디자인을 gpt에게 맞겨보았어요. 

gpt가 개선된 html 코드를 주었어요. 이 코드를 실행시켜볼께요. 

 "와 이게 AI가 디자인했다고?" 

완전 엄청난 디자인은 아니지만, 순식간에 이렇게 깔끔하게 만들 수 있다는 것이 대단하다고 느껴졌어요.

기본적인 디자인과 기능이 순식간에 완료되었어요. 디자인이나 기능에서 추가되지 않거나 부족한 부분이 보이지만 만족스러워요. 

가랏 AI...!! 기능 추가, 디자인 해줘 

사실 gpt, 이 친구는 디자인을 잘하는 친구가 아니에요. 글쓰기나 코딩에 정통하지만 디자인은 부족한 친구에요. 즉 문이과 통합형 인재라서 예체능(디자인)에서 부족한 모습을 보여줘요. 

그래서 디자인에선 새로운 AI를 사용할께요. 

바로 클로드 AI입니다. 클로드는 디자인 부분에서 좋은 모습을 보여주는 AI에요. 

클로드에게 웹사이트 이미지를 주고 리디자인 해달라고 했어요. 답변으로 웹 디자인 개선을 위한 제안을 받았어요. 이 내용을 gpt에 넣을 프롬포트로 달라고 할께요. 

다시 gpt로 가서 이 프롬포트를 넣고 이 디자인 개선안에 맞춰 코드를 달라고 해봤어요. 그리고 코드를 실행시켜보았어요. 

오! 디자인이 완성되었어요. 이제 편의성을 위한 기능들을 추가하고, 약간만 디자인을 손볼께요. 

이번에도 클로드를 이용합니다!

html 코드를 그대로 넣고, 다시 리디자인 해달라고 했어요. 

코드를 받아 수정된 디자인을 확인하고, 이제 디테일한 부분을 수정해달라고 요청할께요. 


 "~~수정해줘, ~~기능 추가해줘, ~~버튼 추가해줘" 

드디어 코드에 마침표를..?

기나긴 수정이 끝났어요. 여러가지 기능도 추가해봤어요. 보고서 생성, 초기화, 복사 버튼을 추가했어요. 

추가적으로 다크모드 기능과 사용자가 간편하게 문의할 수 있도록 버튼도 만들어봤어요. 

드디어....웹서비스 코딩을 완성했어요. 감동의 순간입니다....

이렇게 텍스트 필드에 실험 내용을 넣고, 보고서 생성 버튼을 누르면...(몇가지를 공백으로 놔두어도 작동해요!)

이렇게..!!

넣었던 실험 내용에 맞는 실험보고서 텍스트가 생성되네요!

 "드디어 기나긴 여정의 끝이 보인다!" 

3편에서 계속....