링크수집 > 자동분류 > 노트테이킹 웹앱 만들어보기 (2주차)

1주차 사례글 링크

2주차에 시도하고자 했던 것

1주차에서 Figma Make로 만들었던 Prototype을 실제 작동하도록 만들기를 시도해보았습니다.

진행 방법

Gemini에게 Project Outline - 만들고자 하는것, 만들고자 하는 이유, 레퍼런스, 지금까지 시도한 것, 앞으로 시도한 것 - 을 Input으로 주고 프로젝트 로드맵을 만들어달라고 했습니다. 그 결과 아래와 같은 답변을 주었고, 저는 Cursor - Gemini를 왔다갔다 하며 작업을 진행했습니다.

🛠️ LinkVault (가칭) 개발 로드맵

이 프로젝트의 핵심 기술적 난관은 "CORS 우회(링크 정보 긁어오기)"와 "AI 자동 분류"입니다. 이를 해결하기 위한 단계별 계획입니다.

1단계: Figma에서 코드로 전환 (Frontend Setup)

Figma의 프로토타입을 실제 작동하는 웹 코드로 옮겨야 합니다. Firebase와 궁합이 가장 좋은 Next.js (React 프레임워크)를 추천합니다.

할 일:
- create-next-app을 사용하여 프로젝트 생성.
- Figma에서 디자인한 UI(카드 뷰, 사이드바, 입력창)를 React 컴포넌트로 코딩.
- Tailwind CSS를 사용하여 스타일링 (Figma의 디자인을 빠르게 CSS로 변환 가능).

2단계: Firebase 프로젝트 설정 및 연결 (Backend Setup)

Supabase 대신 Firebase를 사용하기로 하셨으므로, 이에 맞는 구성을 잡습니다.

할 일:
- Firebase Console에서 새 프로젝트 생성.
- Firebase Authentication: 구글 로그인 연동 (사용자별 데이터 격리를 위해 필수).
- Firestore Database: NoSQL 데이터베이스 생성.
- 앱 연동: 웹앱(Next.js)에 Firebase SDK 설치 및 초기화.

3단계: "자동화 엔진" 구축 (The Core Feature) 🌟

사용자가 가장 중요하게 생각하는 "자동 분류 및 키워드 추출" 단계입니다. 브라우저 보안 정책(CORS) 때문에 클라이언트(프론트엔드)에서 직접 네이버나 인스타그램을 크롤링할 수 없습니다. 따라서 Firebase Cloud Functions (서버리스 백엔드)가 필요합니다.

Cloud Functions 로직 설계:
1. 사용자가 링크 입력 → Cloud Function 호출.
2. Fetching: 서버에서 해당 URL 접속 (Puppeteer 또는 Cheerio 라이브러리 사용).
  - Open Graph 태그(og:title, og:image) 수집.
  - 본문 텍스트 일부 추출.
3. AI Analysis: 추출한 데이터를 OpenAI API (혹은 Gemini API)에 전송.
  - 프롬프트: "이 텍스트를 분석해서 1차 카테고리(플랫폼), 2차 카테고리(주제), 그리고 핵심 키워드 5개를 추출해줘."
4. Save: 분석된 데이터를 정리하여 Firestore DB에 저장.

⚠️ 주의: Firebase Cloud Functions에서 외부 네트워크(타 사이트 크롤링, OpenAI API 호출)를 사용하려면 Blaze 요금제(종량제)를 사용해야 합니다. (테스트 수준에서는 비용이 거의 발생하지 않으나 카드 등록이 필요합니다.)

4단계: 데이터베이스 구조 설계 (MECE & Analytics)

추후 "추세 분석"을 위해 데이터 구조를 잘 잡아두어야 합니다.

Firestore 컬렉션 구조 제안:
JSON
{

"links": [

{

"url": "https://...",

"title": "성수동 도자기 공방 추천",

"thumbnail": "image_url",

"platform_source": "Naver Blog", // 자동감지

"content_type": "Article", // 1차 분류

"category": "Culture/Art", // 2차 분류

"keywords": ["도자기", "다도", "성수동", "원데이클래스"], // AI 추출

"timestamp": "2025-11-22T12:00:00",

"user_id": "user_123"

}

]

}

5단계: 시각화 및 인사이트 (Visualization)

수집된 데이터를 바탕으로 "내 관심사의 변화"를 보여주는 단계입니다.

구현:
- Chart.js 또는 Recharts 라이브러리 사용.
- 차트 1 (Timeline): 월별 수집 링크 개수 및 주요 키워드 변화 (Line Chart).
- 차트 2 (Interest Map): 많이 수집된 키워드 워드 클라우드 (Word Cloud).
- 차트 3 (Source Share): 내가 정보를 주로 어디서 얻는지 파이 차트 (Pie Chart).

🚀 Next Step: 무엇부터 시작할까요?

가장 기술적으로 난이도가 있고 중요한 부분은 "링크를 넣었을 때 AI가 자동으로 분류해주는 백엔드 로직(3단계)"입니다. 이 부분이 검증되어야 UI를 입히는 의미가 있습니다.

제가 다음 중 어떤 작업을 먼저 도와드릴까요?

Cloud Functions 코드 작성: 링크를 던지면 -> HTML을 긁어와서 -> GPT로 분류하여 -> 결과를 리턴하는 핵심 백엔드 코드(Node.js)를 짜드릴까요?
DB 스키마 설계: 추후 데이터 분석(트렌드 파악)을 용이하게 하기 위한 Firestore 데이터 구조를 상세하게 잡아드릴까요?
프론트엔드 뼈대: Next.js와 Firebase를 연동하는 기초 프로젝트 세팅 가이드를 드릴까요?

이에 대해서 저는 아래와 같이 다시 Input을 넣었고,

정리해준 1~5단계 로드맵은 좋다고 생각해. 1단계부터 단계별로 진행하는게 좋겠어. 첫번째로 작업자인 나의 정보를 전달해줄테니까 그것을 고려해서 가이드를 주기를 바래. (개인 정보: 개발 베이스 없음 등)

아래와 같이 단계별로 구체적인 To Do를 받아 대화를 하면서 진행했습니다.

1단계 목표: 개발 환경을 세팅하고, 빈 캔버스(웹앱)를 띄운 뒤 Firebase와 연결하기

📋 준비물 (결제 및 설치)

본격적인 시작에 앞서, 딱 3가지만 준비해주세요. (이것들은 집을 짓기 위한 땅과 공구입니다.)

Node.js 설치 (무료)
- Node.js 공식 홈페이지에서 "LTS 버전"을 다운로드하여 설치하세요.
- 비유: 이것은 내 컴퓨터가 자바스크립트라는 언어를 이해하게 만드는 '번역기' 엔진입니다.
Cursor 설치 및 가입 (유료 권장)
- Cursor.com에서 에디터를 다운로드하세요.
- Pro 요금제($20/월)를 구독하시는 것을 강력 추천합니다. (가장 똑똑한 AI 모델인 Claude 3.5 Sonnet이나 GPT-4o를 무제한에 가깝게 쓸 수 있어 비개발자에게 필수입니다.)
Firebase 프로젝트 생성 (무료)
- Firebase Console에 접속하여 구글 아이디로 로그인하세요.
- '프로젝트 만들기'를 클릭하고 프로젝트 이름(예: LinkVault)을 입력하여 생성하세요. (Google Analytics는 사용 안 함으로 해도 됩니다.)

✅ 지금 바로 실행할 가이드

모델 선택창에서 claude-3.5-sonnet (혹은 화면에 보이는 가장 높은 버전의 Sonnet)을 선택하세요.
그 상태에서 아까 드린 [프롬프트 1]을 입력하고 실행하세요.

💡 꿀팁: 오른쪽 사이드바(Chat)보다는, 단축키 Ctrl + I (Mac은 Cmd + I)를 눌러서 나오는 Composer(중앙 입력창)를 사용하는 것이 파일 생성에 훨씬 유리합니다. Composer 창에서도 똑같이 모델을 Sonnet으로 맞춰주세요!

선택하시고 프롬프트를 실행한 뒤, 터미널에 초록색/파란색 글씨들이 움직이며 설치가 시작되면 알려주세요!

Cursor에 프롬프트를 실행한 뒤에는 아래와 같은 페이지가 나왔고,

Gemini의 응답은 아래와 같았습니다.

와, 대박입니다! 🎉 Cursor(Sonnet 모델)가 기획자님의 의도를 완벽하게 파악해서, 시키지도 않은 UI 디자인(입력 폼, 한글 텍스트, 스타일링)까지 미리 만들어두었네요. 아주 훌륭한 출발입니다.

지금 화면에 보이는 것은 "껍데기(Frontend)"입니다. '링크 저장' 버튼을 눌러도 실제로는 아무 일도 일어나지 않거나 콘솔에 글자만 찍힐 겁니다.

이제 아까 준비한 Firebase 열쇠(Config)를 이 껍데기에 연결해서, 버튼을 누르면 진짜로 데이터가 저장되게 만들어 봅시다.

const firebaseConfig = {

apiKey: "AIzaSyCHpEulVbxXyXbCebXO5W1U_8lcIHVWiAk",

authDomain: "linkvault-3e4b9.firebaseapp.com",

projectId: "linkvault-3e4b9",

storageBucket: "linkvault-3e4b9.firebasestorage.app",

messagingSenderId: "699492869826",

appId: "1:699492869826:web:a707a7d8f519d51449fd5b",

measurementId: "G-6HHP3B7LY2"

};

지금 화면 디자인은 유지하면서, 기능을 실제로 작동하게 만들고 싶어.

터미널에서 npm install firebase 명령어를 실행해서 라이브러리를 설치해줘.
src/lib 폴더 안에 firebase.ts 파일을 새로 만들고, 아래 설정 코드를 사용해서 초기화해줘.

JavaScript

// const firebaseConfig = {