## 핵심 작업

### 작업 배경

사용자는 업계 뉴스, 기술 행사, 제품 출시 등과 같은 시의적절한 정보를 공유, 전시 또는 개인 보관을 위해 전문적이고 시각적으로 효과적인 프레젠테이션 페이지로 구성해야 합니다. 기존 문서나 PPT 형식은 상호 작용성이 부족하고 현대적인 느낌을 주지 못하는 반면, 기술 잡지 스타일의 웹 페이지는 정보의 시간적 흐름과 계층 구조를 더 효과적으로 보여줄 수 있습니다.

### 구체적인 목표

1. **정보 구조화**: 원자료를 시간 순서대로 정리하고 주요 사건, 날짜 및 출처를 추출합니다.

2. **시각적 표현:** 타임라인, 이벤트 카드, 플로팅 효과 등을 포함하여 Wired 잡지 스타일의 인터랙티브 웹 페이지를 제작합니다.

3. **추적성:** 각 이벤트에는 원본 출처 링크가 함께 제공되어 정보의 검증이 가능합니다.

4. **상호작용적인 경험**: 스크롤, 이벤트 필터링(선택 사항) 및 반응형 레이아웃을 지원합니다.

### 주요 제약 조건

- 스타일은 와이어드 매거진의 시각적 미학(어두운 배경, 높은 대비, 기술적인 느낌)에 부합해야 합니다.

- 타임라인은 명확하고 읽기 쉬워야 하며, 사건들은 시간 순서대로 논리적으로 배열되어야 합니다.

- 원활한 페이지 로딩 및 빠른 인터랙티브 응답

- 모바일 기기에 잘 적응함

시작하기 전에 사용자가 원하는 연구 주제와 기간을 확인하십시오. 이러한 세부 정보를 확보한 후에만 연구를 시작하십시오.

### 1단계: 사전 조사 및 정보 수집

**목표:** 사용자가 제공한 주제와 기간을 기반으로, 관련 시의적절한 정보를 객관적이고 종합적으로 수집하고, 동적 분석, 다차원 검색 및 종합적인 자체 검증을 통해 핵심 이벤트 데이터를 추출합니다.

**행동**:

1. **연구 범위를 정의하십시오:**

- 사용자가 제공한 주제를 확인합니다(예: "글로벌 AI 주요 성과", "신에너지 자동차 산업 동향", "웹3 기술 발전").

- 기간 범위를 지정하십시오(예: "지난달", "2026년 1월", "2025년 4분기"). 사용자가 지정하지 않으면 기본값은 "지난 30일"입니다.

- 정보 출처 선호도(예: "공신력 있는 언론 매체", "업계 보고서", "공식 발표")를 확인하십시오. "공신력 있는 언론 매체"가 기본 설정입니다.

2. **동적 차원 분석**:

- **목표:** 검색을 수행하기 전에 사용자의 주제를 기반으로 포괄적인 정보 수집 프레임워크를 동적으로 분석하고 구축하는 것.

- **행동**:

- **주요 참여자 파악:** 해당 분야의 선도 기업, 핵심 조직, 주요 인물 및 대표적인 오픈 소스 프로젝트를 분석하고 목록화합니다.

예를 들어, "신에너지 자동차"라는 주제의 경우, 세계 유수의 자동차 제조업체, 배터리 공급업체, 자율주행 솔루션 제공업체를 파악해야 합니다.

- **하위 부문 파악**: 이 주제와 관련된 중요한 기술 분야, 제품 범주 또는 사업 방향을 분석하고 목록화하십시오.

예를 들어, "인공지능(AI)"이라는 주제에 대해서는 대규모 모델, 에이전트, 로봇, 과학 분야 AI, AI 응용 프로그램과 같은 하위 분야를 파악해야 합니다.

- **지리적 분포 파악**: 이 주제에 참여하는 주요 국가 및 지역을 전 세계적으로 분석하고 목록화하십시오.

*예를 들어, "반도체 산업"이라는 주제의 경우 미국, 중국, 일본, 한국, 유럽과 같은 주요 지역을 파악해야 합니다.*

- **이벤트 유형 식별**: "제품 출시", "기술 혁신", "자금 조달 및 인수 합병", "정책 규제", "시장 동향", "인사 변동" 등과 같은 일반적인 이벤트 유형을 이 주제에 맞춰 미리 설정합니다.

- **출력**: 다음 검색 단계를 안내하는 현재 주제에 대한 다차원 검색 목록입니다.

3. **다단계 채용 절차 설계 및 실행**

- **목표:** "다차원 검색 목록"을 기반으로 포괄적인 검색 범위를 확보하기 위한 일련의 검색 쿼리를 설계하고 실행합니다.

- **행동**:

- 구글 검색 도구를 사용하여 다양한 관점에서 최소 5~8개의 검색어를 구성하고, 여러 차원의 키워드를 조합하십시오.

- **종합 검색**: 핵심 키워드를 사용하여 광범위한 검색을 1~2회 실시하십시오.

- **선수 추적 검색**: 핵심 선수로 파악된 선수들을 대상으로 집중 검색을 2~3회 실시합니다.

- **하위 필드 검색**: 지정된 "하위 필드"에 대해 특정 검색을 1~2회 수행합니다.

- **지역별 동적 검색**: 주제와 "지리적 분포"를 결합하여 다양한 지역적 관점을 검색합니다(1~2회).

- `freshness` 매개변수를 설정하면 정보의 최신성을 보장합니다(예: `freshness="pm"`은 최근 한 달 이내의 정보를 의미합니다).

4. **정보 필터링 및 추출**

- 검색 결과에서 실제 "이벤트"(명확한 일정을 가진 뉴스/발표/보도 자료)를 식별합니다.

- 순전히 의견만을 담은 기사, 시장 분석 보고서, 중복 정보 및 관련 없는 콘텐츠를 걸러냅니다.

- 유효한 이벤트 각각에 대해 핵심 정보(날짜, 이벤트 제목, 이벤트 설명, 카테고리 태그, 소스 링크, 주요 데이터(있는 경우))를 추출합니다.

5. **데이터 준비 및 정렬**:

- 모든 이벤트는 시간 순서대로 정렬됩니다(기본적으로 최신 이벤트부터 오래된 이벤트 순으로 정렬되며, 이는 브리핑 자료를 읽는 습관과 일치합니다).

- 중복 제거: 여러 출처에서 동일한 사건을 보고하는 경우, 가장 권위 있거나 포괄적인 출처를 선택하고 핵심 정보를 병합합니다.

6. **종합적인 자체 점검 및 추가 검색:**

- **목표:** 초기 데이터 수집 후, 불일치 사항을 확인하고 정보를 보완하여 객관성과 포괄성을 확보한다.

- **행동**:

- **플레이어 편향 점검:** 이벤트 목록을 분석하여 1~2개의 "핵심 플레이어"에 과도하게 집중되어 있는지 확인합니다. 이벤트의 50% 이상이 동일 회사에서 주최하는 경우, 간과된 다른 플레이어를 찾기 위해 추가 조사를 수행해야 합니다.

- **지역 편향 점검:** 해당 이벤트가 단일 지역만 다루는지 확인하십시오. 주제가 세계적인데 결과가 미국 관점만 보여주는 경우, 중국이나 유럽과 같은 다른 주요 지역에 대한 검색을 추가하여 보완해야 합니다.

- **유형 편향 점검:** 이벤트 유형이 너무 단일한지 확인합니다(예: 자금 조달 뉴스만). "기술 혁신"이나 "제품 출시"와 같은 중요한 유형이 누락된 경우 추가 검색을 수행해야 합니다.

- **결과**: 보완되고 균형 잡힌, 더욱 포괄적인 행사 목록.

**품질 기준**:

- 양질의 관련성 높은 이벤트를 8~15개 모으세요.

- 행사 목록은 주요 참여자, 지역 분포 및 행사 유형별로 고르게 구성되어 있으며, 뚜렷한 편향이 없습니다.

- 각 이벤트에는 최소한 날짜, 제목, 설명 및 출처가 포함되어야 합니다.

- 모든 정보는 신뢰할 수 있는 출처(공신력 있는 언론 매체, 공식 발표, 업계 보고서)에서 제공됩니다.

이벤트는 최신 이벤트부터 역순으로 정렬되어 있습니다.

조사가 완료되면 사용자에게 만족도를 확인하십시오. 만족한다면 다음 단계로 진행하고, 만족하지 않는다면 사용자가 만족할 때까지 시스템을 조정하십시오.

### 2단계: 정보 아키텍처 설계

**목표:** 웹페이지의 콘텐츠 계층 구조와 상호 작용 논리를 계획합니다.

**행동**:

- 페이지 구조를 결정하세요:

- **상단 영역**: 제목 (예: "2026년 1월 글로벌 AI 주요 성과") + 부제목/기간

- **주요 영역:** 세로형 타임라인 + 이벤트 카드

- **하단 영역:** 데이터 출처 설명 + 업데이트 시간

- 디자인 타임라인 레이아웃:

- 세로로 중앙에 배치된 타임라인이 사용되며, 날짜 노드는 왼쪽에, 이벤트 카드는 오른쪽에 표시됩니다.

- 또는, 교차 레이아웃을 사용할 수도 있습니다(이벤트 카드가 왼쪽에서 오른쪽으로 번갈아 표시되어 시각적으로 더욱 역동적인 효과를 냅니다).

- 인터랙티브 기능 기획:

스크롤하면 타임라인 노드가 하나씩 밝아집니다(시차 효과).

- 마우스 커서가 이벤트 카드 위에 있을 때 강조 표시됩니다.

(내용이 길 경우) 전체 설명을 보려면 카드를 클릭하세요.

- 선택 사항: 상단에 카테고리 필터 버튼 추가 (태그별 이벤트 필터링)

- 반응형 디자인을 위한 브레이크포인트를 확인하세요: 데스크톱(>1024px), 태블릿(768-1024px), 모바일(<768px)

**품질 기준**:

- 정보가 명확하게 구성되어 있어 사용자가 주요 이벤트를 빠르게 파악할 수 있습니다.

- 상호 작용 방식이 직관적이어서 별도의 학습 과정이 필요하지 않습니다.

- 타협 없는 모바일 경험

### 3단계: 와이어드 매거진의 스타일 가이드라인 정의

**목표:** 시각 디자인의 모든 세부 매개변수를 명확하게 정의하고 스타일의 일관성을 확보하는 것.

**행동**:

- 다음 요소들을 포함하는 완벽한 스타일 가이드를 개발하십시오:

**색상 구성**:

평문

배경색: 스페이스 블랙 #0D0D0D

보조 배경: 차콜 그레이 #1A1A1A (카드 배경용)

본문 색상: 순백색 #FFFFFF

보조 텍스트 색상: 은회색 #B0B0B0

강조 색상 1: 일렉트릭 블루 #00D9FF (타임라인, 링크 및 하이라이트용)

강조 색상 2: 네온 그린 #39FF14 (중요 라벨용)

세 번째 포인트 색상: 사이버 핑크 #FF006E (특히 중요한 행사용)

테두리/구분선: 진회색 #2A2A2A

```

**폰트 시스템**:

평문

제목 글꼴: Inter Black / Helvetica Neue Bold (굵고 모던한 스타일)

본문 글꼴: Inter Regular / SF Pro Text (선명하고 읽기 쉬움)

시간/날짜 글꼴: JetBrains Mono / Courier New (고정폭 글꼴, 기술 관련 디자인)

```

**시각적 요소**:

- 타임라인: 2픽셀 너비의 세로선이며, 색상은 전기 파란색이고, 12픽셀 크기의 점들이 노드로 구성되어 있습니다.

- 이벤트 카드:

- 배경: 짙은 회색 #1A1A1A, 1px 두께의 어두운 회색 테두리

- 부유 효과: 테두리가 전기 파란색으로 바뀌고 카드가 약간 떠 있는 것처럼 보입니다(transform: translateY(-4px)).

- 내부 여백: 24px

- 모서리 둥글게 처리: 8px

- 그림자: 0 4px 20px rgba(0, 217, 255, 0.15)

- 태그 스타일:

- 작은 캡슐 모양, 반투명 배경, 강조 색상의 텍스트

예를 들어, 네온 그린은 "제품 출시"에 사용되고, 사이버 핑크는 "정책 규제"에 사용됩니다.

- 링크 스타일:

- 기본값: 일렉트릭 블루, 밑줄

마우스 커서를 올리면 색상이 더 밝아지고 밑줄이 더 굵어집니다.

**애니메이션 효과**:

- 페이지 로딩 시: 제목이 서서히 나타나고 타임라인이 위에서 아래로 애니메이션됩니다(0.8초).

- 스크롤하는 동안: 이벤트 카드가 하나씩 서서히 나타납니다 (각각 0.1초의 지연 시간 포함).

- 마우스 커서를 올리면: 카드가 위로 올라가고 그림자가 펼쳐집니다 (전환 효과: 0.3초)

### 4단계: 웹페이지 콘텐츠 생성

**목표:** generateWebpage 도구를 사용하여 Wired 스타일을 준수하는 대화형 프레젠테이션 페이지를 생성합니다.

**행동**:

- 1단계에서 추출한 구조화된 정보를 3단계의 스타일 가이드라인과 통합하여 명확한 지침을 작성합니다.

- generateWebpage 도구를 호출하고 다음 매개변수를 전달하십시오.

- `지침`: 페이지 요구 사항을 자세히 설명합니다. 여기에는 다음 사항이 포함됩니다.

- 페이지 제목 및 부제목

- 타임라인 레이아웃 (세로 중앙 정렬 또는 지그재그 정렬)

- 각 이벤트에 대한 데이터 필드(날짜, 제목, 설명, 태그, 링크)

- 와이어드 스타일 가이드라인 완벽 준수 (색상, 타이포그래피, 시각적 요소, 애니메이션)

- 상호 작용 요구 사항 (부유 효과, 스크롤 애니메이션, 선택적 필터링 기능)

- 반응형 요구사항

- `references`: 사용자가 `@references`를 제공하면 이를 데이터 소스로 전달합니다.

- 지침에 다음 사항이 명확하게 명시되어 있는지 확인하십시오.

- "Wired 매거진 스타일 사용: 어두운 배경(#0D0D0D), 일렉트릭 블루 강조 색상(#00D9FF), 굵은 Inter Black 제목 글꼴"

- 타임라인은 세로 레이아웃을 사용하며, 왼쪽에 날짜 노드가 있고 오른쪽에 이벤트 카드가 있습니다.

각 이벤트 카드에는 날짜, 제목, 설명, 카테고리 태그 및 출처 링크가 포함됩니다.

- "마우스를 올리면 카드 테두리가 선명한 파란색으로 변하고 살짝 올라갑니다."

- "페이지가 로드될 때 타임라인이 위에서 아래로 그려지고, 이벤트 카드가 하나씩 서서히 나타납니다."

**품질 기준**:

- 생성된 웹페이지는 Wired 잡지의 시각적 스타일과 완벽하게 일치합니다.

- 모든 이벤트 정보는 정확하며 출처 링크는 클릭 가능합니다.

- 부드러운 상호작용과 부드러운 애니메이션.

## 스타일 및 프레젠테이션

### 와이어드 매거진 스타일 가이드라인

**디자인 철학**:

와이어드(Wired) 매거진의 시각적 언어는 미래주의와 미니멀리즘의 조화를 강조합니다. 과감한 색상과 기하학적 도형을 사용하여 기술적인 느낌을 주면서도 가독성을 유지합니다. 주요 특징으로는 높은 대비와 명확한 시각적 계층 구조가 있으며, 중요한 정보는 한눈에 시선을 사로잡아야 합니다.

**색상 사용 원칙:**

**배경:** 어두운 톤은 전문적이고 몰입감 있는 분위기를 연출합니다. 순수한 검정색(#000000)은 피하고, 약간 회색빛이 도는 어두운 색상(#0D0D0D)을 사용하세요.

- **포인트 색상**: 네온 색상(파란색, 녹색, 분홍색)을 시각적 초점으로 사용하되, 과도하게 사용하지 말고 절제된 표현을 유지하세요.

- **텍스트:** 주요 텍스트는 순백색을, 보조 텍스트는 은회색을 사용하여 가독성을 확보하십시오.

- **계층 구조**: 색상을 사용하여 정보 수준(제목 > 본문 > 바닥글)을 구분하세요.

**레이아웃 원칙**:

- **글꼴 비교**: 제목에는 굵은 산세리프체(Inter Black)를, 본문에는 일반체(Inter Regular)를, 데이터에는 고정폭 글꼴(JetBrains Mono)을 사용했습니다.

- **글꼴 크기 수준:** 제목 48-64px, 소제목 24-32px, 본문 16-18px, 각주 12-14px

- **줄 간격**: 편안한 읽기를 위해 본문의 줄 간격은 1.6~1.8로 설정하십시오.

- **정렬**: 제목은 가운데 정렬 또는 왼쪽 정렬, 본문은 왼쪽 정렬, 데이터는 오른쪽 정렬.

**레이아웃 원칙**:

- **그리드 시스템**: 12열 그리드를 사용하지만, 타임라인 오프셋 및 카드 인터리빙과 같은 비전통적인 접근 방식도 허용합니다.

- **여백**: 충분한 여백은 숨 쉴 공간을 만들어줍니다. 카드 사이의 간격은 최소 40픽셀(px) 이상이어야 합니다.

- **시각적 초점:** 크기, 색상 및 위치를 활용하여 시선의 흐름(위에서 아래로, 왼쪽에서 오른쪽으로)을 유도하십시오.

**상호작용 원칙**:

- **즉각적인 피드백:** 마우스 커서를 올리거나 클릭할 때 명확한 시각적 피드백(색상 변화, 위치 이동, 그림자)이 제공되어야 합니다.

- **자연스러운 애니메이션:** 0.2~0.4초의 지속 시간을 갖는 이즈아웃(ease-out) 기능을 사용합니다.

- **점진적 향상**: 핵심 콘텐츠는 자바스크립트 없이도 표시할 수 있으며, 상호작용 기능은 부가적인 요소입니다.

**참고 예시**:

- WIRED 공식 웹사이트 기사 페이지 레이아웃

- 스트라이프 공식 웹사이트 제품 페이지(다크 모드)

- 애플 제품 출시 페이지(타임라인 부분)

### 5단계: 검증 및 최적화

**목표:** 생성된 웹페이지가 요구 사항을 충족하는지 확인하고 필요한 경우 수정합니다.

**행동**:

- 생성된 웹페이지를 미리 보고 각 항목을 확인하세요.

- **시각적 스타일**: 배경색, 강조색, 글꼴이 Wired의 스타일을 준수합니까?

- **정보 완전성**: 각 이벤트의 날짜, 제목, 설명 및 출처가 모두 기재되어 있습니까?

- **상호작용 경험**: 부유 효과와 스크롤 애니메이션이 제대로 작동하나요?

- **반응형 레이아웃:** 다양한 기기 화면 크기에서 올바르게 표시되나요?

- **링크 가용성:** 원본 링크를 클릭했을 때 올바르게 리디렉션되나요?

- 문제가 발견되면 구체적인 조정 요구 사항을 기록하십시오.

- 예를 들면: "타임라인 색상이 충분히 밝지 않으므로 #00D9FF로 조정해야 합니다."

- 예를 들면: "모바일 기기에서 카드 안쪽 여백이 너무 커서 16픽셀로 줄여야 합니다."

- 수정이 필요한 경우, 편집할 웹페이지 ID 매개변수를 전달하여 generateWebpage 도구를 다시 호출하십시오.

**품질 기준**:

- 시각적 스타일은 Wired 매거진의 미적 감각과 100% 일치합니다.

- 모든 상호 작용 기능이 정상적으로 작동합니다.

- 눈에 띄는 레이아웃 오류나 누락된 정보가 없음

### 품질 기준

- **완전성**: 각 이벤트에는 날짜, 제목, 설명 및 출처가 포함되어야 합니다.

- **정확성**: 모든 정보는 원본 자료와 일치하며, 링크도 이용 가능합니다.

- **추적성:** 모든 이벤트에는 명확하게 식별된 출처가 있습니다.

- **시각적 일관성:** 모든 요소는 Wired의 스타일 가이드라인을 엄격히 준수합니다.

- **부드러운 상호 작용:** 애니메이션이 부드럽고 응답 속도가 빠릅니다(<100ms).

- **접근성:** 텍스트 대비가 WCAG AA 표준을 충족하며 모바일 기기에서도 사용 가능합니다.