1. 벡터기반 지하철 노선도
렌더링 엔진
안덕용 과장 / 지도앱 개발팀
Naver

2. CONTENTS
1.SVG to Model Data

3.
2.Vector Rendering Engine

4.
3.QA

8. 1. SVG to Model Data

9. 1.1 Intro

10. 1.1 Intro

11. 1.1 Intro

12. 1.2 벡터 개발의 시작

13. 1.3 벡터 데이터 포멧
Easy for Designer
1. 많은 사람들이 사용하는 벡터 디자인 툴을 이용해서 쉽게 디자인 할 수 있어야 할 것
2. 디자이너가 각 벡터 오브젝트에 이름을 쉽게 명시 할 수 있을 것
Easy for Programmer
1. File Import 및 개발하기 편해야 할 것
2. 쉽게 디버깅이 가능해야 할 것
AI CDR CGM DXF EVA EMF Gerber HVIF IGES PGML
Designer
Easy
SVG
VML WMF Xar
Programmer

14. 1.3 벡터 데이터 포멧
SVG(Scalable Vector Graphic) : XML 기반

15. 1.3 벡터 데이터 포멧
SVG(Scalable Vector Graphic) : XML 기반
1. 지하철과 같이 복잡한 SVG에 적합한 오픈 소스가 없다
2. 필요한 데이타만 Import

16. 1.3 벡터 데이터 포멧
SVG(Scalable Vector Graphic) : XML 기반
1. 지하철과 같이 복잡한 SVG에 적합한 오픈 소스가 없다
2. 필요한 데이타만 Import
Element
지하철 노선
비고
path
line
polyline
polygon
rect
지하철 역
circle
역 좌표
text
역 이름

17. 1.4 모델 데이터 만들기
SVG File
Model Data
1. Rendering Data (호선별 전체 라인)
2. Meta Data (호선별 구간 라인, 지하철 역)
SVG File
Rendering Data
VM 2
Meta Data

18. 1.4 모델 데이터 만들기
호선별 전체 라인
호선별

19. 구간

20. 라인

21.
지하철

22. 역

24. 1.4 모델 데이터 만들기
SVG File
Data Model
호선별 전체 라인
렌더링 데이터
호선별 구간 라인
메타 데이터
지하철역

25. 1.4 모델 데이터 만들기
SVG File
Server Data
호선별
구간 라인
위경도 좌표
Data Model
메타 데이터
지하철역
지하철 역 이름
/ ID

26. 1.4 모델 데이터 만들기
SVG Processer
SVG File
Server Data
Data Model
호선별
전체 라인
위경도 좌표
렌더링 데이터
최적화
지하철 역 이름
/ ID
메타 데이터
호선별
구간 라인
지하철역

27. 1.5 모델 데이터 자동화
SVG File
Meta Data
호선별
전체 라인
지하철역
정보
호선별
구간 라인
노선 구간
정보
지하철역
Server Data
위경도 좌
표
지하철 역
이름 / ID
SVG
Processor
Rendering
렌더링
최적화

28. 1.5 모델 데이터 자동화
IOS
Android
WEB

29. 2. Vector Rendering Engine

30. 2.1 Vector Rendering Engine
대표적인 지하철 노선도 렌더링 방식
Tile Bitmap
One Bitmap

31. 2.1 Vector Rendering Engine
Bitmap Rendering
1. 서버를 통해 Bitmap을 받아오거나, Bitmap을 저장할 공간이 필요하다
2. 해상도에 따라 이미지 뭉개짐
3. 렌더링이 빠르다
Full Vector Rendering
1. 적은 용량의 벡터 데이터만 있으면 된다
2. 해상도에 전혀 상관이 없다
3. 렌더링이 느리다
Bitmap Rendering Based On Vector Model
1. 적은 용량의 벡터 데이터만 있으면 된다
2. 해상도에 따라 이미지 뭉개짐이 덜하다
3. 렌더링이 빠르다

32. 2.1 Vector Rendering Engine
지하철 노선도 렌더링 방식 : 벡터 타일 방식
Rendering
Vector
Data

33. 2.1 Vector Rendering Engine
지하철 노선도 렌더링 방식 : 벡터 타일 방식
Rendering
Vector
Data

34. 2.1 Vector Rendering Engine
지하철 노선도 렌더링 방식 : 벡터 타일 방식

35. 2.1 Vector Rendering Engine
지하철 노선도 렌더링 방식 : 벡터 타일 방식
장점
1. 적은 용량의 벡터 데이터만 있으면 된다
2. 해상도에 따라 이미지 뭉개짐이 덜하다
3. 렌더링이 빠르다
4. 화면에 보이지 않는 타일은 로딩되지 않는다
단점
1. 벡터 데이터로 타일을 하나를 만들때 소요되는 시간이 기기별로 틀리다.

36. 2.1 Vector Rendering Engine
Vector Model to Bitmap Tile

37. 2.1 Vector Rendering Engine
Vector Model to Bitmap Tile : SVGRenderer

38. 2.2 Bitmap Tile Cache
SoftReference / WeekReference Cache
1. Android 2.3(API9) : SoftReference / WeekReference GC 빈번
2. 즉, StrongReference 가 사라지면 바로 GC 대상
LruCache
1. LruCache는 LinkedHashMap에 의해 StrongReference 유지
2. Cache에 사용할 메모리 사이즈를 지정 (지정된 메모리 사이즈가 넘을 시, Hit가 되지 않는 것들은 제거
3. Support Library
4. http://developer.android.com/training/displaying-bitmaps/cache-bitmap.html

39. 2.2 Bitmap Tile Cache
Bitmap Tile Cache : Use LRU Cache
Strong Reference
LRU Cache

40. 2.2 Bitmap Tile Cache
Bitmap Tile Cache : Use LRU Cache
New
Strong
Reference
LRU Cache
로 이동

41. 2.2 Bitmap Tile Cache
Bitmap Tile Cache : Use LRU Cache
1. LRUCacheSize Memory : Tile 제거
2. OOM 발생시
- LRUCache clear
- Bitmap.Config.RGB_565 변경

42. 2.2 Bitmap Tile Cache
Bitmap Tile Cache : Use LRU Cache

43. 2.2 Bitmap Tile Cache
Bitmap Tile Cache : Use LRU Cache

44. 2.3 The End

45. QA

46. THANK YOU