Project ARA 🌏

K-컬처 기반 글로벌 한국어 학습 SNS 플랫폼

🔗 배포 링크

---

👤 박재현 담당 기능

📌 프로젝트 개요

항목	내용
기간	2025.09 ~
인원 / 역할	3인 · 팀장
포지션	기획 총괄 / 인증 시스템 / 실시간 채팅 / 어드민 패널

---

인증 시스템

• 이메일 / Google / Kakao 소셜 로그인 구현
• Supabase RLS 정책 설계 (읽기/쓰기 권한 분리)
• 사용자 역할(Admin/User) 기반 접근 제어 (RBAC)
• 커스텀 Auth Storage Adapter 구현
  • 로그인 유지 여부에 따라 localStorage / sessionStorage 동적 전환
  • 공용 PC 보안 문제 해결

실시간 DM 채팅

• Supabase Realtime 기반 1:1 채팅 구현
• useEffect cleanup 적용으로 구독 중복 문제 해결
• Optimistic UI 적용 (tempId → realId 교체 방식으로 중복 렌더링 방지)
• useMemo / useCallback으로 채팅 목록 불필요한 리렌더링 최적화
• 욕설 필터 block / mask 정책 분리 설계

어드민 패널

• 주간 활성 사용자(WAU) 실시간 대시보드 (Recharts + react-simple-maps)
• 학습 콘텐츠 CMS (YouTube API 연동, 단어장·문화노트 관리)
• 신고 처리 워크플로우 설계 및 구현

커뮤니티 UI

• 중첩 댓글 스레드 라인 (CSS ::before + calc() 기반 픽셀 단위 구현)
• 이미지 라이트박스 내비게이션
• 좋아요 · 북마크 Optimistic UI (Zustand)

기타

• i18n 다국어 지원 16개 언어 (i18next)
• 실시간 알림 카운트 동기화 (CustomEvent Dispatcher)
• 스크롤 위치 보존, 다국어 폰트 깨짐 등 UX 버그 전수 처리
• DB 정규화 및 인덱스 재설계

---

🔥 트러블슈팅

문제	원인	해결
실시간 구독 중복으로 메시지 2~3번 수신	useEffect cleanup 누락으로 채널 중복 구독	cleanup 명시 + 메시지 ID 기반 중복 제거
Optimistic UI 타이밍 충돌로 메시지 중복 렌더링	로컬 메시지와 서버 응답 메시지 동시 수신	tempId → realId 교체 방식으로 해결
RLS 정책 오류로 프로필 생성/조회 전체 차단	읽기/쓰기 정책 통합으로 auth.uid() 매칭 실패 시 전체 차단	읽기/쓰기 정책 분리 재설계
인증 상태 확정 이전에 라우트가 결정되던 문제	Supabase 세션 복원이 비동기인데 라우트 가드 즉시 실행	인증 상태를 loading / authenticated / unauthenticated 3단계로 분리

---

🛠 기술 스택

분류	기술
Frontend	React · TypeScript · Vite · Tailwind CSS
State	Zustand
Backend	Supabase (Auth / DB / Storage / Realtime)
기타	i18next · Recharts · Framer Motion · Vercel

---

📄 전체 프로젝트 문서 보기

ARA - K-컬처 기반 SNS형 한국어 학습 플랫폼

언어로 배우고 문화로 연결되는 경험

프로젝트 초기 기획, 문제 해결 등 전체 정리 노션 링크 - 박재현 프로젝트 초기 기획, 문제 해결 등 전체 정리 노션 링크 - 윤지언 프로젝트 초기 기획, 문제 해결 등 전체 정리 노션 링크 - 이수하

1. 개요

• ARA는 전 세계 사용자가 K-콘텐츠를 통해 자연스럽고 재미있게 한국어를 학습하고,
• SNS를 통해 서로의 문화를 교류하며 성장할 수 있는 플랫폼임
• 한국어(언어)를 단순한 학습의 대상이 아닌 문화와 사람을 연결하는 매개체로 바라보고
• 한국어를 배우는 동시에 한국을 비롯한 다양한 나라의 문화를 존중하고 이해하는

  **상호 문화 교류의 장(場)**을 만드는 것이 목표임

2. 기획 배경

• 언어 학습은 대부분 어렵고 지루하게 느껴짐
• 하지만 좋아하는 콘텐츠 속에서 누군가와 함께 그 언어를 나누고 사용한다면 배움은 훨씬 자연스러워짐
• 전 세계적으로 한류(K-콘텐츠)가 사랑받는 지금 많은 이들의 관심이 한국어에 집중됨
• 그런 흐름을 단순한 학습 트렌드로 보지 않고

  한국어를 통해 서로의 문화를 이해하고 존중과 공감을 나누는 문화 교류의 플랫폼으로 발전시키자

• 그것이 ARA의 시작이자 존재 이유임

3. 서비스 목표

1. K-콘텐츠를 활용한 흥미 중심의 학습 환경 구축
2. SNS 기반의 상호 소통 및 문화 교류 강화
3. 문화적 맥락이 담긴 살아있는 한국어 제공
4. 다양한 언어·문화가 공존하며 상호 존중하는 학습 생태계 조성

4. 경쟁 서비스 분석 및 차별점

• 요약 (상세 내용 참조 ☞ 초기 기획 - 경쟁 서비스 분석 및 차별점)

  항목	기존 서비스들	ARA
  학습 방식	문장 암기·퀴즈형 중심	K-콘텐츠 기반 몰입형 학습
  재미 요소	듀오링고만 강함	콘텐츠·SNS로 지속 동기 생성
  문화 이해	거의 없음	문화노트(Culture Note)
  실사용 환경	없음	피드/댓글에서 즉시 사용 가능
  글로벌 교류	HelloTalk만 부분 제공	SNS형 피드 기반 문화·언어 교류
  AI 활용	일부 번역/문장교정	학습 ↔ SNS 사용을 연결하는 AI
  학습 지속성	낮음	엔터테인먼트 기반으로 지속률 매우 높음
  사용자층	전 연령대(광범위)	10–30대 K-컬처 핵심 타깃

5. 주요 기능

기능 구분	설명
회원 관리	이메일 및 소셜 로그인(구글·카카오), 회원가입, 비밀번호 변경, 회원탈퇴, 자동 로그인(예정), 이메일/비밀번호 찾기(예정) 등
SNS 피드	게시글 작성, 댓글, 좋아요, 조회수, 알림, 무한 스크롤 등
K-콘텐츠 학습	유튜브 기반 영상 학습(K-컬처), 자막·단어 추출, 반복 학습 지원 등
문화노트 (Culture Note)	한국어 표현의 문화적 배경과 사회적 맥락을 짧은 노트 형태로 제공
프로필 페이지	사용자 정보 관리, 활동 기록
테마 시스템	사용자 취향 기반 UI 테마(다크/라이트) 지원
다국어 인터페이스	글로벌 사용자 접근성을 위한 UI 번역 기능 (진행 중)

6. 학습 경험 설계

단계	내용
1. 콘텐츠 기반 학습	K-콘텐츠 영상을 시청하며 실제 표현을 자연스럽게 익힘
2. 단어 연동 학습	자막에서 단어 추출 → 상세 단어 공부 → 복습
3. 문화노트 이해	표현의 문화적 이유와 사용 배경 학습
4. SNS 소통	배운 표현을 실제 피드나 채팅에서 활용하며 언어 활용 및 교류

7. 서비스 아키텍처

Frontend: React (Vite) + TypeScript
├── State Management: Context API + Custom Hooks
├── UI/UX: TailwindCSS + ShadCN + Framer Motion
└── i18n 다국어 지원 (예정)

Backend: Supabase
├── Auth: 이메일 및 OAuth (Google/Kakao)
├── Database: User, Chat, Comment, Vocabulary, CultureNote …
├── Storage: 이미지 및 미디어 파일 관리

Deployment:
├── Frontend: Vercel
└── Backend: Supabase Cloud

8. 팀 구성 및 담당 역할

이름	담당 파트	주요 역할
박재현 (팀장)	회원 관리 / 시스템 관리 / 테마	로그인, 회원가입, 회원탈퇴, 비밀번호 변경, 자동 로그인(예정), 이메일/비밀번호 찾기(예정), 통계(예정), SEO, DB 설계(협업) 및 Supabase 연동, 다크·라이트 테마 구축, 프로젝트 총괄 및 품질 관리
이수하	SNS / 프로필 / 랜딩 페이지	SNS 피드, 댓글, 좋아요, 알림 등 구현, 사용자 프로필 연동 및 피드 데이터 구조 설계, 서비스 랜딩 페이지 구성
윤지언	학습 페이지 / 번역 / 프로필	K-콘텐츠 학습 페이지 (Youtube), 다국어 인터페이스 구축(예정), 문화노트(문화적 배경 해설), 프로필

9. 프로젝트 일정

기간	단계	주요 내용
2025.09.01 ~ 09.05	기획	서비스 아이디어 검증, 문제 정의, 사용자 리서치, 핵심 기능 확정, 사용자 여정 설계
2025.09.06 ~ 09.09	UX·플로우 설계	IA 구조 정의, UX 플로우 차트 작성, 주요 화면 흐름 정리
2025.09.10 ~ 09.14	디자인	Figma 와이어프레임, 디자인 시스템 초안, 컴포넌트 구성
2025.09.15 ~ 09.17	환경 세팅	GitHub 세팅, 브랜치 전략 확정, Vite + React + Tailwind 코드 구조 설정, Supabase 기본 스키마 구축
2025.09.18 ~ 10.02	1차 개발	Auth·온보딩 / 게시판 / 학습 리스트 / 학습 플레이어 / 문화노트 / 프로필·설정 페이지 등 MVP 전 기능 병렬 개발
2025.10.03	중간 발표	핵심 구조 발표, UX 흐름 설명, MVP 데모, 피드백 수집
2025.10.04 ~ 11.05	2차 개발	홈피드 / 채팅 / 알림 / 테마 등 기능 구현, 반응형 최적화, 사용자 설정, 전체 UI 폴리싱, 사용자 경험 개선
2025.11.05 ~ 11.07	QA 1차	기능 오류 수정, DB RLS 체크, UX 개선, 예외 처리 적용
2025.11.07 ~ 11.09	QA 2차	채팅 최적화, 이미지/스토리지 점검, 디버깅
2025.11.10 ~ 11.12	최종 발표 준비	발표 시나리오, 화면 흐름, 데모 준비, 발표용 슬라이드 제작
2025.11.13	최종 발표	완성된 서비스 발표 및 데모 진행

10. 폴더 구조

src/
├── assets/
│   ├── close.svg
│   ├── placeholder.png
│   ├── react.svg
│   └── text-logo.svg
│
├── components/
│   ├── auth/
│   │   ├── consent/
│   │   │   ├── AgreeRow.tsx
│   │   │   ├── consentContent.tsx
│   │   │   ├── ConsentModal.tsx
│   │   │   └── useConsentDraft.ts
│   │   ├── BirthInput.tsx
│   │   ├── CountrySelect.tsx
│   │   ├── GenderSelect.tsx
│   │   ├── InputField.tsx
│   │   ├── SignUpStep1Consent.tsx
│   │   ├── SignUpStep2Form.tsx
│   │   ├── SignUpStep3Profile.tsx
│   │   ├── SignUpStepper.tsx
│   │   └── StepCard.tsx
│
│   ├── chat/
│   │   ├── common/
│   │   │   └── MessageInput.tsx
│   │   ├── direct/
│   │   │   ├── DirectChatList.tsx
│   │   │   └── DirectChatRoom.tsx
│   │   └── chat.module.css
│
│   ├── common/
│   │   ├── Avatar.tsx
│   │   ├── Buttons.tsx
│   │   ├── CheckboxSquare.tsx
│   │   ├── GuideModal.tsx
│   │   ├── Modal.tsx
│   │   ├── Pagination.tsx
│   │   ├── ScrollToTop.tsx
│   │   └── ShareButton.tsx
│
│   ├── profile/
│   │   ├── ProfileSettings.tsx
│   │   ├── SecuritySettings.tsx
│   │   ├── SettingsContent.tsx
│   │   ├── SettingsLayout.tsx
│   │   └── SettingsSidebar.tsx
│
│   ├── settings/
│   │   ├── CustomerCenterView.tsx
│   │   ├── MarketingConsentView.tsx
│   │   ├── PrivacyPolicyView.tsx
│   │   ├── TermsView.tsx
│   │   ├── PrivacySettings.tsx
│   │   ├── PasswordChange.tsx
│   │   ├── SystemSettings.tsx
│   │   ├── SupportPolicy.tsx
│   │   ├── SNSConnect.tsx
│   │   ├── LanguageSelect.tsx
│   │   ├── AlarmSettings.tsx
│   │   └── ThemeSelect.tsx
│
│   ├── sidebar/
│   │   ├── FollowItem.tsx
│   │   ├── SearchBar.tsx
│   │   └── TrendItem.tsx
│
│   ├── study/
│   │   ├── CategoryTabs.tsx
│   │   ├── ContentCard.tsx
│   │   ├── FilterDropdown.tsx
│   │   ├── StudyCard.tsx
│   │   ├── StudyCultureNote.tsx
│   │   ├── StudyGrammar.jsx
│   │   ├── StudyListDetail.jsx
│   │   ├── StudyNote.jsx
│   │   ├── StudySubtitles.tsx
│   │   ├── StudyVoca.tsx
│   │   └── VideoPlayer.tsx
│
│   └── ui/
│       ├── alert-dialog.tsx
│       ├── avatar.tsx
│       ├── badge.tsx
│       ├── breadcrumb.tsx
│       ├── button.tsx
│       ├── card.tsx
│       ├── collapsible.tsx
│       ├── dialog.tsx
│       ├── dropdown-menu.tsx
│       ├── input.tsx
│       ├── SearchBar.tsx
│       ├── separator.tsx
│       ├── sheet.tsx
│       ├── sidebar.tsx
│       ├── skeleton.tsx
│       ├── sonner.tsx
│       ├── tooltip.tsx
│       ├── app-sidebar.tsx
│       ├── WordCard.jsx
│       ├── Input.module.css
│       ├── Layout.module.css
│       └── Modal.module.css
│
├── contexts/
│   ├── AuthContext.tsx
│   ├── DirectChatContext.tsx
│   ├── NewChatNotificationContext.tsx
│   ├── StudyContext.jsx
│   └── ThemeContext.jsx
│
├── data/
│   └── mockTweet.ts
│
├── guards/
│   ├── profanity/
│   │   └── profanity-guard.ts
│   └── OnboardingWall.tsx
│
├── hooks/
│   ├── use-mobile.tsx
│   ├── useAuth.js
│   ├── useFollow.ts
│   ├── useLike.ts
│   ├── useRetweet.ts
│   ├── useSignupKind.ts
│   ├── useSignupStepper.ts
│   └── useStudy.js
│
├── lib/
│   ├── chatOpenCreate.ts
│   ├── ensureMyProfileId.ts
│   ├── profile.ts
│   ├── supabase.ts
│   └── utils.ts
│
├── pages/
│   ├── chat/
│   │   └── DirectChatPage.tsx
│   │
│   ├── homes/
│   │   ├── editor/
│   │   │   └── RichTextEditor.tsx
│   │   ├── feature/
│   │   │   ├── ComposeBox.tsx
│   │   │   ├── NotificationCard.tsx
│   │   │   ├── ReplyModal.tsx
│   │   │   ├── Sidebar.tsx
│   │   │   ├── TrendsPanel.tsx
│   │   │   ├── TweetCard.tsx
│   │   │   └── TweetModal.tsx
│   │   ├── mocks/
│   │   │   ├── notifications.ts
│   │   │   ├── replies.ts
│   │   │   ├── tweets.ts
│   │   │   └── userTweets.ts
│   │   ├── notifications/
│   │   │   └── HNotificationsPage.tsx
│   │   ├── profile/
│   │   │   ├── components/
│   │   │   │   ├── EditProfileModal.tsx
│   │   │   │   ├── ProfileHeader.tsx
│   │   │   │   ├── ProfileTabs.tsx
│   │   │   │   └── ProfileTweets.tsx
│   │   │   └── ProfileAsap.tsx
│   │   ├── tweet/
│   │   │   ├── components/
│   │   │   │   ├── ReplyComposer.tsx
│   │   │   │   ├── ReplyList.tsx
│   │   │   │   ├── TweetDetailCard.tsx
│   │   │   │   └── TweetDetail.tsx
│   │   │   ├── Home.tsx
│   │   │   └── HomesTest.tsx
│   │   ├── HomePage.tsx
│   │   └── TempHomePage.tsx
│
│   ├── settings/
│   │   ├── AlarmSettings.tsx
│   │   ├── CustomerCenterView.tsx
│   │   ├── LanguageSelect.tsx
│   │   ├── MarketingConsentView.tsx
│   │   ├── PasswordChange.tsx
│   │   ├── PrivacyPolicyView.tsx
│   │   ├── PrivacySettings.tsx
│   │   ├── SNSConnect.tsx
│   │   ├── SupportPolicy.tsx
│   │   ├── SystemSettings.tsx
│   │   ├── TermsView.tsx
│   │   └── ThemeSelect.tsx
│
│   ├── SignInPage.tsx
│   ├── SignUpPage.tsx
│   ├── SignUpWizard.tsx
│   ├── StudyListPage.tsx
│   ├── StudyPage.tsx
│   ├── MyProfile.tsx
│   ├── LandingPage.tsx
│   ├── AuthCallback.tsx
│   └── NotFoundPage.tsx
│
├── routes/
│   └── guards/
│       └── OnboardingWall.tsx
│
├── services/
│   ├── chat/
│   │   └── directChatService.ts
│   ├── authService.ts
│   └── consentService.ts
│
├── styles/
│   ├── globals.css
│   └── rich-text-editor.css
│
├── types/
│   ├── ChatType.ts
│   ├── consent.ts
│   ├── database.ts
│   ├── leo-profanity.d.ts
│   ├── settings.ts
│   ├── signup.ts
│   ├── study.ts
│   └── supabase-augment.d.ts
│
├── utils/
│   ├── getTitle.ts
│   ├── image.ts
│   ├── motion.ts
│   ├── safety.ts
│   └── storage.ts
│
├── App.tsx
├── App.css
├── index.css
├── main.tsx
└── vite-env.d.ts

11. 기술 스택

분류	사용 기술
Frontend	React, TypeScript, Vite
UI/UX	TailwindCSS, ShadCN UI, Framer Motion
Backend	Supabase (Auth, DB, Storage, RLS)
State Management	Context API, Custom Hooks
Collaboration	GitHub, Notion, Slack, Figma, Canva
Deployment	Vercel, Supabase Cloud (Backend)
Analytics / Monitoring	Google Analytics 4 (GA4), Vercel Analytics, Supabase Logs

12. 협업 도구 (링크)

도구	사용 목적
GitHub	코드 버전 관리 및 브랜치 전략 운영
Notion	일정 관리 및 기획 문서화
Slack	팀 커뮤니케이션 및 실시간 피드백
**Figma / Canva**	디자인 시안, 와이어 프레임, 발표 자료 제작

13. 프로젝트 진행 방향

• 병렬 개발 → 통합 구조
  • 기능별 분리 개발 후 공통 UI·라우팅·상태 관리 통합
• UI/UX 통일화
  • 버튼·카드·모달 등 공통 컴포넌트 표준화
  • 반응형 디자인 및 다크/라이트 테마 적용
• 개선 및 고도화
• 배포 및 UX 피드백 반영
• 성능 및 접근성(Lighthouse) 개선
• 추가 기능 및 AI 학습 모듈 확장 예정

14. 향후 확장 계획

• AI 문장 첨삭 및 발음 교정 기능
• 한국 관련 굿즈 판매
• 학습 기록 기반 개인화 추천 시스템(알고리즘)
• 글로벌 사용자 대상 다국어 SNS 강화
• K-컬처·사투리·취업 한국어 등 심화 학습 모듈 확장
• AI 기반 챗봇 학습 어시스턴트 도입

15. 프로젝트 일정 및 버전 관리

버전	기간	주요 변경 사항
v0.1 (초기 설계)	2025.09.01 ~ 2025.09.09	기획/문제 정의, 사용자 여정, IA, UX 플로우, Figma 와이어프레임 초안
v0.5 (개발 환경 구축)	2025.09.15	Git 환경 세팅, Vite 구조, Tailwind/Shadcn 설정, Supabase 스키마 1차 구축
v1.0 (MVP 베타)	2025.10.03 (중간 발표)	로그인/온보딩, 게시판, 학습 콘텐츠 리스트, 플레이어 기본, 프로필, 기본 UI 완성
v1.1 (정식 MVP)	2025.11.11 (배포)	문화노트 상세, 홈피드, UI 반응형, 피드 흐름 통합, 최소 버그 픽스 후 서비스 배포
v1.2 (최종 발표 안정화)	2025.11.13	발표 기준 완성 버전: 오류 수정, UX 개선, 발표용 기능 시연 준비, 가벼운 성능 최적화
v2.0 (확장 버전)	2025.12 ~ 예정	번역, AI 문장 첨삭, AI 번역 고도화, 콘텐츠 기반 추천 시스템, 복습(Spaced Repetition) 시스템 추가
v3.0 (글로벌 확장판)	2026.예정	글로벌 사용자 분석 기반 다국어 강화, AI 발음 교정, 언어 교류 커뮤니티, 실시간 챗봇 튜터 도입

16. 프로젝트 관리

항목	예시 / 작성 필요
프로젝트 기간	2025.09.01 ~ 2025.11.13
참여 인원	박재현, 이수하, 윤지언
ERD	ERD 다이어그램
노션 링크
API 명세서	핵심 기능별 API 명세서
발표 자료 및 영상	아이디어 발표 자료 / 중간 발표 자료 / 최종 발표 자료
협업 툴 링크	**GitHub / Notion / Slack / Figma**

17. 마무리

• ARA는 단순히 한국어를 가르치는 서비스가 아님.
• 한국어와 한국 문화의 따뜻함과 아름다움, 그리고 그 속에 담긴 정(情)과 사람을 향한 마음을 전하고
• 동시에 다른 문화의 다양성과 가치를 존중하는 교류의 장을 만들고자 함
• ARA가 지향하는 진짜 목표는

“언어는 배우는 것이 아니라, 함께 살아가는 것이다. 문화는 이해하는 것이 아니라, 함께 느끼는 것이다.”

© 2025 Team ARA. All rights reserved. Made with sincerity in Daegu, Korea — and with respect for every culture.