다음은 개발자와 AI 간의 오늘 하루 대화 로그야. 이 로그를 분석해서 내가 하루 동안 무엇에 집중하고 시간을 썼는지 한눈에 파악할 수 있도록 Obsidian 마크다운 형식으로 요약해줘.
# 개발 일일 요약 (2026-03-20)
## 작업 분포
| 카테고리 | 비중 | |
|---------|------|---|
| UI/UX 고도화 및 인터랙션 | 40% | ████░░░░░░ |
| 지도 및 3D 기능 통합 | 30% | ███░░░░░░░ |
| 프로젝트 초기 세팅 및 아이템 선정 | 15% | █░░░░░░░░░ |
| 다국어 및 데이터 구조 | 10% | █░░░░░░░░░ |
| 배포/환경설정 및 디버깅 | 5% | ░░░░░░░░░ |
---
## 집중 영역 / 시간 소모 포인트
### 🟢 생산적 작업
- **아이템 선정 및 프로토타이핑**: WanderMate, FlowTrip, Locally 3개 아이디어를 신속히 비교하여 'Locally' 선정. Before/After 비교 UI와 타이핑 리빌 효과 등 MVP 핵심 기능 구현.
- **지도 인터랙션 고도화**: `MapVworld.jsx`에 다이아몬드 형태 핀 구현, 핀 클릭 시 방사형 네트워크 메뉴, AI 의사결정 트리 패널 슬라이드인 기능 추가.
- **다국어 및 접근성 강화**: `BiName` 컴포넌트 로직 수정하여 선택 언어를 Primary, 한국어를 Sub로 표기. Geolocation API를 활용한 현재 위치 거리 계산 로직 추가.
- **외부 접속 환경 구축**: Tailscale Funnel 및 Vite `allowedHosts` 설정을 통해 외부 도메인 접근 허용.
### 🔴 삽질/시간 소모 포인트
- **VWorld WMS 레이어 한계 극복**: 국토교통부 VWorld API 실내지도 레이어 로딩 실패로 인해, `IndoorMap3D.jsx`를 별도로 개발하여 Three.js 기반 커스텀 렌더링 방식으로 전환.
- **Three.js 오버레이 렌더링 이슈**: `IndoorMap3D.jsx` 컴포넌트 초기 렌더링 시 크기가 0으로 잡혀 검은 화면이 출력되는 문제를 `requestAnimationFrame`과 z-index 조정으로 해결.
- **피드 히어로 섹션 컨셉 잦은 변경**: 임팩트 강화를 위해 Local Radar → DotField → ExperienceField → SignalWaves/AITyping 등 4차례 전면 개선을 반복하며 시간 소모.
---
## 타임라인
| 시간 | 주요 작업 내용 |
|------|------|
| 00:11 | 🦦 **WanderMate** 프로젝트 생성 (Vite+React). 프로필, 동행 매칭, 일정 생성 MVP 구조 구현. |
| 01:27 | 🦦 **FlowTrip** 프로젝트 생성. 그룹 인원 설정, 취향 입력, AI 결과 플로우 구현. |
| 01:35 | 🦦 **Locally(로컬리)** 프로젝트 생성. 피드, 카드 상세, 꿀팁 올리기 페이지 구현. |
| 01:47 | 🦦 아이디어 임팩트 분석 후 로컬리로 개발 방향 확정. |
| 01:55 | 🦦 Locally 랜딩 페이지(`Feed.jsx`)에 Before/After 비교 영역 추가 및 제출 페이지(`Submit.jsx`)에 타이핑 효과 적용. |
| 12:57 | 🦦 3D 지도 기능 구현을 위해 `MapExplore.jsx` 생성 및 다크 테마 도시 구현. |
| 14:01 | 🦦 VWorld API 연동을 위한 `MapVworld.jsx` 생성 및 Leaflet 라이브러리로 서울 지도/마커 배치. |
| 14:17 | 🦦 지도 초기 위치를 인천공항 T1 실내지도로 변경 및 레이어 활성화 로직 수정. |
| 14:19 | 🦦 VWorld WMS 실내지도 레이어 로딩 실패 발생. Three.js 커스텀 렌더링(`IndoorMap3D.jsx`)으로 대체 결정. |
| 14:24 | 🦦 `IndoorMap3D.jsx`를 `MapVworld.jsx`에 통합 및 층 선택 버튼 연동. |
| 14:29 | 🦦 `IndoorMap3D` 검은 화면 이슈 해결. `getBoundingClientRect`와 `requestAnimationFrame`으로 렌더링 타이밍 조정. |
| 14:30 | 🦦 z-index 설정을 통해 UI 오버레이 계층 구조 수정. |
| 17:10 | 🦦 `TipCard.jsx`에 MP4 hover-to-play 비디오 썸네일(`VideoThumb`) 구현. |
| 17:20 | 🦦 `Feed.jsx`에 보이스 레코더 스타일 차트(`LocalRadar`) 구현. |
| 17:29 | 🦦 `MapVworld.jsx` 전면 재설계. 다이아몬드 핀, 네트워크 메뉴, 의사결정 트리 적용. |
| 18:24 | 🦦 히어로 섹션을 `Seoul Now` 컨셉으로 재설계. |
| 18:48 | 🦦 로테이션 지역 축소 및 `DotField` 시각화(현지인 vs 외국인) 구현. |
| 18:59 | 🦦 텍스트 중심의 `ExperienceField`(콜아웃 박스, 비교 바)로 교체. |
| 19:19 | 🦦 `SignalWaves`(SVG 노이즈)와 `AITyping` 컨셉으로 히어로 섹션 전면 개편. |
| 19:27 | 🦦 KR/EN/중/일 4개국어 지원 및 병기 로직 구현. |
| 19:33 | 🦦 선택 언어 대표 명칭 로직(`BiName`) 수정. |
| 19:37 | 🦦 Geolocation API 및 `haversine` 거리 계산 로직 추가. |
| 19:45 | 🦦 `pronunciation`, `character` 데이터 추가 및 카드 UI 업데이트. |
| 19:53 | 🦦 Tailscale Funnel 설정 및 외부 링크 연동. |
| 19:55 | 🦦 `allowedHosts` 오류 해결 및 Vite 서버 설정 수정. |
| 20:12 | 🦦 서비스 핵심 가치("현지인처럼 알고, 외국인으로서 경험한다") 논의. |
---
## 해결한 문제와 인사이트
### 1. 해커톤 아이템 선정 전략
- **해결**: 단순 기능 개선보다 '문화 번역'이라는 새로운 카테고리를 만드는 Locally가 심사위원에게 더 큰 임팩트를 준다고 분석하여 선정.
- **인사이트**: "구글은 장소를 번역하고, 로컬리는 경험을 번역합니다"와 같은 명확한 원 라이너(One-liner)가 서비스의 정체성을 잡는 데 중요함.
### 2. 지도 데이터 소스 선택 (VWorld vs Custom 3D)
- **문제**: VWorld WMS 레이어(`lt_c_aisrindoor`) 로딩 실패 및 스타일링 제약.
- **해결**: Three.js로 건물 데이터를 직접 모델링하여 렌더링하는 `IndoorMap3D.jsx` 방식으로 전환.
- **인사이트**: 공공 API는 커스터마이징에 제약이 많아, 높은 자유도가 필요한 프로젝트에서는 커스텀 3D 렌더링이 더 유리함.
### 3. Three.js 캔버스 초기 렌더링 타이밍
- **문제**: React 컴포넌트에서 DOM 크기 계산 전 렌더링되어 화면이 보이지 않음.
- **해결**: `useEffect` 내부에서 `requestAnimationFrame`을 사용하여 한 프레임 딜레이 후 렌더러 크기를 설정하여 안정화시킴.
- **인사이트**: DOM 크기 의존적인 그래픽스 라이브러리 사용 시 렌더링 타이밍 조절 로직이 필수적임.
### 4. 시각화 전략: 추상성 vs 맥락
- **문제**: 점(Dot) 기반 시각화가 임팩트가 부족하다는 피드백.
- **해결**: AI가 상황을 설명하는 텍스트와 직관적인 비교 바(`SignalWaves`, `AITyping`)로 변경.
- **인사이트**: 추상적인 데이터 시각화보다 상황 맥락(Context)이 있는 정보가 사용자에게 더 큰 임팩트를 줌.
### 5. 다국어 UI/UX 전략
- **해결**: 외국인 사용자를 위해 선택 언어를 크게(Primary), 한국어를 작게(Sub) 표기하는 전략을 채택.
- **인사이트**: 한국어를 모르는 타겟층에게 실사용 관점(간판 읽기 등)에서 접근성을 높이는 UI 배치가 중요함.
Supported by ai-log-sync & GLM-4.7