소개
시도하고자 했던 것과 그 이유를 알려주세요.
심리 상담을 AI 가 할 수도 있지 않을까?
하는 생각에 심리 상담을 해주는 웹사이트를 제작해보게 됐습니다.
최종적으로는 chatbot 형태로 상담을 진행하는 형태로 가고 싶지만,
mvp에서는 상황을 입력하고, 심리 리포트를 주는 형태로 일단 만들어 보려고합니다.
이번에는 랜딩페이지를 먼저 만들어봤고, 이후 주차들에서 gpt api를 이용해서 리포트를 생성하고 supabase를 이용해서 내용을 저장해보려고 합니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
심리랑 관련이 있는 만큼, 디자인이 중요하다고 생각했고, lovable이랑 v0 두 개에 같은 프롬프트를 넣어 디자인 해봤습니다.
chatGPT: gpt와 계속 웹사이트 아이디어 에 대해 이야기를 나눴었고, 아래 프롬프트를 추가했습니다.
프롬프트: 이거를 lovable 이라는 웹사이트 만들어주는 ai 툴에 프롬프트로 웹사이트 만들어달라고 해야하는데, 그 프롬프트를 짜줘.
GPT가 준 프롬프트:
I want to create a landing page for a product called "Feelia", an AI-powered emotional analysis tool. It helps users understand their current mental and emotional state by generating personalized psychological reports based on their written input.
The tone should be warm, trustworthy, and emotionally resonant. The design should be minimal and mobile-friendly, using soft colors (like pastel pink, lavender, beige). Avoid a clinical or corporate look — this is more like a modern emotional wellness tool, not a medical app.
The landing page should include:
- A hero section with a calming headline like: “내 감정, 내가 제일 모르겠을 때 Feelia가 심리 리포트를 만들어드립니다.”
- A simple explanation of how the service works in 3 steps.
- A prominent CTA button: “심리 리포트 받기 →”
- Testimonials or user reactions if possible (can be placeholder).
- Footer with brand info.
Don't use emojis or cartoony elements. The target audience is 20–30s, people feeling emotionally overwhelmed or lost, looking for clarity. The site should feel like a calm space for reflection, not a loud tech demo.
lovable
위에서 gpt가 준 프롬프트를 넣어봤습니다.
다자인은 마음에 드는데, 대시보드, 무드 트래커 같이 요청하지 않은 것들을 붙여넣으면서 감정 기록? 관리? 하는 기능이 들어갔습니다.
v0
v0는 어떻게 디자인할지 궁금해서 똑같이 위에서 gpt가 준 프롬프트를 넣어봤습니다.
기능 자체는 제가 원하는게 다 들어있었습니다.
그런데 디자인은 lovable이 더 나은 것 같아서 v0한테 prd를 뽑아달라고 했습니다.
프롬프트: 혹시 너가 만든 웹사이트의 prd 를 받을 수 있을까? 메뉴 구성이랑 내용들을 포함해줘
v0한테 받은 prd:
### AIMO 웹사이트 PRD (Product Requirements Document)
## 1. 제품 개요
제품명: AIMO (AI-powered Emotional Analysis Tool)**제품 설명**: AIMO는 사용자의 텍스트 입력을 기반으로 AI가 감정 상태를 분석하고 맞춤형 심리 리포트를 제공하는 서비스입니다.**핵심 가치 제안**: 사용자가 자신의 감정을 더 잘 이해하고 정서적 웰빙을 향상시킬 수 있도록 도와줍니다.
## 2. 타겟 사용자
- 주요 타겟: 20-30대 성인
- 사용자 특성: 감정적으로 혼란스럽거나 자신의 감정을 더 잘 이해하고 싶은 사람들
- 사용자 니즈: 자기 이해, 감정 명확화, 심리적 안정감
## 3. 메뉴 구조
### 3.1 메인 네비게이션
1. 홈 - 랜딩 페이지 메인 화면
2. 서비스 소개 - AIMO 서비스 설명 및 작동 방식
3. 사용자 후기 - 실제 사용자들의 경험담
4. 자주 묻는 질문 - FAQ 섹션
### 3.2 보조 네비게이션 (푸터)
1. 서비스
1. 심리 리포트
2. 감정 분석
3. 맞춤 가이드
2. 회사
1. 소개
2. 팀
3. 채용
3. 법적 정보
1. 개인정보 처리방침
2. 이용약관
### 3.3 사용자 액션 버튼
- 로그인 - 기존 사용자 로그인
- 시작하기 - 신규 사용자 가입
- 심리 리포트 받기 - 주요 CTA 버튼
## 4. 페이지 콘텐츠 상세
### 4.1 홈페이지 (랜딩 페이지)
#### 4.1.1 히어로 섹션
- 헤드라인: "내 감정, 내가 제일 모르겠을 때 AIMO가 심리 리포트를 만들어드립니다."
- 서브헤드라인: "당신의 감정을 이해하고 명확한 심리 분석을 통해 내면의 평화를 찾아보세요."
- CTA 버튼: "심리 리포트 받기 →"
- 시각 요소: 감정적 평온함을 나타내는 이미지
#### 4.1.2 서비스 작동 방식 섹션
- 제목: "어떻게 작동하나요?"
- 설명: "AIMO는 간단한 3단계로 당 신의 감정을 분석하고 맞춤형 심리 리포트를 제공합니다."
- 3단계 프로세스:
1. 감정 기록하기: 현재 느끼는 감정이나 생각을 자유롭게 작성
2. AI 분석: AIMO의 AI가 텍스트를 분석하여 감정 패턴과 심리 상태 파악
3. 심리 리포트 받기: 개인화된 심리 리포트와 감정 관리를 위한 맞춤형 제안 제공
#### 4.1.3 사용자 후기 섹션
- 제목: "사용자들의 이야기"
- 설명: "AIMO를 통해 자신의 감정을 더 잘 이해하게 된 사용자들의 경험을 들어보세요."
- 후기 카드 (3개):
1. 김지은 (27세, 디자이너): 번아웃 극복 경험
2. 이준호 (32세, 개발자): 직장 스트레스 관리 경험
3. 박소연 (24세, 대학생): 취업 준비 불안 극복 경험
#### 4.1.4 2차 CTA 섹션
- 헤드라인: "지금 바로 당신의 감정을 이해해보세요"
- 서브헤드라인: "AIMO와 함께 더 명확한 자기 이해의 여정을 시작하세요."
- CTA 버튼: "심리 리포트 받기 →"
### 4.2 푸터
- 브랜드 정보: AIMO 소개 및 가치 제안
- 서비스 링크: 심리 리포트, 감정 분석, 맞춤 가이드
- 회사 정보: 소개, 팀, 채용
- 법적 정보: 개인정보 처리방침, 이용약관
- 저작권 정보: "© 2025 AIMO. All rights reserved."
## 5. 디자인 사양
### 5.1 색상 팔레트
- 주요 브랜드 색상: 라벤더 (`#9370DB`)
- 배경 색상: 그라데이션 (`#fcf8f4` to
#f9f5ff), 흰색 (`#FFFFFF`)- 강조 색상: 라벤더 (`#f8e6ff`)
- 텍스트 색상: 검정 (기본), 회색 (보조 텍스트)
### 5.2 타이포그래피
- 헤드라인: 산세리프, 중간 굵기
- 본문: 산세리프, 일반 굵기
- 버튼 텍스트: 산세리프, 중간 굵기
### 5.3 UI 요소
- 버튼: 둥근 모서리, 라벤더 배경
- 카드: 흰색 배경, 미세한 그림자, 테두리 없음
- 아이콘: 라인 스타일, 미니멀한 디자인
### 5.4 반응형 디자인
- 모바일: 단일 컬럼 레이아웃
- 태블릿: 2열 그리드 레이아웃
- 데스크톱: 3열 그리드 레이아웃 (후기 섹션), 2열 그리드 (히어로 섹션)
## 6. 기술 요구사항
### 6.1 프론트엔드
- 프레임워크: Next.js (App Router)
- 스타일링: Tailwind CSS
- UI 컴포넌트: shadcn/ui
- 아이콘: Lucide React
### 6.2 성능 요구사항
- 모바일 최적화: 모든 화면에서 반응형 디자인
- 접근성: WCAG 2.1 AA 준수
- 로딩 속도: 초기 로드 2초 이내
### 6.3 향후 기능 확장 가능성
- 다크 모드: 사용자 선호도에 따른 다크 모드 지원
- 다국어 지원: 영어, 일본어 등 추가 언어 지원
- 사용자 계정: 리포트 히스토리 저장 및 추적 기능
- AI 모델 개선: 더 정확한 감정 분석을 위한 모델 업데이트
## 7. 구현 우선순위
1. 필수 구현 (MVP)
1. 랜딩 페이지 히어로 섹션
2. 서비스 작동 방식 설명
3. 기본 CTA 버튼 기능
4. 모바일 반응형 디자인
2. 2차 우선순위
1. 사용자 후기 섹션
2. 푸터 정보
3. 헤더 네비게이션
3. 향후 개발
1. FAQ 섹션
2. 다크 모드
3. 사용자 계정 시스템
4. 상세 서비스 페이지
위 prd를 가지고 다시 lovable한테 위 디자인은 유지하고, prd를 참고해서 다시 만들어달라고 했습니다.
결과와 배운 점
러버블이 디자인은 잘하는데, 메뉴 구성이나 페이지 내용들을 자기 맘대로 추가하는 경향이 있는 것 같아서, prd를 정확하게 명시하는게 중요한 것 같다고 느꼈습니다.
이후 주차들에서 상용 LLM api를 이용해서 리포트를 생성하고 supabase를 이용해서 내용을 저장해보려고 합니다.