본 콘텐츠는 UI 그래픽스를 이해하고 주요 원리를 챕터별로 학습할 수 있도록 구성한 지침서입니다. - by 박춘언 (Hermet Park)



1. UI 앱과 프레임워크

1. UI 앱 개발 이해
  1.1 UI 기본 원소
  1.2 UI 이벤트 핸들링
  1.3 UI 엔진과 앱 라이프사이클
2. UI 프레임워크 (TBD)
3. 뷰 (TBD)
4. 테마 (TBD)
5. 스케일러블 UI
  5.1 좌표계
    - 절대 좌표계
    - 정규 좌표계
    - 상대 좌표계
    - 원점 변환 (TBD)
  5.2 크기 제약
    - 텍스트 축약
    - 가변 영역과 고정 영역
    - 이미지 나인패치
    - 최소/최대 크기
  5.3 컨테이너
    - 레이아웃
    - 가중치와 정렬
    - 스크롤러 (TBD)
6. 스케일러블 UI 응용
  6.1 디바이스 독립적인 픽셀 (DPI/PPI)
  6.2 스케일 팩터
  6.3 자동 스크롤
  6.4 어댑티브 UI

2. UI 엔진의 심장, 캔버스
1. 렌더링 이해
  1.1 UI 렌더링 구성
  1.2 비트맵과 화소
  1.3 이미디어트와 리테인드 렌더링
  1.4 부분 렌더링 (TBD)
2. 캔버스 엔진
  2.1 프레임 버퍼
    - X Window와 Wayland
  2.2 객체 관리 및 선별
  2.3 렌더 영역 집합 (TBD)
3. 오브젝트 모델
  3.1 클래스 정의
    - 태그 식별자
  3.2 오브젝트 트리
  3.3 참조 안정성
  3.4 상태 로깅
4. 씬그래프
  4.1 씬그래프 트리
  4.2 객체 렌더링
  4.3 공간 변환 (TBD)
  4.4 레이어
5. 렌더링 백엔드 (TBD)


3. 벡터 래스터라이저

1. 벡터 그래픽스 역사 2. SVG (Scalable Vector Graphics) 2.1 SVG 개요 2.2 SVG 예제 - 그래디언트 채우기와 텍스트 - 스트로크 - 다각형 - 경로 2.3 SVG 효과 3. 벡터 기능 정의 3.1 도형 3.2 채우기 3.3 스트로크 3.4 클래스 설계 4. 도형 그리기 4.1 사각형 4.2 클리핑 - 클리핑과 컬링 4.3 직선 4.4 원 4.5 부채꼴 4.6 둥근 사각형 4.7 곡선 - 스플라인 곡선 - 베지어 곡선 4.8 경로와 폴리곤 - 경로 - 폴리곤 5. 변환 (TBD) 6. 채우기 6.1 단색 6.2 선형 그래디언트 6.3 원형 그래디언트 7. 스트로크 7.1 스트로크 넓이 7.2 스트로크 대쉬 7.3 스트로크 조인 - 마이터 (Miter) - 라운드 (Round) - 베벨 (Bevel) 8. 최적화 전략 8.1 RLE 최적화 (Run Length Encoding) 8.2 벡터 프로세싱 (SIMD)


4. 이미지 프로세싱
  1.1 이미지 포맷 종류
    - JPEG
    - PNG
    - GIF
    - Webp
    - EXIF
    - TIFF
    - BMP
    - JPEG2000
    - TGA
    - YCbCr 색상 공간
  1.2 이미지 로더
    - MIME (Multipurpose Internet Mail Extensions)
2 PNG 로더
    - CRC (Cyclic Redundancy Check)
  2.1 PNG 인코딩
    - 패스 추출
    - 스캔라인 직렬화
    - 필터링
    - 압축
    - 조각화
  2.2 IHDR
  2.3 IDAT
    - LZ77 압축 알고리즘
    - 허프만 부호화
  2.4 IEND
3. 이미지 스케일링
  3.1 포인트 샘플링
    - 최단 입점 보간
  3.2 슈퍼 샘플링
    - 이중선형 보간
4. 텍스처 매핑
  4.1 회전
  4.2 원근법
  4.3 매핑 알고리즘
  4.4 앤티에일리어싱
    - 슈퍼샘플링 앤티에일리어싱 (SSAA, Super Sampling AA)
    - 멀티샘플링 앤티에일리어싱 (MSAA, Mult Sampling AA)
    - 스팬 엣지 앤티에일리어싱 (SEAA, Span Edge AA)
5. 이미지 합성
  5.1 알파 블랜딩
  5.2 마스킹
  5.3 필터
    - 필터 스크립트
6. 최적화 전략
  6.1 이미지 캐싱
  6.2 텍스처 아틀라스 (TBD)


5. 폰트와 텍스트
(TBD)


6. 비주얼 인터렉션
  1.1 프레임 애니메이션
    - 애니메이션 루프
    - GIF 애니메이션
  1.2 프레임 제어
    - FPS (Frames Per Second)
    - 수직 동기화
    - 스크린 티어링 (Screen Tearing)
    - 더블/트리플 버퍼링
  1.3 시간 측정
    - 타임스탬프 (Timestamp)
    - 루프 타임 (Loop Time) (TBD)
    - CPU Scaling Governor
  1.4 시간 제어
  1.5 가속 제어
    - 이징 애니메이션 (Easing Animation)
    - 인터폴레이터 (Interpolator)
2. 애니메이션 기법
  2.1 프로퍼티 애니메이션 (Property Animation)
  2.2 키프레임 애니메이션 (Keyframe Animation) (TBD)
  2.3 스켈레탈 애니메이션 (Skeletal Animation) (TBD)
3. 필터 효과
  3.1 블러 필터
    - 가우시안 필터 (Gaussian Filter)
    - 렌더 패스 (Render Pass)
  3.2 필터 애니메이션
  3.3 그림자 필터 (TBD)
  3.4 잔광 필터 (TBD)
4. 입력 이벤트
  4.1 입력 신호 전달
  4.2 제스처
5. 스레딩
  5.1 멀티 스레딩 전략
    - 임계 영역 (Critical Section)
  5.2 태스크
  5.3 동기화
  5.4 태스크 스케줄링
    - 스레드 풀 (Thread Pool)