[엘카데미 챌린지] Bard로 만드는 MBTI 검사 웹사이트 8일차

 

오늘은 페이지를 완성하려고 하는 날이다. 이제 웹페이지에서는 각 질문마다 예 / 아니오를 선택하고 페이지가 넘어가지만 최종 결과는 보여주지 못하는 상태이다. 왜냐하면 아직 E, I, N, S, T, F, P, J가 각각 몇 개인지 세는 과정이 없기 때문에 결과가 저장이 안 되기 때문이다. 이제는 대답한 것들을 카운팅 하고 다시 로컬 스토리지에 저장해 준 후 그 결과를 출력해 주는 과정을 만들었다. 

 

다만 Bard가 답변해 준 코드가 잘 작동하지 않아 6가지의 다른 답변으로 나온 코드를 실행했지만 작동하는 것이 없어 결국 예시 답안 코드를 이용했다. 아직 Bard를 사용해서 무리 없이 개발을 진행하기에는 한계가 있다고 느껴지는 부분이었다. 

일단 예시 코드를 사용해서 실행해 보니 로컬 스토리지에 MBTI결과가 잘 저장되어 있는 모습이 보였다. 

마지막 강의는 로컬 스토리지에 저장된 MBTI결과를 출력해 주고 만약 MBTI검사를 하지 않은 상태에서 결과를 보려고 하면 위의 스크린숏처럼 화면이 나올 수 있게 설정해 주는 과정이었다. 새롭게 result.js파일을 생성하고 Bard에게 질문을 던져 js코드를 생성해 냈다.

window.onload = function() {
  const mbtiResult = localStorage.getItem("mbti_result");
  if (mbtiResult) {
    document.getElementById("result").innerHTML = `당신의 MBTI는 ${mbtiResult}입니다!`;
  } else {
    document.getElementById("result").innerHTML = "아직 테스트를 진행하지 않았습니다!";
  }

  document.getElementById("restart-button").innerHTML = "테스트 하러 가기";
};

이 코드를 result.js파일에 붙여 넣어주었고 다행히 이번에는 Bard가 제대로 된 답변을 주어 잘 작동했다. 

 

드디어 프로젝트 하나를 완성하게 되었다. Chat GPT와 같은 생성형 AI가 트렌드를 주도하고 있는데 막상 어디에 사용할지는 잘 모르는 상태였는데, 엘카데미에서 수강한 이번 강의를 통해 생성형 AI를 가지고 코딩도 하고 서비스도 만들어 낼 수 있다는 가능성을 본 것 같다. 다만 아직은 질문도 매우 구체적으로 던져야 하고, 부정확한 코드를 생성해 내는 경우도 왕왕 있을뿐더러, 웹개발에 대한 기초 지식은 있어야 생성형 AI를 웹개발에 제대로 쓸 수 있겠다는 생각이 들었다. 

 

아무튼 'Bard로 만드는 MBTI 검사 웹사이트' 과목은 Bard를 사용해 볼 수 있는 기회를 주고 또 간단한 웹사이트를 AI로 만들어보는 경험을 주었기 때문에 유익한 강의였다. 다만 AI에만 의존할 수는 없고 AI 사용자가 충분한 개발 지식을 가지고 있을 때 더욱 자유자재로 AI를 사용할 수 있겠다고 생각했다.