🎨 단어 구름 생성기 웹앱 개발 프롬프트

 

🎨 단어 구름 생성기 웹앱 개발 프롬프트

사용자 요청에 따라 다음 요구사항을 충족하는 단일 파일 HTML 웹 애플리케이션을 생성합니다.

1. 목표 및 영감 (Goal & Inspiration)

• 목표: 사용자가 입력한 텍스트를 분석하여 단어 빈도에 따라 크기가 다른 텍스트로 시각화하는 '단어 구름(Word Cloud)' 생성기를 만듭니다.

• 영감: 기능적이면서도 시각적으로 매력적이고 '예쁜' 디자인을 구현하는 데 중점을 둡니다. 단어 배치는 특정 모양에 얽매이지 않고, 중앙 집중형의 미적인 레이아웃을 지향합니다.

2. 기술 스택 및 구조 (Tech Stack & Structure)

• 파일 형식: **단일 파일 index.html**로 구현하며, 모든 HTML, CSS, JavaScript 코드를 포함합니다.

• 스타일링: Tailwind CSS CDN을 사용하여 빠르고 반응형이며 세련된 디자인을 적용합니다.

• 폰트: 'Inter' 폰트를 기본으로 사용합니다.

3. 핵심 기능 요구사항 (Core Functional Requirements)

1. 텍스트 입력: 사용자가 긴 텍스트를 입력할 수 있는 <textarea>를 제공합니다.

2. 단어 분석 (analyzeText 함수):

   • 입력된 텍스트에서 **한국어 불용어(Stop Words)**를 제거합니다.

   • 구두점, 숫자 등을 제거하여 텍스트를 정규화합니다.

   • 각 단어의 빈도수를 정확하게 계산합니다.

3. 단어 구름 렌더링 (renderWordCloud 함수):

   • 빈도수에 따라 단어의 글꼴 크기를 동적으로 다르게 설정합니다. (Tailwind의 text-lg부터 text-6xl까지의 클래스를 매핑하여 사용)

   • 단어 구름에 사용할 색상 팔레트를 정의하고, 각 단어에 랜덤하게 적용하여 다채로운 느낌을 줍니다.

   • 상위 50개 단어만 선택하여 시각화합니다.

   • 단어들이 중앙에 모여 보기 좋게 배치되도록 flex-wrap을 활용합니다.

4. 사용자 경험 (UX):

   • 단어 구름 생성 시 로딩 인디케이터를 표시하여 사용자에게 진행 상황을 알립니다.

   • 단어에 마우스를 올리면(hover) 살짝 커지는 (scale) 효과를 추가합니다.

   • 페이지 로드 시 기본 텍스트로 단어 구름을 즉시 생성하여 결과를 보여줍니다.