웨이퍼맵 개발 명세서

Jun 30, 2025 updated Jun 30, 2025 3d aws css javascript typescript

프로젝트 개요

일정: 2025년 7월 1일 하이닉스(분당) 미팅
목표: POC 개발
추가 확인사항: 7월 1일 화요일 답변 예정

1. 기본 웨이퍼 렌더링

1.1 웨이퍼 그리기

기능 정의

웨이퍼를 원형으로 가정하여 중심을 기준으로 캔버스에 렌더링

구현 방안

Three.js CylinderGeometry 사용
- 원형 웨이퍼: new THREE.CylinderGeometry(radius, radius, thickness, 32)
- MeshStandardMaterial로 realistic한 표면 구현
- 중심점 (0,0,0) 기준 배치
성능 최적화
- 웨이퍼 표면에 텍스처 매핑으로 실제감 향상
- 단일 Geometry 인스턴스 재사용으로 메모리 관리
- 웨이퍼 크기 유효성 검증 및 fallback 처리

참고 링크

1.2 기준선 그리기

기능 정의

원형 및 중심 가이드라인으로 렌더링
웨이퍼선과 확인이 가능해야 함

옵션

선 색상/굵기 설정
가이드라인 사이즈 확인 필요

구현 방안

LineGeometry와 LineMaterial 조합
- 원형 가이드라인: THREE.EllipseCurve로 원형 경로 생성
- 중심 십자선: THREE.BufferGeometry로 X,Y축 라인
- LineBasicMaterial로 색상/굵기 제어
고급 기능
- 웨이퍼 크기에 따른 가이드라인 자동 조정
- 웨이퍼보다 약간 위에 배치하여 z-fighting 방지
- LineDashedMaterial로 점선 스타일 지원

참고 링크

2. 공통 기능 (Common)

2.1 Scene 컨트롤

기능 정의

Zoom: 휠 컨트롤
Rotate: 캔버스 드래그 (중심 고정 상태로 회전)
Reset: 초기 상태로 되돌림

구현 방안

OrbitControls 커스터마이징
- enableDamping: true로 부드러운 조작
- target 고정으로 웨이퍼 중심 기준 회전
- minDistance/maxDistance로 줌 범위 제한
- Reset 버튼으로 초기 카메라 위치 복원

참고 링크

2.2 모드 관리

기능 정의

Shot 모드와 Focus Spot 모드 지원
각 모드별 데이터 구조는 상이함

구현 방안

Zustand 상태 관리
- useWaferStore에서 currentMode: 'shot' | 'focusSpot' 관리
- 모드 변경 시 해당 렌더러만 활성화
- 조건부 렌더링으로 성능 최적화
메모리 관리
- 비활성 모드의 데이터는 메모리에서 해제
- 모드별 설정값 localStorage 저장
- 모드 전환 실패 시 fallback 처리

참고 링크

2.3 툴바

기능 정의

캔버스 상단에 모드를 툴바로 렌더링

옵션

툴바 배경색, 선 색상/굵기 설정

구현 방안

React 컴포넌트로 UI 구성
- position: absolute로 캔버스 위 오버레이
- 버튼 그룹으로 모드 전환, 옵션 토글
- CSS-in-JS 또는 Tailwind로 스타일링
- 상태 변경 시 Three.js 씬 업데이트

참고 링크

2.4 고급 기능들

반투명 모드

Shot, Focus Spot의 반투명 모드 활성화/비활성화
Material의 transparent: true, opacity: 0.7 설정
토글 버튼으로 opacity 값 0.7 ↔ 1.0 전환

참고 링크

Three.js Material 투명도

가이드라인 토글

원형 및 중심 가이드라인의 표시 여부 제어
Scene 객체 visibility 토글
UI 체크박스와 연동하여 실시간 토글

참고 링크

카메라 시점 선택

위/옆/45도 중에 시점 선택
카메라 위치 프리셋
- Top View: camera.position.set(0, 0, 100)
- Side View: camera.position.set(100, 0, 0)
- 45° View: camera.position.set(70, 70, 70)
GSAP으로 부드러운 카메라 이동 애니메이션

참고 링크

이미지 저장

현재 웨이퍼의 이미지를 파일로 저장
renderer.domElement.toBlob()으로 이미지 추출
고해상도 저장: 임시 고해상도 렌더러 생성
기능 정의 전달 받을 예정

참고 링크

그리드

THREE.GridHelper(size, divisions)로 격자 생성
웨이퍼 크기에 맞춰 격자 간격 조정
토글 버튼으로 표시/숨김 제어

참고 링크

Three.js GridHelper

3. Shot Mode

3.1 기본 설정

카메라 시점

기본 시점: Top View
초기 위치: (0, 0, 100) - 웨이퍼 정면
FOV: 75도로 적절한 시야각

3.2 Shot 렌더링

기능 정의

웨이퍼 위에 사각형 형태로 Shot을 배치 (120~1000개)
상하좌우간격이 다를 수 있음
Shot의 회전값이 따로 값을 가짐
Shot의 겹침은 고민이 필요한 영역
value 값은 반드시 할당되어야 하며, 정의되지 않았거나 값이 존재하지 않는 경우 해당 Shot은 렌더링되지 않음
색상: 값에 비례하나 최소-최대값을 25단계 색상 스펙트럼으로 매핑 (파랑→초록→노랑→빨강)

옵션

border 색상/굵기, On/Off 설정
선택된 shot 색상 설정

구현 방안

InstancedMesh 고성능 렌더링
- THREE.InstancedMesh(boxGeometry, material, maxCount)
- 각 Shot별 변환 행렬 설정: setMatrixAt(index, matrix)
- 색상 스펙트럼: chroma.scale(['blue', 'green', 'yellow', 'red']).colors(25)
- 회전: Matrix4.makeRotationZ(angle) 적용
최적화 기법
- BufferAttribute 재사용으로 GPU 메모리 절약
- Z-index 기반 레이어링 또는 투명도로 겹침 처리
- Shot 데이터 유효성 체크 및 에러 핸들링
- instanceMatrix.needsUpdate = true로 효율적 갱신

참고 링크

3.3 Shot 선택

기능 정의

Shot 클릭 시 선택되며, 선택 상태는 보라색으로 표시
선택된 Shot에 데이터 상세정보 인터페이스 지원

구현 방안

Raycaster 클릭 감지
- THREE.Raycaster로 마우스 클릭 위치의 Shot 감지
- intersectObject(instancedMesh)로 인스턴스 식별
- 선택된 Shot의 색상을 보라색(#8A2BE2)으로 변경
- 선택 상태는 Zustand store에서 관리
- 툴팁/모달로 상세정보 표시

참고 링크

3.4 텍스트 삽입

기능 정의

Shot 중앙에 Shot 번호 표시

옵션

텍스트 위치 설정 (align)

구현 방안

CSS3DRenderer 오버레이
- CSS3DRenderer로 HTML 텍스트를 3D 공간에 배치
- 각 Shot 중심 좌표에 div 엘리먼트 생성
- CSS로 텍스트 스타일링 (폰트, 색상, 정렬)
- 카메라 이동 시 자동으로 위치 업데이트

참고 링크

3.5 Legend

기능 정의

Scene 우측에 Legend 렌더링
색상: Shot과 동일

확인 필요사항

각 단계별 컬러값이 일치해야할지

구현 방안

HTML/CSS 오버레이 구현
- React 컴포넌트로 색상 바 렌더링
- position: fixed로 우측 고정 배치
- 25단계 색상 그라데이션 표시
- 최소/최대 값 레이블 추가
- Shot 색상과 동일한 color scale 사용

참고 링크

CSS linear-gradient MDN

선택된 Shot 표시

선택된 Shot의 value를 해당 Legend 구간에 표시
선택된 Shot의 value를 기준으로 Legend 상의 위치 계산
화살표 또는 점 마커로 해당 위치 표시
애니메이션으로 부드러운 이동 효과

참고 링크

3.6 Focus Spot (Shot Mode에서)

기능 정의

Context Menu에서 Focus Spot 표시 여부 제어 가능
Focus Spot Mode의 Focus Spot과 동일하게 그리기

구현 방안

Shot Mode에서도 Focus Spot 표시 가능
우클릭 컨텍스트 메뉴로 토글
동일한 FocusSpotRenderer 컴포넌트 재사용
투명도 조정으로 Shot과 구분

참고 링크

React Context Menu 라이브러리

4. Focus Spot Mode

4.1 Focus Spot 렌더링

기능 정의

Focus Spot을 윗면이 약간 좁은 다각기둥 형태로 표현 (최대 14만개)
Focus Spot의 value 값에 따라 높이값 설정
Focus와 Chuck 두 타입으로 구분되며, 각기 다른 색상으로 표시
Focus 및 Chuck의 표시 여부를 개별 제어 가능 (default: 2가지 타입 모두 노출)

옵션

Focus Spot 각, 사이즈, 높이값 배율 설정

구현 방안

Custom Geometry + InstancedMesh
- ConeGeometry(radiusTop, radiusBottom, height, segments)로 다각기둥 생성
- 14만개 대응: 2개의 InstancedMesh (Focus용, Chuck용)
- 높이: height = baseHeight + (value * scaleFactor)
대용량 데이터 최적화
- LOD (Level of Detail)로 성능 최적화
- Frustum Culling으로 화면 밖 객체 제외
- 객체 재사용으로 GC 압박 최소화
- 화면 영역별 분할 렌더링 (청크 기반)
- WebWorker에서 데이터 처리
- Float32Array로 메모리 사용량 최적화

참고 링크

4.2 툴팁

기능 정의

Focus Spot을 클릭하여 선택 가능
선택된 Focus Spot의 데이터 상세정보 인터페이스 지원

구현 방안

HTML 툴팁 시스템
- Raycaster로 Focus Spot 클릭/호버 감지
- 마우스 위치에 따라 툴팁 div 표시
- 포탈(Portal)로 DOM 루트에 렌더링
- 데이터: ID, 타입, 측정값, 좌표 등 표시
- 클릭 시 고정, 외부 클릭 시 닫기

참고 링크

4.3 영역 선택

기능 정의

마우스 우클릭 후 영역지정 및 다수의 Focus Spot 선택/해제
마우스 우클릭 후 영역 지정된 만큼의 Focus Spot 선택, 그 밖의 영역은 선택 해제
선택된 영역의 상세 정보 인터페이스가 기본으로 제공되며, 영역 내 포함된 Focus Spot의 상세정보를 제공

확인 필요사항

선택 영역 어떻게 렌더링 되는지

구현 방안

복잡한 3D 영역 선택 구현
- 마우스 드래그로 선택 영역 생성
- 2D 화면 좌표를 3D 월드 좌표로 변환
- Frustum 또는 Box3로 영역 정의
- box.containsPoint(position)로 포함 여부 판정
- 선택된 영역을 반투명 와이어프레임으로 시각화
고급 선택 기능
- 공간 분할(Spatial Partitioning)로 선택 범위 최적화
- 실시간 선택 영역 프리뷰
- Ctrl/Shift 키로 다중/범위 선택 지원
- 선택된 객체 수, 평균값 등 실시간 표시

참고 링크

4.4 툴바 - 선택영역의 모양 선택

기능 정의

선택 영역 형태를 사각형, 원형, 도넛형 중 선택 가능

구현 방안

기하학적 선택 도구
- 사각형: Box3 경계 검사
- 원형: 중심점과 반지름으로 거리 계산
- 도넛형: 내부/외부 반지름 조건 검사
- 각 모양별 Helper 객체로 시각적 가이드 제공
- 드래그로 크기 조정 가능

참고 링크

4.5 슬라이더 - 높이 min/max 값조절

기능 정의

기능 정의 전달 받을 예정

구현 방안

높이 기반 필터링
- Range Slider로 최소/최대 높이 설정
- Focus Spot의 Z 좌표 기준 필터링
- spot.position.z >= minHeight && spot.position.z <= maxHeight
- 실시간 필터링으로 즉시 반영
- 애니메이션으로 부드러운 표시/숨김 전환

참고 링크

개발 우선순위

Phase 1: 기본 기능

웨이퍼 렌더링 및 기준선
Scene 컨트롤 (Zoom, Rotate, Reset)
모드 전환 시스템
기본 툴바

Phase 2: Shot Mode

Shot 렌더링 (InstancedMesh)
Shot 선택 및 색상 매핑
Legend 구현
텍스트 삽입

Phase 3: Focus Spot Mode

Focus Spot 렌더링 (대용량 최적화)
툴팁 시스템
영역 선택 기능
높이 필터링

Phase 4: 고급 기능

이미지 저장
반투명 모드
카메라 시점 프리셋
성능 최적화 및 폴리싱

기술 스택

핵심 라이브러리

Three.js: 3D 렌더링 엔진
React: UI 컴포넌트
Zustand: 상태 관리
Chroma.js: 색상 스케일링
GSAP: 애니메이션

성능 최적화

InstancedMesh: 대량 객체 렌더링
LOD (Level of Detail): 거리별 상세도 조절
Frustum Culling: 화면 밖 객체 제외
WebWorker: 데이터 처리 분리
메모리 풀링: 객체 재사용

개발 도구

TypeScript: 타입 안정성
ESLint: 코드 품질
Jest: 단위 테스트
Playwright: E2E 테스트

추가 고려사항

브라우저 호환성

Chrome, Firefox, Safari, Edge 최신 버전 지원
WebGL 2.0 지원 확인
모바일 브라우저 성능 최적화

접근성

키보드 네비게이션 지원
색상 대비 접근성 준수
스크린 리더 호환성

보안

XSS 방지를 위한 입력 검증
CSRF 토큰 사용
민감한 데이터 암호화