[코딩자율학습단 Cursor x AI] 1주차:AI 감성 분석 웹서비스 만들기(2)

 

감정 분석 화면 만들기

를 시작하기전에 한 가지 의문이 생겼습니다.

 

저는 지금 ChatGPT 유료 요금제를 사용중입니다. 그럼 Cursor에서도 추가 비용없이 이 모델을 사용할 수 있지 않을까? 하고 물어보았습니다.

 

 

응. 안돼. 어쨌든 Cursor도 GPT API를 사용하는 구조이기 때문에 별도의 API 비용을 지불해야 하는 것이었습니다. 

여기서만 쓸게~

 

이번 포스팅에서는 분석 화면을 만들고 기능도 구현하겠습니다.

---

1. 무료 버전으로 감정 분석 화면 만들기

교재에서는 Pro 요금제 사용을 권장했습니다만, 저는 일주일 안에 다음 프로젝트를 실행하지 못하는 상황이라 연습 프로젝트는 무료로 갑니다.

화면 구성 → 기능 구현

 

감정 분석 화면 구성하기

• AI Mode : Agent
• Model : Auto
• 작성한 프롬프트
  교재의 기본틀을 사용하였습니다. API를 활용한 프로젝트를 진행한 적이 있었는데, 그때 채팅을 치면 나가는 토큰이 돈이었기 때문에 한도를 걸었던 기억이 났습니다. 그래서 여기서도 글자수 제한을 걸어보았습니다. 
  

  

  
  
  음 근데 지피티는 텍스트의 양으로 토큰을 계산하는군요! 그럼 더더욱 글자수 제한을 둬야겠습니다. 답변도 그렇게 하라고 설정할 걸 그랬네요. 하지만 지금은 무료버전이니 패스~

 

 

감성 분석 서비스의 화면을 다음 사항을 반영해 구현해줘.

 

1. 화면 구성

- 제목 : "AI 감성 분석기"

- 설명 : "텍스틀 입력하면 AI가 감성을 분석해 드립니다.(최대 500자)"

- 입력창 : 여러 줄 텍스트 입력 가능, 최대 500자

- 분석 버튼 : 클릭하면 감성 분석 실행

- 결과 영역 : 긍정/부정/중립 중 하나로 결과 시각화, 최신 짤 응용

 

2. 기술 요구사항

- Next.js App Router 사용

- tailwind CSS로 스타일링

- Shadcn/ui 컴포넌트 활용

 

3. 디자인 요구사항

- 모바일에서도 잘 보이는 반응형 디자인

- 결과를 표시할 때 부드러운 애니메이션 효과

 

 

화면 구성 결과 확인하기

wow! 언버블리버블

 

글자 수를 실시간으로 카운트해서 화면에 보여줍니다. 웹 브라우저 크기를 줄여도 화면이 잘보입니다. 이걸 단 몇초만에 완성하다니.. 나는 이제 어떤 일을 하고 살아야할까요?

 

이까지만 하려고 했는데, 이러면 너무 찝찝하니까 그냥 끝까지 다 만들겠습니다.

 

---

2. 감정 분석 기능 구현하기

Gemini API 연동하기

1) API 키 발급하기

Google AI Studio 로그인 → API 키 / API 키 만들기 → Create project(sentiment-analyzer) / 프로젝트 만들기 → 만들어둔 프로젝트 클릭 / 키 만들기 → API 키 페이지에서 키 확인 / 복사(외부유출X)

Google AI Studio

Google AI Studio

 

프로젝트(sentiment-analyzer) 프로젝트를 생성하고 키를 생성해줍니다. 그리고 복사합니다. OpenAI API를 사용할 때 API코드를 복사하고 Github에 올렸을 때 API 키를 사용할 수 없는 상황을 마주했습니다.(gitignore 로 해결) 키를 외부에 유출하는 것은 위험하기 때문에 자체적으로 막아주기도 하지만 스스로 유출없이 사용해야 합니다! 

 

 

2) 환경변수 설정하기

발급받은 API 키를 코드에 직접 적지 않고 환경 변수(environment variable) 파일에 저장해야 합니다. 환경 변수는 프로젝트 안에서만 읽을 수 있으며, 외부에는 공유되지 않도록 보호됩니다. 이렇게 하면 git 에서도 자동으로 제외!

프로젝트 폴더에 .env.local 파일 생성

GOOGLE_GENERATIVE_AI_API_KEY=복사한API키

 

 

감성 분석 기능 구현하기

• AI Mode : Agent
• Model : Auto
• 작성한 프롬프트
  교재의 프롬프트를 그대로 작성했습니다. Gemini 모델은 어떤걸 사용해야할지 몰라서 아무런 언급없이 cursor에게 맡겼습니다.

감성 분석 서비스의 화면을 다음 사항을 반영해 구현해줘.

 

1. 화면 구성

- 제목 : "AI 감성 분석기"

- 설명 : "텍스틀 입력하면 AI가 감성을 분석해 드립니다.(최대 500자)"

- 입력창 : 여러 줄 텍스트 입력 가능, 최대 500자

- 분석 버튼 : 클릭하면 감성 분석 실행

- 결과 영역 : 긍정/부정/중립 중 하나로 결과 시각화, 최신 짤 응용

 

2. 기술 요구사항

- Next.js App Router 사용

- tailwind CSS로 스타일링

- Shadcn/ui 컴포넌트 활용

 

3. 디자인 요구사항

- 모바일에서도 잘 보이는 반응형 디자인

- 결과를 표시할 때 부드러운 애니메이션 효과

역시 빠르게 잘 합니다. 코드를 읽으면서 이해해보았습니다. 텍스트에서 감성을 분류하는 모델은 gemini-1.5-flash를 사용했군요.

 

감성 분석 기능 확인하기

npm run dev

 

🚨 오 이런 에러 발생!

 

gemini 1.5 flash 모델을 지원하지 않는 것 같아요. Google AI Studio의 API Logs and Datasets에서 사용 가능한 모델들을 살펴봅니다. Nano Banana 도 제공하는 걸 보니 이걸 사용해서 부정/긍정/중립 그림을 나타내도 좋을 것 같아요. 감정 그림일기 같은 서비스 만들어지겠네요.

 

 🗨️API 사용 모델을 1.5 flash가 아니라 gemini-2.5-flash로 연동해줘.

작성된 코드 파일이 어딨는지 궁금했는데 빠르게 찾아서 수정도 해주는 걸 확인했습니다. 제대로 한 것을 확인했으면 Keep 클릭

 

 

그리고 각 문장에 대한 감성을 잘 분석하는지도 확인할 수 있었습니다.

 

1. 오늘 날씨가 좋아서 기분이 좋아요! 그런데 방에만 있으니 좀 답답해요 2. 오예 기분이 너무 좋아서 달리기하고 싶어 3. 아우 짱나

 

 

[Google AI Studio/사용량 및 결제 탭] 에서 사용량도 시각적으로 확인할 수 있습니다.

지난 1시간 동안의 사용량

 

 

 

배우고 난 지금의 기분은 어떨까요? 재밌어서 긍정적인 사람이 되었어요. 좋습니다. 

 

 

 

주말 쉬고 다음 주에 다시 돌아와서 AI 할일 관리 웹 서비스 만들기를 해보겠습니다.