memiDevmemiDev

NUXT를 위한 게시판, MEMI-BOARD

대화는 실시간으로. 가능성은 세계로.

글을 저장하는 공간에서, 이야기가 이어지는 커뮤니티로. 10개 언어의 UI와 콘텐츠 번역, 실시간 리스닝을 하나의 Nuxt 게시판에 담았습니다.

실제 게시판 둘러보기GitHub에서 살펴보기

Nuxt 4 + Vue 3 + Firebase

memi-board / community

자동 재생 데모 · 예시 데이터

memi

Community / Hello world

원문 · 한국어

안녕하세요, 새로운 커뮤니티!

함께 나누는 이야기가 더 넓은 세상으로 이어집니다.

Hello, new community!

The stories we share connect us to a wider world.

こんにちは、新しいコミュニティ！

一緒に語る物語が、もっと広い世界につながります。

你好，新社区！

我们分享的故事，让彼此连接更广阔的世界。

댓글 1댓글 쓰기

  • Alex번역됨 · English

    언어가 달라도 함께 이야기할 수 있네요.

    Different languages, one conversation.

    言語が違っても、一緒に話せますね。

    语言不同，也能一起聊天。

  • Yuki번역됨 · 日本語

    번역 덕분에 부담 없이 참여할 수 있어요!

    Thanks to translation, joining in feels easy!

    翻訳のおかげで気軽に参加できます！

    多亏了翻译，参与起来很轻松！

  • Wei번역됨 · 中文

    저도 이 커뮤니티에 함께하고 싶어요.

    I’d love to join this community too.

    私もこのコミュニティに参加したいです。

    我也想加入这个社区。

한국어로 쓴 글과 여러 언어로 달린 댓글이, 읽는 사람의 언어로 바뀌는 모습을 재현한 예시입니다. 언어를 누르면 멈춥니다.

10개 언어
메뉴부터 콘텐츠까지
실시간 리스닝
변화를 화면에 바로
Nuxt 모듈
기존 서비스 안으로

01 / OPEN TO EVERYONE

누구나 사용할 수 있게, 활짝 열어 두었습니다.

만드는 사람도, 참여하는 사람도 막힘없이 시작할 수 있도록 만들었습니다. 소스는 공개되어 있고, 설치는 간단하며, 처음 방문한 사람도 바로 대화에 들어올 수 있습니다.

  1. 01패키지 설치

    pnpm add memi-board @nuxt/ui nuxt-vuefire vuefire firebase

  2. 02모듈 등록nuxt.config.ts

    modules: ['@nuxt/ui', 'nuxt-vuefire', 'memi-board']

  3. 03게시판 배치pages/board/index.vue

    <MemiBoardList board-id="free" />

이미 운영 중인 Nuxt 서비스에도 같은 방식으로 붙일 수 있습니다.

MIT 라이선스 오픈소스

소스 코드를 GitHub에 공개합니다. 개인 프로젝트부터 상업 서비스까지 누구나 무료로 사용하고, 고치고, 배포할 수 있습니다.

별도 서버 없이

권한은 Firebase 보안 규칙에서, 콘텐츠 검사는 브라우저에서 처리합니다. 백엔드 서버나 Firebase Admin 없이 Nuxt 앱과 Firebase만으로 동작합니다.

패키지 하나로 설치

npm에서 설치하고 nuxt.config에 모듈을 추가하면, 게시판 컴포넌트를 페이지에 바로 배치할 수 있습니다.

참여하는 사람에게도

새 비밀번호 없이 Google·Apple 계정으로 시작합니다. 10개 언어, 아랍어처럼 오른쪽에서 왼쪽으로 쓰는 언어의 화면까지 지원합니다.

02 / INTERNATIONALIZATION

언어가 달라도, 같은 커뮤니티.

버튼만 번역하는 것으로 끝나지 않습니다. 게시판 이름과 설명, 글의 제목·요약·본문까지 다국어 경험을 연결합니다.

한국어English日本語DeutschFrançaisEspañolPortuguês中文العربيةIndonesia

  1. UI도 익숙한 언어로

    메뉴·버튼·안내·날짜를 지원 언어에 맞춰 표시합니다. 사이트의 언어 선택과 연결하거나 게시판마다 언어를 고정할 수 있습니다.

  2. 콘텐츠도 읽을 수 있도록

    AI로 번역한 제목·요약·본문을 저장해 다른 언어에서도 읽을 수 있습니다. 원문이 바뀌면 오래된 번역 대신 원문을 표시합니다.

  3. 필요한 만큼만 선택

    단일 언어, 다국어 UI만, UI와 콘텐츠 번역까지. 서비스에 맞게 각각 설정할 수 있습니다.

콘텐츠 번역에는 Firebase AI Logic 연결이 필요합니다. 새 글 자동 번역은 게시판별 선택 사항이며 기본값은 꺼짐입니다. 지원 언어 10개에는 원문 언어가 포함됩니다.

03 / REALTIME LISTENING

새로고침하는 사이, 놓친 대화가 없도록.

Firestore의 데이터 변경을 구독합니다. 새 글과 댓글, 좋아요·댓글 수의 변화를 반영해 대화의 흐름을 이어갑니다.

  • 게시글 목록의 최신 구간과 공지 변화를 구독
  • 불러온 댓글·답글 범위의 수정과 삭제도 반영
  • 이전 글과 댓글은 커서 기반으로 이어서 조회

변화를 듣고 있어요

  1. 01

    다른 사용자의 댓글 작성

  2. 02

    Firestore 변경 감지

  3. 03

    열린 화면에 반영

화면별로 필요한 범위를 구독합니다. 네트워크 상태와 Firebase 설정에 따라 반영 시간이 달라질 수 있습니다.

INFINITE SCROLL + CURSOR PAGINATION

스크롤은 자연스럽게, 불러오기는 필요한 만큼.

목록을 읽다가 아래로 내려가면 다음 글을 이어서 불러옵니다. 페이지 번호를 누르며 이동할 필요 없이, 이미 읽던 흐름 그대로 더 많은 이야기를 만날 수 있습니다. 더 보기 버튼으로 직접 불러올 수도 있습니다.

  1. 처음부터 전부 불러오지 않아요

    글을 일정 개수씩 나눠 조회합니다. 긴 게시판도 필요한 분량부터 보여 주고, 스크롤에 따라 다음 분량을 추가합니다.

  2. 마지막 글 다음부터 이어서

    커서 기반 페이징으로 마지막으로 불러온 글 다음을 조회합니다. 이미 표시한 글은 중복 추가하지 않아 목록을 자연스럽게 이어 갑니다.

  3. 최신 소식과 지난 이야기, 함께

    목록의 최신 구간은 실시간으로 반영하고 이전 글은 이어서 조회합니다. 댓글과 답글도 나눠 불러와 긴 대화를 따라갈 수 있습니다.

직접 스크롤해 보세요

목록 안에서 아래로 스크롤하면 다음 6개 글이 이어집니다. 서버에 연결하지 않는 예시 데이터입니다.

  1. 01

    새로운 커뮤니티를 시작합니다

    예시 게시글 · memi

    BATCH 1
  2. 02

    오늘 배운 작은 개발 팁

    예시 게시글 · memi

  3. 03

    다른 언어로도 함께 이야기해요

    예시 게시글 · memi

  4. 04

    내가 좋아하는 작업 공간

    예시 게시글 · memi

  5. 05

    이번 주에 만든 것들을 공유해요

    예시 게시글 · memi

  6. 06

    댓글로 이어지는 새로운 아이디어

    예시 게시글 · memi

04 / BUILT FOR YOUR COMMUNITY

작성부터 운영까지, 하나의 흐름으로.

쓰는 일에 집중하는 에디터

리치 텍스트와 Markdown, 이미지·첨부파일로 글을 작성합니다. 저장하지 않은 변경이 있으면 페이지를 떠나기 전에 알려 줍니다.

곁에서 돕는 AI

맞춤법 검사와 문장 다듬기, 번역으로 작성을 보조합니다. 콘텐츠 검사와 사용 한도는 서비스 설정에 맞게 운영합니다.

역할에 맞는 운영

소유자·관리자·매니저·스태프·사용자의 권한을 나눕니다. 게시판 담당 범위와 작성 권한, 공개 범위를 설정합니다.

서비스에 맞는 게시판

목록·갤러리 등 글의 성격에 맞게 보여 주세요. 게시판 설정, 프로필, 댓글 피드와 신고 관리까지 연결됩니다.

05 / BUILT ON FIREBASE

신뢰할 수 있는 기반 위에, 보호 장치를 겹겹이.

Google의 Firebase를 기반으로 사용자 인증, 앱 검증, 데이터 접근 제어를 연결합니다. 계정부터 데이터, AI 요청까지 각 단계에 맞는 보호 장치를 구성할 수 있습니다.

Firebase Authentication

내 폰이 로그인 열쇠가 되는 경험.

별도 사이트 비밀번호를 만들 필요 없이 Google·Apple 계정으로 시작하세요. 계정과 기기에서 지원·설정한 패스키나 생체 인증을 활용하면, 익숙한 휴대폰으로 본인 확인을 이어갈 수 있습니다.

로그인은 Google·Apple 인증 화면에서 진행하며, 메미보드가 해당 계정의 비밀번호나 지문·얼굴 정보를 직접 수집하지 않습니다. 실제 인증 방식은 제공자와 계정·기기 설정에 따라 달라집니다.

내 기기로 본인 확인

Google · Apple 로그인

인증된 계정으로 커뮤니티에 연결

DATA PROTECTION

전송할 때도, 저장할 때도 암호화

Firebase는 HTTPS로 전송 중인 데이터를 암호화합니다. Firestore·Authentication·Cloud Storage는 저장된 데이터에도 암호화를 적용합니다.

Firebase의 데이터 보호

APP CHECK

어디서 온 요청인지 한 번 더 확인

로그인이 사용자를 확인한다면, App Check는 앱의 진위를 확인하는 보호 장치입니다. 웹 앱 검증과 서비스별 적용을 통해 허가되지 않은 클라이언트의 접근과 남용을 줄입니다.

App Check 알아보기

SECURITY RULES

데이터에 닿는 순간, 권한 확인

Firestore·Storage 보안 규칙으로 데이터와 파일의 접근 범위를 제어합니다. 작성자·운영 역할·게시판 설정에 따른 권한을 화면뿐 아니라 데이터 요청에서도 검사하도록 구성합니다.

보안 규칙 알아보기

FIREBASE AI LOGIC

AI 기능에도 요청 보호를 연결

Gemini 기반 글쓰기·번역·콘텐츠 검사를 Firebase AI Logic으로 연결합니다. App Check 검증을 적용해 AI API의 무단 사용을 줄이고, 작성 보조에는 사용자별 사용 한도를 둡니다.

AI 요청 보호 알아보기

보호 수준은 호스트의 보안 규칙 배포와 App Check 적용 설정에 따라 달라집니다. 암호화가 공개 설정을 비공개로 바꾸지는 않으며, AI 콘텐츠 검사는 운영을 돕는 보조 기능입니다.

THE DIFFERENCE

게시판을 고를 때, 이 차이를 보세요.

새로고침과 단일 언어를 중심으로 만든 게시판에서 확장할 때 필요한 경험입니다. 개별 게시판 제품의 기능은 다를 수 있습니다.

게시판을 고를 때, 이 차이를 보세요.
비교 항목새로고침·단일 언어 중심 구성memi-board
언어 확장화면 문구와 번역 기능을 별도 개발10개 언어 UI + 선택형 콘텐츠 번역
변경 확인다시 조회하거나 새로고침Firestore 리스너로 변경 반영
글쓰기 보조외부 도구와 작성 화면을 오가며 편집에디터 안에서 AI 글쓰기·번역
서비스 통합화면과 연동 구조를 직접 구성Nuxt 모듈과 재사용 컴포넌트

START A CONVERSATION

지금 보고 있는 서비스에서도, 메미보드가 동작합니다.

실제 게시판을 둘러보거나, 설치 문서에서 내 서비스에 연결하는 방법을 확인해 보세요.

실제 게시판 둘러보기설치 문서
npm 패키지 ↗업데이트 내역 →

Nuxt 4 · Nuxt UI 4 · VueFire · Firebase Auth / Firestore / Storage

호스트 앱에서 Firebase 연결과 보안 규칙을 설정합니다. AI 콘텐츠 검사는 클라이언트 보조 기능이며 서버 검증을 대신하지 않습니다.