Edit ‘서버자파리/작업과정/텍스트시각화’ by 태경

Edit ‘서버자파리/작업과정/텍스트시각화’ (by 태경 at 02 Dec 25 20:17 KST)

Hyphae affected: 서버자파리/작업과정/텍스트시각화

diff --git a/서버자파리/작업과정/텍스트시각화.myco b/서버자파리/작업과정/텍스트시각화.myco
index 84ed434..76ed6e0 100644
--- a/서버자파리/작업과정/텍스트시각화.myco
+++ b/서버자파리/작업과정/텍스트시각화.myco
@@ -27,5 +27,122 @@
* 100자 초과 시 100자로 자르고 `...` 추가
+}

-}
+== 시각화
+
+== 기능 정의 (간단하게)
+
+++작은 선이 모여 패턴을 이루도록. 패턴이 모여서 풍경을 만들도록.++
+
+=== 시각화 목적
+- 음성 기록을 식물 형태로 변환하여 기록 과정의 즐거움과 지속성을 높임
+- 시각적 아카이브를 통해 기존 기록 탐색을 유도
+
+=== 시각화 결과
+- 각 음성 기록 = 하나의 식물
+- 데이터(txt) 기반으로 잎 개수·형태 변화
+
+=== 스타일
+- 거칠지만 자유로운 드로잉 스타일
+- 연필·펜 질감, 패턴 기반 채움
+- 관엽·선인장·허브 등 다양한 식물 형태
+- 색 대신 패턴으로 면 구성
+- 식물 간 겹침도 자연스럽게 표현
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+----
+
+== 시각화 목적
+
+- 기록 동기 부여: 음성 기록을 시각적인 형태(식물)로 변환하여, 기록 과정을 시각적으로 즐기고 지속할 수 있도록 함.
+- 탐색 유도: 이미 기록된 음성 기록들을 식물 형태로 보여주어, 과거 기록을 다시 살펴보는 계기와 탐색 동기를 제공.
+
+
+== 시각화 결과물
+
+- 형태: 각 음성 기록 → 하나의 식물 그룹으로 표현.
+
+- 변화 요소: 기록 데이터(텍스트) 기반으로 잎의 개수와 배치가 달라짐.
+- 문장 수, 단어 수 등의 지표를 레벨(1~17)로 변환하여 잎 개수 결정.
+- 다양성: 식물 형태(줄기, 잎 모양, 배치 패턴)는 데이터와 시드(seed)에 따라 달라져, 반복 기록이라도 변주를 가짐.
+
+
+
+=== 스타일 가이드
+
+- 자유로운 형태: 매끈한 디지털 벡터보다 거칠고 자연스러운 선.
+- 질감 : 연필/펜 드로잉 같은 질감과 패턴.
+- 패턴 채움: 색채보다는 해칭, 점묘 등 패턴으로 면을 구성.
+- 다양한 식물 형태: 관엽식물, 선인장, 허브 등 형태 변화를 반영.
+- 중첩 자연스러움: 식물들이 겹쳐도 시각적으로 어색하지 않게.
+
+- 데이터 기반 구성 : 음성 기록(txt)의 데이터를 기반으로 문장이나 단어가 이 많을수록 잎이 많아지고, 형태가 풍성해짐. 생각하기위해 비어있는 시간도 시각화에 반영함
+
+
+== 구현 방향
+
+=== 데이터 해석
+
+- 음성 기록(txt) → 문장 수 계산 → 레벨 매핑(1~17)
+- 레벨 = 잎 개수, 또는 잎/가지 조합 변화에 직접 반영
+- 시드(seed) 값으로 같은 기록은 같은 식물 형태 유지
+
+=== 시각화 엔진
+
+- SVG 기반 랜더링 (PNG 불사용)
+- 줄기·잎을 베지어 곡선으로 생성
+- feTurbulence + feDisplacementMap 필터로 손그림 효과
+- 잎, 줄기, 가지 위치를 시드 기반 난수로 배치
+
+=== UI/UX 흐름
+
+- 아카이브 페이지: 모든 기록을 격자 형태로 나열, 식물 미리보기 표시
+- 각 식물 클릭 시 세부 화면(기록 내용, 생성 날짜 등) 확인
+
+=== 확장 고려
+
+- 식물 종류 선택/랜덤
+- 잎 패턴 스타일 추가
+
+
+== 우선순위
+
+=== 기본 기능
+- 텍스트 데이터 기반 잎 개수 매핑
+- SVG 줄기+잎 랜더링
+- 아카이브 페이지에서 모든 기록을 식물 형태로 표추가 구현
+- 손그림 효과 필터 적용
+- 식물 다양성(모양, 패턴) 구현
+- 잎·줄기 성장 애니메이션
+
+=== 후속 확장
+- 사용자 맞춤 스타일 선택
+- 식물과 기록 내용을 결합한 공유 이미지 생성
+- 필터/검색 기능(기간, 키워드별)
+
+
+
+== 중요 검토 항목
+
+- 성능 문제: SVG 렌더링에서 레벨이 높거나 식물 수가 많아질 경우 브라우저 성능 저하 가능성.
+- 시드 값 관리: 동일 기록에서 시각화 결과가 변하지 않도록 고정 시드 생성 로직 필요.
+- 데이터 매핑 규칙: 문장 수, 단어 수, 문자 수 등 어떤 기준을 레벨 결정에 쓸지 확정.
+- 반응형 디자인: 작은 화면에서도 식물 형태와 텍스트가 잘 보이도록 비율 조정.
+- 접근성 고려: 패턴·선만으로 표현 시 시각장애인 또는 색각이상 사용자의 이해도 확보 방안.
+- 브라우저 호환성: feTurbulence 등 SVG 필터의 지원 범위와 모바일 환경 적용 여부 확인.
+- 저장·재사용: 렌더링된 SVG를 서버에 저장할지, 매 요청마다 생성할지 결정 필요.