Figma Style Guide - v0 by Vercel

🧩 PROJECT SPECIFICATION INPUT (For Rapid LLM Build Plan Generation)

Project Definition

projectName: HeartMatch (마음 공유 익명 매칭 SNS)

projectObjective: 익명 기반 마음 기록과 감정 기반 유저 추천 및 대화를 통해, 혼자만의 생각을 털어놓고 싶은 내향적인 사람들의 심리적 연결과 회복을 돕는 글로벌 감정 공유 플랫폼 개발

targetMVPFeatures:

익명 감정 메모 작성 및 개인 피드

‘사람 찾기’ 버튼 클릭 시 유사 감정 기반 유저 추천

채팅 기능 (1:1 익명 채팅)

라운지(공개 피드) 기능: 전체 공개 글 업로드

종이질감 UI + 텍스트 중심 (이미지 업로드 없음)

targetUserScope:

18~35세 내향적 성향의 글로벌 사용자 (특히 정신적 고립감 호소자)

공유욕구는 있으나 SNS 피로감이 있는 유저

Tech Stack Choices

framework: Next.js (Web), React Native (Mobile App)

database: PostgreSQL

orm: Prisma

uiLibrary: Tailwind CSS (Web), NativeBase (Mobile)

packageManager: pnpm

Core Data Models (MVP Scope Only)

User

fields: id (UUID), nickname (nullable), isAnonymous (boolean), deviceId, createdAt

relations: hasMany Memo, hasMany ChatMessage

Memo

fields: id, content (text), createdAt, isPublic (boolean), emotionEmbedding (float[]), language, isMatched (boolean)

relations: belongsTo User

MatchCandidate

fields: id, sourceMemoId, targetMemoId, score, createdAt

relations: belongsTo Memo (sourceMemo), belongsTo Memo (targetMemo)

ChatRoom

fields: id, createdAt

relations: hasMany ChatMessage, hasTwo Users

ChatMessage

fields: id, content, sentAt, senderId, roomId

relations: belongsTo ChatRoom, belongsTo User (sender)

Core API Endpoints (MVP Scope Only)

endpointAction: Create Memo

frameworkSpecifics:

REST:

httpMethod: POST

path: /api/memos

requestBody: { content: string, isPublic: boolean }

responseBody: { id: string, createdAt: string }

endpointAction: Get Personal Feed

REST:

httpMethod: GET

path: /api/memos/my

responseBody: Memo[]

endpointAction: Request Match (유사 감정 기반 사용자 추천)

REST:

httpMethod: POST

path: /api/match

requestBody: { memoId: string }

responseBody: { candidates: { userId: string, score: number }[] }

endpointAction: Send Message

REST:

httpMethod: POST

path: /api/chat/message

requestBody: { roomId: string, content: string }

responseBody: { messageId: string, sentAt: string }

endpointAction: Get Lounge Posts

REST:

httpMethod: GET

path: /api/lounge

responseBody: Memo[]

Main UI View (MVP)

viewDescription: 사용자는 앱에 접속하면 바로 텍스트 메모를 작성할 수 있으며, 내 피드에 저장됩니다. 이후 '사람 찾기' 버튼을 누르면 유사한 감정을 가진 사용자 추천을 받아 채팅을 시작할 수 있습니다. 라운지 탭에서는 익명 공개 메모들을 열람 및 작성할 수 있습니다.

requiredUIComponents:

메모 작성 박스 (placeholder: "지금 이 순간의 마음을 써보세요")

개인 피드 리스트 (날짜별 정렬)

‘사람 찾기’ 버튼 (memo 단위 매칭 요청)

추천된 유저 리스트 (닉네임 없음)

채팅 UI (1:1, 말풍선 스타일)

라운지 탭: 공개 메모 리스트 & 작성하기 버튼

테마 전환 버튼 (다크모드/화이트모드)

종이 질감 UI 및 귀여운 폰트 (예: Pretendard or 나눔손글씨)

Essential Libraries (Beyond Stack Defaults):

socket.io – 실시간 채팅용

@emotion/react – 감정 임베딩 계산 (LLM 기반 API 연동 예정)

zustand – 전역 상태 관리

react-native-paper – 채팅 UI 컴포넌트

dayjs – 시간 포맷

uuid – 고유 ID 생성

openai or gemini – 감정 임베딩 추출용 API 연동 (서버에서 사용)

필요하시면 서버 구조, 감정 분석 방식, LLM 연동 방식, Figma 스타일 가이드도 추가로 정리해드릴게요. 추가로 영어/일본어/프랑스어 등 해외 버전 다국어 지원이 필요하시다면 i18n 설정도 포함해드릴 수 있습니다.

명령만 내려주세요, 주인님.

나의 말:

, Figma 스타일 가이드

ChatGPT의 말:

알겠습니다, 주인님. 아래는 HeartMatch (마음 공유 익명 매칭 SNS) 프로젝트의 MVP 개발을 위한 Figma 스타일 가이드입니다. 감성적이고 내향적인 유저 타겟에 맞추어 종이 질감 기반의 미니멀한 UI를 제안드리며, 폰트, 컬러, 컴포넌트 구성 모두 실제 구현 가능성을 염두에 두고 설계하였습니다.

🎨 FIGMA STYLE GUIDE — HeartMatch

Brand Identity

App Theme: 감정 기록 + 내향적 감성 + 아날로그 감성 (디지털 감성 일기장 느낌)

키워드: 종이질감, 펜으로 쓴 듯한 글씨, 부드러운 색상, 텍스트 중심 UI

Avoid: 사진, 이모티콘, 유튜브 영상, 강한 네온컬러, 지나치게 둥글거나 플랫한 스타일

Typography

PurposeFont FamilySizeWeightStyleApp Title나눔손글씨 손편지체24pxbold수기 느낌 강조Section TitlePretendard18pxsemipaper header 느낌BodyPretendard14pxregular기본 메모 영역Chat Bubble나눔손글씨 중학생체15pxregular대화 느낌 강화Placeholder TextSpoqa Han Sans Neo13pxlight흐릿하게

✅ Web/앱 폰트 모두 Pretendard 우선 적용 후, fallback: system-ui, sans-serif

Color Palette

NameColor CodeUsageIvory Paper#FDFCF7배경색 (종이 느낌)Faded Brown#8E735B글씨 색상 (펜 느낌)Dusty Pink#F0D6D3포커스 색상 (버튼/채팅 강조)Cool Gray#C6C6C6구분선, placeholderMidnight Navy#30323D다크모드 배경색 (선택사항)Soft Sky Blue#D8EFFF익명 사용자 프로필 기본 컬러

📌 All colors are soft, low saturation tones

Layout & Spacing

기본 마진/패딩: 16px

메모 입력 영역 높이: min 120px ~ auto

채팅 말풍선 간격: 8px

라운지 글 카드: padding 16px, borderRadius: 12px, boxShadow: 0 1px 4px rgba(0,0,0,0.05)

컴포넌트 간 vertical spacing: 12px

Components

📄 MemoBox

종이 텍스처 배경

상단 날짜 / 하단 [사람 찾기] 버튼

placeholder: "무엇이든 적어보세요, 당신만 볼 수 있어요"

🫶 MatchResultCard

유저 ID 비공개

유사도 % 표시 (ex. “89% 유사한 마음을 가진 사람”)

[익명 대화 시작하기] 버튼

💬 ChatBubble

좌측: 상대방 (아이보리 + 회색 테두리)

우측: 내 메시지 (페일핑크 + 갈색 텍스트)

말풍선 꼬리 있음 (심플 삼각형)

🌿 LoungePostCard

공개글 리스트 뷰

연한 음영 카드

“좋아요” 없음, 댓글 기능 없음 (텍스트만 공유)

Interaction

버튼 스타일: 마치 종이에 도장 찍은 느낌, 톤다운된 컬러에 테두리

Hover/Press: 그림자 강조 또는 종이에 눌린 효과 (1px 내려감)

입력시 효과: 펜으로 글씨 쓰는 듯한 애니메이션 미묘하게 적용 가능

Assets & Texture

종이 배경: 크림 계열 텍스처 PNG (반복 패턴 없음)

커서: 글쓰기 때는 펜 모양 커서 가능 (웹에서)

아이콘: 모두 라인 아이콘 (feather, lucide 등)

필요하시면:

Figma 컴포넌트 라이브러리 직접 생성

프로토타입 흐름 구성 (로그인 → 메모 작성 → 매칭 → 채팅 → 라운지)

모바일/웹 해상도 프레임 구성

도와드릴 준비 되어 있습니다. 명령만 내려주시죠, 주인님.

나의 말:

위에 프로젝트 명세서 프론트 기준으로도 적어줄래

ChatGPT의 말:

물론입니다, 주인님. 위 명세서를 프론트엔드 구현 중심 관점에서 다시 정리해드리겠습니다. 실제 React / React Native 기반으로 화면 설계 및 컴포넌트 구조를 구현할 수 있도록 UI 흐름, 파일 구조, 상태 관리, 컴포넌트 분리를 모두 포함하였습니다.

🧩 FRONTEND-CENTERED SPECIFICATION — HeartMatch (마음 공유 익명 매칭 SNS)

UI Screen Structure (MVP)

cpp

복사편집

src/ ├── screens/ │ ├── MemoScreen.tsx // 메모 작성 및 내 피드 │ ├── MatchResultScreen.tsx // 유사 사용자 추천 화면 │ ├── ChatRoomScreen.tsx // 채팅방 (1:1) │ ├── LoungeScreen.tsx // 공개 글 목록 │ └── LoungePostScreen.tsx // 공개 글 작성 ├── components/ │ ├── MemoCard.tsx │ ├── MatchUserCard.tsx │ ├── ChatBubble.tsx │ ├── LoungeCard.tsx │ └── PaperTextInput.tsx ├── context/ │ ├── AuthContext.tsx │ ├── MemoContext.tsx │ └── ChatContext.tsx ├── navigation/ │ └── AppNavigator.tsx ├── styles/ │ └── theme.ts // 색상, 폰트, 종이 질감 등 └── utils/ └── emotionEmbedding.ts // 감정 벡터 처리

Screen Flow
MemoScreen

최초 진입 화면

기능: 메모 작성 / 리스트 / ‘사람 찾기’ 버튼

상태 관리: 로컬 상태 + MemoContext (작성 내용, 선택 메모)

MatchResultScreen

유사 감정 기반 추천 결과 표시

API로 받은 유저 리스트 + 점수 기반 정렬

클릭 시 ChatRoomScreen 진입

ChatRoomScreen

익명 채팅방, WebSocket 연결

메시지 리스트 + 입력창

FlatList + 자동 스크롤 + 상대방은 회색 말풍선

LoungeScreen

공개 메모 목록

카드 형태로 정렬된 공개글 (최근순)

LoungePostScreen

글 작성 전용 입력창

공개 설정 + 전송

Component Design

Component Name역할 설명MemoCard내 피드 메모 카드. 날짜, 내용, 버튼 포함MatchUserCard추천된 익명 유저 카드. 유사도 %, 채팅 버튼 포함ChatBubble좌/우 정렬된 채팅 말풍선 컴포넌트LoungeCard공개 메모 카드. 작성 시각 + 내용PaperTextInput종이 텍스처가 있는 입력창. placeholder 텍스트 스타일 포함

Navigation 구조 (React Navigation 기준)

복사편집

const AppNavigator = createNativeStackNavigator(); <AppNavigator.Navigator initialRouteName="Memo"> <AppNavigator.Screen name="Memo" component={MemoScreen} /> <AppNavigator.Screen name="MatchResult" component={MatchResultScreen} /> <AppNavigator.Screen name="ChatRoom" component={ChatRoomScreen} /> <AppNavigator.Screen name="Lounge" component={LoungeScreen} /> <AppNavigator.Screen name="LoungePost" component={LoungePostScreen} /> </AppNavigator.Navigator>

State Management (Zustand 또는 Context API)

MemoContext.tsx

currentMemo

memoList

fetchMyMemos()

createMemo(content)

ChatContext.tsx

socket 연결

현재 roomId

메시지 리스트

sendMessage(message)

API Integration Layer (예시)

복사편집

// src/api/memo.ts export const fetchMyMemos = () => axios.get('/api/memos/my'); export const createMemo = (content: string, isPublic = false) => axios.post('/api/memos', { content, isPublic }); export const requestMatch = (memoId: string) => axios.post('/api/match', { memoId });

Styling Guide (Tailwind + Custom Theme)

복사편집

export const theme = { colors: { background: '#FDFCF7', // paper primary: '#8E735B', // faded brown secondary: '#F0D6D3', // soft pink gray: '#C6C6C6', }, fontFamily: { title: 'NanumPen', body: 'Pretendard', }, spacing: { padding: 16, margin: 12, }, };

기타 구현 사항

✅ 다크모드: 배경 #30323D, 글자색 #EDEDED 변환

✅ 감정 분석 임베딩 API 요청은 서버에서 처리

✅ 모든 글에는 language 값 포함 (다국어 대응 고려)

✅ 채팅/매칭 시 실시간 알림은 socket.io-client 사용

🧩 PROJECT SPECIFICATION INPUT (For Rapid LLM Build Plan Generation)

Project Definition

projectName: HeartMatch (마음 공유 익명 매칭 SNS)

targetMVPFeatures:

익명 감정 메모 작성 및 개인 피드

‘사람 찾기’ 버튼 클릭 시 유사 감정 기반 유저 추천

채팅 기능 (1:1 익명 채팅)

라운지(공개 피드) 기능: 전체 공개 글 업로드

종이질감 UI + 텍스트 중심 (이미지 업로드 없음)

targetUserScope:

18~35세 내향적 성향의 글로벌 사용자 (특히 정신적 고립감 호소자)

공유욕구는 있으나 SNS 피로감이 있는 유저

Tech Stack Choices

framework: Next.js (Web), React Native (Mobile App)

database: PostgreSQL

orm: Prisma

uiLibrary: Tailwind CSS (Web), NativeBase (Mobile)

packageManager: pnpm

Core Data Models (MVP Scope Only)

User

fields: id (UUID), nickname (nullable), isAnonymous (boolean), deviceId, createdAt

relations: hasMany Memo, hasMany ChatMessage

Memo

fields: id, content (text), createdAt, isPublic (boolean), emotionEmbedding (float[]), language, isMatched (boolean)

relations: belongsTo User

MatchCandidate

fields: id, sourceMemoId, targetMemoId, score, createdAt

relations: belongsTo Memo (sourceMemo), belongsTo Memo (targetMemo)

ChatRoom

fields: id, createdAt

relations: hasMany ChatMessage, hasTwo Users

ChatMessage

fields: id, content, sentAt, senderId, roomId

relations: belongsTo ChatRoom, belongsTo User (sender)

Core API Endpoints (MVP Scope Only)

endpointAction: Create Memo

frameworkSpecifics:

REST:

httpMethod: POST

path: /api/memos

requestBody: { content: string, isPublic: boolean }

responseBody: { id: string, createdAt: string }

endpointAction: Get Personal Feed

REST:

httpMethod: GET

path: /api/memos/my

responseBody: Memo[]

endpointAction: Request Match (유사 감정 기반 사용자 추천)

REST:

httpMethod: POST

path: /api/match

requestBody: { memoId: string }

responseBody: { candidates: { userId: string, score: number }[] }

endpointAction: Send Message

REST:

httpMethod: POST

path: /api/chat/message

requestBody: { roomId: string, content: string }

responseBody: { messageId: string, sentAt: string }

endpointAction: Get Lounge Posts

REST:

httpMethod: GET

path: /api/lounge

responseBody: Memo[]

Main UI View (MVP)

requiredUIComponents:

메모 작성 박스 (placeholder: "지금 이 순간의 마음을 써보세요")

개인 피드 리스트 (날짜별 정렬)

‘사람 찾기’ 버튼 (memo 단위 매칭 요청)

추천된 유저 리스트 (닉네임 없음)

채팅 UI (1:1, 말풍선 스타일)

라운지 탭: 공개 메모 리스트 & 작성하기 버튼

테마 전환 버튼 (다크모드/화이트모드)

종이 질감 UI 및 귀여운 폰트 (예: Pretendard or 나눔손글씨)

Essential Libraries (Beyond Stack Defaults):

socket.io – 실시간 채팅용

@emotion/react – 감정 임베딩 계산 (LLM 기반 API 연동 예정)

zustand – 전역 상태 관리

react-native-paper – 채팅 UI 컴포넌트

dayjs – 시간 포맷

uuid – 고유 ID 생성

openai or gemini – 감정 임베딩 추출용 API 연동 (서버에서 사용)

명령만 내려주세요, 주인님.

나의 말:

, Figma 스타일 가이드

ChatGPT의 말:

🎨 FIGMA STYLE GUIDE — HeartMatch

Brand Identity

App Theme: 감정 기록 + 내향적 감성 + 아날로그 감성 (디지털 감성 일기장 느낌)

키워드: 종이질감, 펜으로 쓴 듯한 글씨, 부드러운 색상, 텍스트 중심 UI

Avoid: 사진, 이모티콘, 유튜브 영상, 강한 네온컬러, 지나치게 둥글거나 플랫한 스타일

Typography

✅ Web/앱 폰트 모두 Pretendard 우선 적용 후, fallback: system-ui, sans-serif

Color Palette

📌 All colors are soft, low saturation tones

Layout & Spacing

기본 마진/패딩: 16px

메모 입력 영역 높이: min 120px ~ auto

채팅 말풍선 간격: 8px

라운지 글 카드: padding 16px, borderRadius: 12px, boxShadow: 0 1px 4px rgba(0,0,0,0.05)

컴포넌트 간 vertical spacing: 12px

Components

📄 MemoBox

종이 텍스처 배경

상단 날짜 / 하단 [사람 찾기] 버튼

placeholder: "무엇이든 적어보세요, 당신만 볼 수 있어요"

🫶 MatchResultCard

유저 ID 비공개

유사도 % 표시 (ex. “89% 유사한 마음을 가진 사람”)

[익명 대화 시작하기] 버튼

💬 ChatBubble

좌측: 상대방 (아이보리 + 회색 테두리)

우측: 내 메시지 (페일핑크 + 갈색 텍스트)

말풍선 꼬리 있음 (심플 삼각형)

🌿 LoungePostCard

공개글 리스트 뷰

연한 음영 카드

“좋아요” 없음, 댓글 기능 없음 (텍스트만 공유)

Interaction

버튼 스타일: 마치 종이에 도장 찍은 느낌, 톤다운된 컬러에 테두리

Hover/Press: 그림자 강조 또는 종이에 눌린 효과 (1px 내려감)

입력시 효과: 펜으로 글씨 쓰는 듯한 애니메이션 미묘하게 적용 가능

Assets & Texture

종이 배경: 크림 계열 텍스처 PNG (반복 패턴 없음)

커서: 글쓰기 때는 펜 모양 커서 가능 (웹에서)

아이콘: 모두 라인 아이콘 (feather, lucide 등)

필요하시면:

Figma 컴포넌트 라이브러리 직접 생성

프로토타입 흐름 구성 (로그인 → 메모 작성 → 매칭 → 채팅 → 라운지)

모바일/웹 해상도 프레임 구성

도와드릴 준비 되어 있습니다. 명령만 내려주시죠, 주인님.

나의 말:

위에 프로젝트 명세서 프론트 기준으로도 적어줄래

ChatGPT의 말:

🧩 FRONTEND-CENTERED SPECIFICATION — HeartMatch (마음 공유 익명 매칭 SNS)

UI Screen Structure (MVP)

cpp

복사편집

Screen Flow
MemoScreen

최초 진입 화면

기능: 메모 작성 / 리스트 / ‘사람 찾기’ 버튼

상태 관리: 로컬 상태 + MemoContext (작성 내용, 선택 메모)

MatchResultScreen

유사 감정 기반 추천 결과 표시

API로 받은 유저 리스트 + 점수 기반 정렬

클릭 시 ChatRoomScreen 진입

ChatRoomScreen

익명 채팅방, WebSocket 연결

메시지 리스트 + 입력창

FlatList + 자동 스크롤 + 상대방은 회색 말풍선

LoungeScreen

공개 메모 목록

카드 형태로 정렬된 공개글 (최근순)

LoungePostScreen

글 작성 전용 입력창

공개 설정 + 전송

Component Design

Navigation 구조 (React Navigation 기준)

복사편집

State Management (Zustand 또는 Context API)

MemoContext.tsx

currentMemo

memoList

fetchMyMemos()

createMemo(content)

ChatContext.tsx

socket 연결

현재 roomId

메시지 리스트

sendMessage(message)

API Integration Layer (예시)

복사편집

Styling Guide (Tailwind + Custom Theme)

복사편집

기타 구현 사항

✅ 다크모드: 배경 #30323D, 글자색 #EDEDED 변환

✅ 감정 분석 임베딩 API 요청은 서버에서 처리

✅ 모든 글에는 language 값 포함 (다국어 대응 고려)

✅ 채팅/매칭 시 실시간 알림은 socket.io-client 사용