claude code plugin 설치(anthropics-claude-code)

 

https://www.youtube.com/watch?v=TeR-MRKs7f8

짐코드 

---

 

https://claudemarketplaces.com/plugins/anthropics-claude-code

 

 

/plugin marketplace add anthropics/claude-code

plugin 설치

 

 

 

 

 

13개 플러그인이 설치되었다.

 

plugin: fronted-design 설치

 

 

remove: 플러그인 제거

폴더없이 루트에 그대로 설치한 관계로 제거후 다시 설치예정

 

 

다시 설치

폴더: plugins-marketplace

 

 

/plugin marketplace add anthropics/claude-code

잘못 입력하면 이처럼 나온다. 붙여넣기 할 때 마우스 왼쪽만 클릭하면 입력된다.

 

마우스 좌 클릭으로 입력

fronted-design까지 설치

vscode

 

 

작성 완료

 

PRD.md

# 맥주 큐레이션 서비스 PRD

**문서 버전:** 1.0  

**작성일:** 2026-04-12  

**상태:** Draft

---

## 1. 개요

### 서비스 소개

맥주 입문자를 위한 취향 기반 큐레이션 웹 서비스. 짧은 온보딩 설문을 통해 사용자의 맛 선호도를 파악하고, 국내 편의점·마트에서 쉽게 구할 수 있는 맥주를 추천한다.

### 핵심 가치 제안

> "맥주를 잘 몰라도 괜찮아요. 몇 가지 질문에 답하면 나에게 딱 맞는 맥주를 알려드립니다."

### 목표

- 맥주 입문자가 선택 장벽 없이 자신에게 맞는 맥주를 발견할 수 있도록 한다.

- 복잡한 맥주 지식 없이도 맛 프로파일 기반으로 맥주를 이해할 수 있게 한다.

---

## 2. 타겟 사용자

**주요 타겟:** 맥주 입문자

- 맥주 종류나 스타일에 대한 사전 지식이 없는 사람

- 편의점·마트에서 어떤 맥주를 골라야 할지 모르는 사람

- 자신의 취향에 맞는 맥주를 찾고 싶지만 시도가 두려운 사람

---

## 3. MVP 범위

### 포함

- 온보딩 설문 (5문항) 기반 취향 파악

- 취향 매칭 점수 기반 맥주 1~3종 추천

- 추천 맥주 상세 정보 조회 (맛 프로파일, 특징, 음식 페어링, 구매 장소)

- 국내 편의점·마트 기준 맥주 50~100종 데이터

- 반응형 웹 (PC + 모바일)

### 제외 (MVP 이후)

- 회원가입 / 로그인

- 구매 연결 (외부 쇼핑몰 링크)

- 리뷰 / 평점 기능

- 수입 크래프트 맥주 데이터

- AI/ML 기반 고도화 추천

---

## 4. 성공 지표

| 지표 | 목표값 |

|------|--------|

| 온보딩 설문 완료율 | ≥ 70% |

| 추천 결과 페이지 평균 체류 시간 | ≥ 60초 |

| 30일 재방문율 | ≥ 30% |

---

## 5. 사용자 흐름

```

랜딩 페이지

    ↓ "내 맥주 찾기" 클릭

온보딩 설문 (5문항, 진행 바 포함)

    ↓ 설문 완료

추천 결과 페이지 (맥주 1~3종 카드)

    ↓ 카드 클릭

맥주 상세 페이지

```

---

## 6. 화면 명세

### 6.1 랜딩 페이지

- 서비스 소개 헤드라인 및 서브카피

- "내 맥주 찾기" CTA 버튼 (온보딩 설문으로 이동)

- 서비스 작동 방식 간략 설명 (3단계 아이콘)

### 6.2 온보딩 설문

- 상단에 진행 바 표시 (1/5 ~ 5/5)

- 질문 1개씩 순차 표시, 선택 즉시 다음 문항으로 이동

- 이전 문항으로 돌아가기 가능

**설문 문항:**

| 번호 | 질문 | 선택지 |

|------|------|--------|

| Q1 | 맛 선호 | 단맛 / 쓴맛 / 상관없음 |

| Q2 | 탄산 강도 | 약함 / 보통 / 강함 |

| Q3 | 음주 상황 | 혼자 가볍게 / 식사와 함께 / 모임·회식 |

| Q4 | 알코올 도수 | 가벼운 (3~4%) / 보통 (4~5%) / 강한 (6% 이상) |

| Q5 | 선호 향 | 과일향 / 곡물향 / 향 없는 게 좋음 |

### 6.3 추천 결과 페이지

- 추천 맥주 1~3종을 카드 형태로 표시

- 각 카드: 맥주 이미지, 이름, 브랜드, 스타일, 추천 이유 한 줄

- "다시 설문하기" 버튼 제공

### 6.4 맥주 상세 페이지

- 맥주 이름, 브랜드, 스타일, 도수

- 맛 프로파일 레이더 차트 (단맛 / 쓴맛 / 탄산 / 향 / 바디감)

- 특징 설명 (2~3문장)

- 음식 페어링 태그 목록

- 구매 가능 장소 (편의점 / 마트 이름 뱃지)

---

## 7. 데이터 모델

### Beer

```typescript

type Beer = {

  id: string;

  name: string;                        // 맥주 이름

  brand: string;                       // 브랜드명

  style: string;                       // 라거 | 에일 | 밀맥주 | 흑맥주 | 기타

  abv: number;                         // 도수 (%)

  bitterness: number;                  // 쓴맛 1~5

  sweetness: number;                   // 단맛 1~5

  carbonation: number;                 // 탄산 1~3

  aroma: 'fruity' | 'grainy' | 'neutral';

  flavor_profile: {                    // 레이더 차트용

    sweetness: number;                 // 1~5

    bitterness: number;                // 1~5

    carbonation: number;               // 1~3

    aroma_intensity: number;           // 1~5

    body: number;                      // 1~5

  };

  description: string;

  food_pairing: string[];

  available_at: string[];              // ["GS25", "CU", "이마트", ...]

  image_url: string;

};

```

### UserPreference (설문 결과)

```typescript

type UserPreference = {

  taste: 'sweet' | 'bitter' | 'neutral';

  carbonation: 'low' | 'medium' | 'high';

  situation: 'solo' | 'meal' | 'social';

  abv: 'light' | 'medium' | 'strong';

  aroma: 'fruity' | 'grainy' | 'neutral';

};

```

---

## 8. 추천 로직

규칙 기반 가중치 점수합산 방식.

1. 사용자 설문 5개 답변을 각 맥주 속성과 비교

2. 항목별 매칭 여부에 따라 점수 부여 (항목별 가중치 적용)

3. 총점 상위 1~3종 반환

**가중치 예시:**

| 항목 | 가중치 |

|------|--------|

| 맛 선호 (단/쓴) | 30% |

| 탄산 강도 | 20% |

| 도수 선호 | 20% |

| 향 선호 | 20% |

| 음주 상황 | 10% |

---

## 9. 기술 스택

| 영역 | 기술 |

|------|------|

| Frontend | React, Tailwind CSS |

| Backend | Node.js, Express |

| Database | SQLite (MVP), 추후 PostgreSQL 전환 가능 |

| Hosting | Vercel (Frontend), Railway (Backend) |

---

## 10. 비기능 요구사항

- **성능:** 추천 결과 응답 시간 ≤ 500ms

- **반응형:** 모바일(360px 이상) ~ 데스크탑(1440px) 모두 지원

- **접근성:** WCAG 2.1 AA 수준 준수 (색상 대비, 키보드 탐색)

- **브라우저 지원:** Chrome, Safari, Firefox, Edge 최신 2버전

---

## 11. 향후 고려사항 (Post-MVP)

- 로그인 및 취향 히스토리 저장

- 마셔본 맥주 평가 및 취향 고도화

- 구매 링크 연동 (쿠팡, 마켓컬리 등)

- 수입 크래프트 맥주 데이터 확장

- ML 기반 협업 필터링 추천 고도화

 

 

랜딩페이지 생성

> frontend-design 스킬을 활용해서 @docs/PRD.md 기반으로 랜딩페이지를 생성해주세요!
- 기술스택: next.js + shadcnui

 

npm run dev 자동실행

 

에러 발생 수정중

 

 

 

 

 

 

 

 

 

 

작업파일 작성

 

깃헙 업로드

 

 

 

 

 

README.md

 

 

claude.md파일 생성